/* =========================================================================
   Versed: the site is the app, in a browser
   -------------------------------------------------------------------------
   Self-hosted Baloo 2 + Nunito (docs/FONTS.md); Paper and Night tokens from
   lib/theme/versed_tokens.dart; the sticker as the one component: a flat
   fill, an ink border, a hard zero-blur shadow that the element sinks onto
   when pressed. Night follows prefers-color-scheme unless the reader picked
   a look with the header toggle (stored as data-look on <html> by the
   first-paint script in build.py).

   EVERY rule below that names one of our two families MUST also declare a
   font-weight (and vice versa). scripts/build.py derives each page's font
   preloads by parsing this file -- selector -> (family, weight) -> face --
   and a half-declared rule would make that derivation blind, so build.py
   fails on one.

   No colour, radius or duration that exists as a token below is typed
   twice. The domain palette is checked against versed_tokens.dart by
   scripts/test_build.py (a stylesheet cannot import a Dart token, and the
   CSP forbids the inline <style> a generator could have written).
   ========================================================================= */

/* `swap`, not `optional`. Under `optional` a face that misses its very
   short block period is dropped FOR THE WHOLE PAGE LOAD, so a page whose
   preload list forgot a face it uses renders permanently in the fallback --
   the bug this file shipped with. `swap` still paints instantly in the
   fallback but always upgrades once the face lands, so a preload miss costs
   a flash rather than the page's typography. */
@font-face {
  font-family: "Baloo 2";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Baloo2-Bold.woff2") format("woff2"),
       url("fonts/Baloo2-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Baloo 2";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Baloo2-ExtraBold.woff2") format("woff2"),
       url("fonts/Baloo2-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Nunito-SemiBold.woff2") format("woff2"),
       url("fonts/Nunito-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Nunito-Bold.woff2") format("woff2"),
       url("fonts/Nunito-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Nunito";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Nunito-ExtraBold.woff2") format("woff2"),
       url("fonts/Nunito-ExtraBold.ttf") format("truetype");
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Paper. VersedPalette.all[warm]. */
  --bg: #FFF6EC;
  --card: #FFFFFF;
  --ink: #17121B;
  --bar: #FFFFFF;
  /* soft(a): ink over the ground. --ink-faint is body copy on the footer
     and meta lines, so it has to clear AA on --bg and --card: 60% is
     4.72:1 on Paper's ground, 4.82:1 on its card. */
  --ink-soft: color-mix(in srgb, var(--ink) 74%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 60%, transparent);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --dash: color-mix(in srgb, var(--ink) 32%, transparent);
  --wash: color-mix(in srgb, var(--ink) 5%, transparent);

  /* VersedColors: fixed in every palette. */
  --gold: #FFC53D;
  --gold-ink: #17121B;
  --ok: #00A36C;
  --ok-text: #00714A;
  /* The fill under a right answer's white label: never theme-shifted. */
  --right: #00714A;
  --bad: #C43E2E;
  --bad-text: #8A2618;
  --white: #FFFFFF;

  /* The sticker (web spec §2): 2.5px ink border, 22px card radius, 14px
     chips, pill buttons, a 6px hard shadow that halves on press. */
  --stroke: 2.5px;
  --r-card: 22px;
  --r-chip: 14px;
  --r-pill: 999px;
  --depth: 6px;
  --depth-hero: 8px;
  --depth-control: 4px;
  /* The fixed slabs (controls, chips, lifted tiles), as tokens so Midnight can
     thin every one of them in one place. */
  --sl3: 3px;
  --sl4: 4px;
  --sl9: 9px;
  --sl10: 10px;
  --press: 3px;

  --gutter: 16px;
  --maxw: 1160px;
  --t-press: .12s;
  --t-tilt: .26s;
  --t-pop: .3s;
  --ease-out: cubic-bezier(.16, .9, .3, 1);
  --tilt: 2deg;
  color-scheme: light;
}

/* Night. DIVERGENCE FROM SOURCE (documented) [web-polish-2]: a neutral gray-black
   (#27272C), not the app's violet-tinged VersedPalette.all[dark]. Declared twice on purpose: once for the
   OS preference (unless the reader chose Paper), once for an explicit
   choice of Night on a light OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-look="paper"]) {
    --bg: #27272C;
    --card: #323238;
    --ink: #F5F0E6;
    --bar: #2C2C31;
    /* Night's faint ink is 55%, not 50%: the lighter grounds need it (4.55:1 on --card, the worst of the three).. */
    --ink-faint: color-mix(in srgb, var(--ink) 55%, transparent);
    /* The success/error TEXT colours are for light grounds; on Night they
       go muddy, so Night reads the lifted pair (errorOnDark from the app). */
    --ok-text: #5CD6A6;
    --bad-text: #FF8069;
    color-scheme: dark;
  }
}
:root[data-look="night"] {
  --bg: #27272C;
  --card: #323238;
  --ink: #F5F0E6;
  --bar: #2C2C31;
  --ink-faint: color-mix(in srgb, var(--ink) 55%, transparent);
  --ok-text: #5CD6A6;
  --bad-text: #FF8069;
  color-scheme: dark;
}

/* Midnight. VersedPalette.all[midnight]: true black for OLED, with Night's ink
   and gold. Same properties as Night; only the grounds change. */
:root[data-look="midnight"] {
  --bg: #000000;
  --card: #101014;
  --ink: #F5F0E6;
  --bar: #0A0A0E;
  --ink-faint: color-mix(in srgb, var(--ink) 50%, transparent);
  --ok-text: #5CD6A6;
  --bad-text: #FF8069;
  /* DIVERGENCE FROM SOURCE (documented) [h-midnight-hairline], mirrored from the
     app: on true black a cream slab is the loudest thing on the page (OLED
     glare), so every sticker draws a 1px slab instead of its depth. The 2.5px
     border stays; the press still collapses the slab to nothing. */
  --depth: 1px;
  --depth-hero: 1px;
  --depth-control: 1px;
  --sl3: 1px;
  --sl4: 1px;
  --sl9: 1px;
  --sl10: 1px;
  color-scheme: dark;
}

/* The eight domains, VersedDomain.all: accent (decorative fills) and shade
   (the fill under white text). --aci is tokens.accentInk(domain): coloured
   text on a card. Paper uses the shade; Night and Midnight use the accent,
   lightened just far enough to read on that look's card (generated below). */
[data-dom="sport"]  { --ac: #FF8A00; --sh: #B85E00; }
[data-dom="money"]  { --ac: #00A36C; --sh: #00714A; }
[data-dom="hist"]   { --ac: #C43E2E; --sh: #8A2618; }
[data-dom="music"]  { --ac: #2B5CFF; --sh: #0B2FB8; }
[data-dom="screen"] { --ac: #FF3D6E; --sh: #A81047; }
[data-dom="sci"]    { --ac: #00A9C0; --sh: #00727F; }
[data-dom="tech"]   { --ac: #8B5CF6; --sh: #5B2FC0; }
[data-dom="ideas"]  { --ac: #D9A400; --sh: #966F00; }
[data-dom] { --aci: var(--sh); }
/* BEGIN generated: accent-ink (scripts/build.py, site_data.accent_ink). On a dark
   ground each accent is lightened toward white in 5% steps until it reaches
   4.5:1 against that look's CARD (the lightest of its bg, bar and card, so the
   other two follow); an accent that already passes stays raw. --aci-n is Night's,
   --aci-m Midnight's. Never edit by hand: change the look grounds above and
   rebuild. */
[data-dom="sport"]  { --aci-n: #FF8A00; --aci-m: #FF8A00; }
[data-dom="money"]  { --aci-n: #26B182; --aci-m: #00A36C; }
[data-dom="hist"]   { --aci-n: #DC8B82; --aci-m: #CD5B4D; }
[data-dom="music"]  { --aci-n: #7595FF; --aci-m: #4B74FF; }
[data-dom="screen"] { --aci-n: #FF648B; --aci-m: #FF3D6E; }
[data-dom="sci"]    { --aci-n: #00A9C0; --aci-m: #00A9C0; }
[data-dom="tech"]   { --aci-n: #AE8DF9; --aci-m: #9164F6; }
[data-dom="ideas"]  { --aci-n: #D9A400; --aci-m: #D9A400; }
@media (prefers-color-scheme: dark) {
  :root:not([data-look="paper"]) [data-dom] { --aci: var(--aci-n); }
}
:root[data-look="night"] [data-dom] { --aci: var(--aci-n); }
:root[data-look="midnight"] [data-dom] { --aci: var(--aci-m); }
/* END generated: accent-ink */

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
/* `hidden` always wins: several components set their own display. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
/* The stickers carry their own press state, so the browser's grey tap
   rectangle is only a flash on top of it. */
html { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* A sheet is up: the page behind it does not scroll. */
html.is-locked, html.is-locked body { overflow: hidden; }
/* Paper/Night: the shell's colours ease (the app's only theme animation).
   Only while site.js holds .look-anim, so nothing tweens on page load. */
html.look-anim *, html.look-anim *::before, html.look-anim *::after {
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, fill .3s !important;
}
/* The header is sticky, so an in-page jump would land under it. */
html { scroll-padding-top: 96px; }
@media (max-width: 819px) { html { scroll-padding-top: 84px; } html:not(.js) { scroll-padding-top: 16px; } }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; /* no weight-400 body text anywhere in the design -- FONTS.md */
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, .brand-word {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
strong, b {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
}
p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .18em; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
ul, ol { margin: 0; padding: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 28px; } }
/* Big stickers tilt less on a phone, where 2deg pushes a full-width card's
   corner past the gutter. */
@media (max-width: 599px) { :root { --tilt: .8deg; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Scripted-only controls vanish without script; the fallbacks vanish with it. */
html:not(.js) .js-only { display: none !important; }
html.js .quiz-nojs { display: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--gold-ink);
  padding: 10px 16px; text-decoration: none;
  border: var(--stroke) solid var(--ink); border-radius: var(--r-chip);
}
.skip:focus { left: 12px; top: 12px; }

/* Keyboard focus: a 3px ink ring with a 2px gold halo, so it shows on
   every ground including the stickers' own ink borders. Never removed. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.sticker:focus-visible, .btn:focus-visible, .fchip:focus-visible, .wall-tile:focus-visible,
.opt:focus-visible, .look-toggle:focus-visible, .marquee:focus-visible, .soon-tile:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--gold);
}
.band-cta :focus-visible { outline-color: var(--gold); }

.icon-sprite { display: none; }
.ic {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  display: inline-block; vertical-align: -0.2em;
}

/* ---- The sticker ------------------------------------------------------ */
.sticker {
  background: var(--card);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 0 var(--depth) 0 var(--ink);
}
.press { transition: transform var(--t-press), box-shadow var(--t-press), rotate var(--t-tilt) var(--ease-out); }
.press:active {
  transform: translateY(var(--press));
  box-shadow: 0 max(0px, calc(var(--depth) - var(--press))) 0 var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .tilt-l { rotate: calc(var(--tilt) * -1); }
  .tilt-r { rotate: var(--tilt); }
  .tilt-l:focus-visible, .tilt-r:focus-visible { rotate: 0deg; }
}
/* Hover is for pointers that hover. On touch a :hover sticks after the tap
   and leaves a tile lifted, straightened or tinted until the next tap. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .tilt-l:hover, .tilt-r:hover { rotate: 0deg; }
}

/* Small caps labels: Nunito ExtraBold, letter-spaced (the app's headStyle). */
.kicker, .mcard-kicker, .pcard-kicker, .step-n, .who, .readout-l,
.footer-col h2, .sheet-sub, .topic-sub, .soon-badge, .contact-label, .dom-meta {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.kicker { color: var(--aci, var(--ink-soft)); margin: 0 0 6px; }
.kicker-ink { color: var(--ink-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill); padding: 4px 12px 4px 10px;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: .8rem; line-height: 1.3;
}
/* textFill: a label on a domain colour sits on the SHADE, never the accent. */
.chip-dom { background: var(--sh, var(--ink)); color: var(--white); }
.chip-line { background: var(--wash); color: var(--ink); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r-pill);
  border: var(--stroke) solid var(--ink);
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.05rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  --depth: var(--depth-control);
  box-shadow: 0 var(--depth) 0 var(--ink);
}
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--ink); --depth: 0px; box-shadow: none; }
.btn-ghost.press:active { transform: translateY(2px); box-shadow: none; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.15rem; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .95rem; }
.more {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  display: inline-flex; align-items: center; min-height: 44px;
}
.more::after { content: "\203A"; margin-left: .3em; display: inline-block; transition: translate .16s var(--ease-out); }
@media (hover: hover) { .more:hover::after { translate: 3px 0; } }

/* ---- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bar);
  border-bottom: var(--stroke) solid var(--ink);
}
.bar { display: flex; align-items: center; gap: 10px; min-height: 72px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand-badge {
  width: 44px; height: 44px; border-radius: var(--r-chip);
  background: var(--gold);
  border: var(--stroke) solid var(--ink);
  box-shadow: 0 var(--sl3) 0 var(--ink);
  display: grid; place-items: center;
  rotate: -4deg;
}
.brand-mark { width: 32px; height: 34px; }
.brand-word { font-size: 1.7rem; line-height: 1; }
.nav-links {
  display: flex; gap: 2px; flex: 1; justify-content: center;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-size: .95rem; font-weight: 800;
}
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 13px; border-radius: var(--r-pill);
  white-space: nowrap; text-decoration: none; color: var(--ink-soft);
}
@media (hover: hover) { .nav-links a:hover { background: var(--wash); color: var(--ink); } }
.nav-links a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.look-toggle {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: var(--r-chip);
  box-shadow: 0 var(--sl3) 0 var(--ink);
  transition: transform var(--t-press), box-shadow var(--t-press);
}
.look-toggle:active { transform: translateY(3px); box-shadow: none; }
.look-toggle .ic { width: 22px; height: 22px; }
/* One glyph per look: sun (Paper), moon (Night), moon with a star (Midnight).
   site.js keeps data-look-state on every toggle; before it runs, the sun. */
.look-moon, .look-mid { display: none !important; }
[data-look-state="night"] .look-moon, [data-look-state="midnight"] .look-mid { display: inline-block !important; }
[data-look-state="night"] .look-sun, [data-look-state="midnight"] .look-sun { display: none !important; }
.nav-cta { min-height: 44px; }
.menu-btn, .menu { display: none; }

/* Below 820px: one row, the brand and a single Menu sticker. The links,
   the look and the CTA move into the menu sheet. Without script (no Menu
   button, no sheet) the link row wraps under the brand instead of
   scrolling sideways, so nothing is cut off at the edge. */
@media (max-width: 819px) {
  .bar { min-height: 64px; padding-top: 10px; padding-bottom: 10px; row-gap: 6px; }
  .brand { margin-right: auto; }
  .brand-badge { width: 40px; height: 40px; }
  .brand-mark { width: 29px; height: 31px; }
  .brand-word { font-size: 1.5rem; }
  html:not(.js) .nav-links, html.js.no-menu .nav-links {
    display: flex; order: 3; flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-start; gap: 0 2px;
    margin: 0 -9px; font-size: .9rem;
  }
  html:not(.js) .nav-links a, html.js.no-menu .nav-links a { padding: 0 9px; }
  html:not(.js) .nav-home { display: none !important; }
  /* Two rows of links are too tall to pin to the top of a phone. */
  html:not(.js) .site-header { position: relative; }
  html.js .nav-links, html.js .nav-cta, html.js .bar > .look-toggle { display: none; }
  /* A browser without <dialog> keeps the wrapped link row instead. */
  html.js.no-menu .menu-btn { display: none; }
  html.js.no-menu .nav-cta { display: inline-flex; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px 0 12px; cursor: pointer;
    background: var(--card); color: var(--ink);
    border: var(--stroke) solid var(--ink); border-radius: var(--r-pill);
    --depth: var(--sl3); box-shadow: 0 var(--sl3) 0 var(--ink);
    font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
    font-weight: 800; font-size: 1.05rem; line-height: 1;
  }
  .menu-btn .ic { width: 22px; height: 22px; }
  .menu-btn.press:active { transform: translateY(3px); box-shadow: none; }
  html:not(.js) .menu-btn { display: none; }

  /* The sheet drops from the top edge, over the bar it replaces, so the
     close sticker sits exactly where the Menu sticker was. */
  .menu[open] {
    display: block; position: fixed; inset: 0 0 auto 0;
    width: 100%; max-width: none; height: auto; max-height: 100dvh;
    margin: 0; padding: 0; border: 0; overflow: visible;
    background: transparent; color: var(--ink);
  }
  .menu::backdrop { background: rgba(23, 18, 27, .55); }
  .menu-panel {
    background: var(--bar);
    border-bottom: var(--stroke) solid var(--ink);
    border-radius: 0 0 28px 28px;
    box-shadow: 0 var(--depth) 0 var(--ink);
    padding: 10px var(--gutter) 22px;
    max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain;
  }
  .menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 14px; }
  .menu-close {
    width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
    background: var(--card); color: var(--ink);
    border: var(--stroke) solid var(--ink); border-radius: 50%;
    --depth: var(--sl3); box-shadow: 0 var(--sl3) 0 var(--ink);
  }
  .menu-close .ic { width: 20px; height: 20px; }
  .menu-close.press:active { transform: translateY(3px); box-shadow: none; }
  .menu-links { display: grid; gap: 10px; }
  /* The app's rowStyle: a control-depth sticker row per destination; the
     current page is the filled one (selection is a fill change). */
  .menu-link, .menu-look {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 56px; padding: 0 14px 0 18px; cursor: pointer;
    background: var(--card); color: var(--ink); text-decoration: none; text-align: left;
    border: var(--stroke) solid var(--ink); border-radius: 20px;
    --depth: var(--depth-control); box-shadow: 0 var(--depth) 0 var(--ink);
    font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
    font-weight: 800; font-size: 1.3rem; line-height: 1.1;
  }
  .menu-link span { flex: 1; }
  .menu-link .ic { width: 22px; height: 22px; color: var(--ink-soft); }
  .menu-link[aria-current="page"] { background: var(--ink); color: var(--bg); }
  .menu-link[aria-current="page"] .ic { color: var(--bg); }
  .menu-look { margin-top: 16px; padding-left: 14px; }
  .menu-look .ic { width: 24px; height: 24px; }
  .menu-look-l { flex: 1; }
  /* The current look, named: a three-state cycle cannot be shown by a switch. */
  .menu-look-v {
    flex: 0 0 auto; min-height: 30px; padding: 0 14px; display: inline-flex; align-items: center;
    border: var(--stroke) solid var(--ink); border-radius: var(--r-pill);
    background: var(--gold); color: var(--gold-ink);
    font-size: 1rem; line-height: 1;
  }
  .menu-cta { width: 100%; margin-top: 16px; }
}

/* The sheet drops in on the app's sheet curve (vsheet, .34s), its rows rise
   one after another 40ms apart, and it lifts out faster than it came. */
@media (max-width: 819px) and (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-panel { animation: vdrop .34s cubic-bezier(.2, .9, .3, 1); }
  .menu[open]::backdrop { animation: vfade-in .22s ease-out; }
  .menu[open] .menu-link, .menu[open] .menu-look, .menu[open] .menu-cta { animation: vrise .34s ease-out both; }
  .menu[open] .menu-link:nth-child(1) { animation-delay: .06s; }
  .menu[open] .menu-link:nth-child(2) { animation-delay: .10s; }
  .menu[open] .menu-link:nth-child(3) { animation-delay: .14s; }
  .menu[open] .menu-link:nth-child(4) { animation-delay: .18s; }
  .menu[open] .menu-link:nth-child(5) { animation-delay: .22s; }
  .menu[open] .menu-look { animation-delay: .26s; }
  .menu[open] .menu-cta { animation-delay: .30s; }
  .menu.is-closing .menu-panel { animation: vlift .2s ease-in forwards; }
  .menu.is-closing::backdrop { animation: vfade-out .2s ease-in forwards; }
}
@keyframes vdrop { from { transform: translateY(-104%); } to { transform: none; } }
@keyframes vlift { from { transform: none; } to { transform: translateY(-104%); } }
/* Rises use the `translate` property, never `transform`, so they cannot
   fight a sticker's press (which is a transform). */
@keyframes vrise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes vfade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vfade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---- Sections ------------------------------------------------------------ */
.band { padding: 72px 0; }
.band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.band-card { background: var(--card); border-top: var(--stroke) solid var(--ink); border-bottom: var(--stroke) solid var(--ink); }
.section-head { max-width: 720px; margin-bottom: 32px; }
.section-head h2, .page-head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: none; flex-wrap: wrap; }
.section-sub { color: var(--ink-soft); font-size: 1.1rem; margin: 12px 0 0; max-width: 62ch; }
@media (max-width: 719px) { .band { padding: 56px 0; } }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding: 48px 0 72px; position: relative; overflow: hidden; }
/* minmax(0, 1fr): the quiz chip's nowrap label counts at full length when
   the track sizes itself (its percentage max-width is ignored there), so a
   long subject name made the column wider than the phone and the hero's
   overflow clip cut the headline, the readouts and the card at the right
   edge -- on some reloads and not others, since the question is random. */
.hero-grid { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; } }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 5.2rem); line-height: .96; letter-spacing: -.01em; margin: 0 0 18px; }
.hero-sub {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.2;
  color: var(--ink-soft); margin: 0 0 26px;
}
.readouts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0 0 30px; }
.readouts li { display: flex; flex-direction: column; }
.readout-n {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 2.4rem; line-height: 1;
}
.readout-l { color: var(--ink-soft); margin-top: 4px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.page-head .hero-ctas { margin-top: 24px; }
.hero-play { position: relative; padding-top: 64px; max-width: 520px; width: 100%; justify-self: center; }
.vee-big {
  position: absolute; z-index: 2; right: -6px; top: 0;
  width: 112px; height: auto; rotate: 8deg; pointer-events: none;
}
@media (min-width: 960px) { .vee-big { width: 136px; right: -34px; top: -6px; } .hero-play { padding-top: 72px; } }

/* Vee's faces and his blink (VersedMotion.blink, 5.4s). */
.vee-face { display: none; }
.vee[data-face="idle"] .vee-face-idle,
.vee[data-face="cheer"] .vee-face-cheer,
.vee[data-face="think"] .vee-face-think { display: inline; }
.vee-eye, .vee-pupil { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .vee-face-idle .vee-eye { animation: vblink 5.4s infinite; }
  .vee-pupil { transition: transform .18s ease-out; }
  /* The face swap lands with a 200ms bounce: a hop for a right answer, a
     small flinch for a wrong one. */
  .vee[data-face="cheer"] { animation: vhop .2s ease-out; }
  .vee[data-face="think"] { animation: vflinch .2s ease-out; }
}
@keyframes vblink { 0%, 91%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes vhop { 0% { translate: 0 0; scale: 1; } 45% { translate: 0 -12px; scale: 1.06; } 100% { translate: 0 0; scale: 1; } }
@keyframes vflinch { 0% { translate: 0 0; scale: 1; } 45% { translate: -5px 3px; scale: .96; } 100% { translate: 0 0; scale: 1; } }

/* ---- The quiz card (the app's quiz block) ------------------------------- */
.quiz {
  position: relative; z-index: 1;
  padding: 22px 22px 18px;
  --depth: var(--depth-hero);
  border-radius: 28px;
}
/* The card slides (site.js): it follows a sideways finger, springs back
   on the app's player curve, and a fling deals the next question. */
html.js .quiz { touch-action: pan-y; transition: transform .26s cubic-bezier(.2, .8, .3, 1); }
.quiz.is-dragging { transition: none; user-select: none; -webkit-user-select: none; }
.quiz.is-flung { transition: transform .2s ease-in; }
@media (prefers-reduced-motion: no-preference) {
  .quiz.deal-r { animation: vslide .26s cubic-bezier(.2, .8, .3, 1); }
  .quiz.deal-l { animation: vslide-l .26s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes vslide { from { opacity: 0; transform: translateX(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes vslide-l { from { opacity: 0; transform: translateX(-24px) scale(.985); } to { opacity: 1; transform: none; } }
.quiz-chip { margin: 0 0 16px; max-width: calc(100% - 72px); }
.quiz-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-q {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: clamp(1.45rem, 3vw, 1.7rem); line-height: 1.14;
  margin: 0 0 18px; padding-right: 36px; text-wrap: balance;
}
.quiz-opts { list-style: none; display: grid; gap: 12px; }
.opt {
  width: 100%; min-height: 56px; padding: 12px 16px 12px 12px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--card); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: 18px;
  box-shadow: 0 var(--depth-control) 0 var(--ink);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-size: 1rem; line-height: 1.3;
}
/* Without script the options are a list, not controls: flat, so they never
   promise a press that does nothing. */
span.opt { box-shadow: none; border-style: dashed; border-color: var(--dash); }
button.opt { cursor: pointer; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
/* The option you picked stays down on its slab once answered. */
.opt.is-picked { transform: translateY(var(--press)); box-shadow: 0 1px 0 var(--ink); }
@media (hover: hover) { button.opt:hover:not([disabled]) { background: var(--wash); } }
button.opt:active:not([disabled]) { transform: translateY(var(--press)); box-shadow: 0 1px 0 var(--ink); }
.opt-mark {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid currentColor;
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: .95rem; line-height: 1;
}
.opt-mark .ic { width: 20px; height: 20px; }
/* Answered: colour snaps (the app does not tween it) and a drawn mark says
   it too, so the verdict never rests on colour alone. */
/* DIVERGENCE FROM SPEC (documented, ledger): web spec §3.1.2 paints the
   right answer in the domain shade, which in History is the same red family
   as the wrong answer. The app's own semantics win: right is the success
   green, at its text shade so white clears AA (6.1:1). */
.opt.is-right { background: var(--right); color: var(--white); }
.opt.is-wrong { background: var(--bad); color: var(--white); }
.opt.is-dim { opacity: .5; }
.opt[disabled] { cursor: default; }
.quiz-x {
  margin-top: 16px; padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
  border: var(--stroke) solid var(--ink); border-radius: 18px;
}
.quiz-x.is-right { background: color-mix(in srgb, var(--ok) 18%, var(--card)); }
.quiz-x.is-wrong { background: color-mix(in srgb, var(--bad) 15%, var(--card)); }
.quiz-x img { width: 48px; height: auto; flex: 0 0 auto; }
.verdict {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.15rem; line-height: 1.1; margin: 2px 0 4px;
}
.is-right .verdict { color: var(--ok-text); }
.is-wrong .verdict { color: var(--bad-text); }
.explain { margin: 0; font-size: .95rem; line-height: 1.45; }
.quiz-nojs { margin: 18px 0 0; color: var(--ink-soft); font-size: .95rem; }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; min-height: 48px; }
.quiz-foot .btn { flex: 0 0 auto; white-space: nowrap; }
.quiz-tally { color: var(--ink-soft); font-size: .9rem; line-height: 1.3; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .pop { animation: vpop var(--t-pop) ease-out; }
}
@keyframes vpop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; }
.confetti i {
  position: absolute; width: 11px; height: 15px;
  border: 2px solid var(--gold-ink); border-radius: 3px;
}

/* ---- The domain wall ----------------------------------------------------- */
/* Deliberately straight: eight tiles in one grid, all tilted the same way, read
   as misaligned rather than playful. No .tilt-* here, and none on the plate. */
.wall { display: grid; gap: 22px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } }
.wall-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 176px; padding: 16px; gap: 18px;
  background: var(--ac); color: var(--white);
  border: var(--stroke) solid var(--ink); border-radius: var(--r-card);
  box-shadow: 0 var(--depth) 0 var(--ink);
  text-decoration: none; cursor: pointer;
}
.wall-glyph { color: var(--gold-ink); }
.wall-glyph .ic { width: 52px; height: 52px; }
/* The label plate: white text sits on the SHADE (AA for all eight). */
.wall-plate {
  display: flex; flex-direction: column; align-self: stretch;
  background: var(--sh); border-radius: var(--r-chip); padding: 8px 12px 9px;
  border: 2px solid var(--ink);
}
.wall-name {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.45rem; line-height: 1.05;
}
.wall-count { font-size: .85rem; line-height: 1.35; }
.wall-on {
  position: absolute; top: -14px; right: 12px;
  display: none; align-items: center; gap: 4px;
  background: var(--gold); color: var(--gold-ink);
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  padding: 2px 10px 2px 6px;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: .78rem;
}
.wall-on .ic { width: 16px; height: 16px; }
.wall-tile[aria-selected="true"] { transform: translateY(-4px); box-shadow: 0 var(--sl10) 0 var(--ink); }
.wall-tile[aria-selected="true"] .wall-on { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .wall-tile:hover { transform: translateY(-3px); box-shadow: 0 var(--sl9) 0 var(--ink); }
}
/* The press beats the hover lift: before, a hovered tile went UP when
   clicked, because the later hover rule won the tie with .press:active. */
.wall-tile.press:active { transform: translateY(var(--press)); box-shadow: 0 max(0px, calc(var(--depth) - var(--press))) 0 var(--ink); }
@media (max-width: 519px) {
  .wall-tile { min-height: 150px; padding: 12px; }
  .wall-glyph .ic { width: 40px; height: 40px; }
  .wall-name { font-size: 1.2rem; }
  .wall-count { font-size: .78rem; }
}

/* ---- Cover tiles and the shelf row ------------------------------------- */
.tile {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  text-decoration: none;
}
/* A cover gives under the thumb: it sinks onto its slab and shrinks 3%. */
.tile.press:active { transform: translateY(var(--press)) scale(.97); }
/* The frame holds the cover's box (aspect ratio, wash, ink rule), so the
   photograph can fade in inside it without the rule or the box blinking. */
.tile-art { display: block; aspect-ratio: 480 / 282; overflow: hidden; background: var(--wash); border-bottom: var(--stroke) solid var(--ink); }
.tile-img { width: 100%; height: 100%; object-fit: cover; }
/* A cover still on its way in starts clear and fades up once it has
   loaded (site.js). No script, or already in the cache: never hidden. */
.tile-img, .sheet-img { transition: opacity .3s ease-out; }
img.is-loading { opacity: 0; }
.tile-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px 14px; }
.tile-title {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.25rem; line-height: 1.1; margin-top: 4px;
}
.tile-tag { font-size: .92rem; line-height: 1.35; color: var(--ink-soft); }
.tile-meta { font-size: .82rem; color: var(--ink-faint); }
/* Swipe rails (the shelf, the card row, the phone walkthrough, the filter
   chips): the browser does the sliding, with momentum, and a swipe always
   comes to rest with a card at the row's start edge (mandatory snap, the
   scroll padding equal to the row's own inset). The scrollbar goes where
   there is no mouse to drag it; site.js draws page dots instead. */
.shelf-row, .marquee, .walk-steps, .filters {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
@media (hover: none) {
  .shelf-row, .marquee, .walk-steps, .filters { scrollbar-width: none; }
  .shelf-row::-webkit-scrollbar, .marquee::-webkit-scrollbar,
  .walk-steps::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
}
.rail-dots { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 24px; margin: 2px 0 6px; }
.rail-hint {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.rail-pips { display: flex; align-items: center; gap: 6px; }
.rail-pips i {
  display: block; width: 8px; height: 8px; border-radius: var(--r-pill);
  border: 2px solid var(--ink); background: transparent;
  transition: width .16s var(--ease-out), background-color .16s;
}
.rail-pips i.is-on { width: 22px; background: var(--gold); }
.shelf-row {
  --row-pad: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  list-style: none; display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--row-pad);
  padding: 8px var(--row-pad) 22px;
  scrollbar-width: thin;
}
.shelf-item { flex: 0 0 236px; scroll-snap-align: start; }
/* A phone shows one cover and the edge of the next: the edge is the
   invitation to swipe. */
@media (max-width: 599px) {
  .shelf-row { gap: 14px; padding-bottom: 14px; }
  .shelf-item { flex-basis: min(72vw, 280px); }
}
html.js .shelf-row:not(.is-filtered) .shelf-item.is-extra { display: none; }
.shelf-item[hidden] { display: none; }
.soon-tile {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  height: 100%; min-height: 230px; padding: 20px;
  border: var(--stroke) dashed var(--dash); border-radius: var(--r-card);
  text-decoration: none; color: var(--ink);
}
.soon-n {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 3.4rem; line-height: .9;
}
.soon-l { font-size: 1.05rem; line-height: 1.25; }
.soon-tile { transition: transform var(--t-press); }
.soon-tile:active { transform: scale(.97); }
.soon-w { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .9rem; margin-top: 8px; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: vpulse 1.6s ease-in-out infinite; }
}
@keyframes vpulse { 50% { transform: scale(1.35); } }
.shelf-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 28px; margin-top: 18px; }

.credits { flex: 1 1 320px; color: var(--ink-soft); font-size: .88rem; }
.credits summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; color: var(--ink);
}
.credits ul { list-style: none; columns: 2 300px; column-gap: 28px; }
.credits li { break-inside: avoid; margin-bottom: 6px; line-height: 1.4; }

/* ---- The card marquee ------------------------------------------------------ */
.marquee {
  overflow-x: auto; padding: 10px 0 18px; scrollbar-width: thin;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
}
.marquee .mcard { scroll-snap-align: start; }
html.js .marquee.is-running { overflow: hidden; scroll-snap-type: none; padding-bottom: 26px; }
.marquee-track { list-style: none; display: flex; gap: 22px; width: max-content; padding: 0 var(--gutter); }
@media (max-width: 599px) { .marquee-track { gap: 14px; } .marquee .mcard { width: min(292px, 78vw); } }
.mcard {
  position: relative; width: 292px; min-height: 340px; overflow: hidden;
  display: flex; flex-direction: column; padding: 30px 22px 22px;
  background: var(--card); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: var(--r-card);
  box-shadow: 0 var(--depth) 0 var(--ink);
}
.mcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--ac); border-bottom: 2px solid var(--ink); }
.mcard-kicker { color: var(--aci); margin: 0 0 12px; }
.mcard-sub { margin: 14px 0 0; font-size: 1rem; line-height: 1.45; }
.mcard-head {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.9rem; line-height: 1.02; margin: 0;
}
/* `big` fills with the domain colour in the app; the web uses the SHADE so
   white text clears AA (textFill). */
.mcard.mcard-big { background: var(--sh); color: var(--white); }
.mcard.mcard-big .mcard-kicker { color: var(--white); opacity: .9; }
.mcard.mcard-big::before { background: var(--ac); }
.stat { margin: 0 0 12px; padding: 12px 14px; border-radius: 18px; background: var(--wash); display: flex; flex-direction: column; }
.stat-n {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--aci);
}
.stat-l { font-size: .9rem; line-height: 1.35; margin-top: 4px; }
.mcard-q, .pcard-q {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.45rem; line-height: 1.12; margin: 0 0 14px;
}
.mcard-a, .pcard-a { margin: 0; padding: 12px 14px; border-radius: 18px; border: var(--stroke) solid var(--ink); background: var(--wash); font-size: .95rem; line-height: 1.45; }
.mcard-pill {
  display: table; margin-bottom: 6px; padding: 1px 10px; border-radius: var(--r-pill);
  background: var(--gold); color: var(--gold-ink); border: 2px solid var(--ink);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---- The bar test -------------------------------------------------------- */
.convo { display: grid; gap: 22px; max-width: 980px; }
@media (min-width: 820px) { .convo { grid-template-columns: 1fr 1.25fr; align-items: start; } .bubble-you { margin-top: 64px; } }
.bubble { position: relative; margin: 0; padding: 20px 22px; }
.bubble::after {
  content: ""; position: absolute; bottom: -16px; width: 26px; height: 26px;
  background: inherit; border: var(--stroke) solid var(--ink); border-top: 0; border-left: 0;
}
.bubble-them::after { left: 34px; rotate: 45deg; border-radius: 0 0 6px 0; }
.bubble-you { background: var(--gold); color: var(--gold-ink); }
.bubble-you::after { right: 40px; rotate: 45deg; border-radius: 0 0 6px 0; }
.who { margin-bottom: 8px; opacity: .8; }
.bubble-them .bubble-text {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.6rem; line-height: 1.12; margin: 0;
}
.bubble-you .bubble-text { margin: 0; font-size: 1.12rem; line-height: 1.5; }
.talk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 34px 0 0; color: var(--ink-soft); }
.talk-caption {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.25;
  max-width: 38ch; margin: 30px 0 0;
}

/* ---- Streak and week ---------------------------------------------------------- */
/* minmax(0, 1fr): an auto track grew to the seven pips' width and pushed
   the whole page 16px wider than a 375px phone. */
.streak-grid { display: grid; gap: 48px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .streak-grid { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.streak-card { padding: 26px; max-width: 460px; }
@media (max-width: 399px) { .streak-card { padding: 20px; } .week { gap: 4px; } }
.streak-top { display: flex; align-items: center; gap: 18px; }
.flame {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: #FF8A00; color: var(--gold-ink); border: var(--stroke) solid var(--ink);
  box-shadow: 0 var(--sl4) 0 var(--ink);
}
.flame .ic { width: 46px; height: 46px; transform-origin: 50% 85%; }
/* The one idle loop besides Vee's blink: the flame sways, gently. */
@media (prefers-reduced-motion: no-preference) {
  .flame .ic { animation: vwob 2.6s ease-in-out infinite; }
}
@keyframes vwob { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.streak-count { display: flex; flex-direction: column; margin: 0; }
.streak-n {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 4.4rem; line-height: .9;
}
.streak-l { font-size: 1rem; color: var(--ink-soft); }
.week { list-style: none; display: flex; justify-content: space-between; gap: 6px; margin: 24px 0 18px; }
.pip { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.pip-dot {
  width: 100%; max-width: 40px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: #FF8A00; color: var(--gold-ink); border: var(--stroke) solid var(--ink);
}
.pip-dot .ic { width: 20px; height: 20px; }
.pip.is-today .pip-dot { background: var(--gold); box-shadow: 0 var(--sl3) 0 var(--ink); }
.pip-day { font-size: .8rem; color: var(--ink-soft); }
.streak-xp { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.xp-pill {
  display: inline-block; padding: 0 10px; margin-right: 4px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg);
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800;
}
.promises { list-style: none; display: grid; gap: 22px; margin-top: 30px; }
.promises li { display: flex; gap: 16px; align-items: flex-start; }
.promise-ic { width: 44px; height: 44px; padding: 9px; border-radius: var(--r-chip); background: var(--gold); color: var(--gold-ink); border: var(--stroke) solid var(--ink); }
.promises h3 { font-size: 1.35rem; margin: 2px 0 4px; }
.promises p { margin: 0; color: var(--ink-soft); }

/* ---- Versed+ ------------------------------------------------------------------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.compare th, .compare td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 2px solid var(--line); line-height: 1.35; }
.compare thead th { border-top: 0; font-family: "Baloo 2", ui-rounded, system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; }
.compare tbody th { font-family: "Nunito", ui-sans-serif, system-ui, sans-serif; font-weight: 800; }
.compare td:first-of-type, .compare thead th:nth-child(2) { width: 34%; }
/* The Versed+ column is the gold sticker colour, so the upgrade reads as the
   one thing on the table you would pick up. --gold-ink on --gold is in the AA loop. */
.compare .compare-plus { background: var(--gold); color: var(--gold-ink); }
.compare tbody .compare-plus { font-family: "Nunito", ui-sans-serif, system-ui, sans-serif; font-weight: 700; }
.compare td .ic { width: 22px; height: 22px; color: var(--gold-ink); }
@media (max-width: 560px) { .compare th, .compare td { padding: 10px 8px; font-size: .92rem; } .compare thead th { font-size: 1rem; } }
.plan-price { margin: 28px 0 4px; font-size: 1.05rem; }
.price {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.7rem; line-height: 1;
}
.plan-trial { margin: 0; font-size: .95rem; }

/* ---- What we collect ---------------------------------------------------------------- */
.collect { display: flex; gap: 22px; align-items: flex-start; max-width: 860px; }
.collect-ic { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--card); border: var(--stroke) solid var(--ink); }
.collect-ic .ic { width: 32px; height: 32px; }
.collect h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
.collect-body {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.35;
}

/* ---- The download band (dark ground) ------------------------------------------------ */
.band-cta { padding: 76px 0; background: var(--ink); color: var(--bg); }
.band-cta-inner { display: flex; gap: 34px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: left; }
.band-cta h2 { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; }
.band-sub { color: var(--bg); opacity: .85; margin: 10px 0 0; font-size: 1.1rem; }
.band-vee { width: 128px; rotate: -6deg; }
@media (max-width: 599px) { .band-cta-inner { justify-content: flex-start; } .band-vee { width: 96px; } }
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.store-badge, .store-note {
  display: inline-flex; align-items: center; min-height: 52px;
  padding: 10px 22px; text-decoration: none;
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.1rem; line-height: 1.2;
  --ink: var(--gold-ink);
}
/* The sticker's border and slab stay visible on the dark band: they are
   drawn in the GROUND colour here, not the ink the band is made of. */
.band-cta .sticker { border-color: var(--bg); box-shadow: 0 var(--depth) 0 color-mix(in srgb, var(--bg) 45%, transparent); }
.band-cta .store-note { background: var(--gold); color: var(--gold-ink); margin: 24px 0 0; rotate: -1.5deg; }
.band-cta .store-badge { background: var(--bg); color: var(--ink); }

/* ---- Footer ------------------------------------------------------------------------- */
.site-footer { border-top: var(--stroke) solid var(--ink); padding: 48px 0 28px; font-size: .95rem; }
.footer-grid { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.5fr repeat(2, 1fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 820px) { .footer-brand { grid-column: auto; } }
.footer-tag { color: var(--ink-soft); margin: 12px 0 0; max-width: 28ch; }
.footer-col { display: flex; flex-direction: column; }
.footer-col h2 { margin-bottom: 6px; color: var(--ink-soft); }
.footer-col a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (hover: hover) { .footer-col a:hover { text-decoration: underline; } }
.footer-legal { margin-top: 30px; padding-top: 18px; border-top: 2px solid var(--line); color: var(--ink-faint); font-size: .8rem; }
.footer-legal p { margin: 0 0 6px; }
.footer-legal a { display: inline-block; min-height: 24px; line-height: 24px; }

/* ---- Inner page heads ---------------------------------------------------------------- */
.page-head { padding: 48px 0 40px; }
.page-head-grid { display: grid; gap: 24px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 820px) { .page-head-grid { grid-template-columns: 1fr auto; } }
.page-head h1 { margin: 0 0 14px; max-width: 18ch; }
.lede { color: var(--ink-soft); font-size: 1.15rem; max-width: 60ch; margin: 0; }
.page-vee { width: 120px; rotate: 6deg; }
@media (max-width: 819px) { .page-vee { display: none; } }
.lost .page-vee { display: block; width: 140px; }

/* ---- /subjects ------------------------------------------------------------------------ */
.shelf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 18px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
/* On a phone the nine chips are one rail (the app's domain rail), not three
   rows of wrap pushing the grid off the screen. */
@media (max-width: 599px) {
  .filters {
    flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
    margin: -10px calc(var(--gutter) * -1) -4px; padding: 10px var(--gutter) 12px;
  }
  .fchip { flex: 0 0 auto; scroll-snap-align: start; }
}
.fchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  background: var(--card); color: var(--ink); cursor: pointer;
  border: var(--stroke) solid var(--ink); border-radius: var(--r-chip);
  --depth: var(--sl3); box-shadow: 0 var(--sl3) 0 var(--ink);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: .92rem;
}
.fchip .ic { color: var(--aci, var(--ink)); }
.fchip.press { transition: transform var(--t-press), box-shadow var(--t-press), background-color .16s, color .16s; }
.fchip.press:active { transform: translateY(3px); box-shadow: none; }
.fchip[aria-pressed="true"] { background: var(--sh, var(--ink)); color: var(--white); }
.fchip[aria-pressed="true"]:not([data-dom]) { background: var(--ink); color: var(--bg); }
.fchip[aria-pressed="true"] .ic { color: inherit; }
.search { position: relative; flex: 1 1 260px; max-width: 420px; }
.search-ic { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--ink-soft); }
.search-input {
  width: 100%; min-height: 48px; padding: 0 16px 0 44px;
  background: var(--card); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: var(--r-pill);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-size: 1rem;
}
.search-input::placeholder { color: var(--ink-faint); }
.shelf-count { flex: 1 0 100%; margin: 0; color: var(--ink-soft); font-size: .92rem; }
.dom-group { padding: 26px 0 30px; }
.dom-group[hidden] { display: none; }
.dom-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.dom-badge {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--ac); color: var(--gold-ink);
  border: var(--stroke) solid var(--ink); border-radius: 16px; box-shadow: 0 var(--sl3) 0 var(--ink);
}
.dom-badge .ic { width: 30px; height: 30px; }
.dom-head h2 { font-size: 2.1rem; }
.dom-meta { margin: 0; color: var(--ink-soft); }
.tile-grid { list-style: none; display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.grid-item[hidden] { display: none; }
/* Two up on a phone: one cover per screen made 85 subjects a 21,000px scroll. */
@media (max-width: 599px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .tile-grid .tile-body { padding: 10px 10px 12px; }
  .tile-grid .tile-title { font-size: 1.05rem; }
  .tile-grid .tile-tag { font-size: .82rem; }
  .tile-grid .tile-meta { font-size: .75rem; }
  .tile-grid .tile-soon { padding: 12px 10px; }
  .tile-grid .soon-badge { font-size: .62rem; padding: 2px 8px; letter-spacing: .08em; }
  .dom-head h2 { font-size: 1.7rem; }
}
.tile-soon {
  min-height: 100%; padding: 16px; gap: 6px;
  border: var(--stroke) dashed var(--dash); border-radius: var(--r-card);
  align-items: flex-start;
}
.tile-soon .tile-title { margin-top: 6px; }
.soon-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill); background: var(--wash);
  letter-spacing: .1em;
}
.empty { text-align: center; padding: 40px 0 60px; }
.empty-vee { width: 96px; margin: 0 auto 12px; }
.empty-title {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.5rem; margin: 0 0 6px;
}
.chapters .wrap > h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
html.js .chapters { display: none; }
.sheet-srcs { display: grid; gap: 28px; margin-top: 30px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.sheet-src { background: var(--card); border-radius: var(--r-card); overflow: hidden; }
.sheet-img { width: 100%; aspect-ratio: 480 / 220; object-fit: cover; }
.sheet-body { padding: 18px 20px 22px; }
.sheet-body .chip { margin: 0 0 10px; }
.sheet-title { font-size: 2rem; margin: 0 0 4px; }
.sheet-tag { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 4px; }
.sheet-meta { font-size: .9rem; color: var(--ink-faint); margin: 0 0 16px; }
.sheet-sub { color: var(--ink-soft); margin: 18px 0 8px; }
.sheet-list { list-style: none; display: grid; gap: 2px; }
.sheet-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 2px solid var(--line); }
.sheet-list li:first-child { border-top: 0; }
.sheet-list .ic { color: var(--aci); width: 22px; height: 22px; }
.sheet-n { margin-left: auto; color: var(--ink-faint); font-size: .85rem; white-space: nowrap; }
.sheet-cta { margin-top: 20px; }
.credits-wrap { padding: 10px var(--gutter) 48px; }

/* The subject sheet: a flat dialog (no slab), a bottom sheet on phones. */
.sheet {
  width: min(560px, 100vw - 24px); max-height: min(88vh, 860px);
  padding: 0; overflow: auto;
  background: var(--card); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: 28px;
}
.sheet::backdrop { background: rgba(23, 18, 27, .55); }
/* Nothing behind the sheet scrolls when the sheet is dragged past its end. */
.sheet { overscroll-behavior: contain; transition: transform .26s cubic-bezier(.2, .8, .3, 1); }
.sheet.is-dragging { transition: none; }
.sheet .sheet-src { border-radius: 0; }
.sheet-close {
  position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: 50%;
  --depth: var(--sl3); box-shadow: 0 var(--sl3) 0 var(--ink);
}
.sheet-close .ic { width: 20px; height: 20px; }
@media (max-width: 599px) {
  .sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 28px 28px 0 0; border-bottom: 0; }
  /* The grab handle: says the sheet can be pulled down. */
  .sheet::before {
    content: ""; position: absolute; z-index: 3; top: 8px; left: 50%; translate: -50% 0;
    width: 46px; height: 8px; border-radius: var(--r-pill);
    background: var(--card); border: 2px solid var(--ink);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: vnudge var(--t-pop) var(--ease-out); }
  .sheet[open]::backdrop { animation: vfade-in .22s ease-out; }
  .sheet.is-closing { animation: vnudge-out .2s ease-in forwards; }
  .sheet.is-closing::backdrop { animation: vfade-out .2s ease-in forwards; }
}
/* A phone's bottom sheet rises the whole way (the app's vsheet, .34s). */
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: vsheet .34s cubic-bezier(.2, .9, .3, 1); }
  .sheet.is-closing { animation: vsheet-out .24s ease-in forwards; }
}
@keyframes vnudge { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vnudge-out { to { transform: translateY(24px); opacity: 0; } }
@keyframes vsheet { from { transform: translateY(103%); } to { transform: none; } }
@keyframes vsheet-out { to { transform: translateY(103%); } }

/* ---- /how-it-works: the walkthrough --------------------------------------------- */
.walk { padding: 8px 0 80px; }
.walk-steps { list-style: none; display: grid; gap: 56px; }
.walk-step { display: grid; gap: 24px; align-items: center; }
@media (min-width: 820px) { .walk-step { grid-template-columns: 380px 1fr; gap: 56px; } }
.walk-text h3 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: 6px 0 12px; }
.walk-text p:last-child { color: var(--ink-soft); font-size: 1.1rem; max-width: 46ch; }
.step-n { color: var(--ink-soft); margin: 0; }
/* A phone swipes through the four cards like the app's player, each with
   its explanation under it, instead of scrolling 3,000px of stacked cards. */
@media (max-width: 819px) {
  .walk-steps {
    display: flex; gap: 12px; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 16px;
  }
  /* Every card stretches to the tallest, so the four explanations sit on
     one line as the rail slides. */
  .walk-step { flex: 0 0 calc(100% - 36px); scroll-snap-align: start; grid-template-rows: 1fr auto; gap: 20px; }
  .walk-slot { display: grid; }
  .walk-text p:last-child { font-size: 1rem; }
}
.pcard { padding: 22px; min-height: 420px; border-radius: 28px; --depth: var(--depth-hero); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 819px) { .pcard { min-height: 0; } }
.pcard-where { font-size: .8rem; color: var(--ink-faint); margin: 0 0 18px; }
.pcard-kicker { color: var(--aci); margin: 0 0 10px; }
.pcard-date {
  display: inline-block; align-self: flex-start; margin: 4px 0 16px; padding: 8px 14px;
  background: var(--sh); color: var(--white);
  border: var(--stroke) solid var(--ink); border-radius: 16px;
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.2rem; line-height: 1;
}
.pcard-beat { font-size: 1.2rem; line-height: 1.4; margin: 0; }
.popts { list-style: none; display: grid; gap: 10px; }
.popt {
  display: flex; gap: 10px; align-items: center; padding: 11px 14px;
  border: var(--stroke) solid var(--ink); border-radius: 16px; font-size: .95rem; line-height: 1.3;
}
.popt.is-right { background: var(--right); color: var(--white); }
.popt.is-dim { opacity: .5; }
.popt .ic { width: 20px; height: 20px; }
.pcard-x { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--ok) 18%, var(--card)); border: var(--stroke) solid var(--ink); font-size: .88rem; line-height: 1.4; }
.pcard-vee { width: 40px; flex: 0 0 auto; }
/* Play mode (site.js, wide screens, motion welcome): the four cards move
   into one sticky phone and swap as the explanations scroll past. */
.walk-grid.is-playing { display: grid; grid-template-columns: 400px 1fr; gap: 64px; align-items: start; }
.phone {
  position: sticky; top: 112px; padding: 16px 14px 14px; border-radius: 40px;
  background: var(--bg); --depth: var(--depth-hero);
}
.phone-pips { display: flex; gap: 6px; margin: 2px 8px 14px; }
.phone-pips span { flex: 1; height: 8px; border-radius: 5px; border: 2px solid var(--ink); background: var(--card); }
.phone-pips span.is-past { background: var(--ac, var(--ink)); }
.phone-pips span.is-now { background: var(--gold); }
.phone-stage { display: grid; }
/* All four cards share one grid cell, so the stage is as tall as the
   tallest card and none of them can spill out of the phone. */
.phone-stage .pcard { grid-area: 1 / 1; opacity: 0; transition: opacity .32s var(--ease-out); pointer-events: none; }
.phone-stage .pcard.is-on { opacity: 1; pointer-events: auto; }
.is-playing .walk-step { grid-template-columns: 1fr; min-height: 72vh; align-content: center; }
.is-playing .walk-slot { display: none; }

.angles { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 12px; }
.angle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  background: var(--bg); border: var(--stroke) solid var(--ink); border-radius: var(--r-chip);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: .95rem;
}
.angle .ic { width: 22px; height: 22px; }
.goal-grid, .links-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .goal-grid, .links-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.tiers { list-style: none; display: grid; gap: 12px; }
.tier { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 16px; padding: 12px 16px; border-radius: 18px; background: var(--card); align-items: center; }
.tier-n {
  grid-row: 1 / 3; font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 2rem; line-height: 1; text-align: center;
}
.tier-name {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.25rem; line-height: 1.1;
}
.tier-note { color: var(--ink-soft); font-size: .92rem; }
.tier:last-child { background: var(--gold); color: var(--gold-ink); }
.tier:last-child .tier-note { color: var(--gold-ink); }
.topic { padding: 24px; border-radius: 28px; }
.topic-title { font-size: 1.9rem; margin: 0 0 12px; }
.topic-body { line-height: 1.55; }
.wavy {
  color: var(--aci);
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  text-decoration: underline wavy; text-decoration-thickness: 1.5px; text-underline-offset: 3.5px;
}
.topic-sub { color: var(--ink-soft); margin: 16px 0 10px; }
.topic-comes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.slot {
  margin: 0; aspect-ratio: 4 / 3; max-width: 460px; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: var(--stroke) dashed var(--dash); border-radius: 18px; background: var(--wash);
  color: var(--ink-soft); text-align: center; padding: 20px;
}
.slot-ic { width: 52px; height: 52px; }

/* ---- 404 ------------------------------------------------------------------------------ */
.try-row { list-style: none; display: grid; gap: 22px; margin-top: 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* ---- Policy pages (privacy, terms, what's new, support) ----------------------------- */
.policy { padding: 40px var(--gutter) 80px; }
/* Left edge on the page grid, measure capped for reading (68ch, 17px/1.6). */
.policy > * { max-width: 68ch; }
.policy h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 12px; }
.policy .lede { margin-bottom: 30px; }
.policy h2 { font-size: 1.5rem; margin: 40px 0 12px; }
/* overflow-wrap: the terms carry bare store URLs that are wider than a
   phone and pushed the whole page 83px sideways. */
.policy-card { padding: 20px 22px; margin: 0; background: var(--card); border-radius: var(--r-card); overflow-wrap: anywhere; }
.policy-card p, .policy-card li { color: var(--ink); }
.policy-card p { margin: 0 0 1rem; }
.policy-card h3 { font-size: 1.15rem; margin: 22px 0 8px; }
.policy-card ul, .policy-card ol { margin: 0 0 1rem; padding-left: 1.3em; }
.policy-card li { margin-bottom: .35rem; }
.policy-card > :first-child { margin-top: 0; }
.policy-card > :last-child { margin-bottom: 0; }
.policy .meta { margin-top: 48px; padding-top: 20px; border-top: 2px solid var(--line); color: var(--ink-faint); font-size: .9rem; }
.policy-card .changes { list-style: none; margin: 0; padding: 0; }
.policy-card .changes > li { margin: 0 0 1.1rem; }
.policy-card .changes > li:last-child { margin-bottom: 0; }
.policy-card .changes p { margin: 0 0 .5rem; }
.policy-card .chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* Inert on purpose: a chip names a subject, it is not a link. */
.policy-card .chips .chip { margin: 0; }
.contact-card { display: flex; flex-direction: column; padding: 18px 22px; margin: 0 0 8px; text-decoration: none; max-width: 420px; }
.contact-label { color: var(--ink-soft); }
.contact-addr {
  font-family: "Baloo 2", ui-rounded, system-ui, sans-serif;
  font-weight: 800; font-size: 1.4rem; line-height: 1.2; overflow-wrap: anywhere;
}

/* Everything at rest for readers who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}