/* =========================================================================
   Prepora — app.css
   Art direction C, "Editorial-Bold" (design-canvas/EditorialBold.dc.html).

   The grammar, in one paragraph so nobody has to guess it later:
   paper ground #F4EFE6, ink #191512, deep teal #0F766E, warm coral #F97362.
   Square corners on every primary surface. Rules instead of shadows — 3px ink
   for structure, a hairline for subdivision. Where a thing must lift off the
   page it casts a SOLID offset block (10px 10px 0 teal), never a blur.
   Display type is Instrument Serif and it is allowed to be enormous; every
   other word on the screen is Archivo, because a student reads rationales for
   an hour and a serif would cost them.
   No cross emblems, no caduceus, no countdown, anywhere in this file.
   ========================================================================= */

/* ------------------------------------------------------- vendored type -- */
/* The PWA has to open in a basement break room with no signal, so the fonts
   are files in this repository, not a link to Google. Latin (+ latin-ext for
   Archivo, which carries the accented names in question stems) only.
   Archivo ships as one variable file; the weight range is declared once and
   400/600/800 are instances of it. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrumentserif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrumentserif-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------- tokens -- */
:root {
  /* brand ramps */
  --teal-900: #072F2C;
  --teal-800: #0B5B55;
  --teal-700: #0F766E;   /* primary */
  --teal-600: #129086;
  --teal-400: #2FB3A6;
  --teal-100: #D3E8E5;
  --teal-050: #E9F2F0;

  /* Coral splits in two on purpose. #F97362 is a FILL — ink reads on it at
     6.6:1 — but it only manages 2.4:1 against paper, so anything coral that
     is text, a border or a hairline uses --coral-700 (4.9:1). */
  --coral-800: #99301F;
  --coral-700: #BB3B2A;  /* AA-safe coral for text and borders on paper */
  --coral-600: #D4472F;
  --coral-500: #F97362;  /* the fill */
  --coral-100: #F7DED6;

  /* status, mapped onto the editorial palette: right is teal, wrong is coral,
     and the one genuinely third thing (a partially-missed SATA row) is amber */
  --red-700: #BB3B2A;
  --red-500: #F97362;
  --amber-700: #8A5A12;
  --amber-500: #C98A16;
  --green-700: #0F766E;
  --green-500: #0F766E;

  /* surfaces */
  --bg: #F4EFE6;         /* paper */
  --bg-alt: #EBE4D6;
  --surface: #FFFDF8;    /* card */
  --surface-2: #F9F4EA;
  --tint: #E7F0EE;
  --line: color-mix(in srgb, var(--ink) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  /* the hairline the artboard uses to subdivide a ruled block */
  --hair: color-mix(in srgb, var(--ink) 25%, transparent);

  /* ink */
  --ink: #191512;
  --ink-2: #3A332C;
  --muted: #6D645B;
  --on-teal: #F4EFE6;

  --primary: var(--teal-700);
  --primary-hover: var(--teal-800);
  --accent: var(--coral-500);
  --accent-ink: var(--coral-700);
  --brand-text: var(--teal-700);

  /* A "stamp" is the artboard's sharp ink block: a button, an active tab, a
     filled key badge. It inverts wholesale after dark so the block is always
     the opposite of the page it sits on. */
  --stamp: #191512;
  --stamp-ink: #F4EFE6;

  /* The ink WHY block. Deliberately its own pair: after dark it stays a dark
     slab rather than flipping to a cream one, because it is a long read. */
  --slab: #191512;
  --slab-ink: #EDE6DA;
  --slab-muted: #B7AC9D;

  --focus: #0F766E;

  /* No blurs. A surface either sits on the page or casts a solid block. */
  --shadow-1: none;
  --shadow-2: 5px 5px 0 var(--primary);
  --shadow-3: 10px 10px 0 var(--primary);
  --offset: 10px 10px 0 var(--primary);
  --offset-sm: 5px 5px 0 var(--primary);
  --offset-coral: 5px 5px 0 var(--coral-500);

  /* Square. The ladder is kept so nothing downstream breaks, and every rung
     is zero — a radius has to be written by hand now, and only the phone
     mock-frame and the SVG rings are allowed one. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-2xl: 0px;

  --s-1: 8px;
  --s-2: 14px;
  --s-3: 20px;
  --s-4: 28px;
  --s-5: 40px;
  --s-6: 64px;
  --band-gap: clamp(48px, 7vw, 92px);

  --pad: clamp(16px, 4vw, 28px);
  --maxw: 1120px;
  --text-scale: 1;

  --ui-font: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --display-font: "Instrument Serif", Georgia, "Times New Roman", serif;
  --read-font: var(--ui-font);
  --dur: 160ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Editorial night. Same masthead, printed the other way round: the ground
   goes to near-black, the paper-cards become slabs one step up from it, and
   the solid offset shadows switch to the brightened teal so they still read
   as an object lifting off the page. Applied twice — an explicit choice, and
   auto + system preference — so dark mode never depends on JS. Keep the two
   blocks identical. */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #12100C;
  --bg-alt: #1A1712;
  --surface: #1A1712;
  --surface-2: #221E17;
  --tint: #14302C;

  --ink: #EDE6DA;
  --ink-2: #CFC6B7;
  --muted: #A79C8D;

  --teal-700: #2FB3A6;
  --teal-800: #4ECEC1;
  --teal-400: #2FB3A6;
  --teal-100: #17403A;
  --teal-050: #12302C;

  --coral-800: #FFB0A3;
  --coral-700: #FF9382;
  --coral-600: #FF8B7B;
  --coral-500: #FF8B7B;
  --coral-100: #3A211B;

  --red-700: #FF9382;
  --red-500: #FF8B7B;
  --amber-700: #E3AE4C;
  --amber-500: #C98A16;
  --green-700: #2FB3A6;
  --green-500: #2FB3A6;

  --primary: #2FB3A6;
  --primary-hover: #4ECEC1;
  --accent: #FF8B7B;
  --accent-ink: #FF9382;
  --brand-text: #2FB3A6;
  --on-teal: #08201D;

  --stamp: #EDE6DA;
  --stamp-ink: #12100C;

  --slab: #090805;
  --slab-ink: #EDE6DA;
  --slab-muted: #A79C8D;

  --focus: #2FB3A6;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;

    --bg: #12100C;
    --bg-alt: #1A1712;
    --surface: #1A1712;
    --surface-2: #221E17;
    --tint: #14302C;

    --ink: #EDE6DA;
    --ink-2: #CFC6B7;
    --muted: #A79C8D;

    --teal-700: #2FB3A6;
    --teal-800: #4ECEC1;
    --teal-400: #2FB3A6;
    --teal-100: #17403A;
    --teal-050: #12302C;

    --coral-800: #FFB0A3;
    --coral-700: #FF9382;
    --coral-600: #FF8B7B;
    --coral-500: #FF8B7B;
    --coral-100: #3A211B;

    --red-700: #FF9382;
    --red-500: #FF8B7B;
    --amber-700: #E3AE4C;
    --amber-500: #C98A16;
    --green-700: #2FB3A6;
    --green-500: #2FB3A6;

    --primary: #2FB3A6;
    --primary-hover: #4ECEC1;
    --accent: #FF8B7B;
    --accent-ink: #FF9382;
    --brand-text: #2FB3A6;
    --on-teal: #08201D;

    --stamp: #EDE6DA;
    --stamp-ink: #12100C;

    --slab: #090805;
    --slab-ink: #EDE6DA;
    --slab-muted: #A79C8D;

    --focus: #2FB3A6;
  }
}

/* ------------------------------------------------------------- base ---- */
*, *::before, *::after { box-sizing: border-box; }

/* The UA's `[hidden] { display: none }` loses to any class that sets a display
   value, and most components here set one. This makes the attribute mean what
   every caller assumes it means. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: calc(16px * var(--text-scale));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* a 168px serif word must never be able to push the page sideways */
  overflow-x: hidden;
}

body[data-dyslexia="on"] {
  --ui-font: "Atkinson Hyperlegible", "Comic Sans MS", Verdana, ui-sans-serif, system-ui, sans-serif;
  --display-font: var(--ui-font);
  letter-spacing: .012em;
  line-height: 1.72;
}

/* Headings are the serif. Everything a student reads for longer than a
   heartbeat stays Archivo. */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.16; }
h1, h2 {
  font-family: var(--display-font);
  font-weight: 400;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.3rem); }
h3, h4 { font-weight: 800; letter-spacing: -.005em; }
h3 { font-size: clamp(1rem, .96rem + .2vw, 1.1rem); }

/* the giant. `overflow-wrap` is the 375px guarantee. */
.display {
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(4rem, 1.2rem + 11.5vw, 10.5rem);
  line-height: .86;
  letter-spacing: -.035em;
  margin: 0;
  overflow-wrap: break-word;
}
.display em { font-style: italic; color: var(--coral-700); }

p { margin: 0 0 1em; }
a { color: var(--primary); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--coral-700); }
ul { margin: 0 0 1em; padding-left: 1.15em; }
button, input, select, textarea { font: inherit; color: inherit; }

.tnum, .timer, .stat-num, .ring-num, .price-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* One letterspaced-caps voice, used for every kicker, tag and rule label. */
.kicker {
  display: block;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.kicker-coral { color: var(--coral-700); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--stamp); color: var(--stamp-ink);
  padding: 12px 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.18em; }
.ico-lg { width: 26px; height: 26px; color: var(--primary); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ chrome --- */
/* The app bar IS the masthead: serif wordmark on the left, letterspaced caps
   on the right, a 3px ink rule underneath the whole thing. Opaque, because a
   frosted pane is a different design language entirely. */
.chrome {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 12px var(--pad) 10px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--bg);
  border-bottom: 3px solid var(--ink);
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; /* it is a route link, so it is a touch target */
  text-decoration: none; color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--primary); display: inline-flex; align-self: center; }
.brand-word {
  font-family: var(--display-font); font-weight: 400;
  font-size: 1.6rem; letter-spacing: -.01em; line-height: 1;
}

.chrome-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.chrome-nav a {
  padding: 9px 12px; text-decoration: none;
  color: var(--ink); font-weight: 600;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chrome-nav a:hover { color: var(--coral-700); }
.chrome-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
/* The glyph belongs to the phone tab bar; the desktop masthead stays words. */
.chrome-nav .ico { display: none; }

.chrome-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: transparent; border: 1.5px solid var(--line-strong);
  color: var(--ink); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--stamp); border-color: var(--stamp); color: var(--stamp-ink); }
.icon-btn .ico { width: 19px; height: 19px; }

/* "I have a key" is the masthead's coral word. Visible only while something is
   locked, and never styled to shout. */
.key-btn {
  white-space: nowrap;
  background: transparent; border-color: transparent;
  color: var(--coral-700);
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 10px; min-height: 44px;
}
.key-btn:hover:not([disabled]) { color: var(--ink); background: transparent; border-color: transparent; }
@media (max-width: 400px) {
  .btn.key-btn { font-size: 0; padding: 8px 10px; }
  .btn.key-btn::after {
    content: "Key"; font-size: .74rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
  }
}

.mini-ring {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  text-decoration: none; line-height: 0;
}
.mini-ring svg { display: block; }
.mini-ring:hover { opacity: .8; }

/* On a phone the nav drops to a thumb-reachable bar: paper ground, 3px ink
   top rule, and the active tab is a solid ink block. */
@media (max-width: 640px) {
  .chrome { padding: 8px 14px; gap: 10px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .chrome-actions { margin-left: auto; }

  .chrome-nav {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    margin: 0; gap: 0; justify-content: space-around;
    padding: 0 6px calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 3px solid var(--ink);
  }
  .chrome-nav a {
    flex: 1 1 0; text-align: center;
    padding: 7px 2px 5px; font-size: .62rem; letter-spacing: .1em;
    min-height: 52px; line-height: 1.2; border-bottom: 0;
    color: var(--muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  }
  .chrome-nav .ico { display: block; width: 20px; height: 20px; vertical-align: 0; }
  .chrome-nav a[aria-current="page"] { color: var(--ink); }
  .chrome-nav a .ico {
    box-sizing: content-box; padding: 3px 14px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .chrome-nav a[aria-current="page"] .ico { background: var(--stamp); color: var(--stamp-ink); }
  .nav-label { display: block; }

  /* keep the legal footer and toasts clear of the bar */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .toast-region { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
  .brand-word { display: none; }
}

/* ------------------------------------------------------------- views --- */
main { flex: 1 0 auto; }
.view { max-width: var(--maxw); margin: 0 auto; padding: clamp(22px, 4vw, 42px) var(--pad) 56px; }
.view-play { max-width: 800px; padding-top: 14px; }
.view[hidden] { display: none !important; }

/* A view title is a masthead of its own: serif, then a 3px ink rule. */
.view-head { margin-bottom: 24px; border-bottom: 3px solid var(--ink); padding-bottom: 14px; }
.view-head h1 { margin-bottom: 6px; }
.view-sub { color: var(--muted); margin: 0; max-width: 62ch; font-size: .95rem; }

.section-h { margin-bottom: 16px; }
.band { margin-top: clamp(40px, 7vw, 72px); }
.band-tint {
  background: var(--tint);
  border: 3px solid var(--ink);
  padding: clamp(22px, 4vw, 36px);
}

.lede { font-size: clamp(1.06rem, .98rem + .5vw, 1.31rem); color: var(--ink-2); line-height: 1.55; max-width: 44ch; }

/* ------------------------------------------------------------ buttons -- */
/* Sharp ink blocks with letterspaced caps. Nothing rounds, nothing glows. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; min-height: 46px;
  border-radius: 0; border: 2px solid transparent;
  font-weight: 800; font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform 110ms var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active:not([disabled]) { transform: translate(1px, 1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .ico { width: 1.1em; height: 1.1em; }

.btn-primary { background: var(--stamp); color: var(--stamp-ink); border-color: var(--stamp); }
.btn-primary:hover:not([disabled]) { background: var(--primary); border-color: var(--primary); color: var(--on-teal); }

/* Coral is a fill, so its label is ink — never white. */
.btn-coral { background: var(--coral-500); color: #191512; border-color: var(--ink); }
.btn-coral:hover:not([disabled]) { background: var(--coral-600); }

.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover:not([disabled]) { background: var(--stamp); color: var(--stamp-ink); }

.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover:not([disabled]) { border-color: var(--ink); background: var(--stamp); color: var(--stamp-ink); }

.btn-quiet {
  background: transparent; color: var(--muted); border-color: transparent;
  padding: 10px 12px; min-height: 44px; letter-spacing: .1em;
}
.btn-quiet:hover:not([disabled]) { color: var(--ink); background: transparent; text-decoration: underline; }

.btn-danger { background: transparent; border-color: var(--coral-700); color: var(--coral-700); }
.btn-danger:hover:not([disabled]) { background: var(--coral-700); color: var(--bg); border-color: var(--coral-700); }

.btn-lg { padding: 17px 30px; min-height: 56px; font-size: .92rem; letter-spacing: .1em; }
.btn-sm { padding: 9px 14px; min-height: 44px; font-size: .72rem; }
.btn-block { width: 100%; }

/* -------------------------------------------------------------- cards -- */
.card {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: clamp(18px, 2.6vw, 26px);
  box-shadow: none;
}

.grid-4 { display: grid; gap: 0; grid-template-columns: 1fr; }
.grid-2 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* The four "what you get" panels are one ruled block, not four floating
   cards — the artboard's numerals row, applied to prose. */
.grid-4 .feature {
  border: 0; border-top: 3px solid var(--ink);
  background: transparent; padding: 22px 0 26px;
}
/* Two up: the left-hand column of each row loses its divider. */
@media (min-width: 640px) {
  .grid-4 .feature { padding: 22px 22px 26px; border-left: 1px solid var(--hair); }
  .grid-4 .feature:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
/* Four up: only the first tile does. */
@media (min-width: 1000px) {
  .grid-4 .feature:nth-child(2n+1) { border-left: 1px solid var(--hair); padding-left: 22px; }
  .grid-4 .feature:first-child { border-left: 0; padding-left: 0; }
}
.feature { display: flex; flex-direction: column; }
.feature h3 { margin: 14px 0 6px; font-size: 1.08rem; }
.feature p { margin: 0; color: var(--ink-2); font-size: .94rem; }

.pledge { display: flex; gap: 20px; align-items: flex-start; }
.pledge-list { margin: 0; padding-left: 1.15em; color: var(--ink-2); }
.pledge-list li { margin-bottom: 7px; }

.price-card { position: relative; display: flex; flex-direction: column; }
.price-card-lead { border-width: 3px; box-shadow: var(--offset); }
.price-tier {
  font-weight: 800; color: var(--muted); margin: 0 0 6px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .2em;
}
.price-num {
  font-family: var(--display-font); font-weight: 400;
  font-size: 3.4rem; line-height: 1; margin: 0 0 16px; letter-spacing: -.03em;
}
.price-sub {
  font-family: var(--ui-font); font-size: .72rem; font-weight: 800;
  color: var(--muted); letter-spacing: .18em; text-transform: uppercase;
}
.tick-list { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.tick-list li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--ink-2); font-size: .94rem; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .44em;
  width: 14px; height: 7px;
  border-left: 2.6px solid var(--primary); border-bottom: 2.6px solid var(--primary);
  transform: rotate(-45deg);
}
.micro { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }

.price-flag {
  position: absolute; top: -1px; right: -1px;
  padding: 6px 12px;
  background: var(--coral-500); color: #191512;
  font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}

/* ------------------------------------------------------- practice hub -- */
.grid-mode { display: grid; gap: 0; grid-template-columns: 1fr; margin-bottom: 30px; border-top: 3px solid var(--ink); }
@media (min-width: 620px) { .grid-mode { grid-template-columns: repeat(2, 1fr); } }

.mode-card {
  display: flex; gap: 16px; align-items: flex-start; text-align: left;
  width: 100%; cursor: pointer;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--hair);
  padding: 18px 0;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}
@media (min-width: 620px) {
  .mode-card { padding: 18px 20px; }
  .mode-card:nth-child(odd) { border-right: 1px solid var(--hair); }
}
.mode-card:hover:not([disabled]) { background: var(--surface-2); }
.mode-card[disabled] { opacity: .5; cursor: not-allowed; }
.mode-card-body { min-width: 0; }
.mode-card h3 { margin: 0 0 4px; font-size: 1.04rem; }
.mode-card p { margin: 0; color: var(--muted); font-size: .89rem; }
.mode-card.mode-lead { background: var(--surface); }
.mode-card.mode-lead h3 { color: var(--ink); }

.badge-pill {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  background: var(--coral-500); color: #191512;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  vertical-align: 2px;
}

.panel {
  background: var(--surface); border: 2px solid var(--ink);
  padding: clamp(18px, 2.6vw, 26px); margin-bottom: 22px;
  box-shadow: none;
}
.panel-h {
  margin: 0 0 6px;
  font-family: var(--ui-font); font-weight: 800;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.panel-sub { color: var(--muted); font-size: .89rem; margin: 0 0 18px; }

.filter-row { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 620px) { .filter-row { grid-template-columns: 2fr 1.4fr .8fr; } }
.field { display: block; }
.field-label {
  display: block; font-size: .68rem; font-weight: 800; color: var(--muted);
  margin-bottom: 6px; letter-spacing: .18em; text-transform: uppercase;
}
.select {
  width: 100%; padding: 12px 14px; min-height: 46px;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  cursor: pointer;
}
.select:hover { background: var(--surface-2); }
.filter-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.domain-list { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.domain-row {
  display: grid; gap: 6px 12px; align-items: center;
  grid-template-columns: 1fr auto;
  padding: 14px 0; border-bottom: 1px solid var(--hair);
  background: transparent;
}
.domain-name { font-weight: 700; font-size: .95rem; }
.domain-figure { font-size: .85rem; color: var(--muted); }
.domain-bar { grid-column: 1 / -1; height: 6px; background: var(--line); overflow: hidden; }
.domain-bar > i { display: block; height: 100%; background: var(--primary); transition: width 500ms var(--ease); }
.domain-bar > i.is-weak { background: var(--coral-500); }
.domain-row .btn-sm { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }

/* --------------------------------------------------------- continue --- */
.continue-chip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--tint); border: 2px solid var(--ink);
  border-left: 6px solid var(--primary);
  padding: 14px 18px; margin: 20px 0 4px;
}
.continue-chip p { margin: 0; font-size: .93rem; }
.continue-chip strong { font-weight: 800; }
.continue-chip .btn { margin-left: auto; }

/* ------------------------------------------------------------- player -- */
.player-root { display: block; }

.player-bar {
  position: sticky; top: 62px; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 20px;
  background: var(--bg); border: 0;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
}
.player-progress { flex: 1; min-width: 0; }
.player-count {
  font-size: .68rem; font-weight: 800; color: var(--muted);
  letter-spacing: .16em; text-transform: uppercase;
}
.progress-track { height: 6px; background: var(--line); overflow: hidden; margin-top: 6px; }
.progress-fill { display: block; height: 100%; background: var(--ink); transition: width 260ms var(--ease); }
.timer {
  font-weight: 800; font-size: 1rem; padding: 6px 11px;
  background: var(--stamp); color: var(--stamp-ink);
}
.timer.is-low { background: var(--coral-500); color: #191512; }
.mode-tag {
  font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em;
  padding: 5px 10px; background: var(--primary); color: var(--on-teal);
}
.mode-tag.tag-exam { background: var(--coral-500); color: #191512; }

.q-card {
  background: var(--surface); border: 2px solid var(--ink);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: none;
  animation: qIn 200ms var(--ease) both;
}
@keyframes qIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.q-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line-strong);
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.chip-format { background: var(--primary); color: var(--on-teal); border-color: var(--primary); }

.case-panel {
  border: 2px solid var(--ink);
  background: var(--surface-2); margin-bottom: 20px; overflow: hidden;
}
.case-panel > summary {
  cursor: pointer; padding: 12px 16px; min-height: 46px;
  font-weight: 800; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.case-panel > summary::-webkit-details-marker { display: none; }
.case-panel > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform var(--dur) var(--ease); }
.case-panel[open] > summary::after { transform: rotate(180deg); }
.case-body {
  padding: 0 16px 16px; font-size: .95rem; color: var(--ink-2);
  white-space: pre-wrap; border-top: 1px solid var(--hair); padding-top: 14px;
}
.case-steps { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.case-step-dot {
  width: 28px; height: 28px; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800;
  background: transparent; color: var(--muted); border: 1.5px solid var(--line-strong);
}
.case-step-dot.is-done { background: var(--primary); color: var(--on-teal); border-color: var(--primary); }
.case-step-dot.is-now { background: var(--stamp); color: var(--stamp-ink); border-color: var(--stamp); }

.q-stem { font-size: 1.06rem; line-height: 1.6; margin-bottom: 8px; font-weight: 600; }
.q-stem strong { font-weight: 800; }
.q-instruction {
  font-family: var(--display-font); font-style: italic;
  font-size: 1.02rem; color: var(--muted); margin: 0 0 18px;
}

/* option lists — big one-hand targets, square, ruled */
.options { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.opt {
  display: flex; gap: 13px; align-items: flex-start;
  width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; min-height: 56px;
  background: var(--bg); border: 1.5px solid var(--line-strong);
  border-radius: 0; color: var(--ink-2);
  transition: border-color 130ms var(--ease), background 130ms var(--ease), color 130ms var(--ease);
}
.opt:hover:not([disabled]) { border-color: var(--ink); color: var(--ink); }
.opt[disabled] { cursor: default; }
.opt-key {
  flex: none; width: 28px; height: 28px;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
  background: transparent; color: var(--ink-2); border: 1.5px solid var(--line-strong);
}
.opt-box {
  flex: none; width: 26px; height: 26px;
  border: 2px solid var(--line-strong); display: grid; place-items: center;
  background: var(--surface);
}
.opt-box .ico { width: 17px; height: 17px; opacity: 0; color: var(--on-teal); }
.opt-text { flex: 1; min-width: 0; }

.opt[aria-pressed="true"], .opt[aria-checked="true"] { border-color: var(--ink); border-width: 2.5px; color: var(--ink); }
.opt[aria-pressed="true"] .opt-key, .opt[aria-checked="true"] .opt-key { background: var(--stamp); color: var(--stamp-ink); border-color: var(--stamp); }
.opt[aria-checked="true"] .opt-box { background: var(--primary); border-color: var(--primary); }
.opt[aria-checked="true"] .opt-box .ico { opacity: 1; }

.opt.is-correct {
  border-color: var(--primary); border-width: 2.5px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--ink); font-weight: 700;
}
.opt.is-correct .opt-key { background: var(--primary); color: var(--on-teal); border-color: var(--primary); }
.opt.is-wrong {
  border-color: var(--coral-700); border-width: 2.5px;
  background: color-mix(in srgb, var(--coral-500) 12%, var(--surface));
  color: var(--ink);
}
.opt.is-wrong .opt-key { background: var(--coral-700); color: var(--bg); border-color: var(--coral-700); }
.opt.is-missed { border-color: var(--amber-700); border-style: dashed; }

.opt-order-badge {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center; font-weight: 800; font-size: .88rem;
  border: 2px dashed var(--line-strong); color: var(--muted); background: transparent;
}
.opt[data-ordered="yes"] .opt-order-badge { border-style: solid; border-color: var(--stamp); background: var(--stamp); color: var(--stamp-ink); }

/* matrix grid */
.matrix-wrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.matrix {
  width: 100%; border-collapse: collapse; min-width: 420px;
  border: 2px solid var(--ink);
}
.matrix th, .matrix td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--hair); font-size: .92rem; }
.matrix thead th {
  background: var(--stamp); color: var(--stamp-ink);
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.matrix tbody th { text-align: left; font-weight: 600; min-width: 180px; background: var(--surface-2); }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.matrix-cell { display: grid; place-items: center; }
.matrix-radio {
  width: 26px; height: 26px; cursor: pointer;
  border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center;
}
.matrix-radio[aria-checked="true"] { border-color: var(--ink); }
.matrix-radio[aria-checked="true"]::after { content: ""; width: 12px; height: 12px; background: var(--ink); }
.matrix td.cell-correct { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.matrix td.cell-wrong { background: color-mix(in srgb, var(--coral-500) 16%, transparent); }

/* bowtie */
.bowtie { display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 760px) { .bowtie { grid-template-columns: 1fr 1fr 1fr; align-items: start; } }
.bowtie-zone { border: 1.5px solid var(--line-strong); padding: 14px; background: var(--surface-2); }
.bowtie-zone.zone-mid { border: 2.5px solid var(--ink); }
.bowtie-h {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink); margin: 0 0 4px;
}
.bowtie-sub { font-size: .78rem; color: var(--muted); margin: 0 0 10px; }
.bowtie .options { gap: 8px; margin: 0; }
.bowtie .opt { padding: 11px 13px; min-height: 48px; font-size: .92rem; }

/* highlight / cloze */
.highlight-passage {
  border: 2px solid var(--ink); padding: 16px;
  background: var(--surface-2); margin-bottom: 20px; line-height: 1.9;
}
.hl-seg {
  display: inline; cursor: pointer; padding: 3px 2px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  border-bottom: 2px dotted var(--line-strong);
}
.hl-seg:hover:not([disabled]) { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.hl-seg[aria-pressed="true"] { background: color-mix(in srgb, var(--coral-500) 34%, transparent); border-bottom-color: var(--coral-700); }
.hl-seg.is-correct { background: color-mix(in srgb, var(--primary) 22%, transparent); border-bottom: 2px solid var(--primary); }
.hl-seg.is-wrong { background: color-mix(in srgb, var(--coral-500) 26%, transparent); border-bottom: 2px solid var(--coral-700); }
.hl-seg.is-missed { border-bottom: 2px dashed var(--amber-700); }

/* actions + verdict + the ink WHY block */
.q-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.q-actions .spacer { flex: 1; }

.verdict {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; margin: 20px 0 0;
  font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  border: 2px solid currentColor;
}
.verdict-good { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.verdict-bad { color: var(--coral-700); background: color-mix(in srgb, var(--coral-500) 12%, transparent); }

/* The artboard's WHY slab: ink ground, coral label, paper text. It is a long
   read, so line length and leading matter more here than anywhere else. */
.rationale {
  margin-top: 16px; border: 0;
  background: var(--slab); color: var(--slab-ink);
  padding: clamp(18px, 3vw, 26px);
  animation: qIn 180ms var(--ease) both;
}
.rationale h4 {
  margin: 0 0 10px;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .2em;
  color: var(--coral-500);
}
.rationale h4 + p { margin-top: 0; }
.rationale p { margin: 0 0 14px; font-size: .95rem; line-height: 1.65; color: var(--slab-ink); }
.rationale p strong { font-weight: 800; }
.rationale p:last-child { margin-bottom: 0; }
.rationale a { color: var(--coral-500); }
.why-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.why-list li { display: flex; gap: 12px; font-size: .93rem; line-height: 1.6; color: var(--slab-ink); }
.why-key {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  font-size: .74rem; font-weight: 800;
  background: var(--slab-ink); color: var(--slab);
}
.rationale .tip {
  display: flex; gap: 10px; padding: 13px 15px;
  background: transparent; border-left: 6px solid var(--primary);
  color: var(--slab-ink); font-size: .92rem; margin-bottom: 14px;
}
.rationale .tip .ico { color: var(--coral-500); }
.rationale .q-meta { margin: 0; }
.rationale .chip,
.rationale .concept-chip {
  background: transparent; color: var(--slab-muted); border: 1px solid var(--slab-muted);
}

.tip {
  display: flex; gap: 10px; padding: 13px 15px;
  background: var(--tint); color: var(--ink-2); font-size: .92rem; margin-bottom: 14px;
  border-left: 6px solid var(--primary);
}
.tip .ico { color: var(--primary); }
.concept-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  background: transparent; color: var(--muted); border: 1px solid var(--line-strong);
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}

.streak-line { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); }
.streak-flame { color: var(--coral-700); font-weight: 800; }

/* results */
.results-hero { text-align: center; padding: 8px 0 24px; border-bottom: 3px solid var(--ink); margin-bottom: 24px; }
.results-hero h1 { margin-bottom: 6px; }
.results-msg { color: var(--ink-2); max-width: 52ch; margin: 0 auto 4px; }
.score-big {
  font-family: var(--display-font); font-weight: 400;
  font-size: clamp(3.4rem, 2rem + 6vw, 6rem);
  letter-spacing: -.04em; line-height: 1; margin: 14px 0 4px;
}
.stat-strip { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); margin: 24px 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
@media (min-width: 620px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: transparent; border: 0; border-left: 1px solid var(--hair);
  padding: 16px 12px; text-align: center;
}
.stat:nth-child(2n+1) { border-left: 0; }
@media (min-width: 620px) { .stat:nth-child(2n+1) { border-left: 1px solid var(--hair); } .stat:first-child { border-left: 0; } }
.stat-num {
  font-family: var(--display-font); font-weight: 400;
  font-size: 2rem; display: block; line-height: 1.1;
}
.stat-label { font-size: .64rem; color: var(--muted); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.breakdown { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.bd-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.bd-name { font-size: .93rem; font-weight: 700; }
.bd-fig { font-size: .85rem; color: var(--muted); }
.bd-bar { grid-column: 1 / -1; height: 6px; background: var(--line); overflow: hidden; }
.bd-bar > i { display: block; height: 100%; background: var(--primary); }
.bd-bar > i.lo { background: var(--coral-500); }
.bd-bar > i.mid { background: var(--amber-500); }
.bd-bar > i.hi { background: var(--primary); }

.review-item {
  border: 0; border-left: 6px solid var(--primary);
  padding: 14px 16px; background: var(--surface-2); margin-bottom: 12px;
}
.review-item p { margin: 0 0 6px; font-size: .93rem; }

/* --------------------------------------------------------- readiness --- */
.ring-hero {
  display: grid; gap: clamp(18px, 4vw, 34px); align-items: center;
  grid-template-columns: 1fr; text-align: center;
  background: var(--surface); border: 3px solid var(--ink);
  padding: clamp(22px, 4vw, 34px); box-shadow: var(--offset);
  margin-bottom: 12px;
}
@media (min-width: 720px) { .ring-hero { grid-template-columns: auto 1fr; text-align: left; } }
.ring-svg { display: block; margin: 0 auto; }
.ring-state {
  font-family: var(--display-font); font-weight: 400;
  font-size: 2rem; line-height: 1.1; margin: 0 0 8px;
}
.ring-state.state-building { color: var(--coral-700); }
.ring-state.state-approaching { color: var(--amber-700); }
.ring-state.state-ready { color: var(--primary); }
.ring-explain { color: var(--ink-2); margin: 0 0 12px; font-size: .96rem; }
.ring-hero .btn { margin-right: 8px; }
.ring-num { font-weight: 800; }

.ready-pulse { animation: readyPulse 2.6s var(--ease) 1; transform-origin: center; }
@keyframes readyPulse {
  0%, 100% { opacity: 1; }
  40%      { opacity: .55; }
}

.radar-wrap { display: grid; place-items: center; }
.radar { width: min(100%, 420px); height: auto; }
.radar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-axis { stroke: var(--line); stroke-width: 1; }
.radar-shape { fill: color-mix(in srgb, var(--primary) 24%, transparent); stroke: var(--primary); stroke-width: 2.4; stroke-linejoin: round; }
.radar-label { font-size: 9.5px; fill: var(--muted); font-family: var(--ui-font); font-weight: 600; }

.trend { width: 100%; height: 90px; }
.trend-line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.trend-dot { fill: var(--coral-500); }
.trend-base { stroke: var(--line-strong); stroke-width: 1; }

.history-list { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.history-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--hair); background: transparent;
}
.history-when { color: var(--muted); font-size: .82rem; margin-left: auto; }
.history-score { font-family: var(--display-font); font-weight: 400; font-size: 1.5rem; line-height: 1; }

/* ---------------------------------------------------------- settings --- */
.set-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 0; border-bottom: 1px solid var(--hair);
}
.set-row:last-child { border-bottom: 0; }
.set-copy { flex: 1; min-width: 220px; }
.set-copy h3 { margin: 0 0 3px; font-size: 1rem; }
.set-copy p { margin: 0; color: var(--muted); font-size: .88rem; }

.seg { display: inline-flex; background: transparent; border: 2px solid var(--ink); padding: 0; gap: 0; }
.seg button {
  border: 0; background: transparent; cursor: pointer; color: var(--ink-2);
  padding: 10px 16px; min-height: 44px;
  font-weight: 800; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button + button { border-left: 1px solid var(--hair); }
.seg button[aria-pressed="true"] { background: var(--stamp); color: var(--stamp-ink); }

.status-dot { display: inline-block; width: 9px; height: 9px; background: var(--muted); margin-right: 7px; }
.status-dot.on { background: var(--primary); }
.status-dot.off { background: var(--amber-500); }

/* ------------------------------------------------------------ licence -- */
/* Deliberately quiet: no gradient, no pulse, no countdown (KB 08 §3). */
.lic-card {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px; border: 2px solid var(--ink);
  background: var(--surface-2);
}
.lic-card.is-held { border-left: 6px solid var(--primary); background: var(--tint); }
.lic-card-copy { flex: 1; min-width: 220px; }
.lic-headline { margin: 0 0 3px; font-weight: 800; font-size: 1rem; }
.lic-card .micro { margin: 0; }

.lock-panel {
  display: flex; gap: 16px; align-items: flex-start;
  border: 2px solid var(--ink); border-left: 6px solid var(--coral-500);
  padding: 20px; margin-bottom: 24px;
  background: var(--surface); color: var(--ink-2);
}
.lock-panel h3 { margin: 0 0 5px; font-size: 1rem; color: var(--ink); }
.lock-panel p { margin: 0 0 14px; font-size: .93rem; }
.lock-panel .ico-lg { color: var(--primary); }
.lock-panel .q-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------- sheets -- */
/* One native <dialog> serves both licence flows: focus trapping, Escape and
   the backdrop come from the platform rather than from us. */
.sheet {
  width: min(92vw, 480px);
  padding: 0; border: 3px solid var(--ink); border-radius: 0;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--offset);
}
.sheet::backdrop { background: color-mix(in srgb, #191512 62%, transparent); }
.sheet-inner { padding: clamp(18px, 4vw, 28px); margin: 0; }
.sheet-title { margin: 0 0 8px; font-size: 1.7rem; }
.sheet-blurb { margin: 0 0 18px; color: var(--ink-2); font-size: .95rem; }
.sheet .field { margin-bottom: 14px; }
.sheet-input {
  width: 100%; padding: 12px 14px;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  font: inherit; font-size: .95rem; min-height: 48px;
}
.sheet-input:focus-visible { border-color: var(--primary); }
.sheet-status { margin: 0 0 4px; font-size: .88rem; color: var(--muted); min-height: 1.2em; }
.sheet-status.is-good { color: var(--primary); font-weight: 700; }
.sheet-status.is-bad { color: var(--coral-700); font-weight: 700; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }
@media (max-width: 420px) {
  .sheet-actions { flex-direction: column-reverse; }
  .sheet-actions .btn { width: 100%; }
}

/* ------------------------------------------------------------ notices -- */
.notice {
  display: flex; gap: 16px; align-items: flex-start;
  border: 2px dashed var(--line-strong);
  padding: 20px; background: var(--surface-2); color: var(--ink-2);
}
.notice h3 { margin: 0 0 5px; font-size: 1rem; color: var(--ink); }
.notice p { margin: 0 0 12px; font-size: .93rem; }
.notice .ico-lg { color: var(--muted); }

.notice-empty {
  flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: clamp(26px, 4vw, 44px);
  border-style: solid; border-color: var(--ink);
  background: var(--surface);
}
.notice-empty > div { display: contents; }
.notice-empty p { max-width: 52ch; }
.empty-art {
  display: block;
  width: clamp(104px, 20vw, 138px); height: auto;
  margin-bottom: 8px;
  color: var(--primary); opacity: .55;
}

/* -------------------------------------------------- companions shelf --- */
.shelf-group + .shelf-group { margin-top: 34px; }
.shelf-grid { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 3px solid var(--ink); }
@media (min-width: 620px) { .shelf-grid { grid-template-columns: repeat(2, 1fr); } }

.shelf-card {
  display: flex; gap: 16px; align-items: flex-start; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--hair);
  padding: 18px 0;
  color: var(--ink); text-decoration: none;
  transition: background var(--dur) var(--ease);
}
@media (min-width: 620px) {
  .shelf-card { padding: 18px 20px; }
  .shelf-card:nth-child(odd) { border-right: 1px solid var(--hair); }
}
.shelf-card:hover { background: var(--surface-2); color: var(--ink); }
.shelf-card-body { min-width: 0; }
.shelf-card h3 { margin: 0 0 4px; font-size: 1.04rem; }
.shelf-card p { margin: 0 0 8px; color: var(--muted); font-size: .89rem; }
.shelf-open {
  display: inline-flex; align-items: center; gap: 6px; color: var(--primary);
  font-weight: 800; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}

/* -------------------------------------------------- companion viewer --- */
.doc-wrap { min-width: 0; }
.doc-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 0; margin-bottom: 10px; min-height: 44px;
  color: var(--muted); text-decoration: none;
  font-weight: 800; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
}
.doc-back:hover { color: var(--ink); }
.ico-flip { transform: scaleX(-1); }
.doc-head { margin-bottom: 18px; border-bottom: 3px solid var(--ink); padding-bottom: 14px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.doc-hint { margin: 8px 0 22px; }

/* The fragment carries its own scoped `comp-` styles, so the shell supplies a
   surface and overflow safety and nothing else.

   `overflow-x: auto` is the guarantee: whatever width a fragment's own table
   or figure claims, it scrolls inside this card and the page never scrolls
   sideways at 375px. */
.doc-body {
  background: var(--surface); border: 2px solid var(--ink);
  padding: clamp(18px, 3vw, 32px);
  color: var(--ink); max-width: 100%; overflow-wrap: break-word;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.doc-body > :last-child { margin-bottom: 0; }
.doc-body img, .doc-body svg, .doc-body video { max-width: 100%; height: auto; }
.doc-body table:not([class]), .doc-body pre:not([class]) { display: block; max-width: 100%; overflow-x: auto; }

/* ------------------------------------------------------------- footer -- */
.site-footer {
  margin-top: auto;
  border-top: 3px solid var(--ink);
  padding: 22px var(--pad) 34px;
  background: var(--bg);
}
.site-footer p {
  max-width: var(--maxw); margin: 0 auto;
  font-size: .74rem; color: var(--muted); text-align: center; line-height: 1.7;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------- toasts -- */
.toast-region {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; display: grid; gap: 8px; width: min(92vw, 440px); pointer-events: none;
}
.toast {
  background: var(--stamp); color: var(--stamp-ink);
  padding: 13px 18px; font-size: .8rem; font-weight: 800;
  letter-spacing: .06em;
  text-align: center; box-shadow: var(--offset-sm);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.show { opacity: 1; transform: none; }

/* =========================================================================
   PART TWO — the landing page, laid out as the front of an issue.
   ========================================================================= */

/* Views are swapped by toggling [hidden], and going from display:none back to
   display:block restarts CSS animations — so this one rule is the whole
   transition system. */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.view { animation: viewIn 190ms var(--ease) both; }

.view-marketing {
  max-width: none;
  margin: 0;
  padding: 0 0 clamp(48px, 8vw, 96px);
}
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.view-marketing .band { margin-top: var(--band-gap); }

.section-head { margin-bottom: clamp(20px, 3vw, 32px); border-bottom: 3px solid var(--ink); padding-bottom: 14px; }
.section-head .section-h { margin-bottom: 8px; }
.section-sub { color: var(--muted); margin: 0; font-size: .95rem; max-width: 64ch; }

/* --------------------------------------------------------- issue line -- */
.issue-line {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  justify-content: space-between;
  max-width: var(--maxw); margin-inline: auto;
  padding: 11px var(--pad);
  border-bottom: 1px solid var(--hair);
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.issue-line span { white-space: nowrap; }

/* --------------------------------------------------------------- hero -- */
.hero-band { position: relative; padding: clamp(34px, 5vw, 64px) 0 clamp(10px, 2vw, 22px); }

.hero { position: relative; display: block; }

.hero-word { display: block; }
.hero-line-2 {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 32px);
  flex-wrap: wrap;
}
.hero-ecg {
  display: block; flex: 1 1 180px;
  min-width: 140px; max-width: 340px; height: auto;
  color: var(--ink); margin-top: clamp(4px, 1.4vw, 20px);
}
.hero-ecg path { stroke: currentColor; }

/* lede + CTA, held apart by the 6px teal side rule from the artboard */
.hero-body {
  display: grid; gap: clamp(22px, 3vw, 44px);
  grid-template-columns: 1fr;
  margin-top: clamp(26px, 4vw, 38px);
  align-items: start;
}
/* The CTA column is capped rather than `auto`: app.js rewrites #hero-note to a
   full sentence once the bank is counted, and a max-content track would let
   that one line steal half the spread from the lede. */
@media (min-width: 860px) { .hero-body { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); } }

.hero-copy { display: flex; gap: clamp(16px, 3vw, 30px); align-items: stretch; min-width: 0; }
.hero-copy::before {
  content: ""; flex: none; width: 6px; background: var(--primary); align-self: stretch;
}
.hero-copy .lede { margin: 0; }

.hero-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin: 0;
}
@media (min-width: 860px) { .hero-cta { align-items: flex-end; } .hero-note { text-align: right; } }
.hero-cta .btn-lg { width: 100%; }
@media (min-width: 480px) { .hero-cta .btn-lg { width: auto; } }
.hero-note {
  color: var(--muted); margin: 0;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

.hero-second { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (min-width: 860px) { .hero-second { justify-content: flex-start; } }

/* "GET THE APP" — a masthead-styled block, not a pill. */
.hero-chips { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: clamp(22px, 3vw, 32px); }
.chip-action {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; min-height: 46px;
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip-action:hover { background: var(--stamp); color: var(--stamp-ink); }
.chip-quiet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; min-height: 0;
  background: transparent; color: var(--muted); border: 0;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

/* ---------------------------------------------------- oversized numerals -- */
.stats-band {
  position: relative;
  list-style: none; margin: clamp(30px, 4vw, 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: transparent;
}
@media (min-width: 700px) { .stats-band { grid-template-columns: repeat(3, 1fr); } }
.stats-band li {
  text-align: left; padding: clamp(18px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--hair);
}
.stats-band li:first-child { border-top: 0; }
@media (min-width: 700px) {
  .stats-band li { border-top: 0; border-left: 1px solid var(--hair); padding-inline: clamp(16px, 2vw, 26px); }
  .stats-band li:first-child { border-left: 0; padding-left: 0; }
}
.stat-big {
  display: block;
  font-family: var(--display-font); font-weight: 400;
  font-size: clamp(3rem, 1.6rem + 5vw, 4.5rem);
  line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.stat-big .slash { color: var(--line-strong); }
.stat-big .teal { color: var(--primary); }
.stat-cap {
  display: block; margin-top: 8px;
  font-size: .66rem; font-weight: 700; color: var(--muted);
  letter-spacing: .16em; text-transform: uppercase;
}

/* --------------------------------------------- the thesis + the specimen -- */
.thesis-spread {
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) { .thesis-spread { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }

.thesis { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pull-quote {
  font-family: var(--display-font); font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.85rem);
  line-height: 1.1; letter-spacing: -.015em; margin: 0;
}
.thesis p { margin: 0; font-size: .96rem; line-height: 1.65; color: var(--ink-2); }
.thesis-cite {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}

/* The demo question IS the specimen card: 2px ink border, 10px solid teal
   block underneath. The offset needs room, so the grid gets right margin at
   the sizes where the block is drawn. */
.demo-card {
  border: 2px solid var(--ink);
  box-shadow: var(--offset);
  margin-right: 10px; margin-bottom: 10px;
}
.demo-card .q-stem { font-size: 1.04rem; }
.demo-after { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); }
#demo-hint { margin: 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }

.specimen-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 12px; margin-bottom: 16px;
}
.specimen-head b {
  font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.specimen-head i {
  font-family: var(--display-font); font-style: italic;
  font-size: 1.05rem; color: var(--coral-700);
}

/* The artboard's "✓ EXAM-STANDARD" state, added by CSS so the demo's existing
   JS keeps working untouched — it only ever adds `.is-correct`. */
.demo-card .opt.is-correct { position: relative; padding-right: 16px; flex-wrap: wrap; }
.demo-card .opt.is-correct::after {
  content: "EXAM-STANDARD";
  margin-left: auto; align-self: center;
  font-size: .62rem; font-weight: 800; letter-spacing: .14em;
  color: var(--primary); white-space: nowrap;
}

/* ------------------------------------------------------ format gallery -- */
.format-gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.format-tile {
  background: transparent;
  border: 0; border-left: 1px solid var(--hair); border-top: 1px solid var(--hair);
  padding: clamp(18px, 2.4vw, 24px);
  transition: background var(--dur) var(--ease);
}
.format-tile:hover { background: var(--surface-2); }
.format-tile h3 { margin: 0 0 4px; }
.format-tile p { margin: 0; font-size: .86rem; color: var(--muted); }

.format-art { display: block; width: 100%; max-width: 150px; height: auto; margin-bottom: 14px; }
/* The schematic vocabulary: an outlined box is an unchosen thing, an ink or
   teal one is chosen, coral is a highlight the student made. */
.fa-box  { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.fa-box.fa-on { fill: color-mix(in srgb, var(--primary) 16%, transparent); stroke: var(--primary); stroke-width: 2; }
.fa-dot  { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.fa-dot-on { fill: var(--primary); stroke: var(--primary); }
.fa-sq   { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.fa-sq-on { fill: var(--primary); stroke: var(--primary); }
.fa-num  { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.fa-num-on { fill: var(--ink); stroke: var(--ink); }
.fa-link { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 3; }
.fa-rule { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.fa-text { stroke-width: 3.4; stroke-linecap: round; opacity: .5; }
.fa-mark { fill: color-mix(in srgb, var(--coral-500) 48%, transparent); }
.fa-step { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.fa-step-on { fill: color-mix(in srgb, var(--primary) 30%, transparent); stroke: var(--primary); }
.fa-step-now { fill: var(--primary); stroke: var(--primary); }

/* -------------------------------------------------------- comparison -- */
/* The table is allowed to be wider than a phone; it scrolls inside its own
   box so the page itself never scrolls sideways. */
.compare-wrap {
  overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--surface);
  border: 2px solid var(--ink);
}
.compare { width: 100%; min-width: 580px; border-collapse: collapse; }
.compare th, .compare td {
  padding: 15px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hair); font-size: .92rem;
}
.compare thead th {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .16em;
  color: var(--stamp-ink); background: var(--stamp); border-bottom: 0;
}
.compare tbody th { width: 24%; font-weight: 800; color: var(--ink); }
.compare tbody td { color: var(--muted); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .col-us { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.compare thead .col-us { background: var(--primary); color: var(--on-teal); }
.compare tbody .col-us { color: var(--ink-2); }
.compare .col-us b { color: var(--ink); font-weight: 800; }
.cell-sub { display: block; margin-top: 5px; font-size: .79rem; color: var(--muted); }

/* --------------------------------------------------------- manifesto -- */
.manifesto {
  display: flex; flex-wrap: wrap; gap: 12px 30px;
  justify-content: space-between;
  padding: clamp(22px, 3vw, 32px) 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-2);
}
.manifesto span:last-child { color: var(--coral-700); font-weight: 800; }

/* ---------------------------------------------------- price colophon -- */
.colophon {
  display: flex; flex-direction: column;
  border: 3px solid var(--ink);
  margin-top: clamp(26px, 4vw, 38px);
}
@media (min-width: 720px) { .colophon { flex-direction: row; align-items: stretch; } }
.colophon-copy {
  background: var(--primary); color: var(--on-teal);
  padding: clamp(26px, 4vw, 42px);
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
}
.colophon-copy .kicker { color: var(--on-teal); opacity: .9; }
.colophon-line {
  font-family: var(--display-font); font-weight: 400;
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem);
  line-height: 1.08; margin: 0;
}
.colophon-price {
  background: var(--coral-500); color: #191512;
  padding: clamp(22px, 3vw, 40px) clamp(26px, 4vw, 44px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  flex: none;
  border-top: 3px solid var(--ink);
}
@media (min-width: 720px) { .colophon-price { border-top: 0; border-left: 3px solid var(--ink); } }
.colophon-num {
  font-family: var(--display-font); font-weight: 400;
  font-size: clamp(3.4rem, 2rem + 5vw, 5.25rem); line-height: 1;
}
.colophon-note { font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

/* ----------------------------------------------- reviews placeholder -- */
/* There are no reviews, so this says so. It is a slot, not a testimonial. */
.review-slot {
  text-align: center;
  padding: clamp(26px, 4vw, 48px);
  border: 2px dashed var(--line-strong);
  background: transparent;
}
.review-badge {
  display: inline-block; margin-bottom: 16px;
  padding: 6px 14px;
  background: var(--coral-500); color: #191512;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.review-slot p { max-width: 56ch; margin-inline: auto; color: var(--ink-2); }
.review-slot .micro { margin-top: 12px; }

/* ================================================== APP-FEEL, NOT WEBSITE == */

/* --------------------------------------------------- install affordance -- */
.install-btn {
  white-space: nowrap;
  background: transparent; border-color: var(--line-strong); color: var(--ink);
}
.install-btn:hover:not([disabled]) { background: var(--stamp); border-color: var(--stamp); color: var(--stamp-ink); }

@media (max-width: 620px) {
  .install-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .install-btn { padding: 9px 12px; }
}

/* Once the app is actually installed the browser's own chrome is gone, so
   ours tightens up to match, and every "install me" affordance retires. */
@media (display-mode: standalone) {
  .chrome { padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .install-btn, #hero-install { display: none !important; }
  .site-footer { padding: 16px var(--pad) 26px; }
  html { scroll-behavior: auto; }
  body { overscroll-behavior-y: none; }
  .hero-band { padding-top: clamp(18px, 3vw, 34px); }
}
/* Belt and braces for engines that do not match the media feature; app.js
   sets this attribute from the same signal. */
body[data-standalone="yes"] .install-btn,
body[data-standalone="yes"] #hero-install { display: none !important; }
body[data-standalone="yes"] .chrome { padding-block: 6px; }

/* ---------------------------------------------- sticky mobile CTA dock -- */
/* Phone-only, landing-only: an ink bar with a coral price cell, docked flush
   above the tab bar so the two read as one printed strip. */
.cta-dock { display: none; }
@media (max-width: 640px) {
  body[data-view="landing"] .cta-dock {
    position: fixed; z-index: 44; left: 0; right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: stretch; gap: 0;
    padding: 0;
    background: var(--stamp);
    border-top: 3px solid var(--ink);
  }
  .cta-dock .btn-block { width: auto; flex: 1 1 auto; }
  .cta-dock #cta-dock-start {
    background: var(--stamp); color: var(--stamp-ink); border: 0;
    min-height: 54px;
  }
  .cta-dock #cta-dock-start:hover:not([disabled]) { background: var(--stamp); color: var(--stamp-ink); }
  .cta-dock-link {
    flex: none; white-space: nowrap;
    background: var(--coral-500); color: #191512; border: 0;
    min-height: 54px; padding-inline: 18px;
    font-weight: 800; font-size: .72rem; letter-spacing: .12em;
  }
  .cta-dock-link:hover:not([disabled]) { background: var(--coral-600); color: #191512; text-decoration: none; }

  /* room for both bars, and toasts that clear them */
  body[data-view="landing"] { padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
  body[data-view="landing"] .toast-region { bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }
}

/* =============================================== GLOBAL POLISH PASS ====== */

/* ------------------------------------------------------- microreactions -- */
/* Dignified: a settle and a small nudge. Nothing bounces, nothing confettis. */
@keyframes optSettle {
  0%   { transform: none; }
  45%  { transform: scale(1.008); }
  100% { transform: none; }
}
@keyframes optNudge {
  0%, 100% { transform: none; }
  28%      { transform: translateX(-3px); }
  64%      { transform: translateX(2px); }
}
.opt.is-correct { animation: optSettle 320ms var(--ease) both; }
.opt.is-wrong   { animation: optNudge 300ms var(--ease) both; }
.verdict { animation: viewIn 240ms var(--ease) both; }

/* ---------------------------------------------------- icon plates ------ */
/* One treatment for every "icon beside a heading": a square, ink-ruled plate.
   Applied by selector so no JS had to change to get it. */
.feature-ico,
.mode-card > .ico-lg,
.shelf-card > .ico-lg,
.lock-panel > .ico-lg,
.notice > .ico-lg {
  flex: none;
  width: 46px; height: 46px;
  box-sizing: border-box; padding: 10px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--primary);
  margin-top: 0;
}
.feature-ico .ico-lg { width: 24px; height: 24px; }
.mode-card.mode-lead > .ico-lg { background: var(--coral-500); border-color: var(--ink); color: #191512; }
.notice > .ico-lg { border-color: var(--line-strong); color: var(--muted); }

/* ------------------------------------------------------------- focus -- */
/* Big, brand-coloured, and never clipped by an overflow box. */
.btn:focus-visible,
.opt:focus-visible,
.mode-card:focus-visible,
.shelf-card:focus-visible,
.chip-action:focus-visible,
.icon-btn:focus-visible,
.chrome-nav a:focus-visible,
.seg button:focus-visible,
.hl-seg:focus-visible,
.matrix-radio:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* --------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body[data-motion="reduced"] *, body[data-motion="reduced"] *::before, body[data-motion="reduced"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}

/* ----------------------------------------------------------- printing -- */
@media print {
  .chrome, .toast-region, .q-actions, .site-footer, .cta-dock, .issue-line { display: none !important; }

  /* A companion prints as a document, not as a screenshot of an app. The
     palette is forced back to ink-on-paper so a student reading in dark mode
     does not print a black rectangle. These overrides sit last in the file so
     they win the specificity tie with the two dark blocks near the top. */
  @page { margin: 14mm; }

  html[data-theme] {
    color-scheme: light;
    --bg: #FFFFFF; --bg-alt: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF;
    --tint: #F2F4F3; --line: #CCCCCC; --line-strong: #999999; --hair: #CCCCCC;
    --ink: #101010; --ink-2: #232323; --muted: #4A4A4A;
    --primary: #0B5F58; --on-teal: #FFFFFF;
    --stamp: #101010; --stamp-ink: #FFFFFF;
    --slab: #FFFFFF; --slab-ink: #101010; --slab-muted: #4A4A4A;
    --shadow-1: none; --shadow-2: none; --shadow-3: none;
    --offset: none; --offset-sm: none; --offset-coral: none;
  }

  body { padding-bottom: 0 !important; background: #FFFFFF; }
  .skip-link, .doc-back, .doc-actions, .doc-hint { display: none !important; }
  .view { max-width: none; padding: 0; }
  .doc-head { margin-bottom: 10mm; }
  .rationale { border: 1px solid #999; }
  .rationale h4 { color: #101010; }
  /* overflow must go back to visible on paper, or a wide figure is clipped
     at the page edge instead of being scaled by the print engine. */
  .doc-body { border: 0; padding: 0; background: transparent; overflow: visible; }
  .doc-body a { text-decoration: underline; }
}

/* ------------------------------------------------------------------ faq ---
   Editorial FAQ: an index of questions, ruled like a contents page. Square
   corners, ink rules, serif questions. <details> so it works with no JS and
   stays keyboard-native. */
.faq{ border-top:3px solid var(--ink); }
.faq-item{ border-bottom:1px solid var(--line-strong); }
.faq-item > summary{
  list-style:none; cursor:pointer; display:flex; gap:.75rem; align-items:baseline;
  padding:1.05rem .25rem; min-height:44px;
  font-family:var(--display-font); font-size:clamp(1.1rem,2.5vw,1.45rem); line-height:1.25;
  color:var(--ink);
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::before{
  content:"+"; flex:none; width:1.1em; font-family:var(--ui-font); font-weight:800;
  color:var(--accent-ink); transform:translateY(.05em);
}
.faq-item[open] > summary::before{ content:"3"; }
.faq-item > summary:hover{ color:var(--accent-ink); }
.faq-item > summary:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; }
.faq-item > p{
  margin:0 0 1.15rem 1.85rem; max-width:62ch;
  color:var(--ink-2); font-size:.98rem; line-height:1.6;
}
@media (max-width:520px){ .faq-item > p{ margin-left:1.6rem; } }
@media print{ .faq-item > p{ display:block; } }