/* RedClip landing page, "Night game" (brand/BRAND.md). Mobile first; fonts are self-hosted.
   Built by brand/build.mjs: {{font:*}} placeholders become hashed font URLs. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/big-shoulders-display-900.65f2c368.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/big-shoulders-display-700.d2d55115.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/archivo-400.07f91601.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/archivo-500.ab74eca5.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/archivo-700.abada6cd.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/martian-mono-400.bb677c9c.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/martian-mono-600.e6d4bb7a.woff2") format("woff2"); }

:root {
  --night: #0a1310;
  --turf: #0f2a20;
  --turf-hi: #16402f;
  --chalk: #eef3ec;
  --chalk-dim: #a9b8ae;
  --clip: #ff3b47;
  --amber: #ffb020;
  --mint: #39e3a3;
  --glass: rgba(10, 19, 16, .74);
  --line: rgba(238, 243, 236, .14);
  --display: "Big Shoulders Display", "Archivo Narrow", Impact, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: 16px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--night); color: var(--chalk); font: 16px/1.6 var(--body); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--chalk); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .92; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--amber); color: var(--night); padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* Background: the field (canvas, drawn by landing.js) with a static fallback underneath. */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.field-fallback { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, transparent 0 78px, rgba(238,243,236,.06) 78px 80px),
    linear-gradient(180deg, var(--night) 0%, #0d2219 45%, #123526 100%); }
/* Photoreal field (WebGL, landing.js adds .field-photo): haze drifting under the lights, moved by
   the compositor only (no per-frame script), and a soft shadow so text stays clear of the paint. */
.field-haze { display: none; }
.field-photo .field-haze { display: block; position: fixed; inset: -10vh -20vw 30vh; z-index: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(ellipse 45% 30% at 25% 30%, rgba(220,235,215,.07), transparent 70%),
    radial-gradient(ellipse 40% 25% at 75% 22%, rgba(255,240,210,.06), transparent 70%),
    radial-gradient(ellipse 70% 20% at 50% 48%, rgba(200,225,205,.05), transparent 70%);
  animation: field-haze 46s ease-in-out infinite alternate; will-change: transform; }
@keyframes field-haze { from { transform: translate3d(-4vw, 0, 0) scale(1); } to { transform: translate3d(4vw, -2vh, 0) scale(1.08); } }
.haze-paused .field-haze { animation-play-state: paused; }
/* Hero scrim: a dark band behind the hero copy (full width, fading out at the bottom) so the copy
   keeps its contrast over the lit field and its paint; the field below it can then be brighter. */
.field-main::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; left: 0; right: 0; height: max(108svh, 820px);
  background: linear-gradient(180deg, rgba(10,19,16,.22) 0%, rgba(10,19,16,.48) 30%, rgba(10,19,16,.55) 55%, rgba(10,19,16,.52) 78%, rgba(10,19,16,0) 100%); }
/* Below the hero: a veil over the field behind the rest of the page, heaviest under the copy column,
   faded in where the hero scrim ends, so section copy keeps its contrast over the brighter field. */
.field-main::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: max(96svh, 740px); bottom: 0;
  background: rgba(10,19,16,.6);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16vh); mask-image: linear-gradient(180deg, transparent 0, #000 16vh); }
@media (min-width: 900px) {
  .field-main::after { background: linear-gradient(90deg, rgba(10,19,16,.18) 0%, rgba(10,19,16,.55) calc(50% - 560px), rgba(10,19,16,.55) calc(50% + 560px), rgba(10,19,16,.18) 100%); }
}
/* Copy over the field (outside cards) gets the same halo as the hero copy, so paint lines and
   numbers passing under it never cut its contrast. */
.field-main :is(p, h2, h3, li, .eyebrow, .intro), .hero .lede, .hero .eyebrow, .crumbs, .hero .invite { text-shadow: 0 1px 2px rgba(10,19,16,.95), 0 0 6px rgba(10,19,16,.9), 0 0 16px rgba(10,19,16,.85); }
.hero h1 { text-shadow: 0 2px 4px rgba(10,19,16,.8), 0 0 24px rgba(10,19,16,.75), 0 0 48px rgba(10,19,16,.6); }
.glow { position: fixed; inset: -20vh -10vw auto -10vw; height: 70vh; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.14), transparent 55%), radial-gradient(ellipse at 85% 0%, rgba(255,240,210,.10), transparent 50%); }
main, .footer { position: relative; z-index: 1; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
section { padding-block: 64px; }
.eyebrow { font: 600 11px/1.3 var(--num); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin: 0 0 14px; }
h2 { font-size: clamp(40px, 9vw, 72px); }
.intro { margin-top: 14px; max-width: 64ch; color: var(--chalk-dim); }

/* Top bar */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter) 10px;
  background: linear-gradient(180deg, rgba(10,19,16,.92), rgba(10,19,16,.55) 70%, rgba(10,19,16,0)); }
.brand { display: inline-flex; line-height: 0; border-radius: 6px; }
.wordmark { height: 34px; width: auto; display: block; }
.wordmark.small { height: 30px; }
.beta-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--amber); color: var(--night);
  font: 600 10px/1 var(--num); letter-spacing: .14em; text-transform: uppercase; }
.signin { margin-left: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 18px; border-radius: 10px; font: 700 15px/1 var(--body); text-decoration: none; border: 0; cursor: pointer; }
.btn.primary { background: var(--clip); color: var(--night); box-shadow: 0 10px 30px -10px var(--clip); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: rgba(10,19,16,.5); color: var(--chalk); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: rgba(238,243,236,.35); }
.btn.signin { min-height: 38px; padding: 9px 14px; font-size: 14px; }

/* Drive tracker */
.hud { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); right: 12px; z-index: 5; display: flex; gap: 8px; align-items: center;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 8px; font: 600 11px/1 var(--num); letter-spacing: .04em; }
.hud .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clip); box-shadow: 0 0 10px var(--clip); }
.hud .lbl { display: none; }
.hud .yd { color: var(--amber); font-variant-numeric: tabular-nums; }

/* Hero */
.hero { min-height: 92svh; display: grid; align-content: end; padding-top: 110px; padding-bottom: 48px; }
.hero h1 { font-size: clamp(60px, 16vw, 168px); }
.hero h1 .r { color: var(--clip); display: block; }
.hero .lede { margin-top: 18px; max-width: 46ch; font-size: clamp(17px, 2.4vw, 20px); color: var(--chalk-dim); }
.row { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 26px; align-items: center; }
.invite { font: 600 12px/1.3 var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-dim); }
.scorebug { margin-top: 22px; display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-self: start; background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-family: var(--num); }
.scorebug b { color: var(--amber); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.scorebug small { color: var(--chalk-dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* Ticker */
.ticker { position: relative; z-index: 1; border-block: 1px solid var(--line); background: rgba(10,19,16,.86); overflow: hidden; white-space: nowrap; }
.ticker .track { display: inline-flex; animation: tick 44s linear infinite; }
.ticker .items { display: inline-flex; gap: 40px; padding: 12px 20px; font: 400 13px/1 var(--num); }
.ticker b { color: var(--amber); font-weight: 600; }
.ticker i { font-style: normal; color: var(--mint); }
.ticker em { font-style: normal; color: var(--clip); }
.ticker:hover .track, .ticker.paused .track { animation-play-state: paused; }
.ticker-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2; min-height: 30px; min-width: 64px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--night); color: var(--chalk); font: 600 11px/1 var(--num); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  box-shadow: -18px 0 18px var(--night); touch-action: manipulation; }
.ticker-toggle:hover { border-color: rgba(238,243,236,.35); }
@keyframes tick { to { transform: translateX(-50%); } }

/* Play diagram */
.board { margin-top: 26px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); overflow: hidden; }
.board svg { display: block; width: 100%; height: auto; }
.svg-mono { font-family: var(--num); }
.svg-body { font-family: var(--body); }
#route { transition: none; }
#head, #callout { transition: opacity .3s; }
.cap { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--chalk-dim); }
.cap b { color: var(--chalk); }
.cap b.red { color: var(--clip); }
.cap-clip { display: inline-flex; align-items: center; gap: 6px; }
.board .cap-glyph { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--clip); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Playmaker: glows (and pulses twice) once its route has finished drawing. */
.playmaker { transition: filter .4s; }
.playmaker.lit { filter: drop-shadow(0 0 5px rgba(255,59,71,.85)); animation: playmaker-pulse 1.4s ease-in-out 2; }
@keyframes playmaker-pulse { 50% { filter: drop-shadow(0 0 11px rgba(255,59,71,1)); } }
.cap b.amber { color: var(--amber); }

/* Sticky phone walkthrough (mobile: phone pinned on top, steps scroll under it) */
.walk { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 18px; }
.phone-wrap { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); order: -1; z-index: 2; }
.phone { width: min(230px, 62vw); margin-inline: auto; aspect-ratio: 9 / 13; border-radius: 34px; background: #050a08; border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 8px rgba(238,243,236,.04); padding: 12px; }
.screen { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, var(--turf) 0%, var(--night) 70%); }
.screen .top { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 6px; font: 600 10px/1 var(--num); color: var(--chalk-dim); }
.screen .top span:first-child { font: 900 15px/1 var(--display); color: var(--chalk); text-transform: uppercase; }
.screen .top b { color: var(--clip); }
.card-stack { position: absolute; inset: 46px 10px 10px; }
.pcard { position: absolute; inset: 0 0 auto 0; background: rgba(238,243,236,.06); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 7px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .45s, transform .45s; }
.pcard.on { opacity: 1; transform: none; }
.pcard .k { font: 600 8.5px/1.3 var(--num); letter-spacing: .1em; text-transform: uppercase; }
.pcard .k.red { color: var(--clip); } .pcard .k.amber { color: var(--amber); } .pcard .k.mint { color: var(--mint); }
.pcard h4 { font-size: 19px; line-height: .95; }
.pcard p { font-size: 11px; color: var(--chalk-dim); line-height: 1.4; }
.pcard .big { font: 600 24px/1 var(--num); color: var(--amber); font-variant-numeric: tabular-nums; }
.pcard .meter { height: 6px; border-radius: 3px; background: rgba(238,243,236,.1); overflow: hidden; }
.pcard .meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--clip), var(--amber)); transition: width 1s .2s; }
.pcard .meter.w47 { --w: 47%; } .pcard .meter.w55 { --w: 55%; } .pcard .meter.w61 { --w: 61%; }
.pcard.on .meter i { width: var(--w); }
.pcard .chip { justify-self: start; font: 600 9px/1 var(--num); padding: 5px 7px; border-radius: 6px; background: rgba(57,227,163,.14); color: var(--mint); }
.pcard .btns { display: flex; gap: 6px; }
.pcard .btns span { flex: 1; text-align: center; font: 700 10px/1 var(--body); padding: 9px 4px; border-radius: 8px; background: var(--clip); color: var(--night); }
.pcard .btns span + span { background: transparent; border: 1px solid var(--line); color: var(--chalk); }
.steps { display: grid; gap: 50vh; padding-block: 4vh 36vh; }
.step { max-width: 46ch; opacity: .5; transition: opacity .4s; background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.step.on { opacity: 1; }
.step .num { font: 600 11px/1 var(--num); color: var(--amber); letter-spacing: .12em; }
.step h3 { font-size: clamp(30px, 7vw, 52px); margin-top: 10px; }
.step p { margin-top: 12px; color: var(--chalk-dim); }

/* Feature and assistant grids */
.grid { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.panel { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.panel h3 { font-size: 28px; }
.panel p { color: var(--chalk-dim); font-size: 15px; }
.tag { justify-self: start; font: 600 10px/1 var(--num); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; border: 1px solid currentColor; }
.tag.red { color: var(--clip); } .tag.amber { color: var(--amber); } .tag.mint { color: var(--mint); }
.note { margin-top: 18px; color: var(--chalk-dim); font-size: 14px; }
.assist-grid h3 { color: var(--chalk); }

/* Beta */
.beta-card { padding: 24px; border-radius: 16px; border: 1px solid var(--clip); background: linear-gradient(135deg, rgba(255,59,71,.16), rgba(10,19,16,.88)); display: grid; gap: 12px; }
.beta-card h2 { font-size: clamp(36px, 8vw, 60px); }
.beta-card p:not(.eyebrow):not(.invite) { color: var(--chalk-dim); max-width: 64ch; }
.beta-card .row { margin-top: 8px; }

/* Waitlist form */
.waitlist { display: grid; gap: 16px; margin-top: 8px; max-width: 560px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field legend { font: 600 11px/1.3 var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); padding: 0; }
.field .opt { color: var(--chalk-dim); letter-spacing: .06em; }
.waitlist input[type="email"], .waitlist input[type="text"] { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(238,243,236,.3);
  background: rgba(10,19,16,.85); color: var(--chalk); font: 16px/1.3 var(--body); }
.waitlist input[type="email"]:focus-visible, .waitlist input[type="text"]:focus-visible, .waitlist input[type="radio"]:focus-visible, .waitlist input[type="checkbox"]:focus-visible, .waitlist button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.waitlist-slot:empty { display: none; }
/* Name story: short blurb on the home page, full story at /story. */
.name-strip .intro a, .strategy .intro a { color: var(--chalk); }
/* Four strategy cards read as 2x2, never 3+1. */
.strategy .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
@media (min-width: 1100px) { .strategy .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story .lede { margin-top: 6px; max-width: 46ch; font-size: clamp(17px, 2.4vw, 20px); color: var(--chalk-dim); }
.story .summary p { color: var(--chalk); font-size: 18px; }
.story-cta { margin-top: 40px; }
.products { display: grid; gap: 8px; }
.products legend { margin-bottom: 6px; }
.products label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10,19,16,.6); cursor: pointer; font-size: 15px; }
.products label:has(input:checked) { border-color: var(--amber); }
.platforms legend { margin-bottom: 6px; width: 100%; }
.platforms label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10,19,16,.6); cursor: pointer; font-size: 15px; }
.platforms label:has(input:checked) { border-color: var(--amber); }
.waitlist input[type="radio"], .waitlist input[type="checkbox"] { accent-color: var(--clip); width: 18px; height: 18px; margin: 0; flex: none; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--chalk-dim); cursor: pointer; }
.consent input { margin-top: 3px !important; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.waitlist .row { margin-top: 0; }
.form-status { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10,19,16,.7); font-size: 15px; }
.form-status.is-ok { border-color: var(--mint); color: var(--chalk); }
.form-status.is-error { border-color: var(--amber); color: var(--chalk); }
.form-note { font-size: 13px; color: var(--chalk-dim); }

/* Privacy policy and terms (static, long text) */
.legal { position: relative; z-index: 1; max-width: 760px; padding-top: 110px; padding-bottom: 64px; }
.legal h1 { font-size: clamp(44px, 10vw, 84px); margin-bottom: 10px; }
.legal h2 { font-size: clamp(28px, 6vw, 38px); margin: 44px 0 12px; }
.legal h3 { font-size: 22px; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--chalk-dim); }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; margin-top: 10px; }
.legal strong { color: var(--chalk); }
.legal .meta { font: 600 12px/1.4 var(--num); letter-spacing: .06em; color: var(--chalk-dim); text-transform: uppercase; }
.legal .summary { margin-top: 22px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); }
.legal .summary ul { margin-top: 8px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--chalk-dim); }
.legal th { color: var(--chalk); font: 600 11px/1.3 var(--num); letter-spacing: .08em; text-transform: uppercase; }
.legal .table-wrap { overflow-x: auto; }
.legal .todo { color: var(--amber); }
.draft-banner { position: relative; z-index: 2; margin: 0 0 22px; padding: 12px 16px; border-radius: 10px; border: 2px solid var(--amber); background: rgba(255,176,32,.12); color: var(--chalk); font: 600 13px/1.4 var(--num); letter-spacing: .04em; }
.draft-banner b { color: var(--amber); text-transform: uppercase; letter-spacing: .1em; }
.foot-links a { margin-right: 2px; }

/* Footer */
.footer { padding-block: 40px 88px; color: var(--chalk-dim); font-size: 13px; border-top: 1px solid var(--line); background: rgba(10,19,16,.9); }
.footer .wrap { display: grid; gap: 10px; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.beta-line { color: var(--chalk); font-size: 14px; }
.footer a { color: var(--chalk); }

/* 404 */
.notfound { position: relative; z-index: 1; min-height: 80svh; display: grid; align-content: center; gap: 10px; padding-top: 100px; }
.notfound h1 { font-size: clamp(48px, 11vw, 112px); }
.notfound .lede { color: var(--chalk-dim); max-width: 46ch; font-size: 18px; }
.notfound-page .footer { padding-block: 28px; }

@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud .lbl { display: inline; }
  .beta-card { padding: 32px; }
}
@media (min-width: 900px) {
  section { padding-block: 80px; }
  .walk { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; align-items: start; }
  .phone-wrap { order: 0; top: calc(env(safe-area-inset-top, 0px) + 90px); }
  .phone { width: min(320px, 100%); aspect-ratio: 9 / 18.5; border-radius: 40px; padding: 14px; }
  .screen { border-radius: 28px; }
  .card-stack { inset: 52px 12px 12px; }
  .pcard { padding: 14px; gap: 8px; }
  .pcard h4 { font-size: 24px; }
  .pcard p { font-size: 12.5px; }
  .pcard .big { font-size: 30px; }
  .pcard .k { font-size: 9px; }
  .steps { gap: 40vh; padding-block: 10vh 30vh; }
  .step { background: none; border: 0; padding: 0; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .assist-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .wordmark { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker { white-space: normal; }
  .ticker .track { animation: none; display: block; }
  .ticker .items { flex-wrap: wrap; gap: 10px 28px; line-height: 1.5; }
  .ticker .items[aria-hidden="true"] { display: none; }
  .ticker-toggle { display: none; }
  .pcard, .step, .pcard .meter i, #head, #callout, .playmaker { transition: none; }
  .playmaker.lit { animation: none; }
  .field-photo .field-haze { animation: none; }
}

/* ---- Home page (/): sport-neutral playbook texture instead of the football field ---------- */
.playbook-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(255,59,71,.10), transparent 45%),
    url("/assets/playbook.ce120806.svg") 0 0 / 160px 160px repeat,
    linear-gradient(180deg, var(--night) 0%, #0c1c16 60%, #0f2a20 100%); }
.crumbs { margin: 0 0 14px; font-size: 14px; color: var(--chalk-dim); }
.crumbs a { color: var(--chalk); }
.home-hero { min-height: auto; padding-top: 120px; display: grid; gap: 24px; align-content: center; }
.home-hero h1 { font-size: clamp(56px, 13vw, 132px); }
.home-play { width: min(320px, 80vw); height: auto; justify-self: center; }
.home-play__route { stroke-dasharray: 260; stroke-dashoffset: 260; animation: home-route 1.4s cubic-bezier(.6,.1,.2,1) .4s forwards; }
.home-play__head { opacity: 0; animation: home-head .3s ease-out 1.75s forwards; }
.home-play__clip { animation: home-clip 1.4s ease-in-out 1.9s 2; }
@keyframes home-route { to { stroke-dashoffset: 0; } }
@keyframes home-head { to { opacity: 1; } }
@keyframes home-clip { 50% { filter: drop-shadow(0 0 10px rgba(255,59,71,.95)); } }
.product { gap: 12px; }
.product h3 { font-size: 34px; }
.product--live { border-color: rgba(57,227,163,.45); }
.product__cta { justify-self: start; margin-top: 4px; }
.assist-strip .intro a { color: var(--chalk); }
.assist-strip .intro b { color: var(--chalk); font-weight: 700; }
/* Waitlist form slot: empty until the waitlist form is added (docs/LANDING.md). */
.waitlist-slot:empty { display: none; }
@media (min-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) 340px; min-height: 86svh; }
  .home-hero h1 { font-size: clamp(64px, 8vw, 108px); }
  .home-play { width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-play__route { animation: none; stroke-dashoffset: 0; }
  .home-play__head { animation: none; opacity: 1; }
  .home-play__clip { animation: none; filter: drop-shadow(0 0 6px rgba(255,59,71,.8)); }
}

/* Waitlist: intent, beta choice and locale (2026-10-08). */
.intents { display: grid; gap: 8px; }
.intents legend { margin-bottom: 6px; }
.intents label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10,19,16,.6); cursor: pointer; font-size: 15px; }
.intents label:has(input:checked) { border-color: var(--amber); }
.intents label .opt { display: block; font-size: 13px; }
.waitlist select { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(238,243,236,.3); background: rgba(10,19,16,.8); color: var(--chalk); font: 16px/1.3 var(--body); }
.waitlist select:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.waitlist [hidden] { display: none !important; }