/* ANITA AI site. Palette: J's sprite kit's, unchanged. Tokens first. */
:root {
  --bg: #000;
  --ink: #eaf6f8;
  --dim: #7f9aa3;
  --cyan: #58e6ff;
  --cyan-deep: #19c8ff;
  --glass: rgba(5, 12, 18, .55);
  --line: rgba(88, 230, 255, .18);
  --hair: rgba(234, 246, 248, .12);
  --bad: #ff9a9a;
  --font-display: 'Orbitron', ui-monospace, Menlo, monospace;
  --font-body: 'Sora', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* ≈ power4.out */
  --ease-soft: cubic-bezier(.25, .46, .45, .94); /* ≈ power2.out */
  --pad: max(16px, 5vw);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
body.is-locked { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--cyan); color: #021014; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ───────────── fixed layers */
#sphere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#graph, #graph-labels { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; }
/* while it dives into HQ's brain core the walk's opaque city would hide it: lifted over the page (under the nav) */
.graph-over #graph, .graph-over #graph-labels { z-index: 2; }
.has-graph #sphere { display: none; }
.glbl { font: 400 11px/1 var(--font-mono); color: var(--ink); letter-spacing: .02em; white-space: nowrap; text-shadow: 0 0 6px #000, 0 0 12px #000; transform: translate(10px, -50%); }
.glbl.hot { color: var(--cyan); text-shadow: 0 0 10px rgba(88,230,255,.6), 0 0 6px #000; }
.glbl.you { font: 600 12px/1 var(--font-body); color: #021014; background: #f0ebdd; padding: 5px 9px; border-radius: 999px; transform: translate(-50%, -50%); text-shadow: none; }
@media (max-width: 800px) { #graph-labels { display: none; } }
main, .foot { position: relative; z-index: 1; }
.grain { position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cyan-deep), var(--cyan)); box-shadow: 0 0 10px var(--cyan); }
.aura { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none; mix-blend-mode: screen; }
.aura-label { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
  opacity: 0; transition: opacity .2s; white-space: nowrap; text-shadow: 0 0 12px rgba(0,0,0,.9); }

/* ───────────── shared type */
.k { font-family: var(--font-display); font-weight: 500; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); }
h1, h2, h3 { font-family: var(--font-body); margin: 0; text-wrap: balance; }
h1 { font-weight: 600; font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.035em; }
h2 { font-weight: 600; font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -.025em; }
h3 { font-weight: 400; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.25; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--cyan); text-shadow: 0 0 40px rgba(88,230,255,.35); }
.lede { color: var(--dim); font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; margin: 1.2em 0 0; max-width: 48ch; }
.lede b { color: var(--ink); font-weight: 600; }
.proof { margin-top: 1.4em; font-family: var(--font-display); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); line-height: 1.8; }

/* ───────────── buttons (J's sprite kit's pills) */
.btn { display: inline-block; border: 1px solid rgba(88,230,255,.6); background: rgba(88,230,255,.08); color: var(--cyan); border-radius: 999px;
  padding: 13px 24px; cursor: pointer; font-family: var(--font-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  box-shadow: 0 0 24px rgba(88,230,255,.12); transition: background .2s, color .2s, box-shadow .2s, transform .25s var(--ease-out); }
.btn:hover { background: var(--cyan); color: #021014; box-shadow: 0 0 34px rgba(88,230,255,.45); transform: translateY(-2px); }
.btn.ghost { background: none; border-color: rgba(88,230,255,.3); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(88,230,255,.08); }
.btn.ghost.is-playing { border-color: var(--cyan); color: var(--cyan); }
.btn.small { padding: 10px 18px; font-size: .6rem; margin-top: 1.6em; }
.btn.big { padding: 18px 36px; font-size: .78rem; margin-top: 2.2em; }
.linkish { background: none; border: 0; padding: 6px; cursor: pointer; color: var(--dim); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 4px; }
.linkish:hover { color: var(--cyan); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 2.2em; }

/* ───────────── the text reveal (techredux): each visual line slides up out of a mask */
.split .line, .split-now .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.split .line-in, .split-now .line-in { display: block; transform: translateY(110%); transition: transform .75s var(--ease-soft); transition-delay: calc(var(--i, 0) * .1s); }
.split.is-in .line-in, .split-now.is-in .line-in { transform: none; }
h1.split .line-in { transition-duration: 1.1s; transition-timing-function: var(--ease-out); }
.reveal-fade { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); transition-delay: var(--d, 0s); }
.reveal-fade.is-in { opacity: 1; transform: none; }

/* ───────────── the gate */
/* the entry screen: a proper opening on the left; the particle ANITA stands on the right (unchanged) */
.gate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; padding: 0 var(--pad); background:
  radial-gradient(ellipse 50vw 70vh at 20% 50%, rgba(25,200,255,.06), transparent 70%), var(--bg);
  transition: opacity .9s var(--ease-soft), visibility .9s; }
.gate.is-gone { opacity: 0; visibility: hidden; }
.gate-col { width: min(560px, 46vw); display: grid; justify-items: start; }
/* each piece fades up in turn when the screen opens */
.gi { opacity: 0; transform: translateY(18px); animation: gate-in .9s var(--ease-out) forwards; animation-delay: calc(.15s + var(--gi) * .12s); }
@keyframes gate-in { to { opacity: 1; transform: none; } }
/* the logo, as on the letterhead: ΛNITΛ (#anita-word) stands .79 of the emblem's height (the knot fills 171/192 of
   its image) and a fifth of it away. 40px emblem → 28px letters, 6px gap; 28px emblem (.brand) → 20px, 4px */
.gate-brand { display: flex; align-items: center; gap: 6px; }
.gate-brand .word { display: block; height: 28px; width: calc(28px * 3332 / 708); fill: currentColor; }
.gate-brand img { filter: drop-shadow(0 0 14px rgba(88,230,255,.45)); }
.gate .k { margin-top: 5.5vh; }
.gate-h { margin-top: .45em; font-weight: 600; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.035em; }
.gate-lede { margin: 1.2em 0 0; max-width: 40ch; color: var(--dim); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; }
.gate-load { width: min(320px, 100%); margin-top: 2.6em; }
.gate-bar { height: 1px; background: rgba(88,230,255,.15); overflow: hidden; }
.gate-bar i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: width .3s; }
.gate-text { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-display); font-size: .56rem; letter-spacing: .25em; text-transform: uppercase; color: var(--dim); }
.gate-text b { font-weight: 500; color: var(--cyan); letter-spacing: .1em; }
.gate.is-ready .gate-load { opacity: 1; }
.gate.is-ready .gate-text span { color: var(--cyan); }
.gate-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 1.8em; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .6s, transform .6s var(--ease-out); }
.gate.is-ready .gate-go { opacity: 1; transform: none; pointer-events: auto; }
.gate-sound { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; }
.gate-sound svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.gate-hint { margin: 2.2em 0 0; font-family: var(--font-mono); font-size: .72rem; color: var(--dim); opacity: 0; transition: opacity .8s .6s; }
.gate.is-ready .gate-hint { opacity: .8; }
@media (hover: none) { .gate-hint { display: none; } }
@media (max-width: 800px) {
  .gate { align-items: flex-start; padding-top: 8vh; }
  .gate-col { width: 100%; }
  .gate .k { margin-top: 2.2vh; }
  .gate-h { font-size: 2.1rem; }
  .gate-lede { font-size: .88rem; margin-top: .8em; }
  .gate-load { margin-top: 1.2em; }
  .gate-go { margin-top: 1.1em; gap: 8px 14px; }
  .gate-hint { display: none; }
}
#gate-swarm { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 101; pointer-events: none; }
/* before you come in, the real ANITA waits unseen; when she arrives she starts as a bright cyan-white shape
   (where the particles flared) and settles into her own colours */
.her { transition: opacity 1.1s var(--ease-soft), filter 1.6s var(--ease-soft); }
body.pre-real .her { opacity: 0; filter: brightness(2.4) saturate(0) drop-shadow(0 0 28px rgba(88,230,255,.9)); }


/* ───────────── nav (J's sprite kit's pill) */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) var(--pad) 0; pointer-events: none; }
.nav > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 4px; text-decoration: none; }
.brand .word { display: block; height: 20px; width: calc(20px * 3332 / 708); fill: currentColor; }
.brand img { filter: drop-shadow(0 0 10px rgba(88,230,255,.35)); }
.pill { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03); }
.pill a, .pill button { background: none; border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s; }
.pill a:hover, .pill button:hover { background: rgba(88,230,255,.1); color: var(--cyan); }
.pill .cta { background: rgba(88,230,255,.14); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(88,230,255,.35); }
.pill .cta:hover { background: var(--cyan); color: #021014; }

/* ───────────── she is speaking */
.speaking { position: fixed; left: 50%; top: calc(max(14px, env(safe-area-inset-top)) + 58px); transform: translateX(-50%); z-index: 29;
  display: flex; align-items: center; gap: 14px; width: min(640px, calc(100vw - 32px)); padding: 12px 12px 12px 18px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.speaking[hidden] { display: none; }
.speaking p { margin: 0; flex: 1; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.speaking button { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer; color: var(--dim);
  font-family: var(--font-display); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; }
.speaking button:hover { color: var(--cyan); border-color: var(--cyan); }
.eq { display: flex; gap: 3px; align-items: center; height: 18px; }
.eq i { width: 3px; height: 100%; background: var(--cyan); border-radius: 2px; animation: eq .9s ease-in-out infinite; transform-origin: 50% 50%; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* ───────────── hero (lobod) */
.hero { position: relative; height: 300vh; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.atmo { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40vw 60vh at 20% 50%, rgba(0,0,0,.75), transparent 70%),
              radial-gradient(ellipse 50vw 70vh at 68% 60%, rgba(25,200,255,.08), transparent 70%); }
.hero-copy { position: absolute; left: var(--pad); top: 50%; transform: translateY(-46%); max-width: 660px; z-index: 3; text-shadow: 0 2px 30px rgba(0,0,0,.9); }
.hero-copy .k { margin-bottom: 1.6em; }
.hero-copy .lede { max-width: 42ch; }
.note { margin: 1.6em 0 0; font-size: .8rem; font-style: italic; color: var(--dim); opacity: .75; }
.her { position: absolute; left: 68vw; bottom: 0; height: 90vh; height: 90svh; aspect-ratio: 450 / 800; transform: translateX(-50%); z-index: 2; }
.her .sprite { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the reel's version: her video is the hero's background, full bleed, its edges fading into the page's black */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 62% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 75% 85% at 62% 50%, #000 55%, transparent 100%); }
.hero-video[hidden] { display: none; }
.look-video .her { display: none; }
.sprite { display: block; }
/* ── hero design 1 (/?hero=1, main.js → HERO): her name, huge, behind her. The letters are glass: thin cyan edges
   and a faint fill, so her memory graph shows through them. She stands in the middle, in front of them.
   Lettered as the ANITA logo is (28 Sep, from the offer letter's letterhead): ΛNITΛ in Avenir Next Medium, .08em
   apart. Avenir Next is a paid font, so the letters are its own glyphs drawn as SVG, not a font file; each svg is
   one letter's advance wide (--w, 1000 = 1em) and cap height tall (.708em). ΛNITΛ is 3.346em across, so 27.7vw
   spans the same margins the Orbitron letters did. Glass as before: a faint fill, a 1.5px cyan edge and, under it,
   a blurred copy for the glow (text-shadow 0 0 70px, as it was) */
.wordmark { display: none; }
.hero-v1 .wordmark { display: flex; position: absolute; left: 0; right: 0; top: 13vh; justify-content: center; gap: .08em; z-index: 1; pointer-events: none;
  font-size: min(27.7vw, 44.8vh); line-height: 0; }
.hero-v1 .wordmark span { display: block; position: relative;
  opacity: 0; transform: translateY(35%); transition: transform 1.6s var(--ease-out), opacity 1.3s var(--ease-soft); transition-delay: calc(var(--i) * 110ms + .15s); }
.hero-v1 .wordmark svg { display: block; position: relative; width: calc(var(--w) * .001em); height: .708em; overflow: visible;
  fill: rgba(88,230,255,.05); stroke: rgba(88,230,255,.5); stroke-width: 1.5px; }
.hero-v1 .wordmark path { vector-effect: non-scaling-stroke; }
.hero-v1 .wordmark .wm-glow { position: absolute; inset: 0; fill: rgba(88,230,255,.22); stroke: none; filter: blur(35px); }
.hero-v1 .wordmark.is-in span { opacity: 1; transform: none; }
.hero-v1 .her { left: var(--herx, 68vw); }   /* the entry screen's place; main.js glides her to the middle */
.hero-v1 .hero-copy { top: auto; bottom: 12vh; transform: none; max-width: min(30vw, 440px); }
.hero-v1 .hero-copy h1 { font-size: clamp(1.7rem, 2.7vw, 2.7rem); }
.hero-v1 .hero-copy .k { margin-bottom: 1em; }
.hero-v1 .hero-copy .lede { font-size: .95rem; }
@media (max-width: 800px) {   /* phones: words at the top as before; her name behind her upper body, as wide as the screen allows */
  .hero-v1 .wordmark { top: auto; bottom: 29vh; font-size: 26.3vw; }   /* 88vw wide */
  .hero-v1 .hero-copy { top: 13vh; bottom: auto; max-width: none; }
  .hero-v1 .hero-copy h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
}
/* ── hero design 6 (/?hero=6, main.js → HERO === 6): her in a scene, a framed window onto ANITA HQ */
.scene { display: none; }
.hero-v6 .scene { display: block; position: absolute; right: var(--pad); top: 11vh; bottom: 5vh; width: 48vw; z-index: 1; border-radius: 28px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 70px rgba(88,230,255,.08); opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.hero-v6 .scene.on { opacity: 1; }
.hero-v6 .scene canvas { display: block; width: 100%; height: 100%; }
.hero-v6 .hero-copy { max-width: min(660px, 40vw); }
.hero-v6 .hero-copy h1 { font-size: clamp(2.2rem, 4.2vw, 4rem); }
.hero-v6 .hero-talk { width: min(520px, 40vw); }
.hero-v6 .her { bottom: auto; transition: filter 1.6s var(--ease-soft); }
.hero-v6 .pool { display: none; }
/* ── hero design 5 (/?hero=5): inside her memory, then the pull-back (main.js → HERO === 5) */
.inside-line { display: none; }
.hero-v5 .inside-line { display: block; position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); z-index: 3; margin: 0; pointer-events: none; text-align: center;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem); color: var(--ink); text-shadow: 0 2px 30px #000; opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.hero-v5 .inside-line.on { opacity: 1; }
.hero-v5 .inside-line span { display: block; margin-top: 1.4em; font-family: var(--font-display); font-size: .56rem; letter-spacing: .4em; text-transform: uppercase; color: var(--cyan); }
.hero-v5 .her { transition: filter 1.6s var(--ease-soft); }
/* ── hero design 4 (/?hero=4, main.js → DAY): a day with her */
.day { display: none; }
.hero-v4 .day { display: block; position: absolute; inset: 0; pointer-events: none; }
.hero-v4 .chips { display: none; }
.day-wash i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--ease-soft); }
.day-wash i.on { opacity: 1; }
.day-wash i:nth-child(1) { background: radial-gradient(ellipse 60vw 55vh at 70% 18%, rgba(140,205,255,.28), transparent 70%), radial-gradient(ellipse 50vw 30vh at 75% 100%, rgba(255,196,150,.12), transparent 70%); }
.day-wash i:nth-child(2) { background: radial-gradient(ellipse 65vw 60vh at 68% 25%, rgba(88,230,255,.26), transparent 70%); }
.day-wash i:nth-child(3) { background: radial-gradient(ellipse 60vw 50vh at 72% 85%, rgba(255,150,110,.24), transparent 70%), radial-gradient(ellipse 50vw 45vh at 60% 20%, rgba(180,120,255,.15), transparent 70%); }
.day-wash i:nth-child(4) { background: radial-gradient(ellipse 60vw 60vh at 68% 30%, rgba(50,90,220,.3), transparent 70%); }
.day-time { position: absolute; left: 68vw; top: 9vh; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column-reverse; align-items: center; line-height: .85; transition: opacity .5s var(--ease-soft), translate .5s var(--ease-soft); }
.day-time b { display: block; font-family: var(--font-display); font-weight: 500; font-size: min(15vw, 30vh); color: rgba(234,246,248,.07); -webkit-text-stroke: 1px rgba(88,230,255,.35); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.day-time span { display: block; margin-bottom: .9em; font-family: var(--font-display); font-size: .72rem; letter-spacing: .5em; text-transform: uppercase; color: var(--cyan); }
.day-note { position: absolute; left: 80vw; top: 36vh; width: min(270px, 17vw); z-index: 3; padding: 14px 16px; border-radius: 18px;
  background: rgba(10,20,28,.62); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0,0,0,.5);
  opacity: 0; translate: 0 18px; transition: opacity .6s var(--ease-soft), translate .8s var(--ease-out); }
.day-note.on { opacity: 1; translate: 0 0; }
.dn-top { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .56rem; letter-spacing: .2em; color: var(--ink); }
.dn-top span { margin-left: auto; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.dn-icon { width: 18px; height: 18px; border-radius: 6px; background: radial-gradient(circle at 50% 40%, var(--cyan), #0b3440 75%); box-shadow: 0 0 12px rgba(88,230,255,.5); }
.day-note p { margin: .7em 0 0; font-size: .86rem; line-height: 1.45; color: var(--ink); }
.day-bar { position: absolute; right: var(--pad); bottom: 7vh; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; z-index: 3; }
.day-bar li { width: 44px; height: 2px; background: rgba(88,230,255,.15); overflow: hidden; }
.day-bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
/* ── hero design 2 (/?hero=2, heroform.js): she forms from specks of her own pixels, then the sprite fades in over them */
.hero-v2 .her:not(.is-real) #sprite-hero { opacity: var(--real, 0); }
.her-form { position: absolute; left: -90%; top: -12%; width: 280%; height: 112%; pointer-events: none; }
/* ?3d: her sprite laid on a surface shaped like her (her3d.js). The canvas is a little bigger than her frame so a
   turn is never clipped; the flat sprite keeps drawing underneath, unseen, because it is what the surface shows */
.her .her3d { position: absolute; left: -25%; top: -8%; width: 150%; height: 108%; pointer-events: none; }
.has-her3d #sprite-hero { opacity: 0; }
.pool { position: absolute; left: 50%; bottom: -3vh; width: 170%; height: 16vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(88,230,255,.35), rgba(25,200,255,.08) 40%, transparent 70%); filter: blur(4px); }
.drag { position: absolute; inset: -10vh -30%; z-index: 3; cursor: grab; touch-action: pan-y; }
.drag:active { cursor: grabbing; }
.chips { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.chip { position: absolute; left: var(--x); top: var(--y); max-width: 250px; padding: 12px 16px; border-radius: 14px; font-size: .8rem; line-height: 1.4; color: var(--ink);
  background: rgba(5,12,18,.45); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.5);
  opacity: 0; transform: perspective(800px) rotateY(-40deg) translateZ(-120px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(.9s + var(--n, 0) * .18s); }
.chip b { display: block; font-family: var(--font-display); font-weight: 500; font-size: .58rem; letter-spacing: .2em; color: var(--cyan); margin-bottom: 4px; text-transform: uppercase; }
.chips.is-in .chip { opacity: 1; transform: none; }
.chip-float { animation: float var(--d) ease-in-out infinite alternate; }
@keyframes float { from { translate: 0 -8px; } to { translate: 0 10px; } }
.cue { position: absolute; left: var(--pad); bottom: 4vh; z-index: 3; font-family: var(--font-display); font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.cue::after { content: ''; display: block; width: 1px; height: 34px; margin: 10px 0 0 4px; background: linear-gradient(var(--cyan), transparent); animation: cue 2s var(--ease-soft) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* the hero's second beat: a live call beside her */
.hero-talk { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); width: min(560px, 44vw); z-index: 3; opacity: 0; pointer-events: none; text-shadow: 0 2px 30px rgba(0,0,0,.9); }
.hero-talk.is-on { pointer-events: auto; }
.hero-talk h2 { margin-top: .5em; }
.call { margin-top: 1.8em; padding: 18px 18px 14px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55); text-shadow: none; }
.call-top { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.call-top .timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--cyan); }
.live { width: 8px; height: 8px; border-radius: 50%; background: #5dff9a; box-shadow: 0 0 10px #5dff9a; animation: pulse-live 1.4s ease-in-out infinite; }
@keyframes pulse-live { 50% { opacity: .35; } }
.wave { display: flex; align-items: center; gap: 3px; height: 38px; margin: 14px 0 10px; }
.wave i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(var(--cyan), var(--cyan-deep)); transform: scaleY(.08); }   /* main.js sets each bar's scaleY every frame */
.call-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.call-lines li { max-width: 88%; padding: 10px 14px; font-size: .9rem; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s var(--ease-out); }
.call-lines li.is-on { opacity: 1; transform: none; }
.call-lines .c-you { justify-self: end; border-radius: 16px 16px 4px 16px; background: rgba(234,246,248,.08); border: 1px solid var(--hair); }
.call-lines .c-her { justify-self: start; border-radius: 16px 16px 16px 4px; background: rgba(88,230,255,.1); border: 1px solid rgba(88,230,255,.3); }
.call-lines .cut::before { content: 'cut in · '; font-family: var(--font-mono); font-size: .68rem; color: var(--cyan); }
.hero-talk .proof { margin-top: 1.2em; }

/* ───────────── the vow and her memory: one pinned scene (driven by main.js) */
.mind { position: relative; height: 420vh; }   /* shortened 25 Sep (was 760vh with four moments): two moments now */
.mind-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* no will-change: that would freeze the text as a picture at its normal size and stretch it; left alone,
   the browser redraws the letters crisply at every size of the zoom */
.vow-line, .mind-head { position: absolute; left: 50%; top: 50%; width: min(1100px, 92vw); text-align: center;
  transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.vow-line h2 { font-size: clamp(2.4rem, 7vw, 6.4rem); letter-spacing: -.04em; }
.vow-line .lede, .mind-head .lede { margin: 1.3em auto 0; }
.vow-line .lede { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.mind-head { opacity: 0; pointer-events: none; }
.mind-head.is-on { pointer-events: auto; }
.mind-head h2 { margin-top: .5em; font-size: clamp(2.2rem, 5.4vw, 5rem); letter-spacing: -.035em; text-wrap: balance; }
.mind-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; margin-top: 1.6em; }
.mind-foot .btn.small { margin-top: 0; }
.counts { font-family: var(--font-display); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.counts b { display: inline-block; min-width: 1.4em; font-size: 1.6rem; font-weight: 700; color: var(--cyan); letter-spacing: 0; vertical-align: -.2em; margin-right: .3em; }
.moment-list { list-style: none; margin: 0; padding: 0; }
/* the cards: placed by main.js, one at a time under the heading */
.moment { position: absolute; left: 0; top: 0; width: min(500px, 86vw); opacity: 0; will-change: transform, opacity, filter; transform-origin: 50% 50%; }
.mind-node { position: absolute; left: 0; top: 0; width: 12px; height: 12px; background: var(--ink); opacity: 0; pointer-events: none; z-index: 2;
  box-shadow: 0 0 0 5px rgba(88,230,255,.25), 0 0 26px 6px var(--cyan); }
.m-top { display: flex; align-items: baseline; gap: 14px; margin: 0 4px 12px; }
.m-day { flex: none; font-family: var(--font-display); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); }
.moment h3 { font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--ink); text-shadow: 0 2px 20px rgba(0,0,0,.9); }
.chat { display: grid; gap: 12px; padding: 22px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(88,230,255,.08); background: rgba(5,12,18,.78); }
.chat p { margin: 0; }
.you { justify-self: end; min-height: 2.6em; max-width: 85%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: rgba(234,246,248,.08); border: 1px solid var(--hair); font-size: .95rem; }
.you:empty::after, .you.typing::after { content: ''; display: inline-block; width: 2px; height: 1em; background: var(--cyan); vertical-align: -.15em; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.her-say { justify-self: start; max-width: 88%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: rgba(88,230,255,.1); border: 1px solid rgba(88,230,255,.3); font-size: .95rem; line-height: 1.5;
  opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease-out); }
.kept { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; font-size: .95rem;
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease-out); }
.kept i { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); flex: none; align-self: center; }
.kept span { font-weight: 400; font-size: .75rem; color: var(--dim); font-family: var(--font-mono); }
.moment.s2 .her-say, .moment.s3 .kept { opacity: 1; transform: none; }

/* ───────────── private: the forget node */
.yours { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: center; padding: 14vh var(--pad); }
.yours-copy { max-width: 560px; }
.yours-copy h2 { margin-top: .6em; }
.forget-wrap { position: relative; aspect-ratio: 300 / 220; width: min(100%, 560px); justify-self: center; }
.web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.web line { stroke: rgba(88,230,255,.45); stroke-width: 1; transition: opacity .8s .3s; }
.web line.far { stroke: rgba(88,230,255,.18); }
.web rect { fill: var(--cyan); }
.forget { position: absolute; left: 50%; top: 50%; transform: translate(-12px, -12px); display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.forget .dot { width: 24px; height: 24px; flex: none; background: var(--ink); box-shadow: 0 0 0 6px rgba(88,230,255,.18), 0 0 30px var(--cyan); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(88,230,255,.06), 0 0 40px var(--cyan); } }
.f-label { display: grid; gap: 3px; padding: 10px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.f-label b { font-weight: 600; font-size: .95rem; }
.f-label span { font-family: var(--font-mono); font-size: .7rem; color: var(--dim); }
.forget:hover .f-label { border-color: var(--cyan); }
.forget { transition: opacity .9s var(--ease-soft), filter .9s, transform .9s var(--ease-out); }
.forget-wrap.is-cut .forget { opacity: 0; filter: blur(8px); transform: translate(-12px, -12px) scale(.92); pointer-events: none; }
.forget-wrap.is-cut .web line:not(.far) { opacity: 0; }
.forgotten { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-family: var(--font-display); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim);
  opacity: 0; transition: opacity .8s .6s; pointer-events: none; }
.forget-wrap.is-cut .forgotten { opacity: 1; }
.again { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); }

/* ───────────── the walk (unitedcarriers) */
.walk { position: relative; height: 420vh; }
.walk-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* the soft top edge while the walk rises into view, so the city does not arrive as a hard-edged box */
.walk-pin::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(#000 0%, rgba(0,0,0,.85) 30%, transparent 100%); opacity: var(--edge, 0); }
#road { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#city { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s; }
.walk.has-city #city { opacity: 1; }
.walk.has-city #road { display: none; }
.walk.has-city .walk-her { bottom: auto; top: 0; transform: translateX(-50%); }
.walk-head, .odo, .signs { z-index: 2; }
.walk-her { z-index: 1; }
.walk-her { position: absolute; left: 50%; bottom: 4vh; height: 62vh; aspect-ratio: 450 / 800; transform: translateX(-50%); }
.walk-her .sprite { width: 100%; height: 100%; }
.walk-head { position: absolute; left: var(--pad); top: 14vh; max-width: 40vw; z-index: 2; text-shadow: 0 2px 30px rgba(0,0,0,.9); }
/* the robot line (25 Sep), big: "As robots rise," then "ANITA rises with them." in cyan, kept left of her as she walks */
.walk-head h2 { margin-top: .5em; font-size: clamp(2.2rem, 4.7vw, 5.2rem); line-height: 1; }
/* it has to read over HQ's lit glass and the hologram too: a soft dark pool behind it, and a dark edge on the cyan */
.walk-head::before { content: ''; position: absolute; z-index: -1; inset: -10vh -10vw -8vh -14vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.72), rgba(0,0,0,.4) 55%, transparent); }
.walk-head h2 em { text-shadow: 0 0 14px rgba(0,0,0,.9), 0 0 40px rgba(88,230,255,.3); }
.signs { list-style: none; margin: 0; padding: 0; }
.signs li { position: absolute; left: 0; top: 0; width: 260px; padding: 14px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .85rem; line-height: 1.45; color: var(--ink); opacity: 0; will-change: transform, opacity; transform-origin: 50% 100%; }
.signs b { display: block; font-family: var(--font-display); font-weight: 500; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.odo { position: absolute; right: var(--pad); bottom: 6vh; display: grid; gap: 14px; text-align: right; z-index: 2; }
.odo div { display: grid; }
.odo span { font-family: var(--font-display); font-size: .55rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.odo b { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--cyan); font-variant-numeric: tabular-nums; }
.odo i { font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--dim); }

/* ───────────── facts */
.facts { padding: 18vh var(--pad) 12vh; }
.fact-grid { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.fact-grid li { padding: 26px 20px 26px 0; border-right: 1px solid var(--line); }
.fact-grid li + li { padding-left: 20px; }
.fact-grid li:last-child { border-right: 0; }
.fact-grid b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 3rem); color: var(--cyan); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.fact-grid b.word { font-size: clamp(1.1rem, 1.9vw, 1.9rem); line-height: clamp(2.4rem, 4.9vw, 4.4rem); letter-spacing: .01em; }
.fact-grid span { color: var(--dim); font-size: .9rem; }
.under { color: var(--dim); font-size: .9rem; margin: 1.4em 0 0; }
.versus { list-style: none; margin: 12vh 0 0; padding: 0; }
.versus li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; padding: 26px 0; border-top: 1px solid var(--hair); align-items: baseline; }
.versus span { color: var(--dim); font-size: clamp(1rem, 1.6vw, 1.35rem); }
.versus b { font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.7rem); letter-spacing: -.01em; }

/* ───────────── ANITA at work (25 Sep): every kind of ANITA as a glass card (the vision board's ANITA Industrial door) */
.work { position: relative; padding: 16vh var(--pad) 10vh; }
.work-head { max-width: 780px; }
.work-head h2 { margin-top: .5em; }
.work-grid { list-style: none; margin: 9vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }   /* every group splits in halves */
.work-grid > li { display: flex; }
.wc { position: relative; flex: 1; display: flex; flex-direction: column; padding: 24px 24px 22px; border-radius: 18px; overflow: hidden;
  background: rgba(5,12,18,.6); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .4s var(--ease-soft), transform .6s var(--ease-out), box-shadow .6s var(--ease-soft); }
/* a soft light that follows the cursor inside the card (main.js sets --mx, --my) */
.wc::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-soft);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(88,230,255,.11), transparent 65%); }
.wc:hover { border-color: rgba(88,230,255,.45); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.wc:hover::before { opacity: 1; }
.wc > * { position: relative; }
.wc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.wc-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(88,230,255,.06); color: var(--cyan); }
.wc-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wc-icon img { width: 26px; height: 26px; filter: drop-shadow(0 0 8px rgba(88,230,255,.4)); }
.wc-n { font-family: var(--font-display); font-weight: 500; font-size: .6rem; letter-spacing: .24em; color: var(--dim); }
.wc-tag { font-family: var(--font-display); font-weight: 500; font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.wc h3 { margin: .6em 0 0; font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.wc p { margin: 1em 0 0; max-width: 66ch; color: var(--dim); font-size: .9rem; line-height: 1.6; }
.wc p.wc-ai { padding-top: 1em; border-top: 1px solid var(--hair); color: var(--ink); }
.wc-ai b { display: block; margin-bottom: .5em; font-family: var(--font-display); font-weight: 500; font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.wc-ai b::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.wc-ai.next b { color: var(--dim); }
.wc-ai.next b::before { background: none; border: 1px solid var(--cyan); box-shadow: none; }
.wc-stack { list-style: none; margin: auto 0 0; padding: 1.4em 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wc-stack li { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--hair); font-family: var(--font-mono); font-size: .66rem; color: #b9c6ca; }
/* the last card is an invitation, not a product */
.wc-you { background: rgba(88,230,255,.05); border-style: dashed; border-color: rgba(88,230,255,.35); }
.wc-you p { margin-bottom: 1.6em; }
.wc-you .btn.small { margin-top: auto; align-self: flex-start; }
/* Dee's three kinds of work (25 Sep): a heading row across the grid for each group */
.wg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 7vh; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.work-grid > .wg:first-child { margin-top: 0; }
.wg b { font-family: var(--font-display); font-weight: 500; font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); }
.wg span { color: var(--dim); font-size: .95rem; }
/* the parts inside Enterprise (AI & Physical AI, R&D): smaller, lighter rules, so they read as belonging to it */
.wg.sub { margin-top: 5vh; padding-bottom: 10px; border-bottom-color: var(--hair); }
.wg + .wg.sub { margin-top: 3vh; }
.wg.sub b { font-size: .62rem; letter-spacing: .24em; color: var(--ink); }
.wg.sub b::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.wg.sub span { font-size: .88rem; }
.work-grid > li.wide { grid-column: 1 / -1; }
/* the personal card runs across the grid: its top row across the card, then its words on the left and what is
   inside on the right */
.wc-wide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 48px; }
.wc-wide > .wc-top { grid-column: 1 / -1; }
.wc-main { display: flex; flex-direction: column; }
.wc-side { display: flex; flex-direction: column; justify-content: flex-end; }
.wc-wide h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); max-width: 18ch; }
.wc-side .wc-stack { margin-top: 0; }
.wc-side .btn.small { align-self: flex-start; }

/* ───────────── ANITA Industrial: how she comes to work, four ways, then the road it is on */
.industrial { position: relative; padding: 10vh var(--pad) 14vh; }
.ways { list-style: none; margin: 8vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); counter-reset: way; }
.ways li { padding: 26px 22px 26px 0; counter-increment: way; }
.ways li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.ways b { display: block; font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.01em; line-height: 1.25; }
.ways b::before { content: counter(way, decimal-leading-zero); display: block; margin-bottom: 14px; font-family: var(--font-display); font-weight: 500; font-size: .6rem; letter-spacing: .24em; color: var(--cyan); }
.ways span { display: block; margin-top: .7em; color: var(--dim); font-size: .9rem; line-height: 1.6; }
/* the road: four stages on one line, lit where work is under way */
.road { margin-top: 12vh; }
.road-steps { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; counter-reset: step; }
.road-steps li { position: relative; padding-top: 30px; counter-increment: step; text-shadow: 0 0 12px #000, 0 0 4px #000; }   /* her memory grows behind it as the next chapter comes in */
.road-steps li::before { content: ''; position: absolute; left: 0; right: -24px; top: 5px; height: 1px; background: var(--line); }
.road-steps li:last-child::before { right: 0; background: linear-gradient(90deg, var(--line), transparent); }
.road-steps i { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(88,230,255,.5); background: var(--bg); }
.road-steps li.on i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.road-steps b { display: block; font-family: var(--font-display); font-weight: 500; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; }
.road-steps b::before { content: counter(step, decimal-leading-zero) ' · '; color: var(--cyan); }
.road-steps span { display: block; margin-top: .7em; color: var(--dim); font-size: .88rem; line-height: 1.55; }
.road-steps em { display: block; margin-top: .8em; font-style: normal; font-family: var(--font-mono); font-size: .68rem; color: var(--cyan); }
.road-steps li:not(.on) em { color: var(--dim); }
@media (max-width: 1100px) {
  .ways { grid-template-columns: 1fr 1fr; }
  .ways li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ways li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ───────────── ANITA for you: the personal chapter opens with the page's first hero words */
.chapter { min-height: 86vh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 16vh var(--pad); }
.chapter h2 { margin-top: .5em; font-size: clamp(2.2rem, 5.2vw, 4.6rem); max-width: 15ch; }
.chapter .lede { margin-left: auto; margin-right: auto; }

/* ───────────── the two doors: for you, and for your plant */
.door { min-height: 90vh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 16vh var(--pad); }
.door h2 { margin-top: .5em; font-size: clamp(2rem, 3.8vw, 3.6rem); max-width: 14ch; }
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(1200px, calc(100vw - 2 * var(--pad))); }
.door-one { display: grid; justify-items: center; align-content: start; padding: 2vh 4vw; }
.door-one + .door-one { border-left: 1px solid var(--line); }
.door .lede { margin-left: auto; margin-right: auto; }

/* ───────────── footer (spur) */
.foot { background: #000; border-top: 1px solid var(--line); padding: 10vh var(--pad) 28px; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 20px; }
.foot-col { grid-column: span 3; }
.foot-col.wide { grid-column: span 3; }
.foot h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #1c2a30;
  font-family: var(--font-mono); font-weight: 400; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #b9c6ca; }
.foot h4::before { content: ''; width: 7px; height: 7px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot p { margin: 0; color: var(--dim); font-size: .85rem; line-height: 1.6; }
.foot li a, .foot li button { position: relative; display: block; width: 100%; padding: 6px 8px; margin-left: -8px; text-decoration: none; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); isolation: isolate; }
.foot li a::before, .foot li button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--cyan); opacity: 0; transition: opacity .5s var(--ease-soft); }
.foot li a > span, .foot li button > span { display: inline-block; transition: transform .25s var(--ease-soft), color .25s var(--ease-soft); }
/* the trail: the block snaps on, the text jumps and turns dark at once; leaving, the text
   comes back in .25s but the block takes .5s to fade, so a sweep down the list leaves light behind */
.foot li a:hover::before, .foot li button:hover::before, .foot li a:focus-visible::before { opacity: 1; transition: none; }
.foot li a:hover > span, .foot li button:hover > span, .foot li a:focus-visible > span { transform: translateX(24px); color: #021014; transition: none; }
.foot-mark { margin: 12vh 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 21vw, 22rem); line-height: .8; letter-spacing: .04em; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(88,230,255,.28); background: linear-gradient(180deg, rgba(88,230,255,.14), transparent 80%); -webkit-background-clip: text; background-clip: text; user-select: none; }
/* the glow that follows the cursor inside the letters: a second copy of the word, lit only around the cursor */
.foot-mark { position: relative; }
.foot-mark::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 0; pointer-events: none;
  background: radial-gradient(circle var(--gr, 240px) at var(--gx, -999px) var(--gy, -999px), rgba(88,230,255,.55) 0%, rgba(25,200,255,.28) 30%, rgba(25,200,255,.08) 55%, transparent 72%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(88,230,255,.35));
  opacity: calc(var(--go, 0) * .85); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 16px; border-top: 1px solid #1c2a30; font-family: var(--font-mono); font-size: .7rem; color: var(--dim); }

/* ───────────── the join pill → panel (why.zero.university) */
.joinpill { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 35; transform: translate(-50%, 140%); transition: transform .6s var(--ease-out), width .45s var(--ease-out);
  width: 230px; height: 54px; border-radius: 60px; background: linear-gradient(180deg, #16252b, #0a1418); border: 1px solid rgba(88,230,255,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.6), 0 0 30px rgba(88,230,255,.12); overflow: hidden; }
.joinpill.is-shown { transform: translate(-50%, 0); }
.joinpill.is-open { width: min(460px, calc(100vw - 32px)); }
.jp-open { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan);
  transition: opacity .25s; }
.jp-form { position: absolute; inset: 5px; display: flex; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.joinpill.is-open .jp-open { opacity: 0; pointer-events: none; }
.joinpill.is-open .jp-form { opacity: 1; pointer-events: auto; transition-delay: .15s; }
.jp-form input { flex: 1; min-width: 0; border: 1px solid rgba(88,230,255,.22); border-radius: 60px; padding: 0 18px; background: rgba(234,246,248,.05); color: var(--ink);
  caret-color: var(--cyan); font: inherit; font-size: .95rem; outline: none; transition: border-color .2s, background .2s; }
.jp-form input::placeholder { color: rgba(234,246,248,.35); }
.jp-form input:focus { border-color: rgba(88,230,255,.6); background: rgba(88,230,255,.06); }
.jp-form input.is-bad { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.jp-form button { border: 0; border-radius: 60px; padding: 0 18px; cursor: pointer; color: #021014; background: var(--cyan); box-shadow: 0 0 22px rgba(88,230,255,.35);
  font-family: var(--font-display); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; transition: background .2s, box-shadow .2s; }
.jp-form button:hover { background: #7ff0ff; box-shadow: 0 0 32px rgba(88,230,255,.55); }
.panel-open .joinpill, .joinpill.is-away:not(.is-open) { transform: translate(-50%, 140%); }

/* the panel: why.zero.university's (a sheet that slides up, underline-only fields, a custom dropdown, a pill that goes
   spinner → "Joined", then the thank-you and share steps), in the site's own look since 25 Sep: black glass with a cyan
   hairline and a cyan glow rising from the bottom, the site's type (a Sora heading with its cyan word, Space Mono
   labels, Orbitron pills like .btn). It was light paper with handwriting before, which was off-palette. */
.panel { position: fixed; inset: 10px; z-index: 90; border-radius: 32px; overflow: auto; overscroll-behavior: contain; color: var(--ink);
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(25,200,255,.24) 0%, rgba(25,200,255,.07) 42%, transparent 68%),
    radial-gradient(60% 50% at 0% 0%, rgba(88,230,255,.07) 0%, transparent 70%),
    linear-gradient(180deg, #061015 0%, #02070a 100%);
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px rgba(0,0,0,.85), inset 0 1px 0 rgba(234,246,248,.06), inset 0 0 80px rgba(88,230,255,.04);
  transform: translateY(105%); transition: transform .65s cubic-bezier(.215,.61,.355,1); }
.panel[hidden] { display: block; visibility: hidden; }
.panel.is-open { transform: none; visibility: visible; }
.panel ::selection { background: var(--cyan); color: #021014; }
.panel :focus-visible { outline-color: var(--cyan); }
.panel-x { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(88,230,255,.3); background: rgba(5,12,18,.5); cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--ink); z-index: 2; transition: background .2s, color .2s, box-shadow .2s; }
.panel-x:hover { background: var(--cyan); color: #021014; box-shadow: 0 0 24px rgba(88,230,255,.4); }
.panel-in { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; padding: 10vh 7vw; }
.panel-in[hidden] { display: none; }
.panel-left .k { margin: 0 0 1.4em; }
.panel-left h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); max-width: 11ch; }
.panel-left h2 em { text-shadow: none; }   /* each line is masked while it slides in, which cut the glow into a box */
.panel-form { display: grid; gap: 22px; }
.field { display: grid; gap: 2px; opacity: 0; transform: translateY(36px); transition: opacity .7s, transform .7s var(--ease-out); }
.panel.is-open .field { opacity: 1; transform: none; }
.panel.is-open .field:nth-of-type(1) { transition-delay: .55s; } .panel.is-open .field:nth-of-type(2) { transition-delay: .65s; }
.panel.is-open .field:nth-of-type(3) { transition-delay: .75s; } .panel.is-open .field:nth-of-type(4) { transition-delay: .85s; }
.panel.is-open .field:nth-of-type(5) { transition-delay: .95s; }
.field > span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.field em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.field input, .field textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(234,246,248,.16); background: none; padding: 8px 0 10px; color: var(--ink); caret-color: var(--cyan);
  font: 400 1.15rem/1.4 var(--font-body); outline: none; resize: none; transition: border-color .3s, box-shadow .3s; border-radius: 0; }
.field input::placeholder, .field textarea::placeholder { color: rgba(234,246,248,.26); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--cyan); box-shadow: 0 1px 0 var(--cyan), 0 12px 18px -16px rgba(88,230,255,.7); }
.panel .field .is-bad { border-bottom-color: var(--bad); box-shadow: 0 1px 0 var(--bad); animation: shake .35s; }   /* over :focus: the flagged field is focused */
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* the browser paints autofilled fields light; they stay dark */
.panel input:-webkit-autofill, .jp-form input:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--cyan); -webkit-box-shadow: 0 0 0 100px #061015 inset; transition: background-color 9999s; }
/* the custom dropdown (theirs is for education; ours is the phone) */
.drop { position: relative; }
.drop-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; border-bottom: 1px solid rgba(234,246,248,.16); background: none; padding: 8px 0 10px;
  font: 400 1.15rem/1.4 var(--font-body); color: var(--ink); cursor: pointer; text-align: left; transition: border-color .3s; }
.drop-btn:hover, .drop-btn[aria-expanded="true"] { border-bottom-color: var(--cyan); }
.drop-btn i { font-style: normal; font-size: .8rem; color: var(--cyan); transition: transform .25s; }
.drop-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.drop-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 3; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: rgba(6,14,19,.97);
  border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 30px rgba(88,230,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: dropin .2s var(--ease-out); }
.drop-list[hidden] { display: none; }
@keyframes dropin { from { opacity: 0; transform: translateY(-6px); } }
.drop-list li { padding: 10px 14px; border-radius: 10px; cursor: pointer; font: 400 1rem var(--font-body); color: var(--ink); }
.drop-list li:hover, .drop-list li.is-active { background: rgba(88,230,255,.12); }
.drop-list li[aria-selected="true"] { color: var(--cyan); font-weight: 600; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap-reverse; margin-top: 6px; }
.say { margin: 0; flex: 1; min-width: 180px; font-size: .85rem; color: var(--dim); line-height: 1.5; text-align: right; }
.say.is-error { color: var(--bad); }
/* the site's pill (.btn), a size up; it fills with cyan when it is done */
.submit { position: relative; border: 1px solid rgba(88,230,255,.6); border-radius: 999px; padding: 18px 34px; cursor: pointer; color: var(--cyan); background: rgba(88,230,255,.08);
  font-family: var(--font-display); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 24px rgba(88,230,255,.12); transition: background .2s, color .2s, box-shadow .2s, transform .25s var(--ease-out); }
.submit:hover { background: var(--cyan); color: #021014; box-shadow: 0 0 34px rgba(88,230,255,.45); transform: translateY(-2px); }
.submit:active { transform: translateY(1px); }
.submit .spin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 2px solid rgba(88,230,255,.25); border-top-color: var(--cyan); opacity: 0; animation: spin .7s linear infinite; }
.submit.is-busy, .submit.is-busy:hover { background: rgba(88,230,255,.08); color: var(--cyan); box-shadow: 0 0 24px rgba(88,230,255,.12); transform: none; }
.submit.is-busy span { opacity: 0; } .submit.is-busy .spin { opacity: 1; }
.submit.is-done, .submit.is-done:hover { background: var(--cyan); color: #021014; box-shadow: 0 0 34px rgba(88,230,255,.45); }
@keyframes spin { to { transform: rotate(360deg); } }
.panel-done { min-height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; padding: 10vh 7vw; }
.panel-done[hidden] { display: none; }
.done-step { display: grid; justify-items: center; }
.done-step[hidden] { display: none; }
.done-step h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); animation: rise .9s var(--ease-out) both; }
.done-p { max-width: 42ch; margin: 1em auto 2em; font-size: 1.05rem; line-height: 1.6; color: var(--dim); animation: rise .9s .15s var(--ease-out) both; }
.done-step .submit, .share-row { animation: rise .9s .3s var(--ease-out) both; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.copy-pill { display: flex; align-items: center; gap: 12px; max-width: min(460px, 80vw); padding: 8px 8px 8px 20px; border-radius: 60px; border: 1px solid var(--line); background: rgba(5,12,18,.6);
  cursor: pointer; color: var(--ink); transition: border-color .2s; }
.copy-pill:hover { border-color: rgba(88,230,255,.5); }
.copy-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: .78rem; color: var(--dim); }
.copy-pill b { flex: none; padding: 10px 16px; border-radius: 60px; border: 1px solid rgba(88,230,255,.5); background: rgba(88,230,255,.1); color: var(--cyan);
  font-family: var(--font-display); font-weight: 500; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s; }
.copy-pill:hover b { background: var(--cyan); color: #021014; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }

.noscript { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-content: center; text-align: center; padding: 20px; }
.noscript img { height: 60vh; width: auto; margin: 0 auto; }
body.no-js-gate .gate { display: none; }

/* ───────────── phones */
@media (max-width: 800px) {
  .brand .word { display: none; }
  /* five links: tighter, and her emblem never gets squeezed out */
  .brand { flex: none; }
  .pill { gap: 0; padding: 3px; }
  .pill a, .pill button { padding: 8px 5px; font-size: .52rem; letter-spacing: .04em; }
  .hero-copy { top: 13vh; transform: none; right: var(--pad); }
  .hero-copy .k { margin-bottom: 1em; }
  .note { display: none; }
  .hero-talk { top: 11vh; transform: none; width: auto; right: var(--pad); }
  .hero-talk .lede { display: none; }
  .call { margin-top: 1em; padding: 12px; }
  .call-lines li { font-size: .8rem; padding: 8px 11px; }
  .wave { height: 26px; margin: 8px 0; }
  .call-lines li.old { display: none; }
  .her { left: 58%; height: 44vh; height: 44svh; }
  .drag { display: none; }
  .chip { display: none; }
  .chips .chip:nth-child(2) { display: block; left: auto; right: var(--pad); top: auto; bottom: 26vh; max-width: 170px; font-size: .72rem; }
  .cue { display: none; }
  .mind-head h2 { font-size: 2rem; }
  .mind-head .lede { font-size: .92rem; }
  .yours { grid-template-columns: 1fr; }
  .walk-head { top: 11vh; right: var(--pad); max-width: none; }
  .walk-her { height: 46vh; }
  .signs li { width: 210px; font-size: .78rem; }
  .odo { bottom: auto; top: 11vh; display: none; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .fact-grid li { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0 !important; }
  .versus li { grid-template-columns: 1fr; gap: 6px; }
  .work-grid { grid-template-columns: 1fr; }
  .wc-wide { grid-template-columns: 1fr; }
  .wg { margin-top: 5vh; }
  .ways { grid-template-columns: 1fr; }
  .ways li, .ways li + li { padding: 22px 0; border-left: 0; }
  .ways li + li { border-top: 1px solid var(--line); }
  .doors { grid-template-columns: 1fr; }
  .door-one { padding: 0; }
  .door-one + .door-one { border-left: 0; border-top: 1px solid var(--line); margin-top: 8vh; padding-top: 8vh; }
  .road-steps { grid-template-columns: 1fr; gap: 26px; }
  .road-steps li { padding: 0 0 0 28px; }
  .road-steps li::before { left: 5px; right: auto; top: 16px; bottom: -26px; width: 1px; height: auto; }
  .road-steps li:last-child::before { display: none; }
  .road-steps i { top: 2px; }
  .foot-col, .foot-col.wide { grid-column: span 6; }
  .panel { inset: 6px; border-radius: 24px; }
  .panel-in { grid-template-columns: 1fr; gap: 36px; padding: 72px 22px 40px; }
  .say { text-align: left; }
  .speaking { top: auto; bottom: 84px; }
}

@media (max-width: 340px) {
  .pill a, .pill button { padding: 8px 4px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .chip-float, .cue::after, .eq i, .forget .dot { animation: none; }
  .split .line-in, .reveal-fade, .chip, .field, .panel, .wc { transition: none; }
}