/* ===== src/base.css ===== */
/*
  hite.app base styles (builder A).
  Tokens are the app's own (design/v2/ds.css via research/DESIGN.md), plus landing sizes. Dark only.
  Fonts load from assets/fonts/fonts.css, linked in the page head.

  Shared building blocks for every section:
    .wrap               centred content column (max 1120 px, 16 to 24 px gutters)
    .sec                section rhythm (padding block); every section root is <section class="sec">
    .kicker .h-hero .h1 .h2l .lead .say .num .hand   type
    .btn .btn-pri .btn-sec .btn-txt .pill            buttons
    .panel .chip .tag                                surfaces
    .phone > .phone-screen (> .phone-status) > img   CSS phone frame around a 1170 x 2532 capture
    .play-badge                                      Google Play badge link
    .ico                                             24 px line icon wrapper
    [data-reveal]       default reveal: rise 24 px and fade. Variants: data-reveal="fade|up|down|left|right|scale|clip"
    .sr-only .skip
*/

:root {
  color-scheme: dark;

  /* surfaces, deepest to lightest */
  --ink-0: #050A1C;
  --ink: #0A1230;
  --ink-2: #111B3D;
  --ink-3: #1B2750;
  --ink-4: #2A3766;
  --edge: #6371A3;

  /* text */
  --paper: #EEF1F8;
  --paper-2: #B4BCD4;
  --paper-3: #8390B4;

  /* status: about the student (always with a shape) */
  --done: #4BD8A8;
  --wrong: #FF7A68;
  --marked: #B9A2FF;
  --todo: #8390B4;
  --todo-txt: #A7B1CF;
  --done-tint: rgba(75, 216, 168, .1);
  --wrong-tint: rgba(255, 122, 104, .1);

  /* maths only */
  --va: #8CC8EB;
  --vb: #F5A3CB;
  --vr: #F2D46D;
  --grid: #1F2B57;
  --axis: #34427A;

  /* pencil */
  --graphite: #C3C9D6;
  --graphite-hi: #DCE1EA;
  --graphite-lo: #9AA2B4;

  /* brand mint (logo, rare highlights) */
  --mint-1: #6FE6BF;
  --mint-2: #36BE8F;
  --mint-pale: #D6FAEC;

  /* light callout cards (Play slide style), with darker status numbers */
  --card-light: #F4F7FD;
  --card-light-sub: #59628A;
  --done-on-light: #17946A;
  --wrong-on-light: #D63A62;

  /* faces */
  --f: "Sofia Sans", ui-sans-serif, system-ui, sans-serif;
  --fc: "Sofia Sans Semi Condensed", "Sofia Sans", ui-sans-serif, system-ui, sans-serif;
  --fh: "Kalam", "Segoe Print", "Bradley Hand", cursive;

  /* app type scale */
  --t-display: 36px;
  --t-title: 28px;
  --t-h2: 22px;
  --t-h3: 20px;
  --t-stem: 19px;
  --t-body: 17px;
  --t-note: 16px;
  --t-label: 15px;
  --t-small: 14px;
  --t-micro: 13px;
  --t-tab: 12px;
  --t-hand: 19px;

  /* landing scale */
  --t-hero: clamp(44px, 7.2vw, 88px);
  --t-h1: clamp(34px, 4.8vw, 56px);
  --t-h2l: clamp(26px, 3vw, 36px);
  --t-lead: clamp(18px, 1.6vw, 22px);
  --t-brand: clamp(56px, 9vw, 120px);

  /* space: 4 px steps */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 48px; --s10: 64px; --s11: 96px; --s12: 128px;
  --pad: 20px;
  --gutter: 20px;
  --maxw: 1120px;
  --header-h: 60px;

  /* radii */
  --r-tag: 6px;
  --r-chip: 12px;
  --r-btn: 14px;
  --r-box: 16px;
  --r-panel: 20px;
  --r-sheet: 26px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-pencil: cubic-bezier(.45, .05, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --d-quick: 160ms;
  --d-base: 250ms;
  --d-sheet: 300ms;
  --d-ink: 420ms;
  --d-reveal: 760ms;

  /* elevation is lightness; these are for marketing mockups only */
  --scrim: rgba(4, 7, 20, .66);
  --shadow-phone: 0 40px 120px rgba(0, 0, 0, .55);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, .45);
  --hero-lift: radial-gradient(1200px 900px at 30% 10%, #15215A 0%, #0A1230 60%);
}

@media (max-width: 370px) { :root { --pad: 16px; --gutter: 16px; } }
@media (min-width: 720px) { :root { --gutter: 32px; --header-h: 68px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  min-height: 100vh;
  /* transparent so the fixed night layer (.sky, behind everything) shows; html paints the ink */
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
/* <i> is used as a plain decorative box all over the page; upright, so its empty line box never pulls in
   the italic font file (maths variables set their own italic) */
i { font-style: normal; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--paper); color: var(--ink); }
[hidden] { display: none !important; }
html.sheet-open, html.sheet-open body { overflow: hidden; }

/* the night: one fixed layer behind the whole page, its opacity set by core.js from data-sky */
.sky {
  position: fixed;
  inset: -15vh 0;
  z-index: -1;
  background: var(--ink-0);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 16px; border-radius: var(--r-btn);
  background: var(--paper); color: var(--ink); font-weight: 800;
  transform: translateY(-160%); transition: transform var(--d-base) var(--ease);
}
.skip:focus-visible { transform: none; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec {
  position: relative;
  padding-block: var(--s10);
  overflow-x: clip; /* never a horizontal scroll; vertical overflow and sticky still work */
}
@media (min-width: 900px) { .sec { padding-block: var(--s11); } }

/* ---------- type ---------- */
.kicker {
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 800;
  line-height: 1.3;
  color: var(--paper-2);
  letter-spacing: 0;
}
.h-hero {
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.h2l {
  font-size: var(--t-h2l);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.lead {
  font-size: var(--t-lead);
  font-weight: 550;
  line-height: 1.4;
  color: var(--paper-2);
  text-wrap: pretty;
}
.say { font-size: var(--t-body); line-height: 1.62; color: var(--paper-2); text-wrap: pretty; }
.say b, .lead b, .micro b { color: var(--paper); font-weight: 800; }
.micro { font-size: var(--t-micro); line-height: 1.5; color: var(--paper-2); text-wrap: pretty; }
.num {
  font-family: var(--fc);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1;
}
.hand {
  font-family: var(--fh);
  font-size: var(--t-hand);
  color: var(--graphite);
  transform: rotate(-1.2deg);
  display: inline-block;
}
.plus { color: var(--done); }
.minus { color: var(--wrong); }
.dim { color: var(--paper-2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 0; border-radius: var(--r-btn);
  font: 800 var(--t-body)/1.2 var(--f);
  text-decoration: none; cursor: pointer;
  transition: transform var(--d-quick) var(--ease), background-color var(--d-quick) var(--ease), color var(--d-quick) var(--ease);
}
.btn:active { transform: scale(.985); }
.btn-pri { background: var(--paper); color: var(--ink); }
.btn-pri:hover { background: #fff; }
.btn-sec { background: none; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--edge); }
.btn-sec:hover { background: var(--ink-2); }
.btn-txt {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 750; color: var(--paper);
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-decoration-color: var(--edge); text-underline-offset: 4px;
  transition: text-decoration-color var(--d-quick) var(--ease);
}
.btn-txt:hover { text-decoration-color: var(--paper); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 800;
}
.pill-pri { background: var(--paper); color: var(--ink); }
.pill-ghost { background: var(--ink-2); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-4); }

/* ---------- surfaces ---------- */
.panel { padding: 16px; border-radius: var(--r-panel); background: var(--ink-2); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  font-size: var(--t-label); font-weight: 700; color: var(--paper-2);
  white-space: nowrap;
}
.chip.is-on { background: var(--paper); color: var(--ink); box-shadow: none; }
.tag {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--r-tag);
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: var(--t-tab); font-weight: 700; color: var(--paper); line-height: 1.4;
}
.card-light {
  background: var(--card-light); color: var(--ink);
  border-radius: 15px; box-shadow: var(--shadow-card);
}
.ico { width: 24px; height: 24px; flex: none; }

/* ---------- phone frame ----------
   <div class="phone" style="--phone-w: 300px">
     <div class="phone-screen">
       <div class="phone-status"><span>9:41</span><i></i><i></i></div>   (optional)
       <img src="assets/screens/webp/today.webp" width="1170" height="2532" alt="..." loading="lazy">
     </div>
   </div>
   Sizes scale with --phone-w (the outer width). */
.phone {
  --phone-w: 280px;
  --bezel: calc(var(--phone-w) * .0213);
  position: relative;
  width: var(--phone-w);
  max-width: 100%;
  padding: var(--bezel);
  border-radius: calc(var(--phone-w) * .108);
  background: #050A1E;
  box-shadow: inset 0 0 0 1.5px #26305E, var(--shadow-phone);
  flex: none;
}
.phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--phone-w) * .088);
  background: var(--ink);
  aspect-ratio: 1170 / 2532;
  isolation: isolate;
}
.phone-screen > img { width: 100%; height: auto; }
.phone-status {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  height: calc(var(--phone-w) * .085);
  padding: 0 calc(var(--phone-w) * .07);
  font: 700 calc(var(--phone-w) * .045)/1 var(--f);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.phone-status > span { flex: 1; }
.phone-status > i {
  display: block; width: calc(var(--phone-w) * .05); height: calc(var(--phone-w) * .024);
  border-radius: 99px; background: var(--paper-2);
}
.phone-status > i + i { width: calc(var(--phone-w) * .07); }
.phone-flat { box-shadow: inset 0 0 0 1.5px #26305E; }

/* ---------- Google Play badge ---------- */
.play-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
  transition: transform var(--d-base) var(--ease);
}
.play-badge img { height: 56px; width: auto; }
.play-badge:hover { transform: translateY(-2px); }
.play-badge:active { transform: scale(.98); }
.play-badge:focus-visible { outline-offset: 4px; }

/* ---------- reveal ----------
   Hidden only when JS runs (html.js), so the page reads fine without it. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--d-reveal) var(--ease),
    transform var(--d-reveal) var(--ease-out-soft);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="down"] { transform: translate3d(0, -20px, 0); }
.js [data-reveal="left"] { transform: translate3d(-32px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(32px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="clip"] { opacity: 1; clip-path: inset(0 0 100% 0); transform: translate3d(0, 12px, 0); transition: clip-path 900ms var(--ease-out-soft), transform 900ms var(--ease-out-soft); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 -2px 0); }

/* ---------- reduced motion: everything lands in its end state ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ===== src/shell.css ===== */
/* hite.app page chrome (builder A): header, footer, coming-soon sheet, shared wordmark. */

/* ---------- wordmark: lowercase hite in Sofia Sans, never another font ---------- */
.wordmark {
  font-family: var(--f);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1;
  color: var(--paper);
}

/* ---------- header ---------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;
}
.site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 48, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 var(--ink-3);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.site-head.is-scrolled::before { opacity: 1; }
.head-row {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.head-logo {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding-right: 6px;
}
.head-mark { width: auto; height: 30px; }
.head-logo .wordmark { font-size: 27px; transform: translateY(-1px); }
.head-cta {
  pointer-events: auto;
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.96);
  transition:
    opacity 360ms var(--ease),
    transform 480ms var(--ease-spring),
    visibility 0s linear 480ms;
}
/* still a 44 px tap target around the 40 px pill */
.head-cta::after { content: ""; position: absolute; inset: -2px -2px; }
.head-cta { position: relative; }
.site-head.is-on .head-cta {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 360ms var(--ease),
    transform 480ms var(--ease-spring),
    visibility 0s;
}
.head-cta:active { transform: scale(.97); }
@media (min-width: 720px) {
  .head-mark { height: 34px; }
  .head-logo .wordmark { font-size: 30px; }
  .head-cta { min-height: 44px; padding: 0 20px; }
}

/* ---------- footer ---------- */
.site-foot {
  --mark-gap: var(--ink-0);
  position: relative;
  background: var(--ink-0);
  padding: 56px 0 calc(40px + env(safe-area-inset-bottom, 0px));
  color: var(--paper-2);
}
.foot-top { display: flex; flex-direction: column; gap: 12px; }
.foot-logo { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; }
.foot-mark { height: 38px; width: auto; }
.foot-logo .wordmark { font-size: 34px; }
.foot-line { font-size: var(--t-h3); font-weight: 800; color: var(--paper); letter-spacing: -.01em; }
.foot-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin-top: 28px;
  padding-block: 8px;
  border-block: 1px solid var(--ink-3);
}
.foot-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 750;
  color: var(--paper);
  transition: color var(--d-quick) var(--ease);
}
.foot-nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 4px; }
.foot-nav .ico { width: 20px; height: 20px; }
.foot-follow { margin-top: 24px; font-size: 15px; line-height: 1.55; color: var(--paper-2); }
.foot-follow a {
  color: var(--paper); font-weight: 800;
  text-decoration: underline; text-decoration-color: var(--edge); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.foot-print {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--paper-3);
  max-width: 68ch;
  text-wrap: pretty;
}
@media (min-width: 720px) {
  .foot-nav { display: flex; flex-wrap: wrap; gap: 4px 32px; }
}
@media (min-width: 900px) {
  .site-foot { padding-top: 80px; }
  .foot-top { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- coming-soon sheet ---------- */
.soon {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.soon-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--d-sheet) var(--ease);
}
.soon.is-open .soon-scrim { opacity: 1; }
.sheet {
  --mark-gap: var(--ink-2);
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--ink-2);
  box-shadow: 0 -1px 0 var(--ink-4);
  transform: translateY(102%);
  transition: transform 340ms var(--ease);
  touch-action: none;
  outline: none;
}
.sheet:focus-visible { outline: none; }
.soon.is-open .sheet { transform: none; }
.sheet-grab {
  width: 40px; height: 4px; margin: 0 auto 18px;
  border-radius: 4px; background: var(--ink-4);
}
.sheet-art { position: relative; width: 64px; height: 64px; margin-bottom: 16px; }
.sheet-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--ink-4), 0 0 0 1px var(--ink-4);
}
.sheet-badge {
  position: absolute; right: -8px; bottom: -6px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink-2);
  transform: scale(.4);
  opacity: 0;
}
.sheet-badge svg { width: 15px; height: 15px; }
.soon.is-open .sheet-badge { animation: soon-pop 520ms var(--ease-spring) 260ms both; }
@keyframes soon-pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sheet-title { font-size: var(--t-h2); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.sheet-body { margin-top: 8px; font-size: var(--t-body); line-height: 1.5; color: var(--paper-2); text-wrap: pretty; }
.sheet-actions { display: grid; gap: 10px; margin-top: 22px; }
.sheet-actions .btn { width: 100%; }
.sheet-actions .ico { width: 20px; height: 20px; }

@media (min-width: 720px) {
  .soon { align-items: center; padding: 24px; }
  .sheet {
    max-width: 420px;
    padding: 28px 28px 28px;
    border-radius: var(--r-sheet);
    box-shadow: inset 0 0 0 1px var(--ink-4), var(--shadow-card);
    transform: translateY(24px) scale(.97);
    opacity: 0;
    transition: transform 360ms var(--ease), opacity 260ms var(--ease);
    touch-action: auto;
  }
  .soon.is-open .sheet { transform: none; opacity: 1; }
  .sheet-grab { display: none; }
  .sheet-actions { grid-template-columns: 1fr auto; }
}

/* ===== src/sections/01-hero.css ===== */
/* 01-hero: "Study first. Then scroll."
   A sticky scene. The reel feed plays from the first frame; scrolling freezes it and the hite lock
   screen slides up over it, the padlock snaps on, then today's palette card and +4 min float in.
   Scroll values come from 01-hero.js as unitless CSS variables on the section:
   --a (copy out, phone rises and flattens), --lock, --c (card), --ch (chip), --e (exit), --s (raw).
   Without JS or with reduced motion the scene is a static, finished picture.

   Also defines two small pieces shared with 02-loop (builder A):
   .scr-status (phone status bar) and .rf (the abstract reel feed), sized in 390 px design units
   through --u inside a container-query phone screen. */

/* ---------- shared: phone screen units, status bar, reel feed ---------- */
.scr { container-type: inline-size; --u: calc(100cqw / 390); }
.scr-status {
  position: absolute; inset: 0 0 auto 0; z-index: 8;
  display: flex; align-items: center; gap: calc(5 * var(--u));
  height: calc(34 * var(--u));
  padding: 0 calc(26 * var(--u));
  font: 700 calc(15 * var(--u))/1 var(--f);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.scr-status span { flex: 1; }
.scr-status i { display: block; width: calc(18 * var(--u)); height: calc(9 * var(--u)); border-radius: 9px; background: var(--paper-2); }
.scr-status i + i { width: calc(26 * var(--u)); }

.rf { position: absolute; inset: 0; overflow: hidden; }
.rf-strip { position: absolute; inset: 0 0 auto 0; height: 600%; will-change: transform; }
.rf-reel { position: relative; height: calc(100% / 6); overflow: hidden; }
.rf-art { position: absolute; inset: 0; }
.rf-art > * { position: absolute; display: block; }
.rf-art svg { inset: 0; width: 100%; height: 100%; }
.rf.is-still .rf-reel *, .is-paused .rf-reel * { animation-play-state: paused !important; }

.rf .r1 { background: #1B2A4A; }
.rf .sun { left: 22%; top: 20%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: #D5B16F; animation: r-sun 5s ease-in-out infinite alternate; }
.rf .band { left: -10%; right: -10%; border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
.rf .b1 { top: 50%; height: 30%; background: #24395F; animation: r-band 6s ease-in-out infinite alternate; }
.rf .b2 { top: 62%; bottom: 0; background: #2C4672; animation: r-band 7s ease-in-out -2s infinite alternate; }
.rf .dot { width: 3%; aspect-ratio: 1; border-radius: 50%; background: #E7DCB9; opacity: .7; }
.rf .d1 { left: 14%; top: 12%; animation: r-twinkle 2.6s ease-in-out infinite alternate; }
.rf .d2 { left: 80%; top: 16%; animation: r-twinkle 3.1s ease-in-out -1s infinite alternate; }
@keyframes r-sun { to { transform: translate3d(0, 6%, 0) scale(1.05); } }
@keyframes r-band { to { transform: translate3d(-4%, -3%, 0); } }
@keyframes r-twinkle { from { opacity: .2; } to { opacity: .85; } }

.rf .r2 { background: #1B322E; }
.rf .ax { fill: none; stroke: #4F6E65; stroke-width: 3; stroke-linecap: round; }
.rf .cv { fill: none; stroke: #E6E1D2; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 760; stroke-dashoffset: 760; animation: r-draw 2.8s var(--ease-pencil) infinite; }
.rf .pt { fill: #E6D28B; transform-box: fill-box; transform-origin: center; animation: r-pt 2.8s ease infinite; }
@keyframes r-draw { 60%, 100% { stroke-dashoffset: 0; } }
@keyframes r-pt { 0%, 40% { transform: scale(0); } 55% { transform: scale(1.3); } 70%, 100% { transform: scale(1); } }

.rf .r3 { background: #25224F; }
.rf .sq { width: 36%; aspect-ratio: 1; border-radius: 22%; }
.rf .q1 { left: 10%; top: 20%; background: #433C86; animation: r-spin 9s linear infinite; }
.rf .q2 { left: 48%; top: 31%; background: #5750A2; animation: r-spin 7s linear infinite reverse; }
.rf .q3 { left: 24%; top: 47%; background: #37316E; animation: r-spin 11s linear infinite; }
@keyframes r-spin { to { transform: rotate(360deg); } }

.rf .r4 { background: #382631; }
.rf .wv { fill: none; stroke-width: 14; stroke-linecap: round; animation: r-wave 3.2s linear infinite; }
.rf .w1 { stroke: #BE897B; }
.rf .w2 { stroke: #8F6268; animation-duration: 4.1s; }
.rf .w3 { stroke: #6A4A58; animation-duration: 5.3s; }
@keyframes r-wave { to { transform: translateX(-195px); } }

.rf .r5 { background: #162F48; }
.rf .ring, .rf .orb { left: 18%; top: 22%; width: 64%; aspect-ratio: 1; border-radius: 50%; }
.rf .ring { box-shadow: inset 0 0 0 calc(5 * var(--u)) #5A8EA3; }
.rf .orb { animation: r-spin 3.6s linear infinite; }
.rf .orb i { position: absolute; left: 45.5%; top: -4.5%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #E2D0A0; }

.rf-ui { position: absolute; inset: 0; color: var(--paper); }
.rf-rail {
  position: absolute; right: calc(14 * var(--u)); bottom: calc(150 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u));
}
.rf-rail svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rf-rail b { width: calc(22 * var(--u)); height: calc(7 * var(--u)); border-radius: 9px; background: rgba(238, 241, 248, .55); margin-bottom: calc(14 * var(--u)); }
.rf-cap {
  position: absolute; left: calc(18 * var(--u)); right: calc(80 * var(--u)); bottom: calc(52 * var(--u));
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(10 * var(--u)); row-gap: calc(10 * var(--u));
}
.rf-cap i { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: rgba(238, 241, 248, .7); }
.rf-cap b { width: calc(110 * var(--u)); height: calc(11 * var(--u)); border-radius: 9px; background: rgba(238, 241, 248, .85); }
.rf-cap span { grid-column: 1 / -1; height: calc(9 * var(--u)); border-radius: 9px; background: rgba(238, 241, 248, .5); }
.rf-cap span.s { width: 62%; margin-top: calc(-3 * var(--u)); }
.rf-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(4 * var(--u)); background: rgba(238, 241, 248, .16); z-index: 2; }
.rf-bar i { display: block; height: 100%; background: rgba(238, 241, 248, .85); transform-origin: 0 50%; transform: scaleX(0); }
@keyframes rf-bar { to { transform: scaleX(1); } }

/* ================= hero ================= */
.hero {
  --a: 1; --lock: 1; --c: 1; --ch: 1; --e: 0; --s: 0; --rise: 0px;
  padding: 0;
}
.js:not(.reduced) .hero { --a: 0; --lock: 0; --c: 0; --ch: 0; }
.hero-stage { position: relative; }

/* ---------- background depth ---------- */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hb-lift { position: absolute; inset: 0; background: var(--hero-lift); }
.hb-mark {
  --mark-gap: #0F1A45;
  position: absolute;
  top: 70px;
  right: -34vw;
  width: min(80vw, 700px);
  opacity: .13;
  transform: translate3d(0, calc(var(--s) * -150px), 0) rotate(calc(var(--s) * 7deg));
}
.hb-mark-in { animation: hb-drift 11s ease-in-out infinite alternate, hb-fade 1800ms var(--ease) 300ms both; }
.hb-mark svg { width: 100%; height: auto; }
.hb-cell {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 3;
  transform: translate3d(0, calc(var(--s) * var(--d) * -1px), 0) rotate(var(--r));
  animation: hb-fade 1400ms var(--ease) 500ms both;
}
.hb-cell > * { transform-box: fill-box; transform-origin: center; animation: hb-float var(--fl) ease-in-out infinite alternate; }
@keyframes hb-fade { from { opacity: 0; } }
@keyframes hb-drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-14px, 18px, 0) rotate(-2.5deg); } }
@keyframes hb-float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-14px) rotate(8deg); } }

/* ---------- layout ---------- */
.hero-grid {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--header-h) + 18px);
  padding-bottom: var(--s10);
}
.hero-copy { position: relative; max-width: 560px; }
.hero-h1 {
  margin-top: 10px;
  font-size: clamp(46px, 12.8vw, 96px);
  line-height: 1;
}
.hl { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hl-in { display: block; animation: hero-line 1100ms var(--ease-out-soft) calc(var(--in) * 110ms + 60ms) both; }
.hero-in { animation: hero-up 1000ms var(--ease-out-soft) calc(var(--in) * 80ms + 160ms) both; }
@keyframes hero-line { from { transform: translate3d(0, 108%, 0); } }
@keyframes hero-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

.hero-lead { margin-top: 16px; max-width: 30ch; color: var(--paper-2); }
.hero-support { margin-top: 8px; font-size: 16px; font-weight: 750; color: var(--paper); }
.hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.hero-cta .play-badge img { height: 54px; }
.hero-micro { font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--paper-2); }
.hero-follow { margin-top: 4px; }

.hero-device { position: relative; display: flex; justify-content: center; margin-top: 34px; }
.hero-enter { animation: hero-dev 1400ms var(--ease-out-soft) 240ms both; }
@keyframes hero-dev { from { opacity: 0; transform: translate3d(0, 90px, 0) scale(.94); } }
.hero-tilt {
  position: relative;
  transform:
    perspective(1500px)
    rotateX(calc((1 - var(--a)) * 8deg))
    rotateY(calc((1 - var(--a)) * -14deg))
    rotateZ(calc((1 - var(--a)) * 2deg));
}
.hero-phone { --phone-w: min(68vw, 300px, calc((100svh - 108px) / 2.16)); }

/* ---------- the scroll scene (JS on, motion allowed) ---------- */
.js:not(.reduced) .hero { height: 215vh; }
.js:not(.reduced) .hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.js:not(.reduced) .hero-grid { padding-bottom: 0; }
.js:not(.reduced) .hero-copy {
  transform: translate3d(0, calc(var(--a) * -84px), 0);
  opacity: calc(1 - var(--a) * 1.25);
}
.hero.copy-gone .hero-copy { visibility: hidden; }
.js:not(.reduced) .hero-device {
  transform: translate3d(0, calc(var(--a) * var(--rise) * -1), 0) scale(calc(1 - var(--e) * .06));
}

/* feed inside the hero phone */
.hero .rf { transform: scale(calc(1 - var(--lock) * .07)); transition: filter 700ms var(--ease); }
.hero-screen.is-frozen .rf { filter: blur(calc(5 * var(--u))) saturate(.6); }
.hero-screen.is-frozen .rf-reel * { animation-play-state: paused !important; }
.hero.is-paused .hb-mark-in, .hero.is-paused .hb-cell > * { animation-play-state: paused; }
.hero .rf-dim { position: absolute; inset: 0; z-index: 3; background: var(--ink); opacity: calc(var(--lock) * .6); pointer-events: none; }

/* lock screen, the native block screen re-drawn at 390 px design units */
.lk {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  padding: calc(48 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u));
  background: var(--ink);
  border-radius: calc((1 - var(--lock)) * 30 * var(--u)) calc((1 - var(--lock)) * 30 * var(--u)) 0 0;
  box-shadow: 0 -1px 0 var(--ink-3);
  transform: translate3d(0, calc((1 - var(--lock)) * 101%), 0);
  color: var(--paper);
}
.lk-top { display: flex; align-items: center; justify-content: space-between; }
.lk-top b { font-size: calc(20 * var(--u)); font-weight: 800; letter-spacing: -.02em; }
.lk-top svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.lk-tilewrap { position: relative; width: calc(82 * var(--u)); height: calc(82 * var(--u)); margin-top: calc(40 * var(--u)); }
.lk-tile {
  position: absolute; left: 0; top: 0;
  width: calc(72 * var(--u)); height: calc(72 * var(--u));
  border-radius: calc(20 * var(--u));
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--ink-4);
  display: grid; place-items: center;
}
.lk-tile svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.lk-badge {
  position: absolute; right: 0; bottom: 0;
  width: calc(34 * var(--u)); height: calc(34 * var(--u));
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink);
}
.lk-badge svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); overflow: visible; }
.lk-shackle { transition: transform 260ms var(--ease-pencil) 380ms; }
.lk-h { margin-top: calc(20 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.lk-say { margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.45; color: var(--paper-2); }
.lk-say b { color: var(--paper); font-weight: 800; }
.lk-push { flex: 1; }
.lk-pri {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(52 * var(--u)); border-radius: calc(14 * var(--u));
  background: var(--paper); color: var(--ink);
  font-size: calc(17 * var(--u)); font-weight: 800;
}
.lk-emer { display: flex; align-items: center; justify-content: center; min-height: calc(52 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 700; }
.lk-night { margin-top: calc(14 * var(--u)); text-align: center; font-size: calc(13 * var(--u)); color: var(--paper-2); }

/* padlock: hidden until the lock lands, then it pops and the shackle clicks shut */
.js:not(.reduced) .hero:not(.is-locked) .lk-badge { transform: scale(0); opacity: 0; }
.js:not(.reduced) .hero:not(.is-locked) .lk-shackle { transform: translateY(-3.5px); transition-delay: 0s; }
.hero.is-locked .lk-badge { animation: lk-pop 620ms var(--ease-spring) both; }
@keyframes lk-pop {
  0% { transform: translateY(calc(-14 * var(--u))) scale(.3); opacity: 0; }
  55% { transform: translateY(0) scale(1.08); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* a thumb tries to swipe the lock away: it rubber-bands and the padlock shakes */
.hero-touch {
  position: absolute; left: 50%; bottom: 24%; z-index: 6;
  width: calc(48 * var(--u)); height: calc(48 * var(--u)); margin-left: calc(-24 * var(--u));
  border-radius: 50%;
  background: rgba(238, 241, 248, .22);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(238, 241, 248, .55);
  opacity: 0;
  pointer-events: none;
}
.hero.is-try .hero-touch { animation: hero-touch 1000ms var(--ease) both; }
.hero.is-try .lk > * { animation: hero-rubber 1000ms var(--ease) both; }
.hero.is-try.is-locked .lk-badge { animation: lk-shake 640ms ease 420ms both; }
@keyframes hero-touch {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
  14% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  62% { opacity: 1; transform: translate3d(0, calc(-150 * var(--u)), 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, calc(-190 * var(--u)), 0) scale(.85); }
}
@keyframes hero-rubber {
  0%, 18% { transform: none; }
  55% { transform: translate3d(0, calc(-14 * var(--u)), 0); }
  100% { transform: none; }
}
@keyframes lk-shake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-15deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(5deg); }
  78% { transform: rotate(-2deg); }
}

/* ---------- floating paper callouts (Play slide style) ---------- */
.hero-today, .hero-earn {
  position: absolute; z-index: 7;
  background: var(--card-light); color: var(--ink);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
}
.hero-today {
  left: -16%; top: 47%;
  width: 60%; min-width: 150px; max-width: 210px;
  padding: 12px 14px 14px;
  border-radius: 15px;
  opacity: var(--c);
  transform: translate3d(calc((1 - var(--c)) * -40px), calc((var(--s) - .64) * -40px), 0) rotate(-4deg);
}
.ht-k { font-size: 12px; font-weight: 750; color: var(--card-light-sub); line-height: 1.2; }
.ht-n { margin-top: 2px; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.ht-n .num { font-size: 21px; }
.ht-pal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
.hp { width: 100%; height: auto; overflow: visible; }
.hp .o { fill: none; stroke: #8390B4; stroke-width: 3.2; transition: opacity 300ms var(--ease) calc(var(--i, 0) * 45ms + 300ms); }
.hp .f { fill: var(--done); transform-box: fill-box; transition: transform 600ms var(--ease) calc(var(--i, 0) * 45ms + 160ms); }
.hp.wrong .f { fill: var(--wrong); }
.hp.done .o, .hp.wrong .o { opacity: 0; }
.js:not(.reduced) .hero:not(.is-card) .hp .f { transform: translateY(101%); transition-delay: 0s; }
.js:not(.reduced) .hero:not(.is-card) .hp .o { opacity: 1; transition-delay: 0s; }

.hero-earn {
  right: -12%; top: 57%;
  display: grid; justify-items: start;
  padding: 10px 14px 11px;
  border-radius: 14px;
  opacity: var(--ch);
  transform: translate3d(0, calc((1 - var(--ch)) * 30px + (var(--s) - .78) * -60px), 0) rotate(3deg) scale(calc(.9 + var(--ch) * .1));
}
.he-n { font-size: 26px; color: var(--done-on-light); }
.he-k { margin-top: 3px; font-size: 12px; font-weight: 750; color: var(--card-light-sub); }

/* ---------- small phones ---------- */
@media (max-width: 370px) {
  .hero-grid { padding-top: calc(var(--header-h) + 10px); }
  .hero-lead { font-size: 17px; }
  .hero-cta .play-badge img { height: 48px; }
  .hero-today { left: -10%; min-width: 136px; padding: 10px 12px 12px; }
}

/* ---------- wide screens: copy left, phone right ---------- */
@media (min-width: 900px) {
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    column-gap: 56px;
    min-height: 100vh;
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 48px;
  }
  .hero-h1 { font-size: clamp(60px, 6.8vw, 96px); }
  .hero-lead { font-size: 21px; margin-top: 22px; }
  .hero-support { font-size: 18px; }
  .hero-cta { margin-top: 30px; }
  .hero-cta .play-badge img { height: 60px; }
  .hero-device { margin-top: 0; }
  .hero-phone { --phone-w: min(340px, calc((100vh - 140px) / 2.16)); }
  .hb-mark { top: 4%; right: -15vw; width: min(40vw, 640px); opacity: .12; }
  .js:not(.reduced) .hero { height: 190vh; }
  .js:not(.reduced) .hero-grid { height: 100%; min-height: 0; padding-bottom: 24px; }
  .js:not(.reduced) .hero-copy { transform: translate3d(0, calc(var(--a) * -24px), 0); opacity: 1; }
  .hero-today { left: -34%; top: 46%; max-width: 220px; }
  .hero-earn { right: -20%; top: 58%; }
}

/* ===== src/sections/02-loop.css ===== */
/* 02-loop: "One reel. Then it's 1 am."
   Sticky, scroll-scrubbed. The clock races from 9:41 pm to 1:07 am while the reel feed (shared .rf
   from 01-hero.css) flicks faster and faster and the textbook page goes dark. Then the feed
   hard-stops, the screen goes ink and a mint padlock draws itself on in pencil.
   02-loop.js writes --n (night, 0 to 1) and --d1 --d2 --d3 (padlock strokes) on the section, and
   deepens the page-wide night layer with Hite.sky.
   Without JS or with reduced motion: a static end-state picture with all the copy in flow. */

.loop { --n: 1; --d1: 1; --d2: 1; --d3: 1; }
.js:not(.reduced) .loop { --n: 0; --d1: 0; --d2: 0; --d3: 0; padding: 0; height: 330vh; }

.loop-stage { position: relative; }
.js:not(.reduced) .loop-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
/* the night itself is the page-wide sky layer (core.js): data-sky on the section, Hite.sky live */

/* ---------- layout: headline, scene, captions (phones) ---------- */
.loop-grid {
  position: relative;
  display: grid;
  grid-template-areas: "head" "scene" "caps";
  row-gap: 24px;
}
.js:not(.reduced) .loop-grid {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: 16px;
  padding-top: calc(var(--header-h) + 14px);
  padding-bottom: 18px;
}
.loop-copy { display: contents; }
.loop-h { grid-area: head; font-size: clamp(32px, 9vw, 60px); }

.loop-caps { grid-area: caps; position: relative; display: grid; gap: 14px; }
.js:not(.reduced) .loop-caps { display: block; height: 132px; }
.lc { font-size: 19px; font-weight: 550; line-height: 1.45; color: var(--paper-2); text-wrap: pretty; }
.lc b { color: var(--paper); font-weight: 800; }
.js:not(.reduced) .lc { position: absolute; inset: 0 0 auto 0; opacity: 0; }
.loop-sub { font-size: 25px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--paper); text-wrap: balance; }
.loop-micro { margin-top: 10px; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--paper-2); }

/* ---------- scene ---------- */
.loop-scene { grid-area: scene; position: relative; height: 560px; container-type: size; }
.js:not(.reduced) .loop-scene { height: auto; }

.loop-clock {
  position: absolute; left: 0; top: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 6px;
  pointer-events: none;
}
.loop-clock .num { font-size: clamp(40px, 12.5cqw, 88px); color: var(--paper); transition: color 500ms var(--ease); }
.loop-ampm { font-family: var(--fc); font-weight: 800; font-size: clamp(18px, 5.4cqw, 34px); color: var(--paper-2); transition: color 500ms var(--ease); }
.loop.is-late .loop-clock .num, .loop.is-late .loop-ampm { color: var(--wrong); }

.loop-book {
  position: absolute;
  left: -2px;
  top: clamp(64px, 17cqw, 120px);
  width: min(56cqw, 300px);
  transform: translate3d(0, calc(var(--n) * 14px), 0) rotate(calc(-6deg - var(--n) * 2deg));
  transform-origin: 30% 80%;
  border-radius: 8px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
}
.loop-book svg { width: 100%; height: auto; border-radius: 8px; }
.lb-k { font: 800 12px var(--f); fill: #59628A; }
.lb-t { font: 800 19px var(--f); fill: #0A1230; letter-spacing: -.01em; }
.lb-rule path { stroke: #D2D7E4; stroke-width: 1; fill: none; }
.lb-txt rect { fill: #A3ABC4; }
.lb-eq { font: 700 15px var(--f); fill: #0A1230; }
.lb-ax { fill: none; stroke: #0A1230; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-pen { fill: none; stroke: #4E5878; stroke-width: 3; stroke-linecap: round; }
.lb-dash { fill: none; stroke: #8A92A8; stroke-width: 1.5; stroke-dasharray: 4 5; }
.lb-hand { font: 400 20px var(--fh); fill: #4E5878; }
.lb-note { font-size: 17px; transform: rotate(-4deg); transform-box: fill-box; transform-origin: center; }
.lb-dim { fill: #050A1C; opacity: calc(var(--n) * .74); }

.loop-phonewrap {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  transform: translate3d(0, calc(var(--n) * -6px), 0);
}
.loop-phone {
  --phone-w: min(54cqw, calc(100cqh / 2.17), 330px);
  box-shadow: inset 0 0 0 1.5px #26305E, 0 28px 64px rgba(0, 0, 0, .5);
}

/* phone screen layers */
.lp-idle {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: #070C21;
  transition: opacity 500ms var(--ease);
}
.lp-idle span { font: 400 calc(76 * var(--u))/1 var(--fc); color: var(--paper-3); letter-spacing: -.02em; transform: translateY(-40%); font-variant-numeric: tabular-nums; }
.lp-note {
  position: absolute; z-index: 6;
  left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(44 * var(--u));
  display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(14 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--ink-4);
  transform: translate3d(0, -150%, 0);
  opacity: 0;
  transition: transform 600ms var(--ease-spring), opacity 300ms var(--ease);
}
.lp-note-ico {
  flex: none; display: grid; place-items: center;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  border-radius: calc(13 * var(--u));
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--ink-4);
  color: var(--paper);
}
.lp-note-ico svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.lp-note-txt { flex: 1; display: grid; gap: calc(9 * var(--u)); }
.lp-note-txt b { display: block; width: 52%; height: calc(11 * var(--u)); border-radius: 9px; background: rgba(238, 241, 248, .85); }
.lp-note-txt i { display: block; width: 86%; height: calc(9 * var(--u)); border-radius: 9px; background: rgba(238, 241, 248, .45); }

.lp-end {
  position: absolute; inset: 0; z-index: 7;
  display: grid; place-items: center;
  background: var(--ink);
}
.lp-end svg { width: 46%; height: auto; overflow: visible; transform: translateY(-6%); }
.lp-end path { fill: none; stroke: var(--done); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.01; }
.lp-s1 { stroke-dashoffset: calc(1 - var(--d1)); opacity: calc(var(--d1) * 40); }
.lp-s2 { stroke-dashoffset: calc(1 - var(--d2)); opacity: calc(var(--d2) * 40); }
.lp-s3 { stroke-dashoffset: calc(1 - var(--d3)); opacity: calc(var(--d3) * 40); }

/* scene states, set by 02-loop.js (static mode shows the end) */
.lp-note, .lp-idle { opacity: 0; }
.js:not(.reduced) .loop .lp-idle { opacity: 1; }
.js:not(.reduced) .loop.is-feed .lp-idle { opacity: 0; }
.js:not(.reduced) .loop.is-note .lp-note { transform: none; opacity: 1; }
.js:not(.reduced) .loop.is-feed .lp-note { transform: translate3d(0, -150%, 0); opacity: 0; transition-duration: 380ms, 300ms; transition-timing-function: var(--ease), var(--ease); }
.js:not(.reduced) .loop .lp-end { opacity: 0; transition: opacity 140ms linear; }
.js:not(.reduced) .loop.is-stop .lp-end { opacity: 1; }
.loop.is-paused .rf-reel * { animation-play-state: paused; }

/* ---------- wide screens: copy left, scene right ---------- */
@media (min-width: 900px) {
  .loop-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head scene" "caps scene";
    column-gap: 64px;
    align-content: center;
  }
  .js:not(.reduced) .loop-grid {
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". scene" "head scene" "caps scene" ". scene";
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 32px;
    row-gap: 28px;
  }
  .loop-h { font-size: clamp(44px, 4.8vw, 64px); align-self: end; }
  .loop-caps { align-self: start; }
  .js:not(.reduced) .loop-caps { height: 220px; }
  .lc { font-size: 22px; }
  .loop-sub { font-size: 34px; }
  .loop-micro { font-size: 17px; }
  .loop-scene { height: 640px; }
  .js:not(.reduced) .loop-scene { height: auto; }
  .loop-clock .num { font-size: clamp(56px, 11cqw, 96px); }
}

/* ===== src/sections/03-how.css ===== */
/* =====================================================================
   03-how: How it works (builder B)
   A pinned phone while three steps advance with scroll. The phone UI is
   drawn in HTML at the app's 390 px design width and scaled with container
   units (1em = 16 design px), so it stays crisp at any size.
   Also holds the hw- helpers shared by 03, 04 and 05 (headline words,
   mini badges).
   ===================================================================== */

/* ---------- shared by builder B sections ---------- */
.hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hw-head { max-width: 46rem; }
.hw-head .kicker + .hw-h { margin-top: 10px; }
.hw-head .lead { margin-top: 14px; max-width: 34em; }

/* headline words rise in after the header reveals */
.js .hw-h .hw-w { display: inline-block; overflow: hidden; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
.js .hw-h .hw-w > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 900ms var(--ease-out-soft); transition-delay: calc(var(--wi, 0) * 55ms + 60ms); }
.js .is-in .hw-h .hw-w > span, .js .hw-h.is-in .hw-w > span { transform: none; }

/* mini palette badge (28 px by default), the app's Badge.tsx shapes */
.hw-mb { position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; aspect-ratio: 1; font: 800 14px/1 var(--fc); font-variant-numeric: tabular-nums; color: var(--ink); }
.hw-mb > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hw-mb > b { position: relative; font-weight: 800; }
.hw-mb-f { fill: var(--done); transition: opacity var(--d-base) var(--ease); }
.hw-mb-e { fill: none; stroke: var(--todo); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--d-base) var(--ease), stroke var(--d-base) var(--ease); }
.hw-mb[data-s="wrong"] .hw-mb-f { fill: var(--wrong); }
.hw-mb[data-s="wrong"] > b { transform: translateY(-9%); }
.hw-mb[data-s="marked"] .hw-mb-f { fill: var(--marked); }
.hw-mb[data-s="todo"], .hw-mb[data-s="cur"] { color: var(--todo-txt); }
.hw-mb[data-s="todo"] .hw-mb-f, .hw-mb[data-s="cur"] .hw-mb-f { opacity: 0; }
.hw-mb[data-s="todo"] .hw-mb-e, .hw-mb[data-s="cur"] .hw-mb-e { opacity: 1; }
.hw-mb[data-s="cur"] { color: var(--paper); }
.hw-mb[data-s="cur"] .hw-mb-e { stroke: var(--paper); stroke-width: 2.5; }
.hw-mb.is-pop { animation: hw-pop .5s var(--ease); }

@keyframes hw-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: none; } }

/* line icons drawn from <symbol>s */
.hw-i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* no transitions while JS sets the first frame */
.hw-noanim, .hw-noanim * { transition: none !important; animation: none !important; }

/* =====================================================================
   section
   ===================================================================== */
.sec.hw-how { padding-bottom: var(--s9); }

.hw-how-track { position: relative; margin-top: var(--s7); }
.hw-how-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

/* ---------- copy ---------- */
.hw-how-dots { display: flex; align-items: center; gap: 8px; max-width: 220px; }
.hw-how-bar { position: relative; flex: 1 1 auto; height: 2px; border-radius: 2px; background: var(--ink-3); overflow: hidden; }
.hw-how-bar > i { position: absolute; inset: 0; background: var(--paper-2); transform-origin: 0 50%; transform: scaleX(1); }

.hw-how-steps { margin-top: var(--s5); display: grid; gap: var(--s7); }
.hw-how-step { position: relative; }
.hw-how-step .h2l { max-width: 16em; }
.hw-how-step .say { margin-top: 10px; max-width: 30em; }
.hw-how-step .say b { color: var(--paper); }
.hw-how-n { display: none; }

/* ---------- device ---------- */
.hw-how-device {
  position: relative;
  container-type: size;
  height: min(150vw, 660px);
  margin-top: var(--s7);
  display: grid;
  place-items: center;
}
.hw-how-phone {
  /* phone width from the space it gets: outer height is about 2.115 x width */
  --phone-w: min(100cqw, 47.2cqh, 360px);
  transform:
    translate3d(0, var(--hw-py, 0px), 0)
    rotate(var(--hw-rot, 0deg))
    scale(var(--hw-sc, 1));
  transform-origin: 50% 60%;
  will-change: transform;
}

/* big step numeral behind the phone, depth only (desktop) */
.hw-how-big {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center end;
  pointer-events: none;
  font-size: min(66cqh, 92cqw);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--ink-2);
  user-select: none;
}
.hw-how-big > span { grid-area: 1 / 1; transform: translate3d(14%, 0, 0); }
.hw-how-big > span:not(:last-child) { opacity: 0; }

/* =====================================================================
   the phone UI (390 px design width, 1em = 16 design px)
   ===================================================================== */
.hw-scr .phone-status { z-index: 3; }
.hw-uiw { position: absolute; inset: 0; container-type: inline-size; }
.hw-ui {
  position: absolute;
  inset: 0;
  font-size: 10px;
  font-size: calc(100cqi / 24.375);
  line-height: 1.4;
  color: var(--paper);
  text-align: left;
}
.hw-ui .hw-i { width: 1.5em; height: 1.5em; }

.hw-lay {
  position: absolute;
  inset: 2.17em 0 0;
  display: flex;
  flex-direction: column;
  padding: 0 1.25em;
  background: var(--ink);
}

/* onboarding frame */
.hw-obt { display: flex; align-items: center; flex: none; height: 4em; }
.hw-obt-back { margin-left: -.25em; }
.hw-strip { display: flex; gap: .375em; margin-left: auto; }
.hw-strip .hw-mb { width: 2em; font-size: .6875em; }
.hw-ob-h { margin-top: .375em; font-size: 1.75em; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.hw-ob-sub { margin-top: .625em; font-size: 1em; line-height: 1.5; color: var(--paper-2); text-wrap: pretty; }

.hw-apps { margin-top: .75em; }
.hw-app { display: flex; align-items: center; gap: .875em; min-height: 4em; padding: .625em 0; border-bottom: 1px solid var(--ink-3); }
.hw-app:last-child { border-bottom: 0; }
.hw-app > b { flex: 1 1 auto; min-width: 0; font-size: 1em; font-weight: 700; }
.hw-app.is-on > b { font-weight: 800; }
.hw-ico { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: .6875em; background: var(--ink-3); color: var(--paper); }
.hw-ico-l { font-weight: 800; color: var(--paper-2); }
.hw-lb { position: relative; display: grid; place-items: center; flex: none; width: 1.875em; height: 1.875em; border-radius: .5625em; box-shadow: inset 0 0 0 1.5px var(--edge); color: var(--ink); }
.hw-lb > i { position: absolute; inset: 0; border-radius: inherit; background: var(--paper); opacity: 0; transform: scale(.55); transition: opacity var(--d-quick) var(--ease), transform 380ms var(--ease-spring); }
.hw-ui .hw-lb > svg { position: relative; width: 1.0625em; height: 1.0625em; stroke-width: 2.1; opacity: 0; transform: scale(.6); transition: opacity var(--d-quick) var(--ease) 60ms, transform 380ms var(--ease-spring) 60ms; }
.hw-lb::after { content: ""; position: absolute; inset: -.6em; border-radius: 50%; background: var(--paper); opacity: 0; transform: scale(.3); pointer-events: none; }
.hw-app.is-on .hw-lb > i, .hw-app.is-on .hw-lb > svg { opacity: 1; transform: none; }
.hw-app.is-tap .hw-lb::after { animation: hw-tap 520ms var(--ease) both; }
@keyframes hw-tap { 0% { opacity: .22; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.15); } }

.hw-foot { margin-top: auto; padding: .75em 0 1.25em; }
.hw-btn { display: flex; align-items: center; justify-content: center; height: 3.06em; border-radius: .82em; background: var(--paper); color: var(--ink); font-size: 1.0625em; font-weight: 800; white-space: nowrap; }
.hw-fine { display: block; margin-top: .7em; font-size: .875em; line-height: 1.4; color: var(--paper-2); text-align: center; }

/* free time steppers */
.hw-steps { margin-top: 1.375em; padding: .25em 1em; border-radius: 1.25em; background: var(--ink-2); }
.hw-stp { display: flex; align-items: center; gap: .75em; min-height: 5.25em; padding: .75em 0; border-bottom: 1px solid var(--ink-3); }
.hw-stp:last-child { border-bottom: 0; }
.hw-stp-l { flex: 1 1 auto; min-width: 0; }
.hw-stp-l b { display: block; font-size: 1em; font-weight: 750; line-height: 1.3; }
.hw-stp-l span { display: block; margin-top: .15em; font-size: .875em; color: var(--paper-2); }
.hw-stp-c { display: flex; align-items: center; gap: .25em; flex: none; }
.hw-sb { position: relative; display: grid; place-items: center; width: 2.75em; height: 2.75em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--edge); color: var(--paper); }
.hw-ui .hw-sb .hw-i { position: relative; width: 1.125em; height: 1.125em; stroke-width: 2.6; }
.hw-sb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink-3); opacity: 0; }
.hw-sb.is-off { box-shadow: inset 0 0 0 1.5px var(--ink-4); color: var(--paper-3); }
.hw-sb.is-press { animation: hw-press 340ms var(--ease); }
.hw-sb.is-press::before { animation: hw-pressbg 340ms var(--ease); }
@keyframes hw-press { 0% { transform: scale(1); } 35% { transform: scale(.88); } 100% { transform: none; } }
@keyframes hw-pressbg { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
.hw-sv { display: flex; align-items: baseline; justify-content: center; gap: .25em; min-width: 5.125em; }
.hw-sv .num { display: inline-block; font-size: 1.875em; }
.hw-sv .num.is-roll { animation: hw-roll 360ms var(--ease); }
@keyframes hw-roll { 0% { opacity: 0; transform: translateY(.4em); } 100% { opacity: 1; transform: none; } }
.hw-sv small { font-size: .8125em; font-weight: 650; color: var(--paper-2); }
.hw-earnl { margin-top: 1.125em; font-size: .9375em; line-height: 1.55; color: var(--paper-2); text-wrap: pretty; }

/* Today */
.hw-tb { display: flex; align-items: center; justify-content: space-between; flex: none; height: 4.5em; }
.hw-tb b { display: block; font-size: 1.375em; font-weight: 800; line-height: 1.15; }
.hw-tb span:not(.hw-askp) { display: block; font-size: .8125em; color: var(--paper-2); }
.hw-askp { display: inline-flex; align-items: center; gap: .45em; height: 2.93em; padding: 0 1.05em 0 .8em; border-radius: 999px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-4); font-size: .9375em; font-weight: 800; }
.hw-ui .hw-askp .hw-i { width: 1.2em; height: 1.2em; stroke-width: 2.5; }
.hw-lede { margin-top: .4em; min-height: 3.3em; font-size: 1.75em; font-weight: 800; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.hw-sn { display: flex; align-items: center; justify-content: space-between; margin-top: .75em; }
.hw-sn b { font-size: .9375em; font-weight: 800; color: var(--paper-2); }
.hw-chip { display: inline-flex; align-items: center; height: 2.93em; padding: 0 1.05em; border-radius: .8em; box-shadow: inset 0 0 0 1.5px var(--edge); font-size: .9375em; font-weight: 800; }

.hw-pal { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75em; margin-top: 1em; }
.hw-b { position: relative; display: grid; place-items: center; aspect-ratio: 1; font-family: var(--fc); font-size: 1.875em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--todo-txt); }
.hw-b > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hw-b > b, .hw-b > i { grid-area: 1 / 1; position: relative; font-style: normal; font-weight: 800; }
.hw-ui .hw-b > i .hw-i { width: .95em; height: .95em; stroke-width: 1.8; }
.hw-b .k { color: var(--ink); opacity: 0; transition: opacity 120ms linear; }
.hw-b .e { fill: none; stroke: var(--todo); stroke-width: 2.2; transition: opacity 150ms linear, stroke 150ms linear; }
.hw-b .f { transform: translateY(64px); transition: transform 600ms var(--ease) var(--dl, 0ms); }
.hw-b .fd { fill: var(--done); }
.hw-b .fw { fill: var(--wrong); }
.hw-b .fm { fill: var(--marked); }
.hw-b[data-s="done"] .fd,
.hw-b[data-s="done"] .fm,
.hw-b[data-s="wrong"] .fw,
.hw-b[data-s="marked"] .fm { transform: none; }
.hw-b:is([data-s="done"], [data-s="wrong"], [data-s="marked"]) .e { opacity: 0; transition: opacity 180ms linear calc(var(--dl, 0ms) + 420ms); }
.hw-b:is([data-s="done"], [data-s="wrong"], [data-s="marked"]) .k { opacity: 1; transition: opacity 330ms linear calc(var(--dl, 0ms) + 270ms); }
.hw-b > :not(.k):not(svg) { transition: opacity 120ms linear; }
.hw-b:is([data-s="done"], [data-s="wrong"], [data-s="marked"]) > :not(.k):not(svg) { opacity: 0; transition: opacity 200ms linear calc(var(--dl, 0ms) + 330ms); }
.hw-b[data-s="wrong"] .k { transform: translateY(-9%); }
.hw-b[data-s="cur"] { color: var(--paper); }
.hw-b[data-s="cur"] .e { stroke: var(--paper); stroke-width: 2.6; }
.hw-b.is-pop { animation: hw-pop 500ms var(--ease) 380ms; }

/* the "up next" ring glides from cell to cell */
.hw-nx {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: calc((100% - 2.25em) / 4);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(calc(var(--c, 0) * (100% + .75em)), calc(var(--r, 0) * (100% + .75em)));
  transition: transform 420ms var(--ease), opacity var(--d-base) var(--ease);
}
.hw-nx::after { content: ""; position: absolute; inset: -.375em; border: .125em solid var(--paper); border-radius: 30%; transition: border-radius var(--d-base) var(--ease); }
.hw-nx.is-round::after { border-radius: 50%; }
.hw-nx.is-off { opacity: 0; }

.hw-leg { display: flex; justify-content: space-between; gap: .5em; margin-top: 1.125em; }
.hw-leg-i { display: flex; align-items: center; gap: .45em; font-size: .875em; font-weight: 650; color: var(--paper-2); white-space: nowrap; }
.hw-leg .hw-mb { width: 2em; font-size: 1em; }

.hw-deal { display: flex; align-items: center; gap: 1em; margin: auto 0 1.25em; padding: .9em 1em; border-radius: 1.25em; background: var(--ink-2); }
.hw-fold { position: relative; flex: none; display: grid; grid-template-columns: repeat(2, 1.1em); grid-template-rows: repeat(2, 1.1em); place-content: center; gap: .3em; width: 3.5em; height: 3.5em; border-radius: .875em; box-shadow: inset 0 0 0 1.5px var(--ink-4); color: var(--paper-2); }
.hw-ui .hw-fold > .hw-i { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.hw-padb { position: absolute; right: -.7em; bottom: -.7em; display: grid; place-items: center; width: 1.875em; height: 1.875em; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 .1875em var(--ink-2); color: var(--ink); }
.hw-padb-ok { position: absolute; inset: 0; border-radius: 50%; background: var(--done); opacity: 0; transition: opacity 300ms var(--ease); }
.hw-ui .hw-pad { position: relative; width: 1.1em; height: 1.1em; stroke-width: 2.3; }
.hw-shackle { transform-box: fill-box; transform-origin: 100% 100%; transition: transform 520ms var(--ease-spring); }
.hw-padb.is-pop { animation: hw-pop 500ms var(--ease); }
.hw-deal-t { min-width: 0; }
.hw-deal-t > b { display: block; font-size: 1em; font-weight: 800; line-height: 1.25; }
.hw-deal-s { display: grid; margin-top: .15em; }
.hw-deal-s > span { grid-area: 1 / 1; font-size: .875em; color: var(--paper-2); transition: opacity 300ms var(--ease), transform 420ms var(--ease); }
.hw-deal-s .s-o { color: var(--done); font-weight: 800; opacity: 0; transform: translateY(.5em); }
.hw-deal.is-open .s-l { opacity: 0; transform: translateY(-.5em); }
.hw-deal.is-open .s-o { opacity: 1; transform: none; }
.hw-deal.is-open .hw-padb-ok { opacity: 1; }
.hw-deal.is-open .hw-shackle { transform: translateY(-2.4px) rotate(16deg); }

.hw-how-micro { margin-top: var(--s7); max-width: 34em; }

/* static (no JS or reduced motion): steps as a list, the phone shows the finished day */
.hw-how:not(.is-live) .hw-lay:not([data-l="2"]) { display: none; }

/* =====================================================================
   live: sticky scrollytelling
   ===================================================================== */
.hw-how.is-live .hw-how-track { height: 460vh; height: 460svh; margin-top: var(--s5); }
.hw-how.is-live .hw-how-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: calc(var(--header-h) + 14px);
  padding-bottom: 14px;
}
.hw-how.is-live .hw-how-steps { display: grid; gap: 0; }
.hw-how.is-live .hw-how-step {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 420ms var(--ease), transform 640ms var(--ease-out-soft);
  pointer-events: none;
}
.hw-how.is-live .hw-how-step.is-past { transform: translate3d(0, -18px, 0); }
.hw-how.is-live .hw-how-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hw-how.is-live .hw-how-device { flex: 1 1 auto; height: auto; min-height: 0; margin-top: var(--s4); }

.hw-how.is-live .hw-lay {
  opacity: 0;
  transform: translate3d(10%, 0, 0);
  transition: opacity 420ms var(--ease), transform 700ms var(--ease-out-soft);
}
.hw-how.is-live .hw-lay.is-past { transform: translate3d(-10%, 0, 0); }
.hw-how.is-live .hw-lay.is-on { opacity: 1; transform: none; }

.hw-how.is-live .hw-how-big > span { opacity: 0; transform: translate3d(14%, 8%, 0); transition: opacity 500ms var(--ease), transform 800ms var(--ease-out-soft); }
.hw-how.is-live .hw-how-big > span.is-past { transform: translate3d(14%, -8%, 0); }
.hw-how.is-live .hw-how-big > span.is-on { opacity: 1; transform: translate3d(14%, 0, 0); }

/* phones and small tablets: tighter copy so the phone gets the room */
@media (max-width: 899px) {
  .hw-how.is-live .hw-how-step .h2l { font-size: 26px; }
  .hw-how.is-live .hw-how-step .say { margin-top: 8px; font-size: 16px; line-height: 1.5; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .hw-how.is-live .hw-how-stage { padding-top: calc(var(--header-h) + 8px); }
  .hw-how.is-live .hw-how-steps { margin-top: 12px; }
  .hw-how.is-live .hw-how-step .h2l { font-size: 23px; }
  .hw-how.is-live .hw-how-step .say { font-size: 15px; line-height: 1.45; }
}

/* =====================================================================
   desktop: copy left, phone right, all three steps listed
   ===================================================================== */
@media (min-width: 900px) {
  .hw-how-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--s10); }
  .hw-how-device { height: min(86vh, 720px); margin-top: 0; }
  .hw-how-big { display: grid; place-items: center start; font-size: min(70cqh, 60cqw); }
  .hw-how-big > span { transform: translate3d(-6%, 0, 0); }
  .hw-how-n { display: block; position: absolute; left: 0; top: 2px; font-size: 22px; color: var(--paper-3); }
  .hw-how-step { padding-left: 44px; }
  .hw-how-step .say { font-size: var(--t-body); }

  .hw-how.is-live .hw-how-stage { padding-top: calc(var(--header-h) + 24px); padding-bottom: 24px; }
  .hw-how.is-live .hw-how-device { height: 100%; margin-top: 0; }
  .hw-how.is-live .hw-how-steps { gap: var(--s8); margin-top: var(--s8); }
  .hw-how.is-live .hw-how-step,
  .hw-how.is-live .hw-how-step.is-past { grid-area: auto; opacity: .3; transform: none; pointer-events: auto; }
  .hw-how.is-live .hw-how-step.is-on { opacity: 1; }
  .hw-how.is-live .hw-how-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 38px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: var(--paper);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform 700ms var(--ease-out-soft);
  }
  .hw-how.is-live .hw-how-step.is-on::before { transform: scaleY(1); }
  .hw-how.is-live .hw-how-big > span,
  .hw-how.is-live .hw-how-big > span.is-on { transform: translate3d(-6%, 0, 0); }
  .hw-how.is-live .hw-how-big > span:not(.is-on) { transform: translate3d(-6%, 8%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hw-how-phone { transform: none; will-change: auto; }
}

/* ===== src/sections/04-earn.css ===== */
/* =====================================================================
   04-earn: Earn your screen time (builder B)
   A sticky minutes counter with the rate card as a ledger under it: each
   row lands as you scroll past and pays into the counter. Then the hint
   ladder, and a real JEE Main question you can answer on the page.
   Uses .hw-mb, .hw-i, .hw-h words and .hw-noanim from 03-how.css.
   ===================================================================== */

/* ---------- scene ---------- */
.hw-scene { position: relative; margin-top: var(--s8); }

.hw-bank-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: 3;
  margin: 0 calc(var(--gutter) * -1);
  padding: 10px var(--gutter) 14px;
  background: var(--ink);
}
/* a short fade under the sticky counter so rows slide out of sight softly */
.hw-bank-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 28px;
  background: linear-gradient(var(--ink), rgba(10, 18, 48, 0));
  pointer-events: none;
}
.hw-bank { position: relative; padding: 16px 20px 14px; border-radius: var(--r-panel); background: var(--ink-2); }
.hw-bank-ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--done); opacity: 0; pointer-events: none; }
.hw-bank-ring.is-minus { box-shadow: inset 0 0 0 2px var(--wrong); }
.hw-bank-row { position: relative; display: flex; align-items: baseline; gap: 8px; }
.hw-bank-n { display: inline-block; font-size: clamp(60px, 17vw, 112px); transform-origin: 0 80%; }
.hw-bank-u { font-size: 17px; font-weight: 650; color: var(--paper-2); }
.hw-bank-lock { align-self: center; width: 26px; height: 26px; margin-left: 4px; color: var(--paper-2); stroke-width: 2.1; transition: color 300ms var(--ease); }
.hw-bank-lock .hw-shackle { transform-box: fill-box; transform-origin: 100% 100%; transition: transform 520ms var(--ease-spring); }
.hw-bank.is-open .hw-bank-lock { color: var(--done); }
.hw-bank.is-open .hw-bank-lock .hw-shackle { transform: translateY(-2.4px) rotate(16deg); }
.hw-bank-d { position: absolute; right: 0; top: 4px; font-size: 26px; opacity: 0; pointer-events: none; }
.hw-bank-l { display: grid; margin-top: 6px; font-size: 15px; font-weight: 650; color: var(--paper-2); }
.hw-bank-l > span { grid-area: 1 / 1; transition: opacity 300ms var(--ease), transform 420ms var(--ease); }
.hw-bank-l .s-o { color: var(--done); font-weight: 800; opacity: 0; transform: translateY(8px); }
.hw-bank.is-open .hw-bank-l .s-l { opacity: 0; transform: translateY(-8px); }
.hw-bank.is-open .hw-bank-l .s-o { opacity: 1; transform: none; }

/* ---------- ledger rows ---------- */
.hw-ledger { position: relative; display: grid; gap: clamp(18px, 5vh, 48px); margin-top: var(--s5); }
.hw-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px;
  border-radius: var(--r-panel);
  background: var(--ink-2);
}
.hw-row::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--done-tint); opacity: 0; pointer-events: none; }
.hw-row[data-amt^="-"]::after { background: var(--wrong-tint); }
.hw-row.is-flash::after { animation: hw-wash 1s var(--ease); }
@keyframes hw-wash { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
.hw-row-t { flex: 1 1 auto; min-width: 0; }
.hw-row-t > b { display: block; font-size: var(--t-body); font-weight: 800; line-height: 1.25; text-wrap: balance; }
.hw-row-t > span { display: block; margin-top: 3px; font-size: var(--t-small); line-height: 1.4; color: var(--paper-2); text-wrap: pretty; }
.hw-amt { display: flex; align-items: baseline; gap: 3px; flex: none; margin-left: auto; font-size: 30px; }
.hw-amt small { font-family: var(--f); font-size: var(--t-micro); font-weight: 650; color: var(--paper-2); }
.hw-row.is-pop .hw-amt { animation: hw-pop 500ms var(--ease); }
.hw-row-end { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.hw-row-end::after { border-radius: inherit; }

/* row badge: hollow until the row lands, then the colour rises like Today's palette */
.hw-rb { position: relative; display: grid; place-items: center; flex: none; width: 44px; aspect-ratio: 1; color: var(--todo-txt); }
.hw-rb > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hw-rb > i { grid-area: 1 / 1; position: relative; display: grid; font-style: normal; }
.hw-rb .hw-i { width: 22px; height: 22px; }
.hw-i-ck { stroke-width: 3.2; }
.hw-rb .k { color: var(--ink); opacity: 0; transition: opacity 120ms linear; }
.hw-rb .e { fill: none; stroke: var(--todo); stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity 150ms linear; }
.hw-rb .f { fill: var(--done); transform: translateY(64px); transition: transform 600ms var(--ease); }
.hw-rb .fw { fill: var(--wrong); }
.hw-row.is-hit .hw-rb .f { transform: none; }
.hw-row.is-hit .hw-rb .e { opacity: 0; transition: opacity 180ms linear 420ms; }
.hw-row.is-hit .hw-rb .k { opacity: 1; transition: opacity 330ms linear 270ms; }
.hw-rb > i:not(.k) { transition: opacity 120ms linear; }
.hw-row.is-hit .hw-rb > i:not(.k) { opacity: 0; transition: opacity 200ms linear 330ms; }
.hw-res-b > i:not(.k) { display: none; }
.hw-rb[data-s="wrong"] > i { transform: translateY(-9%); }

/* live: rows slide in with scroll (JS writes --e from 0 to 1 per row) */
.hw-earn.is-live .hw-row {
  opacity: calc(.12 + .88 * var(--e, 1));
  transform:
    translate3d(calc((1 - var(--e, 1)) * 64px), calc((1 - var(--e, 1)) * 28px), 0)
    rotate(calc((1 - var(--e, 1)) * 4deg));
  transform-origin: 0 50%;
}

/* flying minutes: a chip and a few minute grains travel from the row to the counter */
.hw-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: var(--done);
  color: var(--ink);
  font-family: var(--fc);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform, opacity;
}
.hw-fly.is-minus { background: var(--wrong); }
.hw-grain { position: fixed; left: 0; top: 0; z-index: 60; width: 7px; height: 7px; border-radius: 50%; background: var(--done); pointer-events: none; will-change: transform, opacity; }
.hw-grain.is-minus { background: var(--wrong); }

/* ---------- hints and fine print ---------- */
.hw-more { display: grid; gap: var(--s8); margin-top: var(--s11); }
.hw-hints > .say { margin-top: 8px; }
.hw-ladder { margin-top: var(--s5); padding: 4px 16px; }
.hw-ladder > li { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--ink-3); }
.hw-ladder > li:last-child { border-bottom: 0; }
.hw-ladder > li > b { flex: 1 1 auto; font-size: var(--t-body); font-weight: 800; }
.hw-ladder > li > .num { font-size: 21px; }
.hw-rung { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--edge); font-size: 15px; color: var(--paper-2); }
.hw-twin .hw-mb { width: 28px; }
.hw-twin .hw-mb .hw-i { position: relative; width: 16px; height: 16px; color: var(--ink); }
.hw-twin-say { margin-top: 12px; font-size: var(--t-label); }
.hw-fine-big { max-width: 26em; font-size: var(--t-lead); font-weight: 550; line-height: 1.45; color: var(--paper-2); text-wrap: pretty; }
.hw-fine-big b { color: var(--paper); font-weight: 800; }

/* ---------- try it ---------- */
.hw-try { display: grid; gap: var(--s6); margin-top: var(--s11); }
.hw-try-head .say { margin-top: 10px; max-width: 28em; }
.hw-q {
  --surface: var(--ink);
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 0 18px 20px;
  border-radius: var(--r-sheet);
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-4), var(--shadow-card);
}
.hw-q-bar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; margin: 0 -18px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--ink-3); }
.hw-q-ttl { font-size: var(--t-h2); font-weight: 800; }
.hw-bal { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 999px; font-family: var(--fc); font-size: 18px; font-weight: 800; white-space: nowrap; }
.hw-bal .hw-i { width: 16px; height: 16px; color: var(--paper-2); stroke-width: 2; }
.hw-bal small { font-family: var(--f); font-size: var(--t-micro); font-weight: 650; color: var(--paper-2); }
.hw-bal .num { display: inline-block; }
.hw-bal-ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--done); opacity: 0; pointer-events: none; }
.hw-bal-ring.is-minus { box-shadow: inset 0 0 0 2px var(--wrong); }

.hw-qh { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.hw-qb { position: relative; display: grid; place-items: center; flex: none; width: 52px; aspect-ratio: 1; font-family: var(--fc); font-size: 20px; font-weight: 800; color: var(--todo-txt); }
.hw-qb > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hw-qb > b { grid-area: 1 / 1; position: relative; }
.hw-qb .k { color: var(--ink); opacity: 0; transition: opacity 120ms linear; }
.hw-qb .e { fill: none; stroke: var(--todo); stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity 150ms linear; }
.hw-qb .f { transform: translateY(64px); transition: transform 600ms var(--ease); }
.hw-qb .fd, .hw-res-b .fd { fill: var(--done); }
.hw-qb .fw, .hw-res-b .fw { fill: var(--wrong); }
.hw-qb[data-s="done"] .fd, .hw-qb[data-s="wrong"] .fw { transform: none; }
.hw-qb:not([data-s="todo"]) .e { opacity: 0; transition: opacity 180ms linear 420ms; }
.hw-qb:not([data-s="todo"]) .k { opacity: 1; transition: opacity 330ms linear 270ms; }
.hw-qb > b:not(.k) { transition: opacity 120ms linear; }
.hw-qb:not([data-s="todo"]) > b:not(.k) { opacity: 0; transition: opacity 200ms linear 330ms; }
.hw-qb[data-s="wrong"] .k { transform: translateY(-9%); }
.hw-qh-t { flex: 1 1 auto; min-width: 0; }
.hw-qh-t > p:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hw-qh-t b { font-size: var(--t-body); font-weight: 800; }
.hw-qh-s { margin-top: 2px; font-size: var(--t-small); color: var(--paper-2); }
.hw-qh-m { align-self: flex-start; margin-top: 4px; flex: none; font-size: 18px; white-space: nowrap; }

.hw-stem { margin-top: 18px; font-size: var(--t-stem); line-height: 1.6; text-wrap: pretty; }
.hw-blank { display: inline-block; width: 3.2em; height: 1em; border-bottom: 2px solid var(--paper); vertical-align: -.1em; }
.hw-mv { padding: 0 .06em; font-family: KaTeX_Math, "Cambria Math", "Times New Roman", serif; font-style: italic; font-size: 1.06em; }
.hw-nw { white-space: nowrap; }

/* OMR bubbles (ds.css section 8) */
.hw-omr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 18px -4px 0; }
.hw-bub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 0 8px;
  border-radius: 16px;
  color: var(--paper);
  -webkit-touch-callout: none;
  transition: transform var(--d-quick) var(--ease);
}
.hw-bub:active:not([aria-disabled]) { transform: scale(.96); }
.hw-bub > svg { width: 58px; height: 58px; overflow: visible; }
.hw-bub .ring { fill: none; stroke: var(--todo); stroke-width: 2; transition: stroke .25s; }
.hw-bub .scrib { fill: none; stroke: url(#hw4-gt); stroke-width: 10.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; opacity: 0; }
.hw-bub .let { font-family: var(--fc); font-size: 21px; font-weight: 800; fill: var(--todo-txt); transition: fill .2s; }
.hw-bub[aria-checked="true"] .scrib { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .42s cubic-bezier(.35, .55, .3, 1), opacity .05s; }
.hw-bub[aria-checked="true"] .let { fill: var(--ink); }
.hw-bub[aria-checked="true"] .ring { stroke: var(--paper-2); }
.hw-bub .val { font-size: 21px; line-height: 1.2; }
.hw-bub .rtag { min-height: 18px; font-size: var(--t-tab); font-weight: 800; }
.hw-bub.is-right .ring { stroke: var(--done); stroke-width: 3; }
.hw-bub.is-right .rtag { color: var(--done); }
.hw-bub.is-wrong .ring { stroke: var(--wrong); stroke-width: 3; }
.hw-bub.is-wrong .rtag { color: var(--wrong); }
.hw-bub[aria-disabled] { cursor: default; }
.hw-bub:focus-visible { outline-offset: 0; border-radius: 16px; }
@media (hover: hover) {
  .hw-bub:not([aria-disabled]):not([aria-checked="true"]):hover .ring { stroke: var(--paper-2); }
}

/* teacher marks: a pen tick or cross drawn on once after Lock in */
.hw-tmark { position: absolute; top: 0; left: 50%; width: 30px; height: 30px; margin-left: 8px; overflow: visible; pointer-events: none; }
.hw-tmark path { fill: none; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: hw-ink var(--d-ink) var(--ease-pencil) both; }
.hw-tmark .halo { stroke: var(--surface, var(--ink)); stroke-width: 10; }
.hw-tmark.tick path:not(.halo) { stroke: var(--done); }
.hw-tmark.cross path:not(.halo) { stroke: var(--wrong); }
.hw-tmark .s2 { animation-delay: 170ms; }
@keyframes hw-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.hw-lockin { width: 100%; margin-top: 22px; }
.hw-lockin:disabled { background: var(--ink-3); color: var(--paper-2); cursor: default; transform: none; }

/* result panel */
.hw-res:focus { outline: none; }
.hw-res { margin-top: 22px; padding: 18px 16px 12px; border-radius: var(--r-panel); background: var(--ink-2); --surface: var(--ink-2); }
.hw-res.is-go { animation: hw-resin 450ms var(--ease); }
@keyframes hw-resin { from { transform: scale(.97); opacity: .4; } to { transform: none; opacity: 1; } }
.hw-res-h { display: flex; align-items: center; gap: 12px; }
.hw-res-b { width: 40px; }
.hw-res-b .f { transform: translateY(64px); transition: transform 600ms var(--ease) 80ms; }
.hw-res.is-go .hw-res-b[data-s="done"] .fd, .hw-res.is-go .hw-res-b[data-s="wrong"] .fw { transform: none; }
.hw-res-b .k { opacity: 0; transition: opacity 300ms linear 350ms; }
.hw-res-b .hw-i { width: 20px; height: 20px; }
.hw-res.is-go .hw-res-b[data-s="done"] .hw-res-ck, .hw-res.is-go .hw-res-b[data-s="wrong"] .hw-res-x { opacity: 1; }
.hw-res-amt { display: inline-block; font-size: 30px; }
.hw-res-amt.is-plus { color: var(--done); }
.hw-res-amt.is-minus { color: var(--wrong); }
.hw-res-what { margin-top: 10px; font-size: var(--t-label); line-height: 1.45; color: var(--paper-2); }
.hw-res-what b { color: var(--paper); font-weight: 800; }
.hw-res-more { margin-top: 4px; }
.hw-work { margin-top: 10px; }
.hw-work > p { font-size: var(--t-note); line-height: 1.65; }
.hw-work > p + p { margin-top: 8px; }
.hw-boxed-p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hw-boxed { position: relative; display: inline-block; padding: 4px 12px; font-weight: 700; }
.hw-boxed > svg { position: absolute; inset: -1px -2px; width: calc(100% + 4px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.hw-boxed path { fill: none; stroke: var(--vr); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hw-work.is-draw .hw-boxed path { animation: hw-ink 500ms var(--ease-pencil) both; }
.hw-work.is-draw .hw-boxed path:nth-child(2) { animation-delay: 120ms; }
.hw-work.is-draw .hw-boxed path:nth-child(3) { animation-delay: 240ms; }
.hw-work.is-draw .hw-boxed path:nth-child(4) { animation-delay: 360ms; }
.hw-src { font-size: var(--t-small) !important; color: var(--paper-2); }
.hw-again { width: 100%; margin-top: 14px; }

/* no JS: the work is simply shown, boxed */
html:not(.js) .hw-boxed path { stroke-dashoffset: 0; }

/* =====================================================================
   desktop
   ===================================================================== */
@media (min-width: 900px) {
  .hw-scene { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s10); align-items: start; }
  .hw-bank-wrap { top: calc(var(--header-h) + 18vh); margin: 0; padding: 0; background: none; }
  .hw-bank-wrap::after { display: none; }
  .hw-bank { padding: 28px 28px 24px; }
  .hw-ledger { margin-top: 0; gap: clamp(24px, 7vh, 72px); padding: 6vh 0 12vh; }
  .hw-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s10); }
  .hw-try { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: var(--s10); }
  .hw-try-head { position: sticky; top: calc(var(--header-h) + 48px); }
  .hw-q { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-earn.is-live .hw-row { opacity: 1; transform: none; }
}

/* ===== src/sections/05-guard.css ===== */
/* =====================================================================
   05-guard: Built for your weakest moment (builder B)
   The section sinks toward night as it arrives (JS writes --hw-night) and a
   thin moon rises. Five cards, each with a small looping drawing. Loops run
   only while their card is on screen (.is-run); without it, or under reduced
   motion, every drawing rests on its most telling frame.
   Uses .hw-i, .hw-h words and .hw-head from 03-how.css.
   ===================================================================== */

.sec.hw-guard { isolation: isolate; }
.hw-guard-in { position: relative; z-index: 1; }

/* ---------- night sky ---------- */
.hw-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hw-sky-deep {
  position: absolute;
  inset: 0;
  background: var(--ink-0);
  opacity: var(--hw-night, 0);
  -webkit-mask-image: linear-gradient(transparent, #000 28vh, #000 calc(100% - 28vh), transparent);
  mask-image: linear-gradient(transparent, #000 28vh, #000 calc(100% - 28vh), transparent);
}
/* with JS the page-wide sky layer (data-sky on the section) carries the night instead */
.js .hw-sky-deep { display: none; }
.hw-sky-moon {
  position: absolute;
  top: 56px;
  right: max(4%, calc(50% - 600px));
  width: clamp(72px, 18vw, 150px);
  height: auto;
  fill: var(--paper-3);
  opacity: calc(var(--hw-night, 0) * .32);
  transform: translate3d(0, calc((1 - var(--hw-night, 0)) * 150px), 0) rotate(calc(-24deg + var(--hw-night, 0) * 24deg));
}

/* ---------- cards ---------- */
.hw-cards { display: grid; gap: var(--s4); margin-top: var(--s8); }
.hw-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-panel); background: var(--ink-2); }
.hw-art { position: relative; height: 180px; border-bottom: 1px solid var(--ink-3); overflow: hidden; border-radius: var(--r-panel) var(--r-panel) 0 0; }
.hw-art-in { width: 100%; height: 100%; display: grid; place-items: center; }
.hw-card-t { padding: 18px 20px 22px; }
.hw-card-t p { margin-top: 8px; font-size: var(--t-note); line-height: 1.55; color: var(--paper-2); text-wrap: pretty; }
.hw-guard-micro { margin-top: var(--s7); max-width: 34em; }

/* ---------- 1. night lock ---------- */
.hw-night { width: min(100%, 330px); height: auto; overflow: visible; }
.hw-n-rim { fill: none; stroke: var(--edge); stroke-width: 2; }
.hw-n-band { fill: none; stroke: var(--ink-4); stroke-width: 10; stroke-linecap: round; }
.hw-n-ticks { fill: none; stroke: var(--paper-3); stroke-width: 2; stroke-linecap: round; }
.hw-n-hand { transform-box: view-box; transform-origin: 96px 82px; transform: rotate(345deg); }
.hw-n-hand path { fill: none; stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
.hw-n-hand circle { fill: var(--paper); }
.hw-n-lab { font-family: var(--f); font-size: 12px; font-weight: 700; fill: var(--paper-3); }
.hw-n-moon { fill: var(--paper-2); transform-box: fill-box; transform-origin: 50% 50%; }
.hw-n-tile { fill: none; stroke: var(--ink-4); stroke-width: 2; }
.hw-n-ig { color: var(--paper); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hw-n-badge { fill: var(--paper); stroke: var(--ink-2); stroke-width: 3; }
.hw-n-ok { fill: var(--done); stroke: var(--ink-2); stroke-width: 3; opacity: 0; }
.hw-n-pad { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.hw-n-sh { transform-box: fill-box; transform-origin: 100% 100%; }

.hw-c-night.is-run .hw-n-hand { animation: hw-n-hand 12s linear infinite; }
.hw-c-night.is-run .hw-n-sh { animation: hw-n-sh 12s infinite; }
.hw-c-night.is-run .hw-n-ok { animation: hw-n-ok 12s infinite; }
.hw-c-night.is-run .hw-n-moon { animation: hw-n-moon 12s var(--ease) infinite; }
/* 11:30 pm sits at 345 deg; the band to 6 am is 195 deg, so 54% of the turn is night */
@keyframes hw-n-hand { from { transform: rotate(345deg); } to { transform: rotate(705deg); } }
@keyframes hw-n-sh {
  0%, 54% { transform: none; animation-timing-function: var(--ease-spring); }
  58%, 96% { transform: translateY(-2.4px) rotate(16deg); animation-timing-function: var(--ease); }
  100% { transform: none; }
}
@keyframes hw-n-ok { 0%, 54% { opacity: 0; } 57%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes hw-n-moon { 0%, 50% { opacity: 1; transform: none; } 60%, 90% { opacity: .18; transform: translateY(7px); } 100% { opacity: 1; transform: none; } }

/* ---------- 2. no midnight deals ---------- */
.hw-deal5 { grid-template-columns: repeat(5, auto); place-items: center start; align-content: center; justify-content: center; column-gap: 10px; row-gap: 18px; padding: 0 16px; }
.hw-dr { display: contents; }
.hw-dr-btn { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--edge); color: var(--paper); }
.hw-dr-btn .hw-i { width: 16px; height: 16px; stroke-width: 2.6; }
.hw-dr-v { display: grid; justify-items: end; min-width: 46px; }
.hw-dr-v .num { grid-area: 1 / 1; font-size: 28px; }
.hw-dr-v .a { opacity: 0; }
.hw-dr > small { margin-left: -6px; font-size: var(--t-micro); font-weight: 650; color: var(--paper-2); }
.hw-dial { flex: none; width: 26px; height: 26px; margin-left: 2px; fill: none; stroke: var(--paper-3); stroke-width: 1.6; stroke-linecap: round; overflow: visible; }
.hw-dial-h { stroke: var(--paper); stroke-width: 2.4; transform-box: view-box; transform-origin: 12px 12px; }
.hw-stamp {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 30px;
  margin-left: 2px;
  padding: 0 11px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--paper);
  font-size: var(--t-small);
  font-weight: 800;
  white-space: nowrap;
  transform: rotate(-6deg);
}

.hw-c-deal.is-run .hw-dr-1 .hw-dr-btn { animation: hw-d-p1 9s var(--ease) infinite; }
.hw-c-deal.is-run .hw-dr-1 .a { animation: hw-d-a1 9s var(--ease) infinite; }
.hw-c-deal.is-run .hw-dr-1 .b { animation: hw-d-b1 9s var(--ease) infinite; }
.hw-c-deal.is-run .hw-dr-1 .hw-stamp { animation: hw-d-s1 9s var(--ease) infinite; }
.hw-c-deal.is-run .hw-dr-2 .hw-dr-btn { animation: hw-d-p2 9s var(--ease) infinite; }
.hw-c-deal.is-run .hw-dr-2 .a { animation: hw-d-a2 9s var(--ease) infinite; }
.hw-c-deal.is-run .hw-dr-2 .b { animation: hw-d-b2 9s var(--ease) infinite; }
.hw-c-deal.is-run .hw-dial-h { animation: hw-d-dial 9s var(--ease-pencil) infinite; }
.hw-c-deal.is-run .hw-dr-2 .hw-stamp { animation: hw-d-s2 9s var(--ease) infinite; }
@keyframes hw-d-p1 { 0%, 8% { transform: none; } 10% { transform: scale(.86); } 14%, 100% { transform: none; } }
@keyframes hw-d-a1 { 0%, 9% { opacity: 1; transform: none; } 13%, 92% { opacity: 0; transform: translateY(-45%); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes hw-d-b1 { 0%, 9% { opacity: 0; transform: translateY(45%); } 13%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(45%); } }
@keyframes hw-d-s1 { 0%, 14% { opacity: 0; transform: rotate(-6deg) scale(1.7); } 18% { opacity: 1; transform: rotate(-6deg) scale(.94); } 21%, 91% { opacity: 1; transform: rotate(-6deg) scale(1); } 96%, 100% { opacity: 0; transform: rotate(-6deg) scale(1); } }
@keyframes hw-d-p2 { 0%, 34% { transform: none; } 36% { transform: scale(.86); } 40%, 100% { transform: none; } }
@keyframes hw-d-a2 { 0%, 35% { opacity: 1; transform: none; } 39%, 92% { opacity: 0; transform: translateY(-45%); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes hw-d-b2 { 0%, 35% { opacity: 0; transform: translateY(45%); } 39%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(45%); } }
@keyframes hw-d-dial { 0%, 40% { transform: rotate(0deg); } 68%, 100% { transform: rotate(360deg); } }
@keyframes hw-d-s2 { 0%, 68% { opacity: 0; transform: rotate(-6deg) scale(1.7); } 72% { opacity: 1; transform: rotate(-6deg) scale(.94); } 75%, 91% { opacity: 1; transform: rotate(-6deg) scale(1); } 96%, 100% { opacity: 0; transform: rotate(-6deg) scale(1); } }

/* ---------- 3. emergency unlock ---------- */
.hw-sos { display: flex; align-items: center; justify-content: center; gap: 24px; }
.hw-sos-ring { position: relative; flex: none; width: 132px; height: 132px; }
.hw-sos-ring > svg { width: 100%; height: 100%; }
.hw-sos-track { fill: none; stroke: var(--ink-3); stroke-width: 8; }
.hw-sos-segs path { fill: none; stroke: var(--paper-2); stroke-width: 8; stroke-linecap: round; }
.hw-sos-c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.hw-sos-c b { font-size: 36px; }
.hw-sos-c small { margin-top: 2px; font-size: var(--t-micro); font-weight: 650; color: var(--paper-2); }
.hw-tok-row { display: flex; gap: 8px; }
.hw-tok-row i { position: relative; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--edge); }
.hw-tok-row i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--paper); }
.hw-tok-l { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; font-size: var(--t-small); font-weight: 650; color: var(--paper-2); white-space: nowrap; }
.hw-tok-n { display: grid; }
.hw-tok-n .num { grid-area: 1 / 1; font-size: 20px; color: var(--paper); }
.hw-tok-n .n1 { opacity: 0; }

.hw-c-sos.is-run .hw-tok-row .t1::before { animation: hw-t-use 10s var(--ease) infinite; }
.hw-c-sos.is-run .hw-tok-n .n2 { animation: hw-t-n2 10s var(--ease) infinite; }
.hw-c-sos.is-run .hw-tok-n .n1 { animation: hw-t-n1 10s var(--ease) infinite; }
@keyframes hw-t-use { 0%, 9% { opacity: 1; transform: none; } 12%, 94% { opacity: 0; transform: scale(.5); } 99%, 100% { opacity: 1; transform: none; } }
@keyframes hw-t-n2 { 0%, 9% { opacity: 1; transform: none; } 12%, 94% { opacity: 0; transform: translateY(-40%); } 99%, 100% { opacity: 1; transform: none; } }
@keyframes hw-t-n1 { 0%, 9% { opacity: 0; transform: translateY(40%); } 12%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(40%); } }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(1) { animation: hw-sg0 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(2) { animation: hw-sg1 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(3) { animation: hw-sg2 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(4) { animation: hw-sg3 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(5) { animation: hw-sg4 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(6) { animation: hw-sg5 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(7) { animation: hw-sg6 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(8) { animation: hw-sg7 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(9) { animation: hw-sg8 10s linear infinite; }
.hw-c-sos.is-run .hw-sos-segs path:nth-child(10) { animation: hw-sg9 10s linear infinite; }
@keyframes hw-sg0 { 0%, 12.0% { opacity: 1; } 14.2%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg1 { 0%, 19.4% { opacity: 1; } 21.6%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg2 { 0%, 26.8% { opacity: 1; } 29.0%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg3 { 0%, 34.2% { opacity: 1; } 36.4%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg4 { 0%, 41.6% { opacity: 1; } 43.8%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg5 { 0%, 49.0% { opacity: 1; } 51.2%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg6 { 0%, 56.4% { opacity: 1; } 58.6%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg7 { 0%, 63.8% { opacity: 1; } 66.0%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg8 { 0%, 71.2% { opacity: 1; } 73.4%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }
@keyframes hw-sg9 { 0%, 78.6% { opacity: 1; } 80.8%, 93% { opacity: .12; } 98%, 100% { opacity: 1; } }

/* ---------- 4. essentials ---------- */
.hw-ess { display: flex; justify-content: center; gap: clamp(6px, 2.4vw, 12px); padding: 0 12px; }
.hw-ess > li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--t-tab); font-weight: 700; color: var(--paper-2); }
.hw-ess > li > span { display: grid; place-items: center; width: clamp(44px, 12.5vw, 56px); aspect-ratio: 1; border-radius: 15px; background: var(--ink-3); color: var(--paper); }
.hw-c-ess.is-run .hw-ess > li > span { animation: hw-ess 4.8s var(--ease) infinite; animation-delay: calc(var(--k) * 150ms); }
@keyframes hw-ess { 0%, 100% { transform: none; } 7% { transform: translateY(-8px); } 16% { transform: none; } }

/* ---------- 5. privacy ---------- */
.hw-priv { display: flex; align-items: center; justify-content: center; gap: 24px; }
.hw-mini { position: relative; display: flex; flex-direction: column; gap: 8px; flex: none; width: 96px; height: 148px; padding: 10px 8px; border-radius: 18px; background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.hw-mini-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 4px; font-size: 11px; font-weight: 800; }
.hw-mini-bar .hw-i { width: 14px; height: 14px; stroke-width: 2.2; }
.hw-mini-scan { position: absolute; left: 5px; right: 5px; top: 7px; height: 28px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px var(--paper); }
.hw-mini-body { flex: 1 1 auto; display: grid; align-content: start; gap: 6px; }
.hw-mini-body i { height: 20px; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--ink-3) 0 3px, transparent 3px 7px); }
.hw-mini-kb { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.hw-mini-kb i { height: 8px; border-radius: 2px; background: var(--ink-3); }
.hw-seen { display: grid; justify-items: start; }
.hw-seen small { font-size: var(--t-micro); font-weight: 700; color: var(--paper-3); }
.hw-seen b { font-size: 20px; font-weight: 800; line-height: 1.25; }
.hw-seen-no { margin-top: 10px; font-size: var(--t-micro); line-height: 1.4; color: var(--paper-2); }

.hw-c-priv.is-run .hw-mini-scan { animation: hw-p-scan 6s var(--ease) infinite; }
.hw-c-priv.is-run .hw-seen b { animation: hw-p-seen 6s var(--ease) infinite; }
@keyframes hw-p-scan { 0%, 8% { opacity: 0; transform: scale(1.18); } 16%, 76% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: none; } }
@keyframes hw-p-seen { 0%, 16% { opacity: 0; transform: translateX(-12px); } 24%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: none; } }

/* ---------- wider screens: a calm bento ---------- */
@media (min-width: 720px) {
  .hw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-c-night { grid-column: 1 / -1; flex-direction: row; }
  .hw-c-night .hw-art { flex: 1.25 1 0; height: auto; min-height: 240px; border-bottom: 0; border-right: 1px solid var(--ink-3); border-radius: var(--r-panel) 0 0 var(--r-panel); }
  .hw-c-night .hw-card-t { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; padding: 28px; }
}
@media (min-width: 1040px) {
  .hw-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hw-c-night { grid-column: span 4; }
  .hw-c-deal { grid-column: span 2; }
  .hw-c-sos, .hw-c-ess, .hw-c-priv { grid-column: span 2; }
  .hw-c-night .hw-art { min-height: 260px; }
}

/* ===== src/sections/06-learn.css ===== */
/* 06 Learn (builder C): the live Vectors step, lesson steps, stats, the one-shot, chapter rows */

.lrn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lrn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.lrn-head { display: grid; gap: 12px; }
.lrn-lead { max-width: 36ch; }

/* ---------- the lesson step card ---------- */
.lrn-try {
  position: relative;
  margin: 0;
  padding: 20px 14px 16px;
  border-radius: 28px;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-3), var(--shadow-card);
}
.lrn-crumb { display: flex; gap: 8px; align-items: baseline; padding-inline: 4px; font-size: var(--t-micro); color: var(--paper-2); }
.lrn-crumb::before { content: none; }
.lrn-crumb > span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 3px 0; border-radius: 2px; background: var(--ink-4); }
.lrn-try-h { margin-top: 6px; padding-inline: 4px; font-size: var(--t-title); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
.lrn-strip { display: flex; align-items: center; gap: 3px; margin-top: 14px; padding-inline: 4px; }
.lrn-strip { min-width: 0; }
.lrn-strip i { flex: 0 1 9px; min-width: 5px; aspect-ratio: 1; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--todo); }
.lrn-strip i.d { background: var(--done); box-shadow: none; }
.lrn-strip i.c { box-shadow: inset 0 0 0 2px var(--paper); }
.lrn-strip span { margin-left: auto; padding-left: 8px; font-size: var(--t-micro); font-weight: 750; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--edge); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.lrn-step-h { margin-top: 18px; padding-inline: 4px; font-size: var(--t-h3); font-weight: 800; line-height: 1.25; }
.lrn-try-p { margin-top: 6px; padding-inline: 4px; font-size: var(--t-body); line-height: 1.55; text-wrap: pretty; }
.lrn-try .katex { font-size: 1.06em; }

.lrn-ca { color: var(--va); }
.lrn-cb { color: var(--vb); }
.lrn-cr { color: var(--vr); }

.lrn-diag {
  position: relative;
  margin-top: 14px;
  padding: 10px 8px 6px;
  border-radius: var(--r-panel);
  background: var(--ink-2);
}
.lrn-diag.is-drag { cursor: grabbing; }
.lrn-svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.lrn-svg .gl { fill: none; stroke: var(--grid); stroke-width: 1; }
.lrn-svg .ax { fill: none; stroke: var(--axis); stroke-width: 1.5; }
.lrn-svg .va { stroke: var(--va); }
.lrn-svg .vb { stroke: var(--vb); }
.lrn-svg .vr { stroke: var(--vr); }
.lrn-svg .ha { fill: var(--va); }
.lrn-svg .hb { fill: var(--vb); }
.lrn-svg .hr { fill: var(--vr); }
.lrn-svg .org { fill: var(--paper-2); }
.lrn-svg .tlab2 { font-family: var(--fc); font-size: 14px; font-weight: 700; fill: #9AA5CC; }
.lrn-ext { stroke: #5A6796; stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; }
.lrn-extb { stroke: var(--vb); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 4 5; fill: none; }
.lrn-rt { fill: none; stroke: var(--paper-2); stroke-width: 1.5; transition: opacity var(--d-base) var(--ease); }
.lrn-rt.is-off { opacity: 0; }
.lrn-ring circle { fill: var(--ink-2); stroke: var(--vb); stroke-width: 3; transition: stroke-width var(--d-quick) var(--ease); }
.lrn-diag.is-drag .lrn-ring circle { stroke-width: 4; }
.lrn-note { transition: opacity 320ms var(--ease); }
.lrn-note.is-off { opacity: 0; }
.lrn-note .mn { font-family: var(--fh); font-size: 18px; fill: var(--graphite); }
.lrn-note .mn-line { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lrn-fo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 19px; line-height: 1; }
.lrn-fo .katex { font-size: 1em; }
.lrn-lab-hide { opacity: 0; }
.lrn-lab { transition: opacity var(--d-quick) var(--ease); }

/* the drag handle is an HTML button laid over the ring: 48 px target, keyboard friendly */
.lrn-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
  transform: translate3d(136px, 44px, 0);
}
.lrn-handle:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; border-radius: 50%; }
.lrn-diag.is-drag .lrn-handle { cursor: grabbing; }

.lrn-cap { margin-top: 10px; padding-inline: 4px; font-size: var(--t-micro); color: var(--paper-2); }

.lrn-read {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  border-radius: var(--r-panel);
  background: var(--ink-2);
}
.lrn-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; padding: 12px 12px 12px 14px; }
.lrn-cell + .lrn-cell { box-shadow: -1px 0 0 var(--ink-3); }
.lrn-read .k { display: block; font-size: var(--t-small); line-height: 1.3; color: var(--paper-2); }
.lrn-read .k.lrn-ca { color: var(--va); }
.lrn-read .k.lrn-cb { color: var(--vb); }
.lrn-read .k.lrn-cr { color: var(--vr); }
.lrn-read .v { display: inline-block; font-size: 24px; }
.lrn-wide { grid-column: 1 / -1; padding: 6px 14px 12px; box-shadow: 0 -1px 0 var(--ink-3); }
.lrn-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.lrn-line .k { font-size: var(--t-label); }
.lrn-sum { color: var(--vr); font-size: 30px !important; }
.lrn-rec { min-height: 30px; }
.lrn-rec .k { font-size: var(--t-small); }
.lrn-recv { font-size: var(--t-small); color: var(--paper-2); white-space: nowrap; }
.lrn-recv b { display: inline-block; font-size: 17px; color: var(--paper); }
.lrn-match { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--t-small); font-weight: 700; line-height: 1.35; color: var(--done); }
.lrn-mb { position: relative; display: inline-grid; place-items: center; flex: none; width: 22px; aspect-ratio: 1; }
.lrn-mb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lrn-mb svg path { fill: var(--done); }
.lrn-mb .lrn-mt { inset: 4px; width: 14px; height: 14px; }
.lrn-mb .lrn-mt path { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.lrn-match.is-pop .lrn-mb { animation: lrn-pop 500ms var(--ease); }
@keyframes lrn-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: none; } }

/* ---------- steps, stats ---------- */
.lrn-body .say b.plus { color: var(--done); }
.lrn-steps { display: grid; margin-top: 18px; }
.lrn-steps li { display: flex; align-items: center; gap: 14px; min-height: 54px; border-bottom: 1px solid var(--ink-3); }
.lrn-steps li:first-child { border-top: 1px solid var(--ink-3); }
.lrn-bdg { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; aspect-ratio: 1; font-family: var(--fc); font-size: 16px; font-weight: 800; color: var(--todo-txt); }
.lrn-bdg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lrn-bdg .edge { fill: none; stroke: var(--todo); stroke-width: 2; vector-effect: non-scaling-stroke; transition: opacity 300ms var(--ease) calc(var(--i) * 140ms + 420ms); }
.lrn-bdg .rise { fill: var(--done); transform: translateY(64px); transition: transform 600ms var(--ease) calc(var(--i) * 140ms + 260ms); }
.lrn-bdg b { position: relative; transition: color 300ms var(--ease) calc(var(--i) * 140ms + 440ms); }
.lrn-steps.is-in .rise, html:not(.js) .lrn-steps .rise { transform: none; }
.lrn-steps.is-in .edge, html:not(.js) .lrn-steps .edge { opacity: 0; }
.lrn-steps.is-in .lrn-bdg b, html:not(.js) .lrn-steps .lrn-bdg b { color: var(--ink); }
.lrn-sn { font-size: var(--t-body); font-weight: 700; line-height: 1.3; }
.lrn-pay { margin-left: auto; font-size: 20px; }

.lrn-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(24px, 8vw, 48px); row-gap: 16px; margin-top: 32px; }
.lrn-stat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lrn-n { font-size: clamp(46px, 12vw, 64px); letter-spacing: -.02em; }
.lrn-l { font-size: var(--t-label); font-weight: 700; line-height: 1.25; color: var(--paper-2); }
.lrn-so-far { margin-top: 14px; }

/* ---------- the one-shot: two phones with depth ---------- */
.lrn-shots { display: grid; gap: 28px; }
.lrn-shots-copy { display: grid; gap: 10px; }
.lrn-stage {
  --fw: min(214px, 56vw);
  --bw: min(186px, 48vw);
  position: relative;
  height: calc(var(--fw) * 2.1145 + 48px);
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
}
.lrn-slot { position: absolute; }
.lrn-slot-front { left: 0; top: 0; z-index: 2; }
.lrn-slot-back { right: 0; top: 34px; z-index: 1; }
.lrn-slot-card { left: 10px; bottom: 0; z-index: 3; }
.lrn-ph-front { --phone-w: var(--fw); transform: rotate(-3deg); }
.lrn-ph-back { --phone-w: var(--bw); transform: rotate(4deg); opacity: .92; }
.lrn-oneshot {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 290px;
  padding: 12px 16px 12px 12px;
}
.lrn-play { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); }
.lrn-play svg { width: 20px; height: 20px; }
.lrn-play path { fill: currentColor; }
.lrn-os-t { display: grid; gap: 2px; }
.lrn-os-t b { font-size: var(--t-label); font-weight: 800; line-height: 1.25; }
.lrn-os-t span { font-size: var(--t-micro); line-height: 1.35; color: var(--card-light-sub); }

/* ---------- chapter rows: drift sideways with scroll ---------- */
.lrn-chaps { display: grid; gap: 14px; margin-top: 64px; }
.lrn-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: hidden; padding-block: 2px; }
.lrn-row { display: flex; justify-content: center; }
.lrn-track {
  display: flex;
  flex: none;
  gap: 8px;
  transform: translate3d(calc((var(--p, .5) - .5) * var(--dir) * 360px), 0, 0);
  will-change: transform;
}
.lrn-set { display: flex; flex: none; gap: 8px; }
.lrn-row .chip { flex: none; }
.lrn-chaps-note { text-align: center; }
.reduced .lrn-track { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; transform: none; padding-inline: var(--gutter); }
.reduced .lrn-set { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; }
.reduced .lrn-row .chip { white-space: normal; }
.reduced .lrn-dup { display: none; }

@media (min-width: 720px) {
  .lrn-try { padding: 24px 20px 20px; }
  .lrn-stage { --fw: 250px; --bw: 214px; max-width: 520px; }
  .lrn-slot-front { left: 6%; }
  .lrn-slot-back { right: 6%; }
}

@media (min-width: 960px) {
  .lrn-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; row-gap: 64px; align-items: start; }
  .lrn-head { grid-column: 1 / -1; max-width: 760px; }
  .lrn-try { grid-column: 1; grid-row: 2; }
  .lrn-body { grid-column: 2; grid-row: 2; padding-top: 12px; }
  .lrn-shots { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: 72px; }
  .lrn-shots-copy { max-width: 440px; }
  .lrn-stage { --fw: 270px; --bw: 230px; }
  .lrn-chaps { margin-top: 96px; }
}

/* ===== src/sections/07-practice.css ===== */
/* 07 Practice (builder C): phone fan, checked twice, the ladder climb, points, exam pills */

.prc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.prc-head { display: grid; gap: 12px; }
.prc-lead { max-width: 34ch; }

/* ---------- the fan: three real screens spread apart as it scrolls in ---------- */
.prc-fan {
  --fan: clamp(0, (var(--p, 1) - .12) * 3.2, 1);
  margin-top: 40px;
}
.prc-fan-in {
  --cw: min(208px, 54vw);
  --sw: min(178px, 46vw);
  position: relative;
  max-width: 640px;
  height: calc(var(--cw) * 2.1145 + 48px);
  margin-inline: auto;
}
.prc-slot { position: absolute; left: 50%; }
.prc-slot-c { top: 0; z-index: 3; margin-left: calc(var(--cw) / -2); }
.prc-slot-l, .prc-slot-r { top: 30px; margin-left: calc(var(--sw) / -2); }
.prc-slot-l { z-index: 1; }
.prc-slot-r { z-index: 2; }
.prc-ph-c { --phone-w: var(--cw); transform: translate3d(0, calc((1 - var(--fan)) * 26px), 0) scale(calc(.95 + var(--fan) * .05)); }
.prc-ph-l, .prc-ph-r { --phone-w: var(--sw); }
.prc-ph-l { transform: translate3d(calc(var(--fan) * -56%), 0, 0) rotate(calc(var(--fan) * -7deg)); }
.prc-ph-r { transform: translate3d(calc(var(--fan) * 56%), 0, 0) rotate(calc(var(--fan) * 7deg)); }
.prc-ph-l .phone-screen, .prc-ph-r .phone-screen { opacity: calc(.55 + var(--fan) * .45); }

.prc-slot-k1 { z-index: 4; left: max(var(--gutter), calc(50% - var(--cw) * 1.05)); top: 22%; }
.prc-slot-k2 { z-index: 4; left: auto; right: max(var(--gutter), calc(50% - var(--cw) * 1.05)); bottom: 16%; }
.prc-call {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  /* paper callouts land in the second half of the spread, never half see-through over a screen */
  opacity: clamp(0, var(--fan) * 2.2 - 1.2, 1);
  transform: scale(calc(.9 + var(--fan) * .1));
  transform-origin: 50% 100%;
}
.prc-call .prc-tag { justify-self: start; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-size: var(--t-micro); padding: 2px 8px; }
.prc-call-s { font-size: var(--t-micro); font-weight: 700; line-height: 1.3; color: var(--card-light-sub); }
.prc-call-n { grid-template-columns: auto auto; align-items: center; column-gap: 10px; }
.prc-call-b { font-size: 34px; color: var(--done-on-light); }

/* ---------- checked twice ---------- */
.prc-check { display: grid; gap: 28px; margin-top: 56px; }
.prc-about { font-size: var(--t-label); font-weight: 800; color: var(--paper-2); }
.prc-big { margin-top: 4px; font-size: clamp(92px, 27vw, 176px); letter-spacing: -.035em; line-height: .88; }
.prc-big-l { max-width: 32ch; margin-top: 12px; }
.prc-solves { margin: 0; padding: 4px 16px 14px; border-radius: var(--r-panel); background: var(--ink-2); }
.prc-solve { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--ink-3); }
.prc-sl { flex: none; width: 64px; font-size: var(--t-label); font-weight: 700; color: var(--paper-2); }
.prc-sv { font-size: 26px; }
.prc-tick { flex: none; width: 40px; height: 32px; margin-left: auto; overflow: visible; }
.prc-tick path {
  fill: none;
  stroke: var(--done);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.02;
  transition: stroke-dashoffset var(--d-ink) var(--ease-pencil) calc(var(--i) * 380ms + 520ms);
}
.prc-solves.is-in .prc-tick path, html:not(.js) .prc-tick path { stroke-dashoffset: 0; }
.prc-fig { margin-top: 12px; }

/* ---------- the ladder climb (sticky, scrubbed by --pin) ---------- */
.prc-climb { height: 290vh; height: 290svh; margin-top: 56px; }
.prc-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;
}
.prc-stage-in {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  height: 100%;
  padding-block: 20px 22px;
}
.prc-ladder-copy { display: grid; gap: 6px; }
.prc-ladder { position: relative; width: 100%; max-width: 380px; height: 100%; min-height: 260px; max-height: 470px; align-self: center; }
.prc-rails { position: absolute; left: 0; top: 0; width: 88px; height: 100%; overflow: visible; }
.prc-rail { fill: none; stroke: var(--graphite-lo); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.prc-minor { fill: none; stroke: var(--ink-4); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.prc-rung { fill: none; stroke: var(--paper-3); stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke var(--d-base) var(--ease); }
.prc-rung.is-hit { stroke: var(--done); }
.prc-rungs { position: absolute; inset: 0; }
.prc-r {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 104px;
  transform: translateY(-50%);
}
.prc-rl { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--paper-3); transition: color var(--d-base) var(--ease); }
.prc-crown { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linejoin: round; }
.prc-pay { margin-left: auto; font-size: 26px; color: var(--done); opacity: .22; transition: opacity var(--d-base) var(--ease); }
.prc-pay small { margin-left: 3px; font-size: 14px; font-weight: 700; color: var(--paper-2); }
.prc-r.is-hit .prc-rl { color: var(--paper); }
.prc-r.is-hit .prc-pay { opacity: 1; animation: prc-pop 500ms var(--ease); }
@keyframes prc-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: none; } }

.prc-marker {
  position: absolute;
  left: 24px;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--paper);
  font-size: 17px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.prc-marker::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--paper); border-radius: 30%; transition: opacity var(--d-base) var(--ease); }
.prc-marker svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prc-marker .edge { fill: var(--ink); stroke: var(--paper); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.prc-marker .rise { fill: var(--done); transform: translateY(64px); transition: transform 600ms var(--ease); }
.prc-marker b { position: relative; transition: color 300ms var(--ease) 200ms; }
.prc-marker.is-top .rise { transform: none; }
.prc-marker.is-top b { color: var(--ink); }
.prc-marker.is-top::after { opacity: 0; }

.prc-caps { display: grid; min-height: 3.3em; }
.prc-cap {
  grid-area: 1 / 1;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--paper-2);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 280ms var(--ease), transform 420ms var(--ease);
}
.prc-cap b { color: var(--paper); font-weight: 800; }
.prc-cap b.plus { color: var(--done); }
.prc-cap.is-on { opacity: 1; transform: none; }
.prc-first { margin-top: -6px; }

/* reduced motion: the fan sits open, no scrubbing */
.reduced .prc-fan { --fan: 1; }

/* reduced motion and no JS: the ladder sits still, every rung lit, every line shown */
.reduced .prc-climb, html:not(.js) .prc-climb { height: auto; }
.reduced .prc-stage, html:not(.js) .prc-stage { position: static; height: auto; }
.reduced .prc-ladder, html:not(.js) .prc-ladder { height: 420px; }
.reduced .prc-cap, html:not(.js) .prc-cap { grid-area: auto; opacity: 1; transform: none; }
.reduced .prc-caps, html:not(.js) .prc-caps { gap: 8px; }
html:not(.js) .prc-rung { stroke: var(--done); }
html:not(.js) .prc-rl { color: var(--paper); }
html:not(.js) .prc-pay { opacity: 1; }
html:not(.js) .prc-marker { display: none; }

/* ---------- points ---------- */
.prc-more { display: grid; gap: 48px; margin-top: 56px; }
.prc-points { display: grid; border-top: 1px solid var(--ink-3); }
.prc-pt { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--ink-3); }
.prc-pt > .ico { margin-top: 1px; fill: none; stroke: var(--paper); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.prc-pt > div { min-width: 0; flex: 1; }
.prc-pt-h { font-size: var(--t-body); font-weight: 800; line-height: 1.3; }
.prc-pt-p { margin-top: 4px; font-size: var(--t-note); line-height: 1.55; color: var(--paper-2); text-wrap: pretty; }
.prc-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.prc-srcs .tag { font-size: var(--t-micro); padding: 3px 8px; }

.prc-rev { display: block; width: 100%; max-width: 380px; height: auto; margin-top: 16px; overflow: visible; }
.prc-rev-k { font-size: 13px; font-weight: 700; fill: var(--paper-2); font-family: var(--f); }
.prc-rev-t { font-size: 11px; font-weight: 700; fill: var(--paper-3); font-family: var(--fc); }
.prc-rev-ax { fill: none; stroke: var(--edge); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset 900ms var(--ease-pencil) 200ms; }
.prc-rev-gl { fill: none; stroke: var(--ink-4); stroke-width: 1.5; stroke-linecap: round; }
.prc-rev-w { fill: var(--wrong); }
.prc-rev-d { fill: var(--done); }
.prc-rev-m > path { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 500ms var(--ease-spring) calc(var(--i) * 160ms + 700ms); }
.prc-pt-rev.is-in .prc-rev-ax, html:not(.js) .prc-rev-ax { stroke-dashoffset: 0; }
.prc-pt-rev.is-in .prc-rev-m > path, html:not(.js) .prc-rev-m > path { transform: none; }

/* ---------- exam pills ---------- */
.prc-exams-h { font-size: var(--t-label); font-weight: 800; color: var(--paper-2); }
.prc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.prc-pills li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--edge);
  font-size: var(--t-note);
  font-weight: 800;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 420ms var(--ease) calc(var(--i) * 70ms + 160ms), transform 520ms var(--ease-out-soft) calc(var(--i) * 70ms + 160ms);
}
.prc-exams.is-in .prc-pills li, html:not(.js) .prc-pills li { opacity: 1; transform: none; }

@media (max-height: 700px) {
  .prc-rl { font-size: 18px; }
  .prc-pay { font-size: 22px; }
  .prc-ladder-copy .say { font-size: var(--t-note); }
}

@media (min-width: 720px) {
  .prc-fan-in { --cw: 250px; --sw: 216px; }
  .prc-check { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 48px; }
  .prc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .prc-pt { border-top: 1px solid var(--ink-3); border-bottom: 0; }
}

@media (min-width: 960px) {
  .prc-fan-in { --cw: 290px; --sw: 250px; max-width: 900px; }
  .prc-ph-l { transform: translate3d(calc(var(--fan) * -78%), calc(var(--fan) * 20px), 0) rotate(calc(var(--fan) * -6deg)); }
  .prc-ph-r { transform: translate3d(calc(var(--fan) * 78%), calc(var(--fan) * 20px), 0) rotate(calc(var(--fan) * 6deg)); }
  .prc-slot-k1 { left: calc(50% - var(--cw) * 1.5); }
  .prc-slot-k2 { right: calc(50% - var(--cw) * 1.5); }
  .prc-stage-in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 72px;
    align-items: center;
  }
  .prc-ladder { grid-column: 1; grid-row: 1 / -1; max-width: 440px; max-height: 560px; height: 76%; }
  .prc-ladder-copy { grid-column: 2; grid-row: 2; align-self: end; }
  .prc-caps { grid-column: 2; grid-row: 3; align-self: start; }
  .prc-first { grid-column: 2; grid-row: 4; align-self: start; }
  .prc-rl { font-size: 22px; }
  .prc-cap { font-size: var(--t-lead); }
  .prc-more { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 64px; align-items: start; }
  .prc-exams { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* ===== src/sections/08-notes-ai.css ===== */
/* 08 Notes and Ask AI (builder C): the Ask sheet scene, Why was I wrong?, fair play, honesty, notes filter */

.nai-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nai-head { display: grid; gap: 12px; }
.nai-lead { max-width: 34ch; }

/* icon sizes (symbols drawn as app line icons) */
.nai svg use { pointer-events: none; }
.nai-i15, .nai-i16, .nai-i18, .nai-i20, .nai-i22, .nai-i24, .nai-i26 { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.nai-i15 { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.nai-i16 { width: 16px; height: 16px; stroke-width: 2; }
.nai-i18 { width: 18px; height: 18px; stroke-width: 2.5; }
.nai-i20 { width: 20px; height: 20px; stroke-width: 2.3; }
.nai-i22 { width: 22px; height: 22px; stroke-width: 2.5; }
.nai-i24 { width: 24px; height: 24px; stroke-width: 1.8; }
.nai-i26 { width: 26px; height: 26px; stroke-width: 2.2; }

/* a phone screen rebuilt in HTML at the app's own 390 x 844 size, scaled to fit (--k set by JS) */
.nai-ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 844px;
  transform: scale(var(--k, .74));
  transform-origin: 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  text-align: left;
}
.nai-ui .katex-display { margin: 0; text-align: left; }
.nai-ui .katex-display > .katex { text-align: left; }

/* ---------- the Ask scene (sticky, scrubbed by --pin) ---------- */
.nai-scene { height: 330vh; height: 330svh; margin-top: 28px; }
.nai-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;
}
.nai-stage-in {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding-block: 14px 22px;
}
.nai-phone {
  --phone-w: min(330px, calc(100vw - 2 * var(--gutter) - 24px), calc((100vh - var(--header-h) - 150px) / 2.1145));
  --phone-w: min(330px, calc(100vw - 2 * var(--gutter) - 24px), calc((100svh - var(--header-h) - 150px) / 2.1145));
}
.nai-screen { background: var(--ink); }
.nai-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nai-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; will-change: opacity; }
.nai-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 186px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 20px 0;
  border-radius: 26px 26px 0 0;
  background: var(--ink-2);
  box-shadow: 0 -1px 0 var(--ink-4);
  transform: translate3d(0, 102%, 0);
  will-change: transform;
}
.nai-grab { display: block; flex: none; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--ink-4); }
.nai-sh-head { display: flex; align-items: center; gap: 10px; flex: none; }
.nai-sh-head b { flex: 1; font-size: 22px; font-weight: 800; line-height: 1.15; }
.nai-close { color: var(--paper); }
.nai-sees {
  align-self: flex-start;
  flex: none;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ink-4);
  font-size: 14px;
  font-weight: 750;
  color: var(--paper-2);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.nai-thread { display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; margin-top: 18px; }
.nai-me {
  align-self: flex-end;
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 20px 20px 6px 20px;
  background: var(--ink-3);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity 260ms var(--ease), transform 380ms var(--ease);
}
.nai-cl { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.62; }
.nai-cl::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 26px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--ink-4);
  transform: scaleY(var(--rule, 0));
  transform-origin: 50% 0;
}
.nai-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  margin: 0 0 4px -26px;
  font-size: 14px;
  font-weight: 800;
  opacity: 0;
  transition: opacity 240ms var(--ease);
}
.nai-who span { font-weight: 600; color: var(--paper-2); }
.nai-wd { text-wrap: pretty; }
.nai-w { opacity: 0; transition: opacity 180ms var(--ease); }
.nai-tok { opacity: 0; transform: translate3d(0, 4px, 0); transition: opacity 240ms var(--ease), transform 300ms var(--ease); }
.nai-w.on, .nai-tok.on { opacity: 1; transform: none; }
.nai-fxs { margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: var(--ink-3); overflow: hidden; }
.nai-fxs .katex-display, .nai-fxs .katex-display > .katex { text-align: center; }
.nai-fxs .katex { font-size: 1.04em; }
.nai-report { margin-top: 8px; font-size: 14px; font-weight: 750; color: var(--paper-2); text-decoration: underline; text-decoration-color: var(--edge); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.nai-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0 -20px;
  padding: 10px 20px 14px;
  box-shadow: 0 -1px 0 var(--ink-3);
  background: var(--ink-2);
}
.nai-att { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ink-4); font-size: 14px; font-weight: 750; white-space: nowrap; }
.nai-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ink-4);
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
}
.nai-ph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--paper-3); transition: opacity 120ms; }
.nai-field.has-text .nai-ph { opacity: 0; }
.nai-typed { position: relative; display: block; overflow: hidden; white-space: nowrap; }
.nai-c { opacity: 0; }
.nai-c.on { opacity: 1; }
.nai-c.car { position: relative; }
.nai-c.car::after { content: ""; position: absolute; right: -2px; top: 2px; bottom: 1px; width: 2px; border-radius: 1px; background: var(--paper); }
.nai-send { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--ink-3); color: var(--paper-2); font-size: 15px; font-weight: 800; transition: background-color 160ms, color 160ms; }
.nai-composer.is-ready .nai-send { background: var(--paper); color: var(--ink); }

.nai-caps { display: grid; width: 100%; max-width: 440px; min-height: 3.2em; }
.nai-cap {
  grid-area: 1 / 1;
  font-size: var(--t-body);
  line-height: 1.5;
  text-align: center;
  color: var(--paper-2);
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 280ms var(--ease), transform 420ms var(--ease);
}
.nai-cap b { color: var(--paper); font-weight: 800; }
.nai-cap.is-on { opacity: 1; transform: none; }

/* reduced motion and no JS: the finished thread, no pinning */
.reduced .nai-scene, html:not(.js) .nai-scene { height: auto; }
.reduced .nai-stage, html:not(.js) .nai-stage { position: static; height: auto; }
.reduced .nai-stage-in, html:not(.js) .nai-stage-in { grid-template-rows: auto auto; }
.reduced .nai-sheet, html:not(.js) .nai-sheet { transform: none; }
.reduced .nai-scrim, html:not(.js) .nai-scrim { opacity: 1; }
.reduced .nai-sees, .reduced .nai-me, .reduced .nai-who, .reduced .nai-tok, .reduced .nai-w,
html:not(.js) .nai-sees, html:not(.js) .nai-me, html:not(.js) .nai-who, html:not(.js) .nai-tok { opacity: 1; transform: none; }
.reduced .nai-cl::before, html:not(.js) .nai-cl::before { transform: none; }
.reduced .nai-typed, html:not(.js) .nai-typed { display: none; }
.reduced .nai-cap, html:not(.js) .nai-cap { grid-area: auto; opacity: 1; transform: none; }
.reduced .nai-caps, html:not(.js) .nai-caps { gap: 8px; }

/* ---------- below the scene ---------- */
.nai-more { display: grid; gap: 48px; margin-top: 48px; }

/* Why was I wrong? */
.nai-why { display: grid; gap: 20px; }
.nai-why-copy { display: grid; gap: 8px; }
.nai-res { margin: 0; padding: 18px 16px 10px; border-radius: var(--r-panel); background: var(--ink-2); }
.nai-res-head { display: flex; align-items: center; gap: 14px; }
.nai-rbdg { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; }
.nai-rbdg > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--wrong); }
.nai-rx { position: relative; width: 15px; height: 15px; margin-top: -5px; fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.nai-rmin { font-size: 30px; color: var(--wrong); }
.nai-rwhat { margin-top: 12px; font-size: var(--t-note); line-height: 1.5; color: var(--paper-2); }
.nai-rwhat b { color: var(--paper); font-weight: 800; }
.nai-rsub { margin-top: 4px; font-size: var(--t-small); color: var(--paper-2); }
.nai-askrow {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 6px 10px;
  border-top: 1px solid var(--ink-3);
}
.nai-askrow::before { content: ""; position: absolute; inset: 4px -6px 0; border-radius: 12px; background: var(--ink-3); opacity: 0; }
.nai-askrow > * { position: relative; }
.nai-askrow > .nai-i20 { margin-top: 2px; }
.nai-ag { display: grid; gap: 2px; flex: 1; min-width: 0; }
.nai-ag b { font-size: var(--t-note); font-weight: 800; line-height: 1.3; }
.nai-ag span { font-size: var(--t-small); line-height: 1.35; color: var(--paper-2); }
.nai-free { flex: none; margin-top: 2px; font-size: var(--t-label); color: var(--paper-2); }
.nai-ring { position: absolute !important; left: -10px; top: -2px; width: calc(100% + 20px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.nai-ring path { fill: none; stroke: var(--graphite); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
.nai-res.is-in .nai-askrow::before { animation: nai-press 900ms var(--ease) 900ms both; }
.nai-res.is-in .nai-ag, .nai-res.is-in .nai-askrow > .nai-i20 { animation: nai-squish 520ms var(--ease) 1000ms both; }
.nai-res.is-in .nai-ring path { stroke-dashoffset: 0; transition: stroke-dashoffset 760ms var(--ease-pencil) 1500ms; }
html:not(.js) .nai-ring path { stroke-dashoffset: 0; }
@keyframes nai-press { 0% { opacity: 0; } 35% { opacity: .9; } 100% { opacity: 0; } }
@keyframes nai-squish { 0%, 100% { transform: none; } 40% { transform: scale(.985); } }

/* fair play */
.nai-fair { display: grid; gap: 14px; align-self: start; }
.nai-ledger { padding: 2px 16px; border-radius: var(--r-panel); background: var(--ink-2); }
.nai-lrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; font-size: var(--t-note); font-weight: 700; }
.nai-lrow + .nai-lrow { border-top: 1px solid var(--ink-3); }
.nai-cost { flex: none; max-width: 52%; font-size: 18px; line-height: 1.15; text-align: right; color: var(--wrong); }
.nai-cost-free { color: var(--paper-2); }

/* honesty */
.nai-honest { align-self: start; padding: 16px; border-radius: var(--r-panel); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-4); }
.nai-hn-h { display: flex; align-items: center; gap: 10px; font-size: var(--t-note); font-weight: 800; }
.nai-hn-p { margin-top: 6px; font-size: var(--t-label); line-height: 1.55; color: var(--paper-2); }

/* ---------- notes ---------- */
.nai-notes { display: grid; gap: 28px; margin-top: 16px; }
.nai-notes-copy { display: grid; gap: 10px; }
.nai-nwrap { display: grid; justify-items: center; gap: 14px; }
.nai-nphone { --phone-w: min(318px, calc(100vw - 2 * var(--gutter) - 16px)); }
.nai-nscreen { background: var(--ink); }

.nai-top { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px 0; }
.nai-tt { flex: 1; min-width: 0; }
.nai-tt b { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; }
.nai-tt span { display: block; font-size: 13px; color: var(--paper-2); }
.nai-bal { display: inline-flex; align-items: baseline; gap: 6px; padding-top: 10px; color: var(--paper-2); }
.nai-bal svg { align-self: center; }
.nai-bal b { font-size: 18px; color: var(--paper); }
.nai-bal span { font-size: 13px; font-weight: 650; }
.nai-askp { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-4); font-size: 15px; font-weight: 800; }

.nai-chaps { display: flex; gap: 8px; margin-top: 14px; padding: 0 20px; overflow: hidden; }
.nai-chap, .nai-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  font-size: 15px;
  font-weight: 700;
  color: var(--paper-2);
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.nai-chap.is-on, .nai-chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: none; }
.nai-chip small { font-size: 13px; font-weight: 800; color: var(--paper-2); }
.nai-chip[aria-pressed="true"] small { color: #46507A; }
.nai-chip::after { content: ""; position: absolute; inset: -8px -4px; }
.nai-chip:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.nai-chip:active { transform: scale(.985); }
.nai-nhead { padding: 22px 20px 0; }
.nai-nhead b { display: block; font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.nai-nhead span { display: block; margin-top: 6px; font-size: 14px; color: var(--paper-2); }
.nai-filter { display: flex; gap: 8px; padding: 14px 20px 0; }
.nai-tbdg { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--ink); }
.nai-tbdg svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--wrong); }
.nai-tbdg b { position: relative; margin-top: -3px; font-size: 12px; }

.nai-nl { position: relative; padding: 0 20px 96px; }
.nai-nh { margin-top: 24px; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--paper-2); }
.nai-fx { margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: var(--ink-2); font-size: 16px; }
.nai-fl { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--paper-2); }
.nai-fx .katex { font-size: 1.05em; }
.nai-trap { display: flex; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--wrong-tint); }
.nai-trap p { font-size: 16px; line-height: 1.5; }
.nai-trap b { font-weight: 800; }
.nai-trap .nai-tk { color: var(--wrong); }
.nai-trap .katex { font-size: 1.03em; }
.nai-bang { position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: 1px; }
.nai-bang svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--wrong); }
.nai-bang b { position: relative; margin-top: -3px; font-family: var(--fc); font-size: 15px; color: var(--ink); }
.nai-nl > [hidden] { display: none !important; }

.nai-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 76px;
  padding-bottom: 10px;
  background: var(--ink);
  border-top: 1px solid var(--ink-3);
}
.nai-tabs span { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; color: #A7B1CF; }
.nai-tabs .is-on { color: var(--paper); }
.nai-tabs .is-on::before { content: ""; position: absolute; top: -1px; left: 50%; width: 24px; height: 3px; margin-left: -12px; border-radius: 0 0 3px 3px; background: var(--paper); }
.nai-ncount { text-align: center; }

@media (min-width: 720px) {
  .nai-why { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: 48px; }
  .nai-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .nai-why, .nai-notes { grid-column: 1 / -1; }
  .nai-notes { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: 48px; }
  .nai-nphone { --phone-w: 330px; }
}

@media (min-width: 960px) {
  .nai-stage-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: 1fr; column-gap: 72px; }
  .nai-phone { --phone-w: min(360px, calc((100vh - var(--header-h) - 80px) / 2.1145)); --phone-w: min(360px, calc((100svh - var(--header-h) - 80px) / 2.1145)); justify-self: end; }
  .nai-caps { justify-self: start; max-width: 400px; }
  .nai-cap { text-align: left; font-size: var(--t-lead); }
  .nai-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nai-nphone { --phone-w: 350px; }
}

/* ===== src/sections/09-cta.css ===== */
/* 09-cta: "Time to lock in." The kite rises from the bottom of the screen, its graphite afterimages
   trail behind and catch up, then the wordmark lands: the hite lockup, assembled once.
   09-cta.js writes --k (kite), --kn (near afterimage), --kf (far afterimage) on .cta-lockup
   and adds .is-landed. Then the Play badge, the follow link and the quick answers. */

.cta {
  padding-top: var(--s11);
  padding-bottom: var(--s11);
  overflow: clip; /* the kite starts below its resting place; keep that inside the section */
  isolation: isolate;
  text-align: center;
}
/* the page settles into the footer's deeper ink with no edge */
.cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  height: 240px;
  background: linear-gradient(rgba(5, 10, 28, 0), var(--ink-0));
  pointer-events: none;
}
.cta-bg {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(760px 560px at 50% 440px, #14215A 0%, rgba(10, 18, 48, 0) 68%);
  pointer-events: none;
}
.cta-wrap { position: relative; }

/* ---------- lockup ---------- */
.cta-lockup {
  --lk: clamp(92px, 27vw, 156px);
  --k: 1; --kn: 1; --kf: 1;
  --rise: 56vh;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lk) * .1);
  margin-inline: auto;
}
.js:not(.reduced) .cta-lockup { --k: 0; --kn: 0; --kf: 0; }
.cta-mark { position: relative; width: calc(var(--lk) * 41 / 58); height: var(--lk); flex: none; }
.cm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.cm-kite {
  transform: translate3d(0, calc((1 - var(--k)) * var(--rise)), 0) scale(calc(.8 + var(--k) * .2));
  opacity: calc(var(--k) * 5);
}
.cm-near {
  transform: translate3d(calc((1 - var(--kn)) * -8px), calc((1 - var(--kn)) * var(--rise)), 0) scale(calc(.82 + var(--kn) * .18));
  opacity: calc(var(--kn) * 4);
}
.cm-far {
  transform: translate3d(calc((1 - var(--kf)) * -14px), calc((1 - var(--kf)) * var(--rise)), 0) scale(calc(.84 + var(--kf) * .16));
  opacity: calc(var(--kf) * 3);
}
.cta-word {
  font-size: calc(var(--lk) * .78);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1;
  transform: translateY(-.04em);
  transition: transform 620ms var(--ease-spring), opacity 320ms var(--ease);
}
.js:not(.reduced) .cta:not(.is-landed) .cta-word { opacity: 0; transform: translate3d(-.12em, -.04em, 0) scale(.7); }

/* ---------- copy and actions ---------- */
.cta-h { margin-top: 40px; }
.cta-sub { margin: 14px auto 0; max-width: 34ch; text-wrap: balance; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 30px; }
.cta-badge img { height: 60px; }

/* ---------- quick answers ---------- */
.faq { max-width: 680px; margin: 88px auto 0; text-align: left; }
.faq-h { font-size: var(--t-h2l); }
.faq-list { margin-top: 18px; border-top: 1px solid var(--ink-3); }
.qa { border-bottom: 1px solid var(--ink-3); }
.qa summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.005em;
  -webkit-user-select: none;
  user-select: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ""; }
.qa summary:focus-visible { outline-offset: 2px; }
.qa summary:hover span { color: #fff; }
.qa-i {
  position: relative;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--edge);
  transition: background-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.qa-i::before, .qa-i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--paper);
  transition: transform 320ms var(--ease), background-color var(--d-base) var(--ease);
}
.qa-i::after { transform: rotate(90deg); }
.qa[open] .qa-i { background: var(--paper); box-shadow: none; }
.qa[open] .qa-i::before, .qa[open] .qa-i::after { background: var(--ink); }
.qa[open] .qa-i::after { transform: rotate(0deg); }
.qa-a { overflow: hidden; }
.qa-a p {
  padding: 0 48px 22px 0;
  font-size: var(--t-note);
  line-height: 1.6;
  color: var(--paper-2);
  text-wrap: pretty;
}
.qa-a a {
  color: var(--paper); font-weight: 800;
  text-decoration: underline; text-decoration-color: var(--edge); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.qa.is-opening .qa-a p { animation: qa-in 420ms var(--ease) both; }
@keyframes qa-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } }

@media (min-width: 900px) {
  .cta { padding-top: var(--s12); }
  .cta-h { margin-top: 48px; }
  .cta-actions { flex-direction: row; justify-content: center; gap: 28px; }
  .cta-badge img { height: 64px; }
  .faq { margin-top: 112px; }
}