/*
 * Kadam — teaser landing page.
 *
 * Light-only, and dual-tone by design: the whole site is organised around one
 * seam that splits Kadam's two temperatures. Male reads in the Ivory palette
 * (indigo ink, brass accent); female in the Dawn palette (plum ink, terracotta
 * accent). Both come straight from tokens.css via `data-pal`, so every colour
 * on the page is one the app already owns.
 *
 * No framework, no motion library. Everything is transform, opacity, clip-path
 * or stroke-dashoffset, and every loop honours the --loop token so the footer's
 * reduce-motion control can stop it.
 */

/* ---------------------------------------------------------------- *
 * Reset + base
 * ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
select, input { font: inherit; }
::selection { background: var(--pulse-soft); }

.wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }

.sr-only, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto; z-index: 100;
  padding: 10px 16px; clip: auto; background: var(--text); color: var(--ink);
  border-radius: var(--r-control);
}

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

.kicker {
  font-family: var(--font-mono);
  font-weight: var(--fw-kicker);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--text-dim);
}
.kicker--accent { color: var(--pulse-text); }

h1, h2, h3 { font-weight: 680; line-height: 1.04; letter-spacing: -0.022em; }
.lead { font-size: var(--fs-lead); color: var(--text-dim); max-width: var(--measure); line-height: 1.45; }

/* The two tints — the entire dual-tone idea, reusable inline. They read against
   whatever palette their section carries, so a female word inside a male
   section still lands terracotta. */
.tint-m { color: #8a5a0e; font-style: normal; }   /* brass, ivory pulseText */
.tint-f { color: #a6432a; font-style: normal; }   /* terracotta, dawn pulseText */
em.tint-m, em.tint-f { font-style: normal; }

.dim { color: var(--text-dim); }

/* ---------------------------------------------------------------- *
 * Buttons
 * ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; border-radius: var(--r-pill);
  background: var(--pulse); color: var(--on-accent);
  font-weight: 640; font-size: var(--fs-small); letter-spacing: 0.01em;
  transition: transform var(--dur-control) var(--ease-press),
              box-shadow var(--dur-control) var(--ease-out),
              filter var(--dur-micro) var(--ease-out);
  will-change: transform;
}
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn:active { transform: scale(var(--press-scale)); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.btn--sm { padding: 10px 18px; }
.btn--glow { box-shadow: 0 10px 30px -8px var(--pulse-soft-border), 0 2px 8px rgba(0,0,0,0.06); }
.btn--glow:hover { box-shadow: 0 16px 40px -10px var(--pulse-soft-border), 0 3px 10px rgba(0,0,0,0.08); }

/* ---------------------------------------------------------------- *
 * The seam — a fixed vertical line the page is built around
 * ---------------------------------------------------------------- */

.seam {
  position: fixed; inset: 0; left: 50%; width: 0; z-index: 1;
  pointer-events: none;
}
.seam__line {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(to bottom,
    transparent, rgba(26,22,64,0.10) 12%, rgba(166,67,42,0.14) 50%, rgba(26,22,64,0.10) 88%, transparent);
}
.seam__spark {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px;
  transform: translate(-3.5px, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--pulse) 0%, rgba(224,166,60,0) 70%);
  filter: blur(0.3px);
  /* Driven by scroll progress in JS via --seam (0..1). */
  top: calc(var(--seam, 0) * 100%);
  opacity: 0.85;
}
@media (max-width: 860px) { .seam { display: none; } }

/* ---------------------------------------------------------------- *
 * Reveal system
 * ---------------------------------------------------------------- */

.js .r { opacity: 0; transform: translateY(var(--travel-block, 16px)); }
.js .r.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger, 60ms));
}

/* Headline lines rise out of a clip — the one bespoke entrance on the page. */
.hero__h .line { display: block; overflow: hidden; padding-block: 0.02em; }
.hero__h .line__in { display: block; }
.js .hero__h .line__in { transform: translateY(115%); }
.js .hero__h.in .line__in {
  transform: none;
  transition: transform 0.72s var(--ease-out);
}
.js .hero__h.in .line:nth-child(1) .line__in { transition-delay: 0.05s; }
.js .hero__h.in .line:nth-child(2) .line__in { transition-delay: 0.14s; }
.js .hero__h.in .line:nth-child(3) .line__in { transition-delay: 0.23s; }
.js .hero__h.in .line:nth-child(4) .line__in { transition-delay: 0.32s; }

/* ---------------------------------------------------------------- *
 * Header
 * ---------------------------------------------------------------- */

.hd {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: var(--hair) solid var(--hairline);
}
.hd__bar { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 680; letter-spacing: -0.02em; }
.brand__mark { width: 24px; height: 24px; color: var(--pulse-line); }
.brand__word { font-size: 1.14rem; }
.hd__nav { display: flex; gap: 26px; margin-left: auto; }
.hd__nav a {
  font-size: var(--fs-small); color: var(--text-dim);
  position: relative; padding-block: 4px;
  transition: color var(--dur-micro) var(--ease-out);
}
.hd__nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--pulse-line); transition: width var(--dur-control) var(--ease-out);
}
.hd__nav a:hover { color: var(--text); }
.hd__nav a:hover::after { width: 100%; }
.hd__ai { color: var(--pulse-text); font-weight: 600; padding-left: 14px; }
.hd__ai::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--pulse); box-shadow: 0 0 0 0 var(--pulse-soft-border);
  animation: aidot 2.4s var(--ease-inout) infinite; animation-play-state: var(--loop);
}
@keyframes aidot { 0%,100% { box-shadow: 0 0 0 0 var(--pulse-soft-border); } 50% { box-shadow: 0 0 0 5px transparent; } }
.hd .btn--sm { margin-left: 8px; }
@media (max-width: 860px) { .hd__nav { display: none; } .hd .btn--sm { margin-left: auto; } }

/* ---------------------------------------------------------------- *
 * HERO
 * ---------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  min-height: min(94vh, 900px);
  display: flex; align-items: center;
  padding-block: clamp(48px, 9vh, 120px);
}
/* The split backdrop: two temperatures meeting at the centre. Each half carries
   a wash of its own accent — brass on the male side, apricot on the female —
   so the dual tone reads at a glance rather than hiding in two near-identical
   creams. */
.hero__half { position: absolute; inset: 0; z-index: 0; }
.hero__half--m { right: 50%;
  background: radial-gradient(135% 120% at 12% 22%, var(--pulse-soft), transparent 58%), var(--ink);
  border-right: var(--hair) solid var(--hairline); }
.hero__half--f { left: 50%;
  background: radial-gradient(135% 120% at 88% 22%, var(--pulse-soft), transparent 58%), var(--ink); }
@media (max-width: 860px) {
  .hero__half--m { right: 0; bottom: 50%; border-right: 0; border-bottom: var(--hair) solid var(--hairline); }
  .hero__half--f { left: 0; top: 50%; }
}

.hero__inner { position: relative; z-index: 2; text-align: center; }
.kicker--accent { display: inline-block; margin-bottom: 20px; }
.hero__h {
  font-size: var(--fs-display);
  letter-spacing: -0.03em; line-height: 1.02;
  max-width: 15ch; margin-inline: auto;
}
.hero__sub {
  margin: 26px auto 0; max-width: 46ch;
  font-size: var(--fs-lead); color: var(--text-dim);
}
.hero__cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero__reassure { font-family: var(--font-mono); font-size: var(--fs-fine); color: var(--text-dim); letter-spacing: 0.02em; }

.hero__phones {
  margin-top: clamp(28px, 5vh, 56px);
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(12px, 3vw, 40px);
  perspective: 1400px;
}
.phone {
  position: relative; width: clamp(146px, 18vw, 218px);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out);
}
.phone--m { transform: rotate(-3deg) translateY(6px); z-index: 2; }
.phone--f { transform: rotate(3deg); }
.phone figcaption {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 24px 10px 12px; border-radius: 0 0 30px 30px;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.58), transparent);
}
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot--m { background: #e0a63c; }
.dot--f { background: #ffb59b; }
.phone .mock { animation: float 7s var(--ease-inout) infinite; animation-play-state: var(--loop); }
.phone--f .mock { animation-delay: -3.5s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------------------------------------------------------------- *
 * Device frame — one reusable phone mock. A deep-indigo bezel (the brand's
 * own dark palette) around the real capture, so a screenshot reads as a phone
 * rather than a loose image. The captures already carry their status bar and
 * island, so the frame adds only the body.
 * ---------------------------------------------------------------- */

.mock {
  position: relative; display: block; border-radius: 40px; padding: 8px;
  background: linear-gradient(158deg, #2c2656 0%, #141133 72%);
  box-shadow: 0 34px 80px -34px rgba(11,20,64,0.5), 0 8px 22px rgba(11,20,64,0.14),
              inset 0 0 0 1px rgba(255,255,255,0.05);
}
.mock__screen {
  position: relative; display: block; border-radius: 32px; overflow: hidden;
  aspect-ratio: 1206 / 2622; background: #000;
}
.mock__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* A slow light-sweep across the glass, so a static capture reads as a live
   screen. Subtle on purpose, and it stops with the motion control. */
.mock__screen::after, .scene__screen::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(114deg, transparent 34%, rgba(255,255,255,0.16) 46%, rgba(255,255,255,0.04) 54%, transparent 66%);
  transform: translateX(-130%);
  animation: glare 7s var(--ease-inout) infinite; animation-play-state: var(--loop);
}
.phone--f .mock__screen::after { animation-delay: -3.2s; }
.scene__screen::after { animation-duration: 8s; }
@keyframes glare { 0%, 68% { transform: translateX(-130%); } 84%, 100% { transform: translateX(130%); } }

.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 26px; height: 42px; border-radius: 16px;
  border: var(--hair) solid var(--control-border);
}
.hero__scroll span {
  position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; border-radius: 3px;
  background: var(--pulse-line); transform: translateX(-50%);
  animation: scrolldot 1.8s var(--ease-inout) infinite; animation-play-state: var(--loop);
}
@keyframes scrolldot { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80%,100% { opacity: 0; transform: translate(-50%, 14px); } }
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* ---------------------------------------------------------------- *
 * Section shells
 * ---------------------------------------------------------------- */

.section { position: relative; padding-block: clamp(72px, 12vh, 160px); background: var(--ink); z-index: 2; }
/* Whole-site dual tone: a wash keyed to each section's temperature, thrown from
   the left on the male palette and from the right on the female one, so scrolling
   the page alternates gold and blush rather than staying one flat cream. */
.section[data-pal="ivory"] { background: radial-gradient(72% 58% at -2% 4%, var(--pulse-soft), transparent 46%), var(--ink); }
.section[data-pal="dawn"]  { background: radial-gradient(72% 58% at 102% 4%, var(--pulse-soft), transparent 46%), var(--ink); }
.section::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--hair);
  background: var(--hairline);
}

.head { max-width: var(--page-narrow); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lead { margin-inline: auto; }
.head__h { font-size: var(--fs-h2); margin-block: 14px; }
.head .kicker, .head--center .kicker { display: inline-block; }

/* ---------------------------------------------------------------- *
 * PROBLEM + ticker
 * ---------------------------------------------------------------- */

/* The severed network. Five tools sit on an even pentagon around an empty core.
   Each is wired inward, and every wire stops short — a pulse of "data" runs
   along it and dies before it reaches the middle. One square coordinate space
   is shared by the SVG wires and the absolutely-placed nodes; below 1080px it
   reflows to a stacked list that says the same thing without the geometry. */
.net {
  position: relative; margin: clamp(40px, 7vh, 84px) auto 0;
  width: min(100%, 740px); aspect-ratio: 1 / 1;
}
.net__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net__wire { stroke: var(--pulse-line); stroke-width: 0.5; stroke-linecap: round; opacity: 0; stroke-dasharray: 2.2 3.6; }
.net.in .net__wire {
  opacity: 0.5;
  transition: opacity 0.6s var(--ease-out); transition-delay: calc(0.2s + var(--i) * 0.08s);
  animation: netflow 1.5s linear infinite; animation-play-state: var(--loop);
  animation-delay: calc(0.7s + var(--i) * 0.16s);
}
@keyframes netflow { to { stroke-dashoffset: -5.8; } }

/* The empty core — dashed, slowly turning, asking for a middle nothing supplies. */
.net__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: clamp(128px, 17vw, 176px); aspect-ratio: 1;
}
.net__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px dashed var(--control-border);
  animation: hubspin 30s linear infinite; animation-play-state: var(--loop);
}
.net__ring--2 { inset: 15%; border-color: var(--pulse-soft-border); animation-duration: 20s; animation-direction: reverse; }
.net.in .net__ring { box-shadow: 0 0 0 0 var(--pulse-soft); animation: hubspin 30s linear infinite, hubpulse 3.4s var(--ease-inout) infinite; animation-play-state: var(--loop); }
@keyframes hubspin { to { transform: rotate(360deg); } }
@keyframes hubpulse { 0%,100% { box-shadow: 0 0 0 0 var(--pulse-soft); } 50% { box-shadow: 0 0 0 10px transparent; } }
.net__core {
  position: relative; z-index: 1; text-align: center;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); line-height: 1.5;
}

.net__node {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(168px, 17vw, 196px); padding: 13px 15px;
  background: var(--card); border: var(--hair) solid var(--hairline);
  border-radius: var(--r-card-sm); box-shadow: var(--shadow-card);
  display: flex; align-items: flex-start; gap: 11px;
  /* Opacity-only reveal: a transform here would fight the centering translate
     above (that was the bug where cards drifted off their wire endpoints). */
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.net.in .net__node { opacity: 1; transition-delay: calc(0.15s + var(--i) * 0.08s); }
html:not(.js) .net__node { opacity: 1; }
.net__ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--pulse-soft); color: var(--pulse-line);
}
.net__ic svg { width: 18px; height: 18px; }
.net__meta { display: grid; gap: 2px; min-width: 0; }
.net__meta b { font-size: var(--fs-small); font-weight: 660; letter-spacing: -0.01em; }
.net__meta span { font-size: var(--fs-fine); color: var(--text-dim); }
.net__meta s {
  font-size: var(--fs-fine); color: var(--pulse-text); text-decoration: none; position: relative; width: max-content; max-width: 100%;
}
.net__meta s::before {
  content: ''; position: absolute; left: -2px; top: 50%; height: 1.5px; width: 0;
  background: var(--pulse-line); border-radius: 2px;
}
.net.in .net__meta s::before {
  width: calc(100% + 4px);
  transition: width 0.5s var(--ease-out); transition-delay: calc(0.6s + var(--i) * 0.09s);
}
/* Even pentagon: top, then clockwise every 72°. */
.net__node--a { left: 50%;   top: 11%; }
.net__node--b { left: 86.1%; top: 38.3%; }
.net__node--c { left: 72.3%; top: 80.7%; }
.net__node--d { left: 27.7%; top: 80.7%; }
.net__node--e { left: 13.9%; top: 38.3%; }

@media (max-width: 1079px) {
  .net { aspect-ratio: auto; display: grid; gap: 10px; width: 100%; max-width: 640px; margin-top: clamp(30px, 5vh, 52px); }
  .net__wires, .net__hub { display: none; }
  .net__node { position: static; transform: none; width: 100%; align-items: center; }
}

.close {
  max-width: 28ch; margin: clamp(28px, 5vh, 48px) auto 0; text-align: center;
  font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- *
 * THE SPLIT — the scroll-scrubbed pinned scene
 *
 * A tall track (.scene__track) scrolls past a pinned stage (.scene__stick).
 * JavaScript reads the track's progress and drives everything below by writing
 * opacities and a --p variable; there are no CSS transitions on the scrubbed
 * properties, so the scene follows the scrollbar exactly. Clicks get a short
 * .scene--anim window that turns transitions back on so a tap animates.
 * ---------------------------------------------------------------- */

.scene { position: relative; z-index: 2; }
.scene::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--hair);
  background: var(--hairline); z-index: 3;
}
.scene__track { height: 340vh; }
.scene__stick {
  position: sticky; top: 0; height: 100vh; min-height: 620px;
  overflow: hidden; display: flex; align-items: center;
  background: var(--ink);
}

.scene__bg { position: absolute; inset: 0; z-index: 0; }
.scene__wash { position: absolute; inset: 0; }
.scene__wash--m { background: radial-gradient(90% 95% at 22% 40%, var(--pulse-soft), transparent 62%), var(--ink); opacity: 1; }
.scene__wash--f { background: radial-gradient(90% 95% at 78% 40%, var(--pulse-soft), transparent 62%), var(--ink); opacity: 0; }

.scene__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 84px); align-items: center;
}
.scene__copy { max-width: 34ch; }
.scene__copy .kicker { display: inline-block; margin-bottom: 12px; }
.scene__h { font-size: clamp(2.6rem, 1.6rem + 5vw, 5.4rem); line-height: 0.98; letter-spacing: -0.04em; }
/* Grid-stack the steps so the box grows to the tallest line — no fixed height
   to overflow into the control below it. */
.scene__steps { display: grid; margin: 22px 0 24px; }
.scene__step {
  grid-area: 1 / 1; margin: 0;
  font-size: var(--fs-lead); color: var(--text-dim);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.scene__step.is-on { opacity: 1; transform: none; }
.scene__hint {
  margin-top: 8px; font-family: var(--font-mono); font-size: var(--fs-fine);
  letter-spacing: 0.06em; color: var(--pulse-text);
}

.scene__phone { position: relative; justify-self: center; width: clamp(228px, 29vw, 330px); }
.scene__frame {
  position: relative; border-radius: 42px; padding: 9px;
  background: linear-gradient(158deg, #2c2656 0%, #141133 72%);
  box-shadow: 0 46px 100px -38px rgba(11,20,64,0.5), 0 10px 26px rgba(11,20,64,0.16),
              inset 0 0 0 1px rgba(255,255,255,0.05);
}
.scene__screen {
  position: relative; border-radius: 33px; overflow: hidden;
  aspect-ratio: 1206 / 2622; background: #000;
}
.scene__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Persona badge — a chip on the phone that flips its mark when the scene turns
   from strength to cycle, so the switch is signposted, not just tinted. */
.scene__badge {
  position: absolute; z-index: 5; top: -16px; left: -16px;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: var(--hair) solid var(--hairline);
  box-shadow: 0 10px 24px -8px rgba(11,20,64,0.35);
}
.scene__badge-ic {
  grid-area: 1 / 1; display: grid; place-items: center; width: 24px; height: 24px;
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-press);
}
.scene__badge-ic svg { width: 24px; height: 24px; }
.scene__badge-ic--m { color: #8a5a0e; opacity: 1; }
.scene__badge-ic--f { color: #a6432a; opacity: 0; transform: scale(0.4) rotate(-40deg); }
.scene[data-persona="cycle"] .scene__badge-ic--m { opacity: 0; transform: scale(0.4) rotate(40deg); }
.scene[data-persona="cycle"] .scene__badge-ic--f { opacity: 1; transform: none; }
.scene__shot[data-shot="strength"] { opacity: 1; }
.scene__shot[data-shot="cycle"] { opacity: 0; }
.scene--anim .scene__shot,
.scene--anim .scene__wash { transition: opacity var(--dur-morph) var(--ease-inout); }

.scene__tabs {
  display: flex; justify-content: space-between; gap: 4px;
  margin-top: 16px; padding: 10px 12px; border-radius: var(--r-control-16);
  background: var(--raised);
}
.scene__tabs .tab {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.05em;
  color: var(--text-dim); transition: color var(--dur-colour), opacity var(--dur-control);
}
.scene__tabs .tab[data-active] { color: var(--pulse-text); }
.scene__tabs.swapping .tab { opacity: 0; }

.scene__rail {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 28px;
  height: 3px; border-radius: 3px; background: var(--track);
}
.scene__rail-fill {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #8a5a0e, #a6432a);
}

/* Segmented control (shared by the scene). */
.seg {
  position: relative; display: inline-flex; padding: 4px; gap: 2px;
  border-radius: var(--r-pill); background: var(--raised); border: var(--hair) solid var(--chip-border);
}
.seg__glow {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: var(--r-pill); background: var(--seg-on);
  transition: transform var(--dur-control) var(--ease-press);
}
.scene[data-persona="cycle"] .seg__glow { transform: translateX(100%); }
.seg__btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; color: var(--text-dim);
  transition: color var(--dur-control) var(--ease-out);
}
.seg__ic { width: 15px; height: 15px; }
.seg__btn[aria-checked="true"] { color: var(--seg-on-text); }
.seg__btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Static fallback: no JS, reduced motion, or narrow viewport. The pin is
   dropped and the scene becomes an ordinary two-up block. */
html:not(.js) .scene__track,
.scene.is-static .scene__track { height: auto; }
html:not(.js) .scene__stick,
.scene.is-static .scene__stick {
  position: static; height: auto; min-height: 0;
  padding-block: clamp(72px, 12vh, 150px);
}
html:not(.js) .scene__step:not([data-step="0"]) { display: none; }
html:not(.js) .scene__hint,
.scene.is-static .scene__hint,
.scene.is-static .scene__rail { display: none; }
@media (max-width: 820px) {
  .scene__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .scene__copy { max-width: 44ch; }
  .seg { justify-self: center; }
}

/* ---------------------------------------------------------------- *
 * KADAM AI — the brain. Three agents wire into a glowing calibrate engine
 * that emits the daily brief. A live SVG loop (SMIL pulses) runs the pipeline;
 * hovering an agent lights its path. The core answers the empty "no shared
 * context" core in the problem section — full, dual-toned, alive.
 * ---------------------------------------------------------------- */

.ai { overflow: hidden; }
.ai__stage {
  position: relative; margin: clamp(40px, 7vh, 84px) auto 0;
  width: min(100%, 1060px); aspect-ratio: 15 / 10;
}
.ai__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ai__wire { stroke: var(--pulse-line); stroke-width: 0.5; stroke-linecap: round; opacity: 0.4; stroke-dasharray: 2 3.2; }
.ai.in .ai__wire { animation: netflow 1.6s linear infinite; animation-play-state: var(--loop); }
.ai__wire--out { stroke: #c25e3e; opacity: 0.55; }
.ai__wire-g.is-hot .ai__wire { opacity: 0.95; stroke-width: 0.85; }
.ai__pulse { fill: #e0a63c; }
.ai__pulse--out { fill: #c25e3e; }

.ai__agent {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  width: clamp(156px, 17vw, 202px);
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; background: var(--card);
  border: var(--hair) solid var(--hairline); border-radius: var(--r-card-sm);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
}
.ai__agent.is-hot { box-shadow: 0 18px 40px -18px var(--pulse-soft-border); border-color: var(--pulse-soft-border); }
.ai__agent--a { left: 16%; top: 18%; }
.ai__agent--b { left: 13%; top: 50%; }
.ai__agent--c { left: 16%; top: 82%; }
.ai__ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--pulse-soft); color: var(--pulse-line); }
.ai__ic svg { width: 17px; height: 17px; }
.ai__meta { display: grid; gap: 2px; min-width: 0; }
.ai__meta b { font-size: var(--fs-small); font-weight: 660; letter-spacing: -0.01em; }
.ai__meta span { font-size: var(--fs-fine); color: var(--text-dim); line-height: 1.35; }

/* The calibrate engine — a full, glowing core. */
.ai__core {
  position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: clamp(124px, 15vw, 170px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, #ffffff, var(--card) 72%);
  border: var(--hair) solid var(--pulse-soft-border);
}
.ai.in .ai__core { animation: aicore 3.2s var(--ease-inout) infinite; animation-play-state: var(--loop); }
@keyframes aicore {
  0%,100% { box-shadow: 0 0 0 5px var(--pulse-soft), 0 24px 60px -22px rgba(224,166,60,0.45); }
  50%     { box-shadow: 0 0 0 15px transparent, 0 26px 72px -18px rgba(194,94,62,0.5); }
}
.ai__core-ring { position: absolute; inset: -4%; border-radius: 50%; border: 1.5px solid var(--pulse-soft-border); }
.ai__core-ring--2 { inset: 9%; border-style: dashed; border-color: rgba(194,94,62,0.32); }
.ai.in .ai__core-ring { animation: hubspin 17s linear infinite; animation-play-state: var(--loop); }
.ai.in .ai__core-ring--2 { animation: hubspin 11s linear infinite reverse; animation-play-state: var(--loop); }
.ai__core-orbit { position: absolute; inset: -3%; border-radius: 50%; }
.ai.in .ai__core-orbit { animation: hubspin 6s linear infinite; animation-play-state: var(--loop); }
.ai__core-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px rgba(224,166,60,0.7); }
.ai__core-orbit i:nth-child(1) { top: -4px; left: calc(50% - 4.5px); background: linear-gradient(#e0a63c, #c25e3e); }
.ai__core-orbit i:nth-child(2) { bottom: -4px; left: calc(50% - 4.5px); background: linear-gradient(#c25e3e, #a6432a); }
.ai__core-orbit i:nth-child(3) { display: none; }
.ai__core-label { position: relative; z-index: 1; text-align: center; display: grid; gap: 3px; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.16rem); }
.ai__core-label em { font-family: var(--font-mono); font-style: normal; font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pulse-text); }

/* The output — a mini brief. */
.ai__out {
  position: absolute; left: 85%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: clamp(184px, 20vw, 234px); padding: 16px 18px;
  background: var(--card); border: var(--hair) solid var(--hairline);
  border-radius: var(--r-card); box-shadow: 0 24px 54px -24px rgba(194,94,62,0.4), var(--shadow-card);
}
.ai__out .kicker { display: block; color: var(--pulse-text); margin-bottom: 8px; }
.ai__out-head { font-size: var(--fs-h3); font-weight: 660; letter-spacing: -0.02em; margin-bottom: 8px; }
.ai__out-line { font-size: var(--fs-fine); color: var(--text-dim); line-height: 1.5; }
.ai__out-tag { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pulse-text); }

.ai__notes { margin-top: clamp(40px, 7vh, 76px); display: grid; gap: var(--card-gap); grid-template-columns: repeat(3, 1fr); }
.ai__note { position: relative; padding: clamp(22px, 2.5vw, 30px); background: var(--card); border: var(--hair) solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.ai__note-n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--pulse-text); }
.ai__note h3 { font-size: var(--fs-h3); margin: 8px 0 8px; }
.ai__note p { font-size: var(--fs-small); color: var(--text-dim); }
.ai__note em { font-style: italic; color: var(--text); }
.ai__honest { margin: clamp(28px, 4vh, 42px) auto 0; max-width: 62ch; text-align: center; font-size: var(--fs-small); color: var(--text-dim); }
.ai__honest strong { color: var(--pulse-text); font-weight: 640; }

@media (max-width: 900px) {
  .ai__stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 400px; }
  .ai__wires { display: none; }
  .ai__agent, .ai__core, .ai__out { position: static; transform: none; width: 100%; }
  .ai__core { width: 138px; height: 138px; margin: 4px 0; flex: 0 0 auto; }
  .ai__core, .ai__out { --arrow: 1; }
  .ai__core::before, .ai__out::before {
    content: '↓'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    color: var(--pulse-line); font-size: 1rem;
  }
  .ai__core, .ai__out { position: relative; }
  .ai__notes { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- *
 * INSIDE — bento
 * ---------------------------------------------------------------- */

.bento {
  margin-top: clamp(36px, 6vh, 64px);
  display: grid; gap: var(--card-gap);
  grid-template-columns: repeat(6, 1fr);
}
.cell {
  border-radius: var(--r-card); overflow: hidden;
  background: var(--card); border: var(--hair) solid var(--hairline);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-control) var(--ease-out), box-shadow var(--dur-control) var(--ease-out);
  grid-column: span 2;
}
.cell:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(11,20,64,0.28); }
.cell--rings { grid-column: span 3; }
.cell--fuel { grid-column: span 3; }
.cell__body { padding: clamp(22px, 3vw, 34px); }
.cell h3 { font-size: var(--fs-h3); margin: 8px 0 14px; }
.cell p { font-size: var(--fs-small); color: var(--text-dim); }
.cell .kicker { color: var(--pulse-text); }

.cell--shot { display: flex; flex-direction: column; }
.cell__phone { padding: 30px 26px 0; display: flex; justify-content: center; overflow: hidden; }
/* Same indigo bezel as the big mock, drawn as a thick top border so the little
   bento captures read as phones emerging from the card, not cropped images. */
.cell__phone img {
  width: 194px; border-radius: 30px 30px 0 0;
  border: 8px solid #16132f; border-bottom: 0;
  box-shadow: 0 -4px 30px rgba(11,20,64,0.12);
  transition: transform var(--dur-reveal) var(--ease-out);
}
.cell--shot:hover .cell__phone img { transform: translateY(-7px); }
.cell__cap { padding: 20px clamp(22px, 3vw, 30px) 28px; }

/* Rings */
.rings { display: flex; gap: 20px; margin: 4px 0 18px; }
.ring { display: grid; justify-items: center; gap: 8px; position: relative; }
.ring svg { display: block; }
.ring__v {
  position: absolute; top: 31px; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; font-weight: 660; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.ring__l { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.ring-arc {
  stroke-dasharray: var(--circ, 163); stroke-dashoffset: var(--circ, 163);
}
.rings.in .ring-arc {
  stroke-dashoffset: var(--offset, 0);
  transition: stroke-dashoffset var(--dur-draw) var(--ease-draw);
  transition-delay: calc(var(--n, 0) * 120ms);
}
.said { font-size: var(--fs-small); line-height: 1.55; color: var(--text); }
.said b { color: var(--pulse-text); font-weight: 640; }

/* Fuel stat */
.stat { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; flex-wrap: wrap; }
.stat__n { font-size: clamp(2.6rem, 1.6rem + 3.5vw, 4.4rem); font-weight: 700; letter-spacing: -0.04em; color: var(--pulse-line); font-variant-numeric: tabular-nums; line-height: 1; }
.stat__u { font-family: var(--font-mono); font-size: var(--fs-fine); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }

@media (max-width: 820px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell, .cell--rings, .cell--fuel { grid-column: span 2; }
}

/* ---------------------------------------------------------------- *
 * THE INDIA LAYER — an interactive bento. The food card recomputes live as
 * chips toggle; the rest is a cycle-intelligence card and a wearables strip.
 * ---------------------------------------------------------------- */

.india__grid {
  margin-top: clamp(36px, 6vh, 64px);
  display: grid; gap: var(--card-gap);
  grid-template-columns: 1.55fr 1fr;
}
@media (max-width: 900px) { .india__grid { grid-template-columns: 1fr; } }

.food, .cyc {
  padding: clamp(28px, 3.2vw, 44px); border-radius: var(--r-card);
  background: var(--card); border: var(--hair) solid var(--hairline); box-shadow: var(--shadow-card);
}
.food__top .kicker { color: var(--pulse-text); }
.food__top h3 { font-size: var(--fs-h3); margin: 8px 0 18px; }

.food__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(24px, 2.6vw, 32px); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--raised); border: var(--hair) solid var(--chip-border);
  font-size: var(--fs-small); color: var(--text-dim);
  transition: background var(--dur-control) var(--ease-out), color var(--dur-control) var(--ease-out),
              border-color var(--dur-control) var(--ease-out), transform var(--dur-control) var(--ease-press);
}
.chip b { font-weight: 640; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--pulse-soft-border); color: var(--text); }
.chip:active { transform: scale(0.95); }
.chip.is-on {
  background: var(--pulse); color: var(--on-accent); border-color: transparent;
  box-shadow: 0 6px 16px -8px var(--pulse-soft-border);
}
.chip.is-on b { color: var(--on-accent); }
.chip:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.food__math { display: flex; align-items: center; gap: clamp(24px, 3.5vw, 46px); padding-top: clamp(22px, 2.4vw, 30px); margin-top: 4px; border-top: var(--hair) solid var(--hairline); }
.food__ring { position: relative; flex: 0 0 auto; display: grid; place-items: center; padding: 4px 6px; }
.food__arc {
  stroke-dasharray: 251.3; stroke-dashoffset: 251.3;
  transition: stroke-dashoffset 0.6s var(--ease-out);
}
.food__kcal { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.food__kcal b { font-size: 1.38rem; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.food__kcal { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.food__bars { flex: 1; min-width: 0; display: grid; gap: 11px; }
.food__bar { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: baseline; }
.food__bl { font-size: var(--fs-small); font-weight: 560; }
.food__bv { font-size: var(--fs-fine); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.food__track { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--bar-track); overflow: hidden; }
.food__track i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--pulse-line); transition: width 0.6s var(--ease-out); }
.food__bar:nth-child(2) .food__track i { background: var(--text); }
.food__bar:nth-child(3) .food__track i { background: #c25e3e; }
.food__left { grid-column: 1 / -1; margin-top: 4px; font-size: var(--fs-fine); color: var(--text-dim); }
.food__left b { color: var(--pulse-text); font-weight: 660; font-variant-numeric: tabular-nums; }
.food__left.is-over b, .food__left.is-over [data-food-leftword] { color: #c25e3e; }
/* A macro past its target turns terracotta, whichever bar it is. */
.food__track i.over { background: #c25e3e; }
.food__note { margin-top: 20px; font-size: var(--fs-fine); color: var(--text-dim); line-height: 1.5; }
.food__note b { color: var(--pulse-text); font-weight: 660; }

.cyc { display: flex; flex-direction: column; }
.cyc .kicker { color: var(--pulse-text); }
.cyc h3 { font-size: var(--fs-h3); margin: 8px 0 10px; }
.cyc p { font-size: var(--fs-small); color: var(--text-dim); }
.cyc__phases { margin-top: auto; padding-top: 22px; display: grid; gap: 8px; }
.cyc__ph {
  position: relative; padding: 10px 14px 10px 30px; border-radius: var(--r-control);
  background: var(--raised); font-size: var(--fs-small); color: var(--text-dim);
}
.cyc__ph::before { content: ''; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--pc); }
.cyc__ph.is-now { color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--pulse-soft-border); }
.cyc__ph.is-now::after { content: ''; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%; box-shadow: 0 0 0 2px var(--pc); opacity: 0.35; animation: cycpulse 2.6s var(--ease-inout) infinite; animation-play-state: var(--loop); }
@keyframes cycpulse { 0%,100% { opacity: 0.35; transform: translateY(-50%) scale(1); } 50% { opacity: 0; transform: translateY(-50%) scale(1.5); } }

/* Wearables strip */
.wear { margin-top: var(--card-gap); padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-card); background: var(--card); border: var(--hair) solid var(--hairline); box-shadow: var(--shadow-card); overflow: hidden; }
.wear__lead { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.wear__lead .kicker { color: var(--pulse-text); }
.wear__lead p { font-size: var(--fs-small); color: var(--text-dim); }
.wear__marquee {
  display: flex; width: max-content;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wear__row { display: flex; flex-shrink: 0; animation: marquee 34s linear infinite; animation-play-state: var(--loop); }
.wear:hover .wear__row { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.wear__row span {
  flex-shrink: 0; margin-right: 12px; padding: 10px 20px; border-radius: var(--r-pill);
  border: var(--hair) solid var(--chip-border); background: var(--raised);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap;
}

/* ---------------------------------------------------------------- *
 * BRIEF — a statement, deliberately still
 * ---------------------------------------------------------------- */

.brief__inner { max-width: var(--page-narrow); }
.brief__h { font-size: var(--fs-h2); margin: 18px 0 26px; letter-spacing: -0.03em; }
.brief__lead { font-size: var(--fs-lead); max-width: 52ch; }
.brief__cite {
  margin-top: 26px; padding-left: 22px; border-left: 2px solid var(--pulse-soft-border);
  font-size: var(--fs-small); color: var(--text-dim); max-width: 60ch;
}
.brief__cite em { font-style: italic; color: var(--text); }
.brief__cite cite { font-style: italic; }

/* ---------------------------------------------------------------- *
 * PRIVACY
 * ---------------------------------------------------------------- */

.privacy__inner { max-width: var(--page-narrow); text-align: center; margin-inline: auto; }
.privacy .kicker { display: inline-block; margin-bottom: 22px; }
.privacy__q { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.privacy__body { margin: 30px auto 0; max-width: 56ch; font-size: var(--fs-lead); color: var(--text-dim); }
.privacy__app {
  margin: 30px auto 0; max-width: 44ch;
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text);
}
.privacy__app span { display: block; margin-top: 8px; color: var(--text-dim); font-family: var(--font-ui); font-size: var(--fs-fine); }

/* ---------------------------------------------------------------- *
 * NEXT — roadmap
 * ---------------------------------------------------------------- */

.roadmap {
  list-style: none; padding: 0; margin-top: clamp(36px, 6vh, 60px);
  display: grid; gap: var(--card-gap); grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) { .roadmap { grid-template-columns: 1fr; } }
.road {
  position: relative; padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-card); background: var(--card);
  border: var(--hair) solid var(--hairline); box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur-control) var(--ease-out), box-shadow var(--dur-control) var(--ease-out);
}
.road:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -24px var(--pulse-soft-border); }
/* An accent rail that grows on hover — a small promise of momentum. */
.road::after {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 40px;
  background: linear-gradient(90deg, var(--pulse-line), transparent);
  transition: width var(--dur-reveal) var(--ease-out);
}
.road:hover::after { width: 100%; }
/* A soft accent bloom that follows the card in. */
.road::before {
  content: ''; position: absolute; right: -30%; top: -60%; width: 60%; height: 120%;
  background: radial-gradient(circle, var(--pulse-soft), transparent 70%);
  opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out);
}
.road:hover::before { opacity: 1; }
.road__ic {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px;
  background: var(--pulse-soft); color: var(--pulse-line);
  transition: transform var(--dur-control) var(--ease-press);
}
.road__ic svg { width: 21px; height: 21px; }
.road:hover .road__ic { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
.road__tag {
  position: relative; z-index: 1;
  display: inline-block; margin-bottom: 12px; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--pulse-soft); color: var(--pulse-text); border: var(--hair) solid var(--pulse-soft-border);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  overflow: hidden;
}
/* A slow shimmer travels across the tag — the "it's alive, it's coming" cue. */
.road__tag::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: glare 4.5s var(--ease-inout) infinite; animation-play-state: var(--loop);
}
.road:nth-child(2) .road__tag::after { animation-delay: -1.2s; }
.road:nth-child(3) .road__tag::after { animation-delay: -2.4s; }
.road:nth-child(4) .road__tag::after { animation-delay: -3.6s; }
.road h3 { position: relative; z-index: 1; font-size: var(--fs-h3); margin-bottom: 8px; }
.road p { position: relative; z-index: 1; color: var(--text-dim); font-size: var(--fs-small); }

/* ---------------------------------------------------------------- *
 * CTA / waitlist
 * ---------------------------------------------------------------- */

.cta { position: relative; overflow: hidden; padding-block: clamp(72px, 12vh, 150px); }
.cta__half { position: absolute; inset: 0; z-index: 0; }
.cta__half--m { right: 50%;
  background: radial-gradient(130% 130% at 10% 80%, var(--pulse-soft), transparent 60%), var(--ink);
  border-right: var(--hair) solid var(--hairline); }
.cta__half--f { left: 50%;
  background: radial-gradient(130% 130% at 90% 80%, var(--pulse-soft), transparent 60%), var(--ink); }
@media (max-width: 860px) {
  .cta__half--m { right: 0; bottom: 60%; border-right: 0; }
  .cta__half--f { left: 0; top: 40%; }
}
.cta__inner { position: relative; z-index: 2; }

.waitlist { max-width: 460px; margin: clamp(34px, 5vh, 52px) auto 0; position: relative; }
.wl { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label, .field__label { font-family: var(--font-mono); font-size: var(--fs-fine); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.input {
  width: 100%; padding: 14px 16px; border-radius: var(--r-control);
  background: var(--card); color: var(--text);
  border: var(--hair) solid var(--control-border);
  transition: border-color var(--dur-control) var(--ease-out), box-shadow var(--dur-control) var(--ease-out);
}
.input::placeholder { color: var(--placeholder); }
.input:focus { outline: none; border-color: var(--pulse-line); box-shadow: 0 0 0 3px var(--pulse-soft); }
.tel { display: flex; gap: 8px; }
.tel__code { width: 108px; flex-shrink: 0; padding: 14px 12px; border-radius: var(--r-control); background: var(--card); color: var(--text); border: var(--hair) solid var(--control-border); }
.tel__code:focus { outline: none; border-color: var(--pulse-line); box-shadow: 0 0 0 3px var(--pulse-soft); }
.tel .input { flex: 1; min-width: 0; }

.error { font-size: var(--fs-fine); color: var(--pulse-text); min-height: 0; opacity: 0; height: 0; overflow: hidden; transition: opacity var(--dur-control) var(--ease-out); }
.error.is-shown { opacity: 1; height: auto; }
.field.has-error .input, .field.has-error .tel__code { border-color: var(--pulse-line); }

.form-note { font-size: var(--fs-small); color: var(--pulse-text); opacity: 0; transition: opacity var(--dur-control); }
.form-note.is-shown { opacity: 1; }

.wl__submit { width: 100%; margin-top: 4px; padding: 16px; }
.wl__submit[disabled] { opacity: 0.4; cursor: default; }
.wl__reassure { text-align: center; font-family: var(--font-mono); font-size: var(--fs-fine); color: var(--text-dim); letter-spacing: 0.02em; }
.wl__consent { font-size: 0.75rem; color: var(--text-dim); line-height: 1.5; text-align: center; }
.wl__consent a { color: var(--pulse-text); text-decoration: underline; text-underline-offset: 2px; }

.success { text-align: center; padding: 20px 0; }
.success strong { display: block; font-size: var(--fs-h3); margin-bottom: 8px; }
.success p { color: var(--text-dim); }

/* ---------------------------------------------------------------- *
 * Footer
 * ---------------------------------------------------------------- */

/*
 * Two rows on one grid: the brand and the links share a baseline, and the
 * legal note sits under them on the same left edge. The note used to live
 * outside .wrap, so it ran flush to the window while everything above it was
 * inset by the gutter.
 */
.ft {
  background: var(--ink);
  border-top: var(--hair) solid var(--hairline);
  padding-block: clamp(32px, 5vw, 52px);
  position: relative;
  z-index: 2;
}

.ft__bar {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}

.brand--sm .brand__word { font-size: 1rem; }

.ft__links {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  margin-left: auto;
  flex-wrap: wrap;
}

.ft__links a,
.motion-toggle {
  font-size: var(--fs-small);
  color: var(--text-dim);
  transition: color var(--dur-micro);
}

/* The one link that leaves the teaser gets the accent; the rest are equals. */
.ft__links a[data-ft-lead] {
  color: var(--pulse-text);
  font-weight: 600;
}

.ft__links a:hover,
.ft__links a:focus-visible,
.motion-toggle:hover,
.motion-toggle:focus-visible { color: var(--text); }

.motion-toggle__on { display: none; }
[data-motion="off"] .motion-toggle__on { display: inline; }
[data-motion="off"] .motion-toggle__off { display: none; }

/* The rule spans the column; the sentence under it keeps a reading measure.
   Putting the border on the note itself made it stop wherever the text did. */
.ft__foot {
  margin-top: clamp(20px, 3vw, 30px);
  padding-top: clamp(18px, 2.5vw, 26px);
  border-top: var(--hair) solid var(--hairline);
}

.ft__note {
  font-size: var(--fs-fine);
  color: var(--text-dim);
  max-width: 62ch;
}

/* Stacked on a phone, where the links would otherwise wrap into a ragged
   block half-aligned to the right. */
@media (max-width: 640px) {
  .ft__bar { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ft__links { margin-left: 0; gap: 10px 20px; }
}

/* ---------------------------------------------------------------- *
 * Reduced motion — belt and braces on top of the token collapse
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .r, .js .hero__h .line__in { opacity: 1 !important; transform: none !important; }
  .ticker__row, .phone--m img, .phone--f img, .hero__scroll span { animation: none !important; }
}

/* ==================================================================== *
 * Document pages — privacy, terms, 404
 *
 * The teaser is the product; these are the pages that have to exist around it.
 * They share its shell (.hd, .ft), its light-only palette and its type ramp, so
 * following a footer link never feels like leaving the site.
 * ==================================================================== */

.doc {
  max-width: 44rem;
  padding-block: clamp(48px, 7vw, 96px);
  position: relative;
  z-index: 2;
}

.doc h1 {
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
}

.doc h2 {
  font-size: var(--fs-h3);
  margin-top: 44px;
  letter-spacing: -0.02em;
}

.doc h2 + p {
  margin-top: 14px;
}

.doc p + p,
.doc ul + p,
.doc p + ul {
  margin-top: 1em;
}

.doc ul {
  padding-left: 20px;
  color: var(--text-dim);
}

.doc li + li {
  margin-top: 8px;
}

.doc a {
  color: var(--pulse-text);
  text-underline-offset: 3px;
}

.doc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* A gap the author still has to fill — a legal entity, an address. Marked so it
 * is obvious in review and impossible to mistake for finished copy. */
.doc .gap {
  color: var(--text-dim);
  border-bottom: 1px dashed var(--control-border);
}

.doc__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-fine);
  color: var(--text-dim);
  margin-top: 12px;
}

/* ------------------------------------------------------------------ *
 * 404
 * ------------------------------------------------------------------ */

.lost {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(56px, 9vw, 112px);
  min-height: 64vh;
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .lost {
    grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  }
}

.lost__copy {
  max-width: 34rem;
}

.lost h1 {
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
}

.lost__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.lost__links {
  margin-top: 44px;
  padding-top: 24px;
  border-top: var(--hair) solid var(--hairline);
}

.lost__links ul {
  list-style: none;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

.lost__links li + li {
  margin-top: 10px;
}

.lost__links a {
  color: var(--pulse-text);
  text-underline-offset: 3px;
}

.lost__art {
  color: var(--pulse-text);
  display: flex;
  justify-content: center;
}

/* The mark made literal: a flight of stairs with one tread missing, and a step
 * that climbs, reaches the gap, and thinks better of it. */
.lost__walker {
  animation: lost-walk 5.2s var(--ease-inout) infinite;
  animation-play-state: var(--loop, running);
}

@keyframes lost-walk {
  0%        { transform: translate(30px, 172px); opacity: 0; }
  8%, 22%   { transform: translate(30px, 172px); opacity: 1; }
  34%, 46%  { transform: translate(78px, 136px); opacity: 1; }
  56%       { transform: translate(116px, 122px); opacity: 0.4; }
  66%, 80%  { transform: translate(78px, 136px); opacity: 1; }
  92%       { transform: translate(30px, 172px); opacity: 1; }
  100%      { transform: translate(30px, 172px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lost__walker {
    animation: none;
    transform: translate(78px, 136px);
  }
}

[data-motion='off'] .lost__walker {
  animation: none;
  transform: translate(78px, 136px);
}

/* ------------------------------------------------------------------ *
 * Sections still to be written
 *
 * Pricing and the founder's note are deliberately unwritten — they need a
 * decision and a voice that are not the build's to supply. The dashed frame is
 * so they cannot be mistaken for finished copy in review, and `npm run check`
 * reports them as launch blockers for the same reason.
 * ------------------------------------------------------------------ */

.awaiting {
  border: var(--hair) dashed var(--control-border);
  border-radius: var(--r-card);
  padding: clamp(22px, 4vw, 36px);
  max-width: 46rem;
  background: color-mix(in srgb, var(--pulse) 4%, transparent);
}

.awaiting__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--pulse-text);
  margin-bottom: 12px;
}

.awaiting ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--text-dim);
  font-size: var(--fs-small);
}

.awaiting li + li {
  margin-top: 6px;
}

.awaiting code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}