/* Design quality is 46.1% of credibility judgements (Stanford, n=2,684) — more
   than twice the next factor. For a premium product it does double duty: trust
   and price positioning are the same asset. */
:root{
  --paper:#F0EEE8;--surface:#FFFFFF;--hair:#DFDBD2;--hair-strong:#C6C1B5;
  --ink:#101F35;--ink-2:#3A4C64;--muted:#78828F;--faint:#A3ABB4;
  --green:#14563A;--green-soft:#E2EAE3;--signal:#A3302A;--cognac:#A9764B;--cream:#E7E4DC;
  --label:#5E6875;
  /* One family, five weights, a width axis for the wordmark. A grotesque
     rather than a serif because Meridian is an instrument, not a publication:
     the pace number and the headline should speak in the same voice, since
     the number IS the headline. Archivo is the closest open face to Suisse
     Int'l — if that licence is ever bought it drops into these same two
     slots and nothing else on the site has to change. */
  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-ui:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}
.wrap{max-width:560px;margin:0 auto;padding:0 22px 80px}

/* ---------- masthead ---------- */
/* A solid green field, edge to edge, no rounded corners. This is signage
   rather than a web section — the thing a club paints on a wall. Everything
   below it stays paper and hairlines, which is what stops it reading as loud
   instead of confident. */
/* One green band across the top of every page. The home page extends it
   downward so the calculator can overlap the seam; other pages stop short. */
.band{background:var(--green);color:var(--paper)}
.band .wrap{padding-bottom:0}
.hero{background:var(--green);color:var(--paper);padding:0 0 96px;margin-bottom:-70px}
.hero .wrap{padding-bottom:0}
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0 18px;border-bottom:1px solid rgba(240,238,232,.22);
}
.brandlink{display:flex;align-items:center;gap:11px;text-decoration:none;padding:8px 0}
/* Three links is a navigation, not a menu. A hamburger here would hide the
   whole site behind a tap to save thirty pixels. */
.nav{display:flex;gap:18px}
.nav a{
  color:rgba(240,238,232,.72);text-decoration:none;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:14px 0 12px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--paper)}
.nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--paper)}
.nav a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* Interior pages: a shorter green head, no overlap trick. */
.pagehead{padding:34px 0 40px}
.pagehead h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(34px,8.5vw,52px);letter-spacing:-.036em;line-height:.96;
  margin:0;color:var(--paper);text-wrap:balance;
}
.pagehead .stand{
  font-size:16.5px;line-height:1.45;color:rgba(240,238,232,.76);
  margin:16px 0 0;max-width:32em;
}
.after-band{padding-top:34px}
.fline{margin-top:8px}
.logomark{flex:none;color:var(--paper)}
.logomark circle,.logomark ellipse,.logomark line{
  stroke:currentColor;fill:none;stroke-width:6;stroke-linecap:round;
}
.logomark .heavy{stroke-width:10}
.logomark .fill{fill:currentColor;stroke:none}
.wordmark{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  font-stretch:112%;letter-spacing:.17em;text-transform:uppercase;color:var(--paper);
}

/* ---------- hero ----------
   The first two words carry the scan. NNG's test: a concrete opening gave 85%
   correct prediction of a page's purpose from 11 characters; a generic opener
   ("Introducing…") gave 0%. So the headline opens on "Running pace", not on a
   slogan. The slogan is still here — it just isn't doing the identifying. */
/* The page read like an essay: airy, mid-sized, evenly grey. The fix is not
   more decoration, it is contrast — one enormous voice at the top and
   everything else quiet and tight underneath. Scale does the shouting so the
   colours don't have to. */
h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,10.8vw,68px);letter-spacing:-.038em;line-height:.94;
  margin:30px 0 0;text-wrap:balance;color:var(--paper);
}
.sub{
  font-size:16.5px;line-height:1.45;color:rgba(240,238,232,.78);
  margin:20px 0 0;max-width:27em;
}

/* ---------- the live calculator ----------
   The page used to show a photograph of the idea: two numbers and an arrow.
   Nobody believes a screenshot of a claim. This is the real engine — the same
   code that will ship in the app — running in the visitor's browser, on their
   own pace, before they have given anything up.

   Banner-blindness research says decorative imagery gets pattern-matched as
   advertising and skipped; working product does not. A thing you can operate
   is the strongest version of that. */
/* Overlapping the boundary is an editorial move, not an ornament: it makes
   the card the object the page is built around instead of the next thing in a
   stack, and it puts the product's own interface across the seam. */
.demo{
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:4px;
  padding:0;margin:0;overflow:hidden;position:relative;z-index:2;
  box-shadow:0 14px 40px rgba(16,31,53,.16);
}
.demo-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 18px;background:var(--ink);color:var(--paper);
}
.demo-head span{
  font-size:9px;letter-spacing:.13em;white-space:nowrap;text-transform:uppercase;font-weight:700;
}
.demo-head .live{color:rgba(240,238,232,.52)}
.demo-body{padding:20px 18px}

.demo .out{
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start;
}
.demo .out > div:last-child{text-align:right}
.demo .lbl{
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--label);font-weight:700;margin-bottom:7px;
  min-height:2.1em;display:flex;align-items:flex-end;
}
.demo .out > div:last-child .lbl{justify-content:flex-end}
.demo .val{
  font-family:var(--font-display);font-size:clamp(21px,5.2vw,30px);font-weight:700;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.demo .val small{
  font-family:var(--font-ui);font-size:13px;font-weight:400;color:var(--label);
}
.demo .arrow{color:var(--label);font-size:17px;padding-top:2.4em}
.demo .why{
  margin:17px 0 0;padding-top:15px;border-top:1px solid var(--hair);
  color:var(--ink-2);font-size:15px;line-height:1.5;
}

.controls{
  margin-top:18px;padding-top:17px;border-top:1px solid var(--hair);
  display:grid;gap:15px;
}
.ctl label{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--label);font-weight:700;margin-bottom:8px;
}
.ctl label b{
  font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;
}
.ctl input[type=text]{
  width:100%;background:var(--paper);border:1px solid var(--hair-strong);
  border-radius:4px;color:var(--ink);font-family:inherit;
  font-size:16px;font-weight:600;padding:12px 13px;min-height:48px;
  font-variant-numeric:tabular-nums;
}
.ctl input[type=text]:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.ctl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;
  /* 44px of hit area, 3px of visible track. Measuring the element rather
     than the drawing found 0.8 mm here, against a 9.2 mm research floor. */
  height:44px;background:transparent;margin:0;cursor:pointer;
}
.ctl input[type=range]::-webkit-slider-runnable-track{
  height:3px;background:var(--hair-strong);border-radius:2px;
}
.ctl input[type=range]::-moz-range-track{
  height:3px;background:var(--hair-strong);border-radius:2px;
}
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:2px solid var(--green);
  box-shadow:0 1px 3px rgba(16,31,53,.22);margin-top:-11.5px;
}
.ctl input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--surface);
  border:2px solid var(--green);
}
.ctl input[type=range]:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.presets{display:flex;flex-wrap:wrap;gap:7px}
.presets button{
  background:var(--paper);border:1px solid var(--hair-strong);color:var(--label);
  font-family:inherit;font-size:12.5px;font-weight:600;
  padding:9px 12px;min-height:44px;border-radius:4px;cursor:pointer;
}
.presets button[aria-pressed="true"]{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.presets button:focus-visible{outline:2px solid var(--green);outline-offset:2px}


/* ---------- the atom ----------
   Max's idea, and it earns its place: the product's whole claim is that
   several independent things orbit one answer. A bar chart would say the same
   thing and say it flatly.

   One hue throughout. Size does the encoding — orbit weight and electron
   radius scale with what each factor costs — so there is no colour-blindness
   problem to validate and no rainbow to apologise for. It also happens to be
   the logo's own geometry: a sphere with lines through it. */
.atom{
  margin:26px 0 0;padding:26px 18px 20px;background:var(--surface);
  border:1px solid var(--hair);border-radius:6px;
}

/* The number is the answer, so it gets to be typography rather than a label
   crammed inside a drawing. It sits above the diagram at full display weight;
   the diagram underneath explains where it came from. */
.atom-read{text-align:center;margin-bottom:6px}
.atom-lbl{
  font-family:var(--font-ui);font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label);
}
.atom-pace{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(48px,13.5vw,68px);line-height:1;letter-spacing:-.045em;
  color:var(--green);margin-top:4px;font-variant-numeric:tabular-nums;
}
.atom-pace small{
  display:block;font-family:var(--font-ui);font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label);
  margin-top:6px;
}

.atom svg{
  display:block;width:100%;max-width:380px;margin:0 auto;height:auto;
  overflow:visible;shape-rendering:geometricPrecision;
}
.orbit{fill:none;stroke:var(--green);opacity:.45;vector-effect:non-scaling-stroke}
.electron{fill:var(--green);stroke:var(--surface);stroke-width:3}
/* A plate, not a ring: the rings pass behind the nucleus instead of through
   the middle of it, which is what made the old figure read as clutter. */
.nucleus-plate{fill:var(--surface)}
/* Seven packed circles, each cut out of its neighbour by a paper-coloured
   stroke, so the cluster reads as distinct particles instead of a blob. */
.nucleus circle{fill:var(--green);stroke:var(--surface);stroke-width:2.4}
.nucleus circle:first-child{fill:#0E4530}

.legend{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:10px;padding-top:16px;border-top:1px solid var(--hair);
}
.leg{text-align:center}
.leg .dot{display:block;margin:0 auto 8px;border-radius:50%;background:var(--green)}
.leg .amt{
  font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.leg .nm{
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--label);font-weight:700;margin-top:5px;
}
/* The diagram is still by design. Sizes carry the information; nothing needs
   to move for it to be read, and a spinning graphic on a page about pacing
   yourself would be a small joke at its own expense. */
.electron{transition:r .22s ease}
.orbit{transition:stroke-width .22s ease}

/* Smallest phones: three legend columns stop fitting long before the diagram
   does, so the legend becomes rows and keeps its numbers legible. */
@media (max-width:360px){
  .legend{grid-template-columns:1fr;gap:0;text-align:left}
  .leg{
    display:grid;grid-template-columns:22px 1fr auto;align-items:center;
    gap:10px;text-align:left;padding:9px 0;border-bottom:1px solid var(--hair);
  }
  .leg:last-child{border-bottom:0}
  .leg .dot{margin:0}
  .leg .nm{margin-top:0;order:2}
  .leg .amt{order:3}
}

/* ---------- signup ----------
   Above the fold, because the value proposition is simple — that's the
   condition where an above-fold CTA wins. Repeated at the end regardless. */
.signup{margin:26px 0 0}
.signup label{
  display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);font-weight:700;margin-bottom:8px;
}
.signup .fields{display:flex;gap:9px;flex-wrap:wrap}
.signup input{
  flex:1;min-width:200px;background:var(--surface);
  border:1px solid var(--hair-strong);border-radius:5px;
  color:var(--ink);font-family:inherit;
  /* 16px minimum: below this, iOS Safari auto-zooms the page on focus. */
  font-size:16px;padding:15px 15px;min-height:52px;
}
.signup input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.signup button{
  background:var(--green);color:#fff;border:none;border-radius:5px;
  padding:0 26px;min-height:52px;font-family:inherit;
  font-size:16px;font-weight:700;cursor:pointer;letter-spacing:.01em;
}
.signup button:hover{background:#0F4831}
.signup button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.note{font-size:13px;color:var(--label);margin-top:11px}

/* ---------- what it does ---------- */
/* Rules do the separating, not white space. An essay breathes; a programme
   or a scorecard rules a line and moves on. */
h2{
  font-family:var(--font-display);font-weight:700;font-size:clamp(26px,6.6vw,32px);
  letter-spacing:-.028em;line-height:1.06;margin:44px 0 0;
  padding-top:18px;border-top:2px solid var(--ink);
}
ul{margin:14px 0 0;padding:0;list-style:none}
li{padding:14px 0;border-bottom:1px solid var(--hair);color:var(--ink-2);font-size:15.5px;line-height:1.45}
li:last-child{border-bottom:none}
li b{
  color:var(--ink);font-weight:700;display:block;margin-bottom:4px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
p{color:var(--ink-2);margin:13px 0 0;max-width:31em;font-size:16px;line-height:1.5}
.lead{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(21px,5.4vw,26px);letter-spacing:-.028em;line-height:1.18;
  color:var(--ink);margin:16px 0 0;max-width:17em;
}
.lead + p{margin-top:14px}

.closing{
  margin-top:46px;padding:26px 22px;background:var(--surface);
  border:1px solid var(--hair);border-radius:6px;
}
.closing h2{margin-top:0}

footer{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--hair);padding-bottom:70px;
  font-size:11px;color:var(--label);letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
footer a{color:var(--green);text-decoration:none;display:inline-block;padding:14px 3px}
footer a:hover{text-decoration:underline}
.fline{margin-top:9px;color:var(--label)}

/* Post-submit states. The form redirects back here rather than leaving the
   person on a bare JSON page — a signup that ends on a blank screen reads as
   broken even when it worked. */
.flash{
  margin:26px 0 0;padding:15px 17px;border-radius:6px;font-size:16px;
  border:1px solid var(--hair);background:var(--surface);
}
.flash.good{border-left:3px solid var(--green);background:var(--green-soft);color:var(--ink)}
.flash.bad{border-left:3px solid var(--signal);color:var(--ink)}
.flash b{display:block;margin-bottom:3px}
/* Once someone has joined, asking again is noise. Hide the forms and let the
   confirmation stand on its own. */
body.joined .signup{display:none}
body.joined .closing{display:none}


/* ---------- tables, used on Science and Races ---------- */
.tablewrap{overflow-x:auto;margin:18px 0 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
th,td{text-align:left;padding:11px 10px 11px 0;border-bottom:1px solid var(--hair);vertical-align:top}
th{
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);
  font-weight:700;border-bottom:1px solid var(--hair-strong);white-space:nowrap;
}
td{color:var(--ink-2)}
td:first-child{color:var(--ink);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
.pass{color:var(--green);font-weight:700}
.tension{color:var(--signal);font-weight:700}

/* ---------- a cited claim ---------- */
.finding{
  margin:20px 0 0;padding:18px 20px;background:var(--surface);
  border:1px solid var(--hair);border-left:3px solid var(--green);border-radius:0 6px 6px 0;
}
.finding h3{font-family:var(--font-ui);font-size:16px;font-weight:700;margin:0;color:var(--ink)}
.finding p{margin:9px 0 0;font-size:15.5px}
.cite{
  display:block;margin-top:11px;font-size:12px;color:var(--label);
  font-style:normal;letter-spacing:.01em;
}
.finding.against{border-left-color:var(--signal)}

/* ---------- race list ---------- */
.racefilter{margin:20px 0 0}
.racefilter input{
  width:100%;background:var(--surface);border:1px solid var(--hair-strong);
  border-radius:5px;color:var(--ink);font-family:inherit;
  font-size:16px;padding:14px 15px;min-height:52px;
}
.racefilter input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.racecount{font-size:13px;color:var(--label);margin-top:10px}
.race{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  padding:15px 0;border-bottom:1px solid var(--hair);
}
.race .nm{font-weight:700;color:var(--ink);font-size:16px}
.race:has(.nm a){align-items:center}
.race .where{font-size:13px;color:var(--label);margin-top:3px}
.race .cond{
  grid-column:2;grid-row:1 / span 2;text-align:right;white-space:nowrap;
  font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.race .cond b{display:block;font-family:var(--font-display);font-size:20px;color:var(--ink);font-weight:600}
.race .note{grid-column:1 / -1;font-size:13px;color:var(--label);margin-top:7px;line-height:1.45}

/* ---------- charts ----------
   Drawn as plain SVG from the engine's own numbers at build time, so a chart
   can never drift away from the model it claims to depict. No library: these
   are lines, and a library would be 60 kB of someone else's opinions. */
.figure{
  margin:24px 0 8px;padding:20px 16px 14px;background:var(--surface);
  border:1px solid var(--hair);border-radius:6px;
}
.figure .chart{display:block;width:100%;height:auto;overflow:visible}
.figure figcaption{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);
  font-size:14px;line-height:1.55;color:var(--ink-2);
}
.figure figcaption b{color:var(--ink);font-weight:700}
.gl{stroke:var(--hair);stroke-width:1}
.gl.base{stroke:var(--hair-strong);stroke-width:1.2}
.ax{
  font-family:var(--font-ui);font-size:11px;font-weight:600;
  fill:var(--label);letter-spacing:.02em;
}
.curve{fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pt{fill:var(--green);stroke:var(--surface);stroke-width:2.5}
.chart-note{
  font-family:var(--font-ui);font-size:11px;font-weight:700;
  fill:var(--ink);letter-spacing:.01em;
}
.ci-band{fill:var(--signal);opacity:.13}
.meas{fill:none;stroke:var(--signal);stroke-width:2.6;stroke-linecap:round}
.key{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.key.model{fill:var(--green)}
.key.measured{fill:var(--signal)}
.bar{fill:var(--green);opacity:.82}
.bar.hot{fill:var(--signal);opacity:.86}
.barlbl{
  font-family:var(--font-ui);font-size:13px;font-weight:700;
  fill:var(--ink);letter-spacing:.01em;
}
.barval{
  font-family:var(--font-display);font-size:15px;font-weight:700;
  fill:var(--ink);font-variant-numeric:tabular-nums;
}

/* Smallest phones: the wordmark and three nav links stop fitting on one line
   at about 340px. Rather than shrink the type until it is unreadable, the
   masthead becomes two rows — brand above, navigation below, still one tap
   from anywhere. */
@media (max-width:374px){
  .masthead{flex-wrap:wrap;gap:2px 12px}
  .nav{width:100%;gap:0;justify-content:space-between;padding-bottom:2px}
  .wordmark{font-size:16px;letter-spacing:.12em}
}

/* The first heading after the green band already has the band as its rule, so
   it does not need 44px of air and a second one on top of it. */
.after-band > h2:first-child{margin-top:6px}

/* ---------- the hero, rebuilt ----------
   The old hero described the product and made you scroll to meet it. This one
   puts the working thing next to the sentence that claims it. On a phone the
   claim comes first and the instrument directly under it; on a laptop they sit
   side by side and the card hangs off the bottom of the green, which is the
   one editorial move on the page. */
.herogrid{display:grid;gap:26px;padding-bottom:0}
.herotext{min-width:0}
.heroctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cta{
  display:inline-block;text-decoration:none;border-radius:3px;
  padding:14px 22px;font-size:13.5px;font-weight:700;letter-spacing:.01em;
  background:var(--paper);color:var(--green);border:1px solid var(--paper);
}
.cta.ghost{background:transparent;color:var(--paper);border-color:rgba(240,238,232,.42)}
.cta:hover{background:#fff;border-color:#fff;color:var(--green)}
.cta.ghost:hover{background:rgba(240,238,232,.12);color:var(--paper);border-color:var(--paper)}
.cta:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.herogrid .demo{margin-bottom:-62px}
.after-hero{padding-top:88px}

/* ---------- desktop ----------
   Below 900px the site is one column, which is correct for a phone and was
   being served to laptops as well: a 560px ribbon down the middle of a 1440px
   screen. Above 900px the page becomes a real grid — prose stays at a
   readable measure, and the things that carry information (the instrument,
   the charts, the race list) get the width they were drawn for. */
@media (min-width:900px){
  .wrap{
    max-width:1160px;padding-left:40px;padding-right:40px;
    display:grid;column-gap:48px;
    grid-template-columns:
      [full-start] minmax(0,1fr)
      [text-start] minmax(0,680px) [text-end]
      minmax(0,1fr) [full-end];
  }
  .wrap > *{grid-column:text}
  .masthead,.herogrid,.pagehead,footer,
  .wrap > .figure,.wrap > .atom,.wrap > .tablewrap,.wrap > #raceList,
  .wrap > .racefilter,.wrap > .closing{grid-column:full}

  .herogrid{
    grid-template-columns:minmax(0,1fr) 430px;gap:56px;align-items:end;
    padding:6px 0 46px;
  }
  /* Both columns bottom-align, so the headline column stops clear of the seam
     and only the instrument is allowed to cross it. */
  .herogrid .demo{margin-bottom:-108px}
  .heroctas{margin-top:32px}
  .after-hero{padding-top:104px}
  .pagehead{padding:52px 0 60px}
  .pagehead .stand{font-size:18px}
  .sub{font-size:18px;max-width:24em}

  /* The instrument and the charts stop being phone-width. */
  .figure{padding:28px 32px 22px}
  .figure figcaption{font-size:15px;max-width:72ch}

  /* Two race cards abreast; the list was the longest page on the site. */
  #raceList{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
}

@media (min-width:1200px){
  .atom{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
    gap:40px;align-items:center;padding:32px 34px;
  }
  /* The diagram spans both rows, so the readout and the legend are pulled
     toward each other rather than left stranded at the far ends of it. */
  .atom-read{grid-column:1;grid-row:1;align-self:end;text-align:left;margin:0}
  .atom svg{grid-column:2;grid-row:1 / span 2;max-width:460px}
  .legend{
    grid-column:1;grid-row:2;align-self:start;
    margin-top:28px;padding-top:22px;border-top:1px solid var(--hair);
    text-align:left;
  }
  /* Beside the diagram the legend has half the width it had, so three
     columns stop fitting. It becomes three rows: dot, name, number — which
     also puts the numbers in a column you can compare down. */
  .legend{grid-template-columns:1fr;gap:0}
  .leg{
    display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:12px;
    text-align:left;padding:10px 0;border-bottom:1px solid var(--hair);
  }
  .leg:last-child{border-bottom:0}
  .leg .dot{margin:0;justify-self:center}
  .leg .nm{margin-top:0;order:2}
  .leg .amt{order:3;font-size:21px}
  .wrap{column-gap:64px}
  .herogrid{grid-template-columns:minmax(0,1fr) 470px;gap:72px}
}

/* Motion, where it exists, is information — a number recalculating, a ring
   resizing. Someone who has asked their phone to stop moving things gets the
   same numbers without the transition. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}
.fillband{fill:var(--green);opacity:.10}
.tier{stroke:var(--hair-strong);stroke-width:1;stroke-dasharray:3 4}
.tierlbl{
  font-family:var(--font-ui);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;fill:var(--label);
}

/* Race-day table: the terrain column is the point of it, so it carries the
   only colour — one direction costs you, the other gives back. */
td.up{color:var(--signal);font-weight:700}
td.down{color:var(--green);font-weight:700}
.race .nm a{
  display:inline-block;padding:13px 0;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--hair-strong);
}
.race .nm a:hover{border-bottom-color:var(--green);color:var(--green)}

/* Chart labels sit in a reserved band above the plot and are nudged apart
   until none of them collides. A leader line runs from each label back down
   to the point it names, so a nudged label is still unambiguous. */
.leader{fill:none;stroke:var(--hair-strong);stroke-width:1}

/* ---------- sections ----------
   Each h2 and everything under it is one object. On a phone it reads exactly
   as before. On a laptop the heading and its standfirst move into a left rail
   and stay put while the prose and figures scroll past them, which is what
   makes the width structural rather than decorative. */
.sec{margin-top:44px;padding-top:18px;border-top:2px solid var(--ink)}
.sec h2{margin:0;padding-top:0;border-top:0}
.sec .lead{margin-top:10px}
.after-hero > .sec:first-of-type,
.after-band > .sec:first-of-type{margin-top:26px}

@media (min-width:900px){
  .sec{
    grid-column:full;display:grid;gap:0 56px;
    grid-template-columns:290px minmax(0,1fr);
    margin-top:64px;padding-top:22px;
  }
  .sec-head{position:sticky;top:26px;align-self:start}
  .sec-head h2{font-size:30px}
  .sec-body{min-width:0}
  .sec-body > p{max-width:68ch}
  .sec-body > p:first-child{margin-top:0}
  /* Figures already had the page's full width; inside a section they take the
     body column, which is still far wider than the old 560px ribbon. */
  .sec-body .figure,.sec-body .atom{margin-top:22px}
}
@media (min-width:1200px){
  .sec{grid-template-columns:340px minmax(0,1fr);gap:0 72px}
}

/* ---------- fuelling ----------
   Three columns because there are three moments, and the runner is looking
   for one of them. Not a card each: one object with two rules through it, so
   it reads as a single plan rather than three unrelated tips. */
.fuel{
  margin:24px 0 0;background:var(--surface);border:1px solid var(--hair);
  border-radius:6px;display:grid;grid-template-columns:1fr;
}
.fuelcol{padding:20px 20px 18px;border-bottom:1px solid var(--hair)}
.fuelcol:last-child{border-bottom:0}
.fuelhd{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;
}
.fuellist{margin:0;padding:0;list-style:none}
.fuellist li{
  padding:0 0 12px;border-bottom:0;color:var(--ink-2);
  font-size:15px;line-height:1.5;
}
.fuellist li:last-child{padding-bottom:0}
/* The safety note is a different kind of thing and has to look like one. */
.caution{
  margin-top:14px;background:#FBF3F2;border:1px solid #E4C9C6;
  border-left:3px solid var(--signal);border-radius:0 6px 6px 0;padding:18px 20px;
}
.caution .fuelhd{color:var(--signal)}
.caution .fuellist li{color:#6B2B27}
@media (min-width:760px){
  .fuel{grid-template-columns:repeat(3,1fr)}
  .fuelcol{border-bottom:0;border-right:1px solid var(--hair)}
  .fuelcol:last-child{border-right:0}
}

/* Links inside running prose stay inline. Padding them into a 44px target
   inflates the line box and wrecks the paragraph's leading, which is a worse
   outcome than the thing it fixes — and inline links in a block of text are
   exempt from the target-size rule precisely because of this. Standalone
   links, which are really buttons wearing a link's clothes, do get a target. */
.sec-body p a,.after-hero > p a{
  color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--hair-strong);
}
.sec-body p a:hover,.after-hero > p a:hover{border-bottom-color:var(--green)}
.sec-body p a.more,.after-hero > p a.more{
  display:inline-block;padding:13px 1px;line-height:1.1;border-bottom-width:1px;
  font-weight:700;
}

/* ---------- spacing ----------
   The page had grown a dozen different gaps — 13, 14, 18, 20, 22, 24, 26 —
   each one reasonable where it was written and none of them agreeing with the
   others. Vertical rhythm is a system or it is nothing, so here is the system,
   in one place, applied last.

   Three steps, and one rule about headings: the space ABOVE a heading is
   always larger than the space below it, because that gap is what tells the
   eye which paragraph the heading belongs to. Every ambiguous heading on the
   web is a heading with equal space on both sides. */
:root{
  --s-tight:10px;   /* inside one thought */
  --s-text:18px;    /* between paragraphs */
  --s-block:30px;   /* between a paragraph and an object */
  --s-group:46px;   /* between distinct groups inside a section */
}

p{margin-top:var(--s-text)}
.lead{margin-top:var(--s-tight)}
.sec-body > p:first-child,.sec-body > *:first-child{margin-top:0}

/* Objects — anything that is a thing rather than a sentence — get more air
   than a paragraph does, above and below. */
.figure,.atom,.tablewrap,.fuel,.racefilter,.caution,
.sec-body > ul,.sec-body > ol{margin-top:var(--s-block)}
.tablewrap + p,.figure + p,.atom + p,.fuel + p,.caution + p{margin-top:var(--s-block)}
.caution{margin-top:16px}          /* stays close to the plan it qualifies */
.fuel + p{margin-top:var(--s-block)}

/* Sub-headings. The privacy page had none of these styled at all and was
   running on browser defaults, which is why it read as a different website. */
.sec-body h3{
  font-family:var(--font-display);font-weight:700;font-size:18px;
  letter-spacing:-.015em;color:var(--ink);
  margin:var(--s-group) 0 0;
}
.sec-body h3 + p{margin-top:var(--s-tight)}
.sec-body h3:first-child{margin-top:0}

/* Ordered lists on the privacy page: numbers as data, not decoration. */
.sec-body ol{padding-left:0;list-style:none;counter-reset:c}
.sec-body ol > li{
  counter-increment:c;position:relative;padding:14px 0 14px 34px;
  border-bottom:1px solid var(--hair);color:var(--ink-2);
  font-size:15.5px;line-height:1.45;
}
.sec-body ol > li:last-child{border-bottom:0}
.sec-body ol > li::before{
  content:counter(c);position:absolute;left:0;top:15px;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--green);
  font-variant-numeric:tabular-nums;
}

/* A callout is a paragraph the page wants you to actually read. */
.sec-body .callout{
  margin-top:var(--s-block);padding:18px 20px;background:var(--surface);
  border:1px solid var(--hair);border-left:3px solid var(--green);
  border-radius:0 6px 6px 0;
}
.sec-body .callout > *:first-child{margin-top:0}

/* The race list sat flush against its own search box. */
#raceList{margin-top:22px}

@media (min-width:900px){
  :root{--s-text:19px;--s-block:34px;--s-group:52px}
  /* This was 22px, which put a chart closer to its own paragraph than two
     paragraphs are to each other. */
  .sec-body .figure,.sec-body .atom{margin-top:var(--s-block)}
}

.fuellist{margin-top:0}
/* The mile number and the note beside it were touching. */
table td:first-child,table th:first-child{padding-right:16px}

/* The confidence word, beside the number it qualifies. Small, quiet, and
   always present — a number without its tier is exactly the false precision
   the Science page spends a page arguing against. */
.tier-chip{
  display:inline-block;margin-top:8px;padding:3px 8px;border-radius:3px;
  font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--green-soft);color:var(--green);border:1px solid #C9D8CD;
}
.tier-chip[data-tier="calibrating"]{background:#F5EEE4;color:#7A5322;border-color:#E2D3BC}
.tier-chip[data-tier="personalized"]{background:var(--green);color:var(--paper);border-color:var(--green)}

/* Select, matching the text input it sits beside. */
.ctl select{
  width:100%;background:var(--paper);border:1px solid var(--hair-strong);
  border-radius:4px;color:var(--ink);font-family:inherit;
  font-size:16px;font-weight:600;padding:12px 13px;min-height:48px;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235E6875' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px;
}
.ctl select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.citygoal{margin-top:var(--s-block);max-width:340px}
.citygoal input{
  width:100%;background:var(--surface);border:1px solid var(--hair-strong);
  border-radius:4px;color:var(--ink);font-family:inherit;
  font-size:16px;font-weight:600;padding:12px 13px;min-height:48px;
  font-variant-numeric:tabular-nums;
}
.citygoal input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}

/* ---------- the day, told by scrolling ----------
   The page was a document: everything on it was already finished before you
   arrived. This is the one section that happens to you.

   A tall track with a panel stuck inside it, so scrolling through the track
   moves time rather than moving the page. Nothing here is decoration — the
   thing being animated is the air, which is the product's whole subject, and
   every pace it shows is the real engine answering for that hour. */
.daystory{position:relative;height:300vh;margin-top:var(--s-block)}
.daysticky{
  position:sticky;top:16vh;height:68vh;min-height:330px;max-height:560px;
  background:var(--green);color:var(--paper);border-radius:6px;
  padding:28px 26px;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.dayhead{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(240,238,232,.66);
}
.daytime{color:var(--paper)}
.daycond{font-variant-numeric:tabular-nums;text-align:right}
.daypace{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(60px,17vw,116px);line-height:.94;letter-spacing:-.05em;
  margin:18px 0 0;font-variant-numeric:tabular-nums;
}
.daypace small{
  display:block;font-family:var(--font-ui);font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,238,232,.66);margin-top:10px;
}
/* The track is the day. The fill is how far through it you have scrolled, and
   it warms as the air does — the only place on the site where colour moves. */
.daytrack{
  margin-top:26px;height:4px;border-radius:2px;
  background:rgba(240,238,232,.22);overflow:hidden;
}
.dayfill{height:100%;width:0;background:var(--paper);border-radius:2px}
.daynote{
  margin:22px 0 0;font-size:17px;line-height:1.45;max-width:26em;
  color:rgba(240,238,232,.88);
}
.dayfoot{
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(240,238,232,.2);
  font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(240,238,232,.5);
}
@media (min-width:900px){
  .daysticky{padding:44px 46px}
  .daynote{font-size:19px;max-width:24em}
}

/* Sections arrive rather than being found already there. One transform, once,
   from a visible resting state — the content is readable with JavaScript off
   and readable before the observer fires. */
.sec{transition:opacity .5s ease,transform .5s ease}
.sec.arrive{opacity:0;transform:translateY(14px)}
.sec.arrive.seen{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  /* No pinning, no scroll hijack, no fades. The day panel becomes a plain card
     showing the worst hour, which is the one that matters anyway. */
  .daystory{height:auto}
  .daysticky{position:static;height:auto;top:auto}
  .sec.arrive{opacity:1;transform:none}
}

/* ---------- the menu panel ----------
   The top bar holds three links because three links is a navigation. Everything
   deeper lives behind the button, opening downward as a panel across the green
   rather than sliding in from the side — a drawer would be a phone convention
   borrowed onto a page that is not a phone app. */
.menubtn{
  display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:12px 2px;color:rgba(240,238,232,.72);font-family:inherit;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.menubtn:hover{color:var(--paper)}
.menubtn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.menubars{display:block;width:20px}
.menubars i{
  display:block;height:2px;background:currentColor;border-radius:1px;
  transition:transform .22s ease,opacity .18s ease;
}
.menubars i + i{margin-top:4px}
/* Open: the outer bars cross, the middle one goes. */
.menubtn[aria-expanded="true"]{color:var(--paper)}
.menubtn[aria-expanded="true"] .menubars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menubtn[aria-expanded="true"] .menubars i:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] .menubars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menupanel{
  border-top:1px solid rgba(240,238,232,.22);
  padding:26px 0 30px;color:var(--paper);
}
.menugrid{display:grid;gap:26px}
.menuk{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(240,238,232,.5);margin-bottom:10px;
}
.menucol a{
  display:block;color:var(--paper);text-decoration:none;
  font-family:var(--font-display);font-weight:700;
  font-size:20px;letter-spacing:-.02em;padding:9px 0;
  border-bottom:1px solid rgba(240,238,232,.14);
}
.menucol a:last-child{border-bottom:0}
.menucol a:hover{color:rgba(240,238,232,.72)}
.menucol a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.menufoot{
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(240,238,232,.14);
  font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-.01em;color:rgba(240,238,232,.56);
}
@media (min-width:760px){
  .menugrid{grid-template-columns:repeat(3,1fr);gap:40px}
}
@media (prefers-reduced-motion:reduce){
  .menubars i{transition:none}
}

/* ── The ledger ───────────────────────────────────────────────────────────
   A receipt, and it should read as one: a column of charges in a tabular
   figure so the digits line up, hairlines between them, and a rule above the
   total that is heavier than the rest. The restraint is the point — the
   moment this gets a gradient or a pie chart it stops looking like a bill and
   starts looking like a dashboard, and a dashboard is not something you
   dispute line by line. */
.ledger{
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:4px;
  overflow:hidden;margin:0 0 var(--s-group);
  box-shadow:0 14px 40px rgba(16,31,53,.16);
}
.ledger-body{padding:var(--s-block) 18px}
.receipt{margin:0 0 var(--s-group)}
.rline{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--hair);
}
.rlabel{display:block;font-size:15px;line-height:1.35;color:var(--ink)}
.rwhy{
  display:block;margin-top:3px;font-size:12.5px;line-height:1.45;
  color:var(--label);max-width:44ch;
}
.rval{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.rbase .rlabel,.rnil .rlabel{color:var(--label)}
.rbase{border-bottom:1px solid var(--hair-strong)}
.rval.credit{color:var(--green)}
.ritem .rval{color:var(--signal)}
.rtotal{
  border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);
  margin-top:2px;padding-top:13px;
}
.rtotal .rlabel,.rfinal .rlabel{font-weight:600}
.rfinal{border-bottom:none;padding-bottom:0}
.rfinal .rval{font-size:30px;font-weight:700;color:var(--green);letter-spacing:-.01em}
.rnote{
  margin:var(--s-text) 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  padding-top:var(--s-text);border-top:1px solid var(--hair);
}
@media (min-width:900px){
  .ledger-body{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 var(--s-group);padding:var(--s-group) var(--s-block);align-items:start;
  }
  .receipt{margin:0}
  .ledger-body .controls{margin:0}
  .rfinal .rval{font-size:36px}
}

/* The bar ran out of room the moment it gained a fourth link, and a masthead
   that overflows is worse than one that is short: it drags the whole page
   sideways. Below 760px the inline nav goes away entirely and the button
   carries the navigation, which is the reason the panel exists. The wordmark
   still goes home, so there is always one tap out of anywhere. */
@media (max-width:759px){
  .nav{display:none}
  .menuword{display:none}
  .menubtn{padding:6px 2px}
}

/* ── Conditions plates ────────────────────────────────────────────────────
   A full-bleed band with a looping clip behind it.

   The rule this obeys: the words must be legible before the footage arrives,
   after it fails, and over whatever frame happens to be showing. So the ink
   is paper-coloured on a dark scrim that is part of the design rather than an
   afterthought, and the scrim is opaque enough at the bottom that a bright
   sky cannot wash the text out. Footage that needs the text moved is the
   wrong footage. */
.plate{position:relative;isolation:isolate;overflow:hidden;background:var(--ink)}
.plate-media{position:absolute;inset:0;z-index:0}
.plate-still,.plate-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.plate-video{opacity:0;transition:opacity .5s ease}
.plate-video.ready{opacity:1}
/* Two stops rather than one: an even wash greys the whole frame, while a
   gradient keeps some of the picture at the top and buys contrast where the
   words actually are. */
.plate-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,31,53,.42) 0%,rgba(16,31,53,.62) 55%,rgba(16,31,53,.80) 100%);
}
.plate-body{
  position:relative;z-index:1;
  max-width:var(--measure,68ch);margin:0 auto;
  padding:var(--s-group) 20px calc(var(--s-group) + 8px);
  color:var(--paper);min-height:52vh;display:flex;flex-direction:column;justify-content:flex-end;
}
.plate-body h2{color:var(--paper);margin-top:0}
.plate-body p{color:rgba(240,238,232,.86)}
.plate-body .lead{color:var(--paper)}
.plate-body a{color:var(--paper)}
@media (min-width:900px){
  .plate-body{padding:calc(var(--s-group) * 1.6) 40px calc(var(--s-group) * 1.4);min-height:60vh}
}
/* Asked not to be moved, so it is not. The still stays, the loop never
   starts, and the section reads as a photograph. */
@media (prefers-reduced-motion:reduce){
  .plate-video{display:none}
}

/* Out of the column and across the whole viewport. A plate that obeys the
   text measure is just a picture in an article; a plate that breaks the grid
   is a change of pace, which is the only reason to have one. */
.plate{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  width:100vw;max-width:100vw;
  margin-top:var(--s-group);margin-bottom:var(--s-group);
}
/* Section rules are for separating sections. Inside a plate the frame already
   does that job, and a hairline floating over footage reads as damage. */
.plate .sec,.plate-body h2,.plate-body .sec-head{border:0}
.plate-body > :first-child{margin-top:0}

/* ── The gauntlet ─────────────────────────────────────────────────────────
   Four climates, one runner, pinned to the screen while you scroll through
   them.

   Everything here is full-bleed and edge to edge, because the point of the
   section is that the world changes around a number that is not changing for
   any reason you can see. A card with a picture in it would not do that; the
   scene has to be the whole screen or the effect is just a slideshow.

   Each climate carries its own palette on the container, and every colour
   below reads from those variables — so a scene change is one class swap and
   the whole screen, including the number and the rules, moves with it. */
.gauntlet{
  position:relative;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  width:100vw;max-width:100vw;
  margin-top:var(--s-group);margin-bottom:var(--s-group);
  /* One viewport of pinning per scene, plus one to read the last on. */
  height:500vh;
}
.g-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--g-bg,#101F35);color:var(--g-ink,#F0EEE8);
  transition:background-color 1.1s ease,color 1.1s ease;
}
/* Scenes stack; only the current one is at full strength. */
.g-scene{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.1s ease,transform 1.4s ease;
  transform:scale(1.06);
}
.g-scene.on{opacity:1;transform:scale(1)}
.g-scene img,.g-scene video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* Without footage a scene is still a scene: a field of its own climate colour
   rather than a hole in the page. */
.g-scene{background:var(--g-bg,#101F35)}
.g-scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,14,24,.30) 0%,rgba(8,14,24,.46) 46%,rgba(8,14,24,.82) 100%);
}
.g-face{
  position:relative;z-index:2;height:100%;
  max-width:var(--measure,68ch);margin:0 auto;
  padding:0 20px calc(env(safe-area-inset-bottom,0px) + 40px);
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#F0EEE8;
}
.g-where{
  font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(240,238,232,.62);
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.g-place{color:#F0EEE8}
.g-cond{font-variant-numeric:tabular-nums;text-align:right}
.g-pace{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(72px,19vw,170px);line-height:.9;letter-spacing:-.055em;
  margin:14px 0 0;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.g-pace small{
  display:block;font-family:var(--font-ui);font-weight:700;font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;
  color:rgba(240,238,232,.62);margin-top:12px;
}
.g-cost{
  margin-top:16px;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-accent,#F0EEE8);font-variant-numeric:tabular-nums;
  min-height:1.2em;
}
.g-line{margin:18px 0 0;font-size:17px;line-height:1.45;max-width:27em;color:rgba(240,238,232,.9)}
/* Four ticks, one per scene, so you can see how far through the world you are
   and that there is an end to it. */
.g-ticks{
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(240,238,232,.2);
  display:flex;gap:8px;align-items:center;
}
.g-tick{
  flex:1;height:3px;border-radius:2px;background:rgba(240,238,232,.2);
  overflow:hidden;
}
.g-tick i{display:block;height:100%;width:0;background:#F0EEE8;transition:width .4s linear}
.g-tick.done i{width:100%}
@media (min-width:900px){
  .g-face{padding-bottom:64px;max-width:none;padding-left:6vw;padding-right:6vw}
  .g-line{font-size:20px;max-width:24em}
  .g-where{font-size:11px}
}
/* No pinning, no cross-fades, no scroll hijack. The four scenes become four
   stacked panels you can read straight down — which is what the section was
   always saying anyway. */
@media (prefers-reduced-motion:reduce){
  .gauntlet{height:auto}
  .g-sticky{position:static;height:auto}
  .g-scene{
    position:relative;opacity:1;transform:none;transition:none;
    min-height:70vh;
  }
  .g-scene .g-face{position:absolute;inset:0}
}