/* ============================================================================
   THEME: Recess Night only (2026-10-15). The :root tokens are the night palette
   (navy paper, cream ink, the same four tiles). There is no light palette and no
   switching: the owner wants the public pages dark for everyone.

   Prep Platform, Recess Mix
   The Bubbles variant with four things borrowed from its siblings. Bubbles
   supplies the ground: big flat blobs of tile colour drifting behind each
   section, puffy tiles with an inner highlight and a tinted shadow, the
   white hero bubble with its round tail, the stacked circles in the Ledger,
   the two overlapping bubbles in "Who it is for", and the spring press. On
   top of that sit Notebook's divider tabs (a sticky stack at the right edge
   of the landing page, vertical text at desktop, a row under the header at
   phone), Poster's outlined numerals with a tile-coloured hard shadow (the
   six counts and the Ledger's big percent), and a word wall from Stickers
   whose six colourful blocks flip like Cards' flashcards. The page still
   feels pressable, and nothing is awarded.

   The rules this sheet follows everywhere:

   1. Radius scale. --radius (28px) on every tile, card, panel, word block
      (both faces of it), pricing column, Ledger tile and answer choice.
      --radius-bubble (44px) on exactly three things: the hero question
      bubble and the two "Who it is for" bubbles. --pill (999px) on every
      button, strip tab, key mark, step number, dot and the tail circles,
      and on the two outer corners of each divider tab: the corners away
      from the edge it is stuck to (the bottom corners when the row hangs
      under the header, the left corners when the stack sits on the
      viewport's right edge). The other two corners stay square so the tab
      reads as stuck on. The backdrop blobs use an organic four-corner
      radius (60% 40% 55% 45% / 50% 60% 40% 50% and one mirror), which is
      the material, not a card radius. No other radius exists.

   2. The lip. Every pressable thing has a solid 4px edge under it:
         box-shadow: 0 4px 0 var(--lip);
      and on :active it moves down 4px and the edge goes away, so it lands
      exactly where the lip was. Each colour sets its own --lip. Buttons,
      answer choices and divider tabs keep this crisp lip; they are never
      puffy. A divider tab's lip is its own tile colour mixed 72% with the
      navy ink, and the "Flip for the meaning" button on a word block takes
      the same mix from its block. The press goes down fast (120ms) and
      springs back up on release (350ms, cubic-bezier(.2, .9, .3, 1.2)),
      motion permitting.

   3. Puff. Tiles, cards, panels and both faces of a word block get an inner
      top highlight (inset 0 2px 0 var(--puff)) and a soft shadow tinted with
      their own colour (0 12px 28px, the tile colour at 25%; surface cards
      use the reading blue at 22%). No blur filters, no gradients, no glow.

   4. Blobs. Behind each major section, one or two large flat blobs in a tile
      colour mixed to --blob-mix over the paper (18% by day, 22% at night),
      so navy or cream text on top still reads at 4.5:1 or better. They live
      in a .blobs layer that is absolutely positioned over the section with
      overflow: hidden and pointer-events: none, so a blob is clipped by its
      section, never by the page, and nothing scrolls sideways. Blobs never
      sit behind a question's stem or choices; the question cards are opaque
      and the blobs are placed off them. At most three on any screen (the
      hero has three; every other section has one or two). No blobs were
      added for the tabs, the numerals or the wall; they sit on what is
      already there.

   5. Drift. The blobs drift up to 8px over 14s, alternating, ease-in-out,
      only when motion is allowed. A section with a focused Specimen inside
      it (:focus-within) pauses its blobs, so nothing moves while a reader
      is answering.

   6. Numerals. The six counts in "What is in the bank" and the Ledger's big
      percent are outlined numerals: Fredoka 700, an ink text-stroke (2.5px,
      3px on the percent), a paper fill, and a hard text shadow (4px, 5px on
      the percent) in a tile colour, cycling math, reading, language, verbal
      across the six counts, and in the action blue on the percent. Where
      text-stroke is unsupported the numeral is solid ink with the same
      shadow. Every other number stays in Atkinson Hyperlegible Mono.

   7. The flip. A word block is a flashcard. Both faces share one grid cell
      inside a preserve-3d wrapper, so they always measure the same; the back
      is pre-turned 180deg and backface-visibility hides whichever face is
      turned away. The wrapper rotates over 500ms when motion is allowed and
      swaps instantly when it is not. The face that is turned away is inert,
      and focus moves to the button on the face that appears. The back keeps
      the block's colour as a band at the top and sits on --surface below it.
      The Specimen never flips.

   8. Type. Fredoka 600 for headings, 700 on the outlined numerals, and 500
      on buttons and tabs. Lexend 18px / 1.6 for body and UI. Atkinson
      Hyperlegible Mono for every other count, score and circle number.
      Emphasis is weight only.

   9. Colour. Every colour is a token on :root. Recess Night re-picks them
      below (not inverted). Tiles, tabs and word blocks keep their daytime
      colours in the dark and always carry navy text. Subject colours used as
      text are never smaller than 18px semibold. Status colours always travel
      with a word or glyph. The mix adds no colour tokens: the darker shades
      under the tabs and flip buttons are mixed from the tile colours.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* paper and ink */
  --paper: #151D2D;
  --surface: #1C2538;
  --ink: #F6F2E3;
  --ink-2: #C1BEB0;
  --rule: #2E3950;

  /* the one action colour */
  --action: #88A7FD;
  --action-text: #1A2438;
  --action-lip: #5A7AD3;

  /* lips: the darker edge under paper-coloured and ink-coloured controls */
  --lip-surface: #0B111E;
  --ink-lip: #BDB8A6;
  --ink-text: #151D2D;

  /* tiles: bright fills, always with navy text */
  --tile-ink: #1A2438;
  --reading: #55AEE8;
  --math: #F8C655;
  --language: #EC84B7;
  --verbal: #75DF8F;

  /* subject colours as text: 18px semibold or larger, never smaller */
  --reading-text: #8CCBFF;
  --math-text: #FFC27A;
  --language-text: #FFA3D0;
  --verbal-text: #9BEDAD;

  /* status: never colour alone */
  --correct: #9BEDAD;
  --review: #FFB27A;

  /* panels */
  --note-panel: #213439;   /* --verbal at 12% over --paper */
  --footer: #0D1322;
  --footer-text: #F6F2E3;
  --focus: #88A7FD;

  /* the Bubbles material: the two tokens this variant adds */
  --blob-mix: 22%;                       /* how much tile colour a blob carries over the paper */
  --puff: rgba(255, 255, 255, 0.2);     /* the inner top highlight on puffy things */

  /* shape */
  --radius: 28px;
  --radius-bubble: 44px;
  --pill: 999px;

  /* type */
  --font-display: Fredoka, "Arial Rounded MT Bold", Nunito, system-ui, sans-serif;
  --font-body: Lexend, Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-body: 18px;
  --fs-small: 16px;
  --fs-lede: 20px;
  --fs-h4: 20px;
  --fs-h3: 24px;
  --fs-h2: clamp(32px, 1.6vw + 18px, 42px);
  --fs-h1: clamp(40px, 4.3vw, 64px);
  --fs-count: clamp(36px, 2.4vw + 10px, 48px);
  --fs-outline: clamp(40px, 2.4vw + 14px, 52px);
  --measure: 66ch;

  /* layout */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --block: clamp(56px, 7vw, 96px);
}


/* ----------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
}
/* A short page (404) still puts the footer at the bottom of the screen. */
main { flex: 1 0 auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--action); }
strong { font-weight: 600; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -200px; z-index: 20;
  background: var(--action); color: var(--action-text);
  padding: 10px 18px; border-radius: var(--pill); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

/* Layout helpers */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 860px; }
.block { padding-top: var(--block); }
.block-last { padding-bottom: var(--block); }
.block-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 36px); }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); }
.prose { display: grid; gap: 1em; max-width: var(--measure); }
.prose h2, .prose h3 { margin-top: 0.6em; }
.after { max-width: var(--measure); margin-top: 24px; font-size: var(--fs-lede); line-height: 1.5; }
.bullets { display: grid; gap: 10px; padding-left: 1.2em; list-style: disc; }
.bullets li { padding-left: 4px; }
[class*="grid"] > *, [class*="row"] > *, .bento > *, .steps > li, .word-wall > li { min-width: 0; }

/* ----------------------------------------------------------------------------
   Blobs: the backdrop material (rule 4). A section with blobs is the
   positioning box; the .blobs layer clips; the .wrap sits above.
   ---------------------------------------------------------------------------- */
.has-blobs { position: relative; }
.has-blobs > .wrap { position: relative; z-index: 1; }
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob {
  position: absolute;
  width: var(--bw); height: var(--bh);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  background: color-mix(in srgb, var(--tone) var(--blob-mix), var(--paper));
}
.blob-b { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; }
.blob-lg { --bw: clamp(260px, 38vw, 560px); --bh: clamp(220px, 32vw, 470px); }
.blob-md { --bw: clamp(200px, 28vw, 400px); --bh: clamp(170px, 24vw, 340px); }
.blob-sm { --bw: clamp(150px, 18vw, 260px); --bh: clamp(130px, 15vw, 220px); }
.blob-reading { --tone: var(--reading); }
.blob-math { --tone: var(--math); }
.blob-language { --tone: var(--language); }
.blob-verbal { --tone: var(--verbal); }
/* Placements. Blobs stay inside their section vertically (top: 0 or
   bottom: 0) so a flat clipped edge never shows mid-page; they may run off
   the sides, where the viewport edge cuts them naturally. */
.blob-tl { top: 0; left: -5%; }
.blob-tr { top: 0; right: -6%; }
.blob-bl { bottom: 0; left: -5%; }
.blob-mr { top: 38%; right: -6%; }

/* ----------------------------------------------------------------------------
   Buttons, tabs, lips
   ---------------------------------------------------------------------------- */
.lip, .sp-tab, .sp-again, .sp-choice, .nav-toggle {
  box-shadow: 0 4px 0 var(--lip);
}
.lip:active, .sp-tab:active, .sp-again:active, .nav-toggle:active,
.sp[data-state="idle"] .sp-choice:active {
  transform: translateY(4px);
  box-shadow: none;
}
.btn {
  --lip: var(--lip-surface);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 28px;
  border-radius: var(--pill);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
}
.btn-primary { --lip: var(--action-lip); background: var(--action); color: var(--action-text); }
.btn-secondary { border: 2px solid var(--ink); }
.btn-sm { min-height: 44px; padding: 8px 20px; font-size: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; margin-top: 32px; }
.link-more { font-weight: 500; }

/* ----------------------------------------------------------------------------
   Header and nav
   ---------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--paper);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
/* The logo: the Rail mark (app/favicon.svg, the four divider tabs) stuck to the name. The mark's
   square edge sits against the first letter; the mark keeps its tile colours everywhere. */
.wordmark { display: inline-flex; align-items: center; gap: 0.18em; font-family: var(--font-display); font-weight: 600; font-size: 24px; text-decoration: none; line-height: 1; }
.wordmark .mark { width: 1.2em; height: 1.2em; display: block; flex: none; }
.site-nav ul { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) { text-decoration: none; font-weight: 500; }
.site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--action); }
.nav-toggle {
  --lip: var(--lip-surface);
  display: none; align-items: center; min-height: 44px; padding: 6px 18px;
  border: 2px solid var(--ink); border-radius: var(--pill); background: var(--surface);
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
}
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); padding: 8px var(--gutter) 24px;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--reading) 22%, transparent);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .site-nav li { width: 100%; }
  .site-nav a:not(.btn) { display: block; padding: 12px 0; font-size: 20px; }
  .site-nav .btn { margin-top: 12px; }
}

/* ----------------------------------------------------------------------------
   Divider tabs (from Notebook): five coloured tabs that link to the
   landing's sections. A row hanging under the header on phones and
   tablets; a stack fixed to the right edge of the viewport at desktop, with
   vertical text, so the strip never widens the page. Tile colours cycle,
   navy text, and each tab's lip is its own colour mixed darker (rule 2).
   The outer corners are pills (rule 1). Landing page only.
   ---------------------------------------------------------------------------- */
.tabs { padding: 0 var(--gutter); }
.tabs ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs li { display: flex; min-width: 0; }
.tab {
  display: flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px;
  border-radius: 0 0 var(--pill) var(--pill);
  background: var(--tone); color: var(--tile-ink);
  font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.tab[data-tone="reading"] { --tone: var(--reading); --lip: color-mix(in srgb, var(--reading) 72%, var(--tile-ink)); }
.tab[data-tone="math"] { --tone: var(--math); --lip: color-mix(in srgb, var(--math) 72%, var(--tile-ink)); }
.tab[data-tone="language"] { --tone: var(--language); --lip: color-mix(in srgb, var(--language) 72%, var(--tile-ink)); }
.tab[data-tone="verbal"] { --tone: var(--verbal); --lip: color-mix(in srgb, var(--verbal) 72%, var(--tile-ink)); }
.tab:focus-visible { outline-color: var(--tile-ink); outline-offset: 2px; }
@media (max-width: 479px) {
  /* Five equal tabs across a phone, so the row never wraps or overflows. */
  .tabs ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .tab { width: 100%; height: 36px; padding: 0 4px; font-size: 15px; }
}
@media (min-width: 1240px) {
  /* Fixed, not sticky, so the stack never adds width to the page. Vertically
     centred, which keeps it below the header. From 1240px up the 1200px wrap
     leaves at least 60px of paper right of the content (the 40px gutter plus
     half the slack), so the 44px tabs never sit on the hero bubble. */
  .tabs { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9; padding: 0; }
  .tabs ul { flex-direction: column; align-items: flex-end; gap: 10px; }
  .tab {
    writing-mode: vertical-rl; text-orientation: mixed;
    height: auto; width: 44px; padding: 20px 0;
    border-radius: var(--pill) 0 0 var(--pill);
  }
}

/* ----------------------------------------------------------------------------
   Cards, tiles, panels: all puffy (rule 3)
   ---------------------------------------------------------------------------- */
.card, .price-col, .ledger-tile, .review-line, .panel-surface, .tile:not([data-tone]) {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: inset 0 2px 0 var(--puff), 0 12px 28px color-mix(in srgb, var(--reading) 22%, transparent);
}
.card { padding: clamp(20px, 3vw, 32px); }
.card-kicker { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin-bottom: 16px; }
.tile {
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 28px);
  display: grid; gap: 8px; align-content: start;
}
.tile[data-tone] { color: var(--tile-ink); border: 1px solid transparent; }
.tile[data-tone="reading"] { background: var(--reading); box-shadow: inset 0 2px 0 var(--puff), 0 12px 28px color-mix(in srgb, var(--reading) 25%, transparent); }
.tile[data-tone="math"] { background: var(--math); box-shadow: inset 0 2px 0 var(--puff), 0 12px 28px color-mix(in srgb, var(--math) 25%, transparent); }
.tile[data-tone="language"] { background: var(--language); box-shadow: inset 0 2px 0 var(--puff), 0 12px 28px color-mix(in srgb, var(--language) 25%, transparent); }
.tile[data-tone="verbal"] { background: var(--verbal); box-shadow: inset 0 2px 0 var(--puff), 0 12px 28px color-mix(in srgb, var(--verbal) 25%, transparent); }
.tile[data-tone] :focus-visible { outline-color: var(--tile-ink); }
.tile[data-tone] a:hover { text-decoration-color: var(--tile-ink); }
.tile-name { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; }
.tile-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-size: var(--fs-count); font-weight: 600; line-height: 1; }
.tile-count small { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; }
.tile-meta { font-weight: 500; }
.tile-note { font-size: var(--fs-small); line-height: 1.5; }
.panel { border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; align-content: start; }
.panel h3 { margin-bottom: 4px; }

/* ----------------------------------------------------------------------------
   Hero: the headline among three blobs, the question in a white bubble with a
   round tail at its lower left, as if the page is asking you.
   ---------------------------------------------------------------------------- */
.hero { padding-top: clamp(28px, 4vw, 56px); }
.hero-grid { display: grid; gap: 32px; align-items: start; }
.hero-copy { display: grid; gap: 24px; align-content: start; }
.hero-line { font-size: 20px; line-height: 1.5; max-width: 42ch; color: var(--ink-2); }
.hero-card {
  position: relative; min-width: 0;
  border-radius: var(--radius-bubble);
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 44px;
}
.hero-card::before, .hero-card::after {
  content: ""; position: absolute;
  border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--rule);
  box-shadow: inset 0 2px 0 var(--puff), 0 8px 18px color-mix(in srgb, var(--reading) 22%, transparent);
}
.hero-card::before { width: 30px; height: 30px; left: 40px; bottom: -18px; }
.hero-card::after { width: 16px; height: 16px; left: 18px; bottom: -42px; }
/* The landing hero's three blobs, placed in the headline's column, off the bubble. */
.hero-blobs .blob:nth-child(1) { top: 0; left: -4%; }
.hero-blobs .blob:nth-child(2) { top: 190px; left: 30%; }
.hero-blobs .blob:nth-child(3) { top: 30px; left: 52%; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .hero-copy { padding-top: 24px; }
  .hero-blobs .blob:nth-child(2) { top: 300px; left: 24%; }
  .hero-blobs .blob:nth-child(3) { top: 40px; left: 38%; }
}

/* ----------------------------------------------------------------------------
   The bank in numbers: a count row and a four-tile bento
   ---------------------------------------------------------------------------- */
.counts { display: grid; gap: 28px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 40px; }
.counts li { display: grid; gap: 6px; }
/* Outlined numerals (from Poster, rule 6): Fredoka 700, an ink stroke, a
   paper fill and a hard shadow in a tile colour, cycling through the four.
   Without text-stroke the numeral is solid ink with the same shadow. */
.counts .num {
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: var(--fs-outline); line-height: 1; letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--math);
}
@supports (-webkit-text-stroke: 2px black) {
  .counts .num {
    color: var(--paper);
    -webkit-text-stroke: 2.5px var(--ink);
    paint-order: stroke fill;
  }
}
.counts li:nth-child(4n + 2) .num { text-shadow: 4px 4px 0 var(--reading); }
.counts li:nth-child(4n + 3) .num { text-shadow: 4px 4px 0 var(--language); }
.counts li:nth-child(4n + 4) .num { text-shadow: 4px 4px 0 var(--verbal); }
.counts span:last-child { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }
@media (min-width: 720px) { .counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .counts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.bento { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .bento > :nth-child(2) { grid-column: 1 / 2; grid-row: 2; }
  .bento > :nth-child(3) { grid-column: 3 / 5; grid-row: 1 / 3; }
  .bento > :nth-child(4) { grid-column: 2 / 3; grid-row: 2; }
  .bento > :nth-child(3) .tile-name { font-size: 40px; }
  .bento > :nth-child(3) .tile-count { font-size: clamp(60px, 6vw, 88px); }
}
.bento .tile { gap: 10px; }
.bento .tile-rows { margin-top: 8px; }
.tile-rows { display: grid; }
.tile-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid rgba(26, 36, 56, 0.18); font-size: var(--fs-small); line-height: 1.4; }
.tile:not([data-tone]) .tile-rows li { border-top-color: var(--rule); }
.tile-rows .num { font-weight: 600; white-space: nowrap; }

/* ----------------------------------------------------------------------------
   Specimen: the product preview, styled through its class hooks
   ---------------------------------------------------------------------------- */
.sp { display: grid; gap: 18px; }
.sp-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }
.sp-kind { font-weight: 600; color: var(--ink); }
.strip-card .sp-kind { display: none; }
.sp-passage { display: grid; gap: 12px; max-width: var(--measure); font-size: 17px; line-height: 1.6; }
.sp-stimulus { font-size: 19px; font-weight: 500; line-height: 1.5; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: var(--measure); }
.sp-stem { font-size: 20px; font-weight: 500; line-height: 1.45; max-width: var(--measure); }
.sp-columns { display: grid; gap: 12px 24px; grid-template-columns: minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .sp-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-col { display: grid; gap: 4px; }
.sp-col-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.sp-choices { display: grid; gap: 12px; }
.sp-choice {
  --lip: var(--lip-surface);
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px;
  min-height: 56px; padding: 10px 18px 10px 12px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: var(--fs-body); font-weight: 500; line-height: 1.4;
  cursor: pointer;
}
.sp-choice input {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
.sp-choice:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.sp[data-state="idle"] .sp-choice:hover { border-color: var(--ink); }
.sp-key {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--pill); border: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1;
}
.sp-choice::after {
  content: none;
  grid-column: 2; justify-self: start;
  font-weight: 600; font-size: var(--fs-body); line-height: 1.2;
}
@media (min-width: 640px) {
  .sp-choice { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sp-choice::after { grid-column: 3; justify-self: end; }
}
.sp-choice.is-picked { transform: translateY(4px); box-shadow: none; cursor: default; }
.sp-choice.is-picked:not(.is-correct) { border-color: var(--review); color: var(--ink); }
.sp-choice.is-picked:not(.is-correct)::after { content: "Your pick"; color: var(--review); }
.sp-choice.is-picked:not(.is-correct) .sp-key { border-color: var(--review); color: var(--review); }
.sp-choice.is-correct { border-color: var(--correct); }
.sp-choice.is-correct::after { content: "\2713\00a0 Correct"; color: var(--correct); }
.sp-choice.is-correct .sp-key { background: var(--correct); border-color: var(--correct); color: var(--surface); }
.sp:not([data-state="idle"]) .sp-choice { cursor: default; }
.sp-result:not([hidden]) { display: grid; gap: 12px; padding-top: 6px; max-width: var(--measure); }
.sp-verdict { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; }
.sp[data-state="right"] .sp-verdict { color: var(--correct); }
.sp[data-state="right"] .sp-verdict::before { content: "\2713\00a0"; }
.sp-why { color: var(--ink-2); }
.sp-why::before { content: "Why that one tempts you: "; font-weight: 600; color: var(--ink); }
.sp-again {
  --lip: var(--lip-surface);
  justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 8px 22px;
  border: 2px solid var(--ink); border-radius: var(--pill); background: var(--surface);
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
}

/* The strip: pill tabs over one specimen */
.sp-tabs { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-bottom: 28px; }
.sp-tab {
  --lip: var(--lip-surface);
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 18px;
  border: 1px solid var(--rule); border-radius: var(--pill); background: var(--paper);
  font-weight: 500; font-size: var(--fs-small); line-height: 1.2;
}
.sp-tab[aria-selected="true"] { --lip: var(--ink-lip); background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
.sp-panel { min-width: 0; }

/* ----------------------------------------------------------------------------
   The note: a two-tone layout
   ---------------------------------------------------------------------------- */
.note-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .note-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; } }
.note-panel {
  background: var(--note-panel); color: var(--ink);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); display: grid; gap: 18px;
  box-shadow: inset 0 2px 0 var(--puff), 0 12px 28px color-mix(in srgb, var(--verbal) 25%, transparent);
}
.note-panel p { max-width: var(--measure); }
.note-panel h4 { margin-top: 8px; }
.cues { display: flex; flex-wrap: wrap; gap: 8px; }
.cues li { background: var(--surface); color: var(--ink); border-radius: var(--pill); padding: 6px 14px; font-weight: 500; font-size: var(--fs-small); line-height: 1.3; }
.note-sentence { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.3; }
.note-card { display: grid; }
.note-card > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-top: 1px solid rgba(246, 242, 227, 0.2); }
@media (min-width: 560px) { .note-card > div { grid-template-columns: 11em minmax(0, 1fr); } }
.note-card dt { font-weight: 600; }
.note-card dd { line-height: 1.5; }
.note-footer { font-weight: 600; }

/* ----------------------------------------------------------------------------
   The Ledger
   ---------------------------------------------------------------------------- */
.ledger { display: grid; gap: 24px; }
.ledger-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.example-tag { display: inline-block; background: var(--ink); color: var(--ink-text); border-radius: var(--pill); padding: 8px 16px; font-weight: 600; font-size: var(--fs-small); line-height: 1.3; }
.ledger-level { font-weight: 500; color: var(--ink-2); }
.ledger-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .ledger-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } }
.ledger-main, .ledger-side { display: grid; gap: 24px; align-content: start; }
.overall { display: grid; gap: 4px; }
/* The big percent is an outlined numeral too (rule 6), shadowed in the action blue. */
.overall-pct {
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(56px, 6vw, 84px); line-height: 1; letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 5px 5px 0 var(--action);
}
@supports (-webkit-text-stroke: 2px black) {
  .overall-pct {
    color: var(--paper);
    -webkit-text-stroke: 3px var(--ink);
    paint-order: stroke fill;
  }
}
.overall-text { font-size: var(--fs-lede); line-height: 1.4; max-width: 40ch; }
.bands { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bands li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-2); }
.band { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-body); line-height: 1.2; }
.band svg { width: 22px; height: 22px; flex: none; }
.band-good { color: var(--correct); }
.band-mid { color: var(--reading-text); }
.band-low { color: var(--review); }
.ledger-sections { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ledger-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ledger-tile { padding: 24px; display: grid; gap: 6px; align-content: start; }
.sec-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; }
.sec-pct { font-size: 40px; font-weight: 600; line-height: 1; }
.sec-detail { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); margin-top: 4px; }
.patterns { display: grid; gap: 14px; }
.patterns li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.pat-count { font-size: 32px; font-weight: 600; line-height: 1; min-width: 2ch; text-align: right; padding-top: 2px; }
.pat-text { line-height: 1.5; }
.review-line { padding: 18px 24px; font-weight: 500; }
/* Questions each week: a stack of circles, one for every 10 questions. */
.weekly { display: grid; gap: 12px; }
.weekly figcaption { font-weight: 600; }
.bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; }
.bar { display: grid; gap: 8px; justify-items: center; }
.dots { display: grid; gap: 4px; align-content: end; height: 136px; }
.dot { display: block; width: 18px; height: 18px; border-radius: var(--pill); background: var(--action); }
.bar-n { font-weight: 600; font-size: var(--fs-small); }
.bar-w { font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* ----------------------------------------------------------------------------
   Vocabulary: the word wall (from Stickers) that flips (from Cards, rule 7).
   Six puffy word blocks in tile colours, three across at desktop, two at
   tablet, one at phone, every block the same size (grid-auto-rows: 1fr).
   The front is the block's colour with the headword large; the back keeps
   the colour as a band at the top and sits on --surface below it.
   ---------------------------------------------------------------------------- */
.word-wall { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
/* Equal-height blocks only once there are two or more columns; a one-column phone wall sizes each block to its own back. */
@media (min-width: 640px) { .word-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
@media (min-width: 1000px) { .word-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.flash { display: grid; perspective: 1400px; }
.flash[data-tone="reading"] { --tone: var(--reading); }
.flash[data-tone="math"] { --tone: var(--math); }
.flash[data-tone="language"] { --tone: var(--language); }
.flash[data-tone="verbal"] { --tone: var(--verbal); }
.flash-inner { display: grid; transform-style: preserve-3d; }
.flash-face {
  grid-area: 1 / 1; min-width: 0;
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  box-shadow: inset 0 2px 0 var(--puff), 0 12px 28px color-mix(in srgb, var(--tone) 25%, transparent);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flash-front {
  background: var(--tone); color: var(--tile-ink);
  padding: clamp(24px, 3vw, 32px); gap: 6px;
}
.flash-front .flash-btn { --lip: color-mix(in srgb, var(--tone) 72%, var(--tile-ink)); }
.flash-back { transform: rotateY(180deg); background: var(--surface); color: var(--ink); overflow: hidden; }
.flash-band {
  font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.1;
  background: var(--tone); color: var(--tile-ink);
  padding: 14px clamp(20px, 2.6vw, 28px); box-shadow: inset 0 2px 0 var(--puff);
}
.flash-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.6vw, 28px) clamp(22px, 2.6vw, 28px);
}
.flash-body > :nth-last-child(2) { margin-bottom: 14px; }
.flash-btn { margin-top: auto; align-self: flex-start; }
.flash.is-flipped .flash-inner { transform: rotateY(180deg); }
/* The front's headword sits between the top and the foot button (auto margins
   on both), so the word floats in the middle of its colour like a flashcard. */
.headword { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 2vw + 18px, 44px); line-height: 1.05; overflow-wrap: anywhere; }
.word-meta { font-size: var(--fs-small); font-weight: 500; margin-bottom: 20px; }
.word-def { font-size: var(--fs-body); font-weight: 500; line-height: 1.45; }
.word-example { font-size: 17px; line-height: 1.5; }
.word-lists { display: grid; gap: 6px; margin-top: 2px; font-size: var(--fs-small); }
.word-lists div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; }
.word-lists dt { font-weight: 600; }

/* ----------------------------------------------------------------------------
   How questions are made: the four steps (a real sequence, so numbered)
   ---------------------------------------------------------------------------- */
.steps { display: grid; gap: 24px; counter-reset: step; margin-top: 8px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; } }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--pill); background: var(--ink); color: var(--ink-text);
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
}
.steps h3 { padding-top: 8px; }
.steps p { grid-column: 2; max-width: 56ch; }
.standard {
  margin-top: 40px; max-width: 26ch;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.25;
  text-wrap: balance;
}
.standard p::before { content: "\201C"; }
.standard p::after { content: "\201D"; }
.standard-who { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); }
.made-link { margin-top: 24px; }

/* ----------------------------------------------------------------------------
   Who it is for: two overlapping bubbles. The student's bubble is math
   yellow; the grown-up's is surface and sits on top, lower and to the left,
   so the two read as one thought in two voices. The yellow bubble keeps
   extra padding on the side the other covers, so no text is hidden.
   ---------------------------------------------------------------------------- */
.who-grid { display: grid; gap: 0; }
.who-grid > * { border-radius: var(--radius-bubble); padding: clamp(24px, 3.4vw, 40px); }
.panel-tile { background: var(--math); color: var(--tile-ink); box-shadow: inset 0 2px 0 var(--puff), 0 12px 28px color-mix(in srgb, var(--math) 25%, transparent); }
.panel-tile :focus-visible { outline-color: var(--tile-ink); }
.who-grid > :first-child { padding-bottom: calc(clamp(24px, 3.4vw, 40px) + 32px); }
.who-grid > :last-child { position: relative; z-index: 1; margin-top: -32px; margin-left: 20px; }
@media (min-width: 860px) {
  .who-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .who-grid > :first-child { padding-bottom: clamp(24px, 3.4vw, 40px); padding-right: calc(clamp(24px, 3.4vw, 40px) + 72px); }
  .who-grid > :last-child { margin-top: 72px; margin-left: -72px; }
}
.who-grid .bullets { gap: 12px; }

/* ----------------------------------------------------------------------------
   Tests: the four tiles again, smaller
   ---------------------------------------------------------------------------- */
.tests-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tests-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tests-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tests-grid.two { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .tests-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tests-grid .tile-count { font-size: 36px; }
.tests-grid .tile-name a { text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ----------------------------------------------------------------------------
   Pricing: three pill-topped columns
   ---------------------------------------------------------------------------- */
.price-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-col { padding: clamp(24px, 3vw, 32px); display: grid; gap: 12px; align-content: start; }
.plan-pill { justify-self: start; background: var(--ink); color: var(--ink-text); border-radius: var(--pill); padding: 6px 16px; font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.3; }
.price { font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1; }
.price-per { font-weight: 500; }
.price-truth { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.plain-lines { display: grid; gap: 12px; max-width: var(--measure); margin-top: 32px; }
.plain-lines li { padding-left: 24px; position: relative; }
.plain-lines li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px; border-radius: var(--pill); background: var(--action); box-shadow: inset 0 2px 0 var(--puff); }

/* FAQ on the pricing page */
.faq { max-width: var(--measure); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 28px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq-body { padding: 0 0 20px; display: grid; gap: 10px; }

/* ----------------------------------------------------------------------------
   The ISEE page
   ---------------------------------------------------------------------------- */
.level { display: grid; gap: 16px; }
.level + .level { margin-top: 48px; }
.level > h3 { font-size: 32px; }
.level-who { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--ink-2); }
.level-who strong { color: var(--ink); }
.isee-table { width: 100%; border-collapse: collapse; }
.isee-table th, .isee-table td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.45; }
.isee-table th { font-weight: 600; font-size: var(--fs-small); color: var(--ink-2); }
.isee-table td.num { font-weight: 600; white-space: nowrap; }
.isee-table thead th { border-bottom-width: 2px; border-bottom-color: var(--ink); }
@media (max-width: 719px) {
  .isee-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .isee-table, .isee-table tbody, .isee-table tr, .isee-table td { display: block; }
  .isee-table tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .isee-table td { border: 0; padding: 2px 0; }
  .isee-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink-2); font-size: var(--fs-small); }
  .isee-table td.section-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; padding-bottom: 6px; }
  .isee-table td.section-name::before { content: none; }
}
.questions-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .questions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ----------------------------------------------------------------------------
   Article (how questions are made)
   ---------------------------------------------------------------------------- */
.article { max-width: var(--measure); display: grid; gap: 1.1em; }
.article h1 { margin-bottom: 0.3em; }
.article h2 { margin-top: 1em; }
.article .step-no { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: 12px; vertical-align: middle; border-radius: var(--pill); background: var(--ink); color: var(--ink-text); font-size: 20px; }
.article .standard { margin: 0.6em 0; }

/* ----------------------------------------------------------------------------
   Footer: the page ends on a rounded navy bubble
   ---------------------------------------------------------------------------- */
.site-foot { margin-top: var(--block); background: var(--footer); color: var(--footer-text); padding-block: 48px; border-radius: var(--radius-bubble) var(--radius-bubble) 0 0; }
.site-foot :focus-visible { outline-color: var(--footer-text); }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: auto minmax(0, 1fr); gap: 32px 64px; align-items: start; } }
.foot-links ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.foot-links a { text-decoration: none; font-weight: 500; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--footer-text); }
.foot-small { display: grid; gap: 6px; font-size: var(--fs-small); opacity: 0.9; }
@media (min-width: 800px) { .foot-small { grid-column: 1 / -1; } }

/* ----------------------------------------------------------------------------
   Motion: the spring press, the hero rise-in, the tile lift, the result's
   spring and the blob drift. Transform and opacity only. All gated. The drift
   is the one thing that repeats, and it pauses whenever a reader is inside a
   section's Specimen.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lip, .sp-tab, .sp-again, .sp-choice, .nav-toggle, .tile {
    transition: transform 350ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }
  .lip:active, .sp-tab:active, .sp-again:active, .nav-toggle:active,
  .sp[data-state="idle"] .sp-choice:active {
    transition: transform 120ms ease-out;
  }
  .tile:has(a):hover { transform: translateY(-2px); }
  .rise { animation: rise 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-card { animation-delay: 180ms; }
  .sp-result:not([hidden]) { animation: spring 350ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  .flash-inner { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .blob { animation: drift 14s ease-in-out infinite alternate; }
  .blob:nth-child(2) { animation-delay: -5s; }
  .blob:nth-child(3) { animation-delay: -9s; }
  .blob-b { animation-name: drift-b; }
  .has-blobs:focus-within .blob { animation-play-state: paused; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes spring { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(5px, -8px); } }
@keyframes drift-b { from { transform: translate(0, 0); } to { transform: translate(-6px, 7px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ----------------------------------------------------------------------------
   Legal pages (privacy notice, terms of service): the live notices, ported
   verbatim into the same dress as the article page.
   ---------------------------------------------------------------------------- */
.legal { gap: 0.9em; }
.legal .kicker { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--ink-2); }
.legal .updated { margin-top: -0.4em; font-size: var(--fs-small); color: var(--ink-2); }
.legal h2 { font-size: var(--fs-h3); margin-top: 1.2em; }
.legal h3 { font-size: var(--fs-h4); margin-top: 0.4em; }
.legal .n { margin-right: 0.45em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legal ul, .legal ol { margin: 0; padding-left: 1.3em; display: grid; gap: 0.5em; }
.legal li > ul, .legal li > ol { margin-top: 0.5em; }
.legal a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.legal a:hover { text-decoration-thickness: 3px; }
.legal .short, .legal .contents {
  display: grid; gap: 14px; margin-top: 0.6em; padding: 24px 28px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: inset 0 2px 0 var(--puff, rgba(255,255,255,.55)), 0 12px 28px color-mix(in srgb, var(--ink) 10%, transparent);
}
.legal .short h2, .legal .contents h2 { margin-top: 0; font-size: var(--fs-h4); }
.legal .contents { background: color-mix(in srgb, var(--reading) 18%, var(--surface)); }
.legal .contents ol { columns: 2; column-gap: 28px; display: block; }
.legal .contents li { break-inside: avoid; padding: 0.2em 0; }
.legal .caps { font-weight: 600; }
.legal section { display: grid; gap: 0.9em; }
.legal section h2 { margin-top: 0.4em; }
.legal section h3 { margin-top: 0.2em; }
.legal address { font-style: normal; line-height: 1.7; }
.legal .contact { display: inline-block; padding: 18px 24px; background: var(--surface); border-radius: var(--radius); }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0; min-width: 0; }
@media (max-width: 640px) {
  .legal .contents ol { columns: 1; }
  .legal dl { grid-template-columns: 1fr; }
  .legal .short, .legal .contents { padding: 18px 20px; }
}

/* One line under the hero question, in place of the old "how questions are made" section. */
.made-line { margin-top: 18px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.made-line a { color: var(--action); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.foot-small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }