/* Home, v5 (2026-10-24). Same vocabulary as v4: ink page, bone type, slate for quiet text, brown for the order block,
   square corners, Inter Tight, the blue, red and magenta stripe down the right edge as the only magenta.
   What changed: the price is on the scroll hero, the {form} moment is screen two, a reserve bar follows the page.
   Neue Montreal Semi Squeezed (fonts/neue-montreal-semi-squeezed-medium.woff2, licensed 2026-10-20) was tried on
   the whole page on 2026-10-24 and rejected, so it is not loaded here. */
@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/inter-tight.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #141414;
  --bone: #eeeae2;
  --slate: #a2afb9;
  --brown: #604e45;
  --line: rgba(238, 234, 226, .16);
  --blue: #1c04f4;
  --red: #f40404;
  --magenta: #f40488;
  --sky: #6abeff;
  --stripe: clamp(9px, 2.4vw, 30px);
  --gutter: 24px;
  --max: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 48px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 450 17px/1.5 var(--sans);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  padding-right: var(--stripe);
  overflow-x: clip;
}

/* the brand edge: three equal bands, fixed to the right of the viewport */
.stripe {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--stripe);
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(90deg, var(--blue) 0 33.34%, var(--red) 33.34% 66.67%, var(--magenta) 66.67% 100%);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
::selection { background: var(--bone); color: var(--ink); }

.wm, .nwh {
  display: block;
  background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.wm { --mark: url("/img/brand/wordmark.svg"); aspect-ratio: 2266 / 482; }
.nwh { --mark: url("/img/brand/nwh.svg"); aspect-ratio: 1116 / 415; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(38px, 6vw, 76px); }
h2 { font-size: clamp(32px, 4.6vw, 60px); }
p { margin: 0; }
b { font-weight: 650; }

.btn {
  display: inline-block;
  padding: 17px 28px;
  background: var(--bone);
  color: var(--ink);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s var(--ease);
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(1px); }
.btn.small { padding: 12px 18px; font-size: 15px; }

section { padding: 72px 0; }
@media (min-width: 900px) { section { padding: 120px 0; } }

/* sections rise in once, 24px, nothing else moves */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }

/* the reserve bar: off the top until the hero has scrolled away */
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--stripe);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px var(--gutter);
  background: rgba(20, 20, 20, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
}
.bar.on { transform: none; }
.bar .brand { width: 96px; color: var(--bone); }
.bar .price { display: none; margin-left: auto; font-size: 15px; color: var(--slate); }
.bar .price b { color: var(--bone); }
.bar .btn { margin-left: auto; }
@media (min-width: 900px) {
  .bar { padding: 12px var(--gutter); }
  .bar .brand { width: 116px; }
  .bar .price { display: block; }
  .bar .btn { margin-left: 0; }
}

/* 1. hero (Anant 2026-10-21): the photo holds still while scroll draws the sensor lines and dots over the body,
   and the four lines change at a quarter, half and three quarters of the way. The price and the button never leave. */
.hero { position: relative; height: 260vh; padding: 0; }
@media (max-width: 767px) { .hero { height: 340vh; } }
.hero .pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.hero .brand { display: block; width: 116px; color: var(--bone); margin: 20px var(--gutter) 16px; }
.hero .shot { position: relative; margin: 0 var(--gutter); min-height: 0; overflow: hidden; }
.hero .shot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rig polyline { fill: none; stroke: var(--bone); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; opacity: .75; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.rig circle.ring { fill: var(--ink); stroke: var(--bone); stroke-width: 3.5; }
.rig g { transform-box: fill-box; transform-origin: center; opacity: 0; }
.hero .copy { padding: 16px var(--gutter) 22px; }
.hero h1 { font-size: clamp(30px, 7.6vw, 72px); max-width: 14ch; }
.hero .lines { position: relative; display: grid; margin-top: 10px; min-height: 2.7em; font-size: 17px; line-height: 1.35; color: var(--slate); }
.hero .lines p { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.hero .lines p.on { opacity: 1; transform: none; }
.hero .offer { margin-top: 10px; font-size: 15px; line-height: 1.4; }
.hero .offer b { font-size: 1.25em; }
.hero .now { display: flex; align-items: center; gap: 20px; margin-top: 14px; }
.hero .ticks { display: flex; gap: 6px; }
.hero .ticks i { width: 22px; height: 2px; background: rgba(238, 234, 226, .3); transition: background .3s; }
.hero .ticks i.on { background: var(--bone); }
@media (min-width: 900px) {
  .hero { height: 300vh; }
  .hero .pin { grid-template-columns: 12fr 11fr; grid-template-rows: auto 1fr; }
  .hero .brand { width: 136px; margin: 30px var(--gutter); grid-column: 1; grid-row: 1; }
  .hero .shot { grid-column: 2; grid-row: 1 / -1; margin: 0; }
  .hero .copy { grid-column: 1; grid-row: 2; align-self: end; padding: 0 56px 64px var(--gutter); }
  .hero h1 { font-size: clamp(42px, 4.2vw, 68px); max-width: 13ch; }
  .hero .lines { font-size: 21px; margin-top: 18px; max-width: 40ch; }
  .hero .offer { font-size: 18px; margin-top: 24px; }
  .hero .now { margin-top: 24px; }
}

/* 2. form changes when you move: slate ground, ink type, the braces and the word bend together on the way in */
.science { position: relative; height: 220vh; padding: 0; background: var(--slate); color: var(--ink); --bend: 0; }
.science .pin { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; gap: clamp(28px, 6vh, 64px); padding: 0 var(--gutter); overflow: hidden; }
.science p { margin: 0; font-weight: 600; font-size: clamp(40px, 6.2vw, 88px); line-height: .9; letter-spacing: -.055em; }
.science .l1 { max-width: 11ch; }
.science .form {
  display: inline-block;
  white-space: nowrap;
  font-weight: calc(600 - var(--bend) * 450);
  transform: skewX(calc(var(--bend) * -18deg)) translateY(calc(var(--bend) * .06em)) rotate(calc(var(--bend) * 4deg));
  letter-spacing: calc(-.055em + var(--bend) * .08em);
  transform-origin: 50% 80%;
}
.science .form b { color: var(--brown); }
.science .l2 { max-width: 13ch; opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.science .l2 b { color: var(--bone); }
.science.seen .l2 { opacity: 1; transform: none; }
@media (max-width: 767px) { .science { height: 200vh; } }
@media (min-width: 900px) { .science .l2 { justify-self: end; text-align: right; } }

/* 2b. the circuit: the form moment's slate ground carries on, ink type, the report drawn in it by hyrox/report.js */
.circuit { background: var(--slate); color: var(--ink); padding-top: 0; }
.circuit .wrap { max-width: 900px; }
.circuit > .wrap > h2 { max-width: 12ch; }
.circuit > .wrap > .lead { margin-top: 16px; font-size: 19px; line-height: 1.4; color: #3f4a52; max-width: 44ch; }
/* the body draws on ink with bone lines, the phone's look, inside the slate section; brown is the one accent */
.circuit .report { margin-top: 36px; --rp-page: var(--ink); --rp-figure: var(--bone); --rp-figure-accent: var(--slate); --rp-ground: var(--slate); --rp-accent: var(--brown); --rp-accent-soft: rgba(96, 78, 69, .22); }
.circuit .apptop { display: none; }
@media (min-width: 900px) {
  .circuit > .wrap > .lead { font-size: 22px; margin-top: 22px; }
  .circuit .report { margin-top: 56px; }
}
/* phones: the report is the app. The frame fills the screen, the page snaps it into place, and it scrolls on its
   own in the app's dark theme until its end, when the page carries on. */
.circuit .exit { display: none; }
@media (max-width: 899px) {
  .circuit { padding-bottom: 72px; }
  .circuit .frame-start { height: 32px; }
  .circuit .frame {
    position: sticky;
    top: 0;
    height: 100svh;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 48px;
    overflow: hidden;
    background: var(--ink);
    color: var(--bone);
  }
  .circuit .exit { display: block; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(20, 20, 20, .22); font-size: 17px; color: #3f4a52; }
  .circuit .apptop { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 2; margin: 0 calc(var(--gutter) * -1); padding: 78px var(--gutter) 12px; background: var(--ink); font-size: 15px; }
  .circuit .apptop .nwh { width: 44px; color: var(--bone); }
  .circuit .apptop .t { font-weight: 650; }
  .circuit .apptop .r { margin-left: auto; color: var(--slate); }
  .circuit .report {
    margin-top: 8px;
    --rp-page: var(--ink); --rp-text: var(--bone); --rp-muted: var(--slate); --rp-dim: #76828b;
    --rp-line: rgba(238, 234, 226, .16); --rp-card: #1e2124; --rp-figure: var(--bone); --rp-figure-accent: var(--slate);
    --rp-ground: var(--ink); --rp-accent: var(--slate); --rp-accent-soft: rgba(162, 175, 185, .22);
  }
}

/* 3. the coach: a headline, one plain paragraph, three screens */
.coach h2 { max-width: 16ch; }
.coach .lead { margin-top: 18px; font-size: 19px; line-height: 1.4; color: var(--slate); max-width: 42ch; }
.phones { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px; margin: 40px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.phones::-webkit-scrollbar { display: none; }
.phones figure { margin: 0; scroll-snap-align: start; }
.phones img { width: 100%; border: 1px solid var(--line); }
.phones figcaption { margin-top: 14px; font-size: 16px; color: var(--slate); }
@media (min-width: 900px) {
  .coach .lead { font-size: 22px; margin-top: 24px; }
  .phones { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 56px 0 0; padding: 0; overflow: visible; gap: 32px; }
  .phones figcaption { font-size: 17px; }
}

/* 4. how it works: the knit full width, three numbered lines, the battery full width */
.how { padding-top: 0; }
.how .macro { margin: 0 var(--gutter); }
.how .macro img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.how .wrap { margin-top: 32px; }
.steps { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 0; display: grid; }
.steps li { counter-increment: step; position: relative; padding: 18px 0 18px 44px; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.4; color: var(--slate); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 20px; font-size: 14px; font-weight: 650; color: var(--bone); letter-spacing: 0; }
.steps b { color: var(--bone); }
.how .battery { margin: 40px var(--gutter) 0; }
.how .battery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) {
  .how .macro { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
  .how .macro img { aspect-ratio: 21 / 9; }
  .how .wrap { margin-top: 48px; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .steps { margin-top: 6px; }
  .steps li { font-size: 20px; padding: 22px 0 22px 52px; }
  .steps li::before { top: 25px; }
  .how .battery { max-width: var(--max); margin: 64px auto 0; padding: 0 var(--gutter); }
  .how .battery img { aspect-ratio: 21 / 9; }
}

/* 5. two cuts: a pair of photos, three plain facts */
.cuts { border-top: 1px solid var(--line); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pair figcaption { margin-top: 12px; font-size: 15px; line-height: 1.35; color: var(--slate); }
.facts { list-style: none; margin: 36px 0 0; padding: 0; display: grid; }
.facts li { padding: 16px 0 16px 22px; position: relative; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.4; }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts li::before { content: ""; position: absolute; left: 0; top: 25px; width: 7px; height: 7px; background: var(--bone); }
@media (min-width: 900px) {
  .pair { gap: 32px; margin-top: 56px; }
  .pair figcaption { font-size: 17px; margin-top: 16px; }
  .facts { margin-top: 56px; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .facts li { border: 0; border-top: 1px solid var(--line); padding: 22px 0 0 0; font-size: 19px; }
  .facts li:last-child { border-bottom: 0; }
  .facts li::before { display: none; }
}

/* 6. sports: three photos, a sport, one sentence */
.sports { border-top: 1px solid var(--line); }
.sports .cols { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; margin: 40px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.sports .cols::-webkit-scrollbar { display: none; }
.sports .cols > div { scroll-snap-align: start; }
.sports img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 20px; }
.sports h3 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.sports p { margin-top: 8px; font-size: 18px; line-height: 1.4; color: var(--slate); }
@media (min-width: 900px) {
  .sports .cols { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 56px 0 0; padding: 0; overflow: visible; }
  .sports p { font-size: 19px; }
}

/* 7. reserve */
.order { background: var(--brown); }
.order .grid { display: grid; gap: 48px; }
.opts { display: grid; gap: 0; margin-top: 36px; }
.opts > div { padding: 22px 0; border-top: 1px solid rgba(238, 234, 226, .3); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; }
.opts > div:last-child { border-bottom: 1px solid rgba(238, 234, 226, .3); }
.opts .qty { font-weight: 650; font-size: 20px; }
.opts .amt { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-weight: 700; font-size: clamp(34px, 5vw, 52px); letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.opts .amt s { margin: 0 0 6px; font-size: .42em; font-weight: 450; letter-spacing: -.01em; color: rgba(238, 234, 226, .7); }
.opts .note { grid-column: 1 / -1; font-size: 16px; color: rgba(238, 234, 226, .78); }
.order .first { margin-top: 24px; font-size: 17px; }
.order .btn { margin-top: 24px; }
.order .fine { margin-top: 16px; font-size: 15px; color: rgba(238, 234, 226, .78); max-width: 40ch; }
.spec { margin: 0; display: grid; gap: 0; align-self: start; }
.spec div { padding: 18px 0; border-top: 1px solid rgba(238, 234, 226, .3); }
.spec dt { font-weight: 650; font-size: 15px; }
.spec dd { margin: 4px 0 0; font-size: 17px; color: rgba(238, 234, 226, .86); }
@media (min-width: 900px) {
  .order .grid { grid-template-columns: 6fr 5fr; gap: 96px; }
}

/* footer */
footer { display: grid; gap: 28px; padding: 56px var(--gutter) 40px; font-size: 14px; line-height: 1.6; color: var(--slate); }
footer .nwh { width: 120px; color: var(--bone); }
footer .links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
footer .links a { text-decoration: none; color: var(--bone); }
footer .links a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  footer { grid-template-columns: auto 1fr; align-items: end; max-width: var(--max); margin: 0 auto; padding: 72px var(--gutter) 48px; }
  footer .nwh { width: 180px; }
  footer .legal { justify-self: end; text-align: right; }
  footer .links { justify-content: flex-end; }
}

/* hero v6 (2026-10-24): the night photos fill the screen, one per scroll step, with the copy over them */
.hero .pin { display: block; position: sticky; }
.hero .slides { position: absolute; inset: 0; background: var(--ink); }
.hero .slides picture { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero .slides picture.on { opacity: 1; }
.hero .slides img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero .slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,0) 22%, rgba(20,20,20,0) 45%, rgba(20,20,20,.88) 100%); }
.hero .brand { position: absolute; top: 0; left: 0; z-index: 2; }
.hero .copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.hero .lines { color: rgba(238, 234, 226, .82); }
@media (min-width: 900px) {
  .hero .slides::after { background: linear-gradient(90deg, rgba(20,20,20,.86) 0%, rgba(20,20,20,.5) 38%, rgba(20,20,20,0) 62%), linear-gradient(180deg, rgba(20,20,20,.45) 0%, rgba(20,20,20,0) 20%); }
  .hero .copy { right: auto; max-width: 640px; padding: 0 0 72px var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .hero .slides picture { transition: none; } }
/* the hero is one screen now: the photos switch on their own, not on scroll */
.hero, .hero { height: 100svh; min-height: 560px; }
@media (max-width: 767px) { .hero { height: 100svh; } }
@media (min-width: 900px) { .hero { height: 100svh; } }
.hero .pin { position: relative; }
.hero .slides picture { transition: opacity 1.4s ease; }

/* {form}, v6 (2026-10-24): the words stay still; beside them a body from the suit squats through a real set of
   wall balls as you scroll, on its own dark stage in the app's look, turning slowly until someone grabs it */
.science { height: 300vh; --bend: 0 !important; }
.science .form { transform: none !important; font-weight: 600 !important; letter-spacing: -.055em !important; }
.science .l2 { opacity: 1; transform: none; }
.science .pin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; gap: 20px; padding-top: 84px; padding-bottom: 24px; }
.science p { font-size: clamp(32px, 8.6vw, 84px); }
.science .l2 { order: 3; justify-self: start; text-align: left; max-width: 16ch; }
.figure-form { --ff-page: #141414; --ff-figure: #eeeae2; --ff-accent: #a2afb9; position: relative; order: 2; min-height: 0; margin: 0 calc(var(--gutter) * -1); background: radial-gradient(120% 90% at 50% 40%, #24272b 0%, #141414 70%); overflow: hidden; opacity: 0; transition: opacity .8s ease; cursor: grab; touch-action: pan-y; }
.figure-form.held { cursor: grabbing; }
.figure-form.ready { opacity: 1; }
.figure-form canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ff-read { position: absolute; left: var(--gutter); bottom: 18px; display: grid; justify-items: start; color: var(--bone); pointer-events: none; }
.ff-rep { font-size: 14px; font-weight: 600; color: var(--slate); }
.ff-deg { font-size: clamp(44px, 6vw, 84px); font-weight: 700; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; transition: color .3s; }
.ff-note { margin-top: 4px; font-size: 14px; color: var(--slate); max-width: 24ch; }
.figure-form.shallow .ff-deg { color: #c9a48f; }
.ff-strip { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: 12px; }
.ff-strip i { display: block; width: 5px; background: rgba(238, 234, 226, .16); transition: background .25s; }
.ff-strip i.on { background: var(--bone); }
.ff-strip i.hot { background: #c9a48f; }
.ff-hint { position: absolute; right: var(--gutter); bottom: 20px; font-size: 12px; color: var(--slate); opacity: .7; pointer-events: none; transition: opacity .4s; }
.figure-form.held .ff-hint { opacity: 0; }
@media (min-width: 900px) {
  .science .pin { grid-template-columns: 5fr 6fr; grid-template-rows: 1fr auto; column-gap: 56px; padding: 96px var(--gutter) 64px; }
  .science .l1 { grid-column: 1; grid-row: 1; align-self: end; }
  .science .l2 { grid-column: 1; grid-row: 2; margin-top: 32px; }
  .figure-form { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .science p { font-size: clamp(44px, 5vw, 84px); }
  .ff-read { left: 32px; bottom: 28px; }
  .ff-hint { right: 28px; bottom: 30px; }
}
/* the {form} screen is one screen now: the set plays on its own, nothing is tied to the scroll */
.science { height: auto; min-height: 100svh; }
.science .pin { position: relative; min-height: 100svh; height: auto; }
@media (max-width: 899px) { .science .pin { height: 100svh; } }

/* {nwh} set like {form}: ink word, brown braces */
.science .l2 .mark { white-space: nowrap; }
.science .l2 .mark b { color: var(--brown); }

/* 2b, v7: three moments in a row (a swipe on phones) and the way into the full simulation */
.circuit { padding-bottom: 96px; }
.circuit .highlights { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; margin: 32px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.circuit .highlights::-webkit-scrollbar { display: none; }
.circuit .highlights .hl-card { scroll-snap-align: start; }
.circuit .btn.dark { margin-top: 36px; background: var(--ink); color: var(--bone); }
.circuit .btn.dark:hover { background: #000; }
.circuit .frame, .circuit .frame-start, .circuit .travel, .circuit .exit, .circuit .apptop { display: none !important; }
@media (min-width: 900px) {
  .circuit .wrap { max-width: var(--max); }
  .circuit .highlights { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 56px 0 0; padding: 0; overflow: visible; }
  .circuit .btn.dark { margin-top: 56px; }
}
.ff-hint { top: 18px; bottom: auto; }
@media (min-width: 900px) { .ff-hint { top: 26px; bottom: auto; } }
.circuit .hl-station, .circuit .hl-small { color: #3f4a52; }
.circuit .hl-big.hot { color: var(--brown); }

/* the knit: the first pre-order page's magenta light, travelling only along the real conductive threads (the same mask,
   lined up with this photo), cropped exactly as the photo is. The one place magenta appears besides the edge stripe. */
.how .macro { position: relative; }
.how .macro .glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 0 30%, var(--magenta) 42% 58%, transparent 70% 100%) 0 0 / 300% 100% no-repeat, rgba(244, 4, 136, .55);
  -webkit-mask: url("/img/photos/v4/knit-threads.png") 50% 50% / cover no-repeat;
  mask: url("/img/photos/v4/knit-threads.png") 50% 50% / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s var(--ease) .4s;
}
@media (min-width: 900px) { .how .macro .glow { left: var(--gutter); right: var(--gutter); } }
.how.in .macro .glow { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .how.in .macro .glow { animation: travel 3.6s linear 1s infinite; } }
@keyframes travel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hl-card { align-content: start; }
/* warm tan bodies on the dark stages (2026-10-24) */
.highlights { --hl-figure: #d9bfa8; }
.figure-form { --ff-figure: #d9bfa8; }

/* v7, the magazine direction (Anant's Figma, 2026-10-24): a squeezed display face on headlines only, the wordmark
   set large across the bottom of the cover, {nwh} top right, the line and the button top left. Body text stays Inter
   Tight. We hold the Medium Semi Squeezed cut (Off Type order OTF-#3185); Anant's file uses Bold Squeezed. */
@font-face {
  font-family: "Neue Montreal SS";
  src: url("/fonts/neue-montreal-semi-squeezed-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
:root { --display: "Neue Montreal SS", "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3, .science p, .opts .amt, .ff-deg { font-family: var(--display); font-weight: 500; }
h1, h2 { letter-spacing: -.012em; line-height: .96; }
h2 { font-size: clamp(42px, 6vw, 92px); }

/* 1. the cover */
.hero .slides::after { background: linear-gradient(180deg, rgba(20,20,20,.72) 0%, rgba(20,20,20,.3) 34%, rgba(20,20,20,0) 54%, rgba(20,20,20,.3) 100%); }
.hero .copy { top: 0; bottom: auto; right: auto; max-width: 720px; padding: 24px var(--gutter) 0; }
.hero h1 { font-size: clamp(30px, 3.5vw, 54px); max-width: 21ch; letter-spacing: -.005em; line-height: 1.02; }
.hero h1 .then { display: block; }
.hero h1 .brace { white-space: nowrap; }
.hero h1 .brace b { color: var(--magenta); font-weight: inherit; }
.hero .now { margin-top: 22px; }
.hero .offer { margin-top: 14px; font-size: 15px; color: rgba(238, 234, 226, .86); }
.hero .offer b { font-size: 1.15em; color: var(--bone); }
.hero .mark-top { position: absolute; z-index: 2; top: 26px; right: var(--gutter); width: clamp(60px, 7vw, 112px); color: var(--bone); }
.hero .mark-top .nwh { width: 100%; }
.hero .wm.big { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(14px, 3vh, 34px); width: calc(100% - var(--gutter) * 2); color: var(--bone); }
.hero .ticks { position: absolute; z-index: 2; left: var(--gutter); bottom: calc((100vw - var(--stripe) - var(--gutter) * 2) * .213 + clamp(14px, 3vh, 34px) + 22px); }
@media (min-width: 900px) {
  .hero .copy { padding: 34px var(--gutter) 0; }
  .hero .mark-top { top: 34px; }
  .hero .wm.big { width: min(60%, 1060px); }
  .hero .ticks { bottom: calc(clamp(14px, 3vh, 34px) + 8px); }
}

/* 2. {form}: words left, the stage in the middle, {nwh} right (Anant's Figma). The stage is three rows, what the
   exercise is, the body, then the number and what it means, so nothing sits on the body. */
.science p { letter-spacing: -.012em; line-height: .94; }
.science .form { letter-spacing: -.012em !important; font-weight: 500 !important; }
.science .l2 .mark { display: block; font-size: 1.5em; line-height: 1; margin-bottom: .1em; }
.figure-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ff-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 20px 0; color: var(--bone); }
.ff-name { font-family: var(--display); font-size: 26px !important; line-height: 1 !important; letter-spacing: 0 !important; }
.ff-from { margin-top: 4px !important; font: 450 13px/1.3 var(--sans) !important; letter-spacing: 0 !important; color: var(--slate); }
.ff-head .ff-hint { position: static; flex: none; font-size: 12px; }
.ff-view { position: relative; min-height: 0; }
.ff-read { position: static; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px 20px; padding: 0 20px 18px; }
.ff-now { display: grid; justify-items: start; }
.ff-deg { font-size: clamp(44px, 5vw, 76px); letter-spacing: -.01em; font-variant-numeric: normal; }  /* its tabular figures are a typewriter set */
.ff-strip { justify-self: end; margin: 0 0 6px; }
.ff-key { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgba(238, 234, 226, .14); font: 450 13px/1.4 var(--sans) !important; letter-spacing: 0 !important; color: var(--slate); }
@media (max-width: 899px) {
  .hero .copy { padding-right: calc(var(--gutter) + 76px); }
  .ff-head { flex-wrap: wrap; row-gap: 2px; }
  .ff-head > div:first-child, .ff-name { flex: 1 0 100%; }
  .ff-read { grid-template-columns: 1fr; }
  .ff-strip { justify-self: stretch; }
  .science .pin { height: auto; min-height: 0; padding-top: 72px; padding-bottom: 40px; }
  .figure-form { height: 78svh; min-height: 520px; }
  .ff-strip { gap: 2px; }
  .ff-strip i { width: 4px; }
}
@media (min-width: 900px) {
  .science .pin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr; column-gap: 40px; padding: 72px var(--gutter); }
  .science p { font-size: clamp(44px, 4.6vw, 84px); }
  .science .l1 { grid-column: 1; grid-row: 1; align-self: start; }
  .science .l2 { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; text-align: right; margin: 0; max-width: 9ch; }
  .figure-form { grid-column: 2; grid-row: 1; min-height: 640px; }
  .ff-head { padding: 24px 28px 0; }
  .ff-read { padding: 0 28px 24px; }
}

/* 2a. connect, calibrate, play: three tall night photos edge to edge, the word big on each */
.ccp { padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ccp::-webkit-scrollbar { display: none; }
.ccp figure { position: relative; margin: 0; scroll-snap-align: start; }
.ccp img { width: 100%; height: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.ccp figure::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(20,20,20,0), rgba(20,20,20,.85)); pointer-events: none; }
.ccp figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 22px 24px; }
.ccp h3 { margin: 0; font-size: clamp(56px, 7vw, 108px); line-height: .9; letter-spacing: -.01em; }
.ccp figcaption p { margin-top: 10px; max-width: 30ch; font-size: 16px; line-height: 1.4; color: rgba(238, 234, 226, .86); }
@media (min-width: 900px) {
  .ccp { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .ccp img { aspect-ratio: 2 / 3.1; }
  .ccp figcaption { padding: 0 32px 34px; }
  .ccp figcaption p { font-size: 17px; }
}

/* 2b. the circuit */
.circuit { padding-top: 96px; }
.circuit > .wrap > .head h2 { max-width: none; }
.circuit .head .lead { margin-top: 16px; font-size: 19px; line-height: 1.4; color: #3f4a52; max-width: 52ch; }
@media (min-width: 900px) { .circuit .head .lead { font-size: 22px; margin-top: 22px; } }
@media (min-width: 900px) { .circuit { padding-top: 120px; } }

/* 4. the knit: the headline on the photo, the steps below, the sensor showing through the cloth */
.how .macro h2 { position: absolute; z-index: 2; top: 22px; left: 22px; right: 22px; max-width: 14ch; color: var(--bone); text-shadow: 0 1px 24px rgba(0, 0, 0, .5); }
.how .macro::before { content: ""; position: absolute; z-index: 1; inset: 0 0 50%; background: linear-gradient(180deg, rgba(20,20,20,.6), rgba(20,20,20,0)); pointer-events: none; }
.how .wrap { display: block; }
.how { padding-top: 72px; }
@media (min-width: 900px) { .how { padding-top: 120px; } }
@media (min-width: 900px) {
  .how .macro h2 { top: 36px; left: calc(var(--gutter) + 36px); max-width: 16ch; }
  /* cropped from the top, so the sensor sits below the headline; the thread light's mask is cropped the same way */
  .how .macro img { object-position: 50% 0; }
  .how .macro .glow { -webkit-mask-position: 50% 0; mask-position: 50% 0; }
  .how .macro::before { left: var(--gutter); right: var(--gutter); }
  .how .steps { max-width: 900px; }
}

/* 5. the weak spots: three night photos, the sport set over each, three things it reads below it */
.sports .cols > article { position: relative; scroll-snap-align: start; }
.sports img { margin: 0; aspect-ratio: 3 / 4; }
.sports .over { background: linear-gradient(180deg, rgba(20,20,20,0) 62%, rgba(20,20,20,.82)); }
.sports .cols > article > img + .over { position: absolute; z-index: 1; left: 0; right: 0; top: 0; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 22px 20px; }
.sports .n { font-size: 13px; font-weight: 650; color: var(--slate); }
.sports h3 { margin-top: 6px; font-size: clamp(32px, 3vw, 44px); line-height: .96; letter-spacing: -.01em; font-weight: 500; }
.sports ul { list-style: none; margin: 14px 0 0; padding: 0; }
.sports li:last-child { border-bottom: 1px solid rgba(238, 234, 226, .2); }
.sports li { padding: 9px 0; border-top: 1px solid rgba(238, 234, 226, .2); font-size: 16px; line-height: 1.3; }
@media (min-width: 900px) { .sports .over { padding: 0 26px 24px; } .sports li { font-size: 17px; } }

/* 5. here's something real (Anant's Figma): the words and the button left, the player right, on the app's dark */
.circuit .head .btn.dark { margin-top: 28px; }
.circuit .report[data-player] {
  margin-top: 36px; padding: 16px; background: var(--ink); color: var(--bone);
  --rp-page: var(--ink); --rp-text: var(--bone); --rp-muted: var(--slate); --rp-dim: #76828b;
  --rp-line: rgba(238, 234, 226, .16); --rp-card: #1e2124; --rp-figure: #d9bfa8; --rp-figure-accent: var(--slate);
  --rp-ground: var(--ink); --rp-accent: #d9bfa8; --rp-accent-soft: rgba(217, 191, 168, .22);
}
.circuit .report[data-player] .scrub { margin-top: 0; }
@media (min-width: 900px) {
  .circuit .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .circuit .head { position: sticky; top: 96px; }
  .circuit .head h2 { font-size: clamp(44px, 4.4vw, 72px); }
  .circuit .report[data-player] { margin-top: 0; padding: 20px; }
}

/* 8. tech specs: the real battery photo large and in colour, three ruled lines beside it, as the order block sets them */
.specs { border-top: 1px solid var(--line); }
.specs .grid { display: grid; gap: 32px; margin-top: 36px; }
.specs figure { margin: 0; }
.specs figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.specs dl { margin: 0; display: grid; align-self: end; }
.specs dl div { padding: 22px 0; border-top: 1px solid var(--line); }
.specs dl div:last-child { border-bottom: 1px solid var(--line); }
.specs dt { font-family: var(--display); font-size: 28px; line-height: 1; }
.specs dd { margin: 8px 0 0; font-size: 18px; line-height: 1.4; color: var(--slate); }
@media (min-width: 900px) {
  .specs .grid { grid-template-columns: 7fr 5fr; gap: 64px; margin-top: 56px; }
  .specs dd { font-size: 19px; }
}

/* the hero's readout (2026-10-24): what the suit reads in the photo, set as the app would show it. A thin magenta tick,
   the exercise small, one reading. It types in a beat after its photo arrives. */
.hero .reads { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.readout { position: absolute; display: grid; gap: 3px; padding-left: 12px; color: var(--bone); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.readout .m { display: none; }
@media (max-width: 767px) { .readout .d { display: none; } .readout .m { display: block; } }
.readout::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--magenta); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.readout .what { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(238, 234, 226, .62); }
.readout .val { font-size: 17px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; }
.readout .val em { font-style: normal; }
.readout .val i { font-style: normal; color: rgba(238, 234, 226, .5); padding: 0 2px; }
.readout span { clip-path: inset(0 100% 0 0); transition: clip-path .9s steps(22, end); }
.readout.on::before { transform: none; transition-delay: .7s; }
.readout.on .what { clip-path: inset(0 0 0 0); transition-delay: 1s; }
.readout.on .val { clip-path: inset(0 0 0 0); transition-delay: 1.4s; }
@media (max-width: 767px) { .readout .val { font-size: 15px; } .readout .what { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .readout span, .readout::before { transition: none; } }
/* on the two cuts: pinned to a spot in the photo; too small to read on a phone's half-width photo, so hidden there */
.pair figure { position: relative; }
.pair .readout { left: var(--x); top: var(--y); }

/* phones (2026-10-24): the readout sits above the wordmark at the left gutter, and the cover's line is set smaller so it
   clears {nwh} in four lines */
@media (max-width: 767px) {
  .hero .copy { padding-right: calc(var(--gutter) + 58px); }
  .hero h1 { font-size: 27px; }
  .hero .mark-top { width: 50px; top: 28px; }
}
@media (max-width: 767px) {
  /* the knit: tall enough to see the sensor under the cloth, the headline at the foot of the photo */
  .how .macro img { aspect-ratio: 4 / 5; }
  .how .macro h2 { top: auto; bottom: 18px; font-size: 34px; }
  .how .macro::before { inset: 45% 0 0; background: linear-gradient(180deg, rgba(20,20,20,0), rgba(20,20,20,.75)); }
  /* two cuts: a swipe at near full width, like the other photo rows, so the photos and their readouts read */
  .pair { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; margin: 32px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .pair::-webkit-scrollbar { display: none; }
  .pair figure { scroll-snap-align: start; }
}
@media (max-width: 767px) { .pair .readout { left: min(var(--x), calc(100% - 172px)); } }
/* reserve: the spec list moved up into tech specs, so the order block is one column */
@media (min-width: 900px) { .order .grid { grid-template-columns: minmax(0, 640px); } }
/* phones (Anshul 2026-10-24): the phone photos are extended upward (img/photos/v7/m-*), so the words sit on the photo's
   own empty sky above the athlete, full bleed like the laptop; the readout sits beside the athlete */
@media (max-width: 767px) {
  .hero .slides img { object-position: 50% 50%; }
  .hero .slides::after { background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.2) 34%, rgba(20,20,20,0) 50%, rgba(20,20,20,.35) 100%); }
  .hero .mark-top { z-index: 3; }
}
@media (max-width: 767px) {
  /* beside the athlete the reading takes two short lines, so it stays narrow */
  .hero .readout .val em { display: block; }
  .hero .readout .val i { display: none; }
  .hero .readout .val { font-size: 15px; line-height: 1.3; }
}
/* short phones: the cover's words take less height, so they stay on the sky above the athlete */
@media (max-width: 767px) and (max-height: 700px) {
  .hero .copy { padding-top: 16px; }
  .hero h1 { font-size: 23px; }
  .hero .now { margin-top: 14px; }
  .hero .btn { padding: 12px 18px; font-size: 15px; }
  .hero .offer { margin-top: 10px; font-size: 13px; }
}

/* Anant's Figma, exactly (2026-10-25, frames 2 to 6 of Nowhere Landing Pages, 1920 by 1080 with the stripe in the last
   31 px). On laptops every position and size is the frame's own pixel, scaled by --fu: one frame pixel at this width. */
@media (min-width: 900px) {
  .hero { --fu: calc((100vw - var(--stripe)) / 1889); }
  .hero .slides::after { background: linear-gradient(90deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.2) 40%, rgba(20,20,20,0) 60%); }
  .hero .copy { top: calc(98 * var(--fu)); left: calc(63 * var(--fu)); padding: 0; max-width: none; width: calc(852 * var(--fu)); }
  .hero h1 { font-size: calc(48 * var(--fu)); line-height: 1.22; max-width: none; letter-spacing: 0; }
  /* the button keeps the site's own look; only its place is the frame's: top edge at 371 */
  .hero .now { position: absolute; top: calc((371 - 98) * var(--fu)); left: 0; margin: 0; }
  .hero .mark-top { top: calc(15 * var(--fu)); right: auto; left: calc(1711 * var(--fu)); width: calc(162 * var(--fu)); }
  .hero .wm.big { left: calc(854 * var(--fu)); right: auto; bottom: calc(9 * var(--fu)); width: calc(1010 * var(--fu)); }
  /* {form}, frame 6: slate, the stage full height between x 463 and 1456, the words in white either side */
  .science { --fu: calc((100vw - var(--stripe)) / 1889); }
  .science .pin { display: block; position: relative; height: calc(1080 * var(--fu)); min-height: 0; padding: 0; }
  .science .figure-form { position: absolute; top: 0; bottom: 0; left: calc(463 * var(--fu)); width: calc(993 * var(--fu)); margin: 0; min-height: 0; }
  .science .pin > p { position: absolute; margin: 0; font-size: calc(96 * var(--fu)); line-height: 1.2; letter-spacing: 0; color: var(--bone); }
  .science .pin > p.l1 { left: calc(49 * var(--fu)); top: calc(29 * var(--fu)); width: calc(366 * var(--fu)); max-width: none; }
  .science .pin > p.l2 { right: calc(35 * var(--fu)); left: auto; top: calc(657 * var(--fu)); width: auto; max-width: none; margin: 0; font-size: calc(70 * var(--fu)); text-align: right; }
  .science .l2 > span:last-child { display: block; white-space: nowrap; }
  .science .l2 .mark.nwh { display: block; width: calc(380 * var(--fu)); margin: 0 0 calc(3 * var(--fu)) auto; color: #5d5046; }
}
/* the {form} words, everywhere: white on slate, "form" in magenta, "everywhere" in brown, as in frame 6 */
.science .pin > p { color: var(--bone); }
.science .form { color: var(--magenta); font-weight: 500 !important; }
.science .l2 em { font-style: normal; color: #5d5046; }
@media (max-width: 899px) { .science .l2 .mark.nwh { display: block; width: 46%; max-width: 220px; color: #5d5046; margin-bottom: .15em; } }
@media (min-width: 900px) { .science { min-height: 0; } }
/* reserve: what the $100 is, three numbered lines on the brown */
.order .deposit { list-style: none; counter-reset: d; margin: 28px 0 0; padding: 0; max-width: 52ch; }
.order .deposit li { counter-increment: d; position: relative; padding: 14px 0 14px 40px; border-top: 1px solid rgba(238, 234, 226, .3); font-size: 17px; line-height: 1.4; color: rgba(238, 234, 226, .86); }
.order .deposit li:last-child { border-bottom: 1px solid rgba(238, 234, 226, .3); }
.order .deposit li::before { content: counter(d, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-size: 13px; font-weight: 650; color: var(--bone); }
.order .deposit b { color: var(--bone); }
/* weak spots: one line under the heading so three sports read as examples */
.sports .lead { margin-top: 16px; font-size: 19px; line-height: 1.4; color: var(--slate); }
@media (min-width: 900px) { .sports .lead { font-size: 22px; margin-top: 20px; } }
/* reserve (2026-10-25): the heading across, the prices left and what the $100 is right, both columns starting on the
   same rule and the same width, the button under the three lines */
.order .grid { display: grid; gap: 40px; margin-top: 40px; }
.order .opts { margin-top: 0; }
.order .deposit { margin-top: 0; max-width: none; }
.order .how-pay .btn { margin-top: 28px; }
@media (min-width: 900px) {
  .order .grid { grid-template-columns: 1fr 1fr !important; gap: 96px; margin-top: 56px; align-items: start; }
  .order .deposit li { padding: 22px 0 22px 44px; font-size: 18px; }
  .order .deposit li::before { top: 25px; }
}
@media (min-width: 900px) { .bar .btn { margin-left: auto; } }
html { scroll-padding-top: 72px; }
/* the floating reserve button (2026-10-25): no bar, just the button in the bottom right corner, in from below */
.bar { top: auto; left: auto; right: calc(var(--stripe) + 20px); bottom: 20px; padding: 0; gap: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateY(calc(100% + 40px)); }
.bar.on { transform: none; }
.bar .btn { margin: 0 !important; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
@media (min-width: 900px) { .bar { right: calc(var(--stripe) + 32px); bottom: 32px; } .bar .btn { padding: 16px 26px; font-size: 16px; } }
html { scroll-padding-top: 0; }

/* Figma 2026-10-25 (Anshul and Anant's edits): one ink ground for the whole page, the knit full width with the three
   lines in a box on its lower right, the report button at the foot of the player, {form} on ink */
.science, .circuit, .order { background: var(--ink); }
.science .pin > p, .science p { color: var(--bone); }
.science .form, .science .l1 em, .science .l2 em { color: #5d5046; font-style: normal; }
.circuit, .circuit h2 { color: var(--bone); }
.circuit .head .lead { color: var(--slate); }
.circuit .head .btn { background: var(--bone); color: var(--ink); }
.order { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .circuit .wrap { align-items: stretch; }
  .circuit .head { position: static; display: flex; flex-direction: column; align-items: flex-start; }
  .circuit .head .btn { margin-top: auto; }
}
.how { padding: 0; --fu: calc((100vw - var(--stripe)) / 1889); }
.how .macro { margin: 0; padding: 0; max-width: none; }
.how .macro img { aspect-ratio: auto; height: auto; }
.how .macro::before { inset: 0 0 auto; height: 50%; left: 0; right: 0; }
.how .macro .glow { left: 0; right: 0; }
.how .wrap { margin: 0; padding: 0; max-width: none; }
@media (min-width: 900px) {
  .how { position: relative; height: calc(1080 * var(--fu)); overflow: hidden; }
  .how .macro { position: absolute; inset: 0; }
  .how .macro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  .how .macro .glow { -webkit-mask-position: 50% 0; mask-position: 50% 0; }
  .how .macro h2 { top: calc(36 * var(--fu)); left: calc(36 * var(--fu)); max-width: none; font-size: calc(92 * var(--fu)); }
  .how .wrap { position: absolute; right: 0; bottom: 0; width: calc(919 * var(--fu)); background: var(--ink); padding: calc(10 * var(--fu)) calc(19 * var(--fu)) 0; }
  .how .steps { margin: 0; max-width: none; }
  .how .steps li { font-size: calc(20 * var(--fu)); padding: calc(20 * var(--fu)) 0 calc(20 * var(--fu)) calc(52 * var(--fu)); color: var(--bone); }
  .how .steps li::before { color: var(--slate); top: calc(23 * var(--fu)); }
  .how .steps li:last-child { border-bottom: 0; }
}
@media (max-width: 899px) {
  .how .macro img { aspect-ratio: 4 / 5; object-fit: cover; }
  .how .wrap { padding: 8px var(--gutter) 56px; }
}
@media (max-width: 899px) { br.d { display: none; } }
@media (max-width: 899px) { .how .macro::before { inset: auto 0 0; height: 55%; background: linear-gradient(180deg, rgba(20,20,20,0), rgba(20,20,20,.75)); } }
@media (min-width: 900px) { .how .macro::before { background: linear-gradient(180deg, rgba(20,20,20,.6), rgba(20,20,20,0)); } }
/* the {form} stage as Anant's frame 6 has it (Anshul 2026-10-25): one flat black, no header row, no bands. Only
   "Real recorded data" top right and the rep, its angle and the bars at the foot. */
.figure-form { background: #141414; }
.ff-head { justify-content: flex-end; }
.ff-name, .ff-from, .ff-key { display: none !important; }
.ff-read { border: 0; }
/* the {form} readout keeps one height whatever the rep says (Anshul 2026-10-25: the stage jumped when the note wrapped) */
.ff-note { max-width: none !important; white-space: nowrap; height: 1.4em; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; }
.ff-rep { height: 1.4em; line-height: 1.4; white-space: nowrap; }
.ff-deg { height: 1em; line-height: 1; }
.ff-now { min-width: 0; }

/* 2026-10-25, Figma frames 3 to 9 at their own geometry: on laptops every section is at least one full screen and its
   positions and sizes are the frame's pixels times --fu (one 1920-frame pixel at this width, the 31 px stripe left out),
   with a floor so small text stays readable. Section 5 is one slate ground, the player on it with no panel. */
.sec-cta { display: inline-block; margin-top: 28px; }
.bar { display: none !important; }
@media (max-width: 899px) { .ccp .sec-cta { display: none; } .how > .sec-cta { margin: 24px var(--gutter) 56px; } }
@media (min-width: 900px) {
  main > section { --fu: calc((100vw - var(--stripe)) / 1889); }
  .science { min-height: 100svh; display: flex; align-items: center; }
  .science .pin { width: 100%; }
  .sports, .circuit, .cuts, .specs, .order { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(120 * var(--fu)) 0; }
  .sports > .wrap, .circuit > .wrap, .cuts > .wrap, .specs > .wrap, .order > .wrap { position: relative; width: 100%; max-width: none; margin: 0; padding: 0 calc(309 * var(--fu)) 0 calc(340 * var(--fu)); }
  .sports h2, .cuts h2, .specs h2, .order h2 { font-size: calc(92 * var(--fu)); }
  .sec-cta { position: absolute; z-index: 3; margin: 0; }
  .sports .sec-cta, .cuts .sec-cta, .specs .sec-cta { top: calc(16 * var(--fu)); right: calc(309 * var(--fu)); }
  /* 3 */
  .ccp { position: relative; min-height: 100svh; }
  .ccp figure, .ccp img { height: max(100svh, calc(1080 * var(--fu))); }
  .ccp img { aspect-ratio: auto; }
  .ccp h3 { font-size: calc(108 * var(--fu)); }
  .ccp figcaption { padding: 0 calc(32 * var(--fu)) calc(56 * var(--fu)); }
  .ccp .sec-cta { right: calc(36 * var(--fu)); bottom: calc(36 * var(--fu)); }
  /* 4 */
  .sports .lead { margin-top: calc(24 * var(--fu)); font-size: max(15px, calc(22 * var(--fu))); }
  .sports .cols { margin-top: calc(65 * var(--fu)); gap: calc(32 * var(--fu)); }
  .sports img { aspect-ratio: 392 / 523; }
  .sports .cols > article > img + .over { aspect-ratio: 392 / 523; padding: 0 calc(26 * var(--fu)) calc(20 * var(--fu)); }
  .sports h3 { font-size: max(22px, calc(40 * var(--fu))); }
  .sports li { font-size: max(14px, calc(17 * var(--fu))); padding: calc(10 * var(--fu)) 0; }
  /* 5: one slate ground, the words left, the player right on the same slate */
  .circuit { background: var(--slate); color: var(--ink); }
  .circuit h2 { color: var(--ink); }
  .circuit > .wrap { display: grid; grid-template-columns: calc(560 * var(--fu)) calc(680 * var(--fu)); gap: 0; align-items: stretch; }
  .circuit .head { position: static; display: flex; flex-direction: column; align-items: flex-start; padding-right: calc(40 * var(--fu)); }
  .circuit .head h2 { font-size: calc(72 * var(--fu)); max-width: none; }
  .circuit .head .lead { margin-top: calc(88 * var(--fu)); font-size: max(22px, calc(64 * var(--fu))); line-height: 1.12; letter-spacing: -.02em; color: #3f4a52; max-width: calc(470 * var(--fu)); }
  .circuit .head .btn { margin-top: auto; background: var(--ink); color: var(--bone); }
  .circuit .sec-cta { right: calc(309 * var(--fu)); bottom: calc(-56 * var(--fu) - 30px); background: var(--ink); color: var(--bone); }
  .circuit .report[data-player] { margin: 0; padding: 0; background: transparent; color: var(--ink);
    --rp-page: var(--slate); --rp-text: var(--ink); --rp-muted: #3f4a52; --rp-dim: #4f5b64; --rp-line: rgba(20, 20, 20, .22);
    --rp-card: rgba(20, 20, 20, .1); --rp-figure: var(--ink); --rp-figure-accent: var(--brown); --rp-ground: var(--slate);
    --rp-accent: var(--brown); --rp-accent-soft: rgba(96, 78, 69, .22); }
  .circuit .report[data-player] .figure .play { background: rgba(20, 20, 20, .12); }
  .circuit .report[data-player] .chips button.on { background: var(--ink); color: var(--slate); }
  /* 6 */
  .how { height: max(100svh, calc(1080 * var(--fu))); }
  .how > .sec-cta { top: calc(36 * var(--fu)); right: calc(36 * var(--fu)); }
  /* 7 */
  .cuts .pair { margin-top: calc(88 * var(--fu)); gap: calc(32 * var(--fu)); }
  .cuts .pair img { aspect-ratio: 604 / 755; }
  .cuts .pair figcaption { margin-top: calc(16 * var(--fu)); font-size: max(14px, calc(17 * var(--fu))); }
  .cuts .facts { margin-top: calc(40 * var(--fu)); gap: calc(32 * var(--fu)); }
  .cuts .facts li { font-size: max(15px, calc(19 * var(--fu))); padding-top: calc(22 * var(--fu)); }
  /* 8 */
  .specs .grid { margin-top: calc(88 * var(--fu)); grid-template-columns: calc(690 * var(--fu)) 1fr; gap: calc(64 * var(--fu)); }
  .specs figure img { aspect-ratio: 690 / 431; }
  .specs dt { font-size: max(20px, calc(28 * var(--fu))); }
  .specs dd { font-size: max(15px, calc(19 * var(--fu))); }
  .specs dl div { padding: calc(22 * var(--fu)) 0; }
  /* 9 */
  .order .grid { margin-top: calc(88 * var(--fu)) !important; gap: calc(96 * var(--fu)) !important; }
  .order .opts .amt { font-size: calc(52 * var(--fu)); }
  .order .deposit li { font-size: max(15px, calc(18 * var(--fu))); }
}
/* section 5 on slate on phones too */
.circuit { background: var(--slate); color: var(--ink); }
.circuit h2 { color: var(--ink); }
.circuit .head .lead { color: #3f4a52; }
.circuit .head .btn, .circuit .sec-cta { background: var(--ink); color: var(--bone); }
.circuit .report[data-player] { background: transparent; padding: 0; color: var(--ink);
  --rp-page: var(--slate); --rp-text: var(--ink); --rp-muted: #3f4a52; --rp-dim: #4f5b64; --rp-line: rgba(20, 20, 20, .22);
  --rp-card: rgba(20, 20, 20, .1); --rp-figure: var(--ink); --rp-figure-accent: var(--brown); --rp-ground: var(--slate);
  --rp-accent: var(--brown); --rp-accent-soft: rgba(96, 78, 69, .22); }
.circuit .report[data-player] .chips button.on { background: var(--ink); color: var(--slate); }
/* reserve back on brown (Anshul 2026-10-25). html.reserve-slate tries it on slate, for comparing (?reserve=slate) */
.order { background: var(--brown); border-top: 0; }
html.reserve-slate .order { background: var(--slate); color: var(--ink); }
html.reserve-slate .order h2, html.reserve-slate .order .qty, html.reserve-slate .order .amt, html.reserve-slate .order .deposit b, html.reserve-slate .order .deposit li::before { color: var(--ink); }
html.reserve-slate .order .note, html.reserve-slate .order .deposit li, html.reserve-slate .order .fine, html.reserve-slate .order .fine a, html.reserve-slate .order .amt s { color: #3f4a52; }
html.reserve-slate .order .opts > div, html.reserve-slate .order .deposit li { border-color: rgba(20, 20, 20, .22); }
html.reserve-slate .order .btn { background: var(--ink); color: var(--bone); }
/* trying section 5 on brown (Anshul 2026-10-25, local only). ?hyrox=slate shows the slate version again */
html:not(.hyrox-slate) .circuit { background: var(--brown); color: var(--bone); }
html:not(.hyrox-slate) .circuit h2 { color: var(--bone); }
html:not(.hyrox-slate) .circuit .head .lead { color: rgba(238, 234, 226, .72); }
html:not(.hyrox-slate) .circuit .head .btn, html:not(.hyrox-slate) .circuit .sec-cta { background: var(--bone); color: var(--ink); }
html:not(.hyrox-slate) .circuit .report[data-player] { color: var(--bone);
  --rp-page: var(--brown); --rp-text: var(--bone); --rp-muted: rgba(238, 234, 226, .72); --rp-dim: rgba(238, 234, 226, .55);
  --rp-line: rgba(238, 234, 226, .28); --rp-card: rgba(238, 234, 226, .12); --rp-figure: var(--bone); --rp-figure-accent: #d9bfa8;
  --rp-ground: var(--brown); --rp-accent: #d9bfa8; --rp-accent-soft: rgba(217, 191, 168, .25); }
html:not(.hyrox-slate) .circuit .report[data-player] .chips button.on { background: var(--bone); color: var(--brown); }
html:not(.hyrox-slate) .circuit .report[data-player] .figure .play { background: rgba(238, 234, 226, .16); }
/* the edge tab (2026-10-25): Reserve now set upright on the brand stripe, the one button on sections 3 to 8 */
.sec-cta { display: none !important; }
.edge-cta { position: fixed; z-index: 60; top: 50%; right: var(--stripe); writing-mode: vertical-rl; transform: translate(100%, -50%) rotate(180deg);
  padding: 22px 12px; background: var(--bone); color: var(--ink); font: 650 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  transition: transform .45s var(--ease); }
.edge-cta.on { transform: translate(0, -50%) rotate(180deg); }
.edge-cta:hover { background: #fff; }
@media (min-width: 900px) { .edge-cta { padding: 28px 14px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .edge-cta { transition: none; } }
/* Reserve now (Anshul 2026-10-25): the corner button as at first, bottom right, on sections 3 to 8 only */
.edge-cta { writing-mode: horizontal-tb; top: auto; right: calc(var(--stripe) + 20px); bottom: 20px; padding: 14px 22px; font: 650 15px/1.2 var(--sans);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45); transform: translateY(calc(100% + 40px)); }
.edge-cta.on { transform: none; }
@media (min-width: 900px) { .edge-cta { right: calc(var(--stripe) + 32px); bottom: 32px; padding: 16px 26px; font-size: 16px; } }

/* pagination (Anshul 2026-10-25): on laptops every section is exactly one screen. Each is a 1920 by 1080 Figma frame
   scaled to fit both the width and the height (--fu is the smaller scale), its 1240 column centred as in the frame. */
@media (min-width: 900px) {
  .sports, .circuit, .cuts, .specs, .order {
    --fu: min(calc((100vw - var(--stripe)) / 1889), calc(100svh / 1080));
    height: 100svh; min-height: 0; padding: 0; justify-content: center; overflow: hidden; }
  .sports > .wrap, .circuit > .wrap, .cuts > .wrap, .specs > .wrap, .order > .wrap {
    padding: 0 calc((100vw - var(--stripe) - 1240 * var(--fu)) / 2 - 15.5 * var(--fu)) 0 calc((100vw - var(--stripe) - 1240 * var(--fu)) / 2 + 15.5 * var(--fu)); }
  .ccp, .ccp figure, .ccp img { height: 100svh; min-height: 0; }
  .science { --fu: min(calc((100vw - var(--stripe)) / 1889), calc(100svh / 1080)); height: 100svh; min-height: 0; }
  .science .pin { width: calc(1889 * var(--fu)); margin: 0 auto; }
  .how { height: 100svh; }
  /* 4, fitted to 1080: card photos 392 by 490 */
  .sports .lead { margin-top: calc(20 * var(--fu)); }
  .sports .cols { margin-top: calc(44 * var(--fu)); }
  .sports img, .sports .cols > article > img + .over { aspect-ratio: 392 / 490; }
  /* 7, fitted to 1080: photos 604 by 635 */
  .cuts .pair { margin-top: calc(48 * var(--fu)); }
  .cuts .pair img { aspect-ratio: 604 / 635; }
  .cuts .facts { margin-top: calc(32 * var(--fu)); }
  /* 6: the three lines sit above the corner button */
  .how .wrap { bottom: calc(120 * var(--fu)); }
}
/* phones: {form} is one screen (words smaller, the stage takes the rest), connect calibrate play is one screen of
   photos, and each section from 3 to 8 ends with room for the corner button */
@media (max-width: 899px) {
  .science { height: 100svh; min-height: 0; }
  .science .pin { height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 56px var(--gutter) 28px; }
  .science .pin > p, .science p { font-size: 30px; line-height: 1.02; }
  .science .pin > p, .science p { font-size: 28px; }
  .science .l2 .mark.nwh { width: 120px; margin-bottom: 6px; }
  .figure-form { height: auto !important; min-height: 0 !important; }
  .ccp figure, .ccp img { height: 100svh; aspect-ratio: auto !important; }
  .sports, .circuit, .cuts, .specs { padding-bottom: 96px; }
  .how > .wrap { padding-bottom: 96px; }
}
/* 8, Figma 2026-10-25: no heading, the battery photo full height across the left, the three lines on the right */
@media (min-width: 900px) {
  .specs { position: relative; display: block; padding: 0; }
  .specs > .wrap { position: static; padding: 0; }
  .specs .grid { display: block; margin: 0 !important; }
  .specs figure { position: absolute; left: 0; top: 0; bottom: 0; width: calc(1354 / 1889 * 100%); }
  .specs figure img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 100% 50%; }
  .specs dl { position: absolute; left: calc(1403 / 1889 * 100%); right: 0; top: calc(441 / 1080 * 100%); }
}
@media (max-width: 899px) { .specs .grid { margin-top: 0; } }
/* 6, as Anant's frame (Figma 2026-10-25): the three lines in an ink box flush to the bottom right of the photo, 919 by
   229, rules only between the lines; the corner button sits in the box's empty right end */
@media (min-width: 900px) {
  .how .wrap { right: calc(10 * var(--fu)); bottom: 0; width: calc(919 * var(--fu)); padding: calc(22 * var(--fu)) 0 calc(27 * var(--fu)) calc(19 * var(--fu)); }
  .how .steps li { padding: calc(22 * var(--fu)) 0 calc(26 * var(--fu)) calc(52 * var(--fu)); border-top: 1px solid rgba(162, 175, 185, .35); font-size: max(15px, calc(20 * var(--fu))); line-height: 1.4; color: var(--bone); }
  .how .steps li:first-child { border-top: 0; padding-top: 0; }
  .how .steps li:last-child { padding-bottom: 0; border-bottom: 0; }
  .how .steps li::before { top: calc(22 * var(--fu) + .25em); font-size: max(11px, calc(14 * var(--fu))); color: var(--slate); }
  .how .steps li:first-child::before { top: .25em; }
}
/* reserve (Figma 2026-10-26): the button under the prices, the column's width, the refund line small beneath it */
.order .opts .btn.wide { display: block; width: 100%; margin-top: 28px; padding: 0; height: 60px; line-height: 60px; text-align: center; font-size: 18px; }
.order .opts .fine { margin-top: 14px; font-size: 15px; color: rgba(238, 234, 226, .78); }
.order .opts .fine a { color: inherit; }
/* the hot-weather readout: on the dark sky right of the elbow, two short lines; phones leave it out, no clear sky there */
.pair .readout.stack .val em { display: block; }
.pair .readout.stack .val i { display: none; }
/* phones: the hot cut's readout sits on the sky between the lamp and the runner's head (--mx, --my) */
@media (max-width: 767px) { .pair .readout.stack { left: var(--mx); top: var(--my); } }
/* below 600 px of screen the photo is too short to leave sky beside him, so it stays off rather than sit on his arm */
@media (max-width: 767px) and (max-height: 600px) { .pair .readout.stack { display: none; } }
@media (min-width: 768px) and (max-width: 899px) { .pair .readout.stack { display: none; } }
.pair .readout.stack .val { font-size: 15px; }
/* each section lands flush on the screen (Anshul 2026-10-26). Native snapping, no script: the browser settles the page
   on the nearest section edge once scrolling stops near one. Proximity, so a long fling still scrolls freely. */
html { scroll-snap-type: y proximity; }
main > section { scroll-snap-align: start; }
footer { scroll-snap-align: end; }
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }
/* phones: every section at least one full screen, so a snapped section never shows the next one */
@media (max-width: 899px) {
  main > section { min-height: 100svh; }
  .cuts, .specs, .order { display: flex; flex-direction: column; justify-content: center; }
  .cuts > .wrap, .specs > .wrap, .order > .wrap { width: 100%; }
}

/* phones (2026-10-26): every section is exactly one screen where scrolling stops, on any phone and whatever Safari's
   bars leave (100svh). The photo in each section takes the height the words leave, so nothing is cut off and no gap
   opens under the words. The hero readout sits under the button (set in index.html). */
@media (max-width: 767px) {
  .sports, .cuts, .specs, .how { display: flex; flex-direction: column; justify-content: flex-start; min-height: 100svh; }
  .sports > .wrap, .cuts > .wrap, .specs > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; }
  .sports .cols { flex: 1 1 0; min-height: 300px; }
  .sports .cols > article { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .sports .cols > article > img { grid-area: 1 / 1; height: 100%; min-height: 0; aspect-ratio: auto; }
  .sports .cols > article > img + .over { position: relative; grid-area: 1 / 1; aspect-ratio: auto; }
  .sports .cols > article > ul { display: none; } /* Anshul 2026-10-26: the three lines under each card read as too much text on a phone */
  .cuts .pair { flex: 1 1 0; min-height: 220px; }
  /* each photo is pinned to its box, because Safari will not resolve a percentage height inside a flexed box */
  .cuts .pair figure { position: relative; min-height: 0; }
  .cuts .pair img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .specs .grid { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
  .specs .grid > figure { position: relative; flex: 1 1 0; min-height: 140px; }
  .specs .grid > figure img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .how .macro { position: relative; flex: 1 1 0; min-height: 220px; }
  .how .macro img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .sports, .cuts, .specs { padding-top: 40px; padding-bottom: 84px; }
  .how .wrap { padding-bottom: 84px; }
  .circuit { padding-top: 48px; padding-bottom: 76px; }
  .circuit .report { margin-top: 16px; }
  .circuit .figure { height: clamp(150px, calc(100svh - 560px), 340px); }
  .circuit .figure canvas { height: 100% !important; } /* the player sets its own height inline and redraws to the CSS size */
}
/* short screens (an SE, or any phone with Safari's bars showing): smaller headings and gaps */
@media (max-width: 767px) and (max-height: 760px) {
  .sports, .cuts, .specs, .circuit { padding-top: 28px; padding-bottom: 76px; }
  .order { padding-top: 28px; padding-bottom: 24px; }
  .sports h2, .circuit h2, .cuts h2, .order h2 { font-size: 32px; }
  .sports .lead { margin-top: 8px; font-size: 16px; }
  .sports .cols { margin-top: 18px; }
  .sports .cols > article > img + .over h3 { font-size: 28px; }
  .sports article ul { margin-top: 6px; }
  .sports article li { padding-top: 6px; padding-bottom: 6px; }
  .circuit .head .lead { margin-top: 6px; font-size: 16px; }
  .circuit .head .btn { margin-top: 12px; padding-top: 12px; padding-bottom: 12px; }
  .circuit .figure { height: clamp(140px, calc(100svh - 490px), 300px); }
  .circuit .timeline { margin-top: 6px; }
  .how .wrap { padding-bottom: 76px; }
  .how .steps { margin-top: 6px; }
  .how .steps li { padding-top: 12px; padding-bottom: 12px; }
  .cuts .pair { margin-top: 18px; }
  .cuts .facts { margin-top: 12px; }
  .specs dl > div { padding-top: 12px; padding-bottom: 12px; }
  .order .grid { margin-top: 18px; }
  .order .opts > div { padding-top: 10px; padding-bottom: 10px; }
  .order .btn.wide { margin-top: 18px; }
  .order .fine { margin-top: 6px; }
  .order .deposit li { padding-top: 10px; padding-bottom: 10px; font-size: 16px; }
}

/* Nowhere Landing Pages, page "Website (source of truth)", 2026-10-25: on laptops each section is its 1920 by 1080
   frame. The stage is the frame without its 31 px stripe, 1889 by 1080, scaled to fit the screen (--fu is one frame
   pixel) and centred (--x0, --y0). Every position and size below is the frame's own pixel. */
@media (min-width: 900px) {
  :root { --stripe: calc(100vw * 31 / 1920); }
  main > section, footer, .how {
    --fu: min(calc((100vw - var(--stripe)) / 1889), calc(100svh / 1080));
    --x0: calc((100vw - var(--stripe) - 1889 * var(--fu)) / 2);
    --y0: calc((100svh - 1080 * var(--fu)) / 2);
  }
  .sports, .circuit, .cuts, .specs, .order { position: relative; display: block; height: 100svh; padding: 0; overflow: hidden; }
  .sports > .wrap, .circuit > .wrap, .cuts > .wrap, .specs > .wrap, .order > .wrap {
    position: absolute; left: var(--x0); top: var(--y0); width: calc(1889 * var(--fu)); height: calc(1080 * var(--fu));
    max-width: none; margin: 0; padding: 0; }
  /* the two sections with a rule on their top edge: the rule is frame pixel 0, so the stage starts on it */
  .sports > .wrap, .cuts > .wrap, .specs > .wrap { top: calc(var(--y0) - 1px); }

  /* the corner button, 180 by 56, 32 in from the stripe and the bottom */
  .edge-cta { width: 180px; height: 56px; padding: 0; text-align: center; font: 600 16px/56px var(--sans); }

  /* 1 */
  .hero .mark-top { top: calc(15.8 * var(--fu)); left: calc(1703.2 * var(--fu)); width: calc(170.6 * var(--fu)); }
  .hero .wm.big { left: calc(853.9 * var(--fu)); bottom: calc(8.5 * var(--fu)); width: calc(1009.6 * var(--fu)); }
  .hero .mark-top .nwh, .science .l2 .mark.nwh { --mark: url("/img/brand/nwh-figma.svg"); aspect-ratio: 404.3 / 145.1; }
  .hero .wm.big { --mark: url("/img/brand/wordmark-figma.svg"); aspect-ratio: 1009.6 / 211.1; }

  /* 2 */
  .science .pin > p.l2 { inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; pointer-events: none; }
  .science .l2 .mark.nwh { position: absolute; left: calc(1468.8 * var(--fu)); top: calc(654.8 * var(--fu)); width: calc(404.3 * var(--fu)); margin: 0; }
  .science .l2 > span:last-child { position: absolute; right: calc(35 * var(--fu)); top: calc(800 * var(--fu)); font-size: calc(76 * var(--fu)); line-height: 1.2; }

  /* 3 */
  .ccp figcaption { left: calc(32 * var(--fu)); right: auto; bottom: calc(var(--y0) + 96.3 * var(--fu)); padding: 0; }
  .ccp h3 { font-size: calc(108 * var(--fu)); line-height: .96; }

  /* 4 */
  .sports h2 { position: absolute; left: calc(340 * var(--fu)); top: calc(100 * var(--fu)); font-size: calc(92 * var(--fu)); white-space: nowrap; }
  .sports .lead { position: absolute; left: calc(340 * var(--fu)); top: calc(296 * var(--fu)); margin: 0; font: 500 calc(48 * var(--fu))/1.4 var(--display); letter-spacing: 0; white-space: nowrap; }
  .sports .cols { position: absolute; left: calc(340 * var(--fu)); top: calc(360 * var(--fu)); width: calc(1240 * var(--fu)); margin: 0; gap: calc(32 * var(--fu)); }
  .sports .cols > article > img + .over { display: block; padding: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 59.39%, rgba(20,20,20,.82)); }
  .sports .n { position: absolute; left: calc(26 * var(--fu)); top: calc(386 * var(--fu)); font: 600 calc(13 * var(--fu))/1.4 var(--sans); letter-spacing: 0; }
  .sports h3 { position: absolute; left: calc(26 * var(--fu)); top: calc(406 * var(--fu)); width: calc(340 * var(--fu)); margin: 0; font-size: calc(36 * var(--fu)); letter-spacing: -.012em; }
  .sports ul { margin: calc(14 * var(--fu)) 0 0; }
  .sports li { padding: calc(9 * var(--fu)) 0 calc(4 * var(--fu)); font: 500 calc(20 * var(--fu))/1.4 var(--display); letter-spacing: 0; }

  /* 5 */
  .circuit > .wrap { display: block; }
  .circuit .head { position: static; display: block; padding: 0; }
  .circuit .head h2 { position: absolute; left: calc(340 * var(--fu)); top: calc(120 * var(--fu)); white-space: nowrap; }
  .circuit .head .lead { position: absolute; left: calc(340 * var(--fu)); top: calc(346 * var(--fu)); width: calc(470 * var(--fu)); margin: 0; max-width: none; font-size: calc(64 * var(--fu)); }
  .circuit .head .btn { position: absolute; left: calc(340 * var(--fu)); top: calc(822 * var(--fu)); width: calc(252 * var(--fu)); height: calc(56 * var(--fu)); margin: 0; padding: 0; text-align: center; font-size: calc(17 * var(--fu)); line-height: calc(56 * var(--fu)); }
  .circuit .report[data-player] { position: absolute; left: calc(964 * var(--fu)); top: calc(120 * var(--fu)); width: calc(616 * var(--fu)); height: calc(800 * var(--fu)); margin: 0; }
  .circuit .report[data-player] .report-page, .circuit .report[data-player] .scrub { height: 100%; display: flex; flex-direction: column; }
  .circuit .report[data-player] .figure { flex: 1 1 0; min-height: 0; }
  .circuit .report[data-player] .figure canvas { height: 100% !important; }

  /* 6: the knit 1920 wide from the top left, under the stripe as in the frame */
  .how .macro img { position: absolute; left: 0; top: 0; width: max(calc(1920 * var(--fu)), calc(100svh * 1505 / 1024)); height: auto; max-width: none; object-fit: fill; }
  .how .macro .glow { -webkit-mask-size: max(calc(1920 * var(--fu)), calc(100svh * 1505 / 1024)) auto; mask-size: max(calc(1920 * var(--fu)), calc(100svh * 1505 / 1024)) auto; -webkit-mask-position: 0 0; mask-position: 0 0; }
  .how .macro::before { left: 0; right: auto; width: calc(1240 * var(--fu)); height: calc(266 * var(--fu)); }
  .how .macro h2 { top: calc(var(--y0) + 36 * var(--fu)); left: calc(var(--x0) + 36 * var(--fu)); right: auto; font-size: calc(128 * var(--fu)); letter-spacing: -.012em; white-space: nowrap; text-shadow: none; }
  .how .wrap { left: calc(var(--x0) + 960 * var(--fu)); top: calc(var(--y0) + 851 * var(--fu)); right: auto; bottom: auto; width: calc(919 * var(--fu)); height: calc(229 * var(--fu)); padding: 0 0 0 calc(19 * var(--fu)); }
  .how .steps li { padding: calc(21 * var(--fu)) 0 calc(26 * var(--fu)) calc(52 * var(--fu)); border-top: 1px solid var(--slate); font: 400 calc(20 * var(--fu))/1.4 var(--sans); letter-spacing: 0; }
  .how .steps li:first-child { padding-top: calc(22 * var(--fu)); border-top: 0; }
  .how .steps li:last-child { padding-bottom: 0; }
  .how .steps li::before { top: calc(24 * var(--fu)); font: 600 calc(14 * var(--fu))/1.4 var(--sans); }
  .how .steps li:first-child::before { top: calc(25 * var(--fu)); }
  .how .steps b { font-weight: 600; }

  /* 7 */
  .cuts h2 { position: absolute; left: calc(340 * var(--fu)); top: calc(100 * var(--fu)); font-size: calc(128 * var(--fu)); white-space: nowrap; }
  .cuts .pair { position: absolute; left: calc(340 * var(--fu)); top: calc(236 * var(--fu)); width: calc(1240 * var(--fu)); margin: 0; gap: calc(32 * var(--fu)); }
  .cuts .facts { position: absolute; left: calc(340 * var(--fu)); top: calc(917 * var(--fu)); width: calc(1240 * var(--fu)); margin: 0; gap: calc(32 * var(--fu)); }
  .cuts .facts li { padding: calc(14 * var(--fu)) 0 0; font: 500 calc(24 * var(--fu))/1.4 var(--display); letter-spacing: 0; }
  .cuts .facts li + li { padding-left: calc(10 * var(--fu)); }

  /* 8: the photo 1601 wide from x -247, cropped from its middle */
  .specs figure { left: calc(-247 * var(--fu)); top: 0; bottom: auto; width: calc(1601 * var(--fu)); height: calc(1080 * var(--fu)); }
  .specs figure img { object-position: 50% 50%; }
  .specs dl { left: calc(1403 * var(--fu)); top: calc(441 * var(--fu)); right: auto; width: calc(486 * var(--fu)); }
  .specs dl div { padding: calc(21 * var(--fu)) 0 calc(15.4 * var(--fu)); }
  .specs dt { font: 500 calc(28 * var(--fu))/.96 var(--sans); letter-spacing: -.012em; }
  .specs dd { margin: calc(9.12 * var(--fu)) 0 0; font: 400 calc(19 * var(--fu))/1.4 var(--sans); letter-spacing: 0; }

  /* 9 and the footer share one frame: reserve is its top 860, the footer its last 220 */
  .order { height: calc(100svh - 220 * var(--fu)); }
  .order h2 { position: absolute; left: calc(340 * var(--fu)); top: calc(120 * var(--fu)); white-space: nowrap; }
  .order .grid { position: absolute; left: calc(340 * var(--fu)); top: calc(296 * var(--fu)); width: calc(1240 * var(--fu)); margin: 0 !important; }
  .order .opts > div { display: block; position: relative; height: calc(150 * var(--fu)); padding: 0; }
  /* the 3 suits row closes with a rule at 596 (its :last-child rule never matched: the button and the fine line follow it) */
  .order .opts > div:last-of-type { height: calc(150 * var(--fu) + 1px); border-bottom: 1px solid rgba(238, 234, 226, .3); }
  .order .opts .amt { position: absolute; right: 0; top: calc(21 * var(--fu)); line-height: .96; }
  .order .opts .amt s { margin: 0; line-height: calc(28 * var(--fu)); }
  .order .opts .qty { position: absolute; left: 0; top: calc(65 * var(--fu)); font-size: calc(20 * var(--fu)); line-height: calc(28 * var(--fu)); }
  .order .opts .note { position: absolute; left: 0; top: calc(99 * var(--fu)); font-size: calc(16 * var(--fu)); line-height: calc(22 * var(--fu)); }
  .order .opts .btn.wide { margin-top: calc(39 * var(--fu)); height: calc(60 * var(--fu)); line-height: calc(60 * var(--fu)); font-size: calc(18 * var(--fu)); }
  .order .opts .fine { margin-top: calc(16 * var(--fu)); font-size: calc(15 * var(--fu)); line-height: calc(18 * var(--fu)); }
  .order .deposit li { height: calc(92 * var(--fu)); padding: calc(21 * var(--fu)) 0 0 calc(44 * var(--fu)); font-size: calc(18 * var(--fu)); line-height: 1.4; }
  .order .deposit li:last-child { height: calc(92 * var(--fu) + 1px); }
  .order .deposit li::before { top: calc(24 * var(--fu)); font-size: calc(13 * var(--fu)); line-height: 1.4; }
  footer { position: relative; display: block; height: calc(220 * var(--fu)); max-width: none; margin: 0; padding: 0; }
  footer > a { position: absolute; left: calc(var(--x0) + 340 * var(--fu)); top: calc(77 * var(--fu)); }
  footer .nwh { width: calc(180 * var(--fu)); }
  footer .legal { position: absolute; left: calc(var(--x0) + 1100 * var(--fu)); top: calc(60 * var(--fu)); width: calc(480 * var(--fu)); font-size: calc(14 * var(--fu)); line-height: calc(20 * var(--fu)); }
  footer .links { margin-top: 0; }
}

/* Figma's choices where the site had its own (Anant 2026-10-25: always what Figma chooses). Inter where the frames set
   Inter (fonts/inter.woff2, Inter 4 variable, OFL), and the hero's own button and line drawing. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
.hero .trace { position: absolute; display: none; max-width: none; height: auto; opacity: 0; transition: opacity 1.4s ease; }
.hero .trace.on { opacity: 1; }
@media (min-width: 900px) {
  /* the frames set every body line in Inter, untracked; Inter Tight appears nowhere in them */
  :root { --sans: "Inter", "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
  body { letter-spacing: 0; }
  .hero .trace { display: block; }
  /* frame 1's button: 275 by 100, 15 corners, Figma grey, "Reserve Now" 40 px black, 42 in and 24 down */
  .hero .btn { display: block; width: calc(275 * var(--fu)); height: calc(100 * var(--fu)); padding: calc(24 * var(--fu)) 0 0 calc(42 * var(--fu));
    border-radius: calc(15 * var(--fu)); background: #d9d9d9; color: #000; font: 500 calc(40 * var(--fu))/1.2 var(--display); letter-spacing: 0;
    text-transform: capitalize; }
}
@media (prefers-reduced-motion: reduce) { .hero .trace { transition: none; } }

/* Figma resync 2026-10-25. Words that differ between the laptop and phone frames: .only-d is the laptop's, .only-m the
   phone's. */
.only-d { display: none; }
@media (min-width: 900px) { .only-d { display: inline; } .only-m { display: none; } }
@media (min-width: 900px) {
  /* 1: the line ends at "movement", in white; the button's words 36 px, 48 in and 28 down */
  .hero h1 { color: #fff; }
  .hero h1 .then { display: none; }
  .hero .btn { padding: calc(28 * var(--fu)) 0 0 calc(48 * var(--fu)); font-size: calc(36 * var(--fu)); }
  /* the corner button's words 20 px */
  .edge-cta { font-size: 20px; }
  /* 3 */
  .ccp h3 { letter-spacing: -.012em; }
  /* 5 */
  .circuit .head .lead { line-height: 1.4; letter-spacing: 0; color: rgba(238, 234, 226, .72); }
  .circuit .head .btn { font-size: calc(17 * var(--fu)); font-weight: 600; }
  /* 6: the lines in Neue Montreal 24, the lead words heavier */
  .how .steps li { padding-bottom: calc(20.4 * var(--fu)); font: 500 calc(24 * var(--fu))/1.4 var(--display); }
  .how .steps li:last-child { padding-bottom: 0; }
  .how .steps li::before { font-family: var(--sans); }
  /* 7 */
  .cuts .facts li { font-size: calc(32 * var(--fu)); }
  /* 8: titles and lines in Neue Montreal, the lines 24 */
  .specs dt { font: 500 calc(28 * var(--fu))/.96 var(--display); letter-spacing: -.012em; }
  .specs dd { font: 500 calc(24 * var(--fu))/1.4 var(--display); }
  .specs dl div { padding-bottom: calc(8.4 * var(--fu)); }
  /* 9: one option, 1 kit, its rule at 446; the button stays at 636. Inter throughout, the heading too */
  .order h2 { font-family: var(--sans); font-weight: 500; letter-spacing: -.012em; }
  .order .opts > div:nth-of-type(2) { display: none; }
  .order .opts > div:first-of-type { height: calc(150 * var(--fu) + 1px); border-bottom: 1px solid rgba(238, 234, 226, .3); }
  .order .opts .btn.wide { margin-top: calc(189 * var(--fu)); font-weight: 600; }
  .order .opts .amt { font-family: var(--sans); font-weight: 500; letter-spacing: -.012em; }
  .order .opts .amt s { font-size: calc(20 * var(--fu)); font-weight: 400; letter-spacing: 0; }
  .order .opts .qty { font-weight: 600; }
  .order .opts .note, .order .opts .fine { font-weight: 400; }
  .order .opts .fine { line-height: normal; }
  .order .deposit li { font-weight: 400; }
  .order .deposit li::before { font-weight: 600; }
  .order .deposit b { font-weight: 600; }
  /* footer: ink, all four lines slate Inter 14 at 1.4, the links on one line three spaces apart */
  footer { background: var(--ink); }
  footer .legal { line-height: 1.4; font-weight: 400; color: var(--slate); }
  footer .links { gap: 0 .75em; }
  footer .links a { color: var(--slate); }
}
/* the hero on laptops as Figma frames 2 to 5: the photo bare, no shade over it, and no readout typing in. The drawings
   are the frames' own, magenta at 10% on all four (Anant 2026-10-25: Frame 4's 10%, for every photo). (Phones keep their shade and readout: the phone frame has both.) */
@media (min-width: 900px) {
  .hero .slides::after { display: none; }
  .hero .readout { display: none; }
}
/* Figma sync 2026-10-25, later: the hero button's words 54 in; reserve's prices and lines in Neue Montreal, larger.
   Neue Montreal Book and SemiBold are set in the Medium we hold. */
@media (min-width: 900px) {
  .hero .btn { padding-left: calc(54 * var(--fu)); }
  .order .opts .qty { top: calc(6 * var(--fu)); font: 500 calc(40 * var(--fu))/1.4 var(--display); letter-spacing: 0; }
  .order .opts .note { top: calc(99 * var(--fu)); font: 500 calc(24 * var(--fu))/1.4 var(--display); letter-spacing: 0; }
  .order .opts .amt { top: calc(10 * var(--fu)); font-family: var(--display); }
  .order .opts .amt s { display: block; margin-bottom: calc(43 * var(--fu)); font: 500 calc(20 * var(--fu))/calc(28 * var(--fu)) var(--display); }
  .order .deposit li { font: 500 calc(24 * var(--fu))/1.4 var(--display); letter-spacing: 0; }
  .order .deposit li:nth-child(2) { padding-top: calc(8 * var(--fu)); }
  .order .deposit li::before { left: calc(2 * var(--fu)); font: 500 calc(20 * var(--fu))/1.4 var(--display); }
  .order .deposit li:nth-child(2)::before { left: 0; top: calc(26 * var(--fu)); }
  .order .deposit b { font-weight: 500; }
}

/* Neue Montreal Semi Squeezed in the four weights the frames use (Anant 2026-10-25: Nowhere's web licence covers Book,
   SemiBold and Bold as well as the Medium above). Each element below takes the weight its Figma layer sets. */
@font-face { font-family: "Neue Montreal SS"; src: url("/fonts/neue-montreal-semi-squeezed-book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Montreal SS"; src: url("/fonts/neue-montreal-semi-squeezed-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Neue Montreal SS"; src: url("/fonts/neue-montreal-semi-squeezed-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@media (min-width: 900px) {
  /* 1: the line SemiBold, the button's words Book */
  .hero h1 { font-weight: 600; }
  .hero .btn { font-weight: 400; }
  /* 2: every word Bold */
  .science .pin > p, .science .l2 > span:last-child { font-weight: 700; }
  .science .form { font-weight: 700 !important; }
  /* 4 to 8: the lines under the headings Book */
  .sports .lead, .sports li, .circuit .head .lead, .how .steps li, .cuts .facts li, .specs dd { font-weight: 400; }
  .how .steps b { font-weight: 600; }
  /* 9: the quantity and the lead words SemiBold, the lines and the old price Book, the price Medium */
  .order .opts .qty, .order .deposit li::before, .order .deposit b { font-weight: 600; }
  .order .opts .note, .order .opts .amt s, .order .deposit li { font-weight: 400; }
  .order .opts .amt { font-weight: 500; }
}
@media (min-width: 900px) { .circuit .head .lead { font-family: var(--display); } }

/* Phones, as the phone frame (Nowhere Landing Pages, "nowhere.fit phone (390)", 172:943; Anant 2026-10-25: Figma
   overrides every position, size and word; redrawn 2026-10-26). Each section is its 390 by 844 frame, the hero 819 tall,
   with the laptop's stripe, 17 of the 390, on the right. The stage is the frame less its stripe, 373 wide, scaled to fit
   the screen: --pu is one frame pixel, --px0 and --py0 centre the stage. Words in Neue Montreal where the frames set it,
   Inter where they set Inter. */
@media (max-width: 899px) {
  :root { --stripe: calc(100vw * 17 / 390); --sans: "Inter", "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
  main > section, footer, .how, .edge-cta {
    --pu: min(calc((100vw - var(--stripe)) / 373), calc(100svh / 844));
    --px0: calc((100vw - var(--stripe) - 373 * var(--pu)) / 2);
    --py0: calc((100svh - 844 * var(--pu)) / 2);
  }
  body { padding-right: var(--stripe); letter-spacing: -.17px; }
  main > section { position: relative; display: block; height: 100svh; min-height: 0; padding: 0; overflow: hidden; }
  .sports > .wrap, .circuit > .wrap, .cuts > .wrap, .specs > .wrap, .order > .wrap {
    position: absolute; left: var(--px0); top: var(--py0); width: calc(390 * var(--pu)); height: calc(844 * var(--pu));
    max-width: none; margin: 0; padding: 0; display: block; }
  .sports, .cuts, .specs, .order { border-top: 0; }
  h1, h2, h3 { text-wrap: wrap; }

  /* the corner button, 134 by 46, 16 in from the stripe and 20 up; on connect, calibrate and play at the top, 106 in
     and 63 down on each photo */
  .edge-cta { right: calc(var(--px0) + var(--stripe) + 16 * var(--pu)); bottom: calc(var(--py0) + 20 * var(--pu)); width: calc(134 * var(--pu)); height: calc(46 * var(--pu));
    padding: 0; text-align: center; font: 600 calc(15 * var(--pu))/calc(46 * var(--pu)) var(--display); letter-spacing: calc(.15 * var(--pu)); }

  /* 1: four frames, one per photo (hero, hero-2, hero-3, hero-3), alike but for the photo and its drawing. What sits on
     the left keeps its distance from the left edge, {nwh} and the wordmark theirs from the stripe, the wordmark its 8.6
     from the bottom of the hero */
  .hero { --px0: 0px; --py0: 0px; height: calc(819 * var(--pu)); min-height: 0; }
  .hero .pin { height: 100%; }
  .hero .slides::after { background: linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.2) 34%, rgba(20,20,20,0) 50%, rgba(20,20,20,.35) 100%); }
  .hero .readout { display: none; }
  .hero .trace.m { display: block; }
  .hero .copy { left: calc(24 * var(--pu)); top: calc(21 * var(--pu)); right: auto; width: calc(290 * var(--pu)); max-width: none; padding: 0; }
  .hero h1 { max-width: none; font: 500 calc(21 * var(--pu))/calc(25 * var(--pu)) var(--display); letter-spacing: calc(-.4 * var(--pu)); color: var(--bone); }
  .hero h1 .lead { font-weight: 700; }
  .hero .now { position: absolute; left: calc(1 * var(--pu)); top: calc(67 * var(--pu)); margin: 0; }
  .hero .btn { display: block; width: calc(157 * var(--pu)); height: calc(35 * var(--pu)); padding: 0; border-radius: calc(15 * var(--pu)); background: #d9d9d9; color: #000;
    text-align: center; text-transform: capitalize; font: 500 calc(15 * var(--pu))/calc(35 * var(--pu)) var(--display); letter-spacing: 0; }
  .hero .mark-top { left: auto; right: calc(7.2 * var(--pu)); top: calc(28.24 * var(--pu)); width: calc(49.57 * var(--pu)); }
  .hero .mark-top .nwh { --mark: url("/img/brand/nwh-phone-hero.svg"); aspect-ratio: 49.567 / 18.5655; }
  .hero .wm.big { --mark: url("/img/brand/wordmark-phone.svg"); aspect-ratio: 340.819 / 69.8053; left: auto; right: calc(7.6 * var(--pu));
    top: auto; bottom: calc(8.6 * var(--pu)); width: calc(340.8 * var(--pu)); }

  /* 2: the stage 390 by 486 from x -8 and y 182, the body 372 by 330 at x -14, the reading under it */
  .science .pin { display: block; position: relative; height: 100svh; padding: 0; }
  .science .pin > p { position: absolute; margin: 0; max-width: none; font: 500 calc(32 * var(--pu))/calc(29 * var(--pu)) var(--display); letter-spacing: calc(-.84 * var(--pu)); }
  .science .form { font-weight: 700 !important; letter-spacing: calc(-.84 * var(--pu)) !important; }
  .science .pin > p.l1 { left: calc(var(--px0) + 22 * var(--pu)); top: calc(var(--py0) + 51 * var(--pu)); }
  .science .pin > p.l2 { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
  .science .l2 .mark.nwh { position: absolute; left: calc(var(--px0) + 16.5 * var(--pu)); top: calc(var(--py0) + 680.56 * var(--pu)); width: calc(118.96 * var(--pu)); margin: 0;
    --mark: url("/img/brand/nwh-phone.svg"); aspect-ratio: 118.961 / 43.971; }
  .science .l2 > span:last-child { position: absolute; left: calc(var(--px0) + 22 * var(--pu)); top: calc(var(--py0) + 725 * var(--pu)); }
  .figure-form { position: absolute; left: calc(var(--px0) - 8 * var(--pu)); top: calc(var(--py0) + 182 * var(--pu)); width: calc(390 * var(--pu)); height: calc(486 * var(--pu)) !important; margin: 0; display: block; }
  .ff-head { display: none; }
  .ff-view { position: absolute; left: calc(-6 * var(--pu)); top: 0; width: calc(372 * var(--pu)); height: calc(330 * var(--pu)); }
  .ff-read { position: absolute; inset: 0; display: block; padding: 0; }
  .ff-rep { position: absolute; left: calc(28 * var(--pu)); top: calc(330 * var(--pu)); height: auto; font: 600 calc(14 * var(--pu))/calc(19.6 * var(--pu)) var(--sans); }
  .ff-deg { position: absolute; left: calc(20 * var(--pu)); top: calc(344 * var(--pu)); height: auto; font: 500 calc(44 * var(--pu))/calc(44 * var(--pu)) var(--sans); letter-spacing: -.03em; }
  .ff-note { position: absolute; left: calc(28 * var(--pu)); top: calc(397 * var(--pu)); height: auto; margin: 0; font: 400 calc(14 * var(--pu))/calc(19.6 * var(--pu)) var(--sans); }
  .ff-strip { position: absolute; left: calc(28 * var(--pu)); top: calc(426 * var(--pu)); height: calc(36 * var(--pu)); margin: 0; gap: calc(2 * var(--pu)); }
  .ff-strip i { width: calc(4 * var(--pu)); }

  /* 3: photos 318, 359 and 359 wide, 12 then 11 apart; the words 48 */
  .ccp { display: grid; grid-auto-flow: column; grid-template-columns: calc(318 * var(--pu)) calc(359 * var(--pu)) calc(359 * var(--pu)); gap: calc(12 * var(--pu));
    padding: 0 0 0 var(--px0); overflow-x: auto; }
  .ccp figure:nth-child(3) { margin-left: calc(-1 * var(--pu)); }
  .ccp figure, .ccp img { height: 100svh; }
  .ccp figcaption { left: calc(22 * var(--pu)); right: auto; top: calc(var(--py0) + 761 * var(--pu)); bottom: auto; padding: 0; }
  .ccp figure:nth-child(2) figcaption { left: calc(21 * var(--pu)); top: calc(var(--py0) + 774 * var(--pu)); }
  .ccp figure:nth-child(3) figcaption { left: calc(15 * var(--pu)); top: calc(var(--py0) + 775 * var(--pu)); }
  .ccp h3 { font: 500 calc(48 * var(--pu))/calc(50.4 * var(--pu)) var(--display); letter-spacing: calc(-1.68 * var(--pu)); white-space: nowrap; }
  .ccp figure + figure h3 { line-height: calc(32.9 * var(--pu)); }

  /* 4: the photos at y 130, each one's number and name under it */
  .sports h2 { position: absolute; left: calc(24 * var(--pu)); top: calc(48 * var(--pu)); width: calc(344 * var(--pu)); white-space: nowrap;
    font: 500 calc(40 * var(--pu))/calc(33.59 * var(--pu)) var(--display); letter-spacing: calc(-1.26 * var(--pu)); }
  .sports .lead { position: absolute; left: calc(24 * var(--pu)); top: calc(92 * var(--pu)); width: calc(344 * var(--pu)); margin: 0;
    font: 400 calc(19 * var(--pu))/calc(26.6 * var(--pu)) var(--display); color: var(--slate); }
  .sports .cols { position: absolute; left: 0; top: calc(130 * var(--pu)); width: calc(390 * var(--pu)); height: calc(620 * var(--pu)); margin: 0; padding: 0 0 0 calc(24 * var(--pu));
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(266 * var(--pu)); gap: calc(16 * var(--pu)); align-items: start; scroll-padding-inline: calc(24 * var(--pu)); }
  .sports .cols > article { display: block; height: calc(525 * var(--pu)); }
  .sports .cols > article > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .sports .cols > article > img + .over { position: absolute; inset: 0; display: block; padding: 0; aspect-ratio: auto; }
  .sports .n { position: absolute; left: calc(22 * var(--pu)); top: calc(552 * var(--pu)); font: 600 calc(16 * var(--pu))/calc(19.5 * var(--pu)) var(--display); color: var(--slate); }
  .sports h3 { position: absolute; left: calc(22 * var(--pu)); top: calc(576 * var(--pu)); width: calc(224 * var(--pu)); margin: 0; white-space: nowrap;
    font: 500 calc(32 * var(--pu))/calc(30.72 * var(--pu)) var(--display); letter-spacing: calc(-.96 * var(--pu)); }
  .sports article:nth-child(1) .n { left: calc(6 * var(--pu)); top: calc(551 * var(--pu)); }
  .sports article:nth-child(1) h3 { left: calc(6 * var(--pu)); top: calc(579 * var(--pu)); width: auto; line-height: calc(26.04 * var(--pu)); }
  .sports article:nth-child(3) .n { left: calc(17 * var(--pu)); top: calc(555 * var(--pu)); line-height: calc(12.73 * var(--pu)); }

  /* 5 */
  .circuit .head { position: static; display: block; padding: 0; }
  .circuit .head h2 { position: absolute; left: calc(24 * var(--pu)); top: calc(47 * var(--pu)); white-space: nowrap; font: 500 calc(34.98 * var(--pu))/calc(33.59 * var(--pu)) var(--display); letter-spacing: calc(-1.26 * var(--pu)); }
  .circuit .head .lead { position: absolute; left: calc(24 * var(--pu)); top: calc(93 * var(--pu)); width: calc(344 * var(--pu)); max-width: none; margin: 0;
    font: 400 calc(19 * var(--pu))/calc(26.6 * var(--pu)) var(--display); color: rgba(238, 234, 226, .72); }
  .circuit .head .btn { position: absolute; left: calc(24 * var(--pu)); top: calc(159 * var(--pu)); width: calc(213 * var(--pu)); height: calc(60 * var(--pu)); margin: 0; padding: 0;
    text-align: center; font: 600 calc(17 * var(--pu))/calc(60 * var(--pu)) var(--display); }
  /* the player's own stylesheet loads after this one, so these carry its [data-player] */
  .circuit .report[data-player] { position: absolute; left: calc(24 * var(--pu)); top: calc(253 * var(--pu)); width: calc(342 * var(--pu)); margin: 0; }
  .circuit .report[data-player] .report-page, .circuit .report[data-player] .scrub { position: relative; height: calc(497 * var(--pu)); margin: 0; }
  .circuit .report[data-player] .figure { position: absolute; left: 0; top: 0; width: calc(342 * var(--pu)); height: calc(284 * var(--pu)); }
  .circuit .report[data-player] .timeline { position: absolute; left: 0; top: calc(296 * var(--pu)); width: calc(333 * var(--pu)); height: calc(56 * var(--pu)); margin: 0; }
  .circuit .report[data-player] .ends { position: absolute; left: 0; top: calc(349 * var(--pu)); width: calc(344 * var(--pu)); margin: 0; }
  .circuit .report[data-player] .ends .foot { font: 400 calc(13 * var(--pu))/calc(18.2 * var(--pu)) var(--sans); }
  .circuit .report[data-player] .chips { position: absolute; left: 0; top: calc(378 * var(--pu)); width: calc(333 * var(--pu)); margin: 0; gap: calc(6 * var(--pu)); }
  /* each chip as wide as the frame draws it, the name centred in it */
  .circuit .report[data-player] .chips button { height: calc(36 * var(--pu)); padding: 0; text-align: center; white-space: nowrap; overflow: visible;
    font: 600 calc(13 * var(--pu))/calc(36 * var(--pu)) var(--display); letter-spacing: 0; }
  .circuit .report[data-player] .chips button:nth-child(1) { width: calc(141 * var(--pu)); }
  .circuit .report[data-player] .chips button:nth-child(2) { width: calc(50 * var(--pu)); }
  .circuit .report[data-player] .chips button:nth-child(3) { width: calc(106 * var(--pu)); }
  .circuit .report[data-player] .chips button:nth-child(4) { width: calc(118 * var(--pu)); }
  .circuit .report[data-player] .chips button:nth-child(5) { width: calc(61 * var(--pu)); }
  .circuit .report[data-player] .chips button:nth-child(6) { width: calc(82 * var(--pu)); }
  .circuit .report[data-player] .chips button:nth-child(7) { width: calc(73 * var(--pu)); }
  .circuit .report[data-player] .chips button:nth-child(8) { width: calc(79 * var(--pu)); }

  /* 6: the knit 390 by 486, its heading on the photo, the three lines ruled under it, all Book, the lead words bone and
     the rest slate */
  .how .macro { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--py0) + 486 * var(--pu)); margin: 0; }
  .how .macro h2 { top: calc(var(--py0) + 364 * var(--pu)); bottom: auto; left: calc(var(--px0) + 16 * var(--pu)); right: auto; width: calc(241 * var(--pu)); max-width: none;
    font: 500 calc(36 * var(--pu))/calc(35 * var(--pu)) var(--display); letter-spacing: calc(-1.02 * var(--pu)); text-shadow: none; }
  .how .wrap { position: absolute; left: calc(var(--px0) + 24 * var(--pu)); top: calc(var(--py0) + 522 * var(--pu)); width: calc(342 * var(--pu)); margin: 0; padding: 0; }
  .how .steps { margin: 0; }
  .how .steps li { height: calc(62 * var(--pu)); padding: calc(21 * var(--pu)) 0 0 calc(44 * var(--pu)); font: 400 calc(20 * var(--pu))/calc(25.2 * var(--pu)) var(--display); color: var(--slate); }
  .how .steps li:nth-child(2) { height: calc(88 * var(--pu)); }
  .how .steps li:nth-child(3) { height: calc(87 * var(--pu)); padding-top: calc(20 * var(--pu)); }
  .how .steps li::before { left: calc(3 * var(--pu)); top: calc(24 * var(--pu)); font: 600 calc(16 * var(--pu))/calc(18.2 * var(--pu)) var(--display); color: var(--bone); }
  .how .steps li:nth-child(2)::before { left: 0; top: calc(32 * var(--pu)); }
  .how .steps li:nth-child(3)::before { left: 0; top: calc(34 * var(--pu)); }
  .how .steps b { font-weight: 400; color: var(--bone); }

  /* 7: no marks on the lines; the rules from x 18, the words 5 in. The photos keep their readouts (Anshul 2026-10-27) */
  .cuts h2 { position: absolute; left: calc(19 * var(--pu)); top: calc(34 * var(--pu)); font: 500 calc(48 * var(--pu))/calc(40.32 * var(--pu)) var(--display); letter-spacing: calc(-1.26 * var(--pu)); }
  .cuts .pair { position: absolute; left: 0; top: calc(113 * var(--pu)); width: calc(390 * var(--pu)); height: calc(435 * var(--pu)); margin: 0; padding: 0 0 0 calc(24 * var(--pu));
    grid-auto-columns: calc(279 * var(--pu)); gap: calc(12 * var(--pu)); scroll-padding-inline: calc(24 * var(--pu)); }
  .cuts .facts { position: absolute; left: calc(18 * var(--pu)); top: calc(584 * var(--pu)); width: calc(342 * var(--pu)); margin: 0; }
  .cuts .facts li { height: calc(58 * var(--pu)); padding: calc(18 * var(--pu)) 0 0 calc(5 * var(--pu)); font: 400 calc(20 * var(--pu))/calc(25.2 * var(--pu)) var(--display); }
  .cuts .facts li:first-child { height: calc(59 * var(--pu)); padding-top: calc(19 * var(--pu)); }
  .cuts .facts li::before { display: none; }

  /* 8: Package, Handling, Connect */
  .specs .grid { display: block; margin: 0; }
  .specs .grid > figure { position: absolute; left: calc(24 * var(--pu)); top: calc(41 * var(--pu)); width: calc(342 * var(--pu)); height: calc(317 * var(--pu)); min-height: 0; margin: 0; }
  .specs dl { position: absolute; left: calc(24 * var(--pu)); top: calc(390 * var(--pu)); width: calc(342 * var(--pu)); margin: 0; }
  .specs dl > div { height: calc(106 * var(--pu)); padding: calc(18 * var(--pu)) 0 0; }
  .specs dl > div:nth-child(2) { height: calc(132 * var(--pu)); padding-top: calc(37 * var(--pu)); }
  .specs dl > div:nth-child(3) { height: calc(131 * var(--pu)); padding-top: calc(32 * var(--pu)); }
  .specs dt { font: 400 calc(24 * var(--pu))/calc(28 * var(--pu)) var(--display); letter-spacing: calc(-.84 * var(--pu)); }
  .specs dl > div:first-child dt { margin-left: calc(-1 * var(--pu)); }
  .specs dd { margin: calc(3 * var(--pu)) 0 0; font: 400 calc(15 * var(--pu))/calc(25.2 * var(--pu)) var(--display); color: var(--slate); }
  .specs dl > div:nth-child(3) dd { margin-top: 0; }

  /* 9: one option, 1 kit; everything 17 in */
  .order h2 { position: absolute; left: calc(17 * var(--pu)); top: calc(80 * var(--pu)); white-space: nowrap; font: 500 calc(42 * var(--pu))/calc(40.32 * var(--pu)) var(--display); letter-spacing: calc(-1.26 * var(--pu)); }
  .order .grid { display: block; margin: 0; }
  .order .opts { position: absolute; left: calc(17 * var(--pu)); top: calc(166 * var(--pu)); width: calc(342 * var(--pu)); margin: 0; display: block; }
  .order .opts > div { position: absolute; left: 0; top: 0; width: 100%; height: calc(127 * var(--pu)); display: block; padding: 0; border-bottom: 1px solid rgba(238, 234, 226, .3); }
  .order .opts > div:nth-of-type(2) { display: none; }
  .order .opts .amt { position: absolute; right: 0; top: calc(17 * var(--pu)); display: block; text-align: right; font: 500 calc(29.2 * var(--pu))/calc(29.2 * var(--pu)) var(--sans); letter-spacing: calc(-1.36 * var(--pu)); }
  .order .opts .amt s { display: block; margin: 0 0 calc(.4 * var(--pu)); text-decoration: line-through; font: 400 calc(14 * var(--pu))/calc(19.6 * var(--pu)) var(--display); letter-spacing: 0; color: rgba(238, 234, 226, .7); }
  .order .opts .qty { position: absolute; left: 0; top: calc(27 * var(--pu)); font: 600 calc(24 * var(--pu))/calc(30 * var(--pu)) var(--display); }
  .order .opts .note { position: absolute; left: 0; top: calc(64 * var(--pu)); font: 400 calc(16 * var(--pu))/calc(24 * var(--pu)) var(--display); color: rgba(238, 234, 226, .78); }
  .order .opts .btn.wide { position: absolute; left: 0; top: calc(280 * var(--pu)); width: 100%; height: calc(60 * var(--pu)); margin: 0;
    font: 600 calc(18 * var(--pu))/calc(60 * var(--pu)) var(--display); letter-spacing: calc(-.18 * var(--pu)); }
  .order .opts .fine { position: absolute; left: 0; top: calc(356 * var(--pu)); margin: 0; white-space: nowrap; font: 400 calc(14.55 * var(--pu))/calc(21.83 * var(--pu)) var(--display); }
  .order .how-pay { position: absolute; left: calc(17 * var(--pu)); top: calc(583 * var(--pu)); width: calc(342 * var(--pu)); }
  .order .deposit li { height: calc(76 * var(--pu)); padding: calc(27 * var(--pu)) 0 0 calc(40 * var(--pu)); font: 400 calc(17 * var(--pu))/calc(23.8 * var(--pu)) var(--display); }
  .order .deposit li:nth-child(2) { height: calc(101 * var(--pu)); padding-top: calc(29 * var(--pu)); }
  .order .deposit li::before { top: calc(30 * var(--pu)); font: 600 calc(13 * var(--pu))/calc(16.9 * var(--pu)) var(--sans); color: var(--bone); }
  .order .deposit li:nth-child(2)::before { top: calc(44 * var(--pu)); }
  .order .deposit b { font-weight: 600; }

  /* footer, 291 tall, Inter */
  footer { position: relative; display: block; height: calc(291 * var(--pu)); padding: 0; }
  footer > a { position: absolute; left: calc(var(--px0) + 24.5 * var(--pu)); top: calc(56.56 * var(--pu)); }
  footer .nwh { --mark: url("/img/brand/nwh-phone.svg"); aspect-ratio: 118.961 / 43.971; width: calc(118.96 * var(--pu)); }
  footer .legal { position: absolute; left: calc(var(--px0) + 24 * var(--pu)); top: calc(131 * var(--pu)); width: calc(342 * var(--pu)); font: 400 calc(13 * var(--pu))/calc(19.5 * var(--pu)) var(--sans); color: var(--slate); }
  footer .legal a[href^="mailto"] { text-decoration: underline; }
  footer .links { margin: 0; gap: 0 calc(21.8 * var(--pu)); }
}
/* 1, fitted to the window (Anant 2026-10-25). The frame scales to fit the window both ways and works from its top. What
   sits on the left of the frame keeps its distance from the left edge (the line and the button), and what sits on the
   right keeps its distance from the stripe ({nwh}, 15 frame pixels; the wordmark, 25.5), so on a window wider than the
   frame nothing moves away from its own edge. The photos cover the whole screen behind it. */
@media (min-width: 900px) {
  .hero {
    --fu: min(calc((100vw - var(--stripe)) / 1889), calc(100svh / 1080));
    --x0: 0px;
    --y0: 0px;
  }
  .hero .copy { left: calc(63 * var(--fu)); top: calc(98 * var(--fu)); }
  .hero .mark-top { left: auto; right: calc(15.2 * var(--fu)); top: calc(15.8 * var(--fu)); }
  .hero .wm.big { left: auto; right: calc(25.5 * var(--fu)); top: calc(860.4 * var(--fu)); bottom: auto; }
}
/* 1, Frame 4 resynced 2026-10-25: the line in two, "Intelligent activewear" Bold over "that reads your {movement}"
   Medium, braces magenta; the button 243 by 58 at y 248, "Reserve Now" Medium 32, 48 in and 10 down */
.hero h1 .only-d .brace { white-space: nowrap; }
@media (min-width: 900px) {
  .hero h1 { font-weight: 500; line-height: 1.2; }
  .hero h1 .lead { font-weight: 700; }
  .hero .now { top: calc(150 * var(--fu)); }
  .hero .btn { width: calc(243 * var(--fu)); height: calc(58 * var(--fu)); padding: calc(10 * var(--fu)) 0 0 calc(48 * var(--fu));
    font: 500 calc(32 * var(--fu))/1.2 var(--display); }
}
/* 1, the button's words 24 px and centred in it (Frame 4, 2026-10-25) */
@media (min-width: 900px) {
  .hero .btn { padding: calc(14 * var(--fu)) 0 0; text-align: center; font-size: calc(24 * var(--fu)); }
}
/* 1, Frame 2 (the overpass) sets the line 3 frame pixels higher, at y 95 */
@media (min-width: 900px) { .hero[data-slide="1"] .copy { top: calc(95 * var(--fu)); } }
/* 1, the wordmark keeps the frame's 8.5 pixels from the bottom of the screen (Anant 2026-10-25), on any window */
@media (min-width: 900px) { .hero .wm.big { top: auto; bottom: calc(8.5 * var(--fu)); } }
/* Below 900 px is the phone frame's layout, all the way up (Anant 2026-10-25: a squeezed laptop window between 768 and
   899 showed the laptop photo's readout, "Hill sprint", over the athlete). */
@media (max-width: 899px) { .readout .d { display: none; } .readout .m { display: block; } }
/* laptops draw their own four lines, phones theirs */
@media (min-width: 900px) { .hero .trace.m { display: none; } }
/* Figma sync 2026-10-26 (laptop). 4: "Find your weak spots" on one line at y 145, the lead at 251. 8: Package and
   Handling 16 under their rules, 6 higher than before. 9: the first deposit line 7 lower, its 01 at 330 */
@media (min-width: 900px) {
  .sports h2 { top: calc(145 * var(--fu)); }
  .sports .lead { top: calc(251 * var(--fu)); }
  .specs dl > div:nth-child(-n+2) > * { position: relative; top: calc(-6 * var(--fu)); }
  .order .deposit li:first-child { padding-top: calc(28.3 * var(--fu)); }
  .order .deposit li:first-child::before { top: calc(34 * var(--fu)); }
}
/* Figma sync 2026-10-26 (Anshul): the hero button takes the corner button's look. Laptop, Frame 4: 180 by 56 at y 255,
   bone, square, "Reserve now" Inter SemiBold 20 centred, the same in Frames 1 to 3. Phone, hero frames: 134 by 46
   (the corner button's size) at 24, 90, bone, square,
   "Reserve now" Neue Montreal SemiBold 15 centred. */
@media (min-width: 900px) {
  .hero .now { top: calc(157 * var(--fu)); }
  .hero .btn { width: calc(180 * var(--fu)); height: calc(56 * var(--fu)); padding: 0; border-radius: 0; background: var(--bone); color: var(--ink);
    text-align: center; text-transform: none; font: 600 calc(20 * var(--fu))/calc(56 * var(--fu)) var(--sans); letter-spacing: 0; }
}
@media (max-width: 899px) {
  .hero .now { left: 0; top: calc(69 * var(--pu)); }
  .hero .btn { width: calc(134 * var(--pu)); height: calc(46 * var(--pu)); border-radius: 0; background: var(--bone); color: var(--ink);
    text-transform: none; font: 600 calc(15 * var(--pu))/calc(46 * var(--pu)) var(--display); }
}
/* Frames 1 to 3 now carry Frame 4's button at the same y 255. Frame 2's line sits 3 higher (y 95), so its button is 3
   further below the line, to stay at 255 */
@media (min-width: 900px) { .hero[data-slide="1"] .now { top: calc(160 * var(--fu)); } }
/* the corner button scales with the frame like the hero's (Anshul 2026-10-26: at fixed pixels it read bigger than the
   hero button on any laptop under 1920 wide). Same 180 by 56, 32 in from the stripe and the bottom, words 20. */
@media (min-width: 900px) {
  .edge-cta { --fu: min(calc((100vw - var(--stripe)) / 1889), calc(100svh / 1080));
    right: calc(var(--stripe) + 32 * var(--fu)); bottom: calc(32 * var(--fu)); width: calc(180 * var(--fu)); height: calc(56 * var(--fu));
    font: 600 calc(20 * var(--fu))/calc(56 * var(--fu)) var(--sans); }
}
/* Figma sync 2026-10-26 (Anshul): phone "See the full report" at the other buttons' size, 156 by 46 at 24, 159, words 15 */
@media (max-width: 899px) {
  .circuit .head .btn { width: calc(156 * var(--pu)); height: calc(46 * var(--pu)); font-size: calc(15 * var(--pu)); line-height: calc(46 * var(--pu)); }
}
/* Figma sync 2026-10-26 (Anshul: every button the same size): the report and reserve buttons take the hero and corner
   buttons' height and words. Laptop: 56 tall, words 20, "See the whole report" 256 wide. Phone: the reserve button 46
   tall, words 15, the refundable line 14 higher to keep its gap under it. */
@media (min-width: 900px) {
  .circuit .head .btn { width: calc(256 * var(--fu)); font-size: calc(20 * var(--fu)); }
  .order .opts .btn.wide { height: calc(56 * var(--fu)); line-height: calc(56 * var(--fu)); font-size: calc(20 * var(--fu)); }
}
@media (max-width: 899px) {
  .order .opts .btn.wide { height: calc(46 * var(--pu)); font-size: calc(15 * var(--pu)); line-height: calc(46 * var(--pu)); }
  .order .opts .fine { top: calc(342 * var(--pu)); }
}
/* Every button in the site's own Neue Montreal Semi Squeezed SemiBold, not Inter (Anshul 2026-10-26). The button rules
   set the family through the font shorthand at several specificities, so the family and weight alone are forced here.
   The Figma laptop frames still label buttons in Inter until someone with the font installed changes them. */
.btn, .edge-cta, .circuit .report button, .sim .end .btn { font-family: var(--display) !important; font-weight: 600 !important; }

/* Every section is one whole screen, at every size (Anshul 2026-10-26: the most basic thing the site has to do). Kept
   last so it wins over the blocks above.
   --sh is a section's height: the largest viewport (lvh), the screen with the browser's bars tucked away. It never
   changes while scrolling, so nothing jumps, and when the bars are away no neighbour shows below. The frames are still
   fitted to the smallest viewport (--fu and --pu use svh), so with the bars showing every word is on screen and only
   background sits under the bars. --sd is that strip, 0 on laptops, and whatever sits on a section's bottom edge is lifted
   by it. On laptops and in Chrome's emulation lvh, svh and vh are the same. */
:root { --sh: 100vh; --sd: 0px; }
@supports (height: 100lvh) { :root { --sh: 100lvh; --sd: calc(100lvh - 100svh); } }
/* snapping always rests on a section's top, never between two (native CSS snap, no scripted scrolling) */
html { scroll-snap-type: y mandatory; }
main > section { scroll-snap-align: start; }
footer { scroll-snap-align: end; }
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }
/* sections rise in by moving what is inside them, not the section itself, so its edges stay on the screen's edges */
.js main > section.rise { transform: none; }
.js main > section.rise > * { transform: translateY(24px); transition: transform .9s var(--ease); }
.js main > section.rise.in > * { transform: none; }
/* the two whose photo fills the screen only fade, so no band opens at their top while they arrive */
.js main > section.ccp.rise > *, .js main > section.how.rise > * { transform: none; }
@media (prefers-reduced-motion: reduce) { .js main > section.rise > * { transition: none; } }

main > section[class] { height: var(--sh); min-height: 0; }
.hero .pin { height: 100%; }
@media (min-width: 900px) {
  /* 9 and the footer share the last screen, as frame Site 09 does */
  main > section.order { height: calc(var(--sh) - 220 * var(--fu)); }
  .ccp figure, .ccp img { height: 100%; }
  /* on laptops the three photos sit side by side, so they are not snap points of the page */
  .ccp figure { scroll-snap-align: none; }
  .ccp > figure { height: var(--sh); }
  .ccp figcaption { bottom: calc(var(--y0) + 96.3 * var(--fu) + var(--sd)); }
  /* the knit photo covers the whole window: as wide as the window too, from the same top left */
  .how .macro img { width: max(calc(1920 * var(--fu)), calc(var(--sh) * 1505 / 1024), 100vw); }
  .how .macro .glow { -webkit-mask-size: max(calc(1920 * var(--fu)), calc(var(--sh) * 1505 / 1024), 100vw) auto;
    mask-size: max(calc(1920 * var(--fu)), calc(var(--sh) * 1505 / 1024), 100vw) auto; }
  .hero .wm.big { bottom: calc(8.5 * var(--fu) + var(--sd)); }
}
@media (max-width: 899px) {
  /* the hero is a whole screen too. Its frame keeps the top left, the photos grow to cover, the wordmark keeps its
     8.6 from the bottom of what is on screen */
  .hero .wm.big { bottom: calc(8.6 * var(--pu) + var(--sd)); }
  .science .pin { height: 100%; }
  .ccp > figure, .ccp img { height: var(--sh); }
}
/* phones: the corner Reserve now keeps the frame's 16 from the stripe and 20 from the bottom of the screen itself, not of
   the letterboxed frame, so it sits in the corner on every phone shape */
@media (max-width: 899px) {
  .edge-cta { right: calc(var(--stripe) + 16 * var(--pu)); bottom: calc(20 * var(--pu)); }
}
/* phones: the two cuts' readouts on two short lines, like the hot cut's, so the lunges one stays inside its photo */
@media (max-width: 899px) {
  .pair .readout .val em { display: block; }
  .pair .readout .val i { display: none; }
  .pair .readout:not(.stack) { left: 8%; top: 66%; }
  .pair .readout .val, .pair .readout.stack .val { font-size: 13px; line-height: 1.3; }
  .pair .readout .what { font-size: 10px; }
}
/* phones: the frame fills the screen's width, and short screens take the difference out of the photos and gaps
   (Anshul 2026-10-27: on an iPhone with Safari's bars every section looked shrunk, with an empty band on the left).
   --pu was the smaller of the width and height scales, so on a 393 by 694 screen the 373 wide stage was 307 wide and
   centred, 35 px in from the left on top of the frame's own 24. Now --pu follows the width, and only a screen too short
   for even a squeezed frame (shorter than 644 frame pixels, like an SE with its bars) falls back to fitting the height.
   --give is how many frame pixels of height each section can give up. --dy is how many it gives on this screen, 0 or
   less, never past -give. What sits under a section's photo or stage moves up by --dy (as a margin, so the frame's own
   top stays as it is) and the photo, stage or figure above it is shorter by the same, so the words keep their size and
   their distance from the screen's bottom. On a 390 by 844 phone --dy is 0 and the page is the frame pixel for pixel,
   and on screens taller than the frame the stage is centred as before. */
@media (max-width: 899px) {
  main > section, footer, .how, .edge-cta {
    --give: 200;
    --pu: min(calc((100vw - var(--stripe)) / 373), calc(100svh / (844 - var(--give))));
    --px0: calc((100vw - var(--stripe) - 373 * var(--pu)) / 2);
    --py0: max(0px, calc((100svh - 844 * var(--pu)) / 2));
    --dy: min(0px, calc(100svh - 844 * var(--pu)));
  }
  /* 2: the stage and the body in it give the height, the reading under the body and the {nwh} lines move up */
  .figure-form { height: calc(486 * var(--pu) + var(--dy)) !important; }
  .ff-view { height: calc(330 * var(--pu) + var(--dy)); }
  .ff-rep, .ff-deg, .ff-note, .ff-strip, .science .l2 .mark.nwh, .science .l2 > span:last-child { margin-top: var(--dy); }
  /* 3: the words on the photos */
  .ccp figcaption { margin-top: var(--dy); }
  /* 4: the cards give it, the number and name under each move up */
  .sports .cols { height: calc(620 * var(--pu) + var(--dy)); }
  .sports .cols > article { height: calc(525 * var(--pu) + var(--dy)); }
  .sports .n, .sports h3 { margin-top: var(--dy); }
  /* 5: the gap over the player gives 15%, the figure the rest, the timeline and chips move up */
  .circuit .report[data-player] { margin-top: calc(.15 * var(--dy)); }
  .circuit .report[data-player] .report-page, .circuit .report[data-player] .scrub { height: calc(497 * var(--pu) + .85 * var(--dy)); }
  .circuit .report[data-player] .figure { height: calc(284 * var(--pu) + .85 * var(--dy)); }
  .circuit .report[data-player] .timeline, .circuit .report[data-player] .ends, .circuit .report[data-player] .chips { margin-top: calc(.85 * var(--dy)); }
  /* 6: the knit gives it, its heading and the three lines move up */
  .how .macro { height: calc(var(--py0) + 486 * var(--pu) + var(--dy)); }
  .how .macro h2, .how .wrap { margin-top: var(--dy); }
  /* 7: the two photos give it, the lines move up */
  .cuts .pair { height: calc(435 * var(--pu) + var(--dy)); }
  .cuts .facts { margin-top: var(--dy); }
  /* 8: the battery photo gives 90%, the gap under it 10% */
  .specs .grid > figure { height: calc(317 * var(--pu) + .9 * var(--dy)); }
  .specs dl { margin-top: var(--dy); }
  /* 9: no photo, so the gaps give it: 26% the top, 60% the gap over the button, 14% the gap over the deposit lines */
  .order h2, .order .opts { margin-top: calc(.26 * var(--dy)); }
  .order .opts .btn.wide, .order .opts .fine { margin-top: calc(.6 * var(--dy)); }
  .order .how-pay { margin-top: var(--dy); }
  /* 768 to 899 wide get this layout too, but not the 767 block that makes each photo fill its box, so the photos and
     the player's figure kept their own height and ran under the words below them. The same rules here, and the lines
     under the sports cards hidden as on phones (the phone frame has none) */
  .circuit .report[data-player] .figure canvas { height: 100% !important; }
  .specs .grid > figure img, .how .macro img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .sports .cols > article > ul { display: none; }
}
/* phones: the {form} reading's degrees on the same left edge as "Knee bend, rep" above them and "Full depth" below
   (the frame set them 8 apart). 26 rather than 28 because the big figures carry their own side bearing. */
@media (max-width: 899px) {
  .ff-deg { left: calc(26 * var(--pu)); }
}

/* Opened from pro.nowhere.fit (?from=pro), for people who know Nowhere only from an ad: the same story told shorter, and one
   plain line under the headline saying what the suit is (Anshul 2026-11-02). */
html.from-pro .y-see, html.from-pro .y-sport, html.from-pro .y-box { display: none !important; }
.hero .pro-line { margin: 10px 0 0; max-width: 30ch; font-size: 15px; line-height: 1.35; font-family: var(--display); font-weight: 400; color: var(--bone); opacity: .92; }
@media (min-width: 900px) { .hero .pro-line { margin-top: 14px; font-size: 19px; } }