/* Axial marketing site. Plain CSS, no build step, no scripts. Brand: black, white, steel gray, one solid blue (the spine).
   The page is hung on a blue spine that grows from neck-size to lower-back-size vertebrae as you scroll, like the logo's. */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fonts/archivo-var.woff2") format("woff2");
}

:root {
  --ink: #0b0c0e;
  --ink-2: #111317;
  --line: #262a31;
  --bone: #eef0f3;
  --bone-line: #cfd3da;
  --steel: #8a919d;        /* secondary text on ink: 5.9:1 */
  --steel-dark: #4a505a;   /* secondary text on bone: 7.3:1 */
  --blue: #2f6bff;
  --blue-btn: #2860ee;      /* white text on it: 5.3:1 */
  --blue-btn-hi: #1f54e0;
  --blue-hi: #5b8aff;
  --blue-link: #8fb0ff;    /* links on ink */
  --blue-link-dark: #1d4ed8; /* links on bone */
  --rail: 56px;
  --pad: clamp(56px, 7vw, 104px);
  --gutter: clamp(16px, 4vw, 40px);
  --font: "Archivo Variable", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); color-scheme: dark; scroll-padding-top: 84px; }
::selection { background: var(--blue); color: #fff; }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font);
  font-stretch: 100%;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--bone); color: var(--ink); padding: 10px 16px; border-radius: 8px; z-index: 10; font-weight: 600; }
.skip:focus { left: 16px; }

/* ---------- type ---------- */
.display, h1, h2, h3 { font-family: var(--font); font-stretch: 125%; font-weight: 760; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.4rem, 0.9rem + 5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; line-height: 1.25; font-stretch: 112%; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 62ch; }
.lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.5; color: var(--bone); max-width: 52ch; }
.muted { color: var(--steel); }
.small { font-size: 0.9375rem; line-height: 1.55; }

/* ---------- layout: every band shares one grid whose first column is the spine ---------- */
.band { position: relative; padding-block: var(--pad); }
.band--bone { background: var(--bone); color: var(--ink); }
.band--bone .muted { color: var(--steel-dark); }
.band--bone a { color: var(--blue-link-dark); }
.band--bone .lead { color: var(--ink); }
.band--raised { background: var(--ink-2); }

.wrap {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: clamp(20px, 4vw, 56px);
}
.rail {
  margin-block: calc(var(--pad) * -1);
  background-repeat: no-repeat round;
  background-position: center top;
  background-size: 100% auto;
}
.rail--c { background-image: url("img/spine-c.svg"); }
.rail--t { background-image: url("img/spine-t.svg"); }
.rail--l { background-image: url("img/spine-l.svg"); }
.rail--foot { display: flex; flex-direction: column; background: none; }
.rail--foot::before { content: ""; flex: 1; background: url("img/spine-l.svg") no-repeat center top / 100% auto; background-repeat: no-repeat round; }
.rail--foot::after { content: ""; flex: none; aspect-ratio: 56 / 120; background: url("img/spine-end.svg") no-repeat center top / 100% auto; }
.content { min-width: 0; }

/* ---------- header ---------- */
.top { padding-block: 14px; position: sticky; top: 0; z-index: 30; background: rgba(11, 12, 14, 0.84); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); view-transition-name: site-header; }
.top .wrap { align-items: center; }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--bone); text-decoration: none; font-stretch: 125%; font-weight: 760; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.nav a { color: var(--bone); text-decoration: none; font-size: 0.9375rem; }
.nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.nav .btn { color: #fff; }
@media (max-width: 760px) { .nav a:not(.btn) { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--blue-btn); color: #fff; text-decoration: none;
  font-stretch: 112%; font-weight: 700; font-size: 1rem; letter-spacing: -0.005em;
  border: 1px solid transparent;
}
.btn:hover { background: var(--blue-btn-hi); text-decoration: none; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; }
.btn--ghost { background: transparent; border-color: #3b4049; color: var(--bone); }
.btn--ghost:hover { background: #1a1d22; }
.band--bone .btn--ghost { color: var(--ink); border-color: #9aa1ac; }
.band--bone .btn--ghost:hover { background: #e2e5ea; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 32px; }

/* ---------- hero ---------- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero { --pad: 64px; }
.hero h1 { max-width: 13ch; }
.hero .lead { margin-top: 28px; }
.hero .note { margin-top: 20px; color: var(--steel); max-width: 46ch; }
.phones { position: relative; width: 100%; max-width: 440px; justify-self: end; aspect-ratio: 1 / 1.45; }
.phones .phone { position: absolute; }
.phones .phone--a { left: 0; top: 0; width: 50%; }
.phones .phone--b { right: 0; bottom: 0; width: 48%; }

.phone {
  margin: 0;
  background: #0a0b0d;
  border: 1px solid #30343c;
  border-radius: clamp(22px, 4.2vw, 38px);
  overflow: hidden;
  aspect-ratio: 780 / 1824;
}
.phone img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- sports ---------- */
.intro { max-width: 40rem; margin-bottom: clamp(36px, 5vw, 64px); }
.intro h2 { margin-bottom: 20px; }
.intro p:last-child { margin-bottom: 0; }
.dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--blue)); transform: translateY(-1px); }
.after { margin-top: 32px; max-width: 58ch; }

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 18px; }
.steps li::before { content: counter(s); display: block; font-stretch: 125%; font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.04em; color: var(--blue-link-dark); margin-bottom: 14px; }
.steps h3 { margin-bottom: 10px; }
.steps p { margin: 0; color: var(--steel-dark); }


/* ---------- shared bits for the two interactive sections (radio inputs drive them, no scripts) ---------- */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.explorer, .demo { position: relative; }

/* ---------- sport explorer ---------- */
.hint { margin-top: 14px; }
.xgrid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sport-tabs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); position: sticky; top: 108px; }
.sport-tabs li { border-bottom: 1px solid var(--line); }
.sport-tabs label {
  display: flex; align-items: center; gap: 14px; cursor: pointer; padding-block: 15px;
  font-stretch: 125%; font-weight: 720; font-size: clamp(1.3rem, 0.95rem + 1.3vw, 2rem); letter-spacing: -0.025em; line-height: 1.1;
  color: #737a86; position: relative; transition: color .2s;
}
.sport-tabs label:hover { color: var(--bone); }
/* the marker is the logo's vertebra: hollow until it is the one you picked */
.sport-tabs label::after { content: ""; margin-left: auto; flex: none; width: 22px; height: 14px; border-radius: 6px; border: 2px solid #3b4049; background: transparent; transition: background-color .25s, border-color .25s; }
.sport-stage { display: grid; min-width: 0; }
.pane { grid-area: 1 / 1; display: none; opacity: 0; align-content: start; gap: 28px; min-width: 0; transition: opacity .4s ease, display .4s allow-discrete; }
.pane .lead { margin: 0; min-height: 3em; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 32px); align-items: start; }
.pair figure { margin: 0; }
.pair figure:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); }
.pair figcaption { margin-top: 14px; font-size: 0.9375rem; line-height: 1.4; color: var(--steel); }
.pane-note { margin: 0; max-width: 46ch; }
#sp-strength:checked ~ .xgrid label[for="sp-strength"] { color: var(--bone); }
#sp-strength:checked ~ .xgrid label[for="sp-strength"]::after { background: var(--blue); border-color: var(--blue); }
#sp-strength:focus-visible ~ .xgrid label[for="sp-strength"] { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
#sp-strength:checked ~ .xgrid .pane-strength { display: grid; opacity: 1; }
@starting-style { #sp-strength:checked ~ .xgrid .pane-strength { opacity: 0; } }
#sp-hypertrophy:checked ~ .xgrid label[for="sp-hypertrophy"] { color: var(--bone); }
#sp-hypertrophy:checked ~ .xgrid label[for="sp-hypertrophy"]::after { background: var(--blue); border-color: var(--blue); }
#sp-hypertrophy:focus-visible ~ .xgrid label[for="sp-hypertrophy"] { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
#sp-hypertrophy:checked ~ .xgrid .pane-hypertrophy { display: grid; opacity: 1; }
@starting-style { #sp-hypertrophy:checked ~ .xgrid .pane-hypertrophy { opacity: 0; } }
#sp-running:checked ~ .xgrid label[for="sp-running"] { color: var(--bone); }
#sp-running:checked ~ .xgrid label[for="sp-running"]::after { background: var(--blue); border-color: var(--blue); }
#sp-running:focus-visible ~ .xgrid label[for="sp-running"] { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
#sp-running:checked ~ .xgrid .pane-running { display: grid; opacity: 1; }
@starting-style { #sp-running:checked ~ .xgrid .pane-running { opacity: 0; } }
#sp-cycling:checked ~ .xgrid label[for="sp-cycling"] { color: var(--bone); }
#sp-cycling:checked ~ .xgrid label[for="sp-cycling"]::after { background: var(--blue); border-color: var(--blue); }
#sp-cycling:focus-visible ~ .xgrid label[for="sp-cycling"] { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
#sp-cycling:checked ~ .xgrid .pane-cycling { display: grid; opacity: 1; }
@starting-style { #sp-cycling:checked ~ .xgrid .pane-cycling { opacity: 0; } }
#sp-swimming:checked ~ .xgrid label[for="sp-swimming"] { color: var(--bone); }
#sp-swimming:checked ~ .xgrid label[for="sp-swimming"]::after { background: var(--blue); border-color: var(--blue); }
#sp-swimming:focus-visible ~ .xgrid label[for="sp-swimming"] { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
#sp-swimming:checked ~ .xgrid .pane-swimming { display: grid; opacity: 1; }
@starting-style { #sp-swimming:checked ~ .xgrid .pane-swimming { opacity: 0; } }
#sp-triathlon:checked ~ .xgrid label[for="sp-triathlon"] { color: var(--bone); }
#sp-triathlon:checked ~ .xgrid label[for="sp-triathlon"]::after { background: var(--blue); border-color: var(--blue); }
#sp-triathlon:focus-visible ~ .xgrid label[for="sp-triathlon"] { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
#sp-triathlon:checked ~ .xgrid .pane-triathlon { display: grid; opacity: 1; }
@starting-style { #sp-triathlon:checked ~ .xgrid .pane-triathlon { opacity: 0; } }
#sp-hyrox:checked ~ .xgrid label[for="sp-hyrox"] { color: var(--bone); }
#sp-hyrox:checked ~ .xgrid label[for="sp-hyrox"]::after { background: var(--blue); border-color: var(--blue); }
#sp-hyrox:focus-visible ~ .xgrid label[for="sp-hyrox"] { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
#sp-hyrox:checked ~ .xgrid .pane-hyrox { display: grid; opacity: 1; }
@starting-style { #sp-hyrox:checked ~ .xgrid .pane-hyrox { opacity: 0; } }
#sp-conditioning:checked ~ .xgrid label[for="sp-conditioning"] { color: var(--bone); }
#sp-conditioning:checked ~ .xgrid label[for="sp-conditioning"]::after { background: var(--blue); border-color: var(--blue); }
#sp-conditioning:focus-visible ~ .xgrid label[for="sp-conditioning"] { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
#sp-conditioning:checked ~ .xgrid .pane-conditioning { display: grid; opacity: 1; }
@starting-style { #sp-conditioning:checked ~ .xgrid .pane-conditioning { opacity: 0; } }

/* ---------- check-in demo ---------- */
@property --n { syntax: "<integer>"; inherits: true; initial-value: 76; }
@property --ring { syntax: "<color>"; inherits: true; initial-value: #0f8a55; }
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(32px, 7vw, 112px); align-items: center; margin-top: clamp(56px, 8vw, 112px); padding-top: clamp(40px, 6vw, 72px); border-top: 2px solid var(--ink); }
.demo-copy h3 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem); font-stretch: 125%; font-weight: 760; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 12px; }
.demo-sub { color: var(--steel-dark); margin-bottom: 0; }
.opts { margin: 28px 0 0; border-top: 1px solid var(--bone-line); }
.opt { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--bone-line); cursor: pointer; color: var(--steel-dark); position: relative; transition: color .2s; }
.opt:hover { color: var(--ink); }
.opt-t { font-stretch: 112%; font-weight: 700; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }
.opt-s { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 0.9375rem; line-height: 1.5; }
.opt::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 14px; border-radius: 6px; border: 2px solid #9aa1ac; background: transparent; transition: background-color .25s, border-color .25s; }
#ci-go:checked ~ .demo-copy label[for="ci-go"], #ci-mod:checked ~ .demo-copy label[for="ci-mod"], #ci-rec:checked ~ .demo-copy label[for="ci-rec"] { color: var(--ink); }
#ci-go:checked ~ .demo-copy label[for="ci-go"]::after, #ci-mod:checked ~ .demo-copy label[for="ci-mod"]::after, #ci-rec:checked ~ .demo-copy label[for="ci-rec"]::after { background: var(--blue); border-color: var(--blue); }
#ci-go:focus-visible ~ .demo-copy label[for="ci-go"], #ci-mod:focus-visible ~ .demo-copy label[for="ci-mod"], #ci-rec:focus-visible ~ .demo-copy label[for="ci-rec"] { outline: 3px solid var(--blue-link-dark); outline-offset: 2px; border-radius: 4px; }

.result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 32px; }
.ring { --n: 76; --ring: #0f8a55; position: relative; width: 112px; aspect-ratio: 1; display: grid; place-items: center; counter-reset: n var(--n); transition: --n .8s cubic-bezier(.2, .7, .1, 1), --ring .5s; }
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--ring) calc(var(--n) * 1%), rgba(11, 12, 14, 0.12) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); }
.ring::after { content: counter(n); font-stretch: 125%; font-weight: 800; font-size: 2.4rem; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
#ci-mod:checked ~ .demo-copy .ring { --n: 62; --ring: #b86e00; }
#ci-rec:checked ~ .demo-copy .ring { --n: 45; --ring: #cc2f3a; }
.verdicts { display: grid; }
.verdict { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.verdict p { margin: 0; }
.v-h { font-stretch: 112%; font-weight: 700; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 6px !important; }
.v-s { color: var(--steel-dark); }
#ci-go:checked ~ .demo-copy .v-go, #ci-mod:checked ~ .demo-copy .v-mod, #ci-rec:checked ~ .demo-copy .v-rec { opacity: 1; visibility: visible; }

.demo-stage .phone { position: relative; width: 100%; max-width: 320px; margin-inline: auto; border-color: #1b1e24; box-shadow: 0 40px 70px -28px rgba(11, 12, 14, 0.55), 0 0 0 1px rgba(11, 12, 14, 0.08); }
.demo-stage .phone img { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
#ci-go:checked ~ .demo-stage .s-go, #ci-mod:checked ~ .demo-stage .s-mod, #ci-rec:checked ~ .demo-stage .s-rec { opacity: 1; }

/* ---------- feature explorer: the sport explorer's grid and tabs, plus a row of states inside each pane. Radio inputs and :nth-of-type pair the k-th tab with the k-th pane, and the k-th state with the k-th row and screen. No scripts. ---------- */
@media (min-width: 961px) { .fx .xgrid { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); } }
.fx .ftabs label { font-size: clamp(1.15rem, 0.85rem + 1vw, 1.6rem); padding-block: 12px; }
.fx > input:nth-of-type(1):checked ~ .xgrid .ftabs li:nth-child(1) label,
.fx > input:nth-of-type(2):checked ~ .xgrid .ftabs li:nth-child(2) label,
.fx > input:nth-of-type(3):checked ~ .xgrid .ftabs li:nth-child(3) label,
.fx > input:nth-of-type(4):checked ~ .xgrid .ftabs li:nth-child(4) label,
.fx > input:nth-of-type(5):checked ~ .xgrid .ftabs li:nth-child(5) label,
.fx > input:nth-of-type(6):checked ~ .xgrid .ftabs li:nth-child(6) label,
.fx > input:nth-of-type(7):checked ~ .xgrid .ftabs li:nth-child(7) label,
.fx > input:nth-of-type(8):checked ~ .xgrid .ftabs li:nth-child(8) label,
.fx > input:nth-of-type(9):checked ~ .xgrid .ftabs li:nth-child(9) label,
.fx > input:nth-of-type(10):checked ~ .xgrid .ftabs li:nth-child(10) label { color: var(--bone); }
.fx > input:nth-of-type(1):checked ~ .xgrid .ftabs li:nth-child(1) label::after,
.fx > input:nth-of-type(2):checked ~ .xgrid .ftabs li:nth-child(2) label::after,
.fx > input:nth-of-type(3):checked ~ .xgrid .ftabs li:nth-child(3) label::after,
.fx > input:nth-of-type(4):checked ~ .xgrid .ftabs li:nth-child(4) label::after,
.fx > input:nth-of-type(5):checked ~ .xgrid .ftabs li:nth-child(5) label::after,
.fx > input:nth-of-type(6):checked ~ .xgrid .ftabs li:nth-child(6) label::after,
.fx > input:nth-of-type(7):checked ~ .xgrid .ftabs li:nth-child(7) label::after,
.fx > input:nth-of-type(8):checked ~ .xgrid .ftabs li:nth-child(8) label::after,
.fx > input:nth-of-type(9):checked ~ .xgrid .ftabs li:nth-child(9) label::after,
.fx > input:nth-of-type(10):checked ~ .xgrid .ftabs li:nth-child(10) label::after { background: var(--blue); border-color: var(--blue); }
.fx > input:nth-of-type(1):focus-visible ~ .xgrid .ftabs li:nth-child(1) label,
.fx > input:nth-of-type(2):focus-visible ~ .xgrid .ftabs li:nth-child(2) label,
.fx > input:nth-of-type(3):focus-visible ~ .xgrid .ftabs li:nth-child(3) label,
.fx > input:nth-of-type(4):focus-visible ~ .xgrid .ftabs li:nth-child(4) label,
.fx > input:nth-of-type(5):focus-visible ~ .xgrid .ftabs li:nth-child(5) label,
.fx > input:nth-of-type(6):focus-visible ~ .xgrid .ftabs li:nth-child(6) label,
.fx > input:nth-of-type(7):focus-visible ~ .xgrid .ftabs li:nth-child(7) label,
.fx > input:nth-of-type(8):focus-visible ~ .xgrid .ftabs li:nth-child(8) label,
.fx > input:nth-of-type(9):focus-visible ~ .xgrid .ftabs li:nth-child(9) label,
.fx > input:nth-of-type(10):focus-visible ~ .xgrid .ftabs li:nth-child(10) label { outline: 3px solid var(--blue-hi); outline-offset: 4px; border-radius: 4px; }
.fpane { grid-area: 1 / 1; display: none; opacity: 0; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(228px, 23vw, 300px)); grid-template-rows: auto 1fr; grid-template-areas: "copy phone" "note phone"; column-gap: clamp(24px, 4vw, 48px); row-gap: 0; align-items: start; min-width: 0; transition: opacity .4s ease, display .4s allow-discrete; }
.fx > input:nth-of-type(1):checked ~ .xgrid .fpane:nth-child(1),
.fx > input:nth-of-type(2):checked ~ .xgrid .fpane:nth-child(2),
.fx > input:nth-of-type(3):checked ~ .xgrid .fpane:nth-child(3),
.fx > input:nth-of-type(4):checked ~ .xgrid .fpane:nth-child(4),
.fx > input:nth-of-type(5):checked ~ .xgrid .fpane:nth-child(5),
.fx > input:nth-of-type(6):checked ~ .xgrid .fpane:nth-child(6),
.fx > input:nth-of-type(7):checked ~ .xgrid .fpane:nth-child(7),
.fx > input:nth-of-type(8):checked ~ .xgrid .fpane:nth-child(8),
.fx > input:nth-of-type(9):checked ~ .xgrid .fpane:nth-child(9),
.fx > input:nth-of-type(10):checked ~ .xgrid .fpane:nth-child(10) { display: grid; opacity: 1; }
@starting-style {
  .fx > input:nth-of-type(1):checked ~ .xgrid .fpane:nth-child(1),
  .fx > input:nth-of-type(2):checked ~ .xgrid .fpane:nth-child(2),
  .fx > input:nth-of-type(3):checked ~ .xgrid .fpane:nth-child(3),
  .fx > input:nth-of-type(4):checked ~ .xgrid .fpane:nth-child(4),
  .fx > input:nth-of-type(5):checked ~ .xgrid .fpane:nth-child(5),
  .fx > input:nth-of-type(6):checked ~ .xgrid .fpane:nth-child(6),
  .fx > input:nth-of-type(7):checked ~ .xgrid .fpane:nth-child(7),
  .fx > input:nth-of-type(8):checked ~ .xgrid .fpane:nth-child(8),
  .fx > input:nth-of-type(9):checked ~ .xgrid .fpane:nth-child(9),
  .fx > input:nth-of-type(10):checked ~ .xgrid .fpane:nth-child(10) { opacity: 0; }
}
.fcopy { grid-area: copy; min-width: 0; }
.fnote { grid-area: note; margin: 0; align-self: start; max-width: 40ch; }
.fcaps { display: none; }
.fcopy h3 { font-size: clamp(1.4rem, 1rem + 1.1vw, 1.85rem); font-stretch: 112%; font-weight: 740; letter-spacing: -0.022em; line-height: 1.15; margin-bottom: 14px; }
.flead { margin: 0 0 28px; color: var(--steel); max-width: 40ch; }
.fopts { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.fopts li { border-bottom: 1px solid var(--line); }
.fopts label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; align-items: center; padding: 14px 0; cursor: pointer; color: var(--steel); transition: color .2s; }
.fopts label:hover { color: var(--bone); }
.fopts .ft { font-stretch: 112%; font-weight: 700; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.01em; }
.fopts .fs { grid-column: 1; font-size: 0.9375rem; line-height: 1.5; }
.fopts label::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 14px; border-radius: 6px; border: 2px solid #3b4049; background: transparent; transition: background-color .25s, border-color .25s; }
.fpane > input:nth-of-type(1):checked ~ .fcopy .fopts li:nth-child(1) label,
.fpane > input:nth-of-type(2):checked ~ .fcopy .fopts li:nth-child(2) label,
.fpane > input:nth-of-type(3):checked ~ .fcopy .fopts li:nth-child(3) label,
.fpane > input:nth-of-type(4):checked ~ .fcopy .fopts li:nth-child(4) label { color: var(--bone); }
.fpane > input:nth-of-type(1):checked ~ .fcopy .fopts li:nth-child(1) label::after,
.fpane > input:nth-of-type(2):checked ~ .fcopy .fopts li:nth-child(2) label::after,
.fpane > input:nth-of-type(3):checked ~ .fcopy .fopts li:nth-child(3) label::after,
.fpane > input:nth-of-type(4):checked ~ .fcopy .fopts li:nth-child(4) label::after { background: var(--blue); border-color: var(--blue); }
.fpane > input:nth-of-type(1):focus-visible ~ .fcopy .fopts li:nth-child(1) label,
.fpane > input:nth-of-type(2):focus-visible ~ .fcopy .fopts li:nth-child(2) label,
.fpane > input:nth-of-type(3):focus-visible ~ .fcopy .fopts li:nth-child(3) label,
.fpane > input:nth-of-type(4):focus-visible ~ .fcopy .fopts li:nth-child(4) label { outline: 3px solid var(--blue-hi); outline-offset: 2px; border-radius: 4px; }
.fphone { grid-area: phone; position: relative; width: 100%; max-width: 300px; justify-self: end; }
.fphone img { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.fphone img:only-child { opacity: 1; visibility: visible; }
.fpane > input:nth-of-type(1):checked ~ .fphone img:nth-child(1),
.fpane > input:nth-of-type(2):checked ~ .fphone img:nth-child(2),
.fpane > input:nth-of-type(3):checked ~ .fphone img:nth-child(3),
.fpane > input:nth-of-type(4):checked ~ .fphone img:nth-child(4) { opacity: 1; visibility: visible; }
@media (max-width: 960px) {
  .fx > input:nth-of-type(1):checked ~ .xgrid .ftabs li:nth-child(1) label,
  .fx > input:nth-of-type(2):checked ~ .xgrid .ftabs li:nth-child(2) label,
  .fx > input:nth-of-type(3):checked ~ .xgrid .ftabs li:nth-child(3) label,
  .fx > input:nth-of-type(4):checked ~ .xgrid .ftabs li:nth-child(4) label,
  .fx > input:nth-of-type(5):checked ~ .xgrid .ftabs li:nth-child(5) label,
  .fx > input:nth-of-type(6):checked ~ .xgrid .ftabs li:nth-child(6) label,
  .fx > input:nth-of-type(7):checked ~ .xgrid .ftabs li:nth-child(7) label,
  .fx > input:nth-of-type(8):checked ~ .xgrid .ftabs li:nth-child(8) label,
  .fx > input:nth-of-type(9):checked ~ .xgrid .ftabs li:nth-child(9) label,
  .fx > input:nth-of-type(10):checked ~ .xgrid .ftabs li:nth-child(10) label { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  .fx .ftabs label { font-size: 1rem; padding-block: 9px; }
}
@media (max-width: 700px) {
  .fpane { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "copy" "caps" "phone" "note"; row-gap: 20px; }
  .fphone { max-width: 250px; justify-self: start; }
  .flead { max-width: none; margin-bottom: 20px; }
  .fnote { max-width: none; }
  .fopts { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; margin: 0; }
  .fopts li { border: 0; }
  .fopts label { display: block; padding: 9px 16px; border: 1px solid #3b4049; border-radius: 999px; }
  .fopts label::after, .fopts .fs { display: none; }
  .fopts .ft { font-size: 0.95rem; font-stretch: 100%; font-weight: 650; letter-spacing: 0; }
  .fpane > input:nth-of-type(1):checked ~ .fcopy .fopts li:nth-child(1) label,
  .fpane > input:nth-of-type(2):checked ~ .fcopy .fopts li:nth-child(2) label,
  .fpane > input:nth-of-type(3):checked ~ .fcopy .fopts li:nth-child(3) label,
  .fpane > input:nth-of-type(4):checked ~ .fcopy .fopts li:nth-child(4) label { background: rgba(47, 107, 255, 0.2); border-color: var(--blue); }
  .fcaps { grid-area: caps; display: grid; }
  .fcaps p { grid-area: 1 / 1; margin: 0; color: var(--bone); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .fpane > input:nth-of-type(1):checked ~ .fcaps p:nth-child(1),
  .fpane > input:nth-of-type(2):checked ~ .fcaps p:nth-child(2),
  .fpane > input:nth-of-type(3):checked ~ .fcaps p:nth-child(3),
  .fpane > input:nth-of-type(4):checked ~ .fcaps p:nth-child(4) { opacity: 1; visibility: visible; }
}

/* ---------- screens ---------- */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); align-items: start; margin: 0; padding: 0; list-style: none; }
.shots figure { margin: 0; }
.shots li:nth-child(even) { margin-top: clamp(24px, 4vw, 56px); }
.shots figcaption { margin-top: 14px; font-size: 0.9375rem; line-height: 1.5; color: var(--steel); }
.shots figcaption strong { color: var(--bone); font-weight: 600; display: block; margin-bottom: 2px; }
.caption-note { margin-top: 36px; }

/* ---------- devices ---------- */
.devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.devices > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.devices h3 { margin-bottom: 10px; }
.devices p { color: var(--steel-dark); margin-bottom: 0; }
.fine { margin-top: 40px; color: var(--steel-dark); max-width: 70ch; }

/* ---------- faq ---------- */
.faq { max-width: 46rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding-block: 20px; padding-right: 40px; position: relative; font-stretch: 112%; font-weight: 650; font-size: 1.1rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel); transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; border-color: var(--blue-hi); }
.faq .answer { padding-bottom: 22px; color: var(--steel); }
.faq .answer p { margin-bottom: 0.8em; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- closing + footer ---------- */
.closing { --pad: 64px; }
.closing h2 { max-width: 14ch; font-size: clamp(2.2rem, 1rem + 5vw, 4.4rem); letter-spacing: -0.035em; font-weight: 800; }
.closing p { margin-top: 20px; color: var(--steel); }
.foot { --pad: 56px; padding-block: var(--pad); position: relative; }
.foot .content { border-top: 1px solid var(--line); padding-top: 40px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }
/* The lockup file carries 36/304 of padding on the left; trim it so the mark lines up with the text edge. */
.foot .lockup { width: min(320px, 70vw); height: auto; clip-path: inset(0 0 0 11.84%); translate: -11.84% 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.foot nav a { color: var(--bone); }
.legal { margin-top: 28px; color: var(--steel); max-width: 64ch; font-size: 0.875rem; line-height: 1.55; }
.legal p { margin-bottom: 0.7em; }

/* ---------- long text pages ---------- */
.doc h1 { font-size: clamp(2rem, 1rem + 4vw, 3.6rem); max-width: 18ch; margin-bottom: 14px; }
.doc .meta { color: var(--steel-dark); margin-bottom: 40px; }
.doc h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin: 2.4em 0 0.6em; letter-spacing: -0.02em; }
.doc h3 { margin: 1.8em 0 0.4em; }
.doc p, .doc li { max-width: 68ch; }
.doc ul { padding-left: 1.2em; margin: 0 0 1em; }
.doc li { margin-bottom: 0.45em; }
.doc table { border-collapse: collapse; width: 100%; max-width: 68ch; margin: 0 0 1.4em; font-size: 0.97rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--bone-line); }
.doc th { font-stretch: 112%; font-weight: 700; }
.tablewrap { overflow-x: auto; max-width: 100%; margin: 0 0 1.4em; }
.tablewrap table { margin: 0; min-width: 520px; }
.doc td, .doc th[scope="row"] { font-weight: 400; font-stretch: 100%; }
.doc th[scope="row"] { font-weight: 600; padding-right: 18px; }
.toc { max-width: 68ch; margin: 0 0 2em; padding: 18px 0; border-top: 1px solid var(--bone-line); border-bottom: 1px solid var(--bone-line); }
.toc ol { margin: 0; padding-left: 1.6em; columns: 2; column-gap: 32px; }
.toc li { margin: 0 0 0.35em; break-inside: avoid; }
.doc h2[id] { scroll-margin-top: 96px; }
.callout { border-left: 4px solid var(--blue); padding: 6px 0 6px 18px; margin: 0 0 1.4em; max-width: 68ch; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .toc ol { columns: 1; }
  .tablewrap { overflow: visible; }
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap th, .tablewrap td { display: block; min-width: 0; }
  .tablewrap thead { position: absolute; left: -9999px; }
  .tablewrap tr { padding: 14px 0 8px; border-bottom: 1px solid var(--bone-line); }
  .tablewrap th, .tablewrap td { border: 0; padding: 0 0 8px; }
  .tablewrap th[scope="row"] { padding-bottom: 4px; }
  .tablewrap td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; font-size: 0.875rem; color: var(--steel-dark); }
}
@media (max-width: 960px) {
  .xgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sport-tabs { position: static; display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .sport-tabs li { border: 0; }
  .sport-tabs label { color: var(--steel); padding: 9px 16px; font-size: 1rem; font-stretch: 112%; font-weight: 650; letter-spacing: 0; border: 1px solid #3b4049; border-radius: 999px; white-space: nowrap; gap: 10px; }
  .sport-tabs label::after { display: none; }
  .sport-tabs .dot { width: 9px; height: 9px; }
  .pair { grid-auto-flow: column; grid-auto-columns: 68%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px 0; }
  .pair figure { scroll-snap-align: start; }
  .pair figure:nth-child(2) { margin-top: 0; }
  .pane .lead { min-height: 0; }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo-stage .phone { max-width: 260px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .phones { justify-self: start; max-width: 420px; }
  .steps, .devices { grid-template-columns: minmax(0, 1fr); }
  .shots { grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .shots li { scroll-snap-align: start; }
  .shots li:nth-child(even) { margin-top: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  :root { --rail: 28px; }
  .pair { grid-auto-columns: 74%; }
  .ring { width: 88px; }
  .ring::after { font-size: 1.9rem; }
  .result { gap: 18px; }
  .shots { grid-auto-columns: 78%; }
}

@media (max-width: 960px) {
  #sp-strength:checked ~ .xgrid label[for="sp-strength"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  #sp-hypertrophy:checked ~ .xgrid label[for="sp-hypertrophy"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  #sp-running:checked ~ .xgrid label[for="sp-running"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  #sp-cycling:checked ~ .xgrid label[for="sp-cycling"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  #sp-swimming:checked ~ .xgrid label[for="sp-swimming"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  #sp-triathlon:checked ~ .xgrid label[for="sp-triathlon"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  #sp-hyrox:checked ~ .xgrid label[for="sp-hyrox"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
  #sp-conditioning:checked ~ .xgrid label[for="sp-conditioning"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
}

/* ---------- motion: one load sequence in the hero, then the spine and header respond to scroll. All of it is off for reduced motion. ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes phone-in { from { opacity: 0; transform: translateY(72px) rotate(var(--tilt, 0deg)) scale(0.96); } to { opacity: 1; transform: none; } }
  .hero h1 { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) 0.05s both; }
  .hero .lead { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) 0.2s both; }
  .hero .actions { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) 0.32s both; }
  .hero .note { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) 0.42s both; }
  .phones .phone--a { --tilt: -2.5deg; animation: phone-in 1.25s cubic-bezier(0.2, 0.7, 0.1, 1) 0.25s both; }
  .phones .phone--b { --tilt: 2.5deg; animation: phone-in 1.25s cubic-bezier(0.2, 0.7, 0.1, 1) 0.5s both; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes top-solid { from { background-color: rgba(11, 12, 14, 0); border-bottom-color: transparent; } to { background-color: rgba(11, 12, 14, 0.84); border-bottom-color: var(--line); } }
    .top { animation: top-solid linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
    @keyframes drift-a { to { translate: 0 -30px; } }
    @keyframes drift-b { to { translate: 0 -80px; } }
    .phones .phone--a { animation: phone-in 1.25s cubic-bezier(0.2, 0.7, 0.1, 1) 0.25s both, drift-a linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 760px; }
    .phones .phone--b { animation: phone-in 1.25s cubic-bezier(0.2, 0.7, 0.1, 1) 0.5s both, drift-b linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 760px; }
  }
}
/* a pale band of light travels down each stretch of spine as it passes through the viewport, lighting the vertebrae it crosses */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rail--c { --vert: url("img/spine-c.svg"); }
    .rail--t { --vert: url("img/spine-t.svg"); }
    .rail--l { --vert: url("img/spine-l.svg"); }
    .rail--c, .rail--t, .rail--l { position: relative; }
    .rail--c::after, .rail--t::after, .rail--l::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, rgba(205, 222, 255, 0) 0, rgba(214, 228, 255, 0.95) 50%, rgba(205, 222, 255, 0) 100%) 0 -260px / 100% 260px no-repeat;
      -webkit-mask: var(--vert) center top / 100% auto round; mask: var(--vert) center top / 100% auto round;
      animation: spine-scan linear both; animation-timeline: view(); animation-range: cover;
    }
    @keyframes spine-scan { from { background-position: 0 -260px; } to { background-position: 0 calc(100% + 260px); } }
  }
}

@media print {
  .top, .rail, .skip, .foot nav { display: none !important; }
  html, body, .band--bone { background: #fff !important; color: #000 !important; }
  .band { padding-block: 0; }
  .wrap { display: block; max-width: none; }
  a { color: #000; }
}

/* legal pages and the 404 sit on bone right under the header, so the header stays solid there */
.top--solid { animation: none !important; background: rgba(11, 12, 14, 0.94); border-bottom-color: var(--line); }