/* The waitlist site, quastudy.se (rebuilt 2026-09-27).

   It is where short-form viewers land, so it looks like the thing they just
   tapped away from: the V3 shorts' squared paper, blue ballpoint, the
   teacher's red pen, the yellow highlighter, white cards held on with mint
   tape. Values are manim_scene_short.py's PAPER palette.

   Colour rule: GREEN is the only UI accent (buttons, links, focus, the
   success message). Blue ink and red pen are handwriting, never controls.

   Dark mode is the old dark board (SF_BG #16231C), which the shorts also
   still have (QUA_SF_THEME=dark). Cards, sticky notes and the index card are
   paper and stay paper in both modes (the shorts' question box was white on
   the dark board too), so everything inside them uses the --on-paper tokens,
   which never change.

   Fonts are served from this site, not Google: loading them from Google
   hands every visitor's IP address to Google, and the privacy page promises
   Cloudflare as the only one involved. Inter + Caveat are the shorts' own
   faces (backend/fonts), subset to Latin + Swedish + a few maths signs. */

@font-face {
  font-family: "Inter Qua";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter Qua";
  src: url("/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display Qua";
  src: url("/fonts/inter-display-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Caveat Qua";
  src: url("/fonts/caveat.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Paper things: the same in both modes. */
  --on-paper: #1A1A1A;          /* SF_HEAD */
  --on-paper-dim: #4A4A4A;      /* SF_SUB */
  --paper-card: #FFFEF9;
  --note: #FFF1A6;              /* SF_NOTE, the IDÉ sticky note */
  --tape: #9FE3B4;              /* PAPER_TAPE */
  --ink-blue: #1B3A94;          /* SF_TEXT on paper: blue ballpoint */
  --pen-red: #C62828;           /* SF_PEN */
  --hilite: #FFD84D;            /* SF_HILITE */
  --field-line: #8F8778;        /* an input's edge: 3:1 against the card */
  --placeholder: #6B6558;
  --button: #15803D;            /* the brand green, dark enough for white text */
  --button-hover: #166534;
  --on-button: #FDFDF8;
  --ok: #15803D;
  --err: #B42318;

  /* The page itself. */
  --page: #EFE9DA;              /* SF_BG on paper */
  --grid: rgba(120, 155, 205, 0.24); /* GRID_COLOR #BCCFE6, faded for reading */
  --ink: var(--on-paper);
  --ink-dim: var(--on-paper-dim);
  --link: #15803D;
  --hand: var(--ink-blue);
  --hand-red: var(--pen-red);
  --band: var(--hilite);
  --rule: rgba(26, 26, 26, 0.14);
  --shadow: 0 1px 2px rgba(96, 78, 40, 0.14), 0 14px 28px -14px rgba(96, 78, 40, 0.38);
  --focus: var(--ink-blue);

  --font: "Inter Qua", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Display Qua", "Inter Qua", system-ui, sans-serif;
  --font-hand: "Caveat Qua", "Segoe Print", "Bradley Hand", cursive;

  /* One shape: paper corners are nearly square. The phone is a device, and
     is the one exception. */
  --radius: 6px;
  --cell: 28px;                 /* one square of the paper */
  --gutter: 16px;
  --max: 1120px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #16231C;
    --grid: rgba(107, 133, 120, 0.16);
    --ink: #F2F1EA;
    --ink-dim: #B5C2BA;
    --link: #4ADE80;
    --hand: #A9C1FF;
    --hand-red: #FF8A80;
    --band: rgba(255, 216, 77, 0.3);
    --rule: rgba(242, 241, 234, 0.14);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 16px 32px -14px rgba(0, 0, 0, 0.6);
    --focus: #A9C1FF;
  }
}

/* Paper surfaces reset the page tokens to paper ones, whatever the mode. */
.card, .sticky, .note-yellow, .grid-paper, .index-card, .taped {
  --ink: var(--on-paper);
  --ink-dim: var(--on-paper-dim);
  --link: #15803D;
  --hand: var(--ink-blue);
  --hand-red: var(--pen-red);
  --focus: var(--ink-blue);
  color: var(--ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background-color: var(--page);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: -1px -1px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

img, video { display: block; max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 900; color: var(--ink); }
h2 {
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }

.hand { font-family: var(--font-hand); font-weight: 600; color: var(--hand); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.top { padding-block: 20px 4px; }
.brand { display: inline-block; }
.brand img { height: 30px; width: auto; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  gap: 44px;
  padding-block: 28px 56px;
  align-items: center;
}

.pen-note {
  display: inline-block;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: var(--hand-red);
  transform: rotate(-4deg);
  transform-origin: left bottom;
  margin: 0 0 14px 2px;
}

h1 {
  font-size: clamp(42px, 7.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  word-spacing: 0.06em;
}

/* The shorts' highlighter: a band over the lower two thirds of the words,
   swiped left to right once the page has loaded. */
mark.swipe {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(var(--band), var(--band));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 62%;
  padding-inline: 0.06em;
  margin-inline: -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lede {
  color: var(--ink-dim);
  font-size: 19px;
  margin-top: 18px;
  max-width: 30em;
}

/* ── The form ───────────────────────────────────────────────────────────── */
.card {
  background: var(--paper-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.signup {
  margin-top: 28px;
  padding: 18px;
  max-width: 500px;
  position: relative;
}
/* Taped on, like the question card in the shorts. */
.signup::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 96px;
  height: 22px;
  margin-left: -48px;
  background: var(--tape);
  opacity: 0.85;
  transform: rotate(-2deg);
}

.field-label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}
.signup .row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  color: var(--on-paper);
  background: #FFFFFD;
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.signup input[type="email"]::placeholder { color: var(--placeholder); opacity: 1; }
.signup input[type="email"]:focus-visible { outline-offset: 1px; }
.signup button {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 600;
  color: var(--on-button);
  background: var(--button);
  border: 0;
  border-radius: var(--radius);
  padding: 12px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.1s var(--ease);
}
.signup button:hover { background: var(--button-hover); }
.signup button:active { transform: translateY(1px); }
.signup button:disabled { opacity: 0.65; cursor: wait; }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.consent input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--button);
  flex: 0 0 auto;
}
.status { margin-top: 10px; font-size: 15px; min-height: 1.5em; }
.status:empty { min-height: 0; margin-top: 0; }
.status.ok {
  color: var(--ok);
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
}
.status.err { color: var(--err); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup.done .row, .signup.done .consent, .signup.done .field-label { display: none; }
.signup.done .status { margin-top: 0; }

/* ── A phone, playing a real short ──────────────────────────────────────── */
.phone-wrap { justify-self: center; display: grid; justify-items: center; gap: 16px; }
.phone {
  position: relative;
  width: min(300px, 66vw);
  aspect-ratio: 9 / 16;
  box-sizing: content-box;
  padding: 10px;
  border-radius: 36px;
  background: #121A16;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: rotate(2deg);
}
.phone video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 27px;
  background: #EFE9DA;
}
.sound {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #FDFDF8;
  background: rgba(18, 26, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.sound:active { transform: translateY(1px); }
.phone-wrap figcaption {
  font-size: 23px;
  line-height: 1.3;
  text-align: center;
  max-width: 17em;
  transform: rotate(-1.5deg);
}

/* ── The lesson ─────────────────────────────────────────────────────────── */
.lesson { padding-block: 48px; }
.lesson-head p { color: var(--ink-dim); margin-top: 14px; max-width: 38em; }

.lesson-stage {
  display: grid;
  gap: 28px;
  margin-top: 34px;
  align-items: start;
}

.taped {
  --tilt: -0.6deg;
  position: relative;
  background: var(--paper-card);
  padding: 10px;
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt));
}
.taped::before, .taped::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 88px;
  height: 24px;
  background: var(--tape);
  opacity: 0.85;
}
.taped::before { left: 18px; transform: rotate(-5deg); }
.taped::after { right: 18px; transform: rotate(4deg); }
.taped video { width: 100%; aspect-ratio: 16 / 9; background: #0F1116; }

.margin-notes { list-style: none; font-size: 25px; line-height: 1.3; display: grid; gap: 14px; }
.margin-notes li { position: relative; padding-left: 30px; }
.margin-notes li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--hand-red);
}
.margin-notes strong { font-weight: 600; color: var(--hand-red); }

.sticky {
  --tilt: 1.8deg;
  background: var(--note);
  padding: 20px 20px 22px;
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt));
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  max-width: 330px;
}
.sticky-title { color: var(--pen-red); font-size: 30px; margin-bottom: 4px; }

/* ── Everything else: the bento ─────────────────────────────────────────── */
.more { padding-block: 48px; }
.bento { display: grid; gap: 20px; margin-top: 30px; }
.cell { padding: 22px; border-radius: var(--radius); }
.cell p { color: var(--ink-dim); margin-top: 8px; }
.cell h3 { color: var(--ink); }

.shot {
  border-radius: var(--radius);
  overflow: hidden;
  background: #0E1015;
  margin-top: 18px;
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cell-daily .shot { aspect-ratio: 750 / 760; }
.cell-test .shot { aspect-ratio: 5 / 4; }
.shot-small { aspect-ratio: 16 / 9; margin: 0 0 16px; }

.note-yellow {
  --tilt: -1.2deg;
  background: var(--note);
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt));
}
.grid-paper {
  background-color: var(--paper-card);
  background-image:
    linear-gradient(rgba(120, 155, 205, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 155, 205, 0.28) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: var(--shadow);
}
.scribble {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.1;
  color: var(--hand);
  margin-bottom: 14px;
}
.circled, .boxed { color: var(--hand-red); display: inline-block; padding: 0 0.2em; }
.circled { border: 2.5px solid var(--hand-red); border-radius: 50% 46% 52% 44%; transform: rotate(-3deg); }
.boxed { border: 2.5px solid var(--hand-red); border-radius: 3px 5px 2px 6px; transform: rotate(2deg); padding: 0 0.3em; }

/* ── The subjects ───────────────────────────────────────────────────────── */
.subjects { padding-block: 48px; }
.index-card {
  --line: 44px;
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  background-color: var(--paper-card);
  background-image: linear-gradient(transparent calc(var(--line) - 1px), rgba(27, 58, 148, 0.18) calc(var(--line) - 1px));
  background-size: 100% var(--line);
  background-position: 0 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px 16px 46px;
}
/* The red margin line of a real index card. */
.index-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 1.5px;
  background: rgba(198, 40, 40, 0.45);
}
.index-card h2 { font-size: clamp(26px, 4vw, 36px); line-height: var(--line); margin-bottom: 6px; }
.index-card dl { display: grid; }
.index-card dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
  min-height: var(--line);
  padding-top: 6px;
}
.index-card dt { font-weight: 600; font-size: 18px; }
.index-card dd { font-family: var(--font-hand); font-weight: 600; font-size: 27px; line-height: 1.3; color: var(--hand); }

/* ── Closing ask + questions ────────────────────────────────────────────── */
.closing { padding-block: 56px 72px; display: grid; gap: 40px; align-items: start; }
.closing-ask > p { color: var(--ink-dim); margin-top: 10px; }

.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 36px 18px 0;
  position: relative;
  font-weight: 600;
  font-size: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--font-hand);
  font-size: 34px;
  line-height: 1;
  color: var(--hand-red);
  transition: rotate 0.25s var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--ink-dim); padding: 0 0 20px; max-width: 34em; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--rule); padding: 22px 0 36px; font-size: 14px; color: var(--ink-dim); }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--ink-dim); }
footer .social { display: flex; gap: 16px; margin-left: auto; }
.phone-wrap figcaption a { color: inherit; text-decoration-thickness: 1.5px; }
.phone-wrap figcaption a:hover { color: var(--hand-red); }

/* ── The privacy page ───────────────────────────────────────────────────── */
.prose-card { max-width: 760px; margin: 24px auto 56px; padding: 28px 22px 32px; }
.prose-card h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 10px; }
.prose-card h2 { font-size: 21px; letter-spacing: -0.01em; margin: 28px 0 6px; }
.prose-card p, .prose-card li { color: var(--ink-dim); }
.prose-card p + p { margin-top: 10px; }
.prose-card ul { padding-left: 1.2em; margin-top: 6px; }
.prose-card strong { color: var(--ink); }
.prose-card .updated { font-family: var(--font-hand); font-weight: 600; font-size: 22px; color: var(--hand); }
.back { display: inline-block; margin-top: 28px; font-weight: 600; }

/* ── Wider screens ──────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .signup { padding: 22px; }
  .index-card { padding: 22px 22px 18px 58px; }
  .index-card::before { left: 40px; }
  .index-card dl > div { grid-template-columns: 11em minmax(0, 1fr); }
  .index-card dt { font-size: 19px; }
  .prose-card { padding: 40px 48px 44px; }
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    padding-block: 40px 48px;
  }
  .phone { width: min(300px, calc((100dvh - 190px) * 9 / 16)); min-width: 240px; }

  .lesson, .more, .subjects { padding-block: 72px; }
  .lesson-stage {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    grid-template-areas: "video notes" "video sticky";
    column-gap: 44px;
    row-gap: 32px;
  }
  .lesson-stage .taped { grid-area: video; }
  .lesson-stage .margin-notes { grid-area: notes; padding-top: 12px; }
  .lesson-stage .sticky { grid-area: sticky; }

  /* Two wide cells over three: the two with the biggest screenshots on top. */
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .cell-daily, .cell-test {
    grid-column: span 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }
  .cell-daily .shot, .cell-test .shot { margin-top: 0; }
  .cell-test .shot { aspect-ratio: 750 / 800; }
  .cell-notes, .cell-plan, .cell-goal { grid-column: span 2; }

  .closing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .faq { margin-top: 8px; }
}

/* ── Motion ─────────────────────────────────────────────────────────────── */
/* Only for visitors who have not asked for less of it, and only where it
   says something: the note is written, the highlighter is swiped (as in the
   shorts), the cards are stuck down as they come into view. */
@media (prefers-reduced-motion: no-preference) {
  .pen-note { animation: write 0.9s 0.15s steps(14, end) both; }
  mark.swipe { animation: swipe 0.75s 0.55s var(--ease) both; }

  @media (scripting: enabled) {
    .reveal {
      transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
    }
    .reveal:not(.in) {
      opacity: 0;
      transform: translateY(18px) rotate(calc(var(--tilt, 0deg) * 2.5));
    }
  }
}

@keyframes write {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes swipe {
  from { background-size: 0% 62%; }
  to { background-size: 100% 62%; }
}