/* Landing page styles. Dark theme only. Tokens first, then base, layout, components.
   Ratios used (see report): text 16.1/15.1/13.8, muted 8.8/8.2/7.6, brand-text 7.3/6.8/6.2,
   steel 9.6/8.9/8.2 (bg/surface/raised), text-on-brand on brand 4.57. */

@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
}

:root {
  --bg: #0e0f16;
  --surface: #151722;
  --raised: #1c1f2d;
  --border: #2a2e40;
  --field-border: #6b7390;          /* form controls and outlined buttons: >= 3:1 on bg, surface and raised */
  --text: #e9ecf1;
  --text-muted: #a9b0c3;
  --text-on-brand: #f7f9ff;
  --brand: #0367fd;
  --brand-hover: #035be5;
  --brand-text: #699ffd;
  --steel: #5ec4e6;
  --warn: #f2b866;
  --shadow: rgba(5, 6, 10, 0.7);    /* bg-toned, never pure black */


  /* the violet half-glow shared by the bottom of #idea and the top of #races (same size on both sides of the join) */
  --vglow-w: 440px; --vglow-h: 240px; --cglow-w: 400px; --cglow-h: 260px;

  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px; --r5: 28px;
  --gutter: 16px;
  --hdr: 73px;                      /* home header: 56 px bar + 16 px track band + 1 px border */
  --font: "Montserrat Variable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--brand-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 3px; border-radius: var(--r1); }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 641px) { :root { --hdr: 77px; } }  /* 54 px bar + 22 px band + 1 px border */
@media (min-width: 768px) { :root { --gutter: 28px; --vglow-w: 720px; --vglow-h: 420px; --cglow-w: 640px; --cglow-h: 460px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

.skip {
  position: absolute; left: var(--gutter); top: -120px; z-index: 100;
  background: var(--text); color: var(--bg); font-weight: 700; text-decoration: none;
  padding: 12px 18px; border-radius: var(--r2);
}
.skip:focus { top: 10px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
.site-header-bar { display: flex; align-items: center; height: 56px; }
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1;
  color: var(--text); text-decoration: none;
}
.wm-b { color: var(--brand-text); }
.wordmark-sm { font-size: 1.375rem; }
/* ---------- type ---------- */
.eyebrow {
  margin-bottom: 12px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-text);
}
h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.3vw, 3rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.028em;
  text-wrap: balance;
}
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.section-intro { margin-top: 14px; max-width: 60ch; color: var(--text-muted); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: clip; isolation: isolate; padding: 20px 0 56px; }
/* layered glows (blue, violet, cyan, a touch of coral) plus a faint track grid that fades out toward the left */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 100% 0%, rgba(3, 103, 253, 0.42), transparent 70%),
    radial-gradient(50% 36% at 82% 62%, rgba(150, 70, 255, 0.3), transparent 100%),
    radial-gradient(45% 30% at 0% 70%, rgba(45, 212, 200, 0.2), transparent 100%),
    radial-gradient(30% 30% at 38% 0%, rgba(255, 127, 92, 0.08), transparent 75%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(105, 159, 253, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 159, 253, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 70% at 78% 20%, #000, transparent 100%);
  mask-image: radial-gradient(75% 70% at 78% 20%, #000, transparent 100%);
}
.hero-grid { position: relative; display: grid; gap: 32px; }
.hero-copy { min-width: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 5px 12px 5px 10px;
  background: var(--raised); border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--text);
}
.pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-text); }
.h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 800; line-height: 1.03; letter-spacing: -0.035em;
  text-wrap: balance;
  margin-bottom: 14px;
}
.h1-b { color: var(--brand-text); }
.lead {
  max-width: 52ch; margin-bottom: 22px;
  font-size: 1rem; line-height: 1.5; color: var(--text-muted);
}
.signup-wrap { max-width: 520px; }
.socialline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 14px; font-size: 0.9375rem; color: var(--text-muted); }
.sl-label { flex-basis: 100%; }
.socialline a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.hero-visual { display: none; }
/* 768 and up: two columns with a smaller mascot; 960 and up: the large version. */
@media (min-width: 768px) {
  .hero { padding: 40px 0 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr); gap: 24px; align-items: center; }
  .h1 { font-size: 2.75rem; }
  .hero-visual {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 460px;
  }
  .glow {
    position: absolute; width: 360px; height: 360px; left: 50%; top: 46%; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(3, 103, 253, 0.55), rgba(3, 103, 253, 0.18) 58%, transparent 74%);
  }
  .hero-mascot { position: relative; height: clamp(340px, 46vw, 440px); width: auto; }
  .floor {
    position: relative; width: 150px; height: 20px; margin-top: -10px;
    background: radial-gradient(closest-side, var(--shadow), transparent);
  }
}
@media (min-width: 960px) {
  .hero { padding: 56px 0 96px; }
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; }
  .h1 { font-size: clamp(3rem, 1.5rem + 2.6vw, 3.75rem); margin-bottom: 18px; }
  .lead { font-size: 1.125rem; line-height: 1.6; margin-bottom: 28px; }
  .hero-visual { min-height: 560px; }
  .glow { width: 520px; height: 520px; }
  .hero-mascot { height: clamp(440px, 66vh, 590px); }
  .floor { width: 220px; height: 26px; margin-top: -14px; }
}

/* ---------- signup form ---------- */
.field { margin-bottom: 14px; }
.label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; }
.input {
  display: block; width: 100%; height: 52px; padding: 0 16px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--field-border); border-radius: var(--r2);
  font-size: 1.0625rem;
  transition: border-color 0.15s, background-color 0.15s;
}
@media (hover: hover) and (pointer: fine) { .input:hover { background: var(--raised); } }
.input:focus-visible { border-color: var(--brand-text); outline-offset: 2px; border-radius: var(--r2); }
.input[aria-invalid="true"], .check input[aria-invalid="true"] { border-color: var(--warn); }
.hint { margin-top: 6px; font-size: 0.875rem; line-height: 1.4; color: var(--text-muted); }

.checks { margin-bottom: 12px; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 7px 0; cursor: pointer; }
.check input {
  -webkit-appearance: none; appearance: none;
  flex: none; display: grid; place-content: center;
  width: 24px; height: 24px; margin: 0; cursor: pointer;
  background: var(--bg); border: 2px solid var(--field-border); border-radius: var(--r1);
  transition: background-color 0.12s, border-color 0.12s;
}
.check input::after {
  content: ""; width: 6px; height: 12px; margin-top: -2px;
  border: solid var(--bg); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transition: transform 0.12s;
}
.check input:checked { background: var(--brand-text); border-color: var(--brand-text); }
.check input:checked::after { transform: rotate(45deg) scale(1); }
.check-text { font-size: 0.9375rem; line-height: 1.45; }
.req { margin-left: 3px; font-weight: 800; color: var(--brand-text); }
.req-note { margin: 2px 0 12px; font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }
.req-note .req { margin-left: 0; }
/* The launch consent: one quiet sentence directly above the button (pressing the button is the consent). */
.consent-note { margin: 0 0 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 24px; border: 0; border-radius: var(--r3);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.005em; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { width: 100%; min-height: 52px; background: var(--brand); color: var(--text-on-brand); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--brand-hover); } }
.btn-primary[disabled] { opacity: 0.75; cursor: progress; }
.btn-secondary {
  width: 100%; min-height: 48px;
  background: transparent; color: var(--text); border: 1.5px solid var(--field-border);
}
@media (hover: hover) and (pointer: fine) { .btn-secondary:hover { background: var(--raised); border-color: var(--text-muted); } }
.arrow { flex: none; }

.status { margin-top: 12px; font-size: 0.9375rem; line-height: 1.5; }
.status:empty { display: none; }
.status:focus { outline: none; }
.status[data-state] {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; background: var(--raised); border: 1px solid var(--border); border-radius: var(--r2);
}
.status[data-state]::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; }
.status[data-state="error"]::before {
  content: "!" / ""; display: grid; place-items: center;
  background: var(--warn); color: var(--bg); font-weight: 800; font-size: 0.8125rem;
}
.status[data-state="success"] { padding: 16px; }
.status[data-state="success"]::before { background: var(--brand-text); }
.status[data-state="success"]::after {
  content: ""; position: absolute; left: 25px; top: 23px; width: 5px; height: 10px;
  border: solid var(--bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.privacy-note { margin-top: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }

/* ---------- contact form ---------- */
.contact-form { margin-top: 32px; max-width: 600px; }
.contact-form .field { margin-bottom: 18px; }
.textarea { height: auto; min-height: 168px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; pointer-events: none;
  border: solid var(--text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.select option { background: var(--surface); color: var(--text); }
.hint-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.counter { font-variant-numeric: tabular-nums; }
.contact-form .btn-primary { margin-top: 6px; }
@media (min-width: 640px) { .contact-form .btn-primary { width: auto; min-width: 240px; } }
.contact-ormail { margin-top: 28px; color: var(--text-muted); }
.contact-ormail a { overflow-wrap: anywhere; }

/* ---------- sections ---------- */
.section { position: relative; overflow: clip; padding: 72px 0; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .section { padding: 88px 0; } }
@media (min-width: 960px) { .section { padding: 104px 0; } }

.split { display: grid; gap: 28px; }
@media (min-width: 960px) {
  .split { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .split-head { position: sticky; top: 96px; }
}
.prose { display: grid; gap: 16px; max-width: 62ch; color: var(--text-muted); }
.prose p:first-child { font-size: 1.1875rem; line-height: 1.55; color: var(--text); }
/* spoiler promise: an eye icon, a plain heading and larger text, under a hatched strip like the "result hidden" cells */
.promise {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px;
  margin-top: 32px; padding: 36px 24px 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4);
}
.promise::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 10px;
  background: repeating-linear-gradient(135deg, #1c1f2d 0 9px, #2a2e40 9px 18px);
}
.promise-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: rgba(3, 103, 253, 0.18); color: var(--brand-text);
}
.promise-title { font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
.promise p { grid-column: 1 / -1; font-size: 1.25rem; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; }
@media (min-width: 640px) { .promise { padding: 38px 28px 28px; } .promise p { grid-column: 2; margin-top: -4px; } }

/* cards */
.cards { display: grid; gap: 0; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; } }
@media (min-width: 1200px) { .cards { gap: 0 72px; } }
/* a ruled list, not boxed cards: icon on the left, title with the Free chip, text below, a thin line between rows */
.card {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "icon title chip" "icon text text";
  align-items: start; gap: 4px 16px; padding: 22px 0 24px; border-bottom: 1px solid var(--border);
}
.card-top { display: contents; }
.card-tags:empty { display: none; }
.card-tags { grid-area: chip; align-self: center; justify-self: end; }
.card-top .status { margin: 0; }
.card h3 { grid-area: title; align-self: center; display: flex; align-items: center; min-height: 46px; }
.card > p:last-child { grid-area: text; margin-top: -2px; color: var(--text-muted); font-size: 1rem; line-height: 1.55; }
/* the icon sits on one calm dark tile with a thin white-translucent edge and a brand-blue line icon */
.ficon { grid-area: icon; box-sizing: border-box; width: 46px; height: 46px; padding: 10px; border-radius: 13px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--brand-text); }
.status-launch, .status-after {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel);
}
.card .status { color: var(--steel); }
.shape { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--steel); }
.status-launch .shape { background: var(--steel); }

.social-copy { display: grid; gap: 14px; justify-items: start; }
.social-copy > p { color: var(--text-muted); max-width: 56ch; }
.social-copy h2 { margin-bottom: 4px; }
.note, .social-copy > .note {
  display: flex; align-items: flex-start; gap: 12px; max-width: 56ch; margin-top: 6px;
  padding: 14px 16px; background: var(--raised); border: 1px solid var(--border); border-radius: var(--r2);
  font-size: 0.9375rem; line-height: 1.5; color: var(--text);
}
.note-mark {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--text-muted); border-radius: 50%;
  font-size: 0.75rem; font-weight: 800; line-height: 1; color: var(--text-muted);
}
.note-steel, .social-copy > .note-steel { background: rgba(94, 196, 230, 0.08); border-color: rgba(94, 196, 230, 0.45); color: var(--steel); }
.note-steel .note-mark { border-color: var(--steel); color: var(--steel); }
.follow { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin-top: 12px; }
.follow .btn-secondary { flex: 1 1 220px; }
.textlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600;
}
.follow .textlink { flex-basis: 100%; }

/* roadmap */
.timeline { display: grid; margin-top: 40px; }
.step { position: relative; padding: 0 0 32px 40px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: 7px; top: 22px; bottom: -4px; width: 2px; background: var(--border);
}
.step:last-child::before { display: none; }
.dot {
  position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--field-border);
}
.is-current .dot { background: var(--brand-text); border-color: var(--brand-text); box-shadow: 0 0 0 6px rgba(105, 159, 253, 0.2); }
.when {
  margin-bottom: 4px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.is-current .when { color: var(--brand-text); }
.step h3 { margin-bottom: 6px; font-size: 1.25rem; }
.step p:not(.when):not(.current-label) { color: var(--text-muted); max-width: 40ch; }
.current-label {
  display: inline-block; margin-top: 12px; padding: 4px 12px;
  border: 1px solid var(--brand-text); border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-text);
}
@media (min-width: 960px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; }
  .step { padding: 40px 28px 0 0; }
  .step::before { left: 20px; right: -4px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .dot { top: 0; }
}

/* sign-up repeat */
.section-cta { border-top: 0; padding-top: 0; }
.cta-card {
  position: relative; overflow: hidden; display: grid; gap: 28px;
  padding: 40px 20px 28px;
  background:
    radial-gradient(55% 70% at 100% 0%, rgba(150, 70, 255, 0.24), transparent 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(45, 212, 200, 0.13), transparent 70%),
    linear-gradient(135deg, rgba(3, 103, 253, 0.24), transparent 55%), var(--surface);
  border: 1px solid var(--border); border-radius: var(--r5);
}
.cta-text { margin-top: 12px; color: var(--text-muted); max-width: 44ch; }
@media (min-width: 768px) { .cta-card { padding: 52px 36px 40px; } }
@media (min-width: 960px) {
  .cta-card { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 72px 64px 64px; }
}

/* faq */
.faq { border-bottom: 1px solid var(--border); }
.qa { border-top: 1px solid var(--border); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 0; list-style: none; cursor: pointer;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { color: var(--brand-text); } }
.chev {
  flex: none; width: 10px; height: 10px; margin-right: 6px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.18s;
}
.qa[open] .chev { transform: rotate(-135deg); }
.qa p { max-width: 62ch; margin: 0 0 22px; color: var(--text-muted); }

/* footer: see "v7: footer" at the end */
/* ---------- other pages ---------- */
.page { min-height: 60vh; }
.doc { padding-top: 48px; padding-bottom: 88px; }
.doc > * { max-width: 65ch; }
.doc { overflow-wrap: break-word; }
.doc-title {
  margin-bottom: 20px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em;
}
.doc-intro { margin-top: 24px; color: var(--text-muted); }
.doc-section { margin-top: 40px; }
.doc-section h2 { margin-bottom: 12px; font-size: 1.5rem; letter-spacing: -0.02em; }
.doc-section p { margin-top: 12px; color: var(--text-muted); }
.doc-lines span { display: block; }
.doc-section ul { display: grid; gap: 8px; margin-top: 12px; padding-left: 1.2em; list-style: disc; color: var(--text-muted); }
.doc-section li::marker { color: var(--brand-text); }
.back { margin-top: 40px; }
.result { padding-top: 64px; padding-bottom: 96px; }
.result > * { max-width: 52ch; }
.result-text { font-size: 1.125rem; color: var(--text-muted); }
.action-form { margin-top: 28px; }
.action-form .btn { max-width: 380px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- shared bits ---------- */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.cd-value, .when, .time { font-variant-numeric: tabular-nums; }
.badge {
  display: inline-block; padding: 4px 10px;
  background: rgba(94, 196, 230, 0.08); border: 1px solid rgba(94, 196, 230, 0.45); border-radius: 999px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel);
}
.head, .split-head { position: relative; }

/* ---------- ticker ---------- */
.ticker { position: relative; overflow: hidden; padding: 22px 0; border-top: 1px solid var(--border); background: var(--surface); }
.ticker-track { display: flex; width: max-content; }
.ticker-list { display: flex; flex: none; align-items: center; }
.ticker-list li {
  display: flex; align-items: center; white-space: nowrap;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text);
}
.ticker-list li:nth-child(even) { color: var(--brand-text); }
.ticker-list li::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: 0 28px; background: var(--brand); transform: rotate(45deg);
}

/* ---------- phones ---------- */
.showcase, .timing { margin-top: 80px; }
@media (min-width: 960px) { .showcase, .timing { margin-top: 104px; } }
.showcase-head, .timing-head { display: grid; justify-items: start; gap: 12px; }
.showcase-head .section-intro, .timing-head .section-intro { margin-top: 0; }
.showcase-title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; }
.phones-scroll {
  margin: 32px calc(var(--gutter) * -1) 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.phones-scroll:focus-visible { outline-offset: -3px; }
/* phones: a swipe carousel (scroll-snap) with a peek of the next slide and dots that follow the scroll */
.carousel-dots { display: none; justify-content: center; gap: 8px; margin-top: 4px; }
@media (max-width: 959px) { .showcase:not(.is-story) .carousel-dots { display: flex; } }
.carousel-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--field-border); transition: background-color 0.2s, transform 0.2s; }
.carousel-dots i.is-on { background: var(--brand-text); transform: scale(1.25); }
.phones { display: flex; gap: 16px; width: max-content; padding: 8px var(--gutter) 24px; }
.phone-item { flex: none; width: min(72vw, 280px); scroll-snap-align: start; }
.phone-item figure { margin: 0; }
.phone-shot img { width: 100%; height: auto; filter: drop-shadow(0 22px 24px var(--shadow)); }
.phone-item figcaption { margin-top: 18px; text-align: center; }
.phone-title { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; }
.phone-item figcaption p { margin-top: 4px; font-size: 0.9375rem; line-height: 1.45; color: var(--text-muted); }
/* phones and small tablets (< 960): one screen plus its whole caption fits between the sticky header and the fixed
   .mcta bar. --mfit is the visible height; the phone is sized by height from it (300:620 ratio), the caption sits under it. */
@media (max-width: 959px) {
  .showcase {
    --mfit: calc(100svh - var(--hdr) - var(--mcta-h, 76px) - 18px - env(safe-area-inset-bottom, 0px) - 6px);
    --mcap: 128px;                        /* caption (title + up to 3 lines) + gaps + dots */
  }
  .showcase:not(.is-story) .phones-scroll { margin-top: 24px; }
  .showcase:not(.is-story) .phones { padding: 0 var(--gutter) 6px; }
  .showcase:not(.is-story) .phone-item { width: min(84vw, 360px); }
  .showcase:not(.is-story) .phone-shot {
    display: block; margin-inline: auto;
    width: max(112px, min(72vw, 280px, calc((var(--mfit) - var(--mcap)) * 300 / 620)));
  }
  .showcase:not(.is-story) .phone-item figcaption { margin-top: 12px; }
  .showcase:not(.is-story) .carousel-dots { margin-top: 0; }
}
@media (max-width: 400px) { .showcase { --mcap: 134px; } }
@media (max-width: 340px) { .showcase { --mcap: 154px; } }
@media (min-width: 960px) {
  .phones-scroll { margin: 56px 0 0; overflow: visible; }
  .phones { width: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; gap: 0; max-width: 1180px; margin-inline: auto; padding: 0 0 8px; }
  .phone-item { width: auto; padding-inline: 8px; }
  .phone-item:nth-child(3) { position: relative; z-index: 2; }
  .phone-item:nth-child(1) .phone-shot { rotate: -4deg; scale: 0.94; transform-origin: 70% 90%; }
  .phone-item:nth-child(2) .phone-shot { rotate: -2deg; scale: 0.97; transform-origin: 70% 90%; }
  .phone-item:nth-child(4) .phone-shot { rotate: 2deg; scale: 0.97; transform-origin: 30% 90%; }
  .phone-item:nth-child(5) .phone-shot { rotate: 4deg; scale: 0.94; transform-origin: 30% 90%; }
  .phone-item:nth-child(3) .phone-shot { scale: 1.04; }
  .phone-item figcaption { margin-top: 22px; }
  .phone-item .phone-title { font-size: 1rem; }
  .phone-item figcaption p { font-size: 0.875rem; }
  .phone-shot { transition: rotate 0.3s, scale 0.3s; }
  @media (hover: hover) and (pointer: fine) { .phone-item:hover .phone-shot { scale: 1.03; rotate: 0deg; } }
  @media (hover: hover) and (pointer: fine) { .phone-item:nth-child(3):hover .phone-shot { scale: 1.07; } }
}

/* ---------- hero racing line ---------- */
.track {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  color: var(--brand-text); opacity: 0.3;
}
.track-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.track-dot { fill: var(--text); opacity: 0; offset-path: path("M120 380 C 60 340 70 250 150 230 C 230 210 240 130 330 110 C 430 88 470 170 560 160 C 650 150 690 70 790 90 C 900 112 940 220 880 290 C 830 350 760 340 720 390 C 680 440 590 450 520 410 C 450 372 400 400 330 430 C 250 465 170 430 120 380 Z"); offset-rotate: 0deg; }
.hero-copy, .hero-visual { position: relative; z-index: 1; }

/* ---------- roadmap line draw (JS adds .is-in on the list) ---------- */
.step::before { transform-origin: 50% 0; }
.step.is-current::before { background: var(--brand-text); }
@media (min-width: 960px) { .step::before { transform-origin: 0 50%; } }

/* ---------- buttons and cards ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(247, 249, 255, 0.28), transparent);
  transform: translateX(-130%) skewX(-18deg);
}
/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes line-in { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; translate: var(--rx, 0) var(--ry, 16px); } to { opacity: 1; translate: 0 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lap-dot { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes dot-in { to { opacity: 0.9; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes march { to { transform: translateX(-50%); } }
@keyframes grow { from { transform: scale(0, 1); } to { transform: scale(1, 1); } }
@keyframes growY { from { transform: scale(1, 0); } to { transform: scale(1, 1); } }
@keyframes shine { to { transform: translateX(330%) skewX(-18deg); } }


.rise { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise.r0 { animation-delay: 0s; } .rise.r3 { animation-delay: 0.38s; } .rise.r4 { animation-delay: 0.5s; }
.line { display: block; animation: line-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.line.l1 { animation-delay: 0.1s; } .line.l2 { animation-delay: 0.26s; }
.track-line { animation: draw 2s ease-in-out 0.2s both; }
.track-dot { animation: dot-in 0.4s linear 2.2s forwards, lap-dot 38s linear 2.2s infinite; }
.hero-mascot { animation: float 6s ease-in-out infinite; }
.ticker-track { animation: march 98s linear infinite; }  /* the build sets the duration: 6.1 s per item */
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover::after { animation: shine 0.7s ease-out; } }

/* Scroll reveals, the odometer, the road drawing and the S3 fan run only on a fine pointer with a wide screen. On phones and
   tablets (touch, or under 768 px) everything is simply there from the start: nothing is hidden, nothing slides in. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .js-motion [data-reveal].is-held:not(.is-in) { opacity: 0; }
  .js-motion [data-reveal].is-in { animation: reveal 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .js-motion [data-reveal].is-in.is-done { animation: none; }   /* finished: rests in its final state, no animation kept running */
  .js-motion [data-reveal="left"] { --rx: -16px; --ry: 0px; }
  .js-motion [data-reveal="right"] { --rx: 16px; --ry: 0px; }
  .js-motion [data-reveal="up"] { --ry: 16px; }
  .js-motion .timeline[data-draw].is-held:not(.is-in) .step::before { transform: scale(0, 1); }
  .js-motion .timeline[data-draw].is-in .step::before { animation: grow 0.7s ease-out both; animation-delay: calc(var(--i, 0) * 0.35s + 0.2s); }
  @media (max-width: 959px) {
    .js-motion .timeline[data-draw].is-held:not(.is-in) .step::before { transform: scale(1, 0); }
    .js-motion .timeline[data-draw].is-in .step::before { animation-name: growY; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .track-dot { display: none; }
  .ticker { padding-block: 18px; }
  .ticker-track { width: auto; }
  .ticker-list { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); row-gap: 8px; }
  .ticker-dupe { display: none; }
  .ticker-list li:last-child::after { display: none; }
  .ticker-list li { white-space: normal; text-align: center; }
}

/* ---------- results sheet ---------- */
.sheet { margin-top: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4); overflow: hidden; }
.sheet-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 18px; background: var(--raised); border-bottom: 1px solid var(--border); }
.sheet-series { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.01em; }
.sheet-body { position: relative; }
.sheet-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.sheet-scroll:focus-visible { outline-offset: -3px; }
.sheet-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.sheet-table th, .sheet-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface); }
.sheet-table tbody tr:last-child > * { border-bottom: 0; }
.sheet-table thead th { padding-block: 11px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.sheet-table .c-pos { position: sticky; left: 0; z-index: 1; width: 64px; border-right: 1px solid var(--border); font-weight: 700; }
.sheet-table .c-n { text-align: right; }
.sheet-table td.c-n, .sheet-table td.c-no, .sheet-table th.c-pos { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sheet-table td.c-dr { font-weight: 600; }
.ctag { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
.ctag-a { background: #e9ecf1; color: #0e0f16; }
.ctag-b, .ctag-c { background: #2a2e40; color: #e9ecf1; box-shadow: inset 0 0 0 1px #6b7390; }
.fl { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 6px; background: #7c3aed; color: #fff; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; vertical-align: 1px; }
.is-fl { color: #c9a8ff; font-weight: 700; }
.sheet-legend { display: flex; align-items: center; gap: 8px; padding: 14px 18px 16px; border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--text-muted); }
.sheet-legend .fl { margin: 0; }

/* spoiler shield: the text stays in the DOM but is hidden (visibility) until revealed */
.cv-t { position: relative; display: inline-block; visibility: hidden; min-width: 1.4em; }
.cv-t::after {
  content: ""; position: absolute; inset: 1px -3px; visibility: visible; border-radius: 5px;
  background: linear-gradient(135deg, #1c1f2d 25%, #2a2e40 25% 50%, #1c1f2d 50% 75%, #2a2e40 75%) 0 0 / 17px 17px;
  animation: bars 0.9s linear infinite;
}
.sr.is-on .cv-t { visibility: visible; animation: cell-in 0.35s ease-out both; }
.sr.is-on .cv-t::after { display: none; }
@keyframes bars { to { background-position: 17px 0; } }
@keyframes cell-in { from { opacity: 0; } to { opacity: 1; } }

.sheet-cover {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(14, 15, 22, 0.55), transparent);
}
.sheet-cover[hidden] { display: none; }
.sheet-shield {
  padding: 5px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 700; color: var(--text-muted);
}
.sheet-btn { width: auto; min-height: 56px; padding: 0 36px; pointer-events: auto; box-shadow: 0 12px 30px var(--shadow); }
.sheet.is-open .sheet-cover { position: static; display: flex; justify-content: flex-start; padding: 16px 18px 4px; background: none; border-top: 1px solid var(--border); }
.sheet.is-open .sheet-shield { display: none; }
.sheet.is-open .sheet-btn { min-height: 46px; padding: 0 22px; background: transparent; border: 1.5px solid var(--field-border); color: var(--text); box-shadow: none; font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) { .sheet.is-open .sheet-btn:hover { background: var(--raised); } }
.sheet.is-open .sheet-legend { border-top: 0; }

/* ---------- race cars (decorative) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.car { display: block; flex: none; max-width: none; }
.lane { position: relative; height: 38px; margin-top: 16px; overflow: hidden; }
.lane::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; border-top: 2px dashed var(--border); }
.lane-track { display: flex; width: max-content; }
.lane-list { display: flex; flex: none; align-items: flex-end; }
.lane-list .car { margin-right: 170px; margin-bottom: 3px; }
.road-car { position: absolute; left: -2px; top: -26px; }
.spinout { position: relative; display: flex; align-items: center; margin-top: 40px; color: var(--field-border); }
.spinout .skid { flex: none; margin-right: -70px; opacity: 0.8; }
.spinout .car-spun { rotate: 20deg; }
.spinout .skid { width: min(220px, 40vw); height: auto; }
.spinout .car-spun.sil { width: min(204px, 56vw); height: auto; }
@keyframes march-r { from { transform: translateX(-50%); } to { transform: none; } }
@keyframes arrive { 0% { translate: -150px 0; opacity: 0; } 20% { opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
.lane-track { animation: march-r 80s linear infinite; }
.ticker:hover .lane-track, .ticker:focus-within .lane-track { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .js-motion .timeline[data-draw].is-held:not(.is-in) .road-car { opacity: 0; translate: -150px 0; }
  .js-motion .timeline[data-draw].is-in .road-car { animation: arrive 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
}
@media (prefers-reduced-motion: reduce) {
  .lane-track { width: auto; justify-content: center; }
  .lane-dupe, .lane-list .car:nth-child(n + 4) { display: none; }
  .lane-list { justify-content: center; width: 100%; }
  .lane-list .car { margin-right: 28px; }
  .lane-list .car:nth-child(3) { margin-right: 0; }
}

/* =====================================================================
   v4: header track line, scroll story, odometer numbers, race card, social glyphs
   ===================================================================== */

/* ---------- section numbers: filled digits with a vertical fade (no stroke on the variable font) ---------- */
.bignum {
  position: absolute; left: -4px; bottom: calc(100% - 0.4em); z-index: 0; display: flex; pointer-events: none; user-select: none;
  font-size: 5.5rem; font-weight: 900; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.dg { display: block; height: 1em; overflow: clip; }
.dg-col { display: block; transform: translateY(-75%); }
/* phones and tablets: the final digits only, whole and static (no reel, no clipping) */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .dg { height: auto; overflow: visible; }
  .dg-col { transform: none; }
  .dg-col > span:not(:last-child) { display: none; }
}
.dg-col > span {
  display: block; height: 1em;
  /* decorative numeral: a clearly visible brand-blue tint that fades toward the heading it sits behind (it never touches the h2) */
  background: linear-gradient(180deg, rgba(122, 172, 255, 0.5) 8%, rgba(122, 172, 255, 0.24) 52%, rgba(122, 172, 255, 0.05) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.head > *:not(.bignum), .split-head > *:not(.bignum) { position: relative; z-index: 1; }
@media (min-width: 960px) { .bignum { font-size: 9.5rem; } }
@keyframes odo { from { transform: translateY(0); } to { transform: translateY(-75%); } }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .js-motion [data-odo].is-held:not(.is-in) .dg-col { transform: translateY(0); }
  .js-motion [data-odo].is-in .dg-col { animation: odo 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
  .js-motion [data-odo].is-in .dg + .dg .dg-col { animation-delay: 0.07s; }
}

/* ---------- header: a race track band with the car as the scroll knob (v5) ---------- */
/* The band sits under the wordmark bar (header +20 px: the bar is 54 px + a 22 px band; up to 640 px wide 56 + 16 px).
   js/motion.js redraws the track for the measured width; without JS the default drawing is cropped, not stretched. */
.lap { position: relative; height: 22px; pointer-events: none; }
.has-track .site-header-bar { height: 54px; }
@media (max-width: 640px) { .lap { height: 16px; } .has-track .site-header-bar { height: 56px; } }
.lap-svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.lap-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lt-edge { stroke: var(--brand-text); stroke-width: 9.5; opacity: 0.85; }
.lt-asphalt { stroke: var(--raised); stroke-width: 7.5; }
.lt-fin { stroke: #f7f9ff; stroke-width: 2; stroke-linecap: butt; }
.lt-line { stroke: var(--brand); stroke-width: 2.2; }
.lt-shine { stroke: #f7f9ff; stroke-width: 2.2; stroke-dasharray: 0.07 2; stroke-dashoffset: 0.07; opacity: 0; }
.lap.is-finish .lt-shine { animation: lap-shine 1.1s ease-out both; }
@keyframes lap-shine { from { opacity: 1; stroke-dashoffset: 0.07; } 85% { opacity: 1; } to { opacity: 0; stroke-dashoffset: -1; } }
/* the racing line is revealed up to the car by two opposite translations (transform only; hidden without JS) */
.lap-drive { position: absolute; inset: 0; overflow: hidden; transform: translateX(-100%); will-change: transform; }
.lap-drive-in { position: absolute; inset: 0; transform: translateX(100%); will-change: transform; }
/* the car: parked at the start until the script drives it (centre at 22 px * band/20, on the centreline) */
.lap-car {
  position: absolute; z-index: 2; left: 0; top: 0; width: 34px; height: 10.2px; max-width: none; overflow: visible;
  color: var(--brand-text); stroke: var(--bg); stroke-width: 22; paint-order: stroke; stroke-linejoin: round;
  transform-origin: 50% 50%; transform: translate(7.2px, 5.9px); will-change: transform;
}
@media (max-width: 640px) {
  .lt-edge { stroke-width: 7.4; }
  .lt-asphalt { stroke-width: 5.4; }
  .lt-line, .lt-shine { stroke-width: 1.8; }
  .lap-car { transform: translate(0.6px, 2.9px) scale(0.875); }
}
/* sector marker boards S1-S4, just above the track at the sections' positions; light up once passed */
.lap-tick { position: absolute; z-index: 1; bottom: calc(100% + 2px); left: calc(var(--x, 0) * 1px); width: 0; height: 0; }
.lap-tick[hidden] { display: none; }
.lap-tick::before {                                   /* the board's post */
  content: ""; position: absolute; left: -0.5px; bottom: -3px; width: 1px; height: 6px; background: var(--field-border);
  transition: background-color 0.25s;
}
.lap-tick i {
  position: absolute; bottom: 2px; left: 0; transform: translateX(-50%); padding: 1px 4px 0; border-radius: 3px;
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--field-border);
  font-style: normal; font-size: 0.5625rem; font-weight: 800; line-height: 11px; letter-spacing: 0.06em; color: var(--text-muted);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.lap-tick.is-passed::before { background: var(--brand-text); }
.lap-tick.is-passed i { background: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--text-on-brand); }
/* small markers only: no text where a label would collide, and on small screens */
.lap-tick.no-label i { width: 7px; height: 7px; padding: 0; font-size: 0; line-height: 0; color: transparent; }
@media (max-width: 640px) { .lap-tick i { width: 7px; height: 7px; padding: 0; font-size: 0; line-height: 0; color: transparent; } }

/* ---------- concept screens: scroll story (JS adds .is-story; otherwise the stacked/row layout above) ---------- */
.story-device, .story-rail { display: none; }
.is-story .story { position: relative; height: 460vh; margin-top: 16px; }
.is-story .story-stage {
  position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr));
  --ph: clamp(280px, calc(100svh - var(--hdr) - 236px), 560px);
  --pw: calc(var(--ph) * 300 / 620);
  --phx: calc(50% - var(--pw) / 2);
  --phy: calc(100% - var(--ph) - 22px);
  --m: 0; --a: 0; --tilt: 0;
}
.is-story .story-device, .is-story .story-rail { display: block; }
.is-story .phones-scroll { margin: 0; overflow: visible; position: static; }
.is-story .phones { display: block; width: auto; max-width: none; margin: 0; padding: 0; }
.is-story .phone-item { position: absolute; inset: 0; width: auto; padding: 0; pointer-events: none; }
.is-story .phone-item figure { position: static; }
/* phone box, shared by the morphing device and the five screens */
.is-story .sd-frame, .is-story .sd-glow, .is-story .phone-item .phone-shot {
  position: absolute; left: var(--phx); top: var(--phy); width: var(--pw); height: var(--ph);
}
.is-story .phone-item .phone-shot, .is-story .sd-frame {
  transform: perspective(1400px) rotateX(calc(var(--tilt) * 1deg));
}
.is-story .phone-item:nth-child(n) .phone-shot { rotate: none; scale: none; transition: none; opacity: var(--v, 0); }
.is-story .phone-shot img { width: 100%; height: 100%; filter: none; }
.sd-frame {
  border-radius: calc(var(--pw) * 0.147); background: #1c1f2d; border: 2px solid #3a3f56;
  box-shadow: 0 30px 60px var(--shadow);
  scale: calc(0.42 + 0.58 * var(--m)) calc(0.2032 + 0.7968 * var(--m));
  opacity: min(1, calc(var(--m) * 8));
}
.sd-frame::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--brand); opacity: max(0, calc(1 - var(--m) * 1.5)); }
.sd-glow {
  border-radius: 40%;
  background: radial-gradient(closest-side, rgba(3, 103, 253, 0.55), rgba(3, 103, 253, 0.16) 60%, transparent 76%);
  scale: 1.5 1.15; opacity: calc(var(--m) * 0.75);
}
.is-story .sd-icon {
  position: absolute; left: calc(var(--phx) + var(--pw) * 0.29); top: calc(var(--phy) + var(--ph) / 2 - var(--pw) * 0.21);
  width: calc(var(--pw) * 0.42); height: calc(var(--pw) * 0.42);
  scale: calc((0.62 + 0.38 * var(--a)) * (1 + 0.9 * var(--m)));
  opacity: min(var(--a), max(0, calc(1 - (var(--m) - 0.2) * 2.4)));
}
.sd-icon img { width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgba(3, 103, 253, 0.45)); }
/* captions */
.is-story .phone-item figcaption {
  position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--ph) + 22px); margin: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; padding: 0 8px 26px; text-align: center;
  opacity: var(--v, 0); translate: 0 calc((1 - var(--v, 0)) * var(--d, 1) * 26px);
}
.is-story .phone-title { font-size: clamp(1.375rem, 1rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.is-story .phone-item figcaption p { margin: 0; max-width: 30ch; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); }
/* progress rail */
.story-rail {
  position: absolute; left: calc(var(--phx) + var(--pw) + 14px); top: calc(var(--phy) + var(--ph) / 2 - 65px);
  width: 10px; height: 130px; opacity: var(--m, 0);
}
.story-rail::before, .rail-fill { content: ""; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 2px; background: var(--border); }
.rail-fill { background: var(--brand-text); transform: scaleY(var(--rail, 0)); transform-origin: 50% 0; }
.story-rail i { position: absolute; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--field-border); transition: background-color 0.2s, border-color 0.2s, transform 0.2s; }
.story-rail i:nth-of-type(1) { top: 0; } .story-rail i:nth-of-type(2) { top: 30px; } .story-rail i:nth-of-type(3) { top: 60px; }
.story-rail i:nth-of-type(4) { top: 90px; } .story-rail i:nth-of-type(5) { top: 120px; }
.story-rail i.is-on { background: var(--brand-text); border-color: var(--brand-text); transform: scale(1.3); }
/* small tablets in the pinned story (768-959): keep the phone above the fixed .mcta bar */
@media (max-width: 959px) {
  .is-story .story-stage {
    height: calc(100svh - var(--hdr) - var(--mcta-h, 76px) - 18px - env(safe-area-inset-bottom, 0px));
    --ph: clamp(220px, calc(100svh - var(--hdr) - var(--mcta-h, 76px) - 18px - env(safe-area-inset-bottom, 0px) - 236px), 560px);
  }
}
@media (min-width: 960px) {
  .is-story .story-stage {
    --ph: clamp(380px, calc(100svh - var(--hdr) - 88px), 600px);
    --phx: calc(64% - var(--pw) / 2);
    --phy: calc(50% - var(--ph) / 2);
  }
  .is-story .phone-item figcaption {
    right: auto; bottom: 0; width: 44%; justify-content: center; align-items: flex-start; padding: 0; text-align: left; gap: 14px;
    translate: calc((1 - var(--v, 0)) * -40px) calc((1 - var(--v, 0)) * var(--d, 1) * 18px);
  }
  .is-story .phone-item:nth-child(n) figcaption { margin: 0; }
  .story-rail { left: calc(var(--phx) + var(--pw) + 40px); }
}

/* ---------- launch card: a race on an invented endurance circuit ---------- */
.cta-head, .cta-card .signup-wrap { position: relative; z-index: 1; }
.race { position: relative; margin: -8px 4px 0; }
.gantry {
  display: flex; gap: 7px; width: max-content; margin: 0 auto 10px; padding: 6px 9px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
}
.gantry i { width: 12px; height: 12px; border-radius: 50%; background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--field-border); }
.circuit { width: 100%; height: auto; overflow: visible; }
.circuit path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.c-edge { stroke: var(--brand-text); stroke-width: 34; opacity: 0.8; }
.c-kerb { stroke: #e9ecf1; stroke-width: 40; stroke-linecap: butt; }
.c-kerb-b { stroke: var(--brand); stroke-dasharray: 5 5; }
.c-asphalt { stroke: var(--surface); stroke-width: 31; }
.c-line { stroke: #e9ecf1; stroke-width: 2.5; stroke-linecap: butt; }
@keyframes race-lap { from { offset-distance: var(--s); } to { offset-distance: calc(var(--s) + 100%); } }
@keyframes lamp { from, to { background: var(--brand); box-shadow: 0 0 10px 2px rgba(3, 103, 253, 0.75), inset 0 0 0 1.5px #5b95fe; } }
/* lights: one by one every 500 ms, all out together at 3.0 s; then the cars launch */
.gantry i:nth-child(1) { --n: 0; } .gantry i:nth-child(2) { --n: 1; } .gantry i:nth-child(3) { --n: 2; } .gantry i:nth-child(4) { --n: 3; } .gantry i:nth-child(5) { --n: 4; }
.race.is-go .gantry i { animation: lamp calc(3s - var(--n) * 0.5s) steps(1) calc(var(--n) * 0.5s); }
.race.is-go .rc { animation: race-lap var(--t) linear 3s infinite both; }
.race.is-paused .rc, .race.is-paused .gantry i { animation-play-state: paused; }
.cta-card { grid-template-areas: "race" "head" "form"; }
.race { grid-area: race; } .cta-head { grid-area: head; } .cta-card .signup-wrap { grid-area: form; }
@media (min-width: 960px) {
  .cta-card { grid-template-areas: "head form" "race form"; row-gap: 28px; align-items: start; }
  .race { margin: 0 -16px 0 -36px; align-self: end; }
  .cta-card .signup-wrap { align-self: center; }
}

/* ---------- platform glyphs ---------- */
.si { flex: none; display: block; }
.socialline a { gap: 8px; }
.follow .btn-secondary .si, .textlink .si { width: 22px; height: 22px; }

/* =====================================================================
   v5: silhouettes (lane, passing traffic, roadmap, 404)
   ===================================================================== */
.sil { display: block; flex: none; max-width: none; color: var(--brand-text); }
.lane-list .sil { margin-bottom: 4px; }
.road-car.sil { top: -24px; }

/* ---------- passing traffic strip: silhouettes speed past with speed lines behind them ---------- */
.traffic { position: relative; height: 128px; overflow: clip; border-top: 1px solid var(--border); background: var(--bg); }
.traffic-road { position: absolute; inset: 0; }
.traffic-road::before, .traffic-road::after {      /* lane markings */
  content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border);
}
.traffic-road::before { top: 40px; }
.traffic-road::after { top: 96px; border-top-width: 2px; }
.tv { position: absolute; left: 0; bottom: var(--b); display: flex; align-items: stretch; will-change: transform; }
.tv1 { --b: 92px; z-index: 1; color: #3a3f56; }
.tv2 { --b: 58px; z-index: 2; color: var(--field-border); }
.tv3 { --b: 36px; z-index: 3; color: var(--text-muted); }
.tv4 { --b: 6px; z-index: 4; color: var(--brand-text); }
.tv .sil { color: inherit; }
.trail { position: relative; flex: none; width: 70px; margin-right: 3px; }
.tv4 .trail { width: 110px; }
.tv1 .trail { width: 44px; }
.trail i { position: absolute; right: 0; height: 1.5px; border-radius: 1px; background: linear-gradient(90deg, transparent, currentColor); opacity: 0.75; }
.trail i:nth-child(1) { top: 26%; width: 82%; }
.trail i:nth-child(2) { top: 50%; width: 100%; }
.trail i:nth-child(3) { top: 72%; width: 64%; }
.tv3 .trail i:nth-child(1) { top: 34%; } .tv3 .trail i:nth-child(2) { top: 64%; width: 86%; }
@keyframes pass { from { transform: translateX(-100%); } 80%, to { transform: translateX(100vw); } }
@keyframes pass-slow { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
.tv1 { animation: pass-slow 17s linear -6s infinite; }
.tv2 { animation: pass 8.5s linear -2s infinite; }
.tv3 { animation: pass 6.2s linear -4.6s infinite; }
.tv4 { animation: pass 4.6s linear -0.6s infinite; }
.js-motion .traffic:not(.is-on) .tv, .js-motion .ticker:not(.is-on) .ticker-track, .js-motion .ticker:not(.is-on) .lane-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tv { will-change: auto; }
  .tv1 { left: 58%; } .tv2 { left: 4%; } .tv3 { left: 66%; } .tv4 { left: 22%; }
}
@media (max-width: 640px) {
  .traffic { height: 112px; }
  .traffic-road::before { top: 34px; } .traffic-road::after { top: 84px; }
  .tv1 { --b: 80px; } .tv2 { --b: 50px; } .tv3 { --b: 30px; } .tv4 { --b: 6px; }
  .trail { width: 48px; } .tv4 .trail { width: 72px; } .tv1 .trail { width: 30px; }
  .tv .sil { width: auto; }
  .tv1 .sil { height: 18px; } .tv2 .sil { height: 27px; } .tv3 .sil { height: 24px; } .tv4 .sil { height: 38px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .tv1 { left: 58%; } .tv2 { left: 2%; } .tv3 { left: 64%; } .tv4 { left: 18%; }
}

/* =====================================================================
   v6: track-map car markers, S3 social feed, perk line, free tags, FAQ
   ===================================================================== */

/* ---------- launch card: track-map style car markers (glowing dot, number label, fading trail) ---------- */
.rc { offset-path: path("M64 236L64 120C64 84 84 62 122 62L248 70C262 71 268 60 282 61C296 62 298 74 312 75L404 84C418 85 422 98 436 99C450 100 452 90 466 91L534 98C574 102 574 142 540 146L480 150C456 152 448 172 464 184L500 208C526 226 516 262 486 260C470 259 462 250 446 245L380 228C350 222 336 250 308 251C280 252 272 228 244 228C216 228 206 256 178 257L120 258C84 259 64 262 64 236Z"); offset-distance: var(--s, 0%); }
.rc-mk { offset-rotate: auto; }
.rc-lb { offset-rotate: 0deg; }
.rc1 { --s: 2%; --t: 13.2s; --c: var(--brand); }
.rc2 { --s: -1%; --t: 12.6s; --c: var(--brand-text); }
.rc3 { --s: -4%; --t: 12s; --c: #e9ecf1; }
.rg stop { stop-color: var(--c); }
.rc1 .rc-in { translate: 0 -7px; } .rc2 .rc-in { translate: 0 7px; }   /* side by side across the track */
.rc-halo { fill: var(--c); opacity: 0.26; }
.rc-dot { fill: var(--c); stroke: var(--bg); stroke-width: 1.6; }
.rc-lb text {
  fill: #e9ecf1; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  stroke: var(--bg); stroke-width: 3.2px; paint-order: stroke; stroke-linejoin: round;
}
@media (max-width: 640px) { .rc-lb text { font-size: 15px; stroke-width: 4px; } .rc-dot { r: 6.4px; } .rc-halo { r: 12px; } }

/* ---------- S3: a social feed ---------- */
.social-grid { display: grid; gap: 72px; grid-template-areas: "reel" "copy"; }
.social-copy { grid-area: copy; display: grid; gap: 14px; justify-items: start; min-width: 0; }
.social-copy > p { color: var(--text-muted); max-width: 56ch; }
.social-copy .head { margin-bottom: 4px; }
.note, .social-copy > .note {
  display: flex; align-items: flex-start; gap: 12px; max-width: 56ch; margin-top: 6px;
  padding: 14px 16px; background: var(--raised); border: 1px solid var(--border); border-radius: var(--r2);
  font-size: 0.9375rem; line-height: 1.5; color: var(--text);
}
.note-mark {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--text-muted); border-radius: 50%;
  font-size: 0.75rem; font-weight: 800; line-height: 1; color: var(--text-muted);
}
.follow { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin-top: 12px; }
.textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.follow .textlink { flex-basis: 100%; }
.btn-follow { flex: 1 1 220px; justify-content: flex-start; gap: 14px; min-height: 66px; padding: 10px 20px; text-align: left; }
.btn-follow .si { width: 28px; height: 28px; }
.bf-text { display: grid; gap: 1px; }
.bf-name { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.bf-handle { font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { .btn-follow:hover .bf-handle { color: var(--text); } }

/* post cards: vertical 9:16 short-video posts */
.reel-scroll { grid-area: reel; min-width: 0; }
.reel { --cw: 200px; }
.post {
  position: relative; overflow: hidden; width: var(--cw); aspect-ratio: 9 / 16; flex: none;
  border-radius: 18px; background: #12131c; border: 1px solid #343a52;
  box-shadow: 0 22px 44px var(--shadow);
  color: var(--text);
}
.post-media { position: absolute; inset: 0; overflow: hidden; }
.post-1 .post-media { background: radial-gradient(70% 45% at 50% 58%, rgba(105, 159, 253, 0.55), transparent 70%), linear-gradient(170deg, #2f7dff 0%, #0367fd 42%, #0347b0 100%); }
.post-2 .post-media { background: linear-gradient(180deg, #0a62f0 0%, #0c2e74 62%, #12131c 100%); }
.post-3 .post-media { background: radial-gradient(90% 60% at 80% 0%, rgba(3, 103, 253, 0.42), transparent 70%), #151722; }
.post-mascot { position: absolute; left: 50%; bottom: -14%; height: 84%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 14px 20px rgba(5, 6, 10, 0.45)); }
.post-bust { position: absolute; left: 0; right: 0; top: 13%; }
.post-bust img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
/* top scrim with the platform glyph and the handle; bottom scrim under the caption */
.post-media::before, .post-media::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.post-media::before { top: 0; height: 26%; background: linear-gradient(180deg, rgba(14, 15, 22, 0.62), transparent); }
.post-media::after { bottom: 0; height: 52%; background: linear-gradient(180deg, transparent, rgba(14, 15, 22, 0.9) 46%, #0e0f16); }
.post-top {
  position: absolute; z-index: 3; left: 12px; right: 12px; top: 11px; display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; color: #f7f9ff;
}
.post-top .si { width: 15px; height: 15px; }
.post-cap { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 20px; display: grid; gap: 3px; }
.post-label { font-size: 0.9375rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.post-text { font-size: 0.8125rem; line-height: 1.35; color: #c9cfdc; }
.post-play {
  position: absolute; z-index: 2; left: 50%; top: 44%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: rgba(14, 15, 22, 0.42); box-shadow: inset 0 0 0 1.5px rgba(247, 249, 255, 0.55);
}
.post-play::after {
  content: ""; position: absolute; left: 18px; top: 14px; width: 0; height: 0;
  border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #f7f9ff;
}
.post-1 .post-play { top: 63%; }
.post-bar { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(247, 249, 255, 0.22); overflow: hidden; }
.post-bar i { position: absolute; inset: 0; background: var(--brand-text); transform-origin: 0 50%; transform: scaleX(var(--bar, 0.4)); }
.post-bar-1 { --bar: 0.38; } .post-bar-2 { --bar: 0.64; } .post-bar-3 { --bar: 0.22; }
.post-1 .post-bar i { background: #f7f9ff; }
/* speech bubble, attached to the mascot in card 1 */
.bubble {
  position: relative; margin: 0; padding: 14px 18px; background: var(--text); color: var(--bg); border-radius: var(--r4);
  font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
}
.post-bubble {
  position: absolute; z-index: 3; left: 12px; right: 30px; top: 40px; padding: 9px 12px; border-radius: 14px;
  font-size: 0.8125rem; line-height: 1.3; box-shadow: 0 8px 18px rgba(5, 6, 10, 0.35);
}
.post-bubble::before {
  content: ""; position: absolute; left: 52%; bottom: -8px; width: 0; height: 0;
  border-style: solid; border-width: 9px 7px 0 7px; border-color: var(--text) transparent transparent transparent;
}
/* weekend planner (HTML, sample data, labelled with the sample badge) */
.planner { position: absolute; left: 12px; right: 12px; top: 40px; display: grid; gap: 6px; }
.planner-badge {
  justify-self: start; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(94, 196, 230, 0.5);
  font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel);
}
.planner-series { margin: 2px 0 2px; font-size: 0.75rem; font-weight: 800; line-height: 1.25; }
.planner-row {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 4px; padding: 6px 8px;
  border-radius: 9px; background: var(--raised); border: 1px solid var(--border); font-size: 0.71875rem; line-height: 1.2;
}
.planner-row b { font-weight: 700; color: var(--text-muted); }
.planner-row .time { font-weight: 800; }
.planner-row:last-of-type { border-color: rgba(105, 159, 253, 0.55); }
.post-3 .post-play { top: 66%; }
.post-3 .post-media::after { height: 30%; background: linear-gradient(180deg, transparent, #0e0f16 60%); }

/* a fanned stack at every width (rotate / offset per card); card 1 (the mascot) in front, in the middle.
   Phones: a smaller front card, the side cards a bit smaller still, so all three fit without scrolling. */
.reel { position: relative; --cw: 196px; --side: 0.84; --ss: 1; --rs: 6deg; height: calc(var(--cw) * 16 / 9 + 56px); }
.post {
  position: absolute; left: 50%; top: 18px; margin-left: calc(var(--cw) / -2);
  --fx: 0px; --fy: 0px; --rot: 0deg; --lift: 0px; --sc: 1;
  transform: translate(var(--fx), calc(var(--fy) + var(--lift))) rotate(var(--rot)) scale(var(--sc));
  transform-origin: 50% 92%;
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}
.post-1 { z-index: 3; }
.post-2 { z-index: 1; --fx: calc(var(--cw) * var(--side) * -1); --fy: 18px; --rot: calc(var(--rs) * -1); --sc: var(--ss); }
.post-3 { z-index: 2; --fx: calc(var(--cw) * var(--side)); --fy: 18px; --rot: var(--rs); --sc: var(--ss); }
@media (hover: hover) and (pointer: fine) { .post:hover { --lift: -16px; z-index: 4; box-shadow: 0 30px 54px var(--shadow), 0 0 0 1px rgba(105, 159, 253, 0.6); transition-duration: 0.3s; } }
@media (max-width: 639px) {
  .reel { --cw: min(168px, 42vw); --side: 0.55; --ss: 0.86; --rs: 7deg; height: calc(var(--cw) * 16 / 9 + 40px); }
}
@media (min-width: 960px) {
  .social-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "reel copy"; gap: 64px; align-items: center; }
  .reel { --cw: clamp(160px, 14.5vw, 200px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 768px) {
  /* on scroll into view the stack fans out (JS adds .is-in; without JS or under reduced motion it is fanned already) */
  .js-motion [data-fan].is-held:not(.is-in) .post { --fx: 0px; --fy: 22px; --rot: 0deg; }
  .js-motion [data-fan].is-in .post-2 { transition-delay: 0.08s; }
  .js-motion [data-fan].is-in .post-3 { transition-delay: 0.16s; }
  @media (hover: hover) and (pointer: fine) { .js-motion [data-fan].is-in .post:hover { transition-delay: 0s; } }
  .js-motion [data-fan].is-held:not(.is-in) .post-bar i { transform: scaleX(0); }
  .post-bar i { transition: transform 1.4s ease-out 0.5s; }
}

/* ---------- features: "Free" tag ---------- */
.card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.free {
  display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.45; text-transform: uppercase; color: var(--brand-text);
}
.free-note { margin-top: 10px; font-size: 0.875rem; color: var(--text-muted); }

/* =====================================================================
   v7: form heading, early-bird perk block, FAQ intro, footer columns
   ===================================================================== */

/* hero form heading: says what the list is for (the app release) */
.form-head { margin-bottom: 10px; }
.form-title { font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 960px) { .form-title { font-size: 1.375rem; } .form-head { margin-bottom: 16px; } }

/* early-bird perk: a calm dark box with a thin white-translucent edge (like the race cards); a light sweep crosses it once */
.perk-box {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 14px; padding: 10px 14px 10px 10px;
  background: #14161f; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r3);
}
.perk-glyph {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r2); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--brand-text);
}
.perk-glyph .perk-icon { width: 20px; height: 20px; }
.perk-body { min-width: 0; }
.perk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 34px; line-height: 1.35; }
.perk-badge {
  display: inline-flex; width: max-content; max-width: 100%; padding: 1px 9px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; color: var(--brand-text);
}
.perk-title { font-size: 1rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.perk-text { margin-top: 2px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }

/* the large version: icon and chip share the first line, the heading and the text use the full width below */
.perk-box-lg {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon badge" "title title" "text text";
  align-items: center; gap: 12px 12px; margin: 24px 0 0; padding: 18px 20px 20px; max-width: 46ch;
}
.perk-box-lg .perk-body { display: contents; }
.perk-box-lg .perk-glyph { grid-area: icon; width: 40px; height: 40px; border-radius: var(--r2); }
.perk-box-lg .perk-glyph .perk-icon { width: 24px; height: 24px; }
.perk-box-lg .perk-badge { grid-area: badge; justify-self: start; }
.perk-box-lg .perk-title { grid-area: title; margin-top: 4px; font-size: 1.25rem; line-height: 1.25; }
.perk-box-lg .perk-text { grid-area: text; margin-top: 0; font-size: 0.9375rem; line-height: 1.5; }

.perk-box::after {
  content: ""; position: absolute; z-index: -1; top: -10%; bottom: -10%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(233, 236, 241, 0.14) 50%, transparent);
  transform: translateX(-160%) skewX(-18deg);
}
@keyframes perk-shine { to { transform: translateX(330%) skewX(-18deg); } }
@media (prefers-reduced-motion: no-preference) {
  .perk-box-hero::after { animation: perk-shine 1.1s ease-out 1.1s both; }
  .js-motion .perk-box-lg.is-in::after { animation: perk-shine 1.1s ease-out 0.7s both; }
}

/* FAQ intro under the heading */
.faq-intro { margin-top: 14px; max-width: 40ch; overflow-wrap: anywhere; }
.faq-intro a { font-weight: 600; }

/* footer: brand + independence note, two link columns, a bottom line */
.site-footer { margin-top: 24px; padding: 48px 0 28px; border-top: 1px solid var(--border); background: var(--surface); }
.footer-grid { display: grid; gap: 28px; }
.f-independent { margin-top: 10px; max-width: 52ch; font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); }
.f-head { margin-bottom: 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; color: var(--brand-text); }
.f-list li + li { margin-top: 2px; }
.f-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 500; color: var(--text); text-decoration: none;
}
.f-link .si { width: 20px; height: 20px; color: var(--text-muted); transition: color 0.15s; }
@media (hover: hover) and (pointer: fine) { .f-link:hover { color: var(--brand-text); text-decoration: underline; } }
@media (hover: hover) and (pointer: fine) { .f-link:hover .si { color: var(--brand-text); } }
.f-bottom { padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-muted); }
@media (min-width: 480px) and (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .f-brand, .f-bottom { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .site-footer { padding: 64px 0 32px; }
  .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; }
  .f-bottom { grid-column: 1 / -1; padding-top: 24px; }
}

/* =====================================================================
   v9: mobile polish (hero track, calm header band, launch card, S3 cards), series overview, no image drag
   ===================================================================== */

/* images are never draggable or selectable (draggable="false" in the markup as well); links and buttons unaffected */
img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }

/* hero racing line: desktop only; below 960 it would cross the text and the form */
@media (max-width: 959px) { .track { display: none; } }

/* header band up to 640 px: a calm, thin, gently curved line (js/motion.js draws the calm shape for a band
   lower than 20 px), one colour for the driven part, a 28 px car, small tick marks instead of boards.
   44 px bar + 18 px band + 1 px border = 63 px. */
@media (max-width: 640px) {
  :root { --hdr: 63px; }
  .has-track .site-header-bar { height: 44px; }
  .lap { height: 18px; }
  .lt-edge { stroke: var(--field-border); stroke-width: 2; opacity: 0.9; }
  .lt-asphalt { display: none; }
  .lt-line, .lt-shine { stroke: var(--brand-text); stroke-width: 2.4; }
  .lt-fin { stroke: var(--text); stroke-width: 1.5; }
  /* parked at the start without JS: centre (19.8, 9), 34 px drawing scaled to 28 px */
  .lap-car { transform: translate(2.8px, 3.9px) scale(0.8235); }
  .lap-tick { top: calc(var(--y, 9) * 1px); bottom: auto; }
  .lap-tick::before { left: -0.75px; top: -4px; bottom: auto; width: 1.5px; height: 8px; border-radius: 1px; }
  .lap-tick i { display: none; }
}

/* launch card on mobile: the whole circuit (with the start lights) inside the card, labels a touch larger */
@media (max-width: 959px) {
  .race { margin: 0; padding: 4px 6px 0; }
}
@media (max-width: 640px) { .rc-lb text { font-size: 17px; stroke-width: 4.4px; } }

/* ---------- S3: heading first, then the cards, then the text (mobile and tablet) ---------- */
.social-grid { gap: 0; grid-template-areas: "head" "reel" "copy"; }
.social-head { grid-area: head; }
.reel-scroll { margin-top: 28px; }
.social-copy { margin-top: 28px; }
@media (min-width: 960px) {
  .social-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto;
    grid-template-areas: "reel head" "reel copy"; column-gap: 64px; row-gap: 0;
  }
  .social-head { align-self: end; }
  .reel-scroll { margin-top: 0; align-self: center; }
  .social-copy { margin-top: 18px; align-self: start; }
}
/* framing: the full-body figure fits between the bubble and the caption; the bust is centred with headroom */
.post-mascot { bottom: 21%; height: 51%; }
.post-1 .post-media::after { height: 30%; background: linear-gradient(180deg, transparent, rgba(14, 15, 22, 0.88) 55%, #0e0f16); }
.post-bust { left: 6%; right: 6%; top: 17%; }
.post-bust img {
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 58%, transparent 100%);
}
/* play: a small round button at the bottom right, just above the caption (never over the face) */
.post .post-cap .post-play {
  left: auto; right: 0; top: auto; bottom: calc(100% + 10px); width: 34px; height: 34px; margin: 0;
  background: rgba(14, 15, 22, 0.55);
}
.post .post-cap .post-play::after { left: 13px; top: 10px; border-width: 7px 0 7px 11px; }

/* ---------- the series: one "planned for launch" label, then one row per group (name left, pills right, a hairline between rows) ---------- */
/* Glow pairing between neighbours (every glow is half on each side of a join, same size and strength, so no edge shows):
   #series bottom + #races top: violet, right.  #races bottom + #idea top: cobalt, left.  #idea bottom + #coming top: violet, right.
   #coming bottom + #preview top: a small blue one in the middle. */
.series {
  padding: 48px 0 56px; border-top: 1px solid var(--border);
  background: radial-gradient(ellipse var(--vglow-w) var(--vglow-h) at 88% 100%, rgba(120, 60, 230, 0.34), transparent 100%);
}
#idea {
  border-top: 0; padding-top: 60px; padding-bottom: 36px;
  background:
    radial-gradient(ellipse var(--cglow-w) var(--cglow-h) at 6% 0%, rgba(3, 103, 253, 0.34), transparent 100%),
    radial-gradient(ellipse var(--vglow-w) var(--vglow-h) at 88% 100%, rgba(120, 60, 230, 0.34), transparent 100%);
}
@media (min-width: 768px) { #idea { padding-top: 72px; padding-bottom: 48px; } }
@media (min-width: 960px) { #idea { padding-top: 80px; padding-bottom: 56px; } }
@media (min-width: 960px) { .series { padding: 64px 0 72px; } }
.series-head { display: grid; gap: 10px; }
.series-head .section-intro { margin-top: 0; }
.series-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.series-groups { margin-top: 28px; border-top: 1px solid var(--border); }
.series-group { display: grid; gap: 14px 24px; padding: 22px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 768px) { .series-group { grid-template-columns: 290px minmax(0, 1fr); align-items: center; padding: 24px 0; } }
/* group name in white and bold, a brand-blue car silhouette before it and the number of series after it */
.series-group-title { display: flex; align-items: center; gap: 12px; font-size: 1.125rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.series-sil { flex: none; width: 46px; height: 26px; color: var(--brand-text); }
.sg-count { font-size: 0.875rem; font-weight: 700; color: var(--text-muted); }
.series-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sbadge {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  background: var(--raised); border: 1px solid var(--border); border-radius: 999px;
  font-size: 1rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; color: var(--text);
}
@media (hover: hover) and (pointer: fine) { .sbadge { transition: border-color 0.15s; } .sbadge:hover { border-color: var(--brand-text); } }
.series-note { margin-top: 20px; max-width: 70ch; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
/* the bubble uses the card width (fewer lines), and on the narrower fan cards the figure is a little smaller */
.post-bubble { right: 12px; }
.post-mascot { height: 46%; }

/* email typo hint ("Did you mean ...?") under the email fields */
.suggest-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 8px; font-size: 0.9375rem; line-height: 1.4; color: var(--text); }
.suggest-line[hidden] { display: none; }
.suggest-text { overflow-wrap: anywhere; }
.suggest-btn {
  min-height: 44px; padding: 0 14px; border-radius: var(--r2); border: 1.5px solid var(--field-border); background: transparent;
  font-size: 0.875rem; font-weight: 700; color: var(--brand-text); cursor: pointer; transition: background-color 0.15s, border-color 0.15s;
}
@media (hover: hover) and (pointer: fine) { .suggest-btn:hover { background: var(--raised); border-color: var(--brand-text); } }

/* ---------- hero: the mascot leans against a phone with the weekend concept screen (it is a mobile app) ----------
   One size variable --ph (phone height) drives the whole group. The pose leans to the image's left, so the phone is
   on his left: his left shoulder/upper arm rests on the phone's right edge, slightly in front of it; the phone tilts
   3 deg toward him on its bottom-right corner; both stand on one ground line (bottom: 0). Not mirrored (the suit
   lettering would mirror). Measured on mascot-310: shoulder edge at x 3.9 %, 40 % from the top.
   Phone 300:620 -> width 0.4839 ph. Mascot 1.12 ph tall -> 0.4183 ph wide, placed at 0.4926 ph. */
.hero-visual { display: flex; position: relative; justify-content: center; align-items: flex-end; padding-top: 8px; }
.lean { --ph: 250px; position: relative; flex: none; width: calc(var(--ph) * 0.911); height: calc(var(--ph) * 1.12); }
.lean-phone {
  position: absolute; z-index: 1; left: 0; bottom: 0; width: calc(var(--ph) * 0.4839); height: var(--ph);
  rotate: 3deg; transform-origin: 100% 100%;
}
.lean-phone img { width: 100%; height: 100%; filter: drop-shadow(0 16px 26px var(--shadow)); }
.lean-m { position: absolute; z-index: 2; bottom: 0; left: calc(var(--ph) * 0.4926); width: calc(var(--ph) * 0.4183); height: calc(var(--ph) * 1.12); }
.lean .hero-mascot { position: static; width: 100%; height: 100%; animation: none; filter: drop-shadow(6px 12px 16px rgba(5, 6, 10, 0.45)); }
/* the phone's soft shadow on his side that faces it (masked to his silhouette) */
.lean-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(5, 6, 10, 0.55), rgba(5, 6, 10, 0.18) 26%, transparent 46%);
  -webkit-mask: url("../img/mascot-310.webp") center / 100% 100% no-repeat; mask: url("../img/mascot-310.webp") center / 100% 100% no-repeat;
}
/* contact shadow on the ground under the phone base and his feet */
.lean-floor {
  position: absolute; z-index: 0; left: -4%; right: -6%; bottom: calc(var(--ph) * -0.035); height: calc(var(--ph) * 0.08);
  background: radial-gradient(closest-side, rgba(5, 6, 10, 0.9), rgba(5, 6, 10, 0.35) 60%, transparent);
}
.lean { animation: float 6s ease-in-out infinite; }
@media (max-width: 767px) {
  .hero-visual { margin-top: 8px; }
  .glow {
    position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(3, 103, 253, 0.45), rgba(3, 103, 253, 0.14) 58%, transparent 74%);
  }
}
@media (min-width: 768px) {
  .hero-visual { min-height: 0; }
  .lean { --ph: clamp(200px, 26vw, 300px); }
  .glow { width: 320px; height: 320px; }
}
@media (min-width: 960px) {
  .hero-visual { min-height: 560px; }
  .lean { --ph: clamp(320px, min(60vh, 34vw), 460px); }
  .glow { width: 520px; height: 520px; }
}

/* S3 fan on phones: smaller card details (after the v9 card rules so they win) */
@media (max-width: 639px) {
  .post-bubble { top: 34px; left: 9px; right: 9px; padding: 7px 9px; font-size: 0.6875rem; }
  .post-top { left: 10px; right: 10px; top: 9px; font-size: 0.6875rem; }
  .post-cap { left: 10px; right: 10px; bottom: 16px; }
  .post-label { font-size: 0.8125rem; }
  .post-text { font-size: 0.71875rem; }
  .post-bar { left: 10px; right: 10px; bottom: 8px; }
  .planner { left: 10px; right: 10px; top: 32px; gap: 4px; }
  .planner-row { padding: 4px 6px; font-size: 0.625rem; grid-template-columns: 22px 1fr auto; }
  .planner-series { font-size: 0.6875rem; }
  .post .post-cap .post-play { width: 28px; height: 28px; bottom: calc(100% + 8px); }
  .post .post-cap .post-play::after { left: 11px; top: 8px; border-width: 6px 0 6px 9px; }
}

/* S3 cards are links to their platform: the link covers the card; the focus ring goes around the whole card */
.post-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; border-radius: inherit; }
.post-link:focus-visible { outline: none; }
.post:has(.post-link:focus-visible) { outline: 3px solid var(--brand-text); outline-offset: 4px; }
.post:focus-within { --lift: -16px; z-index: 4; }
/* hero: the phone + mascot group centred in its column */
@media (min-width: 768px) { .hero-visual { align-items: center; } }
/* the narrowest phones (320): tighter card type so captions, planner and bubble keep clear of each other */
@media (max-width: 359px) {
  .post-bubble { top: 30px; padding: 5px 7px; font-size: 0.625rem; border-radius: 10px; }
  .post-mascot { height: 40%; }
  .post-label { font-size: 0.71875rem; }
  .post-text { font-size: 0.625rem; }
  .post-top { font-size: 0.625rem; }
  .planner { top: 28px; gap: 3px; }
  .planner-badge { font-size: 0.5rem; }
  .planner-series { font-size: 0.625rem; }
  .planner-row { padding: 3px 5px; font-size: 0.5625rem; border-radius: 7px; }
}
@media (max-width: 359px) { .post-3 .post-play { display: none; } }

/* first screen on desktop: the phone + mascot sit beside the headline (not at the bottom of a tall row), the racing
   line loops behind them instead of crossing the text, and the whole form fits a 1280 x 800 screen */
@media (min-width: 960px) {
  .hero { padding: 36px 0 88px; }
  .hero-grid { align-items: start; }
  .hero-visual { min-height: 0; padding-top: 12px; align-items: flex-start; }
  .h1 { margin-bottom: 14px; }
  .lead { margin-bottom: 22px; }
  .track { left: 50%; right: 0; top: 2%; width: auto; height: 78%; opacity: 0.22; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .hero-grid { align-items: start; }
  .hero-visual { align-items: flex-start; padding-top: 24px; }
  .lean { --ph: clamp(220px, 29vw, 270px); }
}

/* ---------- v11 mobile hero (< 960): the phone + leaning mascot on the blue glow is the opener, the headline sits
   right under it, then the lead and the form. Desktop (>= 960) is unchanged. ---------- */
@media (max-width: 959px) {
  .hero { padding: 4px 0 44px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: start; }
  .hero-visual { order: -1; min-height: 0; margin-top: 0; padding-top: 10px; align-items: flex-end; justify-content: center; }
  .lean { --ph: min(236px, 60vw); }
  .glow {
    position: absolute; left: 50%; top: 54%; width: min(440px, 118vw); height: min(380px, 100vw); transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(3, 103, 253, 0.62), rgba(3, 103, 253, 0.22) 55%, transparent 76%);
  }
  .hero-copy { padding-top: 6px; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .hero-copy { width: 100%; max-width: 640px; margin: 0 auto; }
  .lean { --ph: 262px; }
}

/* ---------- v11 mobile sticky call-to-action (< 960; js/signup.js shows and hides it) ---------- */
.mcta { display: none; }
@media (max-width: 959px) {
  /* A floating bar, lifted off the bottom edge: in iOS Safari the first tap in the very bottom strip of the screen
     brings the minimised toolbar back and is swallowed, so the button must not sit down there. */
  .mcta {
    display: block; position: fixed; z-index: 40; left: var(--gutter); right: var(--gutter);
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding: 8px;
    background: rgba(14, 15, 22, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r4);
    box-shadow: 0 12px 28px rgba(5, 6, 10, 0.55);
    transform: translateY(calc(100% + 40px)); visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .mcta.is-shown { transform: none; visibility: visible; transition: transform 0.22s ease, visibility 0s; }
  .mcta[hidden] { display: none; }
  .mcta, .mcta-btn { touch-action: manipulation; }
  .mcta-btn { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
  .mcta-on body { padding-bottom: calc(var(--mcta-h, 76px) + 18px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .mcta, .mcta.is-shown { transition: none; } }

/* Turnstile widget slot (right above the submit button). With the interaction-only appearance it stays empty and
   takes no space unless the visitor has to click the check. */
.ts-slot { width: 100%; }
.ts-slot:not(:empty) { margin: 2px 0 12px; }

/* ---- recording choice (session replay needs consent) ---- */
.consent {
  position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 400px; padding: 18px 18px 16px; background: var(--raised); border: 1px solid var(--field-border, var(--border));
  border-radius: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.consent[hidden] { display: none; }
.consent-title { font-size: 1.05rem; letter-spacing: -0.01em; }
.consent-text { margin-top: 8px; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.consent-btn { min-height: 48px; padding: 0 12px; justify-content: center; }
.f-btn { appearance: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
/* wider screens: the recording-choice box and the sign-up bar would overlap, so the bar waits (phones: see the slim bar below) */
@media (min-width: 640px) { html.consent-on .mcta { display: none !important; } }
.consent .textlink { display: inline; min-height: 0; padding: 0; }
@media (min-width: 640px) { .consent { left: auto; right: 20px; bottom: 20px; } }
@media (prefers-reduced-motion: no-preference) { .consent { animation: consent-in 0.28s ease-out both; } }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.doc-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.doc-action .btn { min-height: 48px; padding: 0 18px; }
.doc-action .btn[hidden] { display: none; }
.doc-state { color: var(--text-muted); font-size: 0.95rem; }
.consent { max-height: calc(100vh - 24px); overflow-y: auto; }
.consent-more { margin-top: 6px; }
.consent-more > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 0.9rem;
  color: var(--brand-text); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px;
}
.consent-more > summary::-webkit-details-marker { display: none; }
.consent-more > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform 0.15s; }
.consent-more[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.consent-more-body p { margin-top: 8px; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted); }
.consent-more-body .textlink { font-size: inherit; }
@media (prefers-reduced-motion: reduce) { .consent-more > summary::after { transition: none; } }

/* ---------- page after sign-up (/check-your-email) ---------- */
.checkmail .doc-title { font-size: clamp(1.9rem, 5.5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.checkmail-open, .checkmail-resend { margin-top: 20px; }
.checkmail .btn { width: 100%; max-width: 320px; }
.checkmail [hidden] { display: none !important; }
.checkmail-status { max-width: 52ch; }

/* ---------- back to top (js/totop.js) ---------- */
.to-top {
  position: fixed; z-index: 60; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: var(--brand); color: #fff; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); cursor: pointer;
  opacity: 0; transition: opacity 0.2s ease, background-color 0.15s;
}
.to-top[hidden] { display: none; }
/* no back-to-top button on phones, tablets and any touch screen (js/totop.js also removes it) */
@media (hover: none), (pointer: coarse), (max-width: 767px) { .to-top { display: none !important; } }
.to-top.is-on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .to-top:hover { background: var(--brand-hover); } }
.to-top:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 50%; }
/* above the mobile sign-up bar while it is shown */
html.mcta-on .to-top { bottom: calc(16px + var(--mcta-h, 76px)); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* =====================================================================
   v8: big-races section and the blue-tinted "planned" section
   ===================================================================== */

/* ---------- big races: page navy with a soft violet and cobalt glow, outline numerals ---------- */
.races {
  position: relative; overflow: clip; isolation: isolate; padding: 40px 0 32px;
  background:
    radial-gradient(ellipse var(--vglow-w) var(--vglow-h) at 88% 0%, rgba(120, 60, 230, 0.34), transparent 100%),
    radial-gradient(ellipse var(--cglow-w) var(--cglow-h) at 6% 100%, rgba(3, 103, 253, 0.34), transparent 100%),
    var(--bg);
}
@media (min-width: 768px) { .races { padding: 56px 0 48px; } }
@media (min-width: 960px) { .races { padding: 64px 0 56px; } }
.races-head { display: grid; gap: 10px; max-width: 64ch; }
.races .eyebrow { margin-bottom: 0; }
.races h2 { font-weight: 600; letter-spacing: -0.02em; }
.races .section-intro { margin-top: 0; }
.race-grid { display: grid; gap: 10px; margin-top: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .race-grid { gap: 14px; margin-top: 44px; } }
@media (min-width: 900px) { .race-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.race-card {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 18px;
  background: #14161f; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r3);
}
.race-tag {
  font-size: 3.25rem; font-size: clamp(2.5rem, 40cqi, 5.25rem);
  font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; color: #ffffff;
}
.race-tag-word { font-size: 2.25rem; font-size: clamp(1.75rem, 27cqi, 3.5rem); letter-spacing: -0.035em; }
/* outline numerals: the fill matches the card and is painted over the inner half of the stroke, so the font's
   overlapping contours do not show; where text-stroke or paint-order is not supported the numerals stay solid white */
@supports (-webkit-text-stroke: 3px #ffffff) and (paint-order: stroke fill) {
  .race-tag { color: #14161f; -webkit-text-stroke: 3px #ffffff; paint-order: stroke fill; }
}
.race-card h3 { margin-top: 10px; font-size: 1.0625rem; line-height: 1.25; }
.race-series { font-size: 0.875rem; line-height: 1.4; color: var(--text-muted); }
.races-note { margin-top: 24px; max-width: 70ch; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .race-card { transition: transform 0.18s ease-out, border-color 0.18s; }
  @media (hover: hover) and (pointer: fine) { .race-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.4); } }
}

/* ---------- "planned for the app": page navy like the sections around it, no edge anywhere (glows are paired half by half, see #series) ---------- */
#coming {
  border-top: 0; padding-top: 60px; padding-bottom: 32px;
  background:
    radial-gradient(ellipse var(--vglow-w) var(--vglow-h) at 88% 0%, rgba(120, 60, 230, 0.34), transparent 100%),
    radial-gradient(ellipse 40% 22% at 0% 40%, rgba(3, 103, 253, 0.14), transparent 100%),
    radial-gradient(ellipse 520px 160px at 50% 100%, rgba(3, 103, 253, 0.09), transparent 100%),
    var(--bg);
}
@media (min-width: 768px) { #coming { padding-top: 72px; padding-bottom: 48px; } }
@media (min-width: 960px) { #coming { padding-top: 80px; padding-bottom: 56px; } }

/* ---------- the preview section below stays page-dark, with a soft blue glow ---------- */
#preview { border-top: 0; padding-top: 28px; background: radial-gradient(ellipse 520px 160px at 50% 0%, rgba(3, 103, 253, 0.09), transparent 100%); }
@media (min-width: 768px) { #preview { padding-top: 40px; } }
@media (min-width: 960px) { #preview { padding-top: 48px; } }
#preview .showcase { margin-top: 0; }

/* ---------- race and series pages ---------- */
/* Shared by src/templates/race.html and the series template. Colours per series and class come from the generated
   .sc-<key> / .cc-<key> classes that the build appends to this file (--chip, --chip-text); nothing here is set inline. */
.pg-page { overflow-x: clip; }
.pg-hero {
  position: relative; isolation: isolate; overflow: clip; padding-bottom: 28px;
  background:
    radial-gradient(ellipse 420px 300px at 100% 120px, rgba(3, 103, 253, 0.26), transparent 100%),
    radial-gradient(ellipse 300px 130px at 0% calc(100% - 130px), rgba(120, 60, 230, 0.2), transparent 100%),
    var(--bg);
}
.pg-hero-in { position: relative; }
.pg-crumb { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-top: 8px; font-size: 0.8125rem; color: var(--text-muted); }
.pg-crumb a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 9px;
  background: var(--raised); border: 1px solid var(--border); border-radius: 7px;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase;
  color: var(--text); text-decoration: none;
}
.pg-chip i { flex: none; display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--chip, var(--brand-text)); }
@media (hover: hover) and (pointer: fine) { a.pg-chip:hover { border-color: var(--text-muted); } }
.pg-tag { margin-top: 14px; font-size: 4.5rem; }
.pg-tag.race-tag-word { font-size: 3rem; letter-spacing: -0.035em; }
@supports (-webkit-text-stroke: 3px #ffffff) and (paint-order: stroke fill) {
  .pg-tag { color: var(--bg); }   /* the fill matches the page, see .race-tag */
}
.pg-title {
  max-width: calc(100% - 132px); margin-top: 8px;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em;
  overflow-wrap: break-word; text-wrap: balance;
}
.pg-where { margin-top: 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }
.pg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 0; }
.pg-fact {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px;
  padding: 10px; background: rgba(21, 23, 34, 0.7); border: 1px solid var(--border); border-radius: 12px;
}
.pg-fact dt { font-size: 0.6875rem; font-weight: 600; line-height: 1.3; color: var(--text-muted); }
.pg-fact dd { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.pg-fact-long dd { font-size: 0.9375rem; line-height: 1.25; letter-spacing: -0.01em; }
.pg-units { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.75rem; color: var(--text-muted); }
.pg-units[hidden] { display: none; }
.pg-unit-switch {
  display: inline-flex; padding: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.6875rem; font-weight: 800; cursor: pointer;
}
.pg-unit-switch span { padding: 5px 11px; border-radius: 999px; color: var(--text-muted); }
.pg-unit-switch span.on { background: var(--raised); color: var(--text); }
.pg-next {
  display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.pg-next b { font-size: 0.8125rem; }
.pg-next-when { font-size: 0.75rem; color: var(--text-muted); }
/* track outline: a thin line at the right of the header on a phone, beside the facts on a desktop */
.pg-outline {
  position: absolute; top: 56px; right: var(--gutter); width: 124px; height: 150px; margin: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.pg-trk { flex: 1 1 auto; width: 100%; min-height: 0; opacity: 0.9; }
.pg-trk path { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pg-outline figcaption { flex: none; font-size: 0.6875rem; line-height: 1.3; text-align: right; color: var(--text-muted); }

.pg-body { display: grid; gap: 0; }
.pg-sec { min-width: 0; padding: 26px 0 4px; }
.pg-sec .eyebrow { margin-bottom: 0; }
.pg-h2 { margin: 6px 0 10px; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; }
.pg-story p { max-width: 62ch; font-size: 0.875rem; line-height: 1.65; }
.pg-story p + p { margin-top: 10px; }
.pg-sec .pg-sec-note { margin-bottom: 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }

.pg-rec { margin-top: 10px; }
.pg-rec li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--border); }
.pg-rec li:last-child { border-bottom: 0; }
.pg-rec-big { font-size: 1.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.pg-rec-long { font-size: 1.0625rem; }
.pg-rec li > span { font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }
.pg-rec strong { font-weight: 700; color: var(--text); }

/* sealed editions */
.pg-ed-list { display: grid; gap: 10px; }
.ed { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.ed-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ed-year { font-size: 1.0625rem; font-weight: 800; line-height: 1.2; }
.ed-meta { max-width: none; font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }
.sealed {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.slots { display: grid; gap: 5px; margin: 12px 0; }
.slot {
  display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 8px; align-items: center; height: 28px; padding: 0 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.6875rem; font-weight: 700; color: var(--text-muted);
}
.slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot i { display: block; height: 8px; background: #252839; border-radius: 5px; }
.slot:nth-child(1) i { width: 80%; } .slot:nth-child(2) i { width: 65%; } .slot:nth-child(3) i { width: 72%; }
.slot:nth-child(4) i { width: 60%; } .slot:nth-child(5) i { width: 76%; } .slot:nth-child(6) i { width: 55%; } .slot:nth-child(7) i { width: 68%; }
.slot:last-child i { width: 90%; }
/* the hold button: --hold (0 to 1) is set by the script while it is pressed */
.hold {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 16px;
  overflow: hidden; border: 0; border-radius: 12px; background: var(--brand); color: var(--text-on-brand);
  font-size: 0.875rem; font-weight: 700; line-height: 1.2; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y;
}
.hold > :not(.hold-fill) { position: relative; }
.hold-fill { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.18); transform: scaleX(var(--hold, 0)); transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) { .hold:hover { background: var(--brand-hover); } }
.hold-help, .ed-noscript { max-width: none; margin-top: 8px; font-size: 0.6875rem; line-height: 1.45; text-align: center; color: var(--text-muted); }
.ed-open[hidden] { display: none; }

/* icons (stroke = currentColor unless noted) */
.pg-ico { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--brand-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pg-ico-sm { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.4; }
.pg-ico-hold { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; }

/* in the app */
.pg-app-list { margin-top: 6px; }
.pg-app-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.pg-app-list li:last-child { border-bottom: 0; }
.pg-app-list .pg-ico { margin-top: 2px; }
.pg-app-list li > span { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
.pg-app-list b { display: block; font-size: 0.9375rem; color: var(--text); }
.pg-shot { width: min(260px, 72vw); margin: 18px auto 0; }
.pg-shot img { width: 100%; height: auto; filter: drop-shadow(0 22px 24px var(--shadow)) drop-shadow(0 0 34px rgba(3, 103, 253, 0.18)); }

/* sign-up block: a soft glow that fades out inside the block, no edge */
.pg-cta { margin-top: 26px; padding: 32px 0; background: radial-gradient(ellipse 340px 140px at 50% 42%, rgba(3, 103, 253, 0.16), transparent 100%); }
.pg-cta-title { text-wrap: balance; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; }
.pg-cta-text { margin: 6px 0 16px; font-size: 0.875rem; color: var(--text-muted); }

/* more big races: a swipe row without a native scrollbar; the arrows and the progress track are shown by the script */
.pg-more { padding: 22px 0 8px; }
.f-osm { display: block; margin-top: 4px; }
.pg-more-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; }
.pg-more-head .eyebrow { margin-bottom: 0; }
.pg-arrows { display: flex; gap: 6px; }
.pg-arrows[hidden] { display: none; }
.pg-arr {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0 0 3px; background: transparent; color: var(--text);
  border: 1.5px solid var(--field-border); border-radius: 50%; font-size: 1.375rem; line-height: 1; cursor: pointer;
}
.pg-arr:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .pg-arr:not(:disabled):hover { background: var(--raised); border-color: var(--text-muted); } }
/* the row is as wide as the page and starts level with the content (.wrap is 1180 px at most) */
.pg-rail {
  --edge: max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter)));
  display: flex; gap: 10px; margin-top: 8px; padding: 8px var(--edge) 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none;
}
.pg-rail::-webkit-scrollbar { display: none; }
.pg-rail-card { flex: none; width: 168px; padding: 0; scroll-snap-align: start; }
.pg-rail-card a {
  container-type: inline-size; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 16px 18px;
  color: var(--text); text-decoration: none; border-radius: var(--r3);
}
.pg-track { position: relative; height: 4px; margin-top: 8px; background: var(--raised); border-radius: 4px; }
.pg-track[hidden] { display: none; }
.pg-thumb { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--brand-text); border-radius: 4px; }
.pg-note { max-width: 70ch; margin-top: 28px; padding-bottom: 8px; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); }

@media (min-width: 768px) {
  .pg-hero { background:
    radial-gradient(ellipse 640px 300px at 96% 140px, rgba(3, 103, 253, 0.26), transparent 100%),
    radial-gradient(ellipse 360px 160px at 0% calc(100% - 160px), rgba(120, 60, 230, 0.2), transparent 100%),
    var(--bg); }
  .pg-ed-list { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .pg-rail-card { width: 200px; }
  .pg-rail { gap: 14px; }
  .pg-sec { padding-top: 36px; }
}
@media (min-width: 960px) {
  .pg-hero { padding-bottom: 48px; }
  .pg-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); column-gap: 56px; }
  .pg-crumb { grid-column: 1 / -1; }
  .pg-hero-main { min-width: 0; }
  .pg-outline { position: static; grid-column: 2; grid-row: 2; width: auto; height: 380px; align-self: center; align-items: center; }
  .pg-trk { max-width: 340px; }
  .pg-outline figcaption { text-align: center; }
  .pg-tag { font-size: 6rem; }
  .pg-tag.race-tag-word { font-size: 4rem; }
  .pg-title, .pg-where { max-width: none; }
  .pg-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; }
  .pg-editions, .pg-app { grid-column: 1 / -1; }
  .pg-app { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
  .pg-shot { width: 300px; margin: 0; }
  .pg-cta { padding: 48px 0; }
  .pg-story p { max-width: 58ch; }
}

/* ---------- series pages ---------- */
/* src/templates/series.html. Builds on the shared .pg-* rules above; colours come from the generated .sc-<slug> and .cc-<key> classes (--chip). */
.sr-since { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sr-since small {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--text-muted);
  -webkit-text-stroke: 0; paint-order: normal;
}
.sr-title { max-width: none; }

/* season bar */
.sr-seasons { margin-top: 12px; }
.sr-season { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.sr-season[hidden] { display: none; }
.sr-season-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sr-season-top b { font-size: 0.8125rem; }
.sr-season-top span { font-size: 0.75rem; text-align: right; color: var(--text-muted); }
.sr-pips { display: flex; gap: 3px; margin-top: 10px; }
.sr-pip { flex: 1 1 0; min-width: 0; height: 6px; background: #252839; border-radius: 4px; }
.sr-pip.is-done { background: var(--brand-text); }
.sr-pip.is-now { background: #ffffff; }

/* classes */
.sr-cls { display: grid; gap: 8px; margin-top: 12px; }
.sr-cl { padding: 12px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.sr-cl-h { display: flex; align-items: center; gap: 8px; }
.sr-cl-h i { flex: none; display: block; width: 10px; height: 10px; background: var(--chip, var(--brand-text)); border-radius: 3px; }
.sr-cl-h b { font-size: 0.9375rem; line-height: 1.25; }
.sr-cl-h span { margin-left: auto; font-size: 0.75rem; font-weight: 700; text-align: right; color: var(--text-muted); }
.sr-cl-text { max-width: none; margin-top: 6px; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); }

/* the makes */
.sr-sub { margin-top: 16px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: var(--text-muted); }
.sr-sub:first-of-type { margin-top: 12px; }
.sr-makes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sr-make { padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; }
.sr-make-new { border-color: var(--brand-text); }
.sr-new { margin-left: 6px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-text); }

/* calendar and next year */
.sr-rounds { margin-top: 10px; }
.sr-rd {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border); break-inside: avoid;
}
.sr-rd:last-child { border-bottom: 0; }
.sr-dt { text-align: center; font-size: 0.625rem; font-weight: 800; line-height: 1.15; letter-spacing: 0.04em; color: var(--text-muted); }
.sr-dt b { display: block; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--text); }
.sr-nm { min-width: 0; }
.sr-nm > b, .sr-rd-link { display: block; font-size: 0.875rem; font-weight: 700; line-height: 1.25; color: var(--text); text-decoration: none; }
.sr-rd-link::after { content: "\203A"; margin-left: 6px; color: var(--brand-text); }
@media (hover: hover) and (pointer: fine) { .sr-rd-link:hover { text-decoration: underline; } }
.sr-nm small { display: block; margin-top: 1px; font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }
.sr-st { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: right; color: var(--text-muted); }
.sr-st:empty { display: none; }
.sr-rd.is-done .sr-nm > b, .sr-rd.is-done .sr-rd-link { color: #b9bfce; }
.sr-rd.is-today, .sr-rd.is-weekend {
  margin: 2px -6px; padding-inline: 6px 8px; background: rgba(3, 103, 253, 0.1); border-radius: 12px; border-bottom-color: transparent;
}
.sr-rd.is-today .sr-st, .sr-rd.is-weekend .sr-st { padding: 3px 7px; background: var(--brand); border-radius: 6px; color: var(--text-on-brand); }
.sr-calnote { max-width: 62ch; margin-top: 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
.sr-cal[hidden], .sr-nextyear[hidden] { display: none; }
.sr-rounds-plain .sr-st { display: none; }
.sr-rounds-plain .sr-rd { padding: 8px 0; }
.sr-rounds-plain .sr-dt b { font-size: 0.9375rem; }

/* good to know */
.sr-dyk { margin-top: 6px; }
.sr-dyk li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.sr-dyk li:last-child { border-bottom: 0; }
.sr-dyk b { display: block; font-size: 0.9375rem; line-height: 1.3; }
.sr-dyk p { max-width: none; margin-top: 3px; font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); }

/* more series */
.sr-rail-card a { gap: 6px; }
.sr-rail-card .pg-chip { align-self: flex-start; }
.sr-card-name { margin-top: 6px; font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }
.sr-card-type { font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); }

@media (min-width: 768px) {
  .sr-cls { grid-template-columns: 1fr 1fr; }
  .sr-rounds { columns: 2; column-gap: 48px; }
  .sr-rounds-plain { columns: 2; }
}
@media (min-width: 960px) {
  .sr-hero .pg-hero-in { display: block; }
  .sr-hero .pg-hero-main { max-width: 760px; }
  .sr-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sr-grid, .sr-cal, .sr-good, .sr-nextyear, .sr-app { grid-column: 1 / -1; }
  .sr-cls { grid-template-columns: 1fr; }
  .sr-dyk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
  .sr-dyk li { border-bottom: 0; }
  .sr-app { display: block; }
  .sr-rounds-plain { columns: 3; }
}

/* ---------- race page behaviour ---------- */
/* The revealed result of an edition (built by js/race.js), the status line and the open/sealed switch. */
.ed.is-open .slots, .ed.is-open .hold, .ed.is-open .hold-help, .ed.is-open .ed-status, .ed.is-open .sealed { display: none; }
.ed-status { max-width: none; margin-top: 8px; font-size: 0.75rem; font-weight: 600; line-height: 1.45; text-align: center; color: var(--warn); }
.ed-status:empty { display: none; }
.hold { touch-action: pan-y; }
.ed-open { margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ed.is-open .ed-open { animation: ed-in 0.35s ease; }
}
@keyframes ed-in { from { opacity: 0; transform: translateY(4px); } }
.ed-open-title { font-size: 0.9375rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.ed-open-title:focus:not(:focus-visible) { outline: none; }
.ed-lbl { max-width: none; margin: 14px 0 7px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; color: var(--text-muted); }
.ed-open-title + .ed-lbl { margin-top: 10px; }
.ed-no {
  flex: none; display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 5px; border-radius: 6px;
  background: var(--chip, var(--raised)); color: var(--chip-text, var(--text)); font-size: 0.6875rem; font-weight: 800; line-height: 1;
}
.ed-win { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; background: var(--bg); border: 1px solid #3a3f56; border-radius: 12px; }
.ed-win .ed-no { min-width: 48px; height: 34px; border-radius: 8px; font-size: 0.9375rem; }
.ed-win b { display: block; font-size: 0.9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.ed-car { display: block; margin-top: 1px; font-size: 0.75rem; line-height: 1.35; color: var(--text-muted); }
.ed-drv { display: block; margin-top: 6px; font-size: 0.78125rem; line-height: 1.45; overflow-wrap: anywhere; }
.ed-rows { display: flex; flex-direction: column; margin-top: 6px; }
.ed-row { display: grid; align-items: center; gap: 9px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.ed-row:last-child { border-bottom: 0; }
.ed-pod .ed-row { grid-template-columns: 22px auto minmax(0, 1fr) auto; }
.ed-cls .ed-row { grid-template-columns: minmax(0, 4.75rem) auto minmax(0, 1fr); }
.ed-pos, .ed-cn { font-size: 0.65625rem; font-weight: 800; line-height: 1.25; color: var(--text-muted); overflow-wrap: anywhere; }
.ed-who b { display: block; font-size: 0.78125rem; line-height: 1.3; overflow-wrap: anywhere; }
.ed-who small { display: block; font-size: 0.6875rem; line-height: 1.35; color: var(--text-muted); overflow-wrap: anywhere; }
.ed-gap { font-size: 0.6875rem; font-weight: 700; white-space: nowrap; color: var(--text-muted); }
.ed-tl { position: relative; margin: 0; padding: 0; list-style: none; }
.ed-tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--border); }
.ed-tl li { position: relative; padding: 0 0 12px 22px; }
.ed-tl li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand-text); }
.ed-tl li:last-child { padding-bottom: 2px; }
.ed-tl li:last-child::before { background: var(--brand-text); }
.ed-when { display: block; font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-text); }
.ed-tl p { max-width: none; margin-top: 2px; font-size: 0.78125rem; line-height: 1.5; }
.ed-fl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; font-size: 0.71875rem; }
.ed-fl span { flex: none; font-weight: 700; color: var(--text-muted); }
.ed-fl b { min-width: 0; font-size: 0.71875rem; text-align: right; overflow-wrap: anywhere; }
.ed-again {
  display: block; width: 100%; min-height: 44px; margin-top: 12px; padding: 0 16px; background: transparent; color: var(--text);
  border: 1.5px solid var(--field-border); border-radius: 10px; font: 700 0.8125rem/1.2 var(--font); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .ed-again:hover { background: var(--raised); border-color: var(--text-muted); } }

/* ---------- links from the homepage and the /races and /series index pages ---------- */
/* The race cards and series badges are links: same look as before, plus a hover and a focus-visible state. The global
   :focus-visible rule squares the corners (--r1), so the pill and the card keep their own radius while focused. */
.race-grid > li { display: flex; min-width: 0; }
a.race-card { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
a.race-card:focus-visible { border-color: rgba(255, 255, 255, 0.4); border-radius: var(--r3); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a.race-card:hover { border-color: rgba(255, 255, 255, 0.4); } }
a.sbadge { text-decoration: none; }
a.sbadge:focus-visible { border-color: var(--brand-text); border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { a.sbadge:hover { border-color: var(--brand-text); } }
.races-hour { max-width: 60ch; font-weight: 600; line-height: 1.5; color: var(--text); }
/* index pages: a calm hero, then the list on the plain page colour (no glow edge against the hero or the sign-up block) */
.ix-hero { padding: 36px 0 12px; }
.ix-title { max-width: none; margin-top: 0; }
.ix-lead { max-width: 60ch; margin-top: 12px; color: var(--text-muted); }
.ix-list { padding: 20px 0 16px; border-top: 0; background: var(--bg); }
.ix-list .race-grid { margin-top: 0; }
.ix-list .series-groups { margin-top: 0; }
@media (min-width: 768px) { .ix-hero { padding: 56px 0 20px; } .ix-list { padding: 28px 0 24px; } }
@media (min-width: 960px) { .ix-hero { padding: 72px 0 24px; } }

/* =====================================================================
   2026-11-02: the sign-up fits the first phone screen; sign-up bar; slim recording-choice bar; list count
   ===================================================================== */

/* "Join N fans on the list" under the first button (js/signup.js; shown only from 50, rounded down to 10) */
.proof { margin: 10px 0 0; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--text-muted); }
.proof[hidden] { display: none; }

/* Phones: headline, founding price, email field and button all in the first screen (390 x 844). The phone + mascot stay
   the opener, only smaller, and the form spacing is a little tighter. Desktop (>= 960) and tablets keep their layout. */
@media (max-width: 767px) {
  .hero { padding-bottom: 36px; }
  .hero-visual { padding-top: 6px; }
  .lean { --ph: min(150px, 40vw); }
  .glow { width: min(320px, 84vw); height: min(260px, 68vw); }
  .h1 { margin-bottom: 10px; }
  .lead { margin-bottom: 16px; }
  #form-hero .form-head { margin-bottom: 8px; }
  #form-hero .perk-box { margin-bottom: 10px; }
  #form-hero .field { margin-bottom: 10px; }
  #form-hero .checks { margin-bottom: 8px; }
  #form-hero .consent-note { margin-bottom: 10px; }
}
/* Short screens (the Instagram and TikTok in-app browsers, a phone held sideways): the visual goes below the form, so
   the form starts right under the header. */
@media (max-width: 959px) and (max-height: 819px) {
  .hero-copy { padding-top: 14px; }
  .hero-visual { order: 1; padding-top: 24px; }
  .lean { --ph: min(200px, 52vw); }
}

/* the sign-up bar's label: "€19 founding price · Get my beta invite" on one line (two short lines below 360 px) */
.mcta-btn { padding: 0 12px; font-size: 0.9375rem; }
.mcta-btn .btn-label { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; }
.mcta-perk, .mcta-action { white-space: nowrap; }
.mcta-perk { font-weight: 600; color: rgba(255, 255, 255, 0.88); }
.mcta-sep { white-space: pre; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 359px) { .mcta-sep { display: none; } .mcta-btn .btn-label { flex-direction: column; align-items: center; } .mcta-btn { min-height: 56px; } }

/* the recording choice on phones: a slim bar (title; "How this works", No thanks, Allow), the explanation behind the link.
   The sign-up bar stays visible and sits right above it (--consent-h is set by js/analytics.js). */
.consent-more-lead { display: none; }
@media (max-width: 639px) {
  .consent {
    left: var(--gutter); right: var(--gutter); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
    padding: 10px 10px 10px 14px; border-radius: var(--r4); max-height: calc(100svh - var(--hdr, 62px) - 24px);
  }
  .consent-title { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.3; }
  .consent-text { display: none; }
  .consent-more { grid-column: 1; margin-top: 0; min-width: 0; }
  .consent-more[open] { grid-column: 1 / -1; }
  .consent-more > summary { min-height: 44px; font-size: 0.875rem; }
  .consent-more-lead { display: block; }
  .consent-more-body p { margin-top: 6px; }
  .consent-actions { grid-column: 2; display: flex; gap: 8px; margin-top: 0; }
  .consent-btn { min-height: 44px; padding: 0 14px; font-size: 0.875rem; white-space: nowrap; }
  html.consent-on .mcta { bottom: calc(18px + var(--consent-h, 96px) + 8px + env(safe-area-inset-bottom, 0px)); }
  html.consent-on.mcta-on body { padding-bottom: calc(var(--mcta-h, 76px) + var(--consent-h, 96px) + 26px + env(safe-area-inset-bottom, 0px)); }
}

/* series and class colours from content/colors.json (build/page-css.mjs) */
.sc-f1{--chip:#e10600}
.sc-f1{--chip-text:#ffffff}
.sc-f2{--chip:#0090d0}
.sc-f2{--chip-text:#000000}
.sc-f3{--chip:#e10600}
.sc-f3{--chip-text:#ffffff}
.sc-f1-academy{--chip:#db2777}
.sc-f1-academy{--chip-text:#ffffff}
.sc-formula-e{--chip:#06b6d4}
.sc-formula-e{--chip-text:#000000}
.sc-indycar{--chip:#f97316}
.sc-indycar{--chip-text:#000000}
.sc-wec{--chip:#1d4ed8}
.sc-wec{--chip-text:#ffffff}
.sc-imsa{--chip:#6d3fc0}
.sc-imsa{--chip-text:#ffffff}
.sc-gtwc-eu{--chip:#d7262f}
.sc-gtwc-eu{--chip-text:#ffffff}
.sc-dtm{--chip:#e2001a}
.sc-dtm{--chip-text:#ffffff}
.sc-wrc{--chip:#84cc16}
.sc-wrc{--chip-text:#000000}
.sc-motogp{--chip:#00a99d}
.sc-motogp{--chip-text:#000000}
.sc-moto2{--chip:#0ea5e9}
.sc-moto2{--chip-text:#000000}
.sc-moto3{--chip:#f43f5e}
.sc-moto3{--chip-text:#000000}
.sc-worldsbk{--chip:#0f9d8a}
.sc-worldsbk{--chip-text:#000000}
.sc-nascar-cup{--chip:#f2b600}
.sc-nascar-cup{--chip-text:#000000}
.cc-hypercar{--chip:#dc2626}
.cc-hypercar{--chip-text:#ffffff}
.cc-lmgt3{--chip:#15803d}
.cc-lmgt3{--chip-text:#ffffff}
.cc-lmp2{--chip:#3b82f6}
.cc-lmp2{--chip-text:#000000}
.cc-gtp{--chip:#dc2626}
.cc-gtp{--chip-text:#ffffff}
.cc-gtd-pro{--chip:#ea580c}
.cc-gtd-pro{--chip-text:#000000}
.cc-gtd{--chip:#15803d}
.cc-gtd{--chip-text:#ffffff}
.cc-pro{--chip:#e5e7eb}
.cc-pro{--chip-text:#000000}
.cc-gold{--chip:#ca8a04}
.cc-gold{--chip-text:#000000}
.cc-silver{--chip:#9ca3af}
.cc-silver{--chip-text:#000000}
.cc-bronze{--chip:#b45309}
.cc-bronze{--chip-text:#ffffff}
.cc-pro-am{--chip:#7c3aed}
.cc-pro-am{--chip-text:#ffffff}
.cc-sp9{--chip:#dc2626}
.cc-sp9{--chip-text:#ffffff}
.cc-sp9-pro-am{--chip:#f97316}
.cc-sp9-pro-am{--chip-text:#000000}
.cc-sp-x{--chip:#6366f1}
.cc-sp-x{--chip-text:#000000}
.cc-cup2{--chip:#0ea5e9}
.cc-cup2{--chip-text:#000000}
.cc-rally1{--chip:#dc2626}
.cc-rally1{--chip-text:#ffffff}
.cc-wrc2{--chip:#3b82f6}
.cc-wrc2{--chip-text:#000000}
.cc-f1{--chip:#e10600}
.cc-f1{--chip-text:#ffffff}
.cc-indycar{--chip:#f97316}
.cc-indycar{--chip-text:#000000}
.cc-cup{--chip:#f2b600}
.cc-cup{--chip-text:#000000}