/* ============================================================================
   Aurene Prep — audience landing pages stylesheet (/teens, /parents).
   ----------------------------------------------------------------------------
   PART 1 (base) is a copy of the <style> blocks inside landing.html, extracted
   2026-08-27 so the ad pages render byte-identical brand styling without
   touching landing.html. If the landing design system changes meaningfully,
   re-extract (see project_context/changes_log.md 2026-08-27 entry).
   PART 2 (marked AUDIENCE PAGE COMPONENTS below) is new, ad-page-only CSS.
   These pages deliberately do NOT use .lp-reveal: paid-social visitors on slow
   in-app browsers must see content on first paint, with no JS-gated opacity.
   ============================================================================ */

/* ============================================================
   Aurene Prep — Color tokens
   Warm "paper & ink" palette. Sage-green accent, four subject
   accents, and pastel chip tints kept as RGB triplets so the
   dark theme can retint shared surfaces without touching alpha.
   ============================================================ */

:root {
  /* Surfaces & paper */
  --bg: #f3f0e9;          /* app background (warm cream) */
  --paper: #fbfaf6;       /* solid card/paper surface   */
  --milk: #fffaf0;        /* brightest paper tint        */
  --glass: rgba(var(--surface-rgb), 0.64);
  --glass-strong: rgba(var(--surface-rgb), 0.82);

  /* Ink / text */
  --ink: #25221e;         /* primary text */
  --muted: #716c64;       /* secondary text */
  --faint: #726b60;       /* tertiary / placeholder */

  /* Hairlines */
  --line: rgba(128, 119, 106, 0.2);
  --line-strong: rgba(108, 98, 83, 0.32);

  /* Brand accent (sage) */
  --accent: #687465;
  --accent-dark: #645452;

  /* Warm decorative neutrals */
  --tea: #d5c0a4;
  --latte: #ebe1d2;
  --blush: #ead4cc;
  --butter: #f1e1b9;
  --blue-gray: #dce2e3;

  /* Subject accents (English / Math / Reading / Science) */
  --english: #b56f70;
  --math: #687c63;
  --reading: #b08834;
  --science: #557b8d;

  /* RGB triplets so themes can retint shared surfaces without touching alpha */
  --surface-rgb: 255, 255, 252;
  --surface-alt-rgb: 244, 240, 232;
  --shine-rgb: 255, 255, 255; /* @kind color */

  /* Soft pastel chip/button tints (triplets so dark mode can retint). */
  --tint-green-rgb: 232, 238, 231;
  --tint-amber-rgb: 235, 225, 210;
  --tint-rose-rgb: 234, 212, 204;
  --tint-butter-rgb: 241, 225, 185;
}

/* ------------------------------------------------------------------ */
/* Dark theme: override the structural neutrals + surface tints only.  */
/* Decorative/subject pastels keep their own values so hard-coded text */
/* stays readable. Set data-theme="dark" on <html> or a scope.         */
/*                                                                     */
/* NOT REACHABLE ON THIS PAGE — landing.html pins data-theme="light"   */
/* and does not load theme-init.js (see the head). Kept because this   */
/* token block is shared with the app shell; delete it here only if    */
/* you are sure the marketing page will never offer a dark mode.       */
/* ------------------------------------------------------------------ */
[data-theme="dark"] {
  --bg: #15140f;
  --paper: #1e1c17;
  --glass: rgba(34, 32, 27, 0.64);
  --glass-strong: rgba(34, 32, 27, 0.86);
  --ink: #f1ede4;
  --muted: #b3ac9f;
  --faint: #948d7e;
  --line: rgba(214, 205, 190, 0.16);
  --line-strong: rgba(214, 205, 190, 0.26);
  --accent: #9bb08f;
  --accent-dark: #aebfa3;
  --shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
  --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
  --surface-rgb: 44, 41, 35;
  --surface-alt-rgb: 38, 35, 30;
  --shine-rgb: 150, 144, 132; /* @kind color */
  --tint-green-rgb: 44, 56, 47;
  --tint-amber-rgb: 60, 52, 35;
  --tint-rose-rgb: 66, 44, 41;
  --tint-butter-rgb: 62, 54, 32;
}

/* ============================================================
   Aurene Prep — Typography tokens
   Display: Georgia (system serif) — warm, editorial headings.
   UI / body: Inter — quiet, legible interface text.
   Mono: system mono for scores/timers where tabular feel helps.
   ============================================================ */

:root {
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, monospace;

  /* Display / heading scale (serif) */
  --text-display: clamp(2rem, 4vw, 4.15rem);  /* hero greeting */
  --text-h1: clamp(2rem, 3.2vw, 3.35rem);
  --text-h2: clamp(1.65rem, 2.5vw, 2.6rem);
  --text-h3: clamp(1.55rem, 2.3vw, 2.45rem);

  /* Body / UI scale (sans) */
  --text-body: 1rem;       /* 16px */
  --text-sm: 0.88rem;
  --text-xs: 0.8rem;
  --text-eyebrow: 0.72rem; /* uppercase labels */

  /* Weights — Inter ships heavy in this brand; UI weight runs high */
  --weight-regular: 500;
  --weight-medium: 700;
  --weight-bold: 850;
  --weight-black: 900;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.4;
  --leading-body: 1.6;

  /* Eyebrow tracking */
  --tracking-eyebrow: 0.09em;
}

/* ============================================================
   Aurene Prep — Effects: radius, shadow, blur, motion
   The brand reads as frosted "paper under glass": 8px radii,
   soft warm shadows, an inset top-shine highlight, and gentle
   150ms ease transitions with a -1px lift on hover.
   ============================================================ */

:root {
  /* Corner radius — almost everything is 8px; pills use 999px */
  --radius-sm: 6px;
  --radius: 8px;        /* default for cards, buttons, inputs */
  --radius-lg: 12px;
  --radius-xl: 22px;    /* modals, celebration cards */
  --radius-pill: 999px;

  /* Shadows (warm, brown-tinted) */
  --shadow: 0 22px 55px rgba(48, 42, 33, 0.11);       /* raised cards */
  --soft-shadow: 0 10px 30px rgba(48, 42, 33, 0.07);  /* subtle panels */

  /* Inset top-edge shine — the signature "lit glass" highlight */
  --shine: inset 0 1px 0 rgba(var(--shine-rgb), 0.78);       /* @kind shadow */
  --shine-strong: inset 0 1px 0 rgba(var(--shine-rgb), 0.86); /* @kind shadow */

  /* Frosted-glass blur for sidebars, panels, modals */
  --blur: blur(16px);    /* @kind other */
  --blur-lg: blur(18px); /* @kind other */

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);            /* @kind other */
  --ease-bounce: cubic-bezier(0.22, 1.2, 0.36, 1); /* @kind other */
  --duration: 150ms;                               /* @kind other */
}

/* ============================================================
   Aurene Prep — Spacing & layout tokens
   Roughly a 4px base. Card padding lands around 18–30px; grid
   gaps around 14–18px. Layout maxes content at ~1180px and the
   app sidebar at 268px.
   ============================================================ */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 34px;

  /* Common composite values */
  --gap-grid: 16px;       /* card grids */
  --gap-stack: 18px;      /* vertical section rhythm */
  --pad-card: 22px;       /* default card padding */
  --pad-card-lg: 30px;    /* hero/daily panels */

  /* Layout frame */
  --content-max: 1180px;
  --sidebar-w: 268px;
}




/* --- Aurene patterns subset (base + buttons + eyebrow) inlined from app.css --- */
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 74% 10%, rgba(var(--shine-rgb), 0.62), transparent 30%),
    radial-gradient(circle at 24% 0%, rgba(213, 192, 164, 0.18), transparent 34%),
    linear-gradient(180deg, #f8f6f0 0%, var(--bg) 62%, #eee7dc 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.58; }
.ghost-button, .primary-button, .mini-button, .choice-button {
  border: 1px solid transparent; border-radius: 8px;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.ghost-button, .primary-button, .mini-button { min-height: 42px; padding: 10px 15px; font-weight: 850; }
.ghost-button { color: var(--ink); background: rgba(var(--surface-rgb), 0.52); border-color: var(--line); box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.82); }
.primary-button { color: #fffdf8; background: #645452; border-color: rgba(39, 48, 42, 0.1); box-shadow: 0 14px 24px rgba(100, 84, 82, 0.2); }
.mini-button { min-height: 36px; padding: 8px 12px; color: var(--accent-dark); background: rgba(var(--tint-green-rgb), 0.72); border-color: rgba(87, 106, 91, 0.14); }
.primary-button:hover, .ghost-button:hover, .mini-button:hover, .choice-button:hover { transform: translateY(-1px); }
.eyebrow, .brand-kicker { margin: 0 0 6px; color: var(--accent-dark); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.meta-chip { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(var(--surface-rgb), 0.55); font-size: 0.82rem; font-weight: 850; }
.lp-aumark { display: block; flex: 0 0 auto; }



/* ============================================================
   Aurene Prep — Landing page styles
   Extends the app design system (tokens + patterns/app.css).
   Only landing-specific layout + the trap-annotation vocabulary
   live here; colors, shadows, radii all come from DS tokens.
   ============================================================ */

:root {
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --lp-max: 1180px;
  --lp-gutter: clamp(20px, 5vw, 64px);
}

/* The app stylesheet locks the page to a fixed app-shell (overflow:hidden,
   height:100%). A marketing page scrolls — release those. */
html {
  height: auto;
}
body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display type ------------------------------------------------------- */
.lp-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
}
[data-display="georgia"] {
  --font-display: Georgia, "Times New Roman", serif;
}
[data-display="georgia"] .lp-display {
  font-weight: 700;
  letter-spacing: 0;
}

/* ---- Layout primitives -------------------------------------------------- */
.lp {
  position: relative;
  width: 100%;
}
.lp-container {
  width: 100%;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding-inline: var(--lp-gutter);
}
.lp-section {
  padding-block: clamp(56px, 8vw, 116px);
}
.lp-section--tight {
  padding-block: clamp(40px, 5vw, 72px);
}
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.lp-section-head {
  max-width: 760px;
  margin: 0 auto clamp(34px, 4vw, 56px);
  text-align: center;
}
.lp-section-head .lp-display {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.3rem);
}
.lp-section-head p {
  margin: 18px auto 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* ---- Header ------------------------------------------------------------- */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--surface-rgb), 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 70px;
}
.lp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.lp-brand img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  box-shadow: var(--soft-shadow), inset 0 1px 0 rgba(var(--shine-rgb), 0.8);
}
.lp-brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.lp-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-nav a {
  padding: 9px 13px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease;
}
.lp-nav a:hover {
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.7);
}
.lp-header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.lp-nav-toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.lp-nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Buttons (extend DS .primary-button) -------------------------------- */
.lp-btn-lg {
  min-height: 52px;
  padding: 14px 26px;
  font-size: 1.02rem;
  border-radius: 10px;
}
.primary-button.lp-accent {
  background: var(--accent-dark);
  border-color: rgba(39, 48, 42, 0.12);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--accent) 26%, transparent);
}
.primary-button.lp-accent:hover {
  background: color-mix(in srgb, var(--accent-dark) 88%, #000);
}
.lp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-dark);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 150ms ease;
}
.lp-textlink:hover {
  border-bottom-color: currentColor;
}
.lp-microcopy {
  margin: 16px 0 0;
  color: var(--faint);
  font-size: 0.88rem;
  font-weight: 700;
}
/* Links inside microcopy (e.g. the waitlist invite) inherit the palette
   instead of falling back to browser-default blue. */
.lp-microcopy a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-dark) 45%, transparent);
  text-underline-offset: 3px;
}
.lp-microcopy a:hover {
  text-decoration-color: currentColor;
}
/* CTA anchors are buttons, not prose links — no underline on the label. */
a.primary-button {
  text-decoration: none;
}

/* ---- Hero --------------------------------------------------------------- */
.lp-hero {
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(56px, 7vw, 104px);
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.lp-hero-copy .lp-display {
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 4.5rem);
}
.lp-hero-copy .lp-display em {
  font-style: italic;
  color: var(--accent-dark);
}
.lp-hero-sub {
  margin: 26px 0 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 1.16rem;
  line-height: 1.6;
}
.lp-hero-sub strong {
  color: var(--ink);
  font-weight: 800;
}
.lp-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

/* ---- Annotated trap question (hero + worked example) -------------------- */
.lp-qcard {
  position: relative;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.86), rgba(var(--surface-alt-rgb), 0.58)),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.82), var(--shadow);
  backdrop-filter: blur(16px);
}
.lp-qcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.lp-qcard-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--english);
}
.lp-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}
.lp-qcard-meta {
  color: var(--faint);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lp-qstem {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
[data-display="georgia"] .lp-qstem {
  font-weight: 700;
  font-size: 1.22rem;
}
.lp-qstem .lp-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent);
  font-style: italic;
}
.lp-qhint {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
}

/* annotated choices (static, hero) */
.lp-choices {
  display: grid;
  gap: 10px;
}
.lp-choice {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--surface-rgb), 0.62);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.7);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.lp-choice-letter {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--accent-dark);
  background: rgba(var(--tint-green-rgb), 0.72);
  font-weight: 900;
  font-size: 0.92rem;
}
.lp-choice-text {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.lp-trap-tag {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lp-trap-tag--english {
  color: #7e4d43;
  background: rgba(var(--tint-rose-rgb), 0.82);
  border-color: rgba(181, 111, 112, 0.28);
}
.lp-trap-tag--science {
  color: #3c5b6b;
  background: rgba(85, 123, 141, 0.16);
  border-color: rgba(85, 123, 141, 0.32);
}
.lp-trap-tag--amber {
  color: #705721;
  background: rgba(var(--tint-butter-rgb), 0.82);
  border-color: rgba(176, 136, 52, 0.3);
}
.lp-trap-tag--correct {
  color: #344738;
  background: rgba(var(--tint-green-rgb), 0.92);
  border-color: rgba(63, 75, 66, 0.32);
}
.lp-choice.is-correct {
  border-color: rgba(104, 116, 101, 0.55);
  background: rgba(var(--tint-green-rgb), 0.62);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.8), 0 0 0 1px rgba(104, 116, 101, 0.18);
}
.lp-choice.is-correct .lp-choice-letter {
  color: #fffdf8;
  background: var(--accent);
}

/* ---- Worked-example breakdown (§2) -------------------------------------- */
.lp-worked {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.lp-breakdown {
  display: grid;
  gap: 10px;
}
.lp-break-item {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 13px;
  padding: 15px 16px 15px 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--surface-rgb), 0.56);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.7);
}
.lp-break-item .lp-choice-letter {
  background: rgba(var(--surface-alt-rgb), 0.9);
  color: #5a514c;
  border: 1px solid rgba(128, 119, 106, 0.16);
}
.lp-break-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
}
.lp-break-name {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7e4d43;
}
.lp-break-why {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.lp-break-why .lp-quote {
  color: var(--ink);
  font-weight: 700;
}
.lp-break-item.is-correct {
  background: linear-gradient(90deg, rgba(var(--tint-green-rgb), 0.7), rgba(var(--surface-rgb), 0.5));
  border-color: rgba(104, 116, 101, 0.4);
}
.lp-break-item.is-correct::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 10px 0 0 10px;
  background: var(--accent);
}
.lp-break-item.is-correct .lp-choice-letter {
  color: #fffdf8;
  background: var(--accent);
  border-color: transparent;
}
.lp-break-item.is-correct .lp-break-name {
  color: #3f5d47;
}

/* ---- How it works (§3) -------------------------------------------------- */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: step;
}
.lp-step {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.8), rgba(var(--surface-alt-rgb), 0.54)),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.78), var(--soft-shadow);
}
.lp-step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-dark);
  background: rgba(var(--tint-green-rgb), 0.7);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.8);
}
.lp-step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
}
[data-display="georgia"] .lp-step h3 {
  font-weight: 700;
}
.lp-step p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}
.lp-step p .lp-emph {
  color: var(--ink);
  font-weight: 700;
  font-style: italic;
}

/* ---- Interactive Science demo (§4) -------------------------------------- */
.lp-demo {
  max-width: 880px;
  margin: 0 auto;
}
.lp-demo .lp-qcard-tag {
  color: var(--science);
}
.lp-data-table {
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.95rem;
}
.lp-data-table caption {
  caption-side: top;
  text-align: left;
  padding: 3px;
  margin-bottom: 8px;
  color: var(--faint);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-data-table th,
.lp-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lp-data-table th:first-child,
.lp-data-table td:first-child {
  text-align: left;
}
.lp-data-table thead th {
  color: var(--accent-dark);
  background: rgba(85, 123, 141, 0.12);
  font-weight: 850;
}
.lp-data-table tbody tr:last-child td {
  border-bottom: 0;
}
.lp-data-table .lp-col-ceramic {
  background: rgba(85, 123, 141, 0.08);
  font-weight: 800;
}

.lp-demo-choices {
  display: grid;
  gap: 10px;
}
.lp-demo-choice {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--surface-rgb), 0.62);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.7);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.lp-demo-choice:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}
.lp-demo-choice:disabled {
  cursor: default;
}
.lp-demo-choice .lp-choice-letter {
  margin-top: 1px;
}
.lp-demo-choice-text {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.lp-demo-reveal {
  display: grid;
  gap: 4px;
  margin-top: 9px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 280ms ease, opacity 220ms ease, margin-top 220ms ease;
}
/* Generous enough for the longest reveal at 320px (measured 169px) while still
   animating. This cap must never be tight enough to clip an explanation — the
   explanation is the product. */
.lp-answered .lp-demo-choice .lp-demo-reveal {
  max-height: 420px;
  opacity: 1;
}
.lp-demo-reveal small {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7e4d43;
}
.lp-demo-reveal span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.lp-demo-choice.is-correct {
  border-color: rgba(104, 116, 101, 0.55);
  background: rgba(var(--tint-green-rgb), 0.66);
}
.lp-demo-choice.is-correct .lp-choice-letter {
  color: #fffdf8;
  background: var(--accent);
}
.lp-demo-choice.is-correct .lp-demo-reveal small {
  color: #3f5d47;
}
.lp-demo-choice.is-wrong {
  border-color: rgba(126, 77, 67, 0.42);
  background: rgba(var(--tint-rose-rgb), 0.5);
}
.lp-demo-choice.is-picked-wrong {
  border-color: rgba(126, 77, 67, 0.6);
  box-shadow: inset 0 0 0 1px rgba(126, 77, 67, 0.22);
}
.lp-demo-choice.is-dim {
  opacity: 0.62;
}
.lp-demo-prompt {
  margin: 18px 0 0;
  color: var(--faint);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}
.lp-demo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.lp-demo-foot p {
  margin: 0;
  max-width: 440px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ---- Honesty (§5) ------------------------------------------------------- */
.lp-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.6), rgba(var(--tint-amber-rgb), 0.3)),
    rgba(var(--surface-rgb), 0.4);
}
.lp-honesty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.lp-honesty-copy .lp-display {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 3rem);
}
.lp-honesty-copy p {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.65;
}
.lp-score-demo {
  display: grid;
  gap: 14px;
}
.lp-score-card {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(var(--surface-rgb), 0.7);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.78), var(--soft-shadow);
}
.lp-score-card.is-fake {
  opacity: 0.92;
}
.lp-score-card .lp-score-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-score-card.is-fake .lp-score-kind {
  color: #7e4d43;
}
.lp-score-card.is-real .lp-score-kind {
  color: #3f5d47;
}
.lp-score-strike {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: rgba(126, 77, 67, 0.6);
  text-decoration-thickness: 3px;
}
.lp-score-range {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lp-score-range strong,
.lp-score-range strong .__om-t {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.lp-score-range > span {
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
}
.lp-score-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---- Pacing report (§6) ------------------------------------------------- */
.lp-pacing {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.lp-pacing-copy .lp-display {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 3rem);
}
.lp-pacing-copy p {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.65;
}
.lp-preview-frame {
  position: relative;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.84), rgba(var(--surface-alt-rgb), 0.56)),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.8), var(--shadow);
}
.lp-preview-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px dashed rgba(85, 123, 141, 0.5);
  background: rgba(85, 123, 141, 0.1);
  color: #3c5b6b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lp-pace-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-bottom: 18px;
  padding-right: 104px;
}
.lp-pace-head strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
}
[data-display="georgia"] .lp-pace-head strong {
  font-weight: 700;
}
.lp-pace-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-pace-rows {
  display: grid;
  gap: 16px;
}
.lp-pace-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 64px;
  gap: 12px;
  align-items: center;
}
.lp-pace-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 800;
}
.lp-pace-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(128, 119, 106, 0.16);
  overflow: hidden;
}
.lp-pace-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a79c91, var(--accent-dark));
}
.lp-pace-fill.is-over {
  background: linear-gradient(90deg, #c98f86, #a85a4d);
}
.lp-pace-target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink);
  opacity: 0.5;
}
.lp-pace-val {
  font-size: 0.86rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lp-pace-val.is-over {
  color: #a85a4d;
}
.lp-pace-foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.lp-pace-foot strong {
  color: var(--ink);
}

/* ---- Founder note (§7) -------------------------------------------------- */
.lp-founder {
  max-width: 760px;
  margin: 0 auto;
}
.lp-founder-card {
  position: relative;
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.82), rgba(var(--surface-alt-rgb), 0.54)),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.8), var(--shadow);
}
.lp-founder-card .lp-display {
  margin: 0 0 22px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.lp-founder-body p {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.7;
}
.lp-founder-body p:last-child {
  margin-bottom: 0;
}
.lp-founder-body .lp-placeholder {
  color: var(--accent-dark);
  font-weight: 800;
  font-style: italic;
}
.lp-founder-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.lp-founder-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--tint-green-rgb), 0.6);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
}
.lp-founder-sign div {
  display: grid;
  gap: 3px;
}
.lp-founder-sign strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
}
.lp-founder-sign span {
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Pricing (§8) ------------------------------------------------------- */
.lp-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.lp-price-card {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.6);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.78), var(--soft-shadow);
}
.lp-price-card.is-feature {
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.86), rgba(var(--surface-alt-rgb), 0.58)),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.82), var(--shadow);
}
.lp-price-card.is-feature::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 14px 0 0 14px;
  background: var(--accent);
}
.lp-price-head .lp-price-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
}
[data-display="georgia"] .lp-price-card .lp-price-name {
  font-weight: 700;
}
.lp-price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}
.lp-price-amount .lp-price-tbd {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: -0.01em;
}
.lp-price-amount span {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}
.lp-price-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-price-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}
.lp-price-list li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(var(--tint-green-rgb), 0.85);
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 900;
}
.lp-price-list li.is-muted {
  color: var(--muted);
}
.lp-price-list li.is-muted::before {
  content: "·";
  background: transparent;
  color: var(--faint);
  font-size: 1.4rem;
}
.lp-price-note {
  margin: 0;
  color: var(--faint);
  font-size: 0.86rem;
  font-weight: 700;
}

/* ---- FAQ (§9) ----------------------------------------------------------- */
.lp-faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.lp-faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(var(--surface-rgb), 0.56);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.74);
  overflow: hidden;
}
.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
}
.lp-faq-item summary::-webkit-details-marker {
  display: none;
}
.lp-faq-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform 200ms ease;
}
.lp-faq-icon::before,
.lp-faq-icon::after {
  content: "";
  position: absolute;
  background: var(--accent-dark);
  border-radius: 2px;
}
.lp-faq-icon::before {
  top: 11px;
  left: 4px;
  right: 4px;
  height: 2px;
}
.lp-faq-icon::after {
  left: 11px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  transition: transform 200ms ease;
}
.lp-faq-item[open] .lp-faq-icon::after {
  transform: rotate(90deg);
}
.lp-faq-answer {
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.lp-faq-answer p {
  margin: 0;
}
.lp-faq-answer .lp-note {
  display: block;
  margin-top: 10px;
  color: var(--faint);
  font-size: 0.88rem;
  font-weight: 700;
}

/* ---- Final CTA (§10) ---------------------------------------------------- */
.lp-final {
  text-align: center;
}
.lp-final .lp-display {
  margin: 0 auto;
  max-width: 700px;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
}
.lp-final p {
  margin: 20px auto 0;
  max-width: 480px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.6;
}
.lp-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

/* ---- Footer ------------------------------------------------------------- */
.lp-footer {
  border-top: 1px solid var(--line);
  background: rgba(var(--surface-rgb), 0.5);
}
.lp-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 32px;
}
.lp-footer-links {
  display: flex;
  align-items: center;
  gap: 8px 22px;
  flex-wrap: wrap;
}
.lp-footer-links a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease;
}
.lp-footer-links a:hover {
  color: var(--ink);
}
.lp-footer-meta {
  color: var(--faint);
  font-size: 0.86rem;
  font-weight: 600;
}

/* ---- Entrance animation -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lp-reveal {
    opacity: 0;
    transform: translateY(16px);
  }
  .lp-reveal[data-reveal="in"] {
    opacity: 1;
    transform: none;
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .lp-hero-grid,
  .lp-worked,
  .lp-honesty,
  .lp-pacing {
    grid-template-columns: 1fr;
  }
  /* On a phone the hero is one column, so the annotated question card must come
     before the trust chips: the card is the proof, the chips are the footnote.
     Without this the card sits a full screen below a ~700px in-app-browser fold.
     display:contents hoists .lp-hero-copy's children into the flex column so the
     card can sit between the CTA and the chips with no DOM change. */
  .lp-hero-grid { display: flex; flex-direction: column; }
  .lp-hero-copy { display: contents; }
  .lp-hero-copy .lp-eyebrow { order: 1; }
  .lp-hero-copy .lp-display { order: 2; }
  .lp-hero-sub { order: 3; }
  .lp-hero-actions { order: 4; margin-top: 24px; }
  .lp-hero .lp-qcard { order: 5; margin-top: 26px; }
  .lp-hero .ap-chips { order: 6; margin: 22px 0 0; }
  .lp-hero .lp-microcopy { order: 7; }
  .lp-pacing-copy {
    order: -1;
  }
  .lp-steps {
    grid-template-columns: 1fr;
  }
  .lp-pricing {
    grid-template-columns: 1fr;
  }
  .lp-nav {
    display: none;
  }
  .lp-nav-toggle {
    display: inline-flex;
  }
  .lp-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    padding: 12px 20px 16px;
    background: rgba(var(--surface-rgb), 0.98);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--soft-shadow);
  }
  .lp-nav-toggle[aria-expanded="true"] .lp-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .lp-nav-toggle[aria-expanded="true"] .lp-nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .lp-nav-toggle[aria-expanded="true"] .lp-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}
@media (max-width: 560px) {
  .lp-header-cta .lp-btn-lg {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 0.92rem;
  }
  .lp-choice {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .lp-trap-tag {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
  .lp-hero-actions {
    gap: 14px;
  }
}


/* ============================================================================
   PART 2 — AUDIENCE PAGE COMPONENTS (.ap-*), used only by landing-teens.html
   and landing-parents.html.
   ============================================================================ */

/* landing.js sets these two custom properties AT RUNTIME on the main page
   (LP_CONFIG.accent -> --accent / --accent-dark), so the base tokens above
   still carry the old mauve defaults. The static ad pages run no such script —
   mirror the main page's computed values here so every button is brand sage. */
:root {
  --accent: #687465;
  --accent-dark: color-mix(in srgb, #687465 82%, #25221e);
}

/* ---- Hero trust chips ---------------------------------------------------- */
.ap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(var(--tint-green-rgb), 0.55);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ap-chip::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
}
.ap-chip.is-plain::before { content: none; }

/* ---- Proof / stat strip -------------------------------------------------- */
.ap-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}
.ap-proof-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.ap-proof-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ---- Subject picker ------------------------------------------------------ */
.ap-subjects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
a.ap-subject {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px 18px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--subject, var(--accent));
  box-shadow: var(--soft-shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
a.ap-subject:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(66, 58, 47, 0.14);
}
.ap-subject h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}
.ap-subject p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}
.ap-subject .ap-subject-go {
  font-weight: 700;
  font-size: 14px;
  color: var(--subject, var(--accent));
}

/* ---- Comparison cards (parents) ------------------------------------------ */
.ap-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
  align-items: stretch;
}
.ap-compare-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}
.ap-compare-card .ap-compare-kind {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ap-compare-card .ap-compare-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.ap-compare-card .ap-compare-price span {
  display: block;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}
.ap-compare-card ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.ap-compare-card ul li { padding-left: 20px; position: relative; }
.ap-compare-card ul li::before {
  content: "·";
  position: absolute;
  left: 6px;
  color: var(--muted);
  font-weight: 800;
}
.ap-compare-card.is-aurene {
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--milk);
  box-shadow: 0 18px 34px rgba(93, 103, 90, 0.16);
}
.ap-compare-card.is-aurene ul li::before { content: "✓"; color: var(--accent); left: 0; }

/* ---- Share row (parents) ------------------------------------------------- */
.ap-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ap-share .ghost-button { font-size: 15px; }
.ap-share-status {
  font-size: 13.5px;
  color: var(--accent);
  font-weight: 600;
  min-height: 1em;
}

/* ---- Test-date chips ----------------------------------------------------- */
.ap-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.ap-date {
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}
.ap-date strong { font-weight: 700; }
.ap-date span { color: var(--muted); }

/* ---- Cross-audience link banner ------------------------------------------ */
.ap-crosslink {
  margin-top: 26px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  background: rgba(var(--surface-alt-rgb), 0.6);
  font-size: 15px;
  color: var(--muted);
}
.ap-crosslink a {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Sticky mobile CTA bar ----------------------------------------------- */
.ap-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--surface-rgb), 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 220ms ease;
}
.ap-sticky-cta.is-visible { transform: translateY(0); }
.ap-sticky-cta .primary-button {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
}
.ap-sticky-cta .ap-sticky-note {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- Small helpers -------------------------------------------------------- */
.ap-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}
.ap-center { text-align: center; }
.ap-mt-0 { margin-top: 0; }
.ap-note-strong { color: var(--ink); font-weight: 600; }
.ap-checklist {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.ap-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.ap-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--tint-green-rgb), 0.9);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ap-checklist li strong { color: var(--ink); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
  .ap-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-compare { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Fold economics: a Facebook/Instagram in-app browser shows about 700px, and
     the primary CTA has to be inside it. Tighten the hero's vertical rhythm so
     headline + sub + button fit, instead of pushing the button off-screen. */
  .lp-hero { padding-top: 30px; }
  .lp-hero .lp-hero-sub { margin-top: 18px; }
  .lp-hero .lp-hero-actions { margin-top: 20px; }
  .ap-sticky-cta { display: block; }
  body.ap-has-sticky { padding-bottom: 86px; }
  /* The sticky bar and the header button are the same offer. Both on screen at
     once costs ~150px of a ~700px in-app-browser viewport, so the bar wins and
     the header keeps only the wordmark while it is up. */
  body.ap-bar-up .lp-header-cta { display: none; }
}
@media (max-width: 420px) {
  .ap-subjects { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ap-subject h3 { font-size: 18px; }
  .ap-proof { padding: 18px 16px; }
}

/* [hidden] must beat the flex display above — the demo foot starts hidden. */
.lp-demo-foot[hidden] { display: none; }

/* ---- Deadline table (teens page) ----------------------------------------- */
/* Reuses .lp-data-table for the grid; these add the live "days left" column,
   the passed-date state, and the urgency accent. landing-pages.js fills the
   .ap-dl-left cells from each row's data-deadline. With JS off the table is
   still complete and correct — the badge is the only thing missing. */
.ap-deadlines { margin-top: 24px; }
.ap-deadlines .lp-data-table { width: 100%; }
.ap-deadlines td { vertical-align: top; }
.ap-dl-note { color: var(--muted); font-size: 0.92em; white-space: nowrap; }
.ap-dl-left {
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  color: var(--muted);
}
.ap-deadlines tr.is-urgent .ap-dl-left { color: var(--english); }
.ap-deadlines tr.is-urgent td strong { color: var(--english); }
.ap-deadlines tr.is-past { opacity: 0.5; }
.ap-deadlines tr.is-past .ap-dl-left { font-weight: 600; }
/* Visually hidden but read aloud — the "time left" column has no visible
   header, since the badge text explains itself on screen. */
.ap-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 560px) {
  .ap-deadlines .lp-data-table { font-size: 13px; }
  .ap-dl-note { white-space: normal; }
  /* The date is the row's identity — never let it break across three lines. */
  .ap-deadlines td:first-child strong { white-space: nowrap; }
  .ap-deadlines th, .ap-deadlines td { padding-inline: 6px; }
  .ap-dl-left { font-size: 12.5px; white-space: normal; }
}

/* Horizontal scroll container for wide tables — the page body must never
   scroll sideways on a phone, so the table scrolls inside its own box. */
.tw-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 18px;
}
.tw-scroll .lp-data-table { min-width: 280px; }

/* Math stems must not use the display serif: Cormorant ships OLD-STYLE figures,
   which render "f(0)" as "f(o)" and drop 1/7 below the baseline. Anything
   containing an expression gets the UI sans with lining, tabular numerals. */
.lp-qstem.is-math {
  font-family: var(--font-sans), Inter, system-ui, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Two-up price cards (teens page). Reuses .ap-compare-card; only the column
   count differs from the three-way tutor/course/Aurene comparison. */
.ap-compare.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .ap-compare.is-two { grid-template-columns: 1fr; } }

/* Prices keep the display serif but switch to LINING figures: Cormorant's
   default old-style numerals drop 3/4/7/9 below the baseline, which looks
   editorial in prose and ambiguous on a price. */
.ap-compare-price { font-variant-numeric: lining-nums tabular-nums; }

/* .lp-header is sticky at 70px, so every #anchor jump must stop short of it or
   the target section's headline lands behind the header. */
html { scroll-padding-top: 78px; }

/* ---- Next-date strip (both ad pages) ------------------------------------- */
/* The only scarcity on these pages is ACT's own calendar, so it is stated,
   never animated. */
.ap-datebar { border-block: 1px solid var(--line); background: rgba(var(--tint-green-rgb), 0.42); }
.ap-datebar[hidden] { display: none; }
.ap-datebar-inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 18px; padding-block: 12px;
}
.ap-datebar p { margin: 0; }
.ap-datebar-copy { font-size: 15px; line-height: 1.5; color: var(--muted); }
.ap-datebar-copy strong { color: var(--ink); font-weight: 800; }
.ap-datebar-copy strong::after { content: " \00b7 "; color: var(--faint); font-weight: 500; }
.ap-datebar-scores { color: var(--faint); }
.ap-datebar-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-datebar .ap-dl-left { font-size: 14px; }
.ap-datebar.is-urgent .ap-dl-left { color: var(--english); }
.ap-datebar-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent-dark); font-weight: 700; font-size: 14px;
  text-decoration: none; border-bottom: 1.5px solid transparent;
}
.ap-datebar-link:hover { border-bottom-color: currentColor; }
@media (max-width: 560px) {
  .ap-datebar-inner { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ---- Date card ----------------------------------------------------------- */
/* The deliverable renders on the page and asks for nothing. With JS off the
   picker stays hidden and the table above it is already the complete answer. */
.ap-datecard {
  margin-top: 26px; padding: clamp(20px, 3.4vw, 30px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: rgba(var(--surface-rgb), 0.78); box-shadow: var(--soft-shadow);
}
.ap-dc-head { margin-bottom: 16px; }
.ap-dc-h {
  margin: 0 0 8px; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600;
  line-height: var(--leading-tight); color: var(--ink);
}
.ap-dc-lede { margin: 0; color: var(--muted); line-height: var(--leading-body); }
.ap-dc-picker { display: grid; gap: 8px; max-width: 420px; }
.ap-dc-picker[hidden] { display: none; }
.ap-dc-label {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: 0.04em; color: var(--accent-dark);
}
.ap-dc-select {
  width: 100%; min-height: 46px; padding: 10px 13px; color: var(--ink);
  background: rgba(var(--surface-rgb), 0.95);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shine);
}
.ap-dc-select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ap-dc-out {
  margin-top: 18px; padding: 18px; border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  background: rgba(var(--surface-rgb), 0.94);
}
.ap-dc-out[hidden] { display: none; }
.ap-dc-out.is-closed { border-left-color: var(--english); }
.ap-dc-title { margin: 0 0 12px; font-size: 1.22rem; font-weight: var(--weight-black); color: var(--ink); }
.ap-dc-rows { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 7px 18px; margin: 0; }
.ap-dc-rows dt {
  align-self: center; color: var(--muted); font-size: var(--text-xs);
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.ap-dc-rows dd { margin: 0; font-weight: var(--weight-bold); color: var(--ink); }
.ap-dc-note { margin-left: 9px; color: var(--muted); font-size: 0.86em; font-weight: 800; }
/* On a phone the value + its note don't fit on one line, and wrapping mid-phrase
   ("Sept 1 4 / days left") reads as a typo. Below 520px the note takes its own
   line under the value it qualifies. */
@media (max-width: 520px) {
  .ap-dc-rows { grid-template-columns: 1fr; gap: 2px 0; }
  .ap-dc-rows dt { margin-top: 10px; }
  .ap-dc-rows dt:first-of-type { margin-top: 0; }
  .ap-dc-note { display: block; margin-left: 0; margin-top: 1px; }
}
.ap-dc-note.is-urgent { color: var(--english); }
.ap-dc-alt { margin: 14px 0 0; color: var(--muted); line-height: var(--leading-body); }
.ap-dc-flag {
  margin-top: 14px; padding: 13px 15px; border-radius: var(--radius);
  background: rgba(var(--tint-butter-rgb), 0.5); color: var(--ink);
  font-size: 0.94rem; line-height: var(--leading-body);
}
.ap-dc-flag[hidden] { display: none; }

/* ---- Price-card CTAs ----------------------------------------------------- */
.ap-compare-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; margin-top: auto;
  padding-top: 12px; padding-bottom: 12px;
  text-align: center; text-decoration: none;
}

/* ---- Tap targets --------------------------------------------------------- */
/* Phone-first audience in an in-app browser: nothing actionable below 44px. */
.lp-hero-actions .lp-textlink { min-height: 44px; }
.ap-share .primary-button,
.ap-share .ghost-button,
.lp-demo-foot .ghost-button,
.lp-demo-foot .primary-button { min-height: 46px; }
@media (max-width: 560px) {
  .lp-hero-sub { font-size: 1.05rem; }
  .ap-share { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .ap-share .ap-share-status { text-align: center; }
  .lp-footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .lp-microcopy a { display: inline-block; padding-block: 6px; }
}
@media (max-width: 420px) {
  .lp-qcard { padding: 18px 16px 20px; }
  .lp-demo-choice { padding: 12px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
}

/* ═══ Trap quiz (/teens #start) ═══════════════════════════════════════════════
   These are the APP's components, rebuilt here. The quiz is a preview of the
   product, so a student who takes it and then opens the real check-up should be
   looking at the same thing twice — not a marketing approximation of it.

   Every rule below is the corresponding rule from styles.css (the app's
   stylesheet), and the landing page already defines the same design tokens with
   the same values, so they resolve identically:

     .ap-quiz-panel     <- .question-panel      (8px radius, 28px, glass + blur)
     .ap-quiz-meta      <- .session-meta        (chip row above the question)
     .ap-quiz-chip      <- .meta-chip           (pill, 0.82rem, weight 850)
     .ap-quiz-passage   <- .passage             (4px accent rule down the left)
     .ap-quiz-underline <- .underlined-portion
     .ap-quiz-stem      <- .question-title      (Georgia 1.42rem)
     .ap-quiz-choices   <- .choices
     .ap-quiz-choice    <- .choice-button       (34px/1fr, 58px min, 13px)
     .ap-quiz-letter    <- .choice-letter       (32px rounded square)
     .is-correct/.is-picked <- .correct/.incorrect

   If the app's question screen is restyled, this block is what goes stale.
   The per-choice reveal has no app equivalent — the app puts its explanation in
   one panel after the answer — so it stays the landing page's own idea, dressed
   in the same tints.
   ────────────────────────────────────────────────────────────────────────── */
.ap-quiz {
  /* A question has to read left-aligned and full width, whatever section it is
     dropped into. This was load-bearing when the quiz lived inside #start
     (.lp-final sets text-align:center and clamps every <p> to 480px, which
     centred the stems, passages and choices); it is kept as a guard now that the
     quiz has its own section, along with the .ap-quiz prefixes below that raise
     these rules above a section-level `.lp-x p` rule. */
  text-align: left;
}
.ap-quiz p { max-width: none; }

.ap-quiz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
/* With JS off every card stays on the page: the section must be readable with
   no script at all. .is-live is added by landing-pages.js. */
.ap-quiz.is-live .ap-quiz-list { gap: 0; }
.ap-quiz.is-live .ap-quiz-q { display: none; }
.ap-quiz.is-live .ap-quiz-q.is-current { display: block; }
.ap-quiz.is-unlocked .ap-quiz-list { gap: 22px; }
.ap-quiz.is-unlocked .ap-quiz-q { display: block; }

.ap-quiz-panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(var(--surface-rgb), 0.78), rgba(var(--surface-alt-rgb), 0.56)),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.78), var(--shadow);
  backdrop-filter: blur(16px);
}
.ap-quiz-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.ap-quiz-chip {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(var(--surface-rgb), 0.55);
  font-size: 0.82rem;
  font-weight: 850;
}
.ap-quiz .ap-quiz-passage {
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(104, 116, 101, 0.18);
  border-left: 4px solid rgba(104, 116, 101, 0.72);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.58);
  color: #2d2a24;
  line-height: 1.72;
}
.ap-quiz .ap-quiz-passage p { margin: 0; font-size: 1rem; }
.ap-quiz-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent-dark);
}
.ap-quiz .ap-quiz-stem {
  margin: 0 0 18px;
  max-width: 760px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.42rem;
  line-height: 1.42;
  color: var(--ink);
}
.ap-quiz-choices { display: grid; gap: 10px; }
.ap-quiz-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(var(--surface-rgb), 0.64);
  box-shadow: inset 0 1px 0 rgba(var(--shine-rgb), 0.72);
  text-align: left;
  line-height: 1.4;
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.ap-quiz-choice:hover:not(:disabled) { border-color: var(--line-strong); }
.ap-quiz-choice:disabled { cursor: default; }
.ap-quiz-letter {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--accent-dark);
  background: rgba(var(--tint-green-rgb), 0.74);
  font-weight: 900;
}
.ap-quiz-choice-text { display: block; font-size: 1rem; font-weight: 500; line-height: 1.4; }
.ap-quiz-choice.is-correct {
  border-color: rgba(63, 75, 66, 0.42);
  background: rgba(var(--tint-green-rgb), 0.86);
}
.ap-quiz-choice.is-picked {
  border-color: rgba(126, 77, 67, 0.45);
  background: rgba(var(--tint-rose-rgb), 0.82);
}
.ap-quiz-choice.is-dim { opacity: 0.62; }

.ap-quiz-reveal {
  display: grid;
  gap: 4px;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 280ms ease, opacity 220ms ease, margin-top 220ms ease;
}
.ap-quiz-q.is-open .ap-quiz-reveal { margin-top: 10px; max-height: 420px; opacity: 1; }
.ap-quiz-reveal small {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7e4d43;
}
.ap-quiz-choice.is-correct .ap-quiz-reveal small { color: #3f5d47; }
.ap-quiz-reveal span { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.ap-quiz .ap-quiz-ids {
  margin: 14px 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--faint);
}

/* Results — the app's .diagnostic-report-hero + .level-card. */
.ap-quiz-result { margin-top: 24px; }
.ap-quiz-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 20px;
}
.ap-quiz .ap-quiz-verdict {
  margin: 6px 0 8px;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  color: var(--ink);
}
.ap-quiz .ap-quiz-hero-note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ap-quiz-levelcard {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.56);
}
.ap-quiz-levelcard span,
.ap-quiz-levelcard small { color: var(--muted); font-size: 0.86rem; }
.ap-quiz-levelcard strong {
  font-size: 2.1rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
  color: var(--accent-dark);
}
.ap-quiz-recap { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.ap-quiz-recap li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.ap-quiz-recap b { color: var(--ink); font-weight: 750; }
.ap-quiz-mark { font-weight: 900; }
.ap-quiz-recap li.is-hit .ap-quiz-mark { color: #7e4d43; }
.ap-quiz-recap li.is-miss .ap-quiz-mark { color: var(--accent); }

/* The gate wears the app's panel too, so the page doesn't change materials
   halfway down the section. */
.ap-quiz-gate {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.56);
}
.ap-quiz .ap-quiz-gate-lede { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.ap-quiz-form { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-quiz-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--surface-rgb), 0.9);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* under 16px makes iOS Safari zoom the page on focus */
}
.ap-quiz-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ap-quiz-submit { flex: 0 0 auto; }
.ap-quiz .ap-quiz-status { margin: 12px 0 0; font-size: 14px; font-weight: 650; min-height: 1.2em; }
.ap-quiz-status.is-error { color: #7e4d43; }
.ap-quiz-status.is-ok { color: #3f5d47; }
/* Off-screen rather than display:none, which some bots skip. */
.ap-quiz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ap-quiz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* A class rule that sets `display` outranks the UA's `[hidden] { display: none }`,
   so anything the script toggles has to say so explicitly. */
.ap-quiz-recap[hidden],
.ap-quiz-result[hidden],
.ap-quiz-gate[hidden],
.ap-quiz-unlocked[hidden] { display: none; }

@media (max-width: 720px) {
  .ap-quiz-hero { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* .question-panel drops to 18px on the app's own phone breakpoint. */
  .ap-quiz-panel { padding: 18px; }
  .ap-quiz-gate { padding: 18px; }
  .ap-quiz-form { flex-direction: column; }
  .ap-quiz-submit { width: 100%; }
  .ap-quiz-passage { padding: 15px 16px; }
  .ap-quiz .ap-quiz-stem { font-size: 1.22rem; }
}

/* ---- Parents-page refinements -------------------------------------------
   New classes only, appended last so they win on equal specificity against
   the base rules above. Nothing here is used by landing-teens.html. */

/* #trust: six items is the longest ✓ list on the page and the third in a row.
   Balanced columns turn it back into something a parent scans instead of
   reads. Multi-column (not grid) so uneven items pack without ragged rows. */
.ap-checklist-cols {
  max-width: none;
  display: block;
  columns: 2;
  column-gap: 44px;
}
.ap-checklist-cols li {
  break-inside: avoid;
  margin-bottom: 14px;
}
@media (max-width: 860px) {
  .ap-checklist-cols { columns: 1; }
}

/* A source note should be legible, not loud — this is the sourcing line under
   the scholarship table, deliberately quieter than .lp-microcopy's default. */
.lp-microcopy.is-fine {
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.6;
}

/* #share: the status message used to sit inside the button row, so the buttons
   jumped sideways the moment "Link copied" appeared. Stacked and centred, with
   the link itself shown in a chip that the Copy button is attached to. */
.ap-share-stack {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.ap-share-link {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(var(--surface-rgb), 0.7);
  max-width: 100%;
}
.ap-share-url {
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-share-link .ghost-button {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding-inline: 16px;
}
/* Reserve the line so a copied/failed message never reflows the block. */
.ap-share-stack .ap-share-status { min-height: 1.3em; }

/* Breathing room under the section headings on /parents only.
   .lp-section-head p sets a flat 18px top margin on EVERY paragraph in the
   head, which is right for paragraph-to-paragraph rhythm but far too tight
   under a ~53px display heading. The adjacent-sibling selector lifts only the
   first paragraph after the h2, so the gap between the two ledes in #problem
   stays at 18px. Scoped to .lp-page-parents because landing-pages.css is also
   loaded by landing-teens.html and its three variants. */
.lp-page-parents .lp-section-head .lp-display + p {
  margin-top: clamp(22px, 2.2vw, 32px);
}


/* ============================================================================
   PART 3 — OFFER-VARIANT HEROES (.ov-*), added 2026-08-30.

   Used ONLY by the offer forks of the two ad pages:
     landing-teens-40hours.html        → /40hours
     landing-teens-bydesign.html       → /bydesign
     landing-teens-top3.html           → /top3
     landing-parents-scholarship.html  → /scholarship
     landing-parents-tutor.html        → /tutor
     landing-parents-scorereport.html  → /scorereport

   Every selector below is namespaced `.ov-*` (or requires an `.ov-hero`
   ancestor) and appears in no other page, so this whole block is inert for
   landing.html, landing-teens.html and landing-parents.html. That namespace is
   the guarantee those pages are unaffected — do not rename these into `.lp-*`
   or `.ap-*`, and do not edit any rule above this line to serve a variant.
   ============================================================================ */

/* ---- The offer headline ----------------------------------------------------
   The three offers are fixed copy of very different lengths (74 / 84 / 111
   characters), so the display size steps down per page rather than using one
   size that overflows the longest and under-fills the shortest. */
.ov-hero .lp-hero-copy .lp-display {
  font-size: clamp(2.4rem, 4.5vw, 3.7rem);
  line-height: 1.04;
}
.ov-hero--long .lp-hero-copy .lp-display {
  font-size: clamp(2.1rem, 3.9vw, 3.2rem);
}

/* The remainder of an offer that is too long to live inside the display type.
   Reads as a second, smaller headline rather than as body copy — the whole
   offer still lands as one thought. */
.ov-kicker {
  margin: 20px 0 0;
  max-width: 540px;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.ov-kicker em,
.ov-hero .lp-hero-copy .lp-display em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--accent-dark);
}
/* Cormorant reads optically smaller than bold Inter at the same px, and in the
   kicker the two sit on one line — so the serif needs the extra size to hold
   equal weight. (Inside the h1 it does not: there the base font is already
   Cormorant.) */
/* "Free" carries the offer, so it is the emphasis in this line and the words
   around it stay at regular weight. Needs the 1,700 italic face in the pages'
   Google Fonts request — the italic axis otherwise stops at 600 and the browser
   fakes the bold by smearing the 600, which looks muddy at this size. */
.ov-kicker em {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
}
.ov-kicker + .lp-hero-sub {
  margin-top: 13px;
}
.ov-hero .lp-hero-sub {
  max-width: 520px;
  margin-top: 20px;
}

/* The trust chips move BELOW the call to action on these pages (they precede it
   on landing-teens.html). Two reasons: it lifts the button ~110px, back above a
   989px-tall desktop fold that the added supporting points had pushed it under,
   and "no card / no auto-renew" reads better as the answer to the objection the
   button just raised than as a preamble to it. Flipping the margin keeps the
   rhythm now that it follows rather than leads. */
.ov-hero .ap-chips {
  margin: 20px 0 0;
}
.ov-hero .ap-chip {
  padding: 6px 11px;
  font-size: 12.6px;
}

/* ---- The three supporting points ------------------------------------------
   A bold lead-in on its own line makes the list scannable at ad-traffic
   attention spans; the dash marker stays quieter than a checkmark, which on
   these pages would read as a feature list rather than an argument. */
.ov-points {
  margin: 21px 0 0;
  padding: 0;
  max-width: 520px;
  list-style: none;
  display: grid;
  gap: 13px;
}
.ov-points li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.5;
}
.ov-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.8;
}
.ov-points strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 1.03rem;
  font-weight: 800;
  letter-spacing: -0.008em;
}
.ov-points em {
  font-style: italic;
  color: var(--accent-dark);
  font-weight: 700;
}

/* The line that closes the offer: time, price, and what is not being asked for.
   Accent-coloured and heavier than the points above it so it reads as terms
   rather than as a fourth argument. */
.ov-terms {
  margin: 17px 0 0;
  color: var(--accent-dark);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}

/* ---- Right-column panel ----------------------------------------------------
   Sits in the slot .lp-qcard occupies on the other ad pages, and reuses
   .lp-preview-frame / .lp-preview-badge from the pacing section so a mocked
   screen is labelled the same way everywhere on the site. */
.ov-panel-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding-right: 96px; /* clear the absolutely-positioned Sample badge */
}
.ov-panel-head strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.12;
}
.ov-panel-head span,
.ov-eyebrow {
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ov-eyebrow {
  margin: 0 0 9px;
}
/* Only the eyebrow that sits level with the absolutely-positioned Sample badge
   needs to reserve room for it; a second eyebrow further down the panel gets
   the full width. */
.ov-eyebrow--clear {
  padding-right: 96px;
}
.ov-panel-foot {
  margin: 20px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.ov-panel-foot strong {
  color: var(--ink);
  font-weight: 800;
}

/* Ranked "biggest score leaks" rows — the shape of the real report screen:
   category, topic, miss count, and a bar for relative size. */
.ov-rank {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 15px;
  counter-reset: ov-rank;
}
.ov-rank li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.ov-rank li::before {
  counter-increment: ov-rank;
  content: counter(ov-rank);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--tint-rose-rgb), 0.9);
  color: #8a4b40;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ov-rank-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.ov-rank-name span {
  flex: none;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ov-rank-cat {
  display: block;
  margin: 2px 0 8px;
  color: var(--faint);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ov-rank-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(128, 119, 106, 0.16);
  overflow: hidden;
}
.ov-rank-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c98f86, #a85a4d);
}

/* The /40hours panel only: a before/after split inside one frame. */
.ov-quote {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.1vw, 1.75rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.2;
}
.ov-quote-note {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.ov-split-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--accent-dark);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ov-split-rule::before,
.ov-split-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-strong);
}

/* The /scholarship panel only: the composite the student has now, and the one
   the next award band asks for. Two numbers and an arrow — the whole argument
   of the page is the distance between them, so nothing else competes. */
.ov-gap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.ov-gap-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
}
/* The target band is the thing being sold; it gets the accent tint and border
   so the eye lands there rather than on the score already in hand. */
.ov-gap-cell--target {
  border-color: rgba(var(--tint-rose-rgb), 0.95);
  background: rgba(var(--tint-rose-rgb), 0.42);
}
.ov-gap-num {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ov-gap-cell--target .ov-gap-num {
  color: var(--accent-dark);
}
.ov-gap-cap {
  display: block;
  margin-top: 7px;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ov-gap-arrow {
  flex: none;
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.75;
}

/* The /scorereport panel only: the bare composite a score report hands back.
   Sized like a headline because on that page the number IS the objection. */
.ov-bignum {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.ov-bignum-fig {
  flex: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 5vw, 3.9rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.ov-bignum-cap {
  color: var(--faint);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.75;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Mobile ----------------------------------------------------------------
   The ≤960px block above turns .lp-hero-copy into display:contents and hand-
   orders every hero child. Anything NEW defaults to order:0 and would jump
   ahead of the eyebrow, so each added element is given an explicit order and
   the inherited ones are pushed down to make room. Selectors are one step more
   specific than the rules they override so this does not depend on source
   order. Reading order: offer → why → the three points → ask → proof →
   chips → fine print. The sticky CTA bar keeps the ask reachable throughout. */
@media (max-width: 960px) {
  /* .lp-hero-grid becomes the stacking flex column here, so its 36px gap lands
     between EVERY hero element — and these heroes have two more elements than
     the page they were forked from, which spent ~72px on air alone. Each element
     already carries its own top margin, so a smaller row gap sits underneath
     those and yields a steady ~36-44px rhythm instead of ~56px. Row gap only:
     the column gap is what separates copy from panel on desktop. */
  .ov-hero .lp-hero-grid { row-gap: 18px; }
  /* .lp-hero-grid keeps align-items:center from the desktop two-column rule, and
     in this stacking flex column that centres any child short enough to shrink to
     fit. Long paragraphs fill the width and hide it; a short line like "Free. No
     card." floats to the middle while everything around it is flush left. Stretch
     the copy children so they all share one left edge. The panel and question card
     are deliberately left out — they size themselves. */
  .ov-hero .lp-display,
  .ov-hero .lp-hero-sub,
  .ov-hero .lp-eyebrow,
  .ov-kicker,
  .ov-points,
  .ov-terms,
  .ov-hero .lp-hero-actions,
  .ov-hero .ap-chips,
  .ov-hero .lp-microcopy { align-self: stretch; }
  .ov-kicker { order: 3; }
  .ov-hero .lp-hero-copy .lp-hero-sub { order: 4; }
  .ov-points { order: 5; }
  .ov-terms { order: 6; }
  .ov-hero .lp-hero-copy .lp-hero-actions { order: 7; }
  .ov-hero.lp-hero .lp-qcard,
  .ov-panel { order: 8; margin-top: 26px; }
  .ov-hero.lp-hero .ap-chips { order: 9; }
  .ov-hero.lp-hero .lp-microcopy { order: 10; }
}
@media (max-width: 560px) {
  .ov-panel { padding: 20px 18px; }
  .ov-eyebrow--clear,
  .ov-panel-head { padding-right: 82px; }
  .ov-rank-name { flex-wrap: wrap; gap: 2px 10px; }
}
