/* ==========================================================================
   paedago · styles
   Mobile first: base rules are the phone layout, min-width queries add room.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  --charcoal: #2B2826;
  --cream: #F5F1E8;
  --gold: #FFC000;
  --gold-hover: #F0B400;

  --bg: #F5F1E8;
  --bg-raised: #FBF8F2;
  --text: #2B2826;
  --text-soft: #5F5850;
  --text-faint: #8F877C;
  --line: rgba(43, 40, 38, 0.14);
  --brass: #9A7B2D;
  --gold-ink: #8A6400;
  --grade-red: #B3362B;
  --nav-line: rgba(43, 40, 38, 0.1);
  --shadow: 0 18px 40px -22px rgba(43, 40, 38, 0.45);
  --grain-opacity: 0.05;
  --ink: #2D4A7A;            /* fountain-pen blue: small type, the student's work */
  --pen: #B3362B;            /* red pen: the teacher's marks */
  --glow: color-mix(in srgb, var(--gold) 13%, transparent);
  --tint-teach: #F3E5CF;     /* warm sand */
  --tint-how: #EEE8DD;       /* linen */
  --tint-believe: #EFE5D1;   /* parchment */
  --tint-home: #E3E8EC;      /* blue-grey */
  --tint-begin: #F4EBCD;     /* pale gold */
  /* The page's own background, kept when a section (Results) redefines --bg. */
  --page: var(--bg);

  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #221F1D;
  --bg-raised: #2E2A27;
  --text: #F2ECDF;
  --text-soft: #B8AE9F;
  --text-faint: #8A8174;
  --line: rgba(242, 236, 223, 0.13);
  --brass: #C9A95E;
  --gold-ink: #FFCB4D;
  --grade-red: #E06A5C;
  --nav-line: rgba(242, 236, 223, 0.09);
  --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --grain-opacity: 0.07;
  --ink: #9DB4E0;
  --pen: #E06A5C;
  --glow: color-mix(in srgb, var(--gold) 8%, transparent);
  --tint-teach: #2C251C;
  --tint-how: #25221F;
  --tint-believe: #2A241C;
  --tint-home: #1D2228;
  --tint-begin: #2E261C;
  color-scheme: dark;
}

/* No-JS fallback: follow the system when the head script never ran. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #221F1D;
    --bg-raised: #2E2A27;
    --text: #F2ECDF;
    --text-soft: #B8AE9F;
    --text-faint: #8A8174;
    --line: rgba(242, 236, 223, 0.13);
    --brass: #C9A95E;
    --gold-ink: #FFCB4D;
    --grade-red: #E06A5C;
    --nav-line: rgba(242, 236, 223, 0.09);
    --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
    --grain-opacity: 0.07;
    --ink: #9DB4E0;
    --pen: #E06A5C;
    --glow: color-mix(in srgb, var(--gold) 8%, transparent);
    --tint-teach: #2C251C;
    --tint-how: #25221F;
    --tint-believe: #2A241C;
    --tint-home: #1D2228;
    --tint-begin: #2E261C;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 0.99rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

/* Paper grain: a fixed, static texture so surfaces feel made, not rendered. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* :where() keeps this reset at zero specificity, so layout classes such as
   .wrap on a list still apply their margins and padding. */
:where(ul, ol)[role="list"] { list-style: none; margin: 0; padding: 0; }

::selection { background: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--charcoal); }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */

.display {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 360;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--ink);
}

.lede {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.5rem);
  line-height: 1.45;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* The answer mark: a soft gold highlighter band behind the lower half of
   a finished answer, swept left to right. --ans (0 to 1) is set on an
   ancestor and animated by GSAP. */
.ans {
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}
.ans::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.08em;
  right: -0.08em;
  bottom: 0.04em;
  height: 0.46em;
  border-radius: 0.12em 0.2em 0.14em 0.22em;
  background: color-mix(in srgb, var(--gold) 42%, transparent);
  transform-origin: left center;
  transform: scaleX(var(--ans, 1)) skewX(-8deg);
  pointer-events: none;
}
:root[data-theme="dark"] .ans::after { background: color-mix(in srgb, var(--gold) 26%, transparent); }

/* Elements that play an intro start hidden only when JS is running,
   and only until GSAP takes over. */
.js:not(.reduced) .hero [data-intro] { visibility: hidden; }
/* Until the animations are mounted (.ready, after the fonts load) the hero
   lines wait dimmed and the nav and phone number wait hidden, as the
   animations will start them, so nothing shows for a moment and then
   jumps back. */
.js:not(.reduced):not(.ready) :is(.hb__lead, .hb__text) { opacity: 0.13; }
.js:not(.reduced):not(.ready) :is(.nav, .call__btn, .call__number) { visibility: hidden; }

/* ==========================================================================
   SECTION: nav
   ========================================================================== */

/* A floating island, centered with auto margins rather than a translate:
   GSAP animates the nav's transform and would freeze a translate at one
   window size. */
.nav {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 100;
  width: max-content;
  max-width: calc(100vw - 24px);
  margin-inline: auto;
}

/* The nav floats as clear glass: the page shows through, softened by heavy
   blur, with a hairline edge. The open menu panel matches. */
.nav__pill, .nav__panel {
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--bg) 30%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgba(43, 40, 38, 0.25);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* On charcoal a clear pill vanishes: a faint light tint and edge keep it
   floating. The same applies in light mode while the nav passes over the
   dark Results band (script.js adds .is-on-dark), where it also takes the
   dark theme's text colors. */
.nav.is-on-dark {
  --bg: #1C1A18;
  --text: #F2ECDF;
  --text-soft: #B8AE9F;
  --text-faint: #8A8174;
  --line: rgba(242, 236, 223, 0.13);
  --bg-raised: #2E2A27;
  color: var(--text);
}
:root[data-theme="dark"] :is(.nav__pill, .nav__panel),
.nav.is-on-dark :is(.nav__pill, .nav__panel) {
  border-color: color-mix(in srgb, var(--text) 17%, transparent);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.7);
}
/* Through the fade into or out of the dark band: nearly opaque, so the
   words stay readable over the mid grey. */
:root .nav:is(.is-fading-in, .is-fading-out) :is(.nav__pill, .nav__panel),
:root .call:is(.is-fading-in, .is-fading-out) .call__number {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
}
/* The open menu holds words to read, so it is frosted almost solid: the
   page behind only tints it. */
:root .nav .nav__panel { background: color-mix(in srgb, var(--bg) 88%, transparent); }

.nav__pill {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 56px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
}

.wordmark {
  margin-right: 12px;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  line-height: 1;
  padding: 10px 0;
}

.nav__links { display: none; }

.nav__tools { display: flex; align-items: center; gap: 2px; }

.tool {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background-color 0.3s var(--ease);
}
.tool i { font-size: 1.3rem; grid-area: 1 / 1; }
.tool:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

/* Sun shows in dark mode (to switch to light), moon in light mode. */
[data-theme-toggle] .ph-sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .ph-sun { display: inline-block; }
:root[data-theme="dark"] [data-theme-toggle] .ph-moon { display: none; }

.nav__menu .ph-x { display: none; }
.nav__menu[aria-expanded="true"] .ph-x { display: inline-block; }
.nav__menu[aria-expanded="true"] .ph-list { display: none; }

.nav__begin {
  display: none;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav__begin:hover { background: var(--gold-hover); }
.nav__begin:active { transform: scale(0.97); }

/* The menu panel: positioned inside the header, never `fixed` (the pill's
   backdrop-filter would become its containing block). On phones it spans
   the screen even though the island is narrow. */
.nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  width: calc(100vw - 24px);
  margin-left: calc(12px - 50vw);
  padding: 12px 12px 14px;
  border-radius: 28px;
}

.panel__links a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  font-size: 1.6rem;
  font-weight: 380;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-decoration: none;
}
.panel__links a:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.panel__num {
  width: 2.2em;
  flex: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--brass);
}

.panel__tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.panel__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
}
.panel__tool i { font-size: 1.15rem; }

@media (min-width: 720px) {
  .nav__pill { gap: 6px; padding-left: 20px; }
  .nav__panel { left: auto; right: 0; width: 360px; margin-left: 0; }
  .nav__begin { display: inline-flex; }
}

@media (min-width: 1080px) {
  .nav__pill { gap: 10px; padding-left: 26px; }
  .wordmark { margin-right: 22px; }
  .nav__links { display: flex; gap: 2px; margin-right: 8px; }
  .nav__links a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 450;
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
  }
  .nav__links a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
  .nav__links a.is-current { color: var(--text); }
  .nav__menu { display: none; }
}

/* ==========================================================================
   SECTION: call
   Phones (a touch screen that is narrow, or short: a phone turned sideways)
   get a small gold bubble that opens a sheet with call, text and WhatsApp.
   Computers and tablets cannot place a call, so there the number simply
   rests in the corner, in the nav's clear glass.
   ========================================================================== */

.call {
  position: fixed;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.call.is-docked { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (min-width: 720px) { .call { right: 24px; bottom: 24px; } }

/* Over the dark Results band it takes the dark theme's colors, so the
   number and the sheet stay readable in light mode. */
.call.is-on-dark {
  --bg: #1C1A18;
  --bg-raised: #2E2A27;
  --text: #F2ECDF;
  --text-soft: #B8AE9F;
  --line: rgba(242, 236, 223, 0.13);
  --brass: #C9A95E;
  color: var(--text);
}

/* ---------- Computers and tablets: the number ---------- */

/* Not a button, only text to read or copy. While the page scrolls it
   shrinks to its icon; when scrolling stops the number opens again. */
.call__number {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 30%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgba(43, 40, 38, 0.25);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), padding 0.4s var(--ease), gap 0.4s var(--ease);
}
.call__number i { font-size: 1.05rem; color: var(--brass); }
.call__number span { display: inline-block; max-width: 130px; overflow: hidden; white-space: nowrap; transition: max-width 0.4s var(--ease), opacity 0.25s var(--ease); }
.call.is-compact .call__number { gap: 0; padding-inline: 11px; }
.call.is-compact .call__number span { max-width: 0; opacity: 0; }
:root[data-theme="dark"] .call__number,
.call.is-on-dark .call__number {
  border-color: color-mix(in srgb, var(--text) 17%, transparent);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.7);
}

/* ---------- Phones: the bubble and its sheet ---------- */

.call__btn, .call__menu { display: none; }
@media (pointer: coarse) and (max-width: 719px), (pointer: coarse) and (max-height: 499px) {
  .call__number { display: none; }
  .call__btn { display: inline-flex; }
  .call__menu { display: grid; }
}

/* A small round bubble, so it never sits on the text. The number is in
   its label for screen readers; while the sheet is open the phone icon
   becomes a close mark. */
.call__btn {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: 0 14px 30px -14px rgba(43, 40, 38, 0.55);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), scale 0.3s var(--ease);
}
.call__btn i { font-size: 1.05rem; }
.call__btn:hover { background: var(--gold-hover); }
.call__btn:active { scale: 0.97; }
.call__icon--x, .call.is-open .call__icon:not(.call__icon--x) { display: none; }
.call.is-open .call__icon--x { display: block; }

/* The sheet rises from the bottom of the screen and dims the page behind
   it: the number set large, then call (gold), text and WhatsApp. */
.call__menu {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 2;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--bg-raised);
  box-shadow: 0 0 0 100vmax rgba(20, 18, 16, 0.42), 0 -10px 40px -20px rgba(0, 0, 0, 0.6);
}
/* An invisible layer over the rest of the screen: tapping it closes the sheet. */
.call__menu::before { content: ""; position: absolute; inset: -200vh -100vw; z-index: -1; }
.call__head { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; padding: 0 4px 6px 6px; }
.call__head-num { margin: 0; font-family: var(--font-serif); font-size: 1.9rem; font-weight: 400; line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
.call__close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font-size: 1.1rem; cursor: pointer; }
.call__menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 18px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}
.call__menu a i { font-size: 1.35rem; color: var(--brass); }
.call__menu a:first-of-type { border-color: transparent; background: var(--gold); color: var(--charcoal); }
.call__menu a:first-of-type i { color: var(--charcoal); }

/* ==========================================================================
   SECTION: hero
   ========================================================================== */

.hero { position: relative; }

.hb {
  position: relative;
  display: flex;
  min-height: 100svh;
}

/* The promise, read as you scroll: pinned, words light up as they are read. */

.hb__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 52px);
  padding-top: 110px;
  padding-bottom: 90px;
}

.hb__read { max-width: 21em; font-size: clamp(1.85rem, 1rem + 3.6vw, 4.3rem); }
.hb__lead, .hb__text { font-size: 1em; line-height: 1.12; }
.hb__lead { margin-bottom: 0.35em; font-weight: 420; }
.hb__text em { font-style: italic; color: var(--ink); }
.hb__read .w { will-change: opacity; }

/* ==========================================================================
   SECTION: teach
   ========================================================================== */

.teach { position: relative; }

/* The symbol field: math and science symbols generated by script.js.
   Ordered state is this grid; the scattered state is a GSAP transform
   applied on top, so without JS (or with reduced motion) it is orderly. */
.sym-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  align-content: space-evenly;
  justify-items: center;
  pointer-events: none;
  user-select: none;
  --cols: 6;
}
.sym {
  font-family: "STIX Two Text", var(--font-serif);
  font-size: clamp(1rem, 0.8rem + 1vw, 1.7rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  opacity: 0.13;
  will-change: transform;
}
.sym.is-eq { font-style: italic; font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.1rem); }
@media (min-width: 720px) { .sym-field { --cols: 8; } }
@media (min-width: 1080px) { .sym-field { --cols: 12; } }

/* ---------- The pinned stage: chaos to order ---------- */

.tb__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
}
.tb__field { inset: 12vh 0; }
.tb__copy { display: grid; gap: 24px; }
.tb__title { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 5.6rem); max-width: 15ch; }
.tb__l1, .tb__l2 { display: block; }
.tb__l2 { margin-top: 0.15em; }

/* ---------- The four most requested: numbered rows ---------- */

.teach__body { padding-top: clamp(40px, 8vh, 96px); }
.teach__lede { max-width: 40ch; margin-bottom: clamp(40px, 7vh, 72px); }
.ta__kicker { margin-bottom: 12px; }
.ta__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: 12px;
  row-gap: 6px;
  padding: 26px 0 28px;
}
.ta__row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
  transform: scaleX(var(--rule, 1));
}
.ta__row:last-child { border-bottom: 1px solid var(--line); }
.ta__num {
  padding-top: 0.9em;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--brass);
}
.ta__name {
  margin: 0;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 4.4rem);
  font-weight: 340;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.ta__desc { grid-column: 2; margin: 0; max-width: 46ch; color: var(--text-soft); }

/* ---------- The four most requested: a whiteboard beside each row ----------
   A worked example per subject: the student's lines in ink, the teacher's
   marks in red pen (the board is always light, like the live session's). */
.ta__board {
  display: block;
  grid-column: 1 / -1;
  width: min(100%, 460px);
  margin: 14px 0 0;
  padding: 10px;
  border-radius: 18px;
  background-color: #F5F1E8;
  background-image:
    linear-gradient(rgba(43, 40, 38, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 40, 38, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  box-shadow: var(--shadow);
}
.ta__board svg { width: 100%; height: auto; overflow: visible; }
.ta__board :is(path, rect, circle) { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ta__board text { font-family: "STIX Two Text", var(--font-serif); font-style: italic; font-size: 17px; stroke: none; }
.ta__board .tb-small { font-size: 13px; }
.ta__board .tb-atom { font-style: normal; font-size: 20px; }
.ta__board .tb-dash { stroke-dasharray: 5 5; stroke-width: 1.5; }
.ta__board .tb-fill { fill: rgba(45, 74, 122, 0.1); stroke: none; }
.ta__board .tb-int { font-size: 30px; font-style: normal; }
.ta__board .tb-solid { fill: #2D4A7A; }
.ta__board .tb-hash { stroke-width: 1.5; stroke-linecap: butt; }
.tb-ink :is(path, rect, circle) { stroke: #2D4A7A; }
.tb-ink text { fill: #2D4A7A; }
.tb-pen :is(path, rect, circle) { stroke: #B3362B; }
.tb-pen text { fill: #B3362B; }
@media (min-width: 720px) {
  .ta__row { grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 24px; }
  .ta__num { padding-top: 0.9em; }
  .ta__desc { grid-column: 2; margin-top: 10px; }
  .ta__board { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: 0; }
}

/* ---------- And also: two lines that glide ---------- */

.teach-more { padding-top: clamp(64px, 11vh, 128px); }

/* The track is duplicated by script.js so the
   loop is seamless; GSAP moves it and scroll speed nudges it. */
.tma__label { margin-bottom: 14px; }
.tma__label + .marquee { margin-bottom: clamp(36px, 6vh, 64px); }
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  padding-block: clamp(14px, 2.2vh, 22px);
}
.marquee__track li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.8rem);
  font-weight: 330;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.marquee__track li::after {
  content: "·";
  margin: 0 0.55em;
  color: var(--brass);
}
.marquee--levels .marquee__track li { font-style: italic; color: var(--text-soft); }
.reduced .marquee__track, :root:not(.js) .marquee__track { flex-wrap: wrap; width: auto; padding-inline: var(--gutter); }

/* ---------- Every course, and the closing note ---------- */

.teach__end { padding-top: clamp(56px, 9vh, 104px); }
.ta__all { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ta__all summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
}
.ta__all summary::-webkit-details-marker { display: none; }
.ta__all summary i { font-size: 1.2rem; transition: transform 0.4s var(--ease); }
.ta__all[open] summary i { transform: rotate(45deg); }
.ta__cols { display: grid; gap: 28px; padding: 8px 0 36px; }
.ta__cols ul { margin: 10px 0 22px; }
.ta__cols li { padding: 3px 0; color: var(--text-soft); }
@media (min-width: 720px) { .ta__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ta__cols { grid-template-columns: repeat(4, 1fr); } }

.teach-note {
  max-width: 40ch;
  margin: clamp(48px, 8vh, 88px) 0 0;
  padding-bottom: clamp(80px, 14vh, 160px);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--text-soft);
}

/* ==========================================================================
   SECTION: how
   ========================================================================== */

.how { position: relative; }

/* ---------- The four step visuals ---------- */

.hv {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg-raised);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
  overflow: hidden;
}
.hv__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-faint); }
.hv__top i { font-size: 1.2rem; }
.hv__meta { font-size: 0.72rem; letter-spacing: 0.06em; }
.hv__q { margin: 4px 0 0; font-family: var(--font-serif); font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem); line-height: 1.2; color: var(--text); }

/* 1 · the intake: the same step 1 as the form in "begin" */
.hv1 { gap: 12px; }
.hv1__bar { display: block; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hv1__bar span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0.5); }
.hv1 .hv__meta { margin-top: -4px; color: var(--text-faint); }
.hv1__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hv1__btn {
  display: flex;
  align-items: center;
  min-height: clamp(34px, 2.4rem + 0.6vw, 44px);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: clamp(0.68rem, 0.6rem + 0.3vw, 0.85rem);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.hv1__btn.is-picked { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.hv1__hs { display: flex; align-items: center; gap: 8px; font-size: clamp(0.68rem, 0.6rem + 0.25vw, 0.8rem); color: var(--text-soft); }
.hv1__box { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--text-faint); border-radius: 4px; }
.hv1__box i { font-size: 0.6rem; opacity: 0; }

/* 2 · the preparation */
.hv2 { grid-template-rows: auto 1fr; }
.hv2__rows { display: grid; gap: 4px; align-self: center; }
.hv2__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem);
  color: var(--text);
}
.hv2__row.is-here { background: color-mix(in srgb, var(--pen) 9%, transparent); }
.hv2__tick { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv2__box { width: 18px; height: 18px; flex: none; margin: 1px; border: 1.5px solid var(--line); border-radius: 5px; }
/* The note sits on the highlighted row and points back at its topic. */
.hv2__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-style: italic;
  font-size: 0.85em;
  color: var(--pen);
  white-space: nowrap;
}
.hv2__note svg { width: 42px; height: 18px; fill: none; stroke: var(--pen); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Phones: the syllabus grows to fit its rows, and the note drops its arrow. */
@media (max-width: 759px) {
  .hwb__visual .hv.hv2 { aspect-ratio: auto; }
  .hv2__note svg { display: none; }
}

/* 3 · the live session: the same window as in "homeschool" (.zm) */
.hv.hv3 { padding: 0; border: 0; background: none; box-shadow: none; aspect-ratio: auto; overflow: visible; }
.zm--mini { box-shadow: none; align-self: start; }
.zm--mini .zm__board { aspect-ratio: 2 / 1; padding: 14px 18px; }
.zm--mini .zm__tile { min-height: 58px; padding: 8px 10px; }
.zm--mini .zm__init { font-size: 0.78rem; }
.zm--mini .zm__eq { font-size: clamp(1rem, 0.85rem + 0.9vw, 1.6rem); }
/* Phones: no toolbar, so the tallest card (this one) stays short enough. */
@media (max-width: 759px) { .zm--mini .zm__tools { display: none; } }
/* Side by side, the window takes the same 4:3 shape as the other cards'
   pictures; the whiteboard and the two video tiles grow to fill it. */
@media (min-width: 760px) {
  .zm.zm--mini { aspect-ratio: 4 / 3; grid-template-rows: auto minmax(0, 1fr) auto; }
  .zm--mini .zm__main { align-items: stretch; }
  .zm--mini .zm__board { aspect-ratio: auto; padding: 18px 22px; container-type: inline-size; }
  .zm--mini .zm__tiles { grid-auto-rows: 1fr; align-content: stretch; }
  /* Sized to the whiteboard itself, so the longest line never wraps. */
  .zm--mini .zm__eq { white-space: nowrap; font-size: clamp(0.8rem, 7.2cqi, 1.9rem); }
  .zm--mini .zm__cursor.is-you { left: 80%; top: 62%; }
  .zm--mini .zm__cursor.is-teacher { left: 86%; top: 30%; }
}
/* 4 · keep everything */
.hv4 { align-content: center; justify-items: center; }
.hv4__stack { position: relative; width: 72%; aspect-ratio: 16 / 10; }
.hv4__card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 4px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 10px 24px -18px rgba(43, 40, 38, 0.6);
}
.hv4__thumb {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--brass);
  font-size: 2rem;
}
.hv4__title { font-family: var(--font-serif); font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem); color: var(--text); }
.hv4__sub { font-size: 0.7rem; color: var(--text-faint); }
.hv4__card:nth-child(1) { z-index: 3; }
.hv4__card:nth-child(2) { z-index: 2; transform: translate(4%, -6%) rotate(3deg); }
.hv4__card:nth-child(3) { z-index: 1; transform: translate(-4%, -10%) rotate(-4deg); }
.hv4__btn {
  position: absolute;
  z-index: 5;
  background: var(--bg-raised);
  right: clamp(18px, 3vw, 28px);
  bottom: clamp(18px, 3vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* ---------- The cards that stack as you scroll ---------- */

.hwb__head { display: grid; gap: 12px; padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(24px, 4vh, 40px); }
.hwb__h { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.8rem); max-width: 16ch; }
.hwb__pin { display: flex; align-items: center; min-height: 100svh; padding-block: 80px 32px; overflow: hidden; }
.hwb__deck { position: relative; display: grid; width: 100%; }
.hwb__card {
  grid-area: 1 / 1;
  display: grid;
  gap: 18px;
  /* The cards share one stack and so one height: center each card's content. */
  align-content: center;
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--bg);
  box-shadow: var(--shadow);
  transform-origin: 50% 0%;
}
.hwb__text { display: grid; gap: 8px; }
.hwb__num { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--ink); }
.hwb__title { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 3rem); font-weight: 360; letter-spacing: -0.018em; line-height: 1.05; }
.hwb__body { margin: 0; max-width: 40ch; color: var(--text-soft); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.12rem); }
.hwb__visual .hv { box-shadow: none; aspect-ratio: 16 / 10; }
.hwb__visual .hv.hv1, .hwb__visual .hv.hv3 { aspect-ratio: auto; }

@media (min-width: 760px) {
  .hwb__card { grid-template-columns: 5fr 6fr; align-items: center; gap: clamp(24px, 4vw, 72px); }
  .hwb__visual .hv { aspect-ratio: 4 / 3; }
}
.reduced .hwb__card, :root:not(.js) .hwb__card { grid-area: auto; margin-bottom: 20px; }

/* ==========================================================================
   SECTION: believe
   ========================================================================== */

.believe { position: relative; }

/* Where we are going, and the closing credo. */
.ba__dir { display: grid; gap: 12px; max-width: 46ch; margin-top: clamp(56px, 9vh, 96px); }
.ba__dir-text { margin: 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.45; color: var(--text-soft); }
.ba__credo {
  margin: clamp(56px, 9vh, 104px) 0 0;
  padding-bottom: clamp(96px, 16vh, 180px);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.4rem);
  max-width: 17ch;
}

/* ---------- The giant wordmark, then the articles ---------- */

.ba__head { padding-top: clamp(96px, 16vh, 180px); }
.ba__word {
  margin: clamp(18px, 3vh, 30px) 0 0 -0.04em;
  font-size: clamp(5.2rem, 26vw, 21rem);
  font-weight: 290;
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-variation-settings: "opsz" 72;
  /* Letters split for the rise lose kerning; matching it here keeps the
     word from jumping when the split is undone. */
  font-kerning: none;
}
.ba__rule {
  height: 1px;
  margin: clamp(22px, 4vh, 40px) 0 clamp(24px, 4vh, 44px);
  background: var(--line);
  transform-origin: left center;
}
.ba__intro { display: grid; gap: 18px; }
.ba__def { margin: 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); color: var(--text-soft); }
.ba__def em { color: var(--ink); }
.ba__h { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.6rem); max-width: 14ch; }

.ba__list { display: grid; margin-top: clamp(48px, 8vh, 96px); }
.ba__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 12px;
  row-gap: 8px;
  padding: 28px 0 32px;
}
.ba__item::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
  transform: scaleX(var(--rule, 1));
}
.ba__num { padding-top: 0.5em; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; color: var(--brass); }
.ba__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 360; letter-spacing: -0.018em; line-height: 1.1; }
.ba__body { grid-column: 2; margin: 0; max-width: 46ch; color: var(--text-soft); }

@media (min-width: 900px) {
  .ba__intro { grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
  .ba__list { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); }
  /* Seven principles: the last one closes the list across both columns. */
  .ba__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ==========================================================================
   SECTION: homeschool
   ========================================================================== */

.homeschool { position: relative; }

/* ---------- What a live session looks like ---------- */

.hob__pin { display: flex; align-items: center; min-height: 100svh; padding-block: 84px 28px; }
.hob__stage { display: grid; gap: clamp(20px, 3vh, 36px); align-items: center; }
.hob__copy { display: grid; gap: 14px; }
.hob__title { font-size: clamp(1.9rem, 1rem + 3.2vw, 4.6rem); max-width: 14ch; }
.hob__steps { display: grid; margin-top: 6px; }
.hob__step {
  grid-area: 1 / 1;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--text-soft);
  max-width: 30ch;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.js:not(.reduced) .hob__step:not(.is-on) { opacity: 0; transform: translateY(10px); }
.reduced .hob__steps, :root:not(.js) .hob__steps { gap: 10px; }
.reduced .hob__step, :root:not(.js) .hob__step { grid-area: auto; }

.zm {
  align-self: center;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #1C1A18;
  color: #EFE9DC;
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--font-sans);
}
.zm__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(239, 233, 220, 0.1); font-size: 0.72rem; }
.zm__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgba(239, 233, 220, 0.2); }
.zm__name { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.75; letter-spacing: 0.03em; }
.zm__rec { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #E06A5C; letter-spacing: 0.08em; }
.zm__rec > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #E06A5C; }
.zm__main { display: grid; gap: 8px; padding: 8px; align-items: start; }
.zm__main > * { min-width: 0; }
.zm__board {
  position: relative;
  display: grid;
  align-content: center;
  gap: 6px;
  aspect-ratio: 16 / 9;
  padding: 20px 22px;
  border-radius: 14px;
  background-color: #F5F1E8;
  background-image:
    linear-gradient(rgba(43, 40, 38, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 40, 38, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  color: #2B2826;
}
.zm__eq { margin: 0; font-family: "STIX Two Text", var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 0.9rem + 1.3vw, 2rem); line-height: 1.25; color: #2D4A7A; }
.zm__eq3 i { font-style: normal; color: #B3362B; }
.zm__cursor { position: absolute; font-size: 1.2rem; }
.zm__cursor.is-you { left: 62%; top: 52%; color: #2D4A7A; }
.zm__cursor.is-teacher { left: 74%; top: 28%; color: #B3362B; }
.zm__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zm__tile {
  position: relative;
  display: grid;
  align-content: end;
  gap: 2px;
  min-height: 74px;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #2A2724;
  transition: border-color 0.3s var(--ease);
}
.zm__tile.is-speaking { border-color: #C9A95E; }
.zm__init { font-size: 0.85rem; font-weight: 600; }
.zm__cam { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; opacity: 0.65; }
.zm__wave { position: absolute; right: 12px; top: 12px; display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.zm__wave span { width: 3px; height: 30%; border-radius: 2px; background: #C9A95E; }
.zm__tools { display: flex; justify-content: center; gap: 22px; padding: 10px; border-top: 1px solid rgba(239, 233, 220, 0.1); font-size: 1.15rem; opacity: 0.8; }
@media (min-width: 760px) {
  .hob__stage { grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 80px); }
  .zm__main { grid-template-columns: minmax(0, 1fr) 140px; }
  .zm__tiles { grid-template-columns: 1fr; align-content: start; }
  .zm__tile { min-height: 96px; }
}

/* ---------- Messages and the questions thread ---------- */

.msg {
  margin: 0;
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 20px;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  line-height: 1.4;
}
.msg--me { justify-self: end; background: var(--text); color: var(--bg); border-bottom-right-radius: 6px; }
.msg--them { position: relative; justify-self: start; background: var(--bg-raised); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg__dots { position: absolute; left: 16px; top: 50%; display: none; gap: 5px; translate: 0 -50%; }
.js:not(.reduced) .msg__dots { display: flex; }
.msg__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }

.hfaq__pin { display: flex; align-items: center; min-height: 100svh; padding-block: 84px 24px; }
.hfaq__stage { display: grid; gap: clamp(20px, 3vh, 40px); align-items: center; }
.hfaq__copy { display: grid; gap: 12px; }
.hfaq__title { margin: 0; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.6rem); max-width: 14ch; }
.thread {
  display: grid;
  grid-template-rows: auto 1fr;
  height: min(62svh, 620px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.thread__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.thread__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--text); color: var(--bg); font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; }
.thread__name { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; }
.thread__viewport { position: relative; overflow: hidden; }
.thread__list { display: grid; gap: 10px; padding: 18px 14px 22px; }
.reduced .thread, :root:not(.js) .thread { height: auto; }
.hfaq__end { display: flex; }
@media (min-width: 760px) {
  .hfaq__stage { grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 96px); }
  .thread { height: min(70svh, 660px); }
}

/* ---------- Call to action ---------- */

.home-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: clamp(28px, 5vh, 48px) 0 clamp(96px, 16vh, 180px);
  padding: 0 24px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), scale 0.3s var(--ease);
}
.home-cta:hover { background: var(--gold-hover); }
.home-cta:active { scale: 0.97; }
.home-cta i { font-size: 1.1rem; }

/* ==========================================================================
   SECTION: results
   Always a dark band, in both themes: the local tokens below override the
   page tokens for everything inside.
   ========================================================================== */

/* It fades in from the page color above and back out below, through its
   own extra space, so no text sits on the half-light. */
.results {
  --fade: clamp(220px, 42vh, 460px);
  --bg: #1C1A18;
  --bg-raised: #26231F;
  --text: #EFE9DC;
  --text-soft: #B8AE9F;
  --text-faint: #857C70;
  --line: rgba(239, 233, 220, 0.12);
  --brass: #C9A95E;
  --grade-red: #E06A5C;
  --ink: #9DB4E0;
  --pen: #E06A5C;
  position: relative;
  padding-block: var(--fade);
  /* Eased stops (like dusk), mixed in oklab so the middle never turns muddy. */
  --mix-1: color-mix(in oklab, var(--page) 90%, var(--bg));
  --mix-2: color-mix(in oklab, var(--page) 66%, var(--bg));
  --mix-3: color-mix(in oklab, var(--page) 38%, var(--bg));
  --mix-4: color-mix(in oklab, var(--page) 14%, var(--bg));
  background: linear-gradient(to bottom in oklab,
    var(--page) 0,
    var(--mix-1) calc(var(--fade) * 0.18),
    var(--mix-2) calc(var(--fade) * 0.4),
    var(--mix-3) calc(var(--fade) * 0.62),
    var(--mix-4) calc(var(--fade) * 0.82),
    var(--bg) var(--fade),
    var(--bg) calc(100% - var(--fade)),
    var(--mix-4) calc(100% - var(--fade) * 0.82),
    var(--mix-3) calc(100% - var(--fade) * 0.62),
    var(--mix-2) calc(100% - var(--fade) * 0.4),
    var(--mix-1) calc(100% - var(--fade) * 0.18),
    var(--page) 100%);
  color: var(--text);
}

.res__head { display: grid; justify-items: center; gap: 12px; }
.res__title { font-size: clamp(1.8rem, 1rem + 2.8vw, 3.6rem); max-width: 18ch; }

/* Captions under every climb: one visible at a time. */
.res__caps { display: grid; }
.res__cap {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);
  font-style: italic;
  font-weight: 340;
  color: var(--text-soft);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.js:not(.reduced) .res__cap:not(.is-on) { opacity: 0; transform: translateY(10px); }
.reduced .res__caps, :root:not(.js) .res__caps { gap: 6px; }
.reduced .res__cap, :root:not(.js) .res__cap { grid-area: auto; }

/* Grade colors: one color that ripens from red to green as the letters
   roll (script.js sets --g on the column). Without the animation each
   letter keeps its own step of the same scale. */
.is-f { color: var(--grade-red); }
.is-d { color: #E2875A; }
.is-c { color: #D8AE52; }
.is-b { color: #A9C46A; }
.is-a { color: #6CC58C; }
:root.js:not(.reduced) .rsa__g { color: var(--g, var(--grade-red)); }

/* ---------- One letter grade rolls ---------- */

.rsa__pin { display: flex; align-items: center; min-height: 100svh; padding-block: 80px 40px; }
.rsa__stage { display: grid; justify-items: center; gap: clamp(16px, 3vh, 32px); text-align: center; }
.rsa__window {
  height: 1em;
  font-size: clamp(13rem, min(48vw, 42svh), 26rem);
  line-height: 1;
  overflow: hidden;
}
.rsa__col { display: grid; }
.rsa__g { display: block; height: 1em; font-weight: 300; line-height: 1; letter-spacing: -0.04em; }
.reduced .rsa__col, :root:not(.js) .rsa__col { transform: translateY(-80%); }

/* ---------- After the climb ---------- */

.res__after { padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(96px, 16vh, 180px); }
.res__pact { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.4rem); max-width: 22ch; }
.res__why { max-width: 34ch; margin-top: clamp(24px, 4vh, 40px); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; color: var(--text-soft); }
.res__why em { color: var(--text); }
.res__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 5vh, 48px); }
.res__facts li {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* ---------- Reviews: what parents write to us ----------
   Real screenshots (dark, like the band), cut from the messages parents
   sent. Phones: a loose column, each message tilted and nudged left or
   right. From 900px: a collage, each message placed by --x, --y and --w in
   board units (1cqw, so it scales with the board). The board is pinned
   while it is dealt, so it never grows taller than the screen. */

.rev { padding-bottom: clamp(48px, 10vh, 120px); }
/* Below 900px the messages slide in from the sides; until they land they
   wait just past the edge, which must not make the page wider. */
@media (max-width: 899px) { .rev { overflow-x: clip; } }
.rev__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); max-width: 16ch; }
.rev__note { margin-top: 12px; font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-faint); }

.rev__board {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: clamp(28px, 5vh, 56px);
}
/* The figure is placed (and moved by GSAP); the image inside carries the
   tilt, so the two never fight over one transform. */
.rev__m {
  position: relative;
  margin: 0;
  max-width: 100%;
}
.rev__m:nth-child(even) { align-self: flex-end; }
.rev__m img {
  display: block;
  max-width: 100%;
  height: auto;
  rotate: calc(var(--r) * 0.6);
  border-radius: 16px;
  outline: 1px solid rgba(239, 233, 220, 0.08);
  outline-offset: -1px;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.9);
}

/* Tablets held upright: two loose columns, so the messages stay readable
   (the full collage would shrink their text too far) and the list is half
   as long. */
@media (min-width: 600px) and (max-width: 899px) {
  .rev__board { display: block; columns: 2; column-gap: 28px; }
  .rev__m { break-inside: avoid; margin-bottom: 16px; }
  .rev__m:nth-child(3n + 2) { margin-left: 18px; }
}

@media (min-width: 900px) {
  .rev__board {
    container-type: inline-size;
    display: block;
    position: relative;
    aspect-ratio: 100 / 66;
    width: min(100%, (100svh - 96px) * 100 / 66);
    margin-inline: auto;
  }
  .rev__m {
    position: absolute;
    left: calc(var(--x) * 1cqw);
    top: calc(var(--y) * 1cqw);
    width: calc(var(--w) * 1cqw);
  }
  .rev__m img { width: 100%; rotate: var(--r); transition: rotate 0.5s var(--ease), scale 0.5s var(--ease); }
}
@media (min-width: 900px) and (hover: hover) {
  .rev__m:hover { z-index: 5; }
  .rev__m:hover img { rotate: 0deg; scale: 1.05; }
}

/* ==========================================================================
   SECTION: begin
   ========================================================================== */

.begin { position: relative; padding-block: clamp(96px, 16vh, 180px); }
.begin__title { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 5.4rem); max-width: 13ch; }
.begin__lede { max-width: 40ch; }

/* Other ways to reach us */
.begin__alt { display: grid; gap: 12px; margin-top: clamp(32px, 5vh, 56px); }
.begin__alt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.begin__alt-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.begin__alt-list a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.begin__alt-list i { font-size: 1.15rem; color: var(--brass); }

/* ---------- The form engine's shared pieces ---------- */

.intake { position: relative; display: grid; gap: 18px; font-family: var(--font-sans); }
.intake fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 16px; }
.intake legend { padding: 0; margin-bottom: 4px; }
.intake__q { font-family: var(--font-serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; }
.intake__bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.intake__bar span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0.5); transition: transform 0.6s var(--ease); }
.intake__step { margin: -8px 0 0; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-faint); }

.pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 0.95rem;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pill:hover { border-color: var(--text-faint); }
.pill:has(input:checked) { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.pill:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }

.hs-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 0.92rem; color: var(--text-soft); }
.hs-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.hs-toggle__box { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--text-faint); border-radius: 6px; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.hs-toggle__box i { font-size: 0.85rem; opacity: 0; color: var(--charcoal); }
.hs-toggle:has(input:checked) .hs-toggle__box { background: var(--gold); border-color: var(--gold); }
.hs-toggle:has(input:checked) .hs-toggle__box i { opacity: 1; }
.hs-toggle:has(input:focus-visible) .hs-toggle__box { outline: 2px solid var(--brass); outline-offset: 2px; }

.field__err { min-height: 0; font-size: 0.8rem; color: var(--grade-red); }
.field__err:empty { display: none; }
.field__hint { margin: -4px 0 0; font-size: 0.8rem; color: var(--text-faint); }

.intake__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.intake__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; font: 500 0.9rem var(--font-sans); color: var(--text-soft); }
.intake__send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--charcoal);
  cursor: pointer;
  font: 600 1rem var(--font-sans);
  transition: background-color 0.3s var(--ease), scale 0.3s var(--ease);
}
.intake__send:hover { background: var(--gold-hover); }
.intake__send:active { scale: 0.97; }
.intake__send[disabled] { opacity: 0.6; cursor: progress; }
.intake__privacy { margin: 0; font-size: 0.8rem; color: var(--text-faint); }
.intake__status { margin: 0; font-size: 0.85rem; color: var(--grade-red); }
.intake__status:empty { display: none; }

.intake__done { display: grid; justify-items: start; gap: 10px; }
.intake__check { width: 56px; height: 56px; fill: none; stroke: var(--brass); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.intake__done-title { margin: 0; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); max-width: 16ch; }
.intake__done-text { margin: 0; color: var(--text-soft); }

/* ---------- The intake card ---------- */

.bga__grid { display: grid; gap: clamp(40px, 6vh, 64px); }
.bga__copy { display: grid; gap: 18px; align-content: start; }
.bga__card {
  padding: clamp(20px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--bg-raised);
  box-shadow: var(--shadow);
}
@media (min-width: 1000px) {
  .bga__grid { grid-template-columns: 5fr 6fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
}

/* ---------- Step 2: a short letter with blanks ---------- */

.letter-form__p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.85; transition: line-height 0.4s var(--ease); }
.blank-wrap { position: relative; display: inline-block; max-width: 100%; }
.blank {
  width: var(--w, 12ch);
  max-width: 100%;
  padding: 0 4px 2px;
  border: 0;
  border-bottom: 1.5px solid var(--text-faint);
  border-radius: 0;
  background: transparent;
  color: var(--brass);
  font: italic 400 1em/1.2 var(--font-serif);
  transition: border-color 0.3s var(--ease);
}
select.blank { width: auto; field-sizing: content; max-width: 100%; padding-right: 2px; cursor: pointer; }
.blank:focus { outline: none; border-bottom-color: var(--brass); }
.blank::placeholder { color: var(--text-faint); opacity: 0.7; }
.blank-wrap.is-invalid .blank { border-bottom-color: var(--grade-red); }
.blank-wrap .field__err { position: absolute; left: 4px; top: 100%; white-space: nowrap; font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.2; }
/* While a blank shows an error the lines open up, so its message never
   sits on the line below. */
.has-errors .letter-form__p { line-height: 2.6; }
.letter-step { gap: 18px; }

/* ==========================================================================
   SECTION: footer
   ========================================================================== */

.foot { padding-block: 22px 28px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.foot__mark { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; text-decoration: none; }
.foot__line { flex: 1 1 260px; margin: 0; font-style: italic; color: var(--text-soft); font-size: 1rem; }
.foot__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-family: var(--font-sans); font-size: 0.85rem; }
.foot__links a { text-decoration: none; color: var(--text-soft); }
.foot__links a:hover { color: var(--text); }
.foot__lang { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.foot__copy { color: var(--text-faint); }
@media (min-width: 760px) { .foot { padding-block: 24px; } }
/* Touch screens: every footer link is a full thumb-sized target. */
@media (pointer: coarse) {
  .foot__inner, .foot__links { align-items: center; row-gap: 0; }
  .foot__mark, .foot__links a, .foot__lang { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   SECTION: not found (404.html)
   ========================================================================== */

.nf {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
  padding: clamp(24px, 4vh, 40px) var(--gutter) clamp(48px, 10vh, 96px);
  max-width: var(--maxw);
  margin-inline: auto;
}
.nf__mark { width: max-content; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; text-decoration: none; color: var(--text); }
.nf__body { align-self: center; display: grid; justify-items: start; gap: 18px; max-width: 760px; }
.nf__title { font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.6rem); }
.nf__title--es { font-style: italic; color: var(--text-soft); font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.8rem); }
.nf__rule { width: 48px; height: 1px; margin: 10px 0; background: var(--brass); opacity: 0.6; }
.nf__text { margin: 0; max-width: 52ch; color: var(--text-soft); }
.nf__text[lang="es"] { font-style: italic; }
.nf__back {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 48px;
  margin-top: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.nf__back:hover { background: var(--gold-hover); }
.nf__sep { opacity: 0.5; }

/* ==========================================================================
   SECTION: dusk (theme change)
   The page is frozen as two snapshots while the light leaves or returns.
   Only the light snapshot moves (from script.js): it sits on top, behind a
   tall soft-edged mask that slides down, so the light sinks like sunset.
   ========================================================================== */

::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root[data-dusk-light="old"]::view-transition-old(root),
:root[data-dusk-light="new"]::view-transition-new(root) {
  z-index: 2;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, transparent 43%, #000 57%, #000 100%) 0 86% / 100% 300% no-repeat;
  mask: linear-gradient(to bottom, transparent 0%, transparent 43%, #000 57%, #000 100%) 0 86% / 100% 300% no-repeat;
}

/* ==========================================================================
   SECTION: color
   Every chapter sits on its own soft paper that fades in from the page and
   back out, so nothing changes abruptly. Roomy sections get a warm corner
   glow, like afternoon light. The colors are tokens at the top.
   ========================================================================== */

.teach { --tint: var(--tint-teach); }
.how { --tint: var(--tint-how); }
.believe { --tint: var(--tint-believe); }
.homeschool { --tint: var(--tint-home); }
.begin { --tint: var(--tint-begin); }
:is(.teach, .how, .believe, .homeschool, .begin) {
  --edge: clamp(80px, 14vh, 160px);
  --field: linear-gradient(to bottom in oklab,
    var(--page) 0, var(--tint) var(--edge),
    var(--tint) calc(100% - var(--edge)), var(--page) 100%);
  background: var(--field);
}

/* Warm corner light on the hero and the roomier chapters. The glows sit
   far enough inside their sections to fade out before any edge, so they
   never draw a line where two sections meet. */
.hero { background: radial-gradient(ellipse 70% 55% at 88% 0%, var(--glow), transparent 70%); }
.teach {
  background:
    radial-gradient(min(70vw, 900px) min(55vh, 520px) at 100% 42%, var(--glow), transparent 70%),
    radial-gradient(min(60vw, 760px) min(50vh, 460px) at 0% 78%, var(--glow), transparent 70%),
    var(--field);
}
.believe { background: radial-gradient(min(70vw, 900px) min(60vh, 560px) at 0% max(60vh, 560px), var(--glow), transparent 70%), var(--field); }
.begin { background: radial-gradient(min(70vw, 900px) min(60vh, 560px) at 100% calc(100% - max(60vh, 560px)), var(--glow), transparent 70%), var(--field); }

/* ==========================================================================
   Reduced motion: everything in its final state.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}