/* nextgensatprep.com — one stylesheet. Tokens are the app's 2.0 palette (NextGen AI SAT Prep/DesignSystem/Tokens/Colors.swift)
   and its display face, Plus Jakarta Sans (SIL OFL, self-hosted). Spec: _website/SPEC.md D7–D9. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F7F6F3;
  --surface: #FFFFFF;
  --sunken: #EEECE7;
  --ink: #16151A;
  --ink-brand: #1C1B29;
  --ink-raised: #2B2A3A;
  --soft: #4A4950;
  --muted: #65646C;
  --on-ink: #FFFFFF;
  --on-ink-soft: #C9C7D3;
  --accent: #C2410C;          /* text-weight orange, 5:1 on paper */
  --accent-hi: #FF8A4C;       /* hero orange, on ink fields only */
  --accent-press: #9A3412;
  --gold: #F5B83D;
  --gold-ink: #3A2600;
  --success: #137A3A;
  --success-soft: #E7F6EC;
  --error: #C81E1E;
  --error-soft: #FDECEC;
  --info: #2459D6;
  --focus: #C2410C;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  /* Five sizes do the work (taste rule). */
  --t-display: clamp(2.6rem, 1.1rem + 5.4vw, 5.6rem);
  --t-h2: clamp(1.9rem, 1.15rem + 2.5vw, 3.25rem);
  --t-h3: 1.375rem;
  --t-body: 1.125rem;
  --t-small: 0.9375rem;

  --margin: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --radius: 18px;
  --gap-section: clamp(88px, 11vw, 168px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F0F12;
    --surface: #18181C;
    --sunken: #222227;
    --ink: #F4F3F0;
    --ink-brand: #1C1B29;
    --ink-raised: #302E42;
    --soft: #C3C1BC;
    --muted: #A9A7B3;
    --accent: #FF8A4C;
    --accent-press: #FFA674;
    --success: #4ADE80;
    --success-soft: #0F2E1C;
    --error: #FF7A7A;
    --error-soft: #3A1518;
    --focus: #FF8A4C;
  }
}

/* ---------------------------------------------------------------- reset + base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-hi); color: #16151A; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 650; }
.small { font-size: var(--t-small); color: var(--muted); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- buttons, badge, download */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 26px; border-radius: 999px; border: 0; text-align: center;
  /* line-height above 1 so a label that wraps on a phone keeps its lines apart; text-box trims the line box to
     cap height and baseline, so flex centring puts the letters (not the font's ascender space) in the middle. */
  font: 650 1.0625rem/1.2 var(--font-display); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  text-box: trim-both cap alphabetic;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn:active { transform: scale(0.97); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--accent); color: #fff; }
.btn-accent { background: #C2410C; color: #fff; }
.btn-accent:hover { background: #9A3412; color: #fff; }
.btn-quiet { background: var(--sunken); color: var(--ink); }
.btn-quiet:hover { background: var(--ink); color: var(--paper); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.975rem; }
.badge { display: inline-block; line-height: 0; border-radius: 10px; transition: transform .18s ease; }
.badge:hover { transform: translateY(-2px); }
.badge img { width: 150px; height: auto; }
.badge-lg img { width: 180px; }
.download { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.qr { display: none; align-items: center; gap: 12px; color: var(--muted); font-size: var(--t-small); line-height: 1.3; max-width: 230px; }
.qr img { width: 68px; height: 68px; background: #fff; padding: 6px; border-radius: 8px; }
@media (min-width: 900px) and (hover: hover) { .qr { display: flex; } }
.next-sat { font-size: 1.125rem; color: var(--soft); margin: 10px 0 0; }
.next-sat strong { color: var(--ink); }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); }
.site-header.scrolled { background: var(--paper); }
.bar { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 800 1.125rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.brand img { border-radius: 9px; }
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 1rem; }
.nav a { text-decoration: none; color: var(--soft); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 650; }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; padding: 10px 16px; border-radius: 999px; background: var(--sunken); font-weight: 650; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: fixed; left: 0; right: 0; top: 72px; bottom: 0; overflow-y: auto; background: var(--paper); padding: 8px var(--margin) 28px; display: grid; align-content: start; gap: 4px; }
.menu:not([open]) .menu-panel { display: none; }
.menu-panel a { padding: 12px 0; text-decoration: none; font: 700 1.375rem/1.2 var(--font-display); }
.menu-panel .btn { margin-top: 14px; font-size: 1.125rem; }
@media (max-width: 1080px) { .nav { gap: 18px; font-size: 0.95rem; } }
@media (max-width: 960px) { .nav, .nav-cta { display: none; } .menu { display: block; } }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--gap-section); }
.section-tight { padding-block: clamp(56px, 7vw, 104px); }
.section-head { max-width: 860px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head p { font-size: 1.375rem; color: var(--soft); margin-top: 18px; max-width: 46ch; }
.lead { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.45; color: var(--soft); max-width: 40ch; margin-top: 22px; }
.ink-field { background: var(--ink-brand); color: var(--on-ink); }
.ink-field .lead, .ink-field .section-head p { color: var(--on-ink-soft); }
.ink-field a:hover { color: var(--accent-hi); }
.sunken-field { background: var(--sunken); }

/* ---------------------------------------------------------------- home hero: the split stage */
.stage-page { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.stage {
  position: sticky; top: 84px; height: calc(100svh - 104px); min-height: 560px; max-height: 980px;
  background: var(--ink-brand); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden;
}
.stage-screens { position: relative; height: 82%; aspect-ratio: 1320 / 2868; margin-bottom: 28px; }
.stage-screens img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 9% / 4.2%;
  opacity: 0; transform: scale(0.985); transition: opacity .5s ease, transform .6s ease;
}
.stage-screens img.on { opacity: 1; transform: none; }
.stage-caption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: var(--on-ink-soft); font-size: var(--t-small); }
.stage-col { padding-top: clamp(24px, 6vh, 72px); }

/* ---------------------------------------------------------------- home hero (2026-11-07 owner pass)
   The App Store frames' own language: the burnt-orange field, white display type with one word on a white
   tag, a framed phone rising from the bottom edge and the explanation popping out of it. Same field in dark mode,
   as in the store frames. White on #C2410C is 5.18:1, so every text on the field stays solid white. */
.hero { --field: #C2410C; --focus: #FFFFFF; background: var(--field); color: #FFFFFF; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 72px); }
.hero-text { padding-block: clamp(40px, 6vh, 72px) clamp(36px, 5vh, 64px); align-self: center; }
.hero h1 { font-size: clamp(2.75rem, 1rem + 4.6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.04em; }
/* inline-block so the tag can keep clear of the descenders on the line above (the y of "every"). */
.hl { display: inline-block; background: #FFFFFF; color: var(--ink-brand); padding: 0.02em 0.12em 0.06em; margin: 0.14em -0.02em 0; border-radius: 0.14em; }
.hero .lead { color: #FFFFFF; max-width: 36ch; margin-top: clamp(18px, 2.4vh, 26px); }
.hero-actions { margin-top: clamp(22px, 3vh, 32px); }
.hero .qr { color: #FFFFFF; }
.hero .trust-line { color: #FFFFFF; margin-top: 16px; }
.hero-foot { margin-top: clamp(28px, 4vh, 44px); max-width: 52ch; }
.hero-foot p { font-size: 1rem; line-height: 1.5; color: #FFFFFF; margin: 0 0 6px; }
.hero-foot strong, .hero .price-line strong { color: #FFFFFF; font-weight: 750; } /* beats the later .price-line strong (ink, 3.5:1 on the field) */
.hero a { color: #FFFFFF; }
.hero a:hover { color: #FFFFFF; text-decoration-thickness: 2px; }
.hero-visual { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 100%; }
.hero-visual .device { width: min(410px, 82%); translate: 8% 12%; animation: hero-rise 1s cubic-bezier(.16, 1, .3, 1) both; }
.hero-visual .popout { position: absolute; left: -6%; bottom: 4%; width: min(420px, 80%); transform-origin: 70% 50%; animation: hero-pop .8s .3s cubic-bezier(.16, 1, .3, 1) both; }
/* Transform only: both pictures are visible from the first frame (the phone is the LCP image). */
@keyframes hero-rise { from { transform: translateY(48px); } to { transform: none; } }
@keyframes hero-pop { from { transform: scale(.88) translate(6%, 10px); } to { transform: none; } }

/* Shared frames for app captures: a dark bezel with real depth, and a white card for a magnified detail. */
.device { position: relative; background: #16151A; padding: clamp(7px, 0.8vw, 11px); border-radius: clamp(36px, 4.4vw, 54px);
  box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.07) inset, 0 34px 70px -24px rgba(20, 6, 0, 0.6), 0 12px 24px -12px rgba(20, 6, 0, 0.4); }
.device img { width: 100%; border-radius: clamp(29px, 3.6vw, 44px); }
.popout { background: #FFFFFF; border-radius: 20px; padding: 8px; box-shadow: 0 30px 60px -18px rgba(20, 6, 0, 0.55), 0 8px 18px -8px rgba(20, 6, 0, 0.35); }
.popout img { width: 100%; border-radius: 13px; }

/* Phones: text, then the picture, then the price block (the order the council agreed for the old hero). The text
   column dissolves into the flex column so the picture can sit between its parts. */
@media (max-width: 760px) {
  .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero-text { display: contents; }
  .hero h1 { margin-top: 24px; }
  /* Sized so the phone already shows on an iPhone SE's first screen (375 x 667). */
  .hero .lead { font-size: 1.0625rem; line-height: 1.45; margin-top: 14px; }
  .hero-actions { margin-top: 18px; }
  .hero .trust-line { font-size: 1rem; margin-top: 12px; }
  .hero-foot { order: 1; margin: 0 0 32px; }
  .hero-visual { margin-top: 10px; height: min(112vw, 440px); overflow-x: visible; overflow-y: clip; }
  .hero-foot { padding-top: 4px; }
  .hero-visual .device { position: absolute; top: 0; left: 50%; width: 60%; translate: -32% 0; }
  .hero-visual .popout { left: -2%; bottom: auto; top: 44%; width: 76%; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .hero-visual .device { width: 92%; translate: 4% 10%; }
  .hero-visual .popout { left: -14%; width: 96%; }
}

.price-line { margin-top: 26px; font-size: 1.125rem; color: var(--soft); }
.price-line strong { color: var(--ink); }
.stage-step { padding-block: clamp(48px, 9vh, 112px); max-width: 560px; }
.stage-step h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); }
.stage-step p { margin-top: 16px; font-size: 1.125rem; color: var(--soft); }
.stage-step .mobile-shot { display: none; }
.stage-step ul { margin: 18px 0 0; padding-left: 1.1em; color: var(--soft); }
.stage-step li { margin-bottom: 6px; }

@media (max-width: 900px) {
  .stage-page { grid-template-columns: 1fr; }
  .stage { display: none; }
  .hero-copy { min-height: 0; padding: 24px 0 8px; }
  .stage-step { padding-block: 52px; }
  .stage-step .mobile-shot { display: block; margin: 26px 0 0; background: var(--ink-brand); border-radius: var(--radius); padding: 24px 0 0; overflow: hidden; }
  .stage-step .mobile-shot img { width: 78%; margin: 0 auto; border-radius: 28px 28px 0 0; }
}

/* ---------------------------------------------------------------- try-a-question showcase */
.tryit { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; }
.tryit > div { padding: clamp(40px, 6vw, 96px) var(--margin); }
@media (min-width: 901px) {
  .tryit-q { padding-left: max(var(--margin), calc((100vw - var(--max)) / 2 + var(--margin))) !important; }
  .tryit-a { padding-right: max(var(--margin), calc((100vw - var(--max)) / 2 + var(--margin))) !important; }
}
.tryit-q { background: var(--ink-brand); color: var(--on-ink); display: flex; flex-direction: column; }
.tryit-a { background: var(--surface); display: flex; flex-direction: column; box-shadow: inset 0 1px 0 var(--sunken), inset 0 -1px 0 var(--sunken); }
/* The stage card ended flush on this full-width band, so its rounded bottom corners left two notches in the dark field
   (owner report 2026-11-08). Paper between them makes the card end cleanly and the band start as its own section. */
@media (min-width: 901px) { .stage-page { padding-bottom: clamp(56px, 7vw, 112px); } }
.tryit h2 { font-size: var(--t-h2); }
.tryit-q h2 { margin-bottom: 28px; }
.tryit-meta { color: var(--on-ink-soft); font-size: var(--t-small); margin-bottom: 14px; }
.tryit-stem { font-size: 1.375rem; line-height: 1.5; max-width: 34ch; }
.tryit-choices { display: grid; gap: 12px; margin-top: 26px; max-width: 520px; }
.choice {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  background: var(--ink-raised); color: var(--on-ink); border: 2px solid transparent; border-radius: 14px;
  padding: 14px 16px; font: 500 1.125rem/1.35 var(--font-text); transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.choice:hover { border-color: var(--accent-hi); }
.choice:active { transform: scale(0.99); }
.choice .letter { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.12); font: 700 0.95rem/1 var(--font-display); }
.choice[aria-pressed="true"].right { background: #E7F6EC; color: #0B3B1D; border-color: #137A3A; }
.choice[aria-pressed="true"].wrong { background: #FDECEC; color: #5C0E0E; border-color: #C81E1E; }
.choice.reveal-right { border-color: #4ADE80; }
.tryit-a .tryit-title { margin: 0 0 24px; }
.tryit-wait { color: var(--muted); font-size: 1.125rem; max-width: 34ch; }
.js .tryit-result { display: none; }
.js .tryit-result.on { display: block; }
html:not(.js) .tryit-wait { display: none; }
html:not(.js) .choice { pointer-events: none; }
.verdict { font: 800 1.5rem/1.2 var(--font-display); margin-bottom: 14px; }
.verdict.right { color: var(--success); }
.verdict.wrong { color: var(--error); }
.explain { background: var(--paper); border-radius: 14px; padding: 22px 24px; max-width: 560px; }
.explain p { font-size: 1.125rem; }
.explain p:last-child { margin-bottom: 0; }
.tryit-a .after { margin-top: 26px; }
.noscript-answer { margin-top: 18px; color: var(--on-ink-soft); }
.noscript-answer summary { cursor: pointer; font-weight: 650; color: var(--on-ink); }
@media (max-width: 900px) {
  .tryit { grid-template-columns: 1fr; min-height: 0; }
}

/* ---------------------------------------------------------------- facts row (proof) */
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
.facts-row .figure { font: 800 clamp(2.5rem, 1.6rem + 3vw, 4.25rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.facts-row p { margin-top: 10px; color: var(--soft); font-size: 1.125rem; max-width: 24ch; }
@media (max-width: 860px) { .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- how it works (slider) */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.steps-shot { background: var(--ink-brand); border-radius: var(--radius); padding: 36px 0 0; display: grid; place-items: end center; overflow: hidden; min-height: 520px; }
.steps-shot > span { display: none; width: min(64%, 360px); }
.steps-shot > span.on { display: block; animation: rise .35s ease both; }
.steps-shot img { width: 100%; border-radius: 30px 30px 0 0; }
.step-clause { font: 800 clamp(2rem, 1.3rem + 2.6vw, 3.6rem)/1.05 var(--font-display); letter-spacing: -0.035em; min-height: 2.2em; }
.step-text { color: var(--soft); font-size: 1.125rem; margin-top: 18px; max-width: 40ch; min-height: 5.2em; }
.step-range { margin-top: 34px; }
.step-range input { width: 100%; accent-color: #C2410C; height: 32px; cursor: pointer; }
.step-names { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--muted); }
.step-names li.on { color: var(--ink); font-weight: 650; }
.step-names button { all: unset; cursor: pointer; }
.step-names button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .steps-shot { min-height: 0; } .step-names { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- pricing as a menu */
.menu-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
.menu-grid .menu-head p { color: var(--soft); margin-top: 18px; }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.menu-group { margin-bottom: 48px; }
.menu-group h3 { margin-bottom: 18px; }
.menu-item { margin-bottom: 22px; }
.menu-item .row { display: flex; justify-content: space-between; gap: 16px; font-size: 1.125rem; font-weight: 600; }
.menu-item .row .p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item .d { color: var(--soft); font-size: 1rem; max-width: 36ch; margin-top: 2px; }
/* The recommended plan row. Named "pick", not "hl": .hl is the hero's white word tag, and sharing the name pulled its
   tight padding and negative margins into this row (owner report 2026-11-08). The negative side margins keep the text
   aligned with the rows around it. */
.menu-item.pick { background: var(--surface); border-radius: 14px; padding: 14px 18px 16px; margin: 0 -18px 22px;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 12px 28px -18px rgba(22, 21, 26, 0.4); }
.menu-item.pick .row { color: var(--accent); }
/* Under each alternative: what NextGen does for the same need (owner request 2026-11-08). Claims only about NextGen,
   from facts the site already sources; nothing about what a competitor lacks, since none of that was confirmed. */
.menu-item .vs { font-size: 1rem; color: var(--ink); max-width: 36ch; margin-top: 6px; }
.menu-item .vs b { color: var(--accent); font-weight: 650; }
/* p.per-day under .menu-grid: the column's own `.menu-head p` rule outranked the orange and turned the figure grey. */
.per-day, .menu-grid .menu-head p.per-day { font: 800 clamp(3rem, 2rem + 4vw, 6rem)/0.95 var(--font-display); letter-spacing: -0.045em; color: var(--accent); margin-top: 26px; }
.per-day-note { color: var(--soft); max-width: 30ch; margin-top: 12px; }
.per-day-unit { font: 700 clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.per-day-unit span { font-weight: 600; color: var(--soft); }
.price-device .per-day-unit, .ink-field .per-day-unit { color: var(--on-ink); }
@media (max-width: 960px) { .menu-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .menu-cols { grid-template-columns: 1fr; } .menu-item.pick { margin-inline: 0; padding-inline: 16px; } }

/* ---------------------------------------------------------------- features list (inner pages) */
.feature-list { display: grid; gap: clamp(72px, 9vw, 128px); }
.feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.feature:nth-child(even) .feature-shot { order: 2; }
.feature-shot { background: var(--ink-brand); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); display: grid; place-items: center; }
.feature-shot img { border-radius: 16px; width: 100%; max-width: 520px; }
.feature-shot.tall img { max-width: 300px; border-radius: 28px; }
.feature-text h2 { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.75rem); }
.feature-text p { margin-top: 16px; color: var(--soft); font-size: 1.125rem; max-width: 42ch; }
.feature-text ul { color: var(--soft); padding-left: 1.1em; margin: 14px 0 0; }
.feature-text li { margin-bottom: 6px; }
.tier { display: inline-block; margin-top: 18px; font-size: var(--t-small); font-weight: 650; padding: 6px 12px; border-radius: 999px; background: var(--sunken); color: var(--soft); }
.tier.premium { background: #FFF6DD; color: #3A2600; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature:nth-child(even) .feature-shot { order: 0; } }

/* ---------------------------------------------------------------- page head (inner pages) */
.page-head { padding-block: clamp(48px, 7vw, 112px) clamp(40px, 5vw, 80px); }
.page-head h1 { font-size: clamp(2.4rem, 1.3rem + 4vw, 4.6rem); max-width: 16ch; }
.page-head .lead { max-width: 46ch; }
.page-head .download { margin-top: 32px; }
.page-head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-head-split .shot { background: var(--ink-brand); border-radius: var(--radius); padding: 32px 0 0; overflow: hidden; display: grid; place-items: end center; }
.page-head-split .shot img { width: 62%; border-radius: 26px 26px 0 0; }
@media (max-width: 860px) { .page-head-split { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- plan cards on /pricing/ (a real two-plan comparison) */
.plans { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; }
.plan { background: var(--surface); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; }
.plan.best { background: var(--ink-brand); color: var(--on-ink); }
.plan h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.plan .amount { font: 800 3.25rem/1 var(--font-display); letter-spacing: -0.04em; margin-top: 18px; font-variant-numeric: tabular-nums; }
.plan .unit { font-size: 1rem; color: var(--muted); margin-top: 6px; }
.plan.best .unit, .plan.best li, .plan.best .fine { color: var(--on-ink-soft); }
.plan .save { margin-top: 12px; font-weight: 700; color: var(--accent); }
.plan.best .save { color: var(--gold); }
.plan ul { margin: 22px 0 26px; padding-left: 1.1em; color: var(--soft); }
.plan li { margin-bottom: 8px; }
.plan .btn, .plan .badge { margin-top: auto; align-self: flex-start; }
.plan .fine { font-size: var(--t-small); color: var(--muted); margin-top: 14px; margin-bottom: 0; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 28px 0; border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
caption { caption-side: bottom; text-align: left; padding: 14px 18px; font-size: var(--t-small); color: var(--muted); }
th, td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--sunken); }
thead th { font: 700 0.95rem/1.3 var(--font-display); background: var(--sunken); }
tbody th { font-weight: 650; }
tr.me th, tr.me td { background: #FFF6DD; color: #3A2600; }
tr.me a { color: #3A2600; }
.compare { min-width: 760px; }
.yes { color: var(--success); font-weight: 650; }

/* ---------------------------------------------------------------- FAQ as reading text */
.qa-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); }
.qa-list { columns: 2; column-gap: 56px; }
.qa { break-inside: avoid; margin-bottom: 22px; font-size: 1.125rem; line-height: 1.55; }
.qa .q { font-weight: 700; color: var(--ink); }
.qa .a { color: var(--ink); }
.qa a { font-weight: 600; white-space: nowrap; }
.qa-group { margin-bottom: 64px; }
.qa-group h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 26px; }
.qa-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.qa-jump a { text-decoration: none; background: var(--sunken); padding: 8px 14px; border-radius: 999px; font-size: var(--t-small); font-weight: 600; }
.qa-jump a:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 900px) { .qa-wrap { grid-template-columns: 1fr; } .qa-list { columns: 1; } }

/* ---------------------------------------------------------------- reading: guides, legal, about */
.article-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); justify-content: space-between; grid-template-areas: "head head" "prose side"; gap: 0 clamp(32px, 5vw, 88px); }
.article-head { grid-area: head; padding-block: clamp(40px, 6vw, 96px) 40px; }
.article-head h1 { font-size: clamp(1.85rem, 1.1rem + 3.4vw, 4rem); max-width: 20ch; }
.crumbs { margin-bottom: 18px; font-size: var(--t-small); }
.crumbs a { color: var(--soft); }
.meta { color: var(--muted); font-size: var(--t-small); margin-top: 18px; }
.article-side { grid-area: side; }
.article-side > * { position: sticky; top: 96px; }
.toc { background: var(--surface); border-radius: var(--radius); padding: 24px 26px; }
.toc h2 { font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 1.1em; font-size: var(--t-small); }
.toc li { margin-bottom: 8px; }
.toc a { color: var(--soft); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.side-cta { margin-top: 20px; background: var(--ink-brand); color: var(--on-ink); border-radius: var(--radius); padding: 24px 26px; position: static !important; }
.side-cta p { color: var(--on-ink-soft); font-size: 1rem; }
.side-cta strong { color: var(--on-ink); }
.article-side { display: flex; flex-direction: column; }
.article-side .toc { position: sticky; top: 96px; }
.prose { grid-area: prose; max-width: 70ch; min-width: 0; padding-bottom: 72px; overflow-wrap: anywhere; }
.prose h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin: 2.2em 0 0.6em; }
.prose h3 { margin: 1.8em 0 0.5em; }
.prose h4 { font: 700 1.125rem/1.3 var(--font-display); margin: 1.5em 0 0.4em; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.65; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.45em; }
.prose a { color: var(--accent); }
.prose .tip { background: var(--sunken); border-radius: 14px; padding: 18px 22px; margin: 1.6em 0; }
.prose .tip p { margin: 0; }
.prose > :first-child { margin-top: 0; }
.prose .effective-date, .prose .subtitle { color: var(--muted); }
.prose .contact-box, .note-box { background: var(--surface); border-radius: var(--radius); padding: 24px 28px; margin: 0 0 2em; }
.prose hr { border: 0; height: 0; margin: 2em 0; }
.legal-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
@media (max-width: 900px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "prose"; }
  .article-side > *, .article-side .toc { position: static; }
  .article-side { margin-bottom: 36px; }
  .side-cta { display: none; }
}

/* ---------------------------------------------------------------- guide list */
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.guide-list a { display: block; padding: 26px 0; text-decoration: none; }
.guide-list strong { display: block; font: 750 1.5rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.guide-list span { display: block; margin-top: 8px; color: var(--soft); }
.guide-list a:hover strong { color: var(--accent); }
@media (max-width: 760px) { .guide-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- two-column text blocks (parents, about) */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(28px, 4vw, 64px); }
.cols h3 { margin-bottom: 10px; }
.cols p { color: var(--soft); }
.ink-field .cols p { color: var(--on-ink-soft); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.split-2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); }
.split-2 > h2 { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem); }
@media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- closing call to action */
.cta-band { padding-block: clamp(96px, 12vw, 176px); }
.cta-band h2 { max-width: 15ch; }
.cta-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.cta-shot { background: var(--ink-brand); border-radius: var(--radius); padding: 40px 0 0; display: grid; place-items: end center; overflow: hidden; }
.cta-shot img { width: 58%; border-radius: 28px 28px 0 0; }
@media (max-width: 860px) { .cta-split { grid-template-columns: 1fr; } .cta-shot { display: none; } }
.cta-band p { font-size: 1.375rem; color: var(--soft); max-width: 44ch; margin: 22px 0 34px; }
.cta-band.ink-field p { color: var(--on-ink-soft); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--sunken); padding-block: 72px 40px; font-size: 1rem; }
.foot-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; margin-bottom: 52px; }
.foot-brand p { color: var(--soft); max-width: 32ch; margin: 18px 0 22px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-cols h2 { font: 700 1rem/1.2 var(--font-display); letter-spacing: -0.01em; margin-bottom: 14px; }
.foot-cols a { display: block; padding: 5px 0; color: var(--soft); text-decoration: none; }
.foot-cols a:hover { color: var(--accent); text-decoration: underline; }
.legal-line { color: var(--muted); font-size: var(--t-small); margin: 0 0 8px; max-width: 90ch; }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- 404 */
.notfound { min-height: 60svh; display: flex; flex-direction: column; justify-content: center; }

/* ---------------------------------------------------------------- motion */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

.press-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.press-shots a { display: block; background: var(--ink-brand); border-radius: var(--radius); padding: 22px 22px 0; text-decoration: none; color: var(--on-ink); }
.press-shots img { border-radius: 20px 20px 0 0; }
.press-shots span { display: block; padding: 12px 0 16px; font-size: var(--t-small); color: var(--on-ink-soft); }
@media (max-width: 760px) { .press-shots { grid-template-columns: 1fr 1fr; } }
.side-cta img { width: 70%; margin: 18px auto 0; border-radius: 22px 22px 0 0; }
.side-cta { padding-bottom: 0; overflow: hidden; }
.side-cta .badge { margin-top: 4px; }

.split-2 .prose { grid-area: auto; padding-bottom: 0; }

.related { margin-top: 56px; }
.related h2 { font-size: 1.5rem; margin: 0 0 12px; }
.related ul { padding-left: 1.1em; }

/* ---------------------------------------------------------------- council round 1 */
:root { --on-accent: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root { --on-accent: #16151A; }
  tr.me th, tr.me td, .tier.premium { background: #2B2210; color: #FCE7B0; }
  tr.me a { color: #FCE7B0; }
  .tryit-a { box-shadow: inset 1px 0 0 #3A3850; }
  .ink-field { box-shadow: inset 0 1px 0 #2B2A3A, inset 0 -1px 0 #2B2A3A; }
}
.btn-ink:hover { background: var(--accent); color: var(--on-accent); }
.ink-field, .tryit-q, .stage, .plan.best, .side-cta { --focus: var(--accent-hi); }
.stage { transition: background-color .5s ease; }
.stage.is-hero { background: var(--accent-hi); }
.stage.is-hero .stage-caption { color: #16151A; }
.trust-line { margin: 18px 0 0; font-weight: 650; color: var(--ink); }
.handoff { font-size: 1.125rem; color: var(--soft); margin: 10px 0 0; }
@media (max-width: 900px) { .tryit-a .tryit-title { order: -1; } }
.price-device { background: var(--ink-brand); color: var(--on-ink); border-radius: var(--radius); padding: clamp(28px, 4vw, 56px); }
.price-device .per-day { color: var(--accent-hi); margin-top: 0; }
.price-device p:last-child { color: var(--on-ink-soft); margin: 10px 0 0; }
.plan .chip { align-self: flex-start; background: var(--gold); color: var(--gold-ink); font: 700 0.9375rem/1 var(--font-display); padding: 8px 12px; border-radius: 999px; margin: 0 0 14px; }
.plan .terms { font-size: var(--t-small); color: var(--soft); margin: 12px 0 0; }
.plan.best .terms { color: var(--on-ink-soft); }
@media (max-width: 960px) { .plans { display: flex; flex-direction: column; } .plan-yearly { order: -1; } }
.steps-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps-list li { counter-increment: step; }
.steps-list li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--accent-hi); color: #16151A; font: 800 1.25rem/1 var(--font-display); margin-bottom: 16px; }
.steps-list p { color: var(--soft); margin-top: 8px; }

/* /parents/ (owner 2026-11-08): the hero names every feature as a scannable checklist, and "What your teen gets"
   lists each one with its free or Premium label. The tick is drawn with borders, not a glyph. */
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 28px; max-width: 46rem; }
.ticks li { position: relative; padding-left: 30px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 20px; height: 20px; border-radius: 999px; background: var(--accent); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: calc(0.05em + 4px); width: 5px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kit-intro { color: var(--soft); margin-top: 14px; max-width: 60ch; }
.kit { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
.kit li { padding: 26px 0 30px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.kit p { color: var(--soft); margin-top: 8px; max-width: 58ch; }
.kit .tier { margin-top: 14px; }
@media (max-width: 640px) { .ticks { grid-template-columns: 1fr; } .kit { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .steps-list { grid-template-columns: 1fr; } }
.nav-cta-m { display: none; white-space: nowrap; flex: none; }
@media (max-width: 480px) { .bar { gap: 10px; } .nav-cta-m { padding: 0 14px; } .menu summary { padding: 10px 14px; } .price-device { display: none; } }
.qr-only { display: none; }
@media (min-width: 900px) and (hover: hover) { .qr-only { display: inline; } .phone-only { display: none; } }
@media (max-width: 960px) { .nav-cta-m { display: inline-flex; margin-left: auto; } .menu { margin-left: 10px; } }
.menu[open] .menu-word { display: none; }
.menu[open] summary::after { content: "Close"; }
.menu-open body { overflow: hidden; }
/* Bigger tap area for a lone text link. Never buttons or badges: this selector outranks .btn and turned the pill into an
   inline-block with 10px top padding, which pushed its label above centre (owner report 2026-11-07). */
p > a:only-child:not(.btn):not(.badge), .small > a:only-child:not(.btn):not(.badge) { display: inline-block; padding-block: 10px; margin-block: -10px; }
.related li { margin-bottom: 8px; }
@media print { .js [data-reveal] { opacity: 1; transform: none; } .site-header, .menu, .stage { display: none; } }

@media (max-width: 420px) { .site-header .brand span { display: none; } }

.plan .amount, .price-device .per-day { margin-bottom: 0; }

/* ---------------------------------------------------------------- app captures, site-wide (owner pass 2026-11-07)
   Owner: most screens on the site did not look appealing. Every capture used to be a bare screenshot on a flat ink
   slab, about 25 times over. Now, as in the App Store frames: tall screens sit in a phone bezel with real depth,
   detail crops are white pop-out cards, ink fields stay flat, and page heads and the closing band
   take the home hero's orange field. CSS only: the markup and every alt text are unchanged. */
.page-head-split .shot, .cta-shot { background: #C2410C; }
.stage-screens img, .feature-shot.tall img, .stage-step .mobile-shot img, .page-head-split .shot img,
.cta-shot img, .side-cta img, .steps-shot img {
  border: clamp(6px, 0.7vw, 10px) solid #16151A; background: #16151A;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13), 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 14px 28px -14px rgba(0, 0, 0, 0.5);
}
.stage-screens img { border-radius: 13% / 6%; }
.feature-shot.tall img { border-radius: 46px; }
/* Phones that rise from the bottom edge: no bottom bezel, the field's edge cuts them. */
.stage-step .mobile-shot img, .page-head-split .shot img, .cta-shot img, .side-cta img, .steps-shot img {
  border-bottom: 0; border-radius: 40px 40px 0 0;
}
.side-cta img { border-radius: 30px 30px 0 0; }
/* Detail crops: the magnified part of a screen, on a white card. */
.feature-shot:not(.tall) img {
  background: #FFFFFF; padding: 8px; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 70px -26px rgba(0, 0, 0, 0.75), 0 10px 22px -10px rgba(0, 0, 0, 0.45);
}
/* Rhythm on /features/: every second picture (the ones on the right) sits on the orange field. */
.feature:nth-child(even) .feature-shot { background: #C2410C; }
/* The split stage now starts below the full-width hero: give it room instead of sitting flush on the orange edge. */
.hero + .stage-page { padding-top: clamp(40px, 6vw, 96px); }