/* cxrtex.com: the page is a match. Warm asphalt and bone, one ignition yellow for the primary
   action and the turn; Archivo condensed for the scoreboard voice, Geist for reading, Geist Mono
   for the clock and labels, Instrument Serif italic only for what the coach says. Sections carry
   game-clock stamps in a left rail; the hero plays a real game as you scroll. */
/* The condensed heavy cut as a fixed file: it looks the same in every engine, variable fonts or not. */
@font-face { font-family: 'Archivo Display'; src: url('/assets/fonts/archivo-display-800.woff2') format('woff2'); font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-latin-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --surface: #141415;
  --raised: #1d1d1f;
  --line: #2a2a2c;
  --bone: #f1eee7;
  --muted: #8e8a83;
  --go: #f5d90a;
  --gain: #f5d90a;
  --loss: #ef6a4a;
  --blue: #3d8bff;
  --orange: #ff9f2e;
  --display: 'Archivo Display', 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --text: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', 'Cascadia Mono', ui-monospace, monospace;
  --voice: 'Instrument Serif', 'Times New Roman', serif;
  --snap: cubic-bezier(.2, .9, .1, 1);
  --clutch: cubic-bezier(.7, 0, .2, 1);
  --edge: clamp(20px, 5vw, 80px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px; --s5: 32px; --s6: 52px; --s7: 84px; --s8: 136px; --s9: 220px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--bone); font: 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.skip { position: fixed; left: var(--s3); top: -60px; z-index: 50; background: var(--go); color: var(--bg); padding: var(--s2) var(--s3); font-weight: 600; text-decoration: none; transition: top 120ms var(--snap); }
.skip:focus { top: var(--s3); }

.label { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hl { color: var(--go); }
.up { color: var(--gain); font-weight: 600; }
.down { color: var(--loss); font-weight: 600; }
.fine { font: 12px/1.5 var(--mono); color: var(--muted); letter-spacing: .02em; }
h1, h2 { font-family: var(--display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
h3 { font-family: var(--display); font-stretch: 75%; font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.3vw, 34px); line-height: .98; letter-spacing: 0; }

/* Buttons: sharp, sporty, yellow only for the main action. */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 2px; font: 700 15px/1 var(--display); font-stretch: 85%; font-family: 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: transform 120ms var(--snap), box-shadow 120ms var(--snap); white-space: nowrap; }
.btn-go { background: var(--go); color: var(--bg); }
.btn-go:hover { transform: translateY(-2px); box-shadow: 0 0 0 5px rgba(245, 217, 10, .16); }
.btn-go:active { transform: none; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 64px; padding: 0 30px; font-size: 18px; }

/* Navigation */
.nav { position: fixed; inset: 0 0 auto; z-index: 30; transition: background 240ms var(--clutch), border-color 240ms var(--clutch); border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(11, 11, 12, .92); border-bottom-color: var(--line); }
.nav-row { display: flex; align-items: center; gap: var(--s5); height: 60px; padding: 0 var(--edge); }
.mark { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--display); font-stretch: 125%; font-family: 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; }
.mark.small { font-size: 12px; gap: 8px; }
.nav nav { display: flex; gap: var(--s4); margin-left: auto; }
.nav nav a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color 120ms; }
.nav nav a:hover { color: var(--bone); }
.nav-clock { visibility: hidden; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 4.4em; }
.nav.past .nav-clock { visibility: visible; }
.nav-clock i { width: 6px; height: 6px; background: var(--muted); }

/* 5:00 The tape (static by default; .live pins it and plays it with the scroll) */
.tape { position: relative; }
.tape-stage { min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto auto auto; column-gap: var(--s4); padding: 84px var(--edge) var(--s6); overflow: hidden; }
/* The game itself, behind the type: dark enough that the words stay first. */
.tape-stage { position: relative; }
.tape-stage > *:not(.hero3d) { position: relative; z-index: 1; }
.hero3d { position: absolute; inset: 0 0 auto; height: 70%; z-index: 0; pointer-events: none; background: url('/assets/hero-poster.webp') center / cover no-repeat; }
.hero3d-stage { width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--clutch); }
.hero3d.on .hero3d-stage { opacity: 1; }
.hero3d::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .8) 38%, rgba(11, 11, 12, .1) 62%, rgba(11, 11, 12, .1) 72%, rgba(11, 11, 12, .72) 100%),
  linear-gradient(180deg, rgba(11, 11, 12, .5) 0%, transparent 16%, transparent 84%, var(--bg) 100%); }
.tape-top { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--s4); align-items: baseline; }
.skip-tape { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.skip-tape:hover { color: var(--bone); }
.tape-head { grid-column: 1 / span 7; grid-row: 2; align-self: center; display: grid; gap: var(--s5); padding-top: var(--s6); position: relative; z-index: 2; }
h1 { font-size: clamp(40px, min(6.3vw, 12vh), 124px); line-height: .86; white-space: nowrap; }
.voice { font: italic 400 clamp(22px, 2.2vw, 32px)/1.3 var(--voice); max-width: 24ch; color: var(--bone); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.scoreboard { grid-column: 7 / -1; grid-row: 2; justify-self: end; align-self: center; text-align: right; margin-right: calc(var(--edge) * -.35); }
.clock { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: clamp(90px, min(25vw, 34vh), 400px); line-height: .78; letter-spacing: -.02em; color: var(--bone); font-variant-numeric: tabular-nums; }
.score { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--s3); margin-top: var(--s3); padding-right: calc(var(--edge) * .35); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.score b { font: 800 clamp(30px, 3.4vw, 52px)/1 var(--display); font-stretch: 62%; color: var(--bone); letter-spacing: .02em; }
.tape-line { grid-column: 1 / -1; grid-row: 3; position: relative; height: clamp(170px, 30vh, 320px); margin: var(--s5) calc(var(--edge) * -1) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tape-line canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.axis { position: absolute; left: var(--edge); right: var(--edge); bottom: var(--s2); display: flex; flex-wrap: wrap; gap: 4px var(--s3); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); z-index: 1; }
.axis .num { color: var(--bone); }
.axis .key { display: inline-flex; align-items: center; gap: 6px; }
.axis .key i { width: 3px; height: 10px; background: var(--go); }
.axis .key i.them { background: var(--loss); }
.axis .key i.turn { background: var(--bone); }
.axis .next { white-space: nowrap; }
.call { position: absolute; top: var(--s5); width: min(400px, 80vw); padding: var(--s3) var(--s4); background: var(--bg); border: 1px solid var(--line); z-index: 3; transition: opacity 240ms var(--clutch); }
.call-stamp { font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-bottom: var(--s1); }
.call-text { font: italic 400 clamp(20px, 1.9vw, 26px)/1.3 var(--voice); }
.scroll-hint { position: absolute; right: var(--edge); top: var(--s5); transition: opacity 240ms var(--clutch); }
.tape-moments { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); padding-top: var(--s5); font: italic 400 21px/1.3 var(--voice); }
.tape-moments .num { display: block; font: 500 12px/1.4 var(--mono); font-style: normal; color: var(--muted); margin-bottom: var(--s2); letter-spacing: .04em; }
.full-time { grid-column: 1 / -1; grid-row: 5; padding-top: var(--s5); font: italic 400 clamp(24px, 2.4vw, 34px)/1.3 var(--voice); }
.full-time span { font: 800 1.2em/1 var(--display); font-style: normal; font-stretch: 62%; text-transform: uppercase; color: var(--go); margin-right: .3em; }
.scroll-hint { display: none; }

.tape.live { height: 330vh; }
.tape.live .tape-stage { position: sticky; top: 0; height: 100svh; min-height: 0; grid-template-rows: auto auto minmax(32vh, 1fr); padding-bottom: 0; }
.tape.live h1 { font-size: clamp(44px, min(6.4vw, 12.5vh), 118px); }
.tape.live .tape-head { align-self: start; padding-top: var(--s5); gap: var(--s4); }
.tape.live .scoreboard { align-self: start; padding-top: var(--s4); }
.tape.live .clock { font-size: clamp(90px, min(19vw, 29vh), 320px); }
.tape.live .tape-line { height: auto; margin-bottom: 0; border-bottom: 0; }
.tape.live .tape-moments { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tape.live .scroll-hint { display: block; }
.tape.live .full-time { position: absolute; left: var(--edge); top: var(--s5); right: auto; z-index: 3; background: var(--bg); padding: var(--s3) var(--s4); border: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--snap), transform 360ms var(--snap); pointer-events: none; }
.tape.live.ended .full-time { opacity: 1; transform: none; }
.tape.live.started .scroll-hint { opacity: 0; }

/* Blocks with a game-clock rail */
.demo { scroll-margin-top: 60px; }
.demo .body { gap: var(--s7); }
.demo .lead { max-width: 58ch; color: var(--muted); }
.demo-frame { grid-column: 1 / -1; margin-top: var(--s6); border: 1px solid var(--line); background: var(--surface); height: min(88vh, 880px); }
.demo-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.demo-open { display: none; }
.btn-line { background: var(--bg); color: var(--bone); border: 1px solid var(--muted); }
.btn-line:hover { border-color: var(--bone); }
.block { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 10fr); column-gap: var(--s5); padding: var(--s8) var(--edge); border-top: 1px solid var(--line); }
.rail { display: flex; flex-direction: column; gap: var(--s2); align-self: start; position: sticky; top: 92px; }
.stamp { font: 800 clamp(44px, 4.4vw, 72px)/.85 var(--display); font-stretch: 62%; color: var(--bone); letter-spacing: -.01em; }
.body { display: grid; gap: var(--s7); min-width: 0; }
h2 { font-size: clamp(48px, 7.2vw, 124px); line-height: .86; }
.lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); max-width: 54ch; margin-top: calc(var(--s7) * -.55); }

.zero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--s5); }
.zero-n { font: 900 clamp(200px, 27vw, 440px)/.74 var(--display); font-stretch: 62%; color: var(--bone); margin-bottom: -.04em; }
.zero p { font-size: clamp(19px, 1.7vw, 24px); max-width: 26ch; color: var(--muted); padding-bottom: var(--s3); }
.zero b { color: var(--bone); font-weight: 600; }

.heat-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); align-items: end; }
.heat-copy { display: grid; gap: var(--s4); padding-bottom: var(--s7); }
.heat-copy p { color: var(--muted); max-width: 34ch; }
.heat { position: relative; aspect-ratio: 1000 / 683; max-width: 100%; background: var(--surface); margin-right: calc(var(--edge) * -1); }
.heat canvas, .heat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.heat figcaption { position: absolute; left: var(--s3); bottom: calc(var(--s5) * -1); }
.field path, .field line, .field circle { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.field .mid { stroke: var(--line); }
.field .b { stroke: var(--blue); }
.field .o { stroke: var(--orange); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats > div { padding: var(--s4) var(--s4) var(--s4) 0; display: grid; gap: var(--s1); }
.stats > div + div { padding-left: var(--s4); border-left: 1px solid var(--line); }
.stats dt { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stats dd { font: 800 clamp(48px, 6vw, 96px)/.9 var(--display); font-stretch: 62%; }
.stats-note { color: var(--muted); max-width: 52ch; margin-top: calc(var(--s7) * -.7); }

.keys-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--s5); align-items: start; }
.keys { display: grid; gap: var(--s3); }
.keys li { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: 15px; }
kbd { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 3px; font: 500 12px var(--mono); color: var(--bone); background: var(--surface); }
.keys li kbd:last-of-type { margin-right: var(--s2); }
.keys-row > p { color: var(--muted); }
.also { color: var(--muted); max-width: 70ch; padding-top: var(--s5); border-top: 1px solid var(--line); }
.also b { color: var(--bone); font-weight: 600; }

/* 2:53 The coach: a different surface, so the page changes key. */
.coach { background: var(--surface); }
.quotes { display: grid; gap: var(--s6); }
.quotes figure { display: grid; gap: var(--s3); max-width: 40ch; }
.quotes figure:nth-child(2) { margin-left: 18%; }
.quotes figure:nth-child(3) { margin-left: 36%; }
.quotes blockquote { font: italic 400 clamp(26px, 2.8vw, 42px)/1.15 var(--voice); }
.quotes figcaption { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.how li { padding: var(--s4) 0; border-top: 1px solid var(--line); color: var(--muted); }
.how b { display: block; color: var(--bone); font: 700 20px/1.1 var(--display); font-stretch: 75%; font-family: 'Archivo', sans-serif; text-transform: uppercase; margin-bottom: var(--s2); letter-spacing: .01em; }

/* 1:00 Plans: a results sheet, not two cards. */
.plans h2 { font-size: clamp(40px, 4.6vw, 80px); }
.table-wrap { overflow-x: auto; margin-top: calc(var(--s7) * -.4); }
.sheet { width: 100%; border-collapse: collapse; min-width: 560px; }
.sheet caption { text-align: left; padding-bottom: var(--s3); }
.sheet thead th { font: 800 clamp(30px, 3vw, 46px)/.9 var(--display); font-stretch: 62%; text-transform: uppercase; text-align: center; padding: var(--s4) var(--s3); width: 18%; border-top: 4px solid var(--line); vertical-align: bottom; }
.sheet thead th:first-child { border-top-color: transparent; width: auto; }
.sheet thead th.pro { border-top-color: var(--go); }
.sheet thead small { display: block; margin-top: var(--s2); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sheet tbody th { text-align: left; font-weight: 400; font-size: 18px; padding: var(--s4) var(--s4) var(--s4) 0; }
.sheet tbody tr { border-top: 1px solid var(--line); }
.sheet tbody tr:last-child { border-bottom: 1px solid var(--line); }
.sheet td { text-align: center; }
.yes, .no { display: inline-block; width: 12px; height: 12px; vertical-align: middle; }
.yes { background: var(--bone); }
.yes.adds { background: var(--go); }
.no { width: 14px; height: 2px; background: var(--line); }
.next { color: var(--muted); max-width: 64ch; }
.next .label { color: var(--go); margin-right: var(--s2); }

/* 0:30 FAQ */
.qs { display: grid; max-width: 860px; margin-top: calc(var(--s7) * -.4); }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
.faq h2 { font-size: clamp(40px, 4.4vw, 72px); }
summary { list-style: none; cursor: pointer; padding: var(--s4) 40px var(--s4) 0; position: relative; font-size: 19px; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--mono); color: var(--muted); transition: transform 240ms var(--snap); }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { color: var(--muted); padding: 0 40px var(--s5) 0; max-width: 64ch; }

/* 0:00 Full time */
.final { padding: var(--s9) var(--edge) var(--s8); border-top: 1px solid var(--line); display: grid; gap: var(--s5); justify-items: start; }
.final h2 { font-size: clamp(64px, 11.5vw, 208px); line-height: .84; margin-bottom: var(--s3); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding: var(--s5) var(--edge) calc(var(--s5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font: 12px/1.5 var(--mono); color: var(--muted); }

.missing { min-height: 100svh; align-content: center; border-top: 0; }
.missing h1 { font-size: clamp(96px, 22vw, 360px); line-height: .8; }

/* Entrances: a short rise, only below the first screen, only with script. */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--snap), transform 600ms var(--snap); }
.js .rise.in { opacity: 1; transform: none; }

@media (max-height: 760px) and (min-width: 721px) {
  .tape.live .voice { font-size: 20px; max-width: none; }
  .tape.live .tape-head { padding-top: var(--s3); gap: var(--s3); }
  .tape-stage { padding-top: 72px; }
}
@media (max-height: 640px) {
  .tape.live .voice { display: none; }
}

@media (max-width: 1000px) {
  .tape-head { grid-column: 1 / -1; }
  .scoreboard { grid-column: 1 / -1; grid-row: 3; justify-self: end; margin-top: var(--s4); }
  .tape-line { grid-row: 4; }
  .tape-moments { grid-row: 5; }
  .full-time { grid-row: 6; }
  .tape.live .tape-stage { grid-template-rows: auto auto auto minmax(30vh, 1fr); }
  .tape.live .scoreboard { display: flex; align-items: baseline; gap: var(--s4); justify-self: stretch; justify-content: space-between; flex-direction: row-reverse; margin-right: 0; padding-top: var(--s3); }
  .tape.live .score { padding-right: 0; }
  .block { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
  .rail { position: static; flex-direction: row; align-items: baseline; gap: var(--s3); }
  .rail .label { display: none; }
  .demo-frame { margin-top: var(--s4); }
  .heat-row, .keys-row { grid-template-columns: minmax(0, 1fr); }
  .heat-copy { padding-bottom: 0; }
  .heat { margin-right: 0; }
  .how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .nav nav { display: none; }
  .nav-clock { margin-left: auto; }
  .nav-row { gap: var(--s3); }
  .tape-stage { padding-top: 76px; }
  .tape-head { gap: var(--s4); padding-top: var(--s4); }
  .clock { font-size: 40vw; }
  .tape-line { height: 24vh; min-height: 150px; }
  .tape.live { height: 260vh; }
  .tape-moments { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .tape.live h1 { font-size: clamp(44px, 13vw, 64px); }
  .tape.live .clock { font-size: 26vw; }
  .tape.live .tape-head .fine { display: none; }
  .tape.live .voice { font-size: 19px; max-width: none; }
  .tape.live .tape-stage { grid-template-rows: auto auto auto minmax(38vh, 1fr); }
  .tape.live .full-time { right: var(--edge); }
  .block { padding-block: var(--s7); }
  .body { gap: var(--s6); }
  .zero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .quotes figure:nth-child(2) { margin-left: 8%; }
  .quotes figure:nth-child(3) { margin-left: 16%; }
  .sheet { min-width: 0; }
  .sheet thead th { width: 22%; padding-inline: var(--s1); }
  .sheet tbody th { font-size: 15px; }
  .final { padding-block: var(--s8) var(--s7); }
}
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
  .btn, .call, .full-time { transition: none; }
}

/* On a phone the demo gets the whole screen, not a window inside the page. */
@media (max-width: 760px) {
  .demo-frame { height: auto; border: 0; background: none; }
  .demo-frame iframe { display: none; }
  .demo-open { display: grid; justify-items: center; gap: var(--s4); text-decoration: none; }
  .demo-open img { width: min(100%, 300px); height: auto; border: 1px solid var(--line); }
  .demo-open .btn { width: 100%; justify-content: center; }
}

/* A phone: the whole hero fits one screen, whatever the browser's bars leave of it. The line takes
   what the words don't, so it is always there to play. */
@media (max-width: 720px) {
  h1, .tape.live h1 { white-space: normal; text-wrap: wrap; font-size: min(11.6vw, 6.4svh); line-height: .9; }
  h1 br { display: none; }
  h1 .hl { display: block; }
  .tape-top { display: none; }
  .tape-stage { padding-top: 68px; }
  .tape.live .tape-stage { grid-template-rows: auto auto minmax(0, 1fr); row-gap: var(--s3); }
  .tape.live .tape-head { grid-row: 1; padding-top: 0; gap: var(--s3); }
  .tape.live .voice { font-size: min(18px, 2.7svh); line-height: 1.25; }
  .cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1); }
  .cta .btn { height: 46px; padding: 0 12px; font-size: 13px; gap: 8px; justify-content: center; white-space: nowrap; }
  .tape.live .scoreboard { grid-row: 2; padding-top: 0; }
  .tape.live .clock { font-size: min(24vw, 10svh); }
  .score b { font-size: min(9vw, 4.6svh); }
  .tape.live .tape-line { grid-row: 3; margin-top: 0; min-height: 0; }
  .axis { bottom: var(--s1); font-size: 10px; letter-spacing: .06em; gap: 2px var(--s2); }
  .axis .key { display: none; }
  .scroll-hint { top: var(--s2); }
  .tape.live .full-time { top: var(--s2); padding: var(--s2) var(--s3); }
  .hero3d { inset: auto 0 0; height: 66%; background-image: url('/assets/hero-poster-phone.webp'); background-position: center 62%; background-size: 118% auto; }
  .hero3d::after { background: linear-gradient(180deg, var(--bg) 0%, rgba(11, 11, 12, .3) 34%, rgba(11, 11, 12, .3) 70%, var(--bg) 100%); }
  .nav.solid { background: var(--bg); }
  h2 + .lead { margin-top: var(--s2); }
  .stats-note { margin-top: var(--s3); }
}
@media (max-width: 374px) {
  .cta .btn { font-size: 12px; padding: 0 9px; }
  .cta .btn svg { display: none; }
}