/* Starlite marketing homepage (public/index.html).
 *
 * Colors mirror app/src/theme/tokens.ts: the subject card slots (from / to /
 * border / accent), the chat surface, and the answer-state greens. Section
 * backdrops are the same full-bleed subject gradients public/home.html uses.
 * Light-only by product decision. Rule of the page: no white card wrappers —
 * a widget wears its subject's gradient, or sits straight on the section. */

:root {
  --night: #001A66;
  --night-hi: #0051C2;
  --blue: #2551A1;
  --blue-300: #B8D4F0;
  --blue-100: #DCF0FF;
  --blue-50: #F2FBFF;
  --sky-light: #A9D1F5;
  --yellow: #FFD95A;

  --ink: #1F2933;
  --ink-700: #334E68;
  --ink-500: #52606D;
  --ink-400: #5B6B80;
  --ink-200: #D9E2EC;
  --ink-50: #EEF2F7;

  --cream: #FFF5DC;
  --cream-ink: #444444;
  --chat-ink: #E0E0E0;

  --ok-bg: #D4EDDA;
  --ok: #28A745;
  --ok-ink: #155724;
  --idle: #8C8C8C;

  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, Menlo, Consolas, 'Courier New', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Subject card slots — one class sets the four colors a widget wears. */
.s-math { --from: #F2FBFF; --to: #DCF0FF; --line: #B8D4F0; --acc: #2551A1; --tint: rgba(37, 81, 161, .14); }
.s-ela  { --from: #FFF9F3; --to: #FFDCDC; --line: #F0C8C0; --acc: #9E4C3E; --tint: rgba(158, 76, 62, .14); }
.s-sci  { --from: #F5FFEF; --to: #DCFFEA; --line: #B0DFC0; --acc: #286E74; --tint: rgba(40, 110, 116, .14); }
.s-soc  { --from: #FDF2FF; --to: #FFCAFC; --line: #D8B0E8; --acc: #804775; --tint: rgba(128, 71, 117, .14); }
.s-gen  { --from: #FFFEF3; --to: #FFF7DC; --line: #E8D8A0; --acc: #2551A1; --tint: rgba(37, 81, 161, .14); }

*, *::before, *::after { box-sizing: border-box; }
/* Sizes are in rem against a 16px root at the 1440px design width. Wider than
   that, the root grows with the viewport, so the whole page scales up in the
   same proportions instead of stopping at its max-widths. `--k` is that scale
   as a number (set by the head script) for the few things that `zoom`. */
:root { --k: 1; }
html { -webkit-text-size-adjust: 100%; font-size: max(16px, 100vw / 90); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: .1875rem solid var(--yellow); outline-offset: .1875rem; border-radius: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3.75rem; z-index: 200; background: var(--yellow); color: var(--night); padding: .625rem 1rem; border-radius: 62.4375rem; font-weight: 600; text-decoration: none; }
.skip:focus { top: .75rem; }

/* ── Type ───────────────────────────────────────────────── */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6.2vw, 5.625rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  max-width: 68.75rem;
  margin: 0;
  text-wrap: balance;
}
/* Every headline is set the same way: a roman line, then its italic phrase on a line of its own. */
.display em, .h2 em { display: block; }
.display em { font-style: italic; color: var(--sky-light); }
/* Desktop: room for the roman line on one row, so the hero reads in two lines, not three. */
@media (min-width: 821px) {
  .display { max-width: 16em; }
}
.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
  max-width: 36em;
  margin: 1.875rem auto 0;
  text-wrap: pretty;
}
.eyebrow {
  margin: 0 0 1.125rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent, var(--blue));
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4.125rem);
  line-height: 1.08;
  letter-spacing: -.024em;
  color: var(--night);
  margin: 0;
  text-wrap: balance;
}
.h2 em { font-style: italic; color: var(--accent, var(--blue)); }
.sub {
  font-size: clamp(1.0625rem, 1.4vw, 1.21875rem);
  line-height: 1.65;
  color: var(--ink-700);
  max-width: 35em;
  margin: 1.5rem auto 0;
  text-wrap: pretty;
}
.sec-head { text-align: center; max-width: 57.5rem; margin: 0 auto; padding: 0 1.5rem; }

/* Reveal on scroll — hidden only once JS is known to be running. */
html.js .rv { opacity: 0; transform: translateY(1.75rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .h2.rv { transition-delay: .06s; }
html.js .sub.rv { transition-delay: .14s; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.125rem; padding: 0 1.625rem; border: 0; border-radius: 62.4375rem;
  font: 600 .96875rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .25s var(--ease), background-color .2s, box-shadow .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn-star { background: var(--yellow); color: var(--night); box-shadow: 0 .625rem 1.875rem -.75rem rgba(255, 217, 90, .65); }
.btn-star:hover { background: #FFE27A; }
.btn-sm { min-height: 2.5rem; padding: 0 1.125rem; font-size: .875rem; }

/* ── Nav ────────────────────────────────────────────────── */
/* Hidden over the hero (its logo stands in), the bar drops in once the page scrolls. */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transform: translateY(-100%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s, background-color .4s, box-shadow .4s; }
.nav.solid {
  transform: none; visibility: visible; transition: transform .45s var(--ease), background-color .4s, box-shadow .4s;
  background: rgba(0, 26, 102, .88);
  -webkit-backdrop-filter: saturate(1.6) blur(1.125rem);
  backdrop-filter: saturate(1.6) blur(1.125rem);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.nav-in { max-width: 75rem; height: 4.25rem; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand img { height: 2rem; width: auto; }
.nav-actions { display: flex; align-items: center; gap: 1.375rem; }
@media (max-width: 480px) {
  .nav-in { padding: 0 1rem; }
  .brand img { height: 1.625rem; }
  .nav-actions { gap: .875rem; }
  .nav .btn-sm { padding: 0 .875rem; font-size: .8125rem; }
}

/* ── 1. Intro: hero + rising demo ───────────────────────── */
.intro { position: relative; z-index: 1; isolation: isolate; }
.intro-bg { position: absolute; inset: 0; z-index: -1; }
.intro-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Three stacked backdrops: night fades to royal blue, royal fades to the math sky —
   so the hand-off never passes through a grey mix of navy and pale blue. */
.intro-sky, .intro-royal, .intro-night { position: absolute; inset: 0; }
.intro-sky { background: linear-gradient(180deg, #F2FBFF 0%, #DCF0FF 100%); }
.intro-royal { background: linear-gradient(180deg, #0B5BD3 0%, #3B8FE8 100%); will-change: opacity; }
.intro-night {
  background:
    radial-gradient(110% 70% at 50% 118%, rgba(10, 87, 208, .95) 0%, rgba(0, 81, 194, 0) 62%),
    linear-gradient(180deg, #001A66 0%, #00227E 100%);
  will-change: opacity;
}

/* No scroll-linked fade (reduced motion, or GSAP failed to load): night stays
   behind the hero only, and the rest of the intro sits on the sky. */
.intro.static { background: linear-gradient(180deg, #F2FBFF 0%, #DCF0FF 100%); }
.intro.static .intro-pin { position: absolute; inset: 0 0 auto 0; height: 100vh; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.intro.static .intro-sky, .intro.static .intro-royal { display: none; }

.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  padding: 7.5rem 1.5rem 20vh;
  will-change: transform, opacity;
}

.hero-logo { align-self: center; width: clamp(13.75rem, 26vw, 21.25rem); height: auto; margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
.hero-cta { margin-top: 2.125rem; display: flex; flex-direction: column; align-items: center; gap: .875rem; }
.hero-cta .btn { min-height: 3.375rem; padding: 0 2rem; font-size: 1rem; }
.hero-note { margin: 0; text-wrap: balance; font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .62); }
/* Short laptop screens: tighten the hero so the demo still peeks above the fold. */
/* Past 1440 wide the page scales with width, so "short" is a wide aspect ratio there. */
@media (max-height: 860px) and (min-width: 821px), (min-width: 1441px) and (min-aspect-ratio: 72 / 43) {
  .hero { padding-top: 6rem; padding-bottom: 17vh; }
  .display { font-size: clamp(2.5rem, min(6.2vw, 10.4vh), 5.625rem); }
  .lede { margin-top: 1.375rem; }
  .hero-cta { margin-top: 1.625rem; }
}

.demo-stage { position: relative; margin-top: -13vh; padding: 0 1rem clamp(8.125rem, 14vw, 11.875rem); display: flex; flex-direction: column; align-items: center; perspective: 112.5rem; scroll-margin-top: 5.625rem; }
/* A fixed 7:5 window, sized to the viewport height: on any desktop the whole
   split view fits on screen, and the activity side never gets squashed short. */
.demo-rise { width: min(100%, clamp(50rem, calc((100vh - 10.625rem) * 1.4), 67.5rem)); transform-origin: 50% 0%; will-change: transform; }


/* Everything inside the window: the chat, the activity panel, the dashboard and the pointer. */
.cam { position: absolute; inset: 0; display: flex; }
.demo {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 7 / 5;
  display: flex;
  border-radius: 1.75rem;
  overflow: hidden;
  background: var(--night);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16),
    0 4.375rem 7.5rem -3.125rem rgba(0, 26, 102, .7),
    0 1.875rem 3.75rem -1.875rem rgba(0, 26, 102, .45);
}

/* Chat — the app's one dark surface. */
.chat { flex: 1 1 auto; min-width: 0; display: flex; background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); color: var(--chat-ink); }
.rail { flex: none; width: 4rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.125rem 0; border-right: 1px solid rgba(184, 212, 240, .16); }
.rail img { width: 2.25rem; height: 2.25rem; }
.kid-av { width: 2.125rem; height: 2.125rem; border-radius: 50%; background: #3B82C4; color: #fff; font-weight: 700; font-size: .875rem; display: grid; place-items: center; box-shadow: 0 0 0 .125rem rgba(255, 255, 255, .35); }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-head { height: 3.75rem; flex: none; display: flex; align-items: center; gap: .625rem; padding: 0 1.75rem; border-bottom: 1px solid rgba(184, 212, 240, .14); white-space: nowrap; overflow: hidden; }
.chat-sub { font-size: .8125rem; font-weight: 500; color: rgba(255, 255, 255, .55); }
.chat-sub::after { content: '·'; margin-left: .625rem; }
.chat-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .90625rem; font-weight: 600; color: #fff; }
.chat-log {
  flex: 1; min-height: 0; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(transparent 0, #000 2.25rem);
  mask-image: linear-gradient(transparent 0, #000 2.25rem);
}
.chat-col { max-width: 41.25rem; margin: 0 auto; padding: 2rem clamp(1.125rem, 2.6cqw, 1.75rem) .75rem; }

.m { margin: 0 0 1.125rem; font-size: .96875rem; line-height: 1.6; max-width: 94%; animation: msgIn .35s var(--ease) both; }
.m b { color: #fff; font-weight: 600; }
.m h4 { font-family: var(--serif); font-weight: 700; color: #fff; font-size: 1.375rem; line-height: 1.3; margin: 0 0 .25rem; }
.m.kid { margin-left: auto; width: max-content; max-width: 70%; background: var(--cream); color: var(--cream-ink); border-radius: .75rem; padding: .5rem 1rem; font-size: .9375rem; }
.m.typing { display: flex; gap: .375rem; padding: .5rem 0; }
.m.typing i { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--blue-300); animation: dot 1.1s infinite; }
.m.typing i:nth-child(2) { animation-delay: .15s; }
.m.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msgIn { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-.1875rem); } }

/* The tutor's "on paper" drawing — the app's notebook sheet. */
.paper { display: block; width: max-content; max-width: 100%; margin-top: .75rem; background: #fff; border: .09375rem solid var(--blue-300); border-radius: .5rem; overflow: hidden; color: var(--ink); }
.paper-h { background: var(--blue-50); border-bottom: .09375rem solid var(--blue-300); padding: .25rem .75rem; font-size: .78125rem; font-weight: 700; color: var(--blue); }
.paper-b { margin-left: 1rem; border-left: .125rem solid #F2A0A0; padding: .5rem 1.375rem .625rem .875rem; }
.paper pre { margin: 0; font-family: var(--mono); font-size: 1.0625rem; line-height: 1.38; color: var(--ink); }
.paper .c { color: var(--blue); font-weight: 700; }
.paper .n { color: var(--blue); font-weight: 700; }

.composer { flex: none; margin: .5rem auto 1.125rem; width: calc(100% - 2 * clamp(1.125rem, 2.6cqw, 1.75rem)); max-width: 37.75rem; height: 3rem; border-radius: 62.4375rem; background: #fff; display: flex; align-items: center; gap: .625rem; padding: 0 .375rem 0 1rem; font-size: .90625rem; color: var(--ink); }
.composer > svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--night); }
.composer-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.composer-text .ph { color: var(--ink-400); }
.composer-text .caret { display: inline-block; width: .09375rem; height: 1.1em; margin-left: 1px; vertical-align: -.1875rem; background: var(--ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.send { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--night); display: grid; place-items: center; transition: transform .2s var(--ease); }
.send svg { width: 1.0625rem; height: 1.0625rem; color: #fff; }
.send.tap { transform: scale(.86); }

/* Activity panel — slides open beside the chat, in the general (yellow) slot. */
.panel { flex: 0 0 0%; position: relative; overflow: hidden; background: linear-gradient(165deg, #FFFEF3 0%, #FFF7DC 100%); transition: flex-basis .7s var(--ease); }
.demo.open .panel { flex-basis: 56%; }
.panel-in { position: absolute; top: 0; bottom: 0; left: 0; width: 56cqw; display: flex; flex-direction: column; padding: 1.125rem 1.75rem 1.5rem; }
.panel-head { flex: none; display: flex; align-items: center; gap: .875rem; }
.panel-back { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 .25rem rgba(0, 0, 0, .14); color: var(--night); }
.panel-back svg { width: 1.125rem; height: 1.125rem; }
.panel-head b { font-size: 1rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.panel-prog { margin-left: auto; width: 7.5rem; height: .75rem; border-radius: 6.1875rem; border: .09375rem solid var(--blue-300); overflow: hidden; }
.panel-prog i { display: block; height: 100%; width: 20%; background: var(--blue); border-radius: 6.1875rem; transition: width .8s var(--ease); }
.demo.solved .panel-prog i { width: 40%; }
.panel-n { font-size: .875rem; font-weight: 600; color: var(--blue); white-space: nowrap; }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; }
.pb-slide { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .375rem; transition: transform .55s var(--ease), opacity .4s; }
.pb-slide.out { transform: translateX(-5rem); opacity: 0; }
.pb-slide.pre { transform: translateX(5rem); opacity: 0; }
.block-prompt { margin: 0 auto; max-width: 25rem; text-align: center; font-size: 1.125rem; line-height: 1.5; font-weight: 600; color: var(--ink); }

/* custom-distribute — no card around the tray or the containers: the objects
   and the container art ARE the board (see CustomDistributeBlock.tsx). Tokens
   are absolutely placed over invisible slots and glide between them. */
.dist { --tok: 3.375rem; --tok-in: 2.75rem; --art: 9.375rem; position: relative; width: 100%; max-width: 30rem; }
.dist .slot { flex: none; display: block; }
.dist-tray { display: flex; justify-content: center; gap: .75rem; height: calc(var(--tok) + 1.75rem); align-items: center; margin-top: .625rem; }
.dist-tray .slot { width: var(--tok); height: var(--tok); }
.dist-note { position: absolute; left: 50%; top: calc(.625rem + (var(--tok) + 1.75rem) / 2); transform: translate(-50%, -50%); margin: 0; white-space: nowrap; padding: .625rem 1rem; border-radius: .625rem; background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; font-size: .9375rem; opacity: 0; transition: opacity .5s; }
.dist-note.show { opacity: 1; }
.dist-vessels { display: flex; justify-content: center; gap: .75rem; margin-top: .875rem; }
.dist-v { flex: 1 1 0; max-width: 13.75rem; display: flex; flex-direction: column; align-items: center; }
.dist-art { position: relative; width: var(--art); height: var(--art); }
.dist-art img { width: 100%; height: 100%; object-fit: contain; }
.dist-badge { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 35%); min-width: 2rem; padding: .25rem .625rem; border-radius: 62.4375rem; background: var(--blue); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.25; text-align: center; transition: transform .3s var(--ease); }
.dist-badge.bump { transform: translate(-50%, 35%) scale(1.25); }
.dist-in { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-top: 1.25rem; min-height: var(--tok-in); width: 100%; }
.dist-in .slot { width: var(--tok-in); height: var(--tok-in); }
.dist-tok { position: absolute; left: 0; top: 0; width: var(--tok); height: var(--tok); transform-origin: 0 0; transition: transform .36s var(--ease); z-index: 1; }
.dist-tok img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .1875rem .25rem rgba(80, 60, 20, .2)); }
.dist-tok::after { content: ''; position: absolute; inset: -.3125rem; border-radius: 50%; box-shadow: 0 0 0 .1875rem var(--yellow); background: rgba(255, 217, 90, .18); opacity: 0; transition: opacity .2s; z-index: -1; }
.dist-tok.sel { z-index: 2; }
.dist-tok.sel::after { opacity: 1; }
.paper .dot { opacity: 0; transition: opacity .18s; }
.paper .dot.on { opacity: 1; }


/* Phones (under 500) get the phone-shaped window; the parent dashboard follows
   (narrowMQ in homepage.js). Up to 820 the student's chat already goes compact:
   no rail, and the activity slides over the chat instead of beside it. */
@media (max-width: 499px) {
  .demo-rise { width: 100%; }
  .demo { aspect-ratio: auto; height: 40rem; border-radius: 1.375rem; }
}
/* In between, the window stays tall enough for the sharing board. (A min-height
   with aspect-ratio would transfer into a min-width and push it off screen.) */
@media (min-width: 500px) and (max-width: 820px) {
  .demo { aspect-ratio: auto; height: max(33.75rem, calc((100vw - 2rem) * 5 / 7)); }
}
@media (max-width: 820px) {
  .rail { display: none; }
  .chat-head { padding: 0 1.125rem; }
  .chat-col { padding: 1.625rem 1.125rem .625rem; }
  .composer { width: calc(100% - 1.75rem); margin-bottom: .875rem; }
  .panel { position: absolute; inset: 0; flex: none; transform: translateX(102%); transition: transform .55s var(--ease); }
  .demo.open .panel { transform: none; }
  .panel-in { width: 100%; padding: 1rem 1.125rem 1.375rem; }
  .panel-prog { width: 4.5rem; }
  .block-prompt { font-size: 1rem; }
  .dist { --tok: 2.625rem; --tok-in: 2.375rem; --art: 7.75rem; }
  .dist-tray { gap: .5rem; }
  .dist-note { font-size: .875rem; }
}
@media (max-width: 380px) {
  .chat-sub { display: none; }
  .dist { --tok: 2.375rem; --tok-in: 2.125rem; --art: 6.875rem; }
  .dist-tray { gap: .375rem; }
}

/* ── 2b. The parent's dashboard inside the demo window ──────
   Drawn at a fixed design size (960 wide, or 380 on phones — `.narrow`) and
   zoomed to fit the window by homepage.js, so these are plain pixel values.
   Mirrors the app: SideRail / ParentTabBar, the yellow ConfirmSheet popup
   (AddStudentDialog's steps), GenerateScheduleCard, WeekGrid and LessonSheet. */
.s-fri { --from: #F5F4FF; --to: #DDDAFB; --line: #C3BEEA; --acc: #4A4590; }
.s-sat { --from: #FFF5F8; --to: #FFD9E4; --line: #EFBACB; --acc: #9B3D5E; }

.pv { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: linear-gradient(180deg, #F2FBFF 0%, #DCF0FF 100%); transition: opacity .5s var(--ease), visibility .5s; }
.demo.kid .pv { opacity: 0; visibility: hidden; }
.pv-stage { position: relative; width: 60rem; height: 42.875rem; display: flex; color: var(--ink); }
.gl path { fill: currentColor; }
.gl path.ko { fill: var(--ko, #00227E); }

.pv-rail { flex: none; width: 12.5rem; display: flex; flex-direction: column; background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); color: #fff; --ko: #00227E; }
.pv-logo { padding: 1.375rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pv-logo img { width: 9.375rem; height: auto; }
.pv-nav { flex: 1; display: grid; align-content: start; gap: .25rem; padding: 1.125rem .625rem; }
.pv-ni { display: flex; align-items: center; gap: .875rem; padding: .6875rem .875rem; border-radius: .75rem; font-size: .9375rem; font-weight: 600; color: rgba(255, 255, 255, .65); transition: background-color .3s, color .3s, transform .15s; }
.pv-ni svg { flex: none; width: 1.3125rem; height: 1.3125rem; }
.pv-ni.on { background: rgba(255, 255, 255, .18); color: #fff; }
.pv-user { display: flex; align-items: center; gap: .625rem; padding: .875rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84375rem; font-weight: 600; }
.pv-uav { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #0051C2; border: .125rem solid #fff; font-size: .8125rem; font-weight: 700; }
.pv-user svg { width: 1.125rem; height: 1.125rem; margin-left: auto; color: rgba(255, 255, 255, .55); }
.pv-tabs { display: none; }

.pv-main { position: relative; flex: 1; min-width: 0; overflow: hidden; }
/* The dashboard pages. A takeover sinks them and fades them out, and on its
   way out brings them back once the yellow surface has dropped. */
/* PageTakeover's clock (900ms, ease in-out): opening, the dashboard sinks 3rem
   and fades over the first 30%, the yellow rises over 20–70%, and the flow
   fades up over the last 35%. Closing runs the same beats in reverse. */
.pv-pages { position: absolute; inset: 0; transition: opacity .27s cubic-bezier(.455, .03, .515, .955) .63s, transform .27s cubic-bezier(.455, .03, .515, .955) .63s; }
.pv-main.taken .pv-pages { opacity: 0; transform: translateY(3rem); transition-delay: 0s; }
.pv-page { position: absolute; inset: 0; padding: 1.875rem 2.125rem; transition: opacity .3s var(--ease), transform .32s var(--ease); }
.pv-page.pre { opacity: 0; transform: translateY(.875rem) scale(.985); }
.pv-page.gone { opacity: 0; }
.pv-page.col { display: flex; flex-direction: column; }
.pv .press { transform: scale(.94); }
.pv .lc.in.press { transform: scale(.96); }

.pg-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.375rem; }
.pg-title { margin: 0; font-size: 1.625rem; line-height: 1.25; font-weight: 700; color: var(--blue); }
.pg-sub { margin: .375rem 0 0; max-width: 35rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-500); }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.875rem; padding: 0 1.375rem; border-radius: 62.4375rem; background: var(--blue); color: #fff; font-size: .9375rem; font-weight: 600; white-space: nowrap; transition: opacity .25s, transform .15s; }
.pbtn.sm { height: 2.375rem; padding: 0 1rem; font-size: .875rem; }
.pbtn.full { width: 100%; }
.pbtn.off { opacity: .45; }

/* Students — empty (EmptyPrompt + its Get Started card), then Maya's card. */
.es { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.125rem; text-align: center; }
.es-line { margin: 0; font-size: 1rem; color: var(--ink-500); }
.start { display: flex; flex-direction: column; align-items: center; gap: .625rem; width: 19.5rem; padding: 2rem 1.25rem; border-radius: 1rem; background: linear-gradient(170deg, var(--from), var(--to)); border: .09375rem solid var(--line); box-shadow: 0 .25rem .75rem rgba(31, 41, 51, .06); color: var(--acc); transition: transform .15s; }
.start svg { width: 2.25rem; height: 2.25rem; }
.start b { font-size: 1.25rem; font-weight: 700; }
.scards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
/* StudentCard: GradientCard with the name + arrow, a grade Pill (drawn in the
   slot's border color), and the weekly CardProgress meter at its foot. */
.scard { display: flex; flex-direction: column; min-height: 8rem; padding: 1rem; border-radius: 1rem; background: linear-gradient(163deg, var(--from), var(--to)); border: .09375rem solid var(--line); box-shadow: 0 .25rem .75rem rgba(31, 41, 51, .06); animation: rowIn .5s var(--ease) both; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sc-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.25rem; line-height: 1.3; font-weight: 700; color: var(--acc); }
.sc-top svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--acc); opacity: .5; }
.sc-pill { align-self: flex-start; margin-top: .5rem; padding: .125rem .75rem; border-radius: 62.4375rem; border: .125rem solid var(--line); background: rgba(255, 255, 255, .6); color: var(--line); font-size: .8125rem; font-weight: 600; }
.sc-meter { margin-top: auto; height: .3125rem; border-radius: 6.1875rem; background: rgba(0, 0, 0, .08); overflow: hidden; }
.sc-meter i { display: block; height: 100%; width: 0; border-radius: 6.1875rem; background: color-mix(in srgb, var(--acc) 45%, transparent); }
.sc-lbl { margin-top: .25rem; font-size: .8125rem; color: var(--acc); opacity: .7; }

/* The popup: ConfirmSheet on its warm yellow slot (or a subject's, for a lesson). */
.pv-scrim { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1.5rem; background: rgba(31, 41, 51, .45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.pv-scrim.show { opacity: 1; visibility: visible; }
.sheet {
  width: 100%; max-width: 30rem; display: grid; gap: 1rem; padding: 1.5rem; border-radius: 1.375rem;
  background: linear-gradient(170deg, var(--from), var(--to)); border: .09375rem solid var(--line);
  box-shadow: 0 .25rem .75rem rgba(31, 41, 51, .06), 0 1.875rem 3.75rem -1.875rem rgba(0, 26, 102, .45);
  transform: translateY(.875rem) scale(.97); transition: transform .32s var(--ease);
}
.pv-scrim.show .sheet { transform: none; }
/* The exported PDF opens in the same popup layer, in place of the sheet. */
.pv-doc { display: none; width: min(100%, 25.625rem); }
.pv-scrim.doc .sheet { display: none; }
.pv-scrim.doc .pv-doc { display: block; }
.pv-doc .pdf { width: 100%; opacity: 0; transform: translateY(1.75rem) scale(.96); }
.pv-doc.in .pdf { opacity: 1; transform: none; }
html.js .pv-doc.in .pdf .pb { opacity: 1; transform: none; }
.sh-body { display: grid; gap: .875rem; transition: opacity .16s; }
.sh-body.fade { opacity: 0; }
.sh-h { display: grid; gap: .1875rem; }
.sh-eyebrow { font-size: .71875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.sh-title { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--acc); }
.sh-msg { margin: 0; font-size: .90625rem; line-height: 1.55; color: var(--ink-500); }
.sh-acts { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .125rem; }
.sbtn { display: inline-flex; align-items: center; justify-content: center; height: 2.625rem; padding: 0 1.25rem; border-radius: 62.4375rem; font-size: .90625rem; font-weight: 600; color: var(--acc); transition: background-color .25s, opacity .25s, transform .15s; }
.sbtn.solo { box-shadow: inset 0 0 0 .09375rem var(--acc); }
.sbtn.pri { background: var(--acc); color: #fff; }
.sbtn.pri.off { opacity: .45; }

.grp { display: grid; gap: .5rem; }
.lbl { font-size: .875rem; font-weight: 600; color: var(--ink); }
.fld { position: relative; display: flex; align-items: center; height: 2.875rem; padding: 0 .875rem; border-radius: .75rem; border: 1px solid #C9D3DE; background: #fff; font-size: .9375rem; color: var(--ink); white-space: nowrap; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .15s; }
.fld.focus { border-color: var(--blue); box-shadow: 0 0 0 .1875rem rgba(37, 81, 161, .18); }
.fld .ph { color: var(--ink-400); }
.pv .caret { display: inline-block; width: .09375rem; height: 1.1em; margin-left: 1px; vertical-align: -.1875rem; background: var(--ink); animation: caret 1s steps(1) infinite; }
.grades { display: flex; gap: .625rem; }
.dc { flex: none; width: 2.875rem; height: 2.875rem; border-radius: 50%; display: grid; place-items: center; border: .125rem dashed #9AA5B1; font-size: .90625rem; color: var(--ink-400); transition: background-color .25s, border-color .25s, color .25s, transform .15s; }
.dc.on { border-style: solid; border-color: var(--line); background: linear-gradient(160deg, var(--from), var(--to)); color: var(--acc); font-weight: 700; }

/* Interests (InterestsEditor on the popup: chips take its blue accent). */
/* The step's own example: the same sharing board for a dinosaur fan, then a space fan. */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 2.375rem; }
.chip { display: inline-flex; align-items: center; gap: .375rem; padding: .4375rem .625rem .4375rem .875rem; border-radius: 62.4375rem; background: rgba(255, 255, 255, .6); border: 1px solid var(--blue); color: var(--blue); font-size: .875rem; font-weight: 600; animation: pop .32s var(--ease); }
.chip svg { width: .875rem; height: .875rem; }
.hintline { font-size: .8125rem; color: var(--ink-500); }
.fld.add { padding-right: 3.375rem; }
.addb { position: absolute; top: .3125rem; right: .3125rem; bottom: .3125rem; aspect-ratio: 1; border-radius: .5rem; display: grid; place-items: center; background: var(--blue); color: #fff; opacity: .45; transition: opacity .2s, transform .15s; }
.addb.ok { opacity: 1; }
.addb svg { width: 1.125rem; height: 1.125rem; }

/* The classes fork, then the Starlite subjects. */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.path { position: relative; display: grid; align-content: start; gap: .625rem; padding: .875rem; border-radius: 1.125rem; background: linear-gradient(170deg, var(--from), var(--to)); border: .09375rem solid var(--line); box-shadow: 0 .25rem .75rem rgba(31, 41, 51, .06); transition: border-color .25s, box-shadow .25s, transform .15s; }
.path.on { border-color: var(--acc); box-shadow: inset 0 0 0 .5px var(--acc), 0 .25rem .75rem rgba(31, 41, 51, .06); }
.path img { width: 100%; aspect-ratio: 943 / 682; object-fit: contain; }
.path-t { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.path-t b { font-size: .875rem; line-height: 1.3; font-weight: 700; color: var(--acc); }
.rec { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc); font-style: normal; font-size: .71875rem; font-weight: 700; }
.rec svg { width: .6875rem; height: .6875rem; }
.path p { margin: 0; font-size: .78125rem; line-height: 1.45; color: var(--ink-500); }
.path .ck { position: absolute; top: .625rem; right: .625rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #fff; animation: pop .3s var(--ease); }
.path .ck svg { width: 1rem; height: 1rem; }
.subjs { display: grid; gap: .5rem; }
.subj { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border-radius: .875rem; background: linear-gradient(170deg, var(--from), var(--to)); border: .125rem solid var(--acc); animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.subj > svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--acc); }
.subj b { display: block; font-size: .875rem; font-weight: 700; color: var(--acc); }
.subj small { display: block; font-size: .78125rem; color: var(--ink-500); }

/* Calendar: the student pill, then the schedule builder (GenerateScheduleCard). */
.cal-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.spill { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem .25rem .25rem; border-radius: 62.4375rem; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .09375rem rgba(0, 81, 194, .2); font-size: .875rem; font-weight: 600; }
.spill .av { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
.spill svg { width: .9375rem; height: .9375rem; color: var(--ink-500); }
.wk-nav { display: inline-flex; align-items: center; gap: .375rem; font-size: .9375rem; font-weight: 700; }
.wk-nav svg { width: 1.125rem; height: 1.125rem; color: var(--ink-500); }
.wk-nav i { display: grid; place-items: center; }
.soft svg { display: none; }
.soft { margin-left: auto; display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .875rem; border-radius: 62.4375rem; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .09375rem rgba(0, 81, 194, .2); font-size: .84375rem; font-weight: 600; color: var(--blue); }
.gs { flex: 1; min-height: 0; display: flex; gap: 1.625rem; margin-top: 1.5rem; }
.gs-form { flex: none; width: 22.75rem; display: grid; align-content: start; gap: 1.375rem; }
.gs-sep { flex: none; width: 1px; background: rgba(0, 81, 194, .14); }
.gs-prev { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.eb { flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .78125rem; color: var(--ink-400); white-space: nowrap; }
.days { display: flex; justify-content: space-between; }
.myp { border-radius: .875rem; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .09375rem rgba(0, 81, 194, .18); overflow: hidden; }
.myp-y { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(0, 81, 194, .14); }
.myp-y span { padding: .5625rem; text-align: center; font-size: .875rem; font-weight: 600; color: var(--ink-500); }
.myp-y span.on { color: var(--blue); box-shadow: inset 0 -.15625rem 0 var(--blue); }
.myp-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; padding: .5rem; }
.myp-g span { padding: .5rem 0; border-radius: .5rem; text-align: center; font-size: .84375rem; font-weight: 500; transition: background-color .25s, color .25s, transform .15s; }
.myp-g span.on { background: rgba(37, 81, 161, .14); color: var(--blue); font-weight: 700; }
.pw { flex: 1; min-height: 8.75rem; display: flex; border: 1px solid rgba(0, 81, 194, .18); border-radius: .75rem; overflow: hidden; }
.pw-c { flex: 1; min-width: 0; border-right: 1px solid rgba(0, 81, 194, .14); transition: background-color .3s; }
.pw-c:last-child { border-right: 0; }
.pw-c.off { background: rgba(31, 41, 51, .04); }
.pw-c > b { display: block; padding: .5rem 0; text-align: center; border-bottom: 1px solid rgba(0, 81, 194, .14); font-size: .78125rem; font-weight: 700; color: var(--ink-400); transition: color .25s; }
.pw-c.on > b { color: var(--acc); }
.pw-bars { display: grid; gap: .25rem; padding: .25rem; }
.pw-bars i { height: .9375rem; border-radius: .25rem; background: var(--to); border: 1px solid var(--line); animation: pop .3s var(--ease); }
.pnote { flex: none; display: grid; gap: .5rem; margin-top: .75rem; padding: .75rem .875rem; border-radius: .75rem; background: rgba(0, 81, 194, .08); font-size: .78125rem; color: var(--ink-500); }
.pnote p { margin: 0; }
.pn-stats { display: flex; gap: .875rem; }
.pn-stats > span { flex: 1; display: grid; gap: .125rem; }
.pn-stats > i { width: 1px; background: #9AA5B1; }
.pn-stats b { font-size: 1.0625rem; font-weight: 700; color: var(--blue); white-space: nowrap; }

/* The week (WeekGrid) — the app's own lesson chips (.lc, styled with section 7). */
.wk { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid rgba(0, 81, 194, .16); border-radius: .875rem; overflow: hidden; }
.wk-d { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .375rem; border-right: 1px solid rgba(0, 81, 194, .12); }
.wk-d:last-child { border-right: 0; }
.wk-d.off { background: rgba(31, 41, 51, .04); }
.wk-d.today { background: rgba(37, 81, 161, .07); }
.wk-h { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin-bottom: .25rem; }
.wk-h span { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }
.wk-h b { width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.0625rem; font-weight: 700; }
.wk-d.today .wk-h b { background: var(--blue); color: #fff; }
.wk .lc { padding: .5rem; opacity: 0; transform: translateY(.75rem); transition: opacity .5s var(--ease), transform .5s var(--ease), background .4s, border-color .4s, box-shadow .4s; }
.wk .lc.in { opacity: 1; transform: none; }
.wk .lc span { -webkit-line-clamp: 5; font-size: .75rem; }
.wk .lc em { white-space: nowrap; font-size: .625rem; }
.wk .lc.ping { box-shadow: 0 0 0 .3125rem rgba(40, 167, 69, .3); }

/* LessonSheet: pre → final, then what the lesson held. */

/* Add Student as a full-page takeover (PageTakeover): the dashboard sinks, the
   popup's yellow rises from the bottom to fill the content area — the rail
   stays — and the flow fades up onto it, its actions pinned to the foot. */
.tk { position: absolute; inset: 0; z-index: 4; overflow: hidden; visibility: hidden; transition: visibility 0s .9s; }
.tk.open { visibility: visible; transition-delay: 0s; }
.tk-surface { position: absolute; inset: 0; background: linear-gradient(170deg, #FFFEF3 0%, #FFF7DC 100%); transform: translateY(100%); transition: transform .45s cubic-bezier(.455, .03, .515, .955) .27s; }
.tk.open .tk-surface { transform: none; transition-delay: .18s; }
.tk-page { position: absolute; inset: 0; display: flex; padding: 2.75rem 0 1.625rem; opacity: 0; transform: translateY(1rem); transition: opacity .32s cubic-bezier(.455, .03, .515, .955), transform .32s cubic-bezier(.455, .03, .515, .955); }
.tk.open .tk-page { opacity: 1; transform: none; transition-delay: .585s; }
.tk-col { flex: 1; width: 100%; max-width: 35rem; margin: 0 auto; padding: 0 2rem; display: flex; flex-direction: column; gap: 1.125rem; --from: #FFFEF3; --to: #FFF7DC; --line: #E8D8A0; --acc: #2551A1; }
.tk-col .sh-body { gap: 1.125rem; }
.tk-col .sh-title { font-size: 1.625rem; }
.tk-col .sh-msg { font-size: .96875rem; }
.tk-col .sh-acts { margin-top: auto; }

/* The weeks flying by, and the count riding over them. */
.wk.flip { animation: wkFlip .26s var(--ease); }
@keyframes wkFlip { from { opacity: .35; transform: translateX(1.125rem); } }
.lapse { position: absolute; left: 50%; top: 55%; z-index: 3; display: inline-flex; align-items: center; gap: .625rem; padding: .875rem 1.5rem; border-radius: 62.4375rem; background: var(--night); color: #fff; font-size: 1.1875rem; font-weight: 600; white-space: nowrap; box-shadow: 0 1.25rem 2.5rem -1rem rgba(0, 26, 102, .6); opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.lapse.show { opacity: 1; transform: translate(-50%, -50%); }
.lapse b { min-width: 2ch; font-size: 1.625rem; color: var(--yellow); font-variant-numeric: tabular-nums; text-align: right; }
.lapse svg { width: 1.25rem; height: 1.25rem; color: var(--yellow); fill: currentColor; }

/* The Portfolio (app/(parent)/portfolio/[id].tsx) — the page scrolls itself. */
.pf-page { overflow: hidden; }
.pf { position: relative; transition: transform 1.8s cubic-bezier(.65, 0, .35, 1); }
.pf-back { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 500; color: var(--ink-500); }
.pf-back svg { width: 1.0625rem; height: 1.0625rem; }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .875rem 0 1.5rem; }
.pf-title { display: flex; align-items: center; gap: .625rem; color: var(--acc); }
.pf-title svg { width: 1.875rem; height: 1.875rem; }
.pf-title b { font-size: 1.625rem; font-weight: 700; }
.spill.cal { padding-left: .75rem; gap: .375rem; }
.spill.cal svg:first-child { width: 1rem; height: 1rem; color: var(--blue); }
.pf-ch-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .625rem 1rem; margin-bottom: 1rem; }
.pf-big { display: block; font-size: 1.3125rem; font-weight: 700; }
.pf-ch-head p { margin: .25rem 0 0; font-size: .90625rem; color: var(--ink-500); }
.pf-ch-head p em { font-style: normal; font-weight: 700; color: var(--ok-ink); }
.pf-read { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font-size: .78125rem; color: var(--ink-500); }
.pf-read b { font-size: .84375rem; color: var(--ink); }
.pf-read span { display: inline-flex; align-items: center; gap: .3125rem; }
.pf-read i { width: .625rem; height: .625rem; border-radius: .1875rem; }
.pf-plot { position: relative; display: flex; padding-left: 1.875rem; }
.pf-grid { position: absolute; left: 1.875rem; right: 0; top: 0; height: 9.375rem; display: flex; flex-direction: column; justify-content: space-between; }
.pf-grid span { position: relative; border-top: 1px solid rgba(0, 81, 194, .1); }
.pf-grid span::before { content: attr(data-v); position: absolute; right: calc(100% + .5rem); top: -.5rem; font-size: .6875rem; color: var(--ink-400); }
.pc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pc-plot { width: 100%; height: 9.375rem; display: flex; align-items: flex-end; justify-content: center; }
.pc-bar { position: relative; width: 1.75rem; display: flex; flex-direction: column-reverse; gap: .125rem; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s var(--ease); transition-delay: calc(.1s + var(--i) * 80ms); }
.pf-page.go .pc-bar { transform: none; }
.pc-bar i { flex-basis: 0; min-height: .125rem; }
.pc-bar i:last-of-type { border-radius: .25rem .25rem 0 0; }
.pc-bar b { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -.25rem); font-size: .75rem; font-weight: 700; }
.pc-bar u { position: absolute; bottom: 0; left: .5rem; right: .5rem; height: .1875rem; border-radius: .125rem; background: rgba(0, 81, 194, .1); }
.pc > span { font-size: .75rem; color: var(--ink-400); }
.pc.on > span { font-weight: 700; color: var(--blue); }
.pf-h { display: flex; align-items: center; gap: .5rem; margin: 2.125rem 0 1rem; font-size: 1.1875rem; font-weight: 700; color: var(--blue); }
.pf-h svg { width: 1.25rem; height: 1.25rem; }
.pf-tabs { display: flex; gap: .5rem; margin-bottom: 1.375rem; }
.pf-tab { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 1rem; border-radius: 62.4375rem; border: .09375rem solid color-mix(in srgb, var(--acc) 30%, transparent); color: var(--acc); font-size: .875rem; font-weight: 700; }
.pf-tab.on { border: .125rem solid var(--acc); background: var(--to); }
.pf-tab svg { width: 1rem; height: 1rem; }
.pf-meters { display: flex; gap: 1.75rem; margin-bottom: 1.625rem; }
.mt { flex: 1; min-width: 0; display: grid; gap: .375rem; }
.mt-h { display: flex; align-items: center; justify-content: space-between; font-size: .875rem; }
.mt-v { font-size: 1.0625rem; font-weight: 700; }
.mt-rule { width: 1px; background: rgba(0, 81, 194, .14); }
.okchip { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5625rem; border-radius: 62.4375rem; background: var(--ok-bg); color: var(--ok-ink); font-size: .75rem; font-weight: 700; }
.okchip svg { width: .75rem; height: .75rem; }
.lnk { font-size: .78125rem; font-weight: 700; color: var(--blue); }
.trk2 { position: relative; display: flex; gap: .125rem; height: .625rem; margin: .25rem 0; border-radius: 6.1875rem; background: rgba(0, 81, 194, .08); }
.trk2 > i { height: 100%; width: 0; border-radius: 6.1875rem; background: var(--acc); transition: width 1s var(--ease) .3s; }
.trk2 > i.ip { background: color-mix(in srgb, var(--acc) 35%, transparent); }
.pf-page.go .trk2 > i { width: var(--w); }
.trk2 > b { position: absolute; top: -.25rem; bottom: -.25rem; width: .25rem; margin-left: -.125rem; border-radius: .125rem; background: var(--ink-500); border: 1px solid #fff; }
.keys { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .78125rem; color: var(--ink-500); }
.keys span { display: inline-flex; align-items: center; gap: .375rem; }
.keys .kt { width: .25rem; height: .875rem; border-radius: .125rem; background: var(--ink-500); }
.keys .ks { width: .625rem; height: .625rem; border-radius: .1875rem; background: color-mix(in srgb, var(--acc) 35%, transparent); }
.pf-uh { display: flex; justify-content: space-between; margin-bottom: .625rem; font-size: .875rem; }
.pf-units { display: grid; gap: .5rem; }
.ur { display: grid; gap: .5rem; padding: .75rem .875rem; border-radius: .75rem; background: var(--from); border: .09375rem solid var(--line); }
.ur.open { border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.ur-top { display: flex; align-items: center; gap: .625rem; }
.ur-top > svg { flex: none; width: 1rem; height: 1rem; color: var(--acc); }
.ur.open .ur-top > svg { transform: rotate(90deg); }
.ur-top b { flex: 1; min-width: 0; font-size: .875rem; color: var(--acc); }
.ur-top small { font-size: .78125rem; color: var(--ink-500); white-space: nowrap; }
.ur-sl, .lr-sl { display: flex; align-items: center; gap: .625rem; padding-left: 1.625rem; }
.ur-lessons { display: grid; gap: .125rem; margin: 0 0 .25rem 1.375rem; padding-left: .875rem; border-left: .125rem solid color-mix(in srgb, var(--acc) 30%, transparent); }
.lr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; padding: .5rem .625rem; border-radius: .625rem; transition: background-color .2s, transform .15s; }
.lr > span { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.lr .lr-sl { grid-column: 1; padding-left: 0; }
.lr-star { grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--ink-400); transition: color .2s, background-color .2s; }
.lr-star svg { width: 1.0625rem; height: 1.0625rem; }
.sl { position: relative; flex: 1; min-width: 0; height: 1rem; }
.sl i { position: absolute; top: 50%; }
.sl-t { left: 0; right: 0; height: .375rem; margin-top: -.1875rem; border-radius: 6.1875rem; background: color-mix(in srgb, var(--acc) 12%, transparent); }
.sl-b { left: var(--pre); width: 0; height: .375rem; margin-top: -.1875rem; border-radius: 6.1875rem; background: color-mix(in srgb, var(--acc) 42%, transparent); transition: width 1s var(--ease) .35s; }
.sl-p, .sl-f { left: var(--pre); width: .8125rem; height: .8125rem; margin: -.40625rem 0 0 -.40625rem; border-radius: 50%; }
.sl-p { border: .15625rem solid var(--acc); background: #fff; }
.sl-f { background: var(--acc); box-shadow: 0 0 0 .125rem #fff; transition: left 1s var(--ease) .35s; }
.pf-page.go .sl-b { width: calc(var(--fin) - var(--pre)); }
.pf-page.go .sl-f { left: var(--fin); }
.sl-n { font-size: .78125rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sl-n b { color: var(--ink); }
.sl-g { padding: 1px .5rem; border-radius: 6.1875rem; background: var(--ok-bg); color: var(--ok-ink); font-style: normal; font-size: .75rem; font-weight: 700; }
.pf-export { display: flex; justify-content: flex-end; margin-top: 1.875rem; padding-bottom: .375rem; }
.pbtn svg { width: 1.125rem; height: 1.125rem; }
.pbtn.busy svg { animation: nudge .7s ease-in-out infinite; }
.pbtn.ok { background: var(--ok); }

/* Phones: no rail — the app's bottom tab bar — and one column throughout. */
.narrow .pv-rail { display: none; }
/* ParentTabBar.tsx: icon-only, the rail's gradient run across the bar, the current tab in a white pill. */
.narrow .pv-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .5rem .5rem .75rem; background: linear-gradient(90deg, #0051C2 0%, #001A66 100%); }
.pv-tab { display: grid; place-items: center; min-height: 2.75rem; color: rgba(255, 255, 255, .65); transition: color .3s, transform .15s; }
.pv-tab i { display: grid; place-items: center; min-width: 3.5rem; padding: .5rem .75rem; border-radius: 62.4375rem; --ko: #001A66; transition: background-color .3s, color .3s; }
.pv-tab svg { width: 1.5rem; height: 1.5rem; }
.pv-tab.on i { background: #fff; color: #0051C2; --ko: #fff; }
.narrow .pv-page { bottom: 4rem; padding: 1.25rem 1.125rem; }
.narrow .pg-title { font-size: 1.375rem; }
.narrow .pg-sub { font-size: .875rem; }
.narrow .start { width: 100%; }
.narrow .scards { grid-template-columns: minmax(0, 1fr); }
.narrow .pv-scrim { padding: .875rem; }
.narrow .sheet { padding: 1.25rem; gap: .875rem; }
.narrow .sh-title { font-size: 1.125rem; }
.narrow .sh-msg { font-size: .875rem; }
/* AddStudentDialog on a phone: the two curriculum paths stack (row={false}). */
.narrow .paths { grid-template-columns: minmax(0, 1fr); }
.narrow .gs { flex-direction: column; margin-top: 1.25rem; }
.narrow .gs-sep, .narrow .gs-prev { display: none; }
.narrow .gs-form { width: 100%; gap: 1.25rem; }
/* The phone calendar (calendar.tsx narrow): pill + an icon-only settings button,
   then ‹ week › on its own row, then WeekStripView — a seven-day strip over the
   selected day's lessons. */
.narrow .cal-bar { flex-wrap: wrap; gap: .875rem .75rem; margin-bottom: .875rem; }
.narrow .soft { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; border-radius: .75rem; }
.narrow .soft svg { display: block; width: 1.125rem; height: 1.125rem; color: var(--ink-500); }
.narrow .soft span { display: none; }
.narrow .wk-nav { order: 3; flex-basis: 100%; gap: .625rem; }
.narrow .wk-nav i { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .09375rem rgba(0, 81, 194, .2); }
.narrow .wk-nav svg { width: 1rem; height: 1rem; color: var(--blue); }
.wk.wk-ph { display: flex; flex-direction: column; gap: .75rem; border: 0; border-radius: 0; overflow: visible; }
.wks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid rgba(0, 81, 194, .16); border-radius: .75rem; overflow: hidden; }
.wks-d { display: flex; flex-direction: column; align-items: center; gap: .125rem; min-height: 2.75rem; padding: .5rem 0; border-right: 1px solid rgba(0, 81, 194, .16); }
.wks-d:last-child { border-right: 0; }
.wks-d.off { background: rgba(31, 41, 51, .04); }
.wks-d small { font-size: .75rem; font-weight: 700; color: var(--ink-400); }
.wks-d b { font-size: .9375rem; font-weight: 500; }
.wks-d.today b { font-weight: 700; }
.wks-d.sel { background: var(--blue); color: #fff; }
.wks-d.sel small { color: #fff; }
.wks-d.sel b { font-weight: 700; }
.wks-dots { display: flex; align-items: center; gap: .125rem; height: .25rem; }
.wks-dots i { width: .25rem; height: .25rem; border-radius: 50%; background: var(--blue); }
.wks-d.sel .wks-dots i { background: #fff; }
.wks-day { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .05em; color: var(--ink-500); }
.wks-list { display: grid; gap: .5rem; margin-top: -.25rem; }
.wk-ph .lc { padding: .75rem .875rem; }
.wk-ph .lc span { -webkit-line-clamp: 2; font-size: .875rem; }
.wk-ph .lc em { font-size: .6875rem; }
.wk-ph.flip { animation: none; }
.wk-ph.flip .wks-list { animation: wkFlip .26s var(--ease); }
.narrow .tk { bottom: 4rem; }
.narrow .tk-page { padding: 1.375rem 0 .875rem; }
/* The page scrolls as one column, its actions following the content when a step runs long (ConfirmSheet's page presentation). */
.narrow .tk-col { padding: 0 1.125rem; gap: .875rem; overflow: hidden; }
.narrow .tk-col .sh-body { gap: .875rem; }
.narrow .tk-col .sh-title { font-size: 1.375rem; }
.narrow .tk-col .sh-msg { font-size: .875rem; }
.narrow .lapse { padding: .75rem 1.125rem; font-size: .9375rem; }
.narrow .lapse b { font-size: 1.3125rem; }
.narrow .pf-head { flex-wrap: wrap; margin-bottom: 1.125rem; }
.narrow .pf-title b { font-size: 1.3125rem; }
.narrow .pf-read { display: none; }
.narrow .pf-big { font-size: 1.1875rem; }
.narrow .pf-tabs { flex-wrap: nowrap; overflow: hidden; }
.narrow .pf-tab { flex: none; padding: 0 .75rem; font-size: .8125rem; }
.narrow .pf-meters { flex-direction: column; gap: 1.125rem; }
.narrow .mt-rule { display: none; }
.narrow .ur-lessons { margin-left: .5rem; }
.narrow .sl-g { display: none; }

/* The account switch between the parent's and the student's sides. */
/* The tide between accounts. The water is a surface the window's own height,
   driven by homepage.js: it rises from below with its wavy cap (two wave paths,
   the back one lighter) riding above its top edge, covers the window while the
   accounts swap underneath, then sinks away. The front wave's fill is the
   surface's top color, so cap and body read as one body of water. */
.swap { position: absolute; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; visibility: hidden; }
.swap.show { visibility: visible; }
.swap-water { position: absolute; left: 0; right: 0; top: 0; height: 100%; color: #fff; background: linear-gradient(180deg, #0B5BD3 0%, #0B5BD3 7%, #0047B0 45%, #001A66 100%); transform: translateY(110%); will-change: transform; }
.swap-wave { position: absolute; left: 0; width: 100%; overflow: visible; }
.swap-wave .wv-front { fill: #0B5BD3; }
.swap-wave .wv-back { fill: #6FB2F2; opacity: .55; }
.swap-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem; }
.swap-av { width: 4.75rem; height: 4.75rem; margin-bottom: .375rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--from), var(--to)); border: .1875rem solid var(--line); color: var(--acc); font-size: 1.875rem; font-weight: 700; transform: scale(.6); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; }
.swap.covered .swap-av { transform: none; opacity: 1; }
.swap b { font-size: 1.5rem; font-weight: 700; }
.swap small { font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .72); }
/* The logo splash between loops, on the same water. */
.swap-logo { display: none; width: min(56%, 18.75rem); height: auto; transform: scale(.94); opacity: 0; transition: transform .9s var(--ease), opacity .8s ease; }
.swap.splash .swap-logo { display: block; }
.swap.splash .swap-av, .swap.splash b, .swap.splash small { display: none; }
.swap.splash.logo .swap-logo { transform: none; opacity: 1; }

/* The parent's pointer (a touch dot on phones), with a ring on each tap. */
.cursor { position: absolute; left: 0; top: 0; z-index: 8; width: 0; height: 0; pointer-events: none; opacity: 0; transition: transform .42s cubic-bezier(.5, 0, .2, 1), opacity .2s; }
.cursor.show { opacity: 1; }
.cursor::before { content: ''; position: absolute; left: -.125rem; top: -.125rem; width: 1.5rem; height: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2v17.2l4.6-4.3 3.1 6.8 3.1-1.4-3.1-6.7 6.3-.2z' fill='%23fff' stroke='%23001A66' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain; filter: drop-shadow(0 .1875rem .3125rem rgba(0, 26, 102, .35)); }
.cursor::after { content: ''; position: absolute; left: -1.25rem; top: -1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 217, 90, .6); opacity: 0; transform: scale(.3); }
.cursor.down::after { animation: tapRing .5s ease-out; }
.narrow .cursor::before { left: -1rem; top: -1rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, .5); border: .125rem solid rgba(0, 26, 102, .45); filter: none; }
@keyframes tapRing { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }

/* Resets (and reduced motion's fast run) land instantly, with nothing animating. */
.demo.ff *, .demo.ff *::before, .demo.ff *::after { transition: none !important; animation: none !important; }

/* ── Sections ───────────────────────────────────────────── */
/* Each section slides up over the last on a rounded edge, in its own subject gradient. */
.sec {
  position: relative;
  margin-top: -2.75rem;
  border-radius: 2.75rem 2.75rem 0 0;
  padding: clamp(7rem, 12vw, 10.625rem) 0 clamp(8rem, 13vw, 11.875rem);
}
.sec-ela    { --accent: #9E4C3E; background: linear-gradient(180deg, #FFF9F3 0%, #FFDCDC 100%); }
.sec-sci    { --accent: #286E74; background: linear-gradient(180deg, #F5FFEF 0%, #DCFFEA 100%); }
.sec-soc    { --accent: #804775; background: linear-gradient(180deg, #FDF2FF 0%, #FFCAFC 100%); }
.sec-math   { --accent: #2551A1; background: linear-gradient(180deg, #F2FBFF 0%, #DCF0FF 100%); }
#interests  { z-index: 2; }
#starlo     { z-index: 2; }
#curriculum { z-index: 3; overflow: hidden; }
#activities { z-index: 4; }
#progress   { z-index: 5; }
#schedule   { z-index: 6; }
#mobile     { z-index: 7; overflow: hidden; }
#faq        { z-index: 7; }
#join       { z-index: 8; padding-bottom: 2.5rem; }
.sec-night  {
  --accent: var(--sky-light); color: #fff;
  background:
    radial-gradient(56.25rem 32.5rem at 50% 0%, rgba(0, 81, 194, .55), transparent 70%),
    linear-gradient(180deg, #0051C2 0%, #001A66 62%, #001A66 100%);
}
@media (max-width: 640px) { .sec { margin-top: -28px; border-radius: 28px 28px 0 0; } }
/* Yellow focus rings vanish on the pale sections — use navy there. */
.sec:not(.sec-night) :focus-visible { outline-color: var(--night); }

/* Small round avatar used by the parent widgets. */
.av { flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: linear-gradient(160deg, #FDF2FF, #FFCAFC); border: .09375rem solid #D8B0E8; color: #804775; font-weight: 700; font-size: .8125rem; display: grid; place-items: center; }

/* ── 3. Interests: one board, any world ─────────────────── */
.themer { margin-top: clamp(3.5rem, 6vw, 5.25rem); padding: 0 1rem; display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 3vw, 2.125rem); }
.stage {
  --ar: 16 / 9;
  position: relative; flex: none;
  container-type: inline-size;
  width: min(60rem, 100%, calc((100svh - 14.375rem) * 16 / 9));
  aspect-ratio: var(--ar);
  border-radius: 2rem;
  box-shadow: 0 3.125rem 5.625rem -3.125rem rgba(120, 50, 40, .5);
  isolation: isolate;
}
.world { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; --w-ink: var(--ink); --badge: #286E74; --badge-ink: #fff; }
.w-dino   { background: linear-gradient(160deg, #F5FFEF 0%, #BFE8CB 100%); box-shadow: inset 0 0 0 .09375rem #B0DFC0; }
.w-soccer { --badge: #2551A1; background: linear-gradient(160deg, #F2FBFF 0%, #C4E1F8 100%); box-shadow: inset 0 0 0 .09375rem #B8D4F0; }
.w-space {
  --w-ink: #fff; --badge: var(--yellow); --badge-ink: var(--night);
  background:
    radial-gradient(.1rem .1rem at 8% 14%, #fff 60%, transparent 62%),
    radial-gradient(.075rem .075rem at 22% 70%, #fff 60%, transparent 62%),
    radial-gradient(.1125rem .1125rem at 38% 30%, #FFD95A 60%, transparent 62%),
    radial-gradient(.075rem .075rem at 52% 88%, #fff 60%, transparent 62%),
    radial-gradient(.1rem .1rem at 64% 12%, #fff 60%, transparent 62%),
    radial-gradient(.075rem .075rem at 78% 44%, #A9D1F5 60%, transparent 62%),
    radial-gradient(.1125rem .1125rem at 91% 76%, #fff 60%, transparent 62%),
    radial-gradient(.075rem .075rem at 95% 22%, #fff 60%, transparent 62%),
    radial-gradient(80% 70% at 70% 0%, rgba(0, 81, 194, .8), transparent 70%),
    linear-gradient(160deg, #0A3FB4 0%, #001A66 100%);
}
.b-prompt { position: absolute; left: 6%; right: 6%; top: 7%; margin: 0; text-align: center; font-weight: 600; font-size: 2.1cqw; line-height: 1.35; color: var(--w-ink); }
.b-vessel { position: absolute; width: 19cqw; height: 19cqw; transform: translate(-50%, -50%); }
.b-vessel img { width: 100%; height: 100%; object-fit: contain; }
.b-badge { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 35%); min-width: 4.4cqw; padding: .5cqw 1.3cqw; border-radius: 62.4375rem; background: var(--badge); color: var(--badge-ink); font-weight: 700; font-size: 1.8cqw; line-height: 1.3; text-align: center; transition: transform .3s var(--ease); }
.b-badge.bump { transform: translate(-50%, 35%) scale(1.22); }
.b-tok { position: absolute; width: 6.4cqw; height: 6.4cqw; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 .5cqw .6cqw rgba(30, 40, 20, .22)); }
.b-tok img { width: 100%; height: 100%; object-fit: contain; }
.b-note { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; padding: 1cqw 1.8cqw; border-radius: 1.2cqw; background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; font-size: 1.7cqw; opacity: 0; }

.wipe { position: absolute; z-index: 5; top: 0; bottom: 0; left: 100%; width: 0; pointer-events: none; opacity: 0; }
.wipe::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: .125rem; background: #fff; box-shadow: 0 0 1.5rem rgba(255, 255, 255, .8); }
.wipe span { position: absolute; top: 50%; left: 0; width: 2.5rem; height: 2.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--yellow); box-shadow: 0 .375rem 1.25rem rgba(0, 26, 102, .35); }
.wipe span::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--night); font-size: 1.125rem; }

/* In the split (desktop) the board sits in a column, so it uses the tall layout
   there as well as on phones; tablets, stacked full width, keep the wide one. */
.split .themer { margin-top: 0; padding: 0; }
@media (min-width: 901px) {
  .stage { width: min(100%, 32.5rem, calc((100svh - 13.75rem) * .8)); }
}
@media (max-width: 900px) {
  .split .themer { margin-top: clamp(3.5rem, 6vw, 5.25rem); }
}
@media (max-width: 700px), (min-width: 901px) {
  .stage { --ar: 4 / 5; border-radius: 1.625rem; }
}
@media (max-width: 700px) {
  .stage { width: min(100%, calc((100svh - 16.25rem) * .8)); }
}
@media (max-width: 700px), (min-width: 901px) {
  .b-prompt { font-size: 4.4cqw; left: 8%; right: 8%; top: 6%; }
  .b-vessel { width: 34cqw; height: 34cqw; }
  .b-badge { font-size: 3.6cqw; min-width: 8cqw; padding: .8cqw 2.4cqw; }
  .b-tok { width: 11cqw; height: 11cqw; }
  .b-note { font-size: 3.6cqw; padding: 2cqw 3cqw; border-radius: 2.4cqw; white-space: normal; width: 80%; text-align: center; }
}

/* ── 4. Curriculum: standards drifting past ─────────────── */
.lanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; overflow: hidden; }
.lane { min-width: 0; }
#lanesBottom { margin-top: clamp(3.5rem, 6vw, 5rem); }
.lane-x { width: max-content; margin-left: -16.25rem; will-change: transform; }
/* Spacing is a margin, not a gap, so the doubled set loops seamlessly at -50%. */
.lane-in { display: flex; width: max-content; animation: drift var(--dur) linear infinite; }
.lane-in .std { margin-right: .875rem; }
.lane.rev .lane-in { animation-direction: reverse; }
.lanes.paused .lane-in { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
.std {
  display: inline-flex; align-items: baseline; gap: .625rem; flex: none;
  padding: .7em 1.15em; border-radius: 62.4375rem;
  background: linear-gradient(160deg, var(--from), var(--to));
  border: .09375rem solid var(--line);
  font-size: .9375rem; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.std b { color: var(--acc); font-weight: 700; font-size: .84em; letter-spacing: .02em; }
.lane.front .std { font-size: 1.0625rem; box-shadow: 0 1rem 1.875rem -1.375rem rgba(20, 80, 60, .5); }
.lane.mid { opacity: .9; }
.lane.back { opacity: .4; }
.lane.back .std { font-size: .8125rem; }
@media (max-width: 640px) {
  .std { font-size: .8125rem; }
  .lane.front .std { font-size: .875rem; }
  .lane.back .std { font-size: .75rem; }
}

@keyframes rowIn { from { opacity: 0; transform: translateY(.5rem); } }

/* ── 5. Activity rows ───────────────────────────────────── */
/* Each card is one real block from the app (app/src/components/activity/
   blocks/*), drawn at the app's 1× token sizes inside a phone-width panel
   (410dp) and zoomed down to the card, so text and board keep the app's
   proportions. Colors are the app's: the activity's card-slot gradient and
   accent, accent tints (tint(accent, a) = color-mix below), and the answer
   greens/grays from tokens.ts. The app sets blocks in the system font. */
/* Bottom padding clears the cards' drop shadow (it reaches ~48px below a card);
   the negative margin gives that room back so the section's spacing is unchanged. */
/* The cards keep px (homepage.js draws their boards in px) and zoom by --k instead. */
.rows { margin: clamp(4rem, 7vw, 6rem) 0 -1.75rem; display: grid; gap: 1.375rem; overflow: hidden; padding: .75rem 0 3.5rem; }
.track { display: flex; gap: 1.375rem; width: max-content; will-change: transform; }
.w {
  --sys: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --app-mono: ui-monospace, Menlo, Consolas, monospace;
  --a04: color-mix(in srgb, var(--acc) 4%, transparent);
  --a06: color-mix(in srgb, var(--acc) 6%, transparent);
  --a14: color-mix(in srgb, var(--acc) 14%, transparent);
  --a15: color-mix(in srgb, var(--acc) 15%, transparent);
  --a25: color-mix(in srgb, var(--acc) 25%, transparent);
  --a30: color-mix(in srgb, var(--acc) 30%, transparent);
  --a35: color-mix(in srgb, var(--acc) 35%, transparent);
  --a60: color-mix(in srgb, var(--acc) 60%, transparent);
  --a75: color-mix(in srgb, var(--acc) 75%, transparent);
  --a85: color-mix(in srgb, var(--acc) 85%, transparent);
  --opt-shadow: 0 0 4px rgba(0, 0, 0, .14);
  flex: none; width: 300px; height: 320px; overflow: hidden; zoom: var(--k);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--from), var(--to));
  border: 1.5px solid var(--line);
  box-shadow: 0 30px 50px -32px rgba(44, 28, 128, .55);
  font-family: var(--sys); color: #1F2933;
}
.w.wide { width: 380px; }
/* Phones: the whole card (board and all) zooms down so two-plus fit across. */
@media (max-width: 640px) {
  .rows, .track { gap: 12px; }
  .w { zoom: .6; }
}
@media (max-width: 380px) {
  .w { zoom: .54; }
}
.w-in {
  zoom: .7317; width: 410px; height: 437px;
  padding: 22px 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.w.wide .w-in { width: 519px; }
/* BlockPrompt: body × 1.25, centered, soft gray. */
.w-q { margin: 0; text-align: center; font-size: 20px; line-height: 27.5px; font-weight: 400; color: #545454; }
/* BlockStage: the board takes the height left and centers in it. */
.w-b { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.w svg { display: block; overflow: visible; }
.w svg text { font-family: var(--sys); }
.w img { display: block; }

/* SelectableSurface (neutral rest) — match cards, sequence rows. */
.w .opt{
  position: relative; display: flex; align-items: center;
  min-height: 56px; padding: 12px 16px;
  border: 1px solid #8C8C8C; border-radius: 8px; background: #fff; box-shadow: var(--opt-shadow);
  font-size: 16px; line-height: 22px; color: #545454;
}
.w .opt.c { justify-content: center; text-align: center; }
.w .opt.ok { border: 2px solid #28A745; background: #D4EDDA; color: #155724; box-shadow: none; }
/* JudgedBadge: ✓ just outside the top-right corner. */
.w .jb { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: #28A745; display: grid; place-items: center; }
.w .jb svg { width: 14px; height: 14px; color: #fff; }
/* A sort/venn/fill/number-line card: white pill, accent border and ink. */
.w .pl{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 8px 12px;
  border: 2px solid var(--acc); border-radius: 999px; background: #fff; box-shadow: var(--opt-shadow);
  color: var(--acc); font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap;
}
.w .pl.lite { font-size: 16px; font-weight: 400; }
.w .pl.used { opacity: .35; box-shadow: none; }
.w .pls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.w .cbtn { display: grid; place-items: center; min-height: 50px; width: 84%; border-radius: 999px; background: var(--acc); color: #fff; font-size: 17px; font-weight: 700; }
.w .ask { margin: 0; text-align: center; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--acc); }
.w .bsub { margin: 0; text-align: center; font-size: 14px; line-height: 18px; color: #52606D; }
.w .note-ok { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 16px; background: #D4EDDA; color: #155724; font-size: 17px; font-weight: 700; }

/* match — two columns of cards. */
.w .mt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; width: 100%; }
/* sequence — one full-width row each. */
.w .rws { display: grid; gap: 8px; width: 100%; }
.w .rws .opt { gap: 12px; }
.w .rws .n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #28A745; color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 700; }

/* sort — dashed tray over accent-headed buckets. */
.w .tray { align-self: stretch; padding: 12px; border: 2px dashed var(--acc); border-radius: 12px; background: var(--a06); display: flex; flex-wrap: wrap; gap: 8px; }
.w .tray.mid { justify-content: center; background: var(--a04); }
.w .bks { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w .bk { border: 2px solid var(--acc); border-radius: 12px; background: var(--a06); min-height: 160px; }
.w .bk b { display: block; padding: 9px 8px; border-radius: 9px 9px 0 0; background: var(--acc); color: #fff; text-align: center; font-size: 17px; line-height: 22px; }
.w .bk div { padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

/* venn-sort */
.w .vn-l { align-self: stretch; display: flex; }
.w .vn-l span { flex: 1; text-align: center; color: var(--acc); font-size: 16px; font-weight: 700; }
.w .vn { position: relative; align-self: stretch; }
.w .vn .pl { position: absolute; transform: translate(-50%, -50%); padding: 8px 6px; min-width: 30px; font-weight: 500; }
.w .vn-tray .pl { padding: 8px 10px; min-width: 36px; font-weight: 500; }

/* fill-blank */
.w .sent { margin: 0; text-align: center; font-size: 20px; line-height: 50px; color: #1F2933; }
.w .blank { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width: 75px; min-height: 44px; padding: 0 8px; border-radius: 8px; border: 2px solid #28A745; background: #D4EDDA; color: #155724; font-weight: 700; line-height: 1; }



/* column-math */
.w .cm { display: grid; grid-template-columns: repeat(4, 58px); justify-items: center; align-items: center; font: 700 32px/1 var(--app-mono); color: #1F2933; }
.w .cm span { height: 58px; display: grid; place-items: center; }
.w .cm .rule { grid-column: 1 / -1; justify-self: stretch; height: 3px; padding: 0; background: #1F2933; margin: 2px -8px 8px; }
.w .cm .box { width: 56px; height: 56px; border: 1px solid #8C8C8C; border-radius: 8px; background: #fff; }
.w .cm .box.on { border: 2.5px solid var(--acc); background: var(--a14); }
.w .kp { align-self: stretch; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 12px; }
.w .kp span { display: grid; place-items: center; height: 50px; border: 1px solid #D9E2EC; border-radius: 12px; background: #fff; font: 400 22px/1 var(--app-mono); color: #1F2933; }


/* custom-array */
.w .ar { display: grid; grid-template-columns: repeat(6, 52px); gap: 5px; }
.w .ar i { width: 52px; height: 52px; border-radius: 13px; border: 1.5px solid var(--a35); background: var(--a06); }
.w .ar img { width: 52px; height: 52px; padding: 5px; object-fit: contain; }


/* custom-stack, picture graph */
.w .key { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #1F2933; }
.w .key img { width: 28px; height: 28px; }
.w .stk { align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.w .col { height: 150px; border: 1.5px solid var(--a30); border-radius: 10px; background: var(--a04); display: flex; flex-direction: column-reverse; align-items: center; padding: 6px 0; }
.w .col img { width: 34px; height: 34px; margin-top: -6px; }
.w .stk .base { display: block; height: 3px; margin: 4px 0 6px; border-radius: 2px; background: var(--acc); }
.w .stk b { display: block; font-size: 14px; line-height: 18px; }
.w .stk small { display: block; font-size: 14px; line-height: 20px; color: #52606D; }

/* custom-remainder */
.w .rm-v { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; }
.w .rm-v > div { display: flex; flex-direction: column; align-items: center; }
.w .nest { position: relative; width: 104px; height: 82px; }
.w .nest img { width: 100%; height: 100%; object-fit: contain; }
.w .nb { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 16px; font-weight: 700; }
.w .eggs { display: flex; gap: 4px; justify-content: center; }
.w .eggs img { width: 42px; height: 42px; object-fit: contain; }
.w .rm-v .eggs { margin-top: 14px; }
.w .lo { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 12px; height: 64px; border: 2px solid #8C8C8C; border-radius: 16px; background: var(--a04); color: #52606D; font-size: 16px; font-weight: 700; }
.w .lo .nb { position: static; transform: none; }

/* number line + grid boards: an SVG with tokens laid over it */
.w .hop { position: relative; align-self: stretch; }
.w .hop img { position: absolute; width: 40px; height: 44px; object-fit: contain; transform: translateX(-50%); }

/* clock-set */
.w .tg { display: flex; gap: 12px; }
.w .tg span { display: grid; place-items: center; height: 46px; padding: 0 18px; border-radius: 999px; border: 2.5px solid var(--acc); background: #fff; color: var(--acc); font-size: 17px; font-weight: 700; }
.w .tg span.on { background: var(--acc); color: #fff; }
.w .ck { display: flex; align-items: center; gap: 14px; }
.w .nud { display: grid; place-items: center; align-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--a15); color: var(--acc); font-size: 20px; line-height: 1; font-weight: 700; }
.w .nud small { font-size: 13px; font-weight: 400; }

/* shape-sort */
.w .sh { display: grid; grid-template-columns: repeat(3, 100px); gap: 22px 26px; }
.w .sh svg { width: 100px; height: 100px; }
.w .sh polygon { stroke: var(--acc); fill: color-mix(in srgb, var(--acc) 18%, transparent); stroke-width: 3.2; stroke-linejoin: round; }
.w .sh .found polygon { stroke: #28A745; fill: #D4EDDA; }
.w .sh .faded { opacity: .3; }

/* ── The web app's game blocks (public/js/blocks/*, styled in public/styles.css).
   Same card, drawn in that renderer's own look: a Libre Baskerville prompt,
   Montserrat tiles and its navy / amber / green game palette, at its phone
   layout (360px panel) zoomed to the card. Values mirror styles.css. */
.w.v { font-family: 'Montserrat', var(--sys); }
.w.v .w-in { zoom: .8333; width: 360px; height: 384px; padding: 18px 20px; gap: 0; }
.w.v.wide .w-in { width: 456px; }
.w.v .w-b { justify-content: flex-start; gap: 0; }
.w .vq { margin: 0 0 4px; font: 700 15px/1.6 'Libre Baskerville', Georgia, serif; color: #545454; }
.w.v .rbtn { align-self: center; margin-top: 10px; padding: 12px 20px; background: #fff; border: 1px solid #C2C2C2; border-radius: 8px; font: 400 14.4px 'Libre Baskerville', Georgia, serif; color: #545454; box-shadow: 0 0 4px rgba(0, 0, 0, .14); white-space: nowrap; }
.w.v .help { margin: 6px 0; text-align: center; font-size: 12.8px; color: #6a1b9a; }
.w.v .vask { margin: 8px 0; text-align: center; font-size: 16.8px; line-height: 1.35; color: #000; }
.w.v .vask b { color: #2551A1; font-size: 19.2px; font-weight: 700; }
/* word-search */
.w .ws-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 10px; }
.w .ws-words span { background: #e8eaf6; border: 2px solid #7986cb; border-radius: 10px; padding: 3px 10px; font-weight: 700; font-size: 13.6px; color: #283593; }
.w .ws-words span.f { text-decoration: line-through; opacity: .5; background: #c8e6c9; border-color: #66bb6a; color: #1b5e20; }
.w .ws-grid { display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; }
.w .ws-grid i { height: 34px; display: grid; place-items: center; border: 1px solid #c5cae9; border-radius: 6px; background: #fff; font-style: normal; font-weight: 800; font-size: 12.5px; color: #1a237e; }
.w .ws-grid i.f { background: #c8e6c9; border-color: #66bb6a; color: #1b5e20; }
.w .ws-grid i.a { background: #ffe082; box-shadow: inset 0 0 0 2px #ffb300; }
/* word-ladder + word-detective (they share the letter keys) */
.w .wl-rung { display: flex; gap: 4px; justify-content: center; width: 280px; padding: 4px 0; border-left: 6px solid #b26a00; border-right: 6px solid #b26a00; }
.w .lt { width: 42px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #b0bec5; border-radius: 8px; background: #fff; font-style: normal; font-weight: 700; font-size: 19.2px; color: #1a237e; }
.w .lt.done { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.w .lt.act { border-color: #2551A1; }
.w .lt.sel { border-color: #ffb300; box-shadow: 0 0 0 3px #ffe082; }
.w .lt.g { background: #66bb6a; border-color: #388e3c; color: #fff; }
.w .lt.y { background: #ffd54f; border-color: #ffb300; color: #7a5800; }
.w .lt.x { background: #cfd8dc; border-color: #90a4ae; color: #546e7a; }
.w .wd .lt { width: 44px; height: 46px; font-size: 20px; }
.w .clue { align-self: stretch; margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: #fff8e1; font-weight: 600; font-size: 15.2px; color: #1a237e; text-align: center; }
.w .clue small { display: block; font-size: 12.8px; color: #90a4ae; }
.w .keys { margin: 8px 0 4px; }
.w .keys div { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.w .keys i { display: grid; place-items: center; min-width: 26px; height: 38px; padding: 0 4px; border: 2px solid #2551A1; border-radius: 8px; background: #fff; font-style: normal; font-weight: 700; font-size: 13.6px; color: #2551A1; box-shadow: 0 2px 0 rgba(37, 81, 161, .25); }
.w .keys i.g { background: #66bb6a; border-color: #388e3c; color: #fff; }
.w .keys i.y { background: #ffd54f; border-color: #ffb300; color: #7a5800; }
.w .keys i.x { background: #cfd8dc; border-color: #90a4ae; color: #78909c; opacity: .7; }
.w .wd-rows { display: grid; gap: 4px; margin: 8px 0; }
.w .wd-rows div { display: flex; gap: 4px; }
/* memory-match */
.w .mm { align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 64px; gap: 10px; margin-top: 12px; }
.w .mm span { display: grid; place-items: center; height: 64px; min-width: 0; overflow: hidden; padding: 6px; line-height: 1.2; border: 2px solid #2551A1; border-radius: 14px; background: #2551A1; color: #fff; font-weight: 600; font-size: 25.6px; text-align: center; }
.w .mm span.up { background: #fff; color: #2551A1; font-size: 12.8px; }
.w .mm span.m { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; font-size: 12.8px; }
/* trait-board */
.w .tb-sus { align-self: stretch; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.w .tb-sus span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 2px solid #2551A1; border-radius: 14px; background: #fff; }
.w .tb-sus i { font-style: normal; font-size: 32px; line-height: 1.1; }
.w .tb-sus b { font-size: 12.8px; color: #1a237e; text-align: center; }
.w .tb-sus .out { opacity: .35; text-decoration: line-through; border-style: dashed; }
.w .tb-help { margin: 4px 0; text-align: center; font-size: 13.6px; color: #4a148c; }
.w .tb-clues { align-self: stretch; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.w .tb-clues span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 2px solid #6a1b9a; border-radius: 12px; background: #f3e5f5; color: #4a148c; font-weight: 700; font-size: 14.4px; }
.w .tb-clues em { font-style: normal; border-radius: 8px; padding: 2px 8px; font-size: 12.8px; }
.w .tb-clues .yes { background: #c8e6c9; color: #1b5e20; }
.w .tb-clues .no { background: #ffcdd2; color: #b71c1c; }
/* money-till */
.w .bank, .w .till { align-self: stretch; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border-radius: 14px; }
.w .bank { gap: 10px; margin: 6px 0 10px; padding: 10px; background: #e8f5e9; border: 2px dashed #66bb6a; }
.w .till { gap: 6px; min-height: 64px; padding: 8px; background: #fff8e1; border: 2px solid #ffb300; }
.w .till-l { margin-bottom: 4px; text-align: center; font-weight: 700; font-size: 13.6px; color: #1a237e; }
.w .till-l span { font-weight: 600; font-size: 11.5px; color: #6a1b9a; }
.w .coin { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; }
.w .coin.p { width: 42px; height: 42px; background: #d7a086; border: 3px solid #a9714f; color: #5d3421; font-size: 11.5px; }
.w .coin.n { width: 46px; height: 46px; background: #e0e0e0; border: 3px solid #9e9e9e; color: #424242; font-size: 12.5px; }
.w .coin.d { width: 38px; height: 38px; background: #eceff1; border: 3px solid #90a4ae; color: #37474f; font-size: 10.9px; }
.w .coin.q { width: 52px; height: 52px; background: #e8eaf6; border: 3px solid #7986cb; color: #283593; font-size: 13.1px; }
/* bar-graph */
.w .bg-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; }
.w .bg-leg span { background: #e8eaf6; border: 2px solid #7986cb; border-radius: 10px; padding: 4px 10px; font-weight: 700; font-size: 13.6px; color: #283593; }
.w .bg { display: flex; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.w .bg-ax { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 26px; font-size: 10.4px; font-weight: 700; color: #90a4ae; text-align: right; }
.w .bg-col { display: flex; flex-direction: column; gap: 2px; width: 58px; }
.w .bg-col i { display: block; height: 14px; border: 1px solid #cfd8dc; border-radius: 4px; background: #fafafa; }
.w .bg-col i.on { background: #42a5f5; border-color: #1976d2; }
.w .bg-col b { height: 26px; padding-top: 4px; text-align: center; font-size: 19.2px; font-weight: 400; line-height: 1; }
/* syllable-splitter */
.w .syl { display: flex; justify-content: center; align-items: center; gap: 2px; margin: 12px 0; }
.w .syl i { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 44px; background: #fff; border: 2px solid #2551A1; border-radius: 10px; font-style: normal; font-weight: 800; font-size: 20px; color: #1a237e; }
.w .syl u { width: 18px; height: 44px; display: grid; place-items: center; border-radius: 6px; text-decoration: none; color: #b0bec5; font-size: 20.8px; }
.w .syl u.cut { background: #fff3c4; font-size: 15px; }
/* contraction */
.w .ct { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 10px 0; }
.w .ct i { width: 42px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #2551A1; border-radius: 8px; background: #fff; font-style: normal; font-weight: 700; font-size: 20px; color: #1a237e; }
.w .ct i.gh { opacity: .35; text-decoration: line-through; border-style: dashed; border-color: #e53935; color: #c62828; }
.w .ct s { margin: 0 6px; text-decoration: none; font-weight: 700; font-size: 20.8px; color: #e65100; }
.w .ct-res { margin: 6px 0; text-align: center; font-weight: 700; font-size: 24px; color: #1a237e; }
.w .ct-res span { background: #e8f5e9; border-radius: 10px; padding: 4px 14px; }
.w .ct-res b { color: #e65100; font-size: 27px; }

/* ── 5b. The cards at play ──────────────────────────────── */
/* A scripted student works each card (homepage.js); the block answers each
   step in its own states. Motion uses the individual
   `scale` / `translate` properties so it composes with any centering transform. */
.w-in { position: relative; }
.w-b { transition: opacity .35s; }
.w-b.fade { opacity: 0; }
.w .pop { animation: pop .32s var(--ease); }
@keyframes pop { from { scale: .55; opacity: 0; } }
/* `flp`, not `fl`: `.fl` is the schedule builder's field-label row (flex, space-between). */
.w .flp { animation: flip .32s ease; }
@keyframes flip { 50% { scale: 0 1; } }
.w .hid { visibility: hidden; }
.w .pl { transition: translate .2s, scale .2s, box-shadow .2s, opacity .25s; }
.w .pl.sel { translate: 0 -4px; scale: 1.06; box-shadow: 0 8px 16px rgba(0, 0, 0, .18); }
.w .opt { transition: background-color .2s, border-color .2s, color .2s; }
.w .opt.sel { border: 2px solid var(--acc); background: var(--a14); color: var(--acc); font-weight: 700; box-shadow: none; }
.w .cbtn { transition: background-color .25s; }
.w .cbtn.off { background: color-mix(in srgb, var(--acc) 50%, transparent); }
.w .ask.pt { font-size: 15px; line-height: 20px; }
/* fraction-shader */
.w .pie path { fill: var(--a06); transition: fill .25s; }
.w .pie path.on { fill: var(--a75); }
.w .pie line { stroke: var(--acc); stroke-width: 2; transition: stroke .25s; }
.w .pie line.lw { stroke: #fff; }
.w .pie circle { fill: none; stroke: var(--acc); stroke-width: 3; transition: stroke .25s; }
.w .pie.ok path.on { fill: rgba(30, 126, 52, .8); }
.w .pie.ok line:not(.lw), .w .pie.ok circle { stroke: #28A745; }
/* sort */
.w .tray { min-height: 70px; }
.w .bk { transition: background-color .2s; }
.w .bk.arm { background: color-mix(in srgb, var(--acc) 9%, transparent); }
/* fill-blank: idle (empty) and a miss */
.w .blank.e { border: 2px dashed var(--a60); background: color-mix(in srgb, var(--acc) 5%, transparent); }
.w .blank.wr { border-color: #DC3545; background: #F8D7DA; color: #721C24; }
/* shape-sort */
.w .sh svg { transition: opacity .3s; }
.w .sh polygon { transition: stroke .2s, fill .2s; }
.w .sh .wrong polygon { stroke: #DC3545; fill: #F8D7DA; }
/* venn-sort */
.w .vr { position: absolute; top: 0; bottom: 0; }
.w .vn-tray { min-height: 70px; }
/* custom-array */
.w .ar i.on { border: 0; background: transparent; }
.w .ar i img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
/* clock-set */
.w .face .rim { fill: var(--a06); stroke: var(--acc); stroke-width: 3.5; transition: stroke .3s; }
.w .face.ok .rim { stroke: #28A745; }
.w .face g { transform-origin: 95px 95px; transition: transform .8s var(--ease); }
.w .tg span { transition: background-color .2s, color .2s; }
/* column-math */
.w .cm span.cr { height: 44px; }
.w .cm .cy { display: grid; place-items: center; width: 40px; height: 36px; border: 2px dashed var(--acc); border-radius: 8px; background: var(--a14); font: 700 20px/1 var(--app-mono); font-style: normal; color: var(--acc); visibility: hidden; }
.w .cm .cy.show { visibility: visible; }
.w .cm .box { display: grid; place-items: center; font: 700 30px/1 var(--app-mono); }
.w .cm .box.ok { border: 2px solid #28A745; background: #D4EDDA; color: #155724; }
/* number-line */
.w .nl .mv { position: absolute; min-width: 72px; transform: translateX(-50%); transition: left .55s var(--ease), top .55s var(--ease), translate .2s, scale .2s, box-shadow .2s; }
.w .nl .dot { fill: var(--a35); opacity: 0; transition: opacity .2s; }
.w .nl .dot.show { opacity: 1; }
.w .nl .lead { opacity: 0; transition: opacity .3s; }
.w .nl .lead.show { opacity: 1; }
/* custom-stack */
.w .stk.ok .col { border-color: var(--a60); }
.w .col { transition: border-color .3s; }
/* custom-remainder */
.w .tray-eggs { min-height: 46px; }
.w .eggs img { transition: translate .2s; }
.w .eggs img.sel { translate: 0 -8px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.w .lo-in:empty { display: none; }
.w .lo-in img { width: 34px; height: 34px; }

/* the web app's games */
.w.v.tall .w-in { zoom: .7; width: 429px; height: 457px; padding: 14px 18px; }
.w.v.tall.wide .w-in { width: 543px; }
.w.v .w-b { flex: 0 0 auto; }
/* A short board (memory flip) sits in the middle of the card, not at its top. */
.w.v.mid .w-b { flex: 1; justify-content: center; }
.w.v.mid .mm { margin-top: 0; }
.w.v .rbtn { transition: opacity .2s, background-color .2s; }
.w.v .rbtn.off { background: #e0e0e0; opacity: .27; }
.w .lt.bl { background: #eceff1; color: #b0bec5; }
.w .lt.ed { background: #fff8e1; border-color: #ffb300; }
.w .lt.fill { border-color: #2551A1; }
.w .mm span { transition: background-color .25s, border-color .25s; }
.w .tb-sus span { transition: opacity .25s; }
.w .tb-sus .cul { border-color: #f9a825; background: #fff8e1; }
.w .syl.ok i { background: #c8e6c9; border-color: #66bb6a; }
.w .syl i { transition: background-color .25s, border-color .25s; }
.w .ct i { transition: opacity .25s; }
.w .ws-grid i { transition: background-color .2s; }
.w .ct-res { min-height: 40px; }

/* ── 6. Progress: scores per standard + the portfolio PDF ── */
.prog {
  max-width: 70rem; margin: clamp(4rem, 7vw, 6rem) auto 0; padding: 0 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(3rem, 6vw, 6rem); align-items: center;
}
.prog-who { display: flex; align-items: center; gap: .75rem; }
.prog-who b { font-size: 1.375rem; font-weight: 700; color: var(--blue); }
.db-legend { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin: 1rem 0 1.75rem; font-size: .8125rem; font-weight: 600; color: var(--ink-500); }
.db-legend span { display: inline-flex; align-items: center; gap: .4375rem; }
.db-legend i { flex: none; display: block; }
.lg-pre { width: .6875rem; height: .6875rem; border-radius: 50%; border: .125rem solid var(--ink-500); background: #fff; }
.lg-fin { width: .75rem; height: .75rem; border-radius: 50%; background: var(--ink-500); }
.lg-pass { width: .125rem; height: .75rem; border-radius: 1px; background: rgba(31, 41, 51, .3); }

.dumbs { display: grid; gap: 1.5rem; }
.db { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem .875rem; align-items: center; }
.db-name { font-size: .90625rem; line-height: 1.4; font-weight: 600; color: var(--ink); }
.db-code { margin-right: .625rem; font-size: .78125rem; font-weight: 700; letter-spacing: .02em; }
.db-nums { font-size: .84375rem; font-weight: 600; color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-nums b { color: var(--ink); }
.db-gain { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5625rem; border-radius: 62.4375rem; background: var(--ok-bg); color: var(--ok-ink); font-size: .78125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.db-gain svg { width: .8125rem; height: .8125rem; }
.db-plot { grid-column: 1 / -1; position: relative; height: 1.125rem; }
.db-track, .db-bar { position: absolute; top: 50%; height: .5rem; margin-top: -.25rem; border-radius: 6.1875rem; }
.db-track { left: 0; right: 0; background: var(--trk); }
.db-pass { position: absolute; left: 80%; top: 0; bottom: 0; width: .125rem; border-radius: .125rem; background: rgba(31, 41, 51, .18); }
.db-bar { left: var(--pre); width: 0; background: var(--bar); transition: width 1.2s var(--ease); transition-delay: calc(.3s + var(--i) * .12s); }
.db-pre, .db-fin { position: absolute; top: 50%; width: .9375rem; height: .9375rem; margin: -.46875rem 0 0 -.46875rem; border-radius: 50%; }
.db-pre { left: var(--pre); border: .15625rem solid var(--c); background: #EAF4FD; }
.db-fin { left: var(--pre); background: var(--c); box-shadow: 0 0 0 .125rem #fff; transition: left 1.2s var(--ease); transition-delay: calc(.3s + var(--i) * .12s); }
.prog.in .db-bar { width: calc(var(--fin) - var(--pre)); }
.prog.in .db-fin { left: var(--fin); }

@keyframes nudge { 50% { transform: translateY(.1875rem); } }

/* The exported PDF — portfolioHtml.ts in miniature, sized in container units so it scales as one page. */
.pdf-wrap { display: flex; justify-content: center; perspective: 87.5rem; }
.pdf {
  container-type: inline-size;
  width: min(100%, 25.625rem); aspect-ratio: 8.5 / 11;
  padding: 1.875rem 1.875rem 0;
  background: #fff; border-radius: .375rem; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 26, 102, .06), 0 3.125rem 5.625rem -2.875rem rgba(0, 26, 102, .6), 0 1.25rem 2.5rem -1.5rem rgba(0, 26, 102, .3);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  transform-origin: 50% 100%;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.pdf-cover { display: grid; gap: .8cqw; padding-bottom: 2.6cqw; border-bottom: .7cqw solid var(--blue); }
.pdf-eyebrow { font-size: 2cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.pdf-name { font-size: 7cqw; line-height: 1.1; }
.pdf-meta { font-size: 2.3cqw; color: var(--ink-500); }
.pdf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8cqw; margin-top: 3.6cqw; }
.pdf-tiles div { padding: 1.8cqw 2cqw; border: 1px solid var(--ink-200); border-top: .8cqw solid var(--blue); border-radius: 1cqw; }
.pdf-tiles small { display: block; font-size: 1.6cqw; line-height: 1.25; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); min-height: 4cqw; }
.pdf-tiles b { display: block; margin-top: .6cqw; font-size: 5.2cqw; line-height: 1.1; }
.pdf-tiles b.good { color: #1E7B34; }
.pdf-h { margin: 5cqw 0 2cqw; padding-bottom: 1cqw; border-bottom: .4cqw solid var(--blue); font-size: 3.3cqw; font-weight: 700; color: var(--blue); }
.ps-row { display: grid; grid-template-columns: 18cqw minmax(0, 1fr) 9cqw; gap: 2.4cqw; align-items: center; padding: 1.6cqw 0; border-bottom: 1px solid var(--ink-50); }
.ps-n b { display: block; font-size: 2.7cqw; }
.ps-n small { font-size: 1.8cqw; color: var(--ink-500); }
.ps-pairs { display: grid; gap: .8cqw; }
.pair { display: grid; grid-template-columns: 6cqw minmax(0, 1fr) 6.5cqw; gap: 1.2cqw; align-items: center; font-size: 1.9cqw; }
.pair i { font-style: normal; color: var(--ink-500); }
.pair b { text-align: right; }
.trk { height: 1.3cqw; border-radius: 1cqw; background: var(--ink-50); overflow: hidden; }
.trk span { display: block; height: 100%; }
.trk .pre { background: #9FB3C8; }
.trk .fin { background: var(--blue); }
.ps-g { font-size: 3cqw; font-weight: 700; color: #1E7B34; text-align: center; }
.st-row { display: grid; grid-template-columns: 13cqw minmax(0, 1fr) auto auto; gap: 2cqw; align-items: center; padding: 1.4cqw 0; border-bottom: 1px solid var(--ink-50); font-size: 2.1cqw; }
.st-row .code { font-family: var(--mono); font-weight: 700; font-size: 1.9cqw; color: var(--blue); }
.st-row span { line-height: 1.35; }
.st-s { white-space: nowrap; color: var(--ink-500); }
.st-row .gain { padding: .2cqw 1.2cqw; border-radius: .8cqw; background: #E3F4E7; color: #1E7B34; font-weight: 700; white-space: nowrap; }
/* Before the export: no page yet. */
html.js .prog:not(.made) .pdf { opacity: 0; transform: translateY(3rem) rotateX(10deg) scale(.95); }
html.js .pdf .pb { opacity: 0; transform: translateY(.5rem); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(.15s + var(--i) * .09s); }
html.js .prog.made .pdf .pb { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .prog { grid-template-columns: minmax(0, 1fr); }
  .pdf { width: min(100%, 25rem); }
}
@media (max-width: 480px) {
  .prog { padding: 0 1rem; }
  .db { grid-template-columns: minmax(0, 1fr) auto; }
  .db-name { grid-column: 1 / -1; }
  .db-nums { justify-self: start; }
}

/* ── 7. Smart scheduling (GenerateScheduleCard + WeekGrid) ── */
.sched { max-width: 70rem; margin: clamp(4rem, 7vw, 6rem) auto 0; padding: 0 1.5rem; }

.who { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.125rem; font-size: .875rem; }
.who b { font-weight: 700; color: var(--ink); }
.who span:last-child { color: var(--ink-400); font-weight: 500; }
.who span:last-child::before { content: '·'; margin-right: .625rem; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid rgba(0, 81, 194, .14); }
.day { display: flex; flex-direction: column; gap: .625rem; padding: .875rem .5rem 1.375rem; min-height: 18.75rem; border-right: 1px solid rgba(0, 81, 194, .12); }
.day:last-child { border-right: 0; }
.day.off { background: rgba(31, 41, 51, .04); }
.day.today { background: rgba(37, 81, 161, .07); }
.day-h { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin-bottom: .375rem; }
.day-h span { font-size: .71875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }
.day-h b { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.day.today .day-h b { background: var(--blue); color: #fff; }
.lc {
  border-radius: .625rem; padding: .5625rem .5625rem .625rem;
  background: linear-gradient(160deg, var(--from), var(--to));
  border: 1px solid var(--line);
  transition: opacity .6s var(--ease), transform .6s var(--ease), background .4s, border-color .4s;
}
.lc small { display: block; font-size: .65625rem; font-weight: 700; letter-spacing: .07em; color: var(--acc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-top: .1875rem; font-size: .8125rem; line-height: 1.3; font-weight: 600; color: var(--ink); }
.lc em { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; font-style: normal; font-size: .6875rem; font-weight: 700; color: #286E74; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .4s; }
.lc.done { background: var(--ink-50); border-color: var(--ink-200); }
.lc.done small, .lc.done span { color: var(--ink-500); }
.lc.done em { max-height: 1.25rem; opacity: 1; }
html.js .sched .lc { opacity: 0; transform: translateY(.875rem); }
html.js .sched.filled .lc { opacity: 1; transform: none; transition-delay: calc(var(--i) * 80ms); }
/* Phones: the parent's Calendar tab in a phone (WeekGrid's WeekStripView). The
   section ends partway down it: the lower half fades into the section's sky,
   and the next section's rounded edge slides up over what's left. */
.sched-phone { display: none; }
@media (max-width: 760px) {
  #schedule { padding-bottom: 0; }
  .sched { padding: 0 1rem; }
  .sched-cal { display: none; }
  .sched-phone {
    --w: min(18.75rem, calc(100vw - 5rem));
    --tuck: 2.75rem;
    position: relative; display: flex; align-items: flex-start; justify-content: center;
    height: calc(var(--w) * 1.1 + var(--tuck)); overflow: hidden;
  }
  .sched-phone::after { content: ''; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(180deg, rgba(220, 240, 255, 0) 0%, rgba(220, 240, 255, .7) 45%, #DCF0FF 85%); pointer-events: none; }
  .sched-phone .phone { --w: inherit; flex: none; box-shadow: inset 0 0 0 .09375rem #2C3349, 0 1.5rem 2.75rem -1.625rem rgba(0, 30, 100, .3); }
}
@media (max-width: 640px) { .sched-phone { --tuck: 28px; } }
.cp-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 4) calc(var(--u) * 14) 0; }
.cp-head .pp-pill { margin: 0; }
.cp-gear { display: grid; place-items: center; width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 10); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .09375rem rgba(0, 81, 194, .2); color: var(--ink-500); }
.cp-gear svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.cp-nav { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 10); font-size: calc(var(--u) * 13); }
.cp-nav b { font-weight: 700; }
.cp-nav i { display: grid; place-items: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .09375rem rgba(0, 81, 194, .2); color: var(--blue); }
.cp-nav svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.cp-strip { flex: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 calc(var(--u) * 12); border: 1px solid rgba(0, 81, 194, .16); border-radius: calc(var(--u) * 10); overflow: hidden; }
.cp-d { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 7) 0 calc(var(--u) * 6); border-right: 1px solid rgba(0, 81, 194, .16); }
.cp-d:last-child { border-right: 0; }
.cp-d.off { background: rgba(31, 41, 51, .04); }
.cp-d small { font-size: calc(var(--u) * 9.5); font-weight: 700; color: var(--ink-400); }
.cp-d b { font-size: calc(var(--u) * 12.5); font-weight: 500; }
.cp-d.sel b { font-weight: 700; }
.cp-d.sel { background: var(--blue); color: #fff; }
.cp-d.sel small { color: #fff; }
.cp-dots { display: flex; gap: calc(var(--u) * 2); height: calc(var(--u) * 4); }
.cp-dots i { width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: var(--blue); }
.cp-d.sel .cp-dots i { background: #fff; }
.cp-day { flex: none; margin: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 8); font-size: calc(var(--u) * 10.5); font-weight: 700; letter-spacing: .05em; color: var(--ink-500); }
.cp-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); overflow: hidden; }
.cp-lc { padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: linear-gradient(160deg, var(--from), var(--to)); border: 1px solid var(--line); }
.cp-lc small { display: block; font-size: calc(var(--u) * 9.5); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--acc); }
.cp-lc span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 12.5); line-height: 1.3; font-weight: 600; }

/* ── 8. Mobile: two phones, one account ─────────────────── */
.phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(.875rem, 5vw, 4.5rem); margin-top: clamp(4rem, 7vw, 6rem); padding: 0 1rem; }
.phone {
  --w: min(18.75rem, calc((100vw - 2.875rem) / 2));
  flex: none; width: var(--w); aspect-ratio: 300 / 624;
  padding: calc(var(--w) * .035);
  border-radius: calc(var(--w) * .16);
  background: #10131F;
  box-shadow: inset 0 0 0 .09375rem #2C3349, 0 3.75rem 6.25rem -3.125rem rgba(20, 70, 60, .5), 0 1.5rem 2.75rem -1.625rem rgba(10, 50, 40, .35);
}
.phone + .phone { margin-top: clamp(2.25rem, 7vw, 6rem); }
/* Everything on a screen is sized in --u: 1/280 of the screen's width. */
.screen { --u: calc(100cqw / 280); position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; border-radius: calc(var(--w) * .125); }
.sbar { flex: none; position: relative; height: calc(var(--u) * 46); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 30); font-size: calc(var(--u) * 13.5); }
.sbar::after { content: ''; position: absolute; left: 50%; top: calc(var(--u) * 11); width: calc(var(--u) * 84); height: calc(var(--u) * 24); border-radius: 62.4375rem; background: #000; transform: translateX(-50%); }
.sbar b { font-weight: 600; }
.sbar-i {
  width: calc(var(--u) * 60); height: calc(var(--u) * 12); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M30 11.6 33 8.2a4.6 4.6 0 0 0-6 0zM24.2 5.6l1.5 1.6a6.2 6.2 0 0 1 8.6 0l1.5-1.6a8.4 8.4 0 0 0-11.6 0zM21.4 2.6 23 4.2a10.4 10.4 0 0 1 14 0l1.6-1.6a12.6 12.6 0 0 0-17.2 0z'/%3E%3Crect x='42.5' y='1' width='14' height='10' rx='3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Crect x='44.3' y='2.8' width='10.4' height='6.4' rx='1.6'/%3E%3Crect x='57.6' y='4' width='1.6' height='4' rx='.8'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='1'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='1'/%3E%3Cpath d='M30 11.6 33 8.2a4.6 4.6 0 0 0-6 0zM24.2 5.6l1.5 1.6a6.2 6.2 0 0 1 8.6 0l1.5-1.6a8.4 8.4 0 0 0-11.6 0zM21.4 2.6 23 4.2a10.4 10.4 0 0 1 14 0l1.6-1.6a12.6 12.6 0 0 0-17.2 0z'/%3E%3Crect x='42.5' y='1' width='14' height='10' rx='3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Crect x='44.3' y='2.8' width='10.4' height='6.4' rx='1.6'/%3E%3Crect x='57.6' y='4' width='1.6' height='4' rx='.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The child's phone: the chat, finishing a lesson. */
.sc-kid { background: linear-gradient(180deg, #0051C2 0%, #001A66 100%); color: var(--chat-ink); }
.sc-kid .sbar { color: #fff; }
.pk-head { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 4) calc(var(--u) * 16) calc(var(--u) * 12) calc(var(--u) * 10); border-bottom: 1px solid rgba(184, 212, 240, .14); }
.pk-head svg { flex: none; width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: #fff; }
.pk-head span { min-width: 0; display: grid; gap: calc(var(--u) * 1); }
.pk-head small { font-size: calc(var(--u) * 10.5); font-weight: 500; color: rgba(255, 255, 255, .55); }
.pk-head b { font-size: calc(var(--u) * 12.5); font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-log { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(transparent 0, #000 calc(var(--u) * 30)); mask-image: linear-gradient(transparent 0, #000 calc(var(--u) * 30)); }
.pk-col { padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 4); }
.pm { margin: 0 0 calc(var(--u) * 12); font-size: calc(var(--u) * 13); line-height: 1.5; animation: msgIn .5s var(--ease) both; }
.pm b { color: #fff; font-weight: 600; }
.pm h4 { margin: 0 0 calc(var(--u) * 2); font-family: var(--serif); font-size: calc(var(--u) * 16.5); line-height: 1.3; color: #fff; }
.pm.kid { width: max-content; margin-left: auto; padding: calc(var(--u) * 6) calc(var(--u) * 13); border-radius: calc(var(--u) * 10); background: var(--cream); color: var(--cream-ink); }
.pm.typing { display: flex; gap: calc(var(--u) * 5); padding: calc(var(--u) * 6) 0; }
.pm.typing i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--blue-300); animation: dot 1.1s infinite; }
.pm.typing i:nth-child(2) { animation-delay: .15s; }
.pm.typing i:nth-child(3) { animation-delay: .3s; }
.pk-paper { width: max-content; margin-top: calc(var(--u) * 9); overflow: hidden; border: .09375rem solid var(--blue-300); border-radius: calc(var(--u) * 7); background: #fff; }
.pk-paper > b { display: block; padding: calc(var(--u) * 3) calc(var(--u) * 10); border-bottom: .09375rem solid var(--blue-300); background: var(--blue-50); font-size: calc(var(--u) * 10.5); font-weight: 700; color: var(--blue); }
.pk-paper svg { display: block; width: calc(var(--u) * 196); height: auto; margin: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 9) calc(var(--u) * 16); }
.pk-comp { flex: none; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 40); margin: calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * 20); padding: 0 calc(var(--u) * 5) 0 calc(var(--u) * 16); border-radius: 62.4375rem; background: #fff; font-size: calc(var(--u) * 12.5); color: var(--ink-400); }
.pk-comp i { display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; background: var(--night); }
.pk-comp svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: #fff; }

/* The parent's phone: today on the calendar, updating as the lesson ends. */
.sc-parent { background: linear-gradient(180deg, #F2FBFF 0%, #DCF0FF 100%); color: var(--ink); }
.pp-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(var(--u) * 7); margin: calc(var(--u) * 4) calc(var(--u) * 14) calc(var(--u) * 14); padding: calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 4); border-radius: 62.4375rem; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .09375rem rgba(0, 81, 194, .2); font-size: calc(var(--u) * 13); }
.pp-pill .av { width: calc(var(--u) * 26); height: calc(var(--u) * 26); font-size: calc(var(--u) * 11.5); }
.pp-pill svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--ink-500); }
.pp-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 calc(var(--u) * 10); padding-bottom: calc(var(--u) * 10); border-bottom: 1px solid rgba(0, 81, 194, .14); }
.ps-d { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 6) 0; border-radius: calc(var(--u) * 10); }
.ps-d small { font-size: calc(var(--u) * 9.5); font-weight: 700; color: var(--ink-400); }
.ps-d b { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--u) * 12.5); font-weight: 700; }
.ps-d.off { background: rgba(31, 41, 51, .04); }
.ps-d.sel { background: rgba(37, 81, 161, .08); }
.ps-d.today b { background: var(--blue); color: #fff; }
.ps-dots { display: flex; gap: calc(var(--u) * 3); height: calc(var(--u) * 5); }
.ps-dots i { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: var(--acc); }
.pp-day { margin: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 10); font-size: calc(var(--u) * 14); font-weight: 700; }
.pp-list { flex: 1; display: grid; align-content: start; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 12); }
.pp-lc { padding: calc(var(--u) * 11) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: linear-gradient(160deg, var(--from), var(--to)); border: 1px solid var(--line); transition: box-shadow .5s var(--ease); }
.pp-lc small { display: block; font-size: calc(var(--u) * 9.5); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--acc); }
.pp-lc > span { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 13); line-height: 1.3; font-weight: 600; }
.pp-state { display: inline-block; margin-top: calc(var(--u) * 8); padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 62.4375rem; background: rgba(37, 81, 161, .1); color: var(--blue); font-style: normal; font-size: calc(var(--u) * 10.5); font-weight: 700; transition: background-color .4s, color .4s; }
.pp-score { display: flex; align-items: center; justify-content: space-between; max-height: 0; opacity: 0; overflow: hidden; font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--ink-500); transition: max-height .5s var(--ease), opacity .5s, margin-top .5s; }
.pp-score b { color: var(--ink); }
.pp-score i { padding: calc(var(--u) * 1) calc(var(--u) * 8); border-radius: 62.4375rem; background: var(--ok-bg); color: var(--ok-ink); font-style: normal; font-weight: 700; }
.pp-lc.done .pp-state { background: var(--ok-bg); color: var(--ok-ink); }
.pp-lc.done .pp-score { max-height: calc(var(--u) * 30); opacity: 1; margin-top: calc(var(--u) * 8); }
.pp-lc.ping { box-shadow: 0 0 0 calc(var(--u) * 4) rgba(40, 167, 69, .3); }
/* ParentTabBar.tsx: the rail's gradient run across the bar, white glyphs at rest, the active one in a white pill. */
.pp-tabs { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: calc(var(--u) * 8) calc(var(--u) * 6) calc(var(--u) * 14); background: linear-gradient(90deg, #0051C2 0%, #001A66 100%); }
.pp-tab { display: grid; place-items: center; min-height: calc(var(--u) * 32); color: rgba(255, 255, 255, .65); }
.pp-tab i { display: grid; place-items: center; min-width: calc(var(--u) * 40); padding: calc(var(--u) * 6) calc(var(--u) * 9); border-radius: 62.4375rem; --ko: #001A66; }
.pp-tab svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.pp-tab.on i { background: #fff; color: #0051C2; --ko: #fff; }

/* ── 3b. Starlo: the sidekick, every subject in orbit ──────
   Rings turn; each body sits at its own angle (--a) and counter-turns so its
   icon stays upright. Everything is sized off --s, the stage's width. */
#starlo { overflow: hidden; }
.split { max-width: 75rem; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(2.5rem, 5vw, 5.5rem); }
.split .sec-head { text-align: left; max-width: none; margin: 0; padding: 0; }
.split .sub { margin: 1.5rem 0 0; }
.split .h2 { font-size: clamp(2.25rem, 3.9vw, 3.2rem); } /* capped so the italic phrase stays on one row in the 75rem column */
.sec-cta { margin-top: 2.125rem; min-height: 3.375rem; padding: 0 2rem; font-size: 1rem; }
html.js .sec-cta.rv { transition-delay: .22s; }
.orbit { --s: min(33.75rem, 40vw); position: relative; width: var(--s); height: var(--s); margin: 0 auto; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split .sec-head { text-align: center; }
  .split .sub { margin: 1.5rem auto 0; }
  .orbit { --s: min(31.25rem, calc(100vw - 4.5rem)); margin-top: 4.5rem; }
  /* Stacked, Starlo's orbit leads and the copy follows. */
  #starlo .orbit { order: -1; margin: 0 auto 4.5rem; }
}

/* Chat moments floating around Starlo. Outer box: position + entrance; inner: the drift. */
.bub { position: absolute; z-index: 3; white-space: nowrap; font-size: clamp(.71875rem, calc(var(--s) * .027), .90625rem); }
html.js .bub { opacity: 0; transform: translateY(.75rem) scale(.9); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.5s + var(--i) * .2s); }
html.js .orbit.in .bub { opacity: 1; transform: none; }
.bub-in { display: flex; align-items: center; gap: .6em; padding: .7em 1.05em; border-radius: 1.15em; font-weight: 500; line-height: 1.3; animation: bubFloat var(--f, 6s) ease-in-out infinite alternate; }
.bub-in img { flex: none; width: 1.6em; height: 1.6em; }
.b-star .bub-in, .b-hint .bub-in, .b-typing .bub-in {
  color: #fff; background: rgba(0, 81, 194, .5); border: 1px solid rgba(169, 209, 245, .28); border-bottom-left-radius: .35em;
  -webkit-backdrop-filter: blur(.75rem); backdrop-filter: blur(.75rem);
  box-shadow: 0 .875rem 1.875rem -.875rem rgba(0, 0, 0, .55);
}
.b-star   { top: 13%; right: -11%; --f: 6.6s; }
.b-hint   { bottom: 27%; left: -13%; --f: 7.2s; }
.b-typing { bottom: 9%; right: 4%; --f: 5.8s; }
.bub-dots { display: flex; gap: .35em; padding: .2em .1em; }
.bub-dots i { width: .45em; height: .45em; border-radius: 50%; background: var(--blue-300); animation: dot 1.1s infinite; }
.bub-dots i:nth-child(2) { animation-delay: .15s; }
.bub-dots i:nth-child(3) { animation-delay: .3s; }
/* Not `drift`: that name is the curriculum lanes' marquee, and a second @keyframes drift would replace it. */
@keyframes bubFloat { to { transform: translateY(-.625rem); } }
@media (max-width: 900px) {
  .b-star { right: -2%; }
  .b-hint { left: -3%; }
  .b-typing { right: 0; }
}
@media (max-width: 560px) {
  .split .h2 { font-size: min(clamp(2.25rem, 9vw, 3rem), (100vw - 3rem) / 10.2); }
  .b-star   { top: 6%; right: 0; }
  .b-hint   { bottom: 18%; left: 0; }
  .b-typing { bottom: auto; top: 36%; right: 0; }
}
.orbit-sky { position: absolute; inset: -16%; pointer-events: none; }
.orbit .tw { position: absolute; width: .1875rem; height: .1875rem; border-radius: 50%; background: #fff; opacity: .55; animation: twinkle var(--t, 4s) ease-in-out var(--dl, 0s) infinite; }
.orbit .tw.y { background: var(--yellow); box-shadow: 0 0 .375rem 1px rgba(255, 217, 90, .6); }
.orbit .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(169, 209, 245, .16); animation: orbit var(--d) linear infinite; }
.orbit .r1 { inset: 23%; --d: 28s; }
.orbit .r2 { inset: 10.5%; --d: 46s; }
.orbit .r3 { inset: 0; --d: 70s; border-style: dashed; border-color: rgba(169, 209, 245, .14); }
.orbit .slot { position: absolute; inset: 0; transform: rotate(var(--a)); }
.orbit .body { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); }
.orbit .planet { width: calc(var(--s) * .12); height: calc(var(--s) * .12); }
.orbit .planet i {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(160deg, var(--from), var(--to)); color: var(--acc);
  box-shadow: inset 0 0 0 .09375rem rgba(255, 255, 255, .7), 0 .75rem 1.875rem -.625rem rgba(0, 0, 0, .45), 0 0 2.75rem -.25rem var(--glow);
  animation: orbit var(--d) linear infinite reverse;
}
/* Colored-pencil subject icons (homepage/img/orbit-*.webp), drawn in each subject's accent. */
.orbit .planet img { width: 62%; height: 62%; object-fit: contain; }
.orbit .p-math { --from: #F2FBFF; --to: #DCF0FF; --acc: #2551A1; --glow: rgba(120, 190, 255, .55); }
.orbit .p-ela  { --from: #FFF9F3; --to: #FFDCDC; --acc: #9E4C3E; --glow: rgba(255, 170, 170, .5); }
.orbit .p-sci  { --from: #F5FFEF; --to: #DCFFEA; --acc: #286E74; --glow: rgba(140, 240, 190, .45); }
.orbit .p-soc  { --from: #FDF2FF; --to: #FFCAFC; --acc: #804775; --glow: rgba(250, 160, 245, .5); }
.orbit .spark { width: .5625rem; height: .5625rem; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 .875rem .25rem rgba(255, 217, 90, .55); }
.orbit .dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--sky-light); opacity: .75; }
.orbit .core { position: absolute; inset: 36%; display: grid; place-items: center; }
.orbit .core::before { content: ''; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 217, 90, .3) 0%, rgba(255, 217, 90, .08) 38%, transparent 66%); }
.orbit .core img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 0 1.75rem rgba(255, 217, 90, .45)); animation: bob 5.5s ease-in-out infinite; }
.orbit .halo { position: absolute; inset: 4%; border-radius: 50%; border: .09375rem solid rgba(255, 217, 90, .45); opacity: 0; animation: halo 4.4s ease-out infinite; }
.orbit .halo + .halo { animation-delay: 2.2s; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-.5625rem) rotate(-3deg); } }
@keyframes halo { from { opacity: .8; transform: scale(.75); } to { opacity: 0; transform: scale(2.7); } }
@keyframes twinkle { 50% { opacity: .12; transform: scale(.6); } }

/* ── 8b. FAQ: plain rows, no cards ──────────────────────── */
.faq { max-width: 47.5rem; margin: clamp(3rem, 5vw, 4.5rem) auto 0; padding: 0 1.5rem; }
.faq details { border-bottom: 1px solid rgba(0, 81, 194, .16); }
.faq details:first-child { border-top: 1px solid rgba(0, 81, 194, .16); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.5rem .25rem; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); font-weight: 600; color: var(--night);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: .875rem; height: .875rem;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% .15625rem no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / .15625rem 100% no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -.375rem 0 0; padding: 0 2.75rem 1.625rem .25rem; font-size: 1.03125rem; line-height: 1.65; color: var(--ink-700); }

/* ── 9. Waitlist ────────────────────────────────────────── */
.sec-night .eyebrow { color: var(--yellow); }
.sec-night .h2 { color: #fff; }
.sec-night .sub { color: rgba(255, 255, 255, .74); }
.join { max-width: 40rem; margin: 2.75rem auto 0; padding: 0 1.5rem; }
.join-row { display: flex; gap: .625rem; }
.join input[type="text"], .join input[type="email"] {
  flex: 1; min-width: 0; height: 3.25rem; padding: 0 1.25rem;
  border-radius: 62.4375rem; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08); color: #fff;
  font: 500 .9375rem var(--sans);
  transition: border-color .2s, background-color .2s;
}
.join input::placeholder { color: rgba(255, 255, 255, .62); }
.join input:focus { outline: none; border-color: var(--yellow); background: rgba(255, 255, 255, .12); }
.join .btn { min-height: 3.25rem; }
.join-msg { min-height: 1.5rem; margin: 1.125rem 0 0; text-align: center; font-weight: 600; font-size: .9375rem; }
.join-msg.ok { color: var(--yellow); font-size: 1.125rem; }
.join-msg.err { color: #FFB3C7; }
.join.done .join-row { display: none; }
.join-share { margin-top: 1.125rem; display: flex; flex-direction: column; align-items: center; gap: 1.125rem; text-align: center; }
.join-share[hidden] { display: none; }
.join-share p { margin: 0; max-width: 30em; font-size: .96875rem; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 .09375rem rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 640px) {
  .join-row { flex-direction: column; }
  .join input[type="text"], .join input[type="email"] { flex: none; width: 100%; }
  .join .btn { width: 100%; }
}

.foot { max-width: 75rem; margin: clamp(6.875rem, 12vw, 10rem) auto 0; padding: 1.75rem 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: rgba(255, 255, 255, .55); }
.foot img { height: 1.25rem; width: auto; }
.foot-links { display: flex; gap: 1.375rem; margin-left: auto; }
.foot-links a { color: rgba(255, 255, 255, .7); text-decoration: none; font-weight: 500; transition: color .2s; }
.foot-links a:hover, .foot-links a[aria-current] { color: #fff; }
@media (max-width: 560px) {
  .foot { flex-wrap: wrap; gap: .875rem 1.375rem; }
  .foot-links { margin-left: 0; order: 3; flex-basis: 100%; }
}

/* ── Legal pages (privacy.html, terms.html): one sky section, plain reading column ── */
.legal-page main { padding-bottom: 2.5rem; }
.legal { padding: clamp(7.5rem, 14vw, 10.625rem) 1.5rem clamp(5rem, 9vw, 7.5rem); border-radius: 0 0 2.75rem 2.75rem; }
.legal-in { max-width: 45rem; margin: 0 auto; }
.legal .h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.legal .h2 em { display: inline; }
.legal-date { margin: .875rem 0 2.25rem; font-size: .875rem; font-weight: 500; color: var(--ink-500); }
.legal h2 { margin: 2.75rem 0 .75rem; font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: var(--blue); }
.legal h3 { margin: 1.375rem 0 .375rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.legal p, .legal li { font-size: 1rem; line-height: 1.7; color: var(--ink-700); }
.legal p { margin: 0 0 .875rem; }
.legal ul { margin: 0 0 .875rem; padding-left: 1.375rem; }
.legal li { margin-bottom: .5rem; }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--blue); font-weight: 600; }
/* A blank still to fill in before these pages go live. */
.legal mark.fill { padding: 1px .375rem; border-radius: .375rem; background: var(--yellow); color: var(--night); font-weight: 600; }
.legal-page .foot { margin-top: 3rem; }
@media (max-width: 640px) { .legal { padding-left: 16px; padding-right: 16px; border-radius: 0 0 28px 28px; } }

/* ── Section art (img/deco-*.webp) ─────────────────────────
   One colored-pencil drawing per section, above its headline (and eyebrow),
   lined up with the heading: centered, or flush left where the heading is
   (the split layout, and phones). Sized by height so wide and tall drawings
   carry the same weight. */
.sec-art {
  display: block; width: auto; height: 6rem; max-width: 11rem; object-fit: contain;
  margin: 0 auto 1.75rem;
  filter: drop-shadow(0 .5rem .75rem rgba(0, 26, 102, .14));
}
@media (min-width: 901px) { .split .sec-art { margin-left: 0; } }
/* The book stack reads small at the shared height. */
.sec-art-books { height: 7.5rem; }
@media (max-width: 640px) {
  .sec-art { height: 4.75rem; margin-bottom: 1.25rem; }
  .sec-art-books { height: 6rem; }
}

/* The gold rosette pinned to the portfolio PDF's top corner; it pops on with the PDF. */
.pdf-wrap { position: relative; }
.pdf-ribbon {
  position: absolute; z-index: 2; top: -1.75rem; right: max(-1.5rem, calc(50% - 12.8125rem - 2.25rem));
  width: 6.5rem; height: auto; rotate: 12deg; pointer-events: none;
  filter: drop-shadow(0 .5rem .75rem rgba(0, 26, 102, .14));
  transition: opacity .5s ease 1s, scale .6s cubic-bezier(.34, 1.56, .64, 1) 1s;
}
html.js .prog:not(.made) .pdf-ribbon { opacity: 0; scale: .6; }
@media (max-width: 640px) {
  .pdf-ribbon { width: 5rem; right: -.25rem; top: -1.25rem; }
}

/* ── Phones: art, eyebrows and headlines centered; body copy flush left ── */
@media (max-width: 640px) {
  .hero { align-items: flex-start; text-align: left; }
  .hero .display { align-self: stretch; text-align: center; }
  .hero-cta { align-self: stretch; align-items: flex-start; }
  .hero-cta .btn, .sec-cta { width: 100%; max-width: 22.5rem; }
  .lede { margin-left: 0; }
  .sec-head, .split .sec-head { text-align: left; }
  .sec-head .eyebrow, .sec-head .h2 { text-align: center; }
  /* Narrow phones: shrink headlines so each phrase fits on one row — section
     headlines read in two lines (the widest phrase is ~10em), the hero in three —
     opened up with more line height, since it does wrap here. */
  .h2 { font-size: min(2.25rem, (100vw - 3rem) / 10.2); }
  .hero .display { font-size: min(2.5rem, (100vw - 3rem) / 8.7); line-height: 1.16; }
  .hero-logo { width: min(18rem, 100vw - 6rem); }
  .sub, .split .sub { margin-left: 0; }
  .join-msg { text-align: left; }
  .join-share { align-items: flex-start; text-align: left; }
}

/* ── Reduced motion: everything lands in its final place ── */
@media (prefers-reduced-motion: reduce) {
  html.js .rv, html.js .sched .lc, html.js .pdf .pb { opacity: 1; transform: none; transition: none; }
  html.js .prog:not(.made) .pdf { opacity: 1; transform: none; }
  html.js .prog:not(.made) .pdf-ribbon { opacity: 1; scale: 1; }
  .pdf-ribbon { transition: none; }
  .lane-in { animation: none; }
  .orbit .ring, .orbit .planet i, .orbit .core img, .orbit .tw, .bub-in, .bub-dots i { animation: none; }
  html.js .bub { opacity: 1; transform: none; transition: none; }
  .orbit .halo { display: none; }
  .m, .pm { animation: none; }
  .dist-tok { transition: none; }
  .panel, .db-bar, .db-fin, .pdf, .pp-score { transition: none; }
}