@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/big-shoulders-display-var.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/big-shoulders-display-var.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/big-shoulders-display-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  --bg: #0b0d10;
  --ink: #ece9e2;
  --muted: #8f948e;
  --line: #22262d;
  --accent: #c8f04b;
  --error: #ff7a6b;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); color: var(--ink); }

body {
  margin: 0;
  font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Hero: stage footage + scrim + copy + broadcast strip ---- */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  /* The video runs wider than the stage and is shifted right, so the rider sits beside the copy
     instead of under it. hero.js reads these two to map keypoints through the same box. */
  --shift: 13%;
  --wide: 115%;
}

.hero .stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* No mask (variant 3, "Edge"): the footage is graded down and vignetted instead of faded out. */
.hero .stage::before {
  /* Key light: a soft highlight screened behind the rider, over the video, under the canvas. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 26% 44% at 65% 44%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 45%, transparent 72%);
}
.hero .stage::after {
  /* Vignette: the studio's corners fall into the page ground instead of disappearing behind a mask. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 150% at 62% 75%, transparent 46%, rgba(11, 13, 16, .92) 100%),
    linear-gradient(to top, rgba(11, 13, 16, .85) 0%, transparent 28%);
}
.hero video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--shift);
  width: var(--wide);
  height: 100%;
  object-fit: cover;
  object-position: 80% 50%;
  filter: brightness(.74) contrast(1.15) saturate(1);
}
.hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.hero .scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(11, 13, 16, .92) 0%, rgba(11, 13, 16, .78) 30%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 0% 0%, rgba(11, 13, 16, .85) 0%, transparent 70%);
}

.hero .copy {
  position: relative; z-index: 2;
  padding-block: clamp(4rem, 10vh, 7rem) 2rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1rem;
  max-width: 40rem;
}

.eyebrow { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .12em; color: var(--ink); }

.hero h1 {
  font: 800 clamp(2.6rem, 7.5vw, 6rem)/.92 var(--display);
  margin: 0;
  letter-spacing: .005em;
  text-wrap: balance;
  color: var(--ink);
}
.hero .sub { color: #b9bcb5; max-width: 34ch; margin: 0; font-size: 1.05rem; font-family: var(--body); }

.signup label, .beta legend { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  padding: .8rem 1rem;
  font: inherit;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid #3a3f47;
  border-radius: 4px;
}
input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
button {
  padding: .8rem 1.25rem;
  font: 600 1rem var(--body);
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: default; }
button.quiet { background: transparent; color: var(--ink); border: 1px solid #3a3f47; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.error { color: var(--error); min-height: 1.5em; margin: 0.5rem 0 0; }
.beta { border: 0; padding: 0; margin: 0; }
.thanks { color: var(--accent); font-weight: 600; }
#turnstile-widget { margin-top: 0.5rem; }

/* ---- The strip: knee · bdc, stroke, cadence, position ---- */

.strip {
  position: relative; z-index: 2;
  margin-inline: clamp(1rem, 4vw, 2.5rem);
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  font-variant-numeric: tabular-nums;
}
.strip > div {
  padding: .8rem 1rem;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.strip > div:last-child { border-right: 0; }
.strip .k { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.strip .v { font: 800 clamp(2rem, 5vw, 3.4rem)/1 var(--display); color: var(--ink); transition: color .25s; }
.strip .v.live { color: var(--accent); }
.strip .v[data-state="unmeasured"] { color: var(--muted); }
.strip .v.tick { color: #fff; }
.strip .s { font-family: var(--mono); font-size: .75rem; color: var(--muted); min-height: 1.2em; }
.strip .v.word { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }

.hero .foot {
  position: relative; z-index: 2;
  padding-block: 0 1.1rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .75rem; color: var(--muted); letter-spacing: .04em;
}

/* ---- Sections below the hero: the spec sheet continues ---- */

#reads, #loop, #costs, footer {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(3rem, 8vh, 6rem);
  border-top: 1px solid var(--line);
}

.spec-heading {
  font: 700 clamp(1.6rem, 3.2vw, 2.4rem)/1.15 var(--display);
  max-width: 30ch;
  margin: 1rem 0 0;
  color: var(--ink);
  text-wrap: balance;
}

/* The beginner-facing lead, between the eyebrow and the display heading. */
.lead {
  font-family: var(--body);
  font-size: 1.1rem;
  max-width: 34ch;
  margin: .75rem 0 0;
  color: var(--ink);
}

/* The fitter guardrail, directly under the ledger. */
.guardrail {
  font-family: var(--mono);
  font-size: .8rem;
  max-width: 62ch;
  margin: 1.5rem 0 0;
  color: var(--muted);
}

/* Visually hides content while keeping it in the accessibility tree (the ledger's column headers). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The ledger: seven angles as rows, hairline rules, no vertical borders. */
.ledger { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.ledger tbody tr { border-top: 1px solid var(--line); }
.ledger td, .ledger th { padding: 1rem 0; vertical-align: baseline; }
.ledger .name { font: 700 1.25rem/1.2 var(--display); color: var(--ink); text-align: left; }
.ledger .joints { font-family: var(--mono); font-size: .8rem; color: var(--muted); padding-inline: 1.5rem; }
.ledger .moment { font-family: var(--mono); font-size: .8rem; color: var(--muted); text-align: right; }
.ledger .sets { font-family: var(--body); font-size: .9rem; color: var(--muted); width: 42%; padding-inline-start: 1.5rem; }
.ledger .sets b { color: var(--ink); font-weight: 600; }

/* This display change strips the implicit table/rowgroup/row/cell roles in Chromium and
   Firefox, so the markup carries explicit role="table"/"rowgroup"/"row"/"columnheader"/
   "rowheader"/"cell" attributes that survive it. */
@media (max-width: 640px) {
  .ledger, .ledger tbody, .ledger tbody tr { display: block; width: auto; }
  .ledger tbody tr { padding-block: .8rem; }
  .ledger td, .ledger tbody th { display: inline; padding: 0; }
  .ledger .name { display: block; margin-bottom: .3rem; }
  /* Keep "joints · moment" on one line where it fits; when it doesn't, the moment wraps to its
     own line without a leading dot (the dot is joints' own ::after, not moment's ::before). */
  .ledger .joints { white-space: nowrap; }
  .ledger .joints::after { content: " \00b7 "; }
  .ledger .moment { display: inline; text-align: left; }
  .ledger .sets { display: block; width: auto; margin-top: .5rem; padding-inline-start: 0; }
}

/* The loop: three numbered steps, the loop sentence, one spoken line. */
.loop-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem 0 0;
  padding: 0;
}
.loop-steps .num {
  display: block;
  font: 800 clamp(2.4rem, 5vw, 3.6rem)/1 var(--display);
  color: var(--accent);
  margin-bottom: .5rem;
}
.loop-steps p { margin: 0; font-family: var(--body); color: var(--ink); }
.loop-sentence { max-width: 62ch; margin: 2rem 0 0; color: var(--muted); font-family: var(--body); }
.spoken { margin: 1.5rem 0 0; font-family: var(--mono); font-size: 1rem; color: var(--accent); }

@media (max-width: 640px) {
  .loop-steps { grid-template-columns: 1fr; }
}

/* What it costs: the sentence, then a two-cell strip in the hero strip's style. */
.cost-strip {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  border: 1px solid var(--line);
}
.cost-strip > div {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.cost-strip > div:last-child { border-right: 0; }
.cost-strip .k { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cost-strip .v { font: 800 clamp(1.6rem, 3vw, 2.2rem)/1 var(--display); color: var(--ink); }
.cost-strip .s { font-family: var(--mono); font-size: .75rem; color: var(--muted); }

footer p:first-child { max-width: 62ch; margin: 0; font-family: var(--body); color: var(--muted); }
footer p:last-child { margin: 1rem 0 0; font-family: var(--mono); color: var(--muted); }
footer a { color: var(--ink); }

@media (max-width: 760px) {
  .hero { --shift: 0%; --wide: 100%; }
  .hero video { object-position: 62% 50%; }
  .hero .stage::after {
    background:
      linear-gradient(to top, rgba(11, 13, 16, .92) 0%, transparent 36%),
      linear-gradient(to right, rgba(11, 13, 16, .85) 0%, transparent 44%);
  }
  .hero .scrim {
    background: linear-gradient(to bottom, rgba(11, 13, 16, .88) 0%, rgba(11, 13, 16, .70) 42%, transparent 70%);
  }
  .hero .copy { padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}