/* HorsCat landing page · "Summit Dawn" */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2?v=1ddfd2ea84") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono.woff2?v=4a6d492ef0") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
/* Narrowed fallbacks so text keeps roughly the same width while the fonts load. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial Narrow"), local("ArialNarrow"), local("Roboto Condensed"), local("Arial"); size-adjust: 92%; }
@font-face { font-family: "Mono Fallback"; src: local("Menlo"), local("Consolas"), local("Courier New"); size-adjust: 98%; }

:root {
  --ink-0: #000000;
  --ink-1: #0D0F12;
  --ink-2: #16191D;
  --line: #2A2E35;
  --line-soft: #1A1D22;
  --line-input: #3A3F47;
  --text-hi: #FFFFFF;
  --text-mid: #D9DDE3;
  --text-low: #A7ADB7;
  --lime: #D4FF3F;
  --lime-hover: #E9FF9A;
  --dawn-amber: #FFB648;
  --dawn-orange: #FF8A1F;
  --sky-cyan: #43D6FF;
  --go-green: #2BD67B;
  --alert: #FF5C7A;
  --alert-text: #FF8FA3;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --r-xs: 4px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 28px; --r-pill: 999px;

  --sans: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --mono: "Geist Mono", "Mono Fallback", ui-monospace, monospace;

  --gutter: 16px;
  --section-pad: 72px;
  --stage-h: max(100svh, 800px);

  color-scheme: dark;
}
@media (min-width: 1024px) {
  :root { --gutter: clamp(40px, 5.6vw, 80px); --section-pad: 120px; --stage-h: max(100vh, 720px); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink-0); }
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text-hi);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
p, h1, h2, h3, figure, ul { margin: 0; }
a { color: var(--lime); text-underline-offset: 3px; }
a:hover { color: var(--lime-hover); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
button { font: inherit; }
[hidden] { display: none !important; }

.page { overflow-x: clip; } /* clip, never hidden: hidden would cancel the sticky hero */
.wrap { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lime { color: var(--lime); } .cyan { color: var(--sky-cyan); } .green { color: var(--go-green); }
.amber { color: var(--dawn-amber); } .red { color: var(--alert); } .low { color: var(--text-low); } .dim { color: var(--text-mid); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--r-md); background: var(--lime); color: #000; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 16px; color: #000; }

/* Type */
.eyebrow { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.display-xl, .display-l, .display-beta, .title { font-weight: 800; text-transform: uppercase; }
.display-xl { font-stretch: 75%; font-size: clamp(56px, calc((100vw - 2 * var(--gutter)) / 4.6), 120px); /* "category." stays on one line */ line-height: .84; letter-spacing: -.02em; }
.display-l { font-stretch: 75%; font-size: clamp(48px, 14.4vw, 72px); line-height: .9; }
.display-beta { font-stretch: 75%; font-size: clamp(56px, 16.4vw, 80px); line-height: .86; }
.title { text-transform: none; font-stretch: 85%; font-size: 32px; line-height: 1.02; }
.lede { font-size: 17px; line-height: 1.45; color: #E6E8EC; }
.body { font-size: 16px; line-height: 1.5; color: var(--text-mid); }
.body-l { font-size: 17px; line-height: 1.5; color: var(--text-mid); }
.small { font-size: 13px; line-height: 1.5; }
.tiny { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-low); }
.mask { display: block; overflow: hidden; padding-bottom: .04em; }
.mask > span { display: block; }
@media (min-width: 1024px) {
  .eyebrow { font-size: 13px; }
  .display-xl { font-size: clamp(116px, 12.2vw, 176px); }
  .display-l { font-size: clamp(72px, 6.67vw, 96px); }
  .display-beta { font-size: clamp(84px, 7.8vw, 112px); }
  .title { font-size: clamp(36px, 3.06vw, 44px); line-height: 1; }
  .lede { font-size: 21px; }
  .body { font-size: 18px; }
  .body-l { font-size: 20px; }
  .small { font-size: 14px; }
  .tiny { font-size: 11px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-md);
  font-family: var(--sans); font-weight: 700; text-decoration: none; cursor: pointer; border: 0;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out, border-color 150ms ease-out;
}
.btn:active { transform: scale(.98); }
.btn-sm { height: 44px; font-size: 15px; }
.btn-md { height: 52px; padding: 0 24px; font-size: 17px; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-lime { background: var(--lime); color: #000; }
.btn-lime:hover { background: var(--lime-hover); color: #000; }
.btn-glow { box-shadow: 0 8px 40px rgba(212, 255, 63, .28); }
.btn-ghost { background: rgba(0, 0, 0, .25); color: var(--text-hi); border: 1px solid rgba(255, 255, 255, .5); font-weight: 600; }
.btn-ghost:hover { color: var(--text-hi); border-color: #FFFFFF; background: rgba(0, 0, 0, .4); }
.btn-cyan { background: transparent; color: var(--text-hi); border: 1px solid var(--sky-cyan); }
.btn-cyan:hover { color: var(--text-hi); background: rgba(67, 214, 255, .12); }
.icon { flex: none; }
@media (min-width: 1024px) {
  .btn-lg { height: 56px; padding: 0 28px; font-size: 18px; }
  .btn-md { height: 52px; font-size: 17px; }
}

/* ───────────── 1 · Hero ───────────── */
.hero { position: relative; }
.hero-stage {
  position: relative; height: var(--stage-h); overflow: clip;
  background: linear-gradient(180deg, #03040A 0%, #0A0B1C 45%, #1A1226 75%, #2A1622 100%);
  isolation: isolate;
}
.sky-warm {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #05070F 0%, #0E0F24 40%, #2A1A33 62%, #8A3A26 80%, #FFB648 100%);
  opacity: 1;
}
.art { position: absolute; z-index: -1; }
.art-desk { display: none; }
.art-mob { left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 390 / 340; max-height: 55%; overflow: visible; }
.art g, .art path { transform-box: view-box; }
.climb { stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px rgba(212, 255, 63, .75)); }
.ping { transform-box: fill-box; transform-origin: center; animation: hc-ping 2.2s ease-out infinite; }
.glow { animation: hc-breathe 6s ease-in-out infinite; }
.flag { transform-box: fill-box; transform-origin: 50% 100%; }
.curtain { position: absolute; inset: 0; z-index: 0; background: #000; opacity: 0; pointer-events: none; }
.hero.paused .ping, .hero.paused .glow, .hero.paused .cue span { animation-play-state: paused; }

.nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { display: none; color: var(--text-mid); text-decoration: none; font-size: 15px; min-height: 44px; min-width: 44px; justify-content: center; align-items: center; }
.nav-link:hover { color: #FFFFFF; }

.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; padding-top: 40px; }
.hero-copy h1 { white-space: nowrap; }
.hero-ctas { display: flex; flex-direction: column; gap: 12px; }
.cta-slot { display: block; }
.hero-ctas .btn { width: 100%; }

.readout {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 96px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: rgba(6, 7, 10, .82); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--mono);
}
.readout-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .12em; color: var(--text-low); }
.tag { color: #000; background: var(--lime); border-radius: var(--r-xs); padding: 0 4px; font-weight: 700; letter-spacing: .04em; }
.readout-val { display: flex; align-items: baseline; font-size: 34px; font-weight: 600; line-height: 1.1; color: #FFFFFF; }
.readout-val .pct { font-size: 18px; color: var(--dawn-amber); }
.readout-left { display: none; font-size: 12px; color: var(--text-low); margin-top: 8px; }
.cue { display: none; }

html.motion { scroll-behavior: smooth; }
@media (min-width: 1024px) {
  .sky-warm { background: linear-gradient(180deg, #05070F 0%, #0E0F24 34%, #2A1A33 58%, #6B2E2A 74%, #C2622A 86%, #FFB648 100%); }
  .motion .hero.pin { height: calc(var(--stage-h) + 700px); }
  .motion .hero.pin .hero-stage { position: sticky; top: 0; }
  .art-desk { display: block; inset: 0; width: 100%; height: 100%; }
  .art-mob { display: none; }
  .nav { padding: 28px 0; }
  .wordmark img { height: 32px; }
  .nav-link { display: inline-flex; }
  .hero-copy { gap: 28px; padding-top: clamp(24px, 8vh, 72px); }
  .hero-sub { max-width: 520px; }
  .hero-ctas { flex-direction: row; gap: 16px; }
  .hero-ctas .btn { width: auto; }
  .readout {
    right: calc(var(--gutter) + 40px); bottom: auto; top: 57.8%;
    width: 240px; padding: 16px 18px; border-radius: 16px; background: rgba(6, 7, 10, .72);
  }
  .readout-top { font-size: 11px; }
  .tag { padding: 1px 6px; }
  .readout-val { font-size: 64px; margin-top: 6px; }
  .readout-val .pct { font-size: 28px; }
  .readout-left { display: block; }
  .cue {
    display: block; position: absolute; z-index: 2; left: var(--gutter); bottom: 28px;
    font-size: 12px; letter-spacing: .14em; color: #FFFFFF; opacity: .85;
  }
  .cue span { display: inline-block; animation: hc-bob 1.8s ease-in-out infinite; }
}
/* Very short desktop windows: keep the readout clear of the headline. */
@media (min-width: 1024px) and (max-height: 760px) { .readout { top: auto; bottom: 72px; } }

/* Odometer digits */
.odo { display: inline-flex; }
.odo .col { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; }
.odo .strip { display: block; will-change: transform; }
.odo .strip > span { display: block; height: 1.1em; }

/* ───────────── 2 · Head unit ───────────── */
.unit { background: var(--ink-0); padding: var(--section-pad) 0 64px; }
.split { display: grid; gap: 40px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; font-family: var(--mono); font-size: 13px; }
.chips li { padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-mid); }

.phone-stage { position: relative; display: flex; justify-content: center; align-items: center; padding-top: 12px; }
.phone-glow {
  position: absolute; top: 40px; left: 50%; width: 380px; height: 380px; margin-left: -190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 214, 255, .26), rgba(67, 214, 255, 0) 65%);
}
.phone {
  --pw: 280px; --ph: 590px;
  position: relative; width: var(--pw); height: var(--ph); border-radius: 46px; padding: 10px;
  background: #111317; border: 1px solid var(--line); box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
.screen {
  width: 100%; height: 100%; border-radius: 38px; background: #000; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 44px 14px 14px;
}
.row-sb { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dot { display: inline-block; width: 7px; height: 7px; vertical-align: 1px; }
.tile { border-radius: 14px; background: var(--ink-1); border: 1px solid var(--line-soft); padding: 10px 12px; }
.tile-power { border-radius: 16px; padding: 12px 14px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metric-hero { display: flex; align-items: baseline; font-size: 76px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: #FFFFFF; }
.unit-w { font-size: 18px; color: var(--text-low); letter-spacing: 0; }
.metric { display: flex; font-size: 32px; font-weight: 600; line-height: 1.1; }
.tile-climb { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.tile-climb svg { width: 100%; height: 56px; }
.callout { display: none; }

@media (min-width: 1024px) {
  .unit { min-height: 920px; display: flex; align-items: center; padding: 80px 0; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
  .stack { gap: 24px; }
  .unit .body-l { max-width: 520px; }
  .phone-stage { height: 760px; padding: 0; }
  .phone-glow { top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; }
  .phone { --pw: 330px; --ph: 700px; border-radius: 54px; padding: 12px; }
  .screen { border-radius: 44px; padding: 54px 18px 18px; gap: 10px; }
  .tile { border-radius: 16px; padding: 12px 14px; }
  .tile-power { border-radius: 18px; padding: 14px 16px; }
  .tiles { gap: 10px; }
  .metric-hero { font-size: 92px; }
  .unit-w { font-size: 22px; }
  .metric { font-size: 40px; }
  .tile-climb svg { height: 70px; }
  .callout {
    display: block; position: absolute; padding: 10px 14px; border-radius: var(--r-md);
    background: var(--ink-1); border: 1px solid var(--line); font-size: 12px; color: var(--text-mid); white-space: nowrap;
  }
  .c1 { left: 0; top: 150px; } .c2 { right: 0; top: 330px; } .c3 { left: 20px; bottom: 140px; }
}

/* ───────────── 3 · Features ───────────── */
.features { background: var(--ink-1); padding: var(--section-pad) 0 40px; }
.feat-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; }
.feat { display: flex; flex-direction: column; gap: 12px; padding: 32px 0 48px; border-top: 1px solid var(--line); }
.feat-text { display: flex; flex-direction: column; gap: 12px; }
.feat-art { position: relative; margin-top: 8px; }
.feat-glow { position: absolute; inset: -60px; pointer-events: none; display: none; }
.g-lime { background: radial-gradient(closest-side, rgba(212, 255, 63, .16), rgba(212, 255, 63, 0)); }
.g-cyan { background: radial-gradient(closest-side, rgba(67, 214, 255, .16), rgba(67, 214, 255, 0)); }
.g-green { background: radial-gradient(closest-side, rgba(43, 214, 123, .14), rgba(43, 214, 123, 0)); }
.g-amber { background: radial-gradient(closest-side, rgba(255, 182, 72, .16), rgba(255, 182, 72, 0)); }

.ill { position: relative; border-radius: var(--r-lg); background: #000; border: 1px solid var(--line-soft); }
.ill-desk { display: none; }
.ill-mob {
  height: 240px; padding: 18px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ill-mob .tiny { font-size: 11px; letter-spacing: .12em; }
.ill-mob .big { font-size: 30px; font-weight: 600; color: var(--c); line-height: 1.2; }
.bar { height: 6px; border-radius: 3px; background: var(--line-soft); }
.bar > div { height: 6px; border-radius: 3px; background: var(--c); }
.chip-note { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--c); font-size: 13px; color: #FFFFFF; display: flex; align-items: center; gap: 6px; }
.check { width: 15px; height: 15px; flex: none; }

@media (min-width: 1024px) {
  .features { padding: 120px 0 80px; }
  .feat-head { flex-direction: row; justify-content: space-between; align-items: flex-end; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
  .feat-head .body { max-width: 380px; }
  .feat {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center;
    min-height: 440px; padding: 60px 0; border-top: 0; border-bottom: 1px solid var(--line);
  }
  .feat.last { border-bottom: 0; }
  .feat-text { gap: 16px; }
  .feat-text .body { max-width: 500px; }
  .feat-art { margin: 0; }
  .feat-glow { display: block; }
  .ill-desk { display: flex; height: 320px; }
  .ill-mob { display: none; }
}
@media (max-width: 1023px) { .feat.flip .feat-art { order: 2; } }

.ill-climb, .ill-fuel, .ill-debrief { flex-direction: column; padding: 24px; }
.ill-climb { justify-content: space-between; }
.ill-stats { display: flex; gap: 32px; }
.ill-stats .stat { font-size: clamp(26px, 2.5vw, 36px); }
.ill-climb svg { width: 100%; height: 150px; }
.ill-map { overflow: hidden; background: #0A1418; }
.ill-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-alert {
  position: absolute; left: 24px; bottom: 24px; padding: 10px 14px; border-radius: var(--r-md);
  background: rgba(255, 182, 72, .14); border: 1px solid var(--dawn-amber); font-size: 13px; color: #FFD9A0;
}
.ill-sensors { flex-direction: column; gap: 10px; padding: 20px; font-size: 14px; }
.srow { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-md); background: var(--ink-1); }
.salert { margin-top: auto; padding: 14px; border-radius: var(--r-md); background: rgba(255, 92, 122, .12); border: 1px solid var(--alert); color: #FFC2CE; }
.ill-fuel { gap: 18px; }
.ill-fuel .tiny { font-size: 12px; letter-spacing: 0; }
.fbar { height: 12px; border-radius: 6px; background: var(--line-soft); margin-top: 8px; }
.fbar > div { height: 12px; border-radius: 6px; }
.amber-bg { background: var(--dawn-amber); } .cyan-bg { background: var(--sky-cyan); }
.falert { margin-top: auto; padding: 14px; border-radius: var(--r-md); background: rgba(212, 255, 63, .1); border: 1px solid var(--lime); color: var(--lime-hover); font-size: 14px; }
.ill-debrief { gap: 14px; }
.ill-debrief .tiny { font-size: 12px; letter-spacing: .12em; }
.debrief-text { font-size: 22px; line-height: 1.35; color: #FFFFFF; }
.ask { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--text-low); font-size: 15px; }
.debrief-foot { margin-top: auto; font-size: 13px; }
.strava { display: inline-flex; align-items: center; gap: 6px; }

/* ───────────── 4 · Demo video ───────────── */
.demo { background: var(--ink-0); padding: var(--section-pad) 0 64px; }
.demo-inner { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.demo-head { display: flex; flex-direction: column; gap: 16px; }
.video-box-wrap { width: 100%; }
.video-box {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: #000; border: 1px solid var(--line);
}
.video-box:focus-within { outline: 2px solid var(--lime); outline-offset: 3px; }
.video-facade {
  all: unset; position: absolute; inset: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 70% 40%, #3A2440 0%, #0D0F12 65%);
}
.video-facade:focus-visible { outline: none; }
.video-facade picture, .video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-facade img { object-fit: contain; } /* the poster is 16:9 already; contain guards against any crop */
.play {
  position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--lime);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(212, 255, 63, .45), 0 12px 60px rgba(212, 255, 63, .35);
  animation: hc-pulse 2s ease-out infinite;
  transition: transform 200ms var(--ease-out);
}
.play svg { width: 24px; height: 24px; margin-left: 3px; }
.video-facade:hover .play, .video-facade:focus-visible .play { transform: scale(1.06); }
.video-caption { position: absolute; left: 14px; bottom: 12px; font-size: 14px; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.spinner {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 4px solid rgba(212, 255, 63, .25); border-top-color: var(--lime); animation: hc-spin 1s linear infinite;
}
.demo.paused .play { animation-play-state: paused; }
@media (min-width: 1024px) {
  .demo { min-height: 960px; display: flex; align-items: center; padding: 120px 0; }
  .demo-inner { gap: 40px; align-items: center; }
  .demo-head { width: 100%; flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .video-box { border-radius: var(--r-2xl); }
  .play { width: 96px; height: 96px; }
  .play svg { width: 34px; height: 34px; }
  .video-caption { left: 32px; bottom: 28px; font-size: 18px; }
}

/* ───────────── 5 · Preview ───────────── */
.preview { background: linear-gradient(180deg, #000 0%, #0B0F1A 100%); padding: var(--section-pad) 0; }
.preview .stack { gap: 18px; }
.preview .cta-slot .btn { width: 100%; }
.fan { position: relative; width: 100%; max-width: 600px; margin-inline: auto; aspect-ratio: 600 / 480; container-type: inline-size; }
.fan-phone { position: absolute; border-radius: 6cqw; background: #111317; border: 1px solid var(--line); overflow: hidden; }
.fan-phone.side { --o: .7; width: 33.3%; height: 87.5%; opacity: var(--o); }
.fan-phone.left { left: 10%; top: 12.5%; }
.fan-phone.right { left: 56.7%; top: 8.3%; }
.fan-phone.center { left: 31.7%; top: 2%; width: 36.7%; height: 95.8%; background: #000; border-color: var(--sky-cyan); box-shadow: 0 0 80px rgba(67, 214, 255, .25); }
.mini { position: absolute; inset: 0; padding: 12cqw 2.4cqw 3cqw; display: flex; flex-direction: column; gap: 1.6cqw; font-size: 2cqw; color: var(--text-mid); }
.mini-k { font-size: 1.7cqw; letter-spacing: .12em; color: var(--text-low); }
.mini-row { display: flex; justify-content: space-between; padding: 1.4cqw 1.6cqw; border-radius: 1.6cqw; background: var(--ink-1); }
.mini-row b { font-weight: 600; }
.mini-go { margin-top: auto; padding: 2cqw; border-radius: 1.8cqw; background: var(--lime); color: #000; text-align: center; font-weight: 700; }
.mini-p { font-family: var(--sans); font-size: 2.1cqw; line-height: 1.35; color: #FFFFFF; }
.mini-big { font-size: 9cqw; font-weight: 600; line-height: 1; color: #FFFFFF; letter-spacing: -.03em; }
.mini-big small { font-size: 2.6cqw; color: var(--text-low); letter-spacing: 0; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.mini-grid span { padding: 1.2cqw 1.4cqw; border-radius: 1.6cqw; background: var(--ink-1); font-size: 3.2cqw; font-weight: 600; color: #FFFFFF; }
.mini-grid span.amber { color: var(--dawn-amber); }
.mini-grid i { display: block; font-style: normal; font-size: 1.5cqw; font-weight: 500; color: var(--text-low); letter-spacing: .1em; }
.fan svg { width: 100%; height: 7cqw; }
.mini-foot { margin-top: auto; text-align: center; font-size: 1.7cqw; color: var(--text-low); }
@media (max-width: 1023px) {
  .preview .split { gap: 24px; }
  .preview .split > .stack { display: contents; }
  .preview .eyebrow { order: 1; } .preview h2 { order: 2; } .preview .body-l { order: 3; }
  .fan { order: 4; max-width: 420px; }
  .preview .cta-slot { order: 5; }
}
@media (min-width: 1024px) {
  .preview { min-height: 640px; display: flex; align-items: center; padding: 80px 0; }
  .preview .stack { gap: 24px; }
  .preview .body-l { max-width: 520px; }
  .preview h2 { font-size: clamp(68px, 6.1vw, 88px); }
  .preview .cta-slot { align-self: flex-start; }
  .preview .cta-slot .btn { width: auto; }
}

/* ───────────── 6 · Beta sign-up ───────────── */
.beta { position: relative; background: var(--ink-0); padding: var(--section-pad) 0 80px; overflow: clip; }
.beta-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 460px 300px at 50% 100%, rgba(255, 138, 31, .42), rgba(255, 138, 31, 0) 70%);
}
.beta .split { position: relative; gap: 16px; }
.beta-copy { gap: 16px; }
.beta-panel-wrap { margin-top: 8px; }
.beta-form, .status {
  border-radius: var(--r-lg); background: var(--ink-1); border: 1px solid var(--line); padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .phones legend { font-size: 15px; font-weight: 600; }
.field input {
  height: 52px; border-radius: var(--r-md); border: 1px solid var(--line-input); background: #000; color: #FFFFFF;
  font-family: var(--sans); font-size: 17px; padding: 0 15px; width: 100%; transition: border-color 150ms ease-out;
}
.field input::placeholder { color: #8A909A; }
.field input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.field.invalid input { border: 2px solid var(--alert); padding: 0 14px; }
.field-error { font-size: 14px; color: var(--alert-text); }
.field.shake input { animation: hc-shake 300ms ease-out; }
.phones { border: 0; margin: 0; padding: 0; min-width: 0; }
.phones legend { padding: 0; margin-bottom: 8px; }
.phone-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt span {
  display: flex; align-items: center; justify-content: center; height: 48px; border-radius: var(--r-md);
  background: #000; color: #FFFFFF; border: 1px solid var(--line-input); font-weight: 600; font-size: 16px;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.opt:hover span { border-color: #6A707A; }
.opt input:checked + span { background: var(--lime); color: #000; border-color: var(--lime); }
.opt input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.submit[aria-busy="true"] { cursor: progress; }
.submit:disabled { opacity: 1; }
.fine a { color: var(--lime); }
.form-alert {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(255, 92, 122, .12); border: 1px solid var(--alert);
}
.form-alert svg { flex: none; }
.form-alert p { font-size: 16px; line-height: 1.45; color: #FFD0D9; }

.status { justify-content: center; gap: 18px; padding: 28px 20px; min-height: 360px; }
.status-inbox { border-color: var(--lime); }
.status-confirmed { border-color: var(--dawn-amber); background: linear-gradient(180deg, #0D0F12 0%, #2A1A1A 100%); }
.status-title { font-size: 32px; font-weight: 800; font-stretch: 85%; line-height: 1; outline: none; }
.status strong { color: #FFFFFF; }
.status-actions { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; }
.link-btn {
  all: unset; cursor: pointer; color: var(--text-mid); text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.link-btn.lime { color: var(--lime); }
.link-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 2px; }
.link-btn:hover { color: #FFFFFF; }
.confirmed-tag { align-self: flex-start; font-size: 13px; font-weight: 700; color: #000; background: var(--lime); border-radius: var(--r-sm); padding: 4px 10px; }
.status .btn { align-self: flex-start; }
.resend-note:empty { display: none; }

@media (min-width: 1024px) {
  .beta { min-height: 700px; display: flex; align-items: center; padding: 100px 0; }
  .beta-glow { background: radial-gradient(ellipse 1000px 460px at 50% 100%, rgba(255, 138, 31, .42), rgba(255, 138, 31, 0) 70%); }
  .beta .split { gap: 80px; }
  .beta-copy { gap: 24px; }
  .beta-copy .body-l { max-width: 480px; }
  .beta-panel-wrap { margin: 0; justify-self: end; width: min(560px, 100%); }
  .beta-form, .status { border-radius: var(--r-xl); padding: 32px; gap: 20px; }
  .status { min-height: 460px; padding: 40px; gap: 18px; }
  .status-title { font-size: 40px; }
  .status .body { font-size: 18px; }
  .submit { height: 56px; }
}

/* ───────────── 7 · Footer ───────────── */
.footer { background: var(--ink-0); border-top: 1px solid var(--line-soft); padding: 32px 0; }
.footer-inner { display: flex; flex-direction: column; gap: 16px; }
.wordmark-sm img { height: 26px; }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 15px; }
.footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-nav .copy { order: 3; width: 100%; font-size: 13px; }
@media (min-width: 1024px) {
  .footer { min-height: 180px; display: flex; align-items: center; }
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; }
  .footer-nav { gap: 28px; font-size: 14px; }
  .footer-nav .copy { order: 0; width: auto; font-size: 14px; }
}

/* ───────────── Motion ─────────────
   Every start pose lives under .motion, which the page only sets when reduced
   motion is off. Hero pieces wait for .loaded (set once the hero is on screen);
   section pieces wait for .on (set when their section enters view). */
[data-a] { transform: var(--to, none); }
svg [data-a], svg .tw-dash { transform-box: fill-box; transform-origin: center; }
.tw-dash { stroke-dasharray: 100; stroke-dashoffset: 0; }
.tw-w { width: var(--w); }

.motion [data-i] { opacity: 0; transform: var(--from); }
.motion.loaded [data-i] {
  opacity: 1; transform: none;
  transition: transform var(--dur, 1100ms) var(--ease-out) var(--d, 0ms), opacity calc(var(--dur, 1100ms) * .6) ease var(--d, 0ms);
}
.motion.settled [data-i] { transition: none; }
.motion .curtain { opacity: 1; }
.motion.loaded .curtain { opacity: 0; transition: opacity 1400ms ease; }

.mask > [data-a] { --from: translateY(110%); --dur: 1200ms; }
.motion [data-a] { opacity: 0; transform: var(--from, translateY(24px)); }
.motion .on [data-a], .motion [data-a].on {
  opacity: var(--o, 1); transform: var(--to, none);
  transition:
    transform var(--dur, 1100ms) var(--ease, var(--ease-out)) calc(var(--d, 0ms) + var(--stag, 0ms)),
    opacity calc(var(--dur, 1100ms) * .6) ease calc(var(--d, 0ms) + var(--stag, 0ms));
}
.motion .tw-dash { stroke-dashoffset: 100; }
.motion .on .tw-dash { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1200ms) var(--ease-out) calc(var(--d, 0ms) + var(--stag, 0ms)); }
.motion .tw-w { width: 0; }
.motion .on .tw-w { width: var(--w); transition: width var(--dur, 1200ms) var(--ease-out) calc(var(--d, 0ms) + var(--stag, 0ms)); }
.motion .tw-blur { filter: blur(10px); }
.motion .on .tw-blur { filter: blur(0); transition: filter var(--dur, 1200ms) var(--ease-out) calc(var(--d, 0ms) + var(--stag, 0ms)); }
.motion .on .flash { animation: hc-flash 700ms ease calc(2300ms + var(--stag, 0ms)) 3; }

.status-in { animation: hc-in 400ms var(--ease-out); }

@keyframes hc-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes hc-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes hc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes hc-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 92, 122, 0); } 40% { box-shadow: 0 0 0 8px rgba(255, 92, 122, .35); } }
@keyframes hc-pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 255, 63, .45), 0 12px 60px rgba(212, 255, 63, .35); } 100% { box-shadow: 0 0 0 28px rgba(212, 255, 63, 0), 0 12px 60px rgba(212, 255, 63, .35); } }
@keyframes hc-spin { to { transform: rotate(360deg); } }
@keyframes hc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes hc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .play { box-shadow: 0 0 0 12px rgba(212, 255, 63, .15), 0 12px 60px rgba(212, 255, 63, .35); }
  .video-facade:hover .play, .video-facade:focus-visible .play { transform: none; }
  .btn:active { transform: none; }
}

/* ───────────── Inner pages (privacy, 404) ───────────── */
.doc-top { border-bottom: 1px solid var(--line-soft); }
.doc-top .nav { padding: 16px 0; }
.doc { width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 56px 0 96px; }
.doc h1 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(48px, 12vw, 88px); line-height: .9; margin-bottom: 16px; }
.doc h2 { font-size: 24px; font-weight: 800; font-stretch: 85%; margin: 40px 0 12px; }
.doc p, .doc li { font-size: 17px; line-height: 1.6; color: var(--text-mid); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 22px; margin: 12px 0 0; }
.doc li + li { margin-top: 6px; }
.doc .meta { font-family: var(--mono); font-size: 13px; color: var(--text-low); letter-spacing: .06em; }
.doc strong { color: #FFFFFF; }
.lost { min-height: 100svh; display: flex; flex-direction: column; background: linear-gradient(180deg, #05070F 0%, #0E0F24 45%, #2A1A33 80%, #3A2440 100%); }
.lost .doc { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.lost .doc h1 { margin: 0; }
.lost .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }