/* ============================================================
   Eklavya landing page — component styles.

   Every colour here names a ROLE from tokens.css (--ink, --dim,
   --line, --spot). Nothing names a scale step or a raw hex: those
   pin a component to one ground and break the ink/paper toggle.
   The one exception is the terminal, below.
   ============================================================ */

/* ------------------------------------------------------------
   THE TERMINAL'S OWN PALETTE
   The hero terminal is a picture of a terminal, and terminals are
   dark — so it keeps one palette on both grounds instead of
   flipping. Its block (from "THE TERMINAL" down to the picker) is
   preserved verbatim from before the ground rework and still names
   these; they are declared here, once, rather than in tokens.css,
   so nothing else can reach for them by accident.
   The greens moved to the verdigris ramp with the rest of the
   brand; the neutrals are unchanged terminal chrome.
   ------------------------------------------------------------ */
:root {
  --neutral-400: #9AA6AF;
  --neutral-500: #6B7780;
  --neutral-600: #4D575F;
  --neutral-700: #363F45;
  --neutral-800: #21282D;
  --green-200: var(--vd-100);
  --green-300: var(--vd-200);
  --green-400: var(--vd-300);  /* prompt, cursor — the brightest */
  --green-500: var(--vd-400);
  --green-600: var(--vd-500);
  --radius-xs: 4px;
  --radius-xl: var(--radius-term);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  /* No `antialiased`: grayscale smoothing thins light-on-dark
     glyphs, and ink is the default ground. */
  overflow-x: clip;
  /* the rule grid, herdr's device: it gives the flat ground a
     measure without adding another surface colour */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--spot); color: var(--spot-ink); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 0; }

/* ------------------------------------------------------------
   THE FRAME
   One continuous ground inside a ruled frame. Sections are
   separated by hairlines, never by a change of background — that
   is what makes a single theme toggle possible at all.
   ------------------------------------------------------------ */
.frame {
  max-width: var(--max); margin: 0 auto; background: var(--bg);
  position: relative;
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }

/* one hairline between every band — no background changes anywhere */
.frame > * + * { border-top: 1px solid var(--line-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shared type ---------- */
.eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: var(--tracking-caps-wide); text-transform: uppercase;
  color: var(--spot);
}
.eyebrow--dark, .eyebrow--light { color: var(--spot); }

.h2 {
  margin: 14px 0 0; font-family: var(--font-disp); font-weight: var(--weight-extra);
  font-size: var(--display-2); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.center { text-align: center; }
.pretty { text-wrap: pretty; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 12px 22px; border-radius: 0;
  transition: background 160ms var(--ease), color 160ms var(--ease),
              box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.btn--brand { background: var(--spot); color: var(--spot-ink); }
.btn--brand:hover { background: var(--spot); color: var(--spot-ink); }
.btn--ghost { color: var(--ink); border: 1px solid var(--line-2); padding: 12px 18px; }
.btn--ghost:hover { background: var(--panel); color: var(--ink); }
.btn--white {
  background: var(--panel); color: var(--ink);
  font-size: 14px; padding: 9px 16px;
}
.btn--white:hover { background: var(--mass); color: var(--ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.nav__inner {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 0;
  background: var(--spot); color: var(--spot-ink);
  display: flex; align-items: center; justify-content: center; flex: none;
}

/* ---------- copy a command ----------
   Injected by app.js into every block that holds a shell command, so a reader
   never has to select text by hand. Sits in the block's top-right corner and
   only fills in on hover or focus, so it is out of the way while reading and
   obvious the moment you reach for it. */
.cmd-block { position: relative; }
.cmd-copy {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); background: var(--bg);
  border: 1px solid var(--line-2); padding: 5px 9px; cursor: pointer;
  opacity: 0; transition: opacity 140ms var(--ease), color 140ms var(--ease),
                          border-color 140ms var(--ease);
}
.cmd-block:hover .cmd-copy,
.cmd-copy:focus-visible { opacity: 1; }
.cmd-copy:hover { color: var(--spot); border-color: var(--spot); }
.cmd-copy.is-done { opacity: 1; color: var(--spot); border-color: var(--spot); }
/* a touch screen has no hover, so the button is simply always there */
@media (hover: none) { .cmd-copy { opacity: 1; } }

/* ---------- the star count ----------
   The number is the ask. A live count reads as "other people did this" where
   "please star the repo" reads as begging, so the figure carries it and the
   label stays a verb. It is hidden until the fetch lands, so a rate-limited
   or offline visitor gets a clean button rather than a zero. */
.star {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); padding: 6px 12px; flex: none;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.star:hover { border-color: var(--spot); color: var(--spot); }
.star__mark { flex: none; }
.star__n {
  font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--line-2);
  color: var(--spot);
}
.star__n[hidden] { display: none; }

/* ---------- the ground toggle ----------
   Two states, both always visible and labelled, so the current
   ground is readable rather than inferred from an icon. */
.ground { display: flex; border: 1px solid var(--line-2); flex: none; }
.ground button {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  background: none; border: 0; color: var(--faint);
  padding: 6px 11px; cursor: pointer; line-height: 1.4;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.ground button:hover { color: var(--ink); }
.ground button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.brand__name { font-family: var(--font-disp); font-weight: var(--weight-extra); font-size: 19px; letter-spacing: var(--tracking-tight); color: var(--ink); }
.nav__links { display: flex; align-items: center; gap: 18px; min-width: 0; }
.nav__link {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
  transition: color 140ms var(--ease); white-space: nowrap; flex: none;
}
.nav__link:hover { color: var(--spot); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__glow {
  position: absolute; top: -200px; right: -100px; width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
  animation: glow 7s ease-in-out infinite;
}
.hero__glow--low {
  position: absolute; top: auto; bottom: -260px; left: -180px; right: auto;
  width: 600px; height: 600px; animation: none;
  background: radial-gradient(circle, var(--glow-low) 0%, transparent 65%);
}
.hero__arrows {
  /* Lives in the gap between the nav and the hero content, clear of the badge
     and the terminal — capped to the content width so a wide viewport cannot
     scale it tall enough to collide with either. */
  --fly: 854px;
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1400px;
  opacity: var(--shot-op); filter: blur(.4px); pointer-events: none; overflow: visible;
}
.hero__grid {
  position: relative;
  /* wider than .wrap on purpose: the terminal is the demo, and a real one is
     ~100 columns. The copy column is capped so it never stretches with it. */
  max-width: 1400px; padding: 108px 32px 100px;
  display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(25,150,136,.45); background: rgba(25,150,136,.12);
  color: var(--spot); border-radius: 0; padding: 6px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--spot); }

.hero__title {
  margin: 22px 0 0; font-family: var(--font-disp); font-weight: var(--weight-extra);
  font-size: clamp(38px, 4.2vw, 62px); line-height: .92;
  letter-spacing: var(--tracking-display); color: var(--ink);
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--spot); }
.hero__lede {
  margin: 24px 0 0; font-size: 19px; line-height: 1.6;
  color: var(--dim); max-width: 520px;
}
.hero__note { margin: 22px 0 0; font-size: 13.5px; color: var(--faint); }
.hero__actions { margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   THE TERMINAL
   A picture of a real terminal running a real Claude Code
   session, so it is built on a character grid: one line-height
   for every row, no flex gaps, boxes drawn with borders rather
   than box-drawing glyphs so they reflow instead of overflowing.
   ============================================================ */
.term-shell { position: relative; min-width: 0; }
.term-shell::before {
  content: ""; position: absolute; inset: -28px; border-radius: 28px;
  background: radial-gradient(circle, rgba(25,150,136,.20) 0%, rgba(25,150,136,0) 70%);
}
.term {
  position: relative; background: #0E1214; border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.35),
              inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden; border: 1px solid var(--neutral-700);
}
.term__bar {
  display: flex; align-items: center; gap: 8px;
  /* The 98x34 badge used to be the tallest thing in here and set the bar's
     height at 45px. Removing it would have shrunk the bar and moved the whole
     terminal up, so the height it always had is stated outright. */
  min-height: 45px;
  padding: 11px 14px; border-bottom: 1px solid var(--neutral-800);
  background: linear-gradient(180deg, #1B2125 0%, #161B1E 100%);
}
/* macOS window controls in the colours macOS uses. This is a depiction of
   another application's chrome, not an Eklavya surface, so the tokens do
   not apply — dimmed while the window is "inactive", full on hover. */
.term__lights { display: flex; gap: 8px; margin-right: 6px; }
.term__lights i {
  width: 11px; height: 11px; border-radius: 50%; display: block;
  opacity: .55; transition: opacity 200ms var(--ease);
}
.term__lights i:nth-child(1) { background: #FF5F57; }
.term__lights i:nth-child(2) { background: #FEBC2E; }
.term__lights i:nth-child(3) { background: #28C840; }
.term:hover .term__lights i, .term:focus-within .term__lights i { opacity: 1; }
.term__title {
  flex: 1; text-align: center; font-family: var(--font-mono);
  font-size: 12px; color: var(--neutral-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ---------- who built it ----------
   Sits in the title bar because that is where a window says whose window it is.
   Deliberately quiet: it takes the terminal's own muted chrome colour rather
   than the accent, and only comes up to full strength on hover.

   The height is the constraint: the bar is 45px, set by its 11px padding and
   the title's line box, so the avatar is 18px and every box in here is given an
   explicit line-height — inheriting the page's 1.65 is what pushed the bar
   taller on the first attempt. */
.term__by {
  display: flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
  color: var(--neutral-600); white-space: nowrap;
  transition: color 160ms var(--ease);
}
.term__by span { line-height: 1; }
.term__by b { font-weight: 400; color: var(--neutral-500); transition: color 160ms var(--ease); }
.term__by img {
  width: 18px; height: 18px; border-radius: 50%; display: block; flex: none;
  opacity: .55; filter: grayscale(1);
  transition: opacity 160ms var(--ease), filter 160ms var(--ease);
}
.term__by:hover { color: var(--neutral-500); }
.term__by:hover b { color: var(--green-300); }
.term__by:hover img { opacity: 1; filter: none; }

/* Fixed height, and the transcript scrolls inside it: the session runs to
   about twice this and the hero must not grow a screen taller as it plays. */
.term__screen {
  padding: 18px 20px 16px; font-family: var(--font-mono);
  font-size: 13px; line-height: 1.7; height: 476px;
  color: #AEB8C0; cursor: text;
  /* Two parts: a scroller, and a prompt bolted to the last row. */
  display: flex; flex-direction: column; min-height: 0;
}
.term__screen:focus-visible { outline: none; }
/* the transcript — the only thing that moves */
.term__log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--neutral-800) transparent;
  overscroll-behavior: contain;
  /* A short transcript sits on the floor of the scroller rather than the
     ceiling, the way a fresh terminal does. `margin-top: auto` on the inner
     wrapper does that without breaking scrolling once it overflows, which
     `justify-content: flex-end` on the scroller itself would. */
  display: flex; flex-direction: column;
}
.term__lines { margin-top: auto; }
.term__log::-webkit-scrollbar { width: 8px; }
.term__log::-webkit-scrollbar-thumb { background: var(--neutral-800); border-radius: var(--radius-pill); }
.term__log::-webkit-scrollbar-thumb:hover { background: var(--neutral-700); }

/* the prompt: pinned, never scrolls, dimmed while Claude is working */
.term__dock { flex: none; padding-top: 4px; }
.term__dock[hidden] { display: none; }
.term__dock.is-busy { opacity: .4; pointer-events: none; }

/* tmux-style status line: it uses the extra width the hero now has, and it
   is where the four dials actually live. */
.term__status {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 14px; border-top: 1px solid var(--neutral-800);
  background: #12171A; font-family: var(--font-mono); font-size: 11px;
  color: var(--neutral-400); white-space: nowrap; overflow: hidden;
}
.term__gap { flex: 1; }
.term__st--ek { color: var(--green-400); }

/* ---------- lines ---------- */
/* Every line starts `hidden`; app.js unhides it and adds .is-on a frame later
   so the transition has two states to run between. */
.ln,
.term__dock { opacity: 0; transform: translateY(4px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.ln.is-on,
.term__dock.is-on { opacity: 1; transform: none; }
/* No JS, no [data-ready]: nothing will ever unhide the lines, so print the
   whole transcript and drop the parts only a keyboard could have driven. */
.term__screen:not([data-ready]) .ln[hidden] { display: block; opacity: 1; transform: none; }
/* The class-plus-attribute selector above is the one to beat, hence .ln here. */
.term__screen:not([data-ready]) .term__dock,
.term__screen:not([data-ready]) .ln[data-line="replay"],
.term__screen:not([data-ready]) .ln[data-line="think"],
.term__screen:not([data-ready]) .ask__keys,
.term__screen:not([data-ready]) .cur { display: none; }
/* The parts JS would have filled in, printed as the recorded session ran. */
.term__screen:not([data-ready]) [data-boot]::after { content: "claude"; }
.term__screen:not([data-ready]) [data-grade]::after { content: "\2713 correct \00b7 grade 4 \00b7 next review in 6 days"; }
.term__screen:not([data-ready]) [data-why]::after { content: "httpOnly keeps the cookie out of document.cookie, so an injected script can reach the in-memory access token but never the refresh token that mints new ones."; }
.term__screen:not([data-ready]) [data-done]::after { content: "task complete \2014 3 files changed, nothing left to ask"; }
.term__screen:not([data-ready]) .ask__opt:first-child { background: rgba(25, 150, 136, .18); color: #E8EDEF; }
.term__screen:not([data-ready]) .ask__opt:first-child .ask__mark::after { content: "\2713"; color: var(--green-300); }

.dim { color: var(--neutral-600); }
.cur { color: var(--green-400); animation: blink 1.06s steps(1) infinite; }
.cur[hidden] { display: none; }

.ln--shell { color: var(--neutral-400); white-space: nowrap; overflow: hidden; }
.ln__cwd { color: var(--green-300); }
.ln__branch { color: #B48EAD; margin-left: 8px; }
.ln__p { color: var(--green-400); margin: 0 8px 0 10px; }
.ln--user { color: #E8EDEF; margin-top: 4px; }
.ln--user .ln__p { margin-left: 0; }
.ln--hook { color: var(--green-600); font-size: 12px; }
.ln--note { color: var(--neutral-600); font-size: 11.5px; }
.ln--think { color: var(--green-300); margin: 6px 0; }
.think__g { display: inline-block; width: 1ch; color: var(--green-400); }
.ln--done { color: var(--green-300); margin-top: 8px; }
.done__tick { color: var(--green-400); }

/* ---------- tool calls, as the transcript prints them ---------- */
.tool { margin-top: 8px; }
.tool__head { color: #D6DDE2; }
.tool__dot { color: var(--green-400); }
.tool__arg { color: var(--neutral-400); }
.tool__res { color: var(--neutral-400); padding-left: 2ch; }
.tool__el { color: var(--neutral-600); margin-right: 1ch; }
.tool__res--sub { padding-left: 4ch; color: var(--green-600); font-size: 12px; }
/* the tutor's one-line explanation, printed under the grade */
.tool__res--why { padding-left: 4ch; color: var(--neutral-400); }
.tool--ek .tool__head { color: var(--green-300); }
.is-miss { color: var(--error); }
.is-blank { color: var(--neutral-500); }

/* ---------- boxes ---------- */
/* Claude Code draws these with box-drawing characters; a 1px border is the
   same picture and survives a 320px screen, which ─────╮ does not. */
.box {
  border: 1px solid var(--neutral-700); border-radius: var(--radius-sm);
  padding: 8px 12px; margin: 10px 0 2px; background: rgba(24, 30, 34, .6);
}
.box--welcome { border-color: rgba(25,150,136,.30); background: rgba(25,150,136,.05); }
.box__star { color: var(--green-400); }
.box__row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box__row b { color: #E8EDEF; font-weight: 500; }

/* ---------- the composer: where the visitor actually types ---------- */
.box--composer {
  display: flex; align-items: baseline; position: relative;
  border-color: var(--neutral-600); background: rgba(18, 22, 25, .8);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.box--composer:focus-within,
[data-composer].is-armed { border-color: var(--green-600); box-shadow: 0 0 0 1px rgba(25,150,136,.25); }
.box__p { color: var(--green-400); margin-right: 1ch; flex: none; }
.composer__echo { color: #E8EDEF; white-space: pre-wrap; word-break: break-word; min-width: 0; }
/* A real input so phones raise a keyboard and screen readers see a field —
   invisible, laid over the box, with the block cursor standing in for its
   caret. 16px keeps iOS from zooming the page on focus. */
.composer__ghost {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; font-size: 16px;
  background: transparent; color: transparent; caret-color: transparent;
}
.composer__foot {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--neutral-600); padding: 2px 2px 0;
}
.composer__hint { color: var(--green-500); }
.composer__hint[hidden] { display: none; }
kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--green-300);
  border: 1px solid rgba(25,150,136,.4); border-radius: var(--radius-xs);
  padding: 0 5px; background: rgba(25,150,136,.12);
}

/* the nudge, if the visitor just watches */
.nudge {
  position: relative; margin: 14px 0 2px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--green-200);
  background: rgba(25,150,136,.18); border: 1px solid rgba(25,150,136,.45);
  border-radius: var(--radius-pill); padding: 6px 14px; cursor: pointer;
  animation: nudge-in 320ms var(--ease) both, nudge-pulse 2.4s var(--ease) 320ms infinite;
}
.nudge[hidden] { display: none; }
.nudge:hover { background: rgba(25,150,136,.3); border-color: var(--green-500); }
.nudge__arrow {
  position: absolute; top: -5px; left: 22px; width: 8px; height: 8px;
  background: rgba(25,150,136,.18); border-left: 1px solid rgba(25,150,136,.45);
  border-top: 1px solid rgba(25,150,136,.45); transform: rotate(45deg);
}
@keyframes nudge-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes nudge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25,150,136,0); }
  50% { box-shadow: 0 0 0 6px rgba(25,150,136,.12); }
}

/* ---------- the picker, as AskUserQuestion draws it ---------- */
.box--ask { border-left: 2px solid var(--green-500); background: rgba(25,150,136,.06); padding: 10px 12px 8px; }
.ask__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ask__chip {
  color: var(--green-300); background: rgba(25, 150, 136, .18);
  border: 1px solid rgba(25, 150, 136, .35);
  padding: 0 8px; border-radius: var(--radius-pill);
  font-size: 11.5px; letter-spacing: .02em;
}
.ask__stem { margin: 0 0 8px; color: #E8EDEF; }
.ask__ref { color: var(--green-300); }
.ask__opts { display: flex; flex-direction: column; }
.ask__opt {
  width: 100%; font: inherit; text-align: left; border: 0; background: none;
  color: #AEB8C0; padding: 1px 4px; border-radius: var(--radius-xs);
  display: flex; align-items: flex-start; gap: 1ch; cursor: default;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.ask__opt--other { color: var(--neutral-600); }
.ask__cur { flex: none; width: 1ch; color: var(--green-400); opacity: 0; }
.ask__n { flex: none; color: var(--neutral-600); }
.ask__txt { flex: 1; }
.ask__mark { flex: none; width: 2ch; text-align: right; }

/* .is-live is on only while the question is open — afterwards the rows stop
   reacting to the pointer, the way a resolved picker does. */
.ask__opts.is-live .ask__opt { cursor: pointer; }
.ask__opts.is-live .ask__opt:hover,
.ask__opts.is-live .ask__opt.is-cur {
  background: rgba(25, 150, 136, .16); color: #E8EDEF; outline: none;
}
.ask__opts.is-live .ask__opt:hover .ask__cur,
.ask__opts.is-live .ask__opt.is-cur .ask__cur { opacity: 1; }
.ask__opt:focus-visible { outline: 1px solid var(--green-400); outline-offset: 0; }
.ask__opt.is-right { background: rgba(25, 150, 136, .18); color: #E8EDEF; }
.ask__opt.is-right .ask__n, .ask__opt.is-right .ask__mark { color: var(--green-300); }
.ask__opt.is-wrong { background: rgba(229, 72, 77, .14); color: #E8EDEF; }
.ask__opt.is-wrong .ask__n, .ask__opt.is-wrong .ask__mark { color: var(--error); }
.ask__opt.is-blank { background: rgba(107, 119, 128, .18); color: #C7CFD4; }
.ask__opt.is-blank .ask__mark { color: var(--neutral-400); }
.ask__keys { color: var(--neutral-600); font-size: 11.5px; padding: 4px 0 0 2px; }
.ask__keys[hidden] { display: none; }

/* ============================================================
   WHY
   ============================================================ */

.why__inner { max-width: 860px; margin: 0 auto; padding: 96px 32px; text-align: center; }
.why__statement {
  margin: 0; font-family: var(--font-disp); font-weight: var(--weight-bold);
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15;
  letter-spacing: var(--tracking-tight); text-wrap: balance;
}
.why__statement em { font-style: normal; color: var(--spot); }
.why__body {
  margin: 24px auto 0; font-size: 18px; line-height: 1.65;
  color: var(--dim); max-width: 640px;
}

/* ============================================================
   LEGEND
   ============================================================ */
.legend { position: relative; overflow: hidden; }
.legend__glow {
  position: absolute; top: -160px; left: 30%; width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
}
.legend__inner { position: relative; padding: 96px 32px 88px; }
.legend__title { color: var(--ink); font-size: var(--display-2); margin-left: auto; margin-right: auto; }
.shot { --fly: 738px; display: block; width: 100%; max-width: 980px; margin: 48px auto 0; overflow: visible; }
.legend__cols {
  margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
}
.legend__idx { font-family: var(--font-mono); font-size: 13px; color: var(--spot); }
.legend__head { margin: 12px 0 8px; font-family: var(--font-disp); font-size: 19px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); color: var(--ink); }
.legend__body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--dim); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */

.how__grid {
  padding: 96px 32px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px;
}
.how__body { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--dim); }

.ladder { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.ladder__ends {
  display: flex; justify-content: space-between;
  padding-left: 182px; padding-right: 80px; margin-bottom: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
}
.ladder__row {
  display: grid; grid-template-columns: 44px 110px 1fr 66px; align-items: center; gap: 14px;
}
.ladder__band {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; text-align: right; color: var(--faint);
}
.ladder__band--easy { color: var(--spot); }
.ladder__band--medium { color: var(--spot); }
.ladder__band--hard { color: var(--spot); }
.ladder__note {
  margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--faint);
}
.ladder__tier { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.ladder__label { font-size: 14px; font-weight: 700; }
.ladder__track {
  height: 8px; border-radius: 0; background: var(--mass);
  overflow: hidden; display: block;
}
.ladder__fill {
  display: block; height: 100%; width: 0; border-radius: 0;
  transition: width 1s var(--ease);
}
.ladder__fill--t1 { background: var(--spot); transition-delay: 0ms; }
.ladder__fill--t2 { background: var(--spot); transition-delay: 100ms; }
.ladder__fill--t3 { background: var(--spot); transition-delay: 200ms; }
.ladder__fill--t4 { background: var(--spot); transition-delay: 300ms; }
.ladder__fill--t5 { background: var(--spot); transition-delay: 400ms; }

.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps__spine {
  position: absolute; left: 19px; top: 20px; bottom: 20px;
  width: 2px; background: var(--mass);
}
.steps li { position: relative; padding: 0 0 36px 64px; }
.steps li:last-child { padding-bottom: 0; }
.steps__n {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--spot-soft); border: 1px solid var(--spot); color: var(--spot);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
}
.steps__n--solid { background: var(--spot); border-color: var(--spot); color: var(--spot-ink); }
.steps h3 { margin: 8px 0 6px; font-family: var(--font-disp); font-size: 19px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
.steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dim); }
.steps p.has-chips { margin-bottom: 10px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono); font-size: 12px; color: var(--spot);
  background: var(--spot-soft); border: 1px solid var(--spot);
  padding: 3px 10px; border-radius: 0;
}

/* ============================================================
   NEVER THE SAME QUESTION TWICE
   ============================================================ */

.promise__sub {
  margin: 16px auto 0; font-size: 17px; color: var(--dim);
  text-align: center; max-width: 560px;
}
.cards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0; padding: 28px;
  transition: box-shadow 200ms var(--ease);
}
.card:hover { }
.card h3 { margin: 18px 0 8px; font-family: var(--font-disp); font-size: 18px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
.card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.icon-tile {
  width: 44px; height: 44px; border-radius: 0; background: var(--spot-soft);
  display: flex; align-items: center; justify-content: center; color: var(--spot);
}
.icon-tile--dark { background: var(--spot-soft); color: var(--spot); }

/* ============================================================
   DIALS
   ============================================================ */
.modes { position: relative; overflow: hidden; }
.modes .section { position: relative; }
.modes .h2 { color: var(--ink); }
/* #modes was the section's original id and may already be in a shared link */
.anchor-alias { display: block; position: relative; top: -80px; visibility: hidden; }
.dials__sub {
  margin: 18px 0 0; font-size: 17px; line-height: 1.6;
  color: var(--dim); max-width: 720px;
}
.dials { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dial {
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 0;
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.dial__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.dial__key {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--spot);
}
.dial__q { font-size: 14px; font-weight: 700; color: var(--ink); }
.dial__sep { color: var(--dim); font-size: 13px; }
.dial__opt {
  position: relative; border-top: 1px solid var(--line); padding-top: 14px;
}
.dial__opt--default {
  border-top: 0; background: var(--spot-soft); border: 1px solid var(--spot);
  border-radius: 0; padding: 14px 16px;
}
.dial__pill {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--spot); background: var(--spot-soft);
  border: 1px solid var(--spot);
  padding: 2px 8px; border-radius: 0;
}
.dial__val {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink);
}
.dial__opt--default .dial__val { color: var(--spot); }
.dial__opt p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--dim); }
.dial__opt--note p { font-size: 13.5px; color: var(--faint); }
.code-inline {
  font-family: var(--font-mono); font-size: 13px; color: var(--dim);
  background: var(--mass); padding: 1px 5px; border-radius: 0;
}
.modes .code-inline { background: var(--mass); color: var(--spot); }
.modes .dial__opt--default .code-inline { background: var(--bg); }
.modes__foot { margin: 28px 0 0; font-size: 14px; line-height: 1.6; color: var(--faint); max-width: 860px; }
.modes__foot .code-inline { color: var(--spot); padding: 2px 8px; }

/* ============================================================
   COMMANDS + DATA
   ============================================================ */

.commands__grid {
  padding: 96px 32px; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 72px; align-items: start;
}
.commands .h2 { margin: 0 0 36px; }
.cmd-table {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 0; overflow: hidden;
}
.cmd-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 16px;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.cmd-row:last-child { border-bottom: 0; }
.cmd-row code { font-family: var(--font-mono); font-size: 13.5px; color: var(--spot); }
.cmd-row span { font-size: 14px; color: var(--dim); }
.cmd-ask { margin: 20px 0 0; font-size: 14px; line-height: 1.7; color: var(--dim); }
.cmd-ask code { font-family: var(--font-mono); font-size: 13px; color: var(--spot); }
.cmd-ask em { font-style: normal; color: var(--ink); }
.cmd-ask a { color: var(--spot); text-decoration: none; border-bottom: 1px solid var(--spot); }
.cmd-ask a:hover { border-bottom-color: var(--spot); }

.data-card {
  background: var(--bg); border-radius: var(--radius-xl); padding: 36px;
  color: var(--ink); position: sticky; top: 96px;
}
.data-card h3 { margin: 20px 0 10px; font-family: var(--font-disp); font-size: 24px; font-weight: var(--weight-extra); letter-spacing: var(--tracking-tight); }
.data-card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--dim); }
.data-card p + p { margin-top: 16px; }
.data-card code { font-family: var(--font-mono); font-size: 13px; color: var(--spot); }

/* ============================================================
   DASHBOARD
   ============================================================ */

.dash__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dash__sub { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--dim); }
.dash__cmd {
  margin-top: 28px; background: var(--bg); border-radius: 0;
  padding: 18px 20px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.9;
}
.dash__cmd div { color: var(--ink); }
.dash__cmd span { color: var(--spot); margin-right: 10px; }
.dash__cmd-out { color: var(--dim) !important; }
.dash__list { margin: 24px 0 0; padding: 0; list-style: none; }
.dash__list li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 15px; line-height: 1.6; color: var(--dim);
}
.dash__list li::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--spot);
}
.dash__note { margin: 22px 0 0; font-size: 14px; line-height: 1.6; color: var(--faint); }
.dash__note code { font-family: var(--font-mono); font-size: 13px; color: var(--spot); }

.dash__preview {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 24px;
}
.dash__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash__tile {
  background: var(--bg); border-radius: 0; padding: 12px 10px;
}
.dash__tile b {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dim);
}
.dash__tile i {
  display: block; margin-top: 4px; font-style: normal; font-size: 22px;
  font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
}
.dash__legend { display: flex; gap: 16px; margin: 22px 0 12px; font-size: 11.5px; color: var(--dim); }
.dash__legend b { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.dash__legend .is-right { background: var(--spot); }
.dash__legend .is-missed { background: var(--warning); }
.dash__legend .is-skipped { background: var(--faint); }

/* Each bar is one element; the three segments are gradient stops driven by the
   --r/--m/--s custom properties, so a bar is markup-free apart from its values. */
.dash__chart {
  display: flex; align-items: flex-end; gap: 6px; height: 120px;
  border-bottom: 1px solid var(--line);
}
.dash__chart span {
  flex: 1; border-radius: 3px 3px 0 0;
  height: calc(var(--r) + var(--m) + var(--s));
  background: linear-gradient(
    to top,
    var(--spot) 0, var(--spot) var(--rs),
    transparent var(--rs), transparent calc(var(--rs) + 2px),
    var(--warning) calc(var(--rs) + 2px), var(--warning) var(--ms),
    transparent var(--ms), transparent calc(var(--ms) + 2px),
    var(--faint-2) calc(var(--ms) + 2px)
  );
  --total: calc(var(--r) + var(--m) + var(--s));
  --rs: calc(var(--r) / var(--total) * 100%);
  --ms: calc((var(--r) + var(--m)) / var(--total) * 100%);
}

@media (max-width: 900px) {
  .dash__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .dash__tiles { grid-template-columns: repeat(2, 1fr); }
  .dash__chart { height: 96px; }
}

/* ============================================================
   DOCS — the pointer to /docs
   ============================================================ */

.docs__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.docs__sub { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--dim); }
.docs__actions { margin-top: 28px; }

.docs__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.docs__card {
  display: block; padding: 22px 22px 24px;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--panel);
  transition: border-color 160ms var(--ease), background 160ms var(--ease),
              transform 160ms var(--ease);
}
.docs__card:hover {
  border-color: var(--spot); background: var(--bg);
  transform: translateY(-2px);
}
.docs__n {
  display: block; font-family: var(--font-mono); font-size: 12px;
  color: var(--spot); margin-bottom: 12px;
}
.docs__card b {
  display: block; font-size: 16px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.docs__card span:last-child {
  display: block; font-size: 14px; line-height: 1.6; color: var(--dim);
}

/* ============================================================
   CTA
   ============================================================ */
.cta { position: relative; overflow: hidden; }
.cta__glow {
  position: absolute; top: -220px; left: 50%; margin-left: -360px;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
}
.cta__inner {
  position: relative; max-width: 860px; margin: 0 auto;
  padding: 104px 32px; text-align: center;
}
.cta__title {
  margin: 0; font-family: var(--font-disp); font-weight: var(--weight-extra);
  font-size: var(--display-1); line-height: .92;
  letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance;
}
.cta__title em { font-style: normal; color: var(--spot); }
.cta__code {
  margin: 40px auto 0; max-width: 520px; text-align: left;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0; padding: 22px 26px;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 2; color: var(--ink);
  overflow-x: auto;
}
.cta__code span { color: var(--faint); }
.cta__actions { margin-top: 36px; display: flex; justify-content: center; gap: 14px; }
.cta__note { margin: 28px 0 0; font-size: 13.5px; color: var(--faint); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer__inner {
  padding: 56px 32px; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 48px;
}
.footer__left { max-width: 520px; }
.footer__mark {
  width: 26px; height: 26px; border-radius: 0; background: var(--spot);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.footer__quote {
  margin: 16px 0 0; font-size: 14px; line-height: 1.65;
  color: var(--faint); font-style: italic;
}
.footer__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font-size: 14px; color: var(--faint); text-align: right;
}

/* ============================================================
   MOTION
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes arrowFly {
  0%, 4% { transform: translateX(0); opacity: 0; }
  7% { opacity: 1; }
  16% { transform: translateX(var(--fly)); opacity: 1; }
  88% { transform: translateX(var(--fly)); opacity: 1; }
  94%, 100% { transform: translateX(var(--fly)); opacity: 0; }
}
@keyframes ripple {
  0%, 15% { transform: scale(.3); opacity: 0; }
  22% { opacity: .9; transform: scale(1); }
  42% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; }
}
@keyframes targetPop {
  0%, 15% { transform: scale(1); }
  18% { transform: scale(1.06); }
  24% { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes bowRecoil {
  0%, 14% { transform: translateX(0); }
  16% { transform: translateX(-5px); }
  22% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* hero entrance */
.fade-up { animation: fadeUp .7s var(--ease) both; }
.fade-up--1 { animation-delay: .1s; }
.fade-up--2 { animation-delay: .2s; }
.fade-up--3 { animation-delay: .3s; }
.fade-up--4 { animation-delay: .4s; }
.fade-up--5 { animation-delay: .5s; }
.fade-up--term { animation-duration: .8s; animation-delay: .25s; }

/* scroll reveals — JS flips [data-reveal] to .is-visible */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* the legend's arrow flight holds until scrolled into view */
[data-shoot] [data-anim],
[data-shoot] [data-anim] * { animation-play-state: paused; }
[data-shoot].is-firing [data-anim],
[data-shoot].is-firing [data-anim] * { animation-play-state: running; }
.shot__bow { animation: bowRecoil 9s linear infinite; transform-box: fill-box; }
.shot__arrow { animation: arrowFly 9s cubic-bezier(.3,0,.4,1) infinite; }
.shot__target { animation: targetPop 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.shot__ripple { animation: ripple 9s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.shot__ripple--late { animation-delay: .25s; }

/* ============================================================
   THE STORY — the loop that plays behind the WHY copy.
   One 17.5s clock, six beats: generate, ship, debug, teach,
   harder, hold. Every element below is a percentage window on
   that clock, the same way the hero terminal is written, so
   nothing needs JavaScript to stay in sync.
   ============================================================ */
.story { position: relative; overflow: hidden; }
.story .why__inner { position: relative; z-index: 1; }
/* the copy is never covered: the props are all one layer behind it */
.story__bg {
  position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  animation: storyBg 17.5s linear infinite;
}
.story__grid {
  position: absolute; inset: -40px;
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .5;
  animation: gridDrift 26s linear infinite;
}
/* the brand glow drifts between the stations the story is told at */
.story__glow {
  position: absolute; top: 50%; left: 50%;
  width: 1040px; height: 672px; margin: -336px 0 0 -520px;
  background: radial-gradient(ellipse at center, var(--glow-low), transparent 65%);
  animation: storyGlow 17.5s ease-in-out infinite;
}

/* ---------- the agent's code, typing itself in ---------- */
.story__code {
  position: absolute; font-family: var(--font-mono);
  font-size: 14px; line-height: 26px; color: var(--ink);
  opacity: .5; animation: storyCode 17.5s var(--ease) infinite;
}
.story__code--l { left: 3%; top: 20%; --s: .2s; }
.story__code--r { right: 3%; top: 24%; --s: .55s; }
.story__line { white-space: pre; }
.story__t {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  width: 0; animation: storyType 17.5s steps(20, end) infinite;
}
.story__cur {
  color: var(--spot); opacity: 0;
  animation: storyCur 17.5s steps(1, end) infinite;
}
.story__t, .story__cur { animation-delay: calc(var(--s) + var(--i) * .16s); }

/* ---------- the PR that ships it ---------- */
.story__pr {
  position: absolute; left: 7%; top: 74%;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0; padding: 12px 18px;
  box-shadow: none;
  opacity: 0; animation: storyPr 17.5s var(--ease) infinite;
}
.story__pr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--spot); flex: none; }
.story__pr-msg { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.story__pr-meta {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--faint);
}

/* ---------- months later ---------- */
.story__chip {
  position: absolute; right: 4%; top: 11%;
  font-family: var(--font-mono); font-size: 14px; color: var(--faint);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0; padding: 7px 12px;
  box-shadow: none;
  opacity: 0; animation: storyChip 17.5s var(--ease) infinite;
}
.story__chip-c { color: var(--faint); }

/* ---------- so Eklavya asks, at generation time ---------- */
.story__ask {
  position: absolute; right: 1.5%; top: 60%; width: 272px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 0; padding: 16px 18px;
  box-shadow: none;
  opacity: 0; animation: storyAsk 17.5s var(--ease) infinite;
}
.story__ask-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.story__ask-over {
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--spot);
}
.story__pips { display: flex; gap: 5px; }
.story__pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mass); transform: scale(.7);
  animation: storyPip 17.5s var(--ease) infinite;
}
.story__pip:nth-child(2) { animation-delay: .6s; }
.story__pip:nth-child(3) { animation-delay: 1.2s; }
.story__stem {
  margin: 0 0 11px; font-size: 14px; font-weight: 700;
  line-height: 1.35; color: var(--ink);
}
.story__opts { display: flex; flex-direction: column; gap: 7px; }
.story__opt {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 0;
  padding: 6px 10px; font-size: 12.5px; color: var(--faint);
  opacity: 0; animation: storyOpt 17.5s var(--ease) infinite;
}
.story__opt:nth-child(2) { animation-delay: .25s; }
.story__opt:nth-child(3) { animation-delay: .5s; }
.story__radio {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
}
/* the answer locks in green on the Harder beat */
.story__opt--ok { animation: storyOpt 17.5s var(--ease) infinite, storyPick 17.5s var(--ease) infinite; }
.story__opt--ok .story__radio { animation: storyRadio 17.5s var(--ease) infinite; }
.story__opt--ok .story__radio::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--spot); transform: scale(0);
  animation: storyRadioDot 17.5s var(--ease) infinite;
}

/* ---------- the marker sweep over each phrase ---------- */
/* An inline phrase can wrap, and a wrapped span is several boxes: a
   background paints into every fragment (box-decoration-break: clone),
   where one positioned pseudo-element would only cover the bounding box. */
.hl {
  background-image: linear-gradient(var(--spot-soft), var(--spot-soft));
  background-repeat: no-repeat;
  background-size: 0% 78%; background-position: 0 60%;
  border-radius: 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: storySweep 17.5s var(--ease) infinite;
}
.hl--c { background-image: linear-gradient(var(--spot-soft), var(--spot-soft)); }
.hl--a { animation-delay: .9s; }
.hl--b { animation-delay: 3.6s; }
.hl--c { animation-delay: 6.55s; }
.hl--d { animation-delay: 9s; }
.hl--e { animation-delay: 10.5s; }
.hl--f { animation-delay: 12.7s; }
.hl--g { animation-delay: 14s; }

/* ---------- the clock ---------- */
@keyframes storyBg {
  0% { opacity: 0; transform: scale(1.045); }
  3% { opacity: 1; }
  96% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes storyGlow {
  0%    { transform: translate(-30vw, 10px); }
  17.1% { transform: translate(0, 144px); }
  34.3% { transform: translate(24vw, -88px); }
  48.6% { transform: translate(29vw, 10px); }
  77%   { transform: translate(28vw, 27px); }
  100%  { transform: translate(-30vw, 10px); }
}
@keyframes storyType { 0% { width: 0; } 6.9%, 100% { width: var(--w); } }
@keyframes storyCur { 0% { opacity: 1; } 6.9%, 100% { opacity: 0; } }
@keyframes storyCode {
  0%, 18.3% { opacity: .5; transform: translateY(0); }
  27.4% { opacity: .2; transform: translateY(-32px); }
  34.3% { opacity: .2; }
  40%, 100% { opacity: .13; transform: translateY(-32px); }
}
@keyframes storyPr {
  0%, 18% { opacity: 0; transform: translateY(21px); }
  22%, 28% { opacity: 1; transform: translateY(0); }
  32.6%, 100% { opacity: 0; transform: translateY(-72px); }
}
@keyframes storyChip {
  0%, 37.1% { opacity: 0; transform: translateY(21px); }
  41.1%, 50.9% { opacity: 1; transform: translateY(0); }
  53.7%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes storyAsk {
  0%, 51.4% { opacity: 0; transform: translateX(70px) rotate(2deg) scale(.9); }
  54.5% { opacity: 1; }
  56%, 100% { opacity: 1; transform: translateX(0) rotate(2deg) scale(1); }
}
@keyframes storyOpt { 0%, 54.3% { opacity: 0; } 56.6%, 100% { opacity: 1; } }
@keyframes storyPip {
  0%, 73.1% { background: var(--mass); transform: scale(.7); }
  74.6% { background: var(--spot); transform: scale(1.1); }
  75.1%, 100% { background: var(--spot); transform: scale(1); }
}
@keyframes storyPick {
  0%, 82.9% { border-color: var(--line); background: var(--panel); color: var(--faint); }
  86%, 100% { border-color: var(--spot); background: var(--spot-soft); color: var(--spot); }
}
@keyframes storyRadio {
  0%, 82.9% { border-color: var(--line-2); }
  86%, 100% { border-color: var(--spot); }
}
@keyframes storyRadioDot { 0%, 82.9% { transform: scale(0); } 86%, 100% { transform: scale(1); } }
/* on over 1.3s, hold 1.6s, then retract to the right over 0.8s */
@keyframes storySweep {
  0%    { background-size: 0% 78%;   background-position: 0 60%; }
  7.4%  { background-size: 100% 78%; background-position: 0 60%; }
  16.6% { background-size: 100% 78%; background-position: 100% 60%; }
  21.1%, 100% { background-size: 0% 78%; background-position: 100% 60%; }
}

/* ============================================================
   PAGE MOTION — the shuttle.
   A single emerald beam that travels out and back along the
   page's own lines: section seams, the loop's spine, the tier
   bars. Slow, low-contrast, and always the same gesture, so the
   page reads as alive rather than as decorated.
   ============================================================ */
.seam { position: relative; }
.seam::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  --beam: 240px;
  background-image: linear-gradient(90deg, transparent, var(--spot), transparent);
  background-repeat: no-repeat; background-size: var(--beam) 100%;
  background-position: calc(-1 * var(--beam)) 0;
  animation: shuttle 13s var(--ease) infinite;
}
.commands.seam::before { animation-delay: 2.5s; }
.footer.seam::before { animation-delay: 5s; }

.steps__spine { overflow: hidden; }
.steps__spine::after {
  content: ""; position: absolute; left: 0; width: 2px; height: 72px; top: -72px;
  background: linear-gradient(to bottom, transparent, var(--spot), transparent);
  animation: spineShuttle 10s var(--ease) infinite;
}

.ladder__fill { position: relative; overflow: hidden; }
.ladder__fill::after {
  content: ""; position: absolute; inset: 0; --beam: 64px;
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--spot-ink) 55%, transparent), transparent);
  background-repeat: no-repeat; background-size: var(--beam) 100%;
  background-position: calc(-1 * var(--beam)) 0;
  animation: shuttle 8s var(--ease) infinite;
}
.ladder__fill--t2::after { animation-delay: .5s; }
.ladder__fill--t3::after { animation-delay: 1s; }
.ladder__fill--t4::after { animation-delay: 1.5s; }
.ladder__fill--t5::after { animation-delay: 2s; }

/* the dark bands breathe: dot grids drift a tile, glows wander */
.hero__glow { animation: glow 7s ease-in-out infinite, glowDrift 21s ease-in-out infinite; }
.hero__glow--low { animation: glowDrift 26s ease-in-out infinite reverse; }
.legend__glow { animation: glowDrift 24s ease-in-out infinite; }
.cta__glow { animation: glowDrift 23s ease-in-out infinite reverse; }
.badge__dot { animation: pipPulse 3.4s ease-in-out infinite; }

@keyframes shuttle {
  0%, 100% { background-position: calc(-1 * var(--beam)) 0; }
  50% { background-position: calc(100% + var(--beam)) 0; }
}
@keyframes spineShuttle { 0%, 100% { top: -72px; } 50% { top: 100%; } }
@keyframes gridDrift { to { background-position: 34px 34px; } }
@keyframes gridDrift26 { to { background-position: 26px 26px; } }
@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-70px, 46px); }
}
@keyframes pipPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--spot); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* only where the cards fit: below this the section keeps its natural height */
@media (min-width: 1241px) {
  .story { min-height: 576px; display: grid; align-content: center; }
  .story .why__inner { padding: 70px 32px; }
  /* a little narrower than the page default, so the props keep their gutters */
  .story .why__statement { max-width: 780px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 1240px) {
  /* the two opaque cards are the only props that would land on the copy */
  .story__pr, .story__chip, .story__ask { display: none; }
}

@media (max-width: 1180px) {
  .dials { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1040px) {
  .legend__cols { gap: 32px; }
  .how__grid { gap: 48px; }
  .commands__grid { gap: 48px; }
}

@media (max-width: 1000px) {
  .story__bg { display: none; }
}

@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .nav__links { gap: 14px; }
  .nav__link { display: none; }

  .hero__grid { grid-template-columns: 1fr; gap: 48px; padding: 64px 32px 80px; }
  .hero__arrows { display: none; }
  .hero__lede { font-size: 17px; }

  .why__inner { padding: 72px 32px; }
  .why__body { font-size: 16px; }

  .legend__inner { padding: 72px 32px 64px; }
  .legend__cols { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }

  .how__grid { grid-template-columns: 1fr; padding: 72px 32px; }

  .cards { grid-template-columns: 1fr; margin-top: 40px; }
  .dials { grid-template-columns: 1fr; }
  .ladder__row { grid-template-columns: 44px 110px 1fr 58px; }

  .commands__grid { grid-template-columns: 1fr; padding: 72px 32px; }
  .data-card { position: static; }

  .docs__grid { grid-template-columns: 1fr; gap: 40px; }

  .cta__inner { padding: 80px 32px; }

  .footer__inner { flex-direction: column; gap: 28px; }
  .footer__right { align-items: flex-start; text-align: left; }
}

@media (max-width: 560px) {
  .wrap, .hero__grid, .why__inner, .legend__inner, .how__grid,
  .commands__grid, .cta__inner, .footer__inner { padding-left: 20px; padding-right: 20px; }
  .term__screen { font-size: 12px; padding: 14px 14px 12px; height: 470px; }
  .term__status .dim { display: none; }
  .box { padding: 7px 9px; }
  .ask__opt { padding-left: 0; gap: .5ch; }
  .cmd-row { grid-template-columns: 1fr; gap: 6px; }
  .docs__cards { grid-template-columns: 1fr; }
  .ladder__row { grid-template-columns: 32px 88px 1fr 46px; gap: 8px; }
  .ladder__band { font-size: 9.5px; }
  .ladder__ends { padding-left: 136px; padding-right: 54px; font-size: 10px; }
  .hero__actions, .cta__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .cta__actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  /* Several loops end their cycle at opacity 0. Killing the animation would
     leave that content invisible, so land every animated element in the state
     a reader should see. */
  .ln.is-on,
  .cur,
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .fade-up { opacity: 1; }
  /* the story is pure background: with no clock to run it, it does not play,
     and the copy it was illustrating is left to speak for itself. */
  .story__bg { display: none; }
  .hl { background-image: none; }
}

.footer__name { font-weight: 800; font-size: 16px; }
.footer__link { font-weight: 600; }

@media (max-width: 640px) {
  .star__label { display: none; }
  .star__n { padding-left: 0; margin-left: 0; border-left: 0; }
}

/* ---------- nav crowding ----------
   The bar now carries six links, the ground toggle, a star count and a byline.
   Things leave in order of how much they earn their place: the tagline first
   (the byline says who made it better), then the section links, then the
   byline's words, then the byline. The star count never leaves. */
@media (max-width: 1120px) {
  .nav__link { display: none; }
  .nav__links { gap: 14px; }
}

@media (max-width: 720px) {
  .term__by span { display: none; }
}