/* =====================================================================
   Commuty marketing site
   Art direction: TRANSIT DIAGRAM, WITH THE LIGHTS ON.
   Flat high-chroma grounds, thick strokes, enormous type, a route line
   as the organising system. Seven stops on one journey.

   Two-colour discipline (Schiphol, Total Design 1967):
     emerald  moves you ALONG the route  - corridor, origin, primary action
     coral    marks the TERMINUS and the BOUNDARIES - pin, cap, limits
   Never swapped. No third hue.

   No inline styles anywhere: the production CSP has no 'unsafe-inline',
   so style="" fails silently. Stagger indices live in .i1 .. .i4 below.
   ===================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* palette, light */
  --paper:#FBFAF6;
  --surface:#FFFFFF;
  --surface-muted:#F4F2EC;
  --hairline:#E7E4DB;
  --ink:#15201C;
  --ink-muted:#5C6660;
  --primary:#0E9F6E;
  --primary-text:#0B8259;
  --primary-tint:#E7F6EF;
  --accent:#FF6A4D;
  --accent-tint:#FFECE6;

  /* the coral slab and its legible marker shade */
  --accentbg:#FFECE6;
  --accentbg-on:#15201C;
  --accentbg-mark:#B33A22;

  /* type scale. 13 / 15 / 17 / 21 / 28 / 40 / 64 / 96 / 132.
     16, 18, 19, 20, 22 and 23 do not exist on this page. */
  --t13:0.8125rem;
  --t15:0.9375rem;
  --t17:1.0625rem;
  --t21:1.3125rem;
  --t28:1.75rem;
  --t40:2.5rem;
  --t64:4rem;
  --t96:6rem;
  --t132:8.25rem;

  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-text:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  --measure:32.5rem;          /* renders at 62 characters at 17px, measured */
  --shell:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr-h:4.5rem;             /* sticky bar height, drives both scroll offsets */
  --dur:200ms;                /* entrance cap for an impatient reader */
  --stripe:12px;              /* 472 / 236 / 118 halving, see breakpoints */

  /* consumed by the inlined route artwork, the names the asset ships with */
  --route-road:#0E9F6E;
  --route-ghost:#E4E0D4;
  --route-paper:#FBFAF6;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#070C0A;
    --surface:#141C19;
    --surface-muted:#101816;
    --hairline:#26302B;
    --ink:#F2F5F2;
    --ink-muted:#9AA7A0;
    --primary:#22C08A;
    --primary-text:#22C08A;
    --primary-tint:#13291F;
    --accent:#FF7D62;
    --accent-tint:#2A1712;
    --accentbg:#2A1712;
    --accentbg-on:#F2F5F2;
    --accentbg-mark:#FF7D62;
    --route-road:#22C08A;
    --route-ghost:#1E2A25;
    --route-paper:#0C1210;
  }
}

/* ------------------------------------------------- 2. GROUNDS, ONE PER STOP
   Every neighbouring pair clears 3:1 luminance contrast. Measured, light:
     paper  <-> ink       16.02:1
     paper  <-> emerald    3.24:1
     ink    <-> emerald    4.94:1
     ink    <-> coral slab 14.65:1                                        */
.stop--paper{
  --ground:#FBFAF6; --on:#15201C; --on-soft:#5C6660;
  --panel:#FFFFFF; --panel-line:#E7E4DB; --panel-on:#15201C;
  --rail:#0E9F6E; --rail-on:#15201C;
  --bound:#B33A22; --linkc:#0B8259;
  --panel-soft:#5C6660; --panel-bound:#B33A22;
  --sheen:rgb(255 255 255/.72); --shadow:19 32 25;
}
.stop--ink{
  --ground:#15201C; --on:#F2F5F2; --on-soft:#9AA7A0;
  --panel:#1A2622; --panel-line:#2E3A34; --panel-on:#F2F5F2;
  --rail:#0E9F6E; --rail-on:#15201C;
  --bound:#FF6A4D; --linkc:#22C08A;
  --panel-soft:#9AA7A0; --panel-bound:#FF6A4D;
  --sheen:rgb(255 255 255/.16); --shadow:0 0 0;
}
.stop--emerald{
  --ground:#0E9F6E; --on:#15201C; --on-soft:#15201C;
  --panel:#FBFAF6; --panel-line:rgb(21 32 28/.20); --panel-on:#15201C;
  --rail:#15201C; --rail-on:#FBFAF6;
  --bound:#15201C; --linkc:#15201C;
  --panel-soft:#4A5650; --panel-bound:#B33A22;
  --sheen:rgb(255 255 255/.55); --shadow:6 42 28;
}
@media (prefers-color-scheme:dark){
  .stop--paper{
    --ground:#070C0A; --on:#F2F5F2; --on-soft:#9AA7A0;
    --panel:#141C19; --panel-line:#26302B; --panel-on:#F2F5F2;
    --rail:#22C08A; --rail-on:#04150E;
    --bound:#FF7D62; --linkc:#22C08A;
    --panel-soft:#9AA7A0; --panel-bound:#FF7D62;
    --sheen:rgb(255 255 255/.13); --shadow:0 0 0;
  }
  /* The ink ground is the lighter of the two dark bands, not a second black.
     Paper #070C0A against ink #263B36 is 1.65:1, which is what makes the band
     edge visible at all: the alternating grounds are the organising device of
     the whole page, and two near-identical darks read as one ground with a
     line on it rather than as two stops.
     The ground has to carry that separation because paper cannot. Paper sits
     at 0.0044 relative luminance, so driving it all the way to pure black
     buys 8% where the band needs 40%.
     Measured on this ground: on 10.86:1, on-soft 4.77:1, bound 4.75:1, linkc
     5.10:1, each AA at the sizes it is used at. The panel sits above the
     ground rather than just above black, so its muted ink and its coral are
     lifted to clear 4.5 there too, 4.69:1 and 4.60:1 on #2E4640. */
  .stop--ink{
    --ground:#263B36; --on:#F2F5F2; --on-soft:#9AA7A0;
    --panel:#2E4640; --panel-line:#41584F; --panel-on:#F2F5F2;
    --rail:#22C08A; --rail-on:#04150E;
    --bound:#FF7D62; --linkc:#22C08A;
    --panel-soft:#A7B3AD; --panel-bound:#FF9078;
    --sheen:rgb(255 255 255/.14); --shadow:0 0 0;
  }
  /* two dark grounds cannot be 3:1 apart and both stay dark, so in dark mode
     every stop edge is also drawn: a 3px line in the route colour, 8.42:1 on
     the darkest ground. The emerald stops carry the luminance jump on their
     own, 5.82:1 over paper and 3.52:1 over ink. */
  .stop.stop--paper,.stop.stop--ink{border-top:3px solid #22C08A}
  .stop--emerald{
    --ground:#0E9F6E; --on:#04150E; --on-soft:#04150E;
    --panel:#08150F; --panel-line:rgb(4 21 14/.34); --panel-on:#F2F5F2;
    --rail:#04150E; --rail-on:#22C08A;
    --bound:#04150E; --linkc:#04150E;
    --panel-soft:#9AA7A0; --panel-bound:#FF7D62;
    --sheen:rgb(255 255 255/.45); --shadow:0 0 0;
  }
}

/* --------------------------------------------------------------- 3. BASE */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--hdr-h);
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--t17)/1.55 var(--font-text);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  timeline-scope:--tl-how,--tl-costs,--tl-safety,--tl-questions;
}

img,svg{display:block;max-width:100%}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:600}
a{color:inherit}

::selection{background:var(--primary);color:#15201C}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);
  padding:14px 20px;border-radius:0 0 12px 0;
  font-size:var(--t15);font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* stagger indices. style="--i:3" is blocked by the CSP, so they live here. */
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}

/* ------------------------------------------------------------- 4. MOTION
   Safety rules, all four honoured below:
   - the hidden state exists ONLY inside a `from` keyframe
   - no animation-duration on anything scroll-driven
   - content reveals use view(), never scroll()
   - guarded by prefers-reduced-motion AND @supports, so Firefox and every
     other engine without animation-timeline gets a complete static page  */

@keyframes rise-in{from{opacity:0;translate:0 12px}}
@keyframes nudge{from{translate:0 10px}}
@keyframes route-draw{from{stroke-dashoffset:100}}
@keyframes route-ride{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes grow{from{scale:0 1}}
@keyframes spy{0%,100%{scale:0 1}40%,60%{scale:1 1}}
@keyframes sweep{to{transform:translateX(430%) rotate(10deg)}}
@keyframes bloom-in{from{opacity:0;scale:.9}}
/* the head paints nothing at exactly -100, so the terminus takes over there */
@keyframes arrive{from{opacity:0}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* cards: opacity plus travel */
    .reveal{
      animation:rise-in linear both;
      animation-timeline:view();
      animation-range:entry calc(4% + var(--i,0) * 5%) entry calc(52% + var(--i,0) * 5%);
    }
    /* body copy: the safest tier. Translate only, so the worst possible
       failure is "it did not move", never "the words are gone". */
    .rise{
      animation:nudge linear both;
      animation-timeline:view();
      animation-range:entry calc(4% + var(--i,0) * 5%) entry calc(50% + var(--i,0) * 5%);
    }
  }
}

/* scroll progress. Decoration only, so scroll() is allowed here. */
.progress{
  position:fixed;inset:0 0 auto;height:4px;z-index:60;display:none;
  background:var(--primary);transform-origin:0 50%;
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress{display:block;animation:grow linear both;animation-timeline:scroll(root block)}
  }
}

/* --------------------------------------------------------- 5. THE HEADER */
.hdr{position:sticky;top:0;z-index:50;container-type:scroll-state}
.hdr__bar{
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  border-bottom:2px solid transparent;
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease);
}
.hdr__in{
  display:flex;align-items:center;gap:20px;
  max-width:var(--shell);margin:0 auto;
  padding:12px clamp(20px,5vw,64px);
}
@supports (backdrop-filter:blur(1px)){
  .hdr__bar{backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6)}
}
@supports not (backdrop-filter:blur(1px)){
  .hdr__bar{background:var(--paper)}
}
@supports (container-type:scroll-state){
  @container scroll-state(stuck:top){
    .hdr__bar{border-bottom-color:var(--primary);box-shadow:0 8px 26px rgb(19 32 25/.10)}
  }
}
.brand{display:block;line-height:0;flex:0 0 auto}
.brand img{height:26px;width:auto}

/* The bar wraps rather than scrolls. A nav that overflows horizontally with
   its scrollbar hidden gives a phone no affordance at all: the items past the
   fold are simply not there. Wrapping keeps every item painted and hittable,
   and costs one row of header height, which --hdr-h below pays for. */
.nav{
  display:flex;gap:clamp(16px,2.4vw,30px);margin-left:auto;
  flex-wrap:wrap;
}
.nav a{white-space:nowrap}
@media (max-width:719px){
  .brand img{height:22px}
  .nav__no{display:none}
  /* beside the wordmark the four labels get 186px for 340px of text at 390
     wide, so the nav takes a full-width row under it instead. Header 85px. */
  .hdr__in{flex-wrap:wrap;row-gap:4px;padding-bottom:8px}
  .nav{flex:1 0 100%;margin-left:0;gap:2px 18px}
  :root{--hdr-h:5.75rem}
}
/* Under 440 the four labels do not fit on one row either (320 has 280px for
   340px of text), so rather than let them wrap wherever they land, they go to
   a fixed 2x2 block. The point is a header of one known height: --hdr-h is
   what scroll-padding and scroll-margin are set from, and a header that is
   sometimes one row and sometimes two would leave the anchored heading under
   the bar at whichever width guessed wrong. Measured header 125px at 320, 360
   and 390 alike. */
@media (max-width:439px){
  .nav{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:2px 20px}
  :root{--hdr-h:8.25rem}
}
.nav a{
  position:relative;text-decoration:none;color:var(--ink);
  font-size:var(--t15);font-weight:600;letter-spacing:-.005em;
  padding:6px 0 8px;display:inline-flex;align-items:baseline;gap:7px;
}
/* Hanken Grotesk's axis stops at 600 and body sets font-synthesis-weight:none,
   so 600 is what a heavier request here would paint anyway. */
.nav__no{
  font-size:var(--t13);font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--primary-text);
}
.nav a::after{
  content:"";position:absolute;inset:auto 0 0;height:3px;
  background:var(--primary);transform-origin:0 50%;scale:0 1;
}
.nav a:hover::after,.nav a:focus-visible::after{scale:1 1}

/* No-JS scrollspy. Each stop owns a view-timeline; timeline-scope on <body>
   hoists the names so the nav underline can ride its own section. */
#how{view-timeline:--tl-how block}
#costs{view-timeline:--tl-costs block}
#safety{view-timeline:--tl-safety block}
#questions{view-timeline:--tl-questions block}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:--x) and (timeline-scope:--x){
    .nav a[href="#how"]::after{animation:spy linear both;animation-timeline:--tl-how;animation-range:cover}
    .nav a[href="#costs"]::after{animation:spy linear both;animation-timeline:--tl-costs;animation-range:cover}
    .nav a[href="#safety"]::after{animation:spy linear both;animation-timeline:--tl-safety;animation-range:cover}
    .nav a[href="#questions"]::after{animation:spy linear both;animation-timeline:--tl-questions;animation-range:cover}
  }
}

/* --------------------------------------------------- 6. SHELL AND STOPS */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:clamp(20px,5vw,64px)}

.stop,.hero{background:var(--ground);color:var(--on);position:relative}
.stop{scroll-margin-top:var(--hdr-h)}

/* deliberately uneven: every stop sets its own top and bottom pad. */
.stop{padding-block:var(--padt) var(--padb)}
#rules{--padt:clamp(52px,7vw,96px);--padb:clamp(60px,8vw,112px)}
#how{--padt:clamp(60px,9vw,124px);--padb:clamp(56px,8vw,108px)}
#costs{--padt:clamp(60px,9vw,120px);--padb:clamp(68px,10vw,140px)}
#safety{--padt:clamp(52px,7vw,96px);--padb:clamp(52px,7vw,96px)}
#limits{--padt:clamp(48px,6vw,88px);--padb:clamp(56px,7vw,100px)}
#questions{--padt:clamp(60px,8vw,112px);--padb:clamp(56px,7vw,100px)}
#status{--padt:clamp(52px,7vw,100px);--padb:clamp(60px,8vw,116px)}

.stop__inner{display:grid;grid-template-columns:minmax(0,1fr)}
.stop__body{min-width:0}

/* the spine: one continuous rail, running the full height of every stop,
   with a numbered node where the stop begins */
.rail{position:relative;height:64px;margin-bottom:26px}
.rail::before{content:"";position:absolute;left:0;right:0;top:28px;height:8px;background:var(--rail)}
.rail__node{
  position:absolute;left:0;top:0;width:64px;height:64px;border-radius:50%;
  background:var(--rail);color:var(--rail-on);
  display:grid;place-items:center;
  font:800 var(--t21)/1 var(--font-display);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.rail--bound{--rail:#FF6A4D;--rail-on:#15201C}
/* the line ends at the terminus, it does not run on past it */
.rail--terminus::before{right:auto;width:180px}
@media (prefers-color-scheme:dark){.rail--bound{--rail:#FF7D62;--rail-on:#15201C}}

@media (min-width:1040px){
  .stop__inner{grid-template-columns:104px minmax(0,1fr);column-gap:44px}
  .rail{height:auto;margin:0}
  .rail::before{
    left:32px;right:auto;width:8px;height:auto;
    top:calc(-1 * var(--padt));bottom:calc(-1 * var(--padb));
  }
  .rail__node{left:4px;top:-4px}
  .rail--terminus::before{right:auto;width:8px;bottom:calc(100% - 56px)}
}

/* --------------------------------------------------------------- 7. TYPE */
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:800;margin:0;
  letter-spacing:-.028em;line-height:.97;text-wrap:balance;
}
h1{
  font-size:clamp(3.5rem,10vw,var(--t132));
  line-height:.9;max-width:15ch;
  --tr:clamp(0,calc((100vw - 400px) / 1000px),1);
  letter-spacing:calc(-.018em - .028em * var(--tr));
}
h2{
  font-size:clamp(var(--t40),6.7vw,var(--t96));
  max-width:16ch;margin-bottom:clamp(28px,4vw,52px);
  --tr:clamp(0,calc((100vw - 400px) / 1000px),1);
  letter-spacing:calc(-.018em - .026em * var(--tr));
}
h3{font-size:var(--t28);line-height:1.06}
h4{font-size:var(--t21);line-height:1.15;letter-spacing:-.018em}

.eyebrow{
  font-family:var(--font-text);font-size:var(--t13);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-soft);
  display:flex;align-items:center;gap:10px;
  margin-bottom:clamp(14px,2vw,22px);
}
.eyebrow--bound{color:var(--bound)}
.stop--emerald .eyebrow:not(.eyebrow--bound){color:var(--on)}

.pip{width:14px;height:14px;border-radius:50%;flex:0 0 auto;background:var(--primary)}
.pip--bound{background:var(--bound);border-radius:3px}
.stop--emerald .pip:not(.pip--bound){background:var(--ink)}

.caption,.figure__cap{font-size:var(--t15);color:var(--on-soft);letter-spacing:.005em}
.lede{font-size:var(--t21);line-height:1.45;max-width:var(--measure);text-wrap:pretty}

/* gradient text, used exactly once. The AA-checked solid colour is declared
   first and both gradient stops clear 3:1 at display size on paper:
   #0B8259 4.62:1, #0E9F6E 3.24:1.
   DO NOT REUSE THIS CLASS BELOW LARGE-TEXT SIZE. The midpoint #0E9F6E is
   3.24:1, which is a pass only under the large-text threshold, and the only
   element carrying .gt is inside an h1 running 96 to 132px. At normal body
   size the same colour is a 4.5:1 failure. */
.gt{color:var(--primary-text)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .gt{
    background:linear-gradient(96deg,var(--primary-text),var(--primary) 52%,var(--primary-text));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
@media (forced-colors:active){.gt{background:none;color:CanvasText}}

/* the big numerals. tabular so columns of figures line up. */
.num{
  font-family:var(--font-display);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:.88;
  display:inline-block;color:var(--primary-text);
}
.stop--emerald .num,.panel .num{color:var(--primary-text)}
.stop--ink .num{color:var(--linkc)}
.num--xl{font-size:clamp(var(--t64),9.5vw,var(--t96))}
.num--l{font-size:clamp(var(--t40),5.6vw,var(--t64))}
.num--m{font-size:clamp(var(--t40),5vw,var(--t64))}
.num--s{font-size:var(--t40)}

/* --------------------------------------------------------- 8. THE ROUTE */
.hero{padding-top:clamp(30px,5vw,58px);overflow:clip}
.hero__bloom{
  position:absolute;inset:auto -10% -14% -10%;height:78%;pointer-events:none;z-index:0;
  background:
    radial-gradient(44% 64% at 18% 76%,color-mix(in srgb,var(--primary) 36%,transparent),transparent 70%),
    radial-gradient(38% 58% at 86% 34%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%);
  filter:blur(4px);
}
.hero__copy{position:relative;z-index:1}
.eyebrow--hero{color:var(--primary-text)}
.hero__foot{display:grid;gap:clamp(24px,3vw,34px);margin-top:clamp(20px,2.6vw,30px)}
.hero__lede{
  font-size:var(--t21);line-height:1.42;max-width:var(--measure);text-wrap:pretty;
}
.hero__lede b{font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero__strap{
  font-size:var(--t15);color:var(--on-soft);max-width:44ch;
  margin-top:clamp(18px,2.2vw,24px);
  border-left:4px solid var(--primary);padding-left:14px;
}
@media (max-width:519px){
  .hero__cta{display:grid;max-width:22rem}
}
@media (min-width:1040px){
  .hero__foot{grid-template-columns:minmax(0,1fr) minmax(0,25rem);gap:0 clamp(32px,4vw,64px);align-items:start}
  .hero__strap{margin-top:20px}
}

.routeband{position:relative;z-index:1;margin-top:clamp(26px,3.4vw,44px);padding-block:26px 32px}
/* 1440/440 = 3.27, inside the 1.29 to 3.70 window the artwork is safe to crop
   in. The aspect is fixed, so the slice crop is a constant 180 viewBox units
   top and bottom at every width. That is what keeps the two labels pinned to
   the origin and the terminus without any script. */
.routeband__inner{position:relative;width:100%;aspect-ratio:1440 / 440}
.routesvg{position:absolute;inset:0;width:100%;height:100%}

/* The artwork carries its colours in style="" so it also works standalone.
   Those attributes are dead under our CSP (measured: stroke resolves to none),
   so the inlined copy has them stripped and the same custom properties are
   applied from here. Geometry, pathLength, the 0 101 head dash and
   .route__dest are exactly as shipped. */
.route__ghost{stroke:var(--route-ghost)}
.route__road{stroke:var(--route-road)}
.route__stop{fill:var(--route-paper);stroke:var(--route-road)}
.route__origin{fill:var(--route-road)}
.route__head{stroke:#FF6A4D}
.route__dest{fill:#FF6A4D}
.route__dest-core{fill:var(--route-paper)}

/* The artwork's scale is locked to viewport width by preserveAspectRatio
   slice, so on a phone the shipped 24 unit road renders at 6.5px. These
   overrides thicken it in viewBox units, keeping the mark's proportions
   (origin 20/24, stop 16 with a 9 ring, terminus 25 with a 10 core) and
   staying inside the visible y band of 180 to 620 that the 1440/440 crop
   leaves: at road 42 the terminus tops out at 186 and the origin bottoms at
   605. */
@media (max-width:1023px){
  .route__ghost,.route__road{stroke-width:32}
  .route__stop{r:21px;stroke-width:12}
  .route__origin{r:27px}
  .route__head{stroke-width:67}
  .route__dest{r:33px}
  .route__dest-core{r:13px}
}
@media (max-width:719px){
  .route__ghost,.route__road{stroke-width:42}
  .route__stop{r:28px;stroke-width:16}
  .route__origin{r:35px}
  .route__head{stroke-width:88}
  .route__dest{r:44px}
  .route__dest-core{r:18px}
}

/* The finished route is the base state. The load animation draws it in.
   pathLength="100" makes the dash values literal percentages, and there is
   no vector-effect on these paths: the two together break normalisation. */
@media (prefers-reduced-motion:no-preference){
  /* road and travelling head share one timing, so the coral pin sits at the
     drawing head at every frame with no syncing code */
  .route__road{animation:route-draw 760ms var(--ease) both}
  .route__head{animation:route-ride 760ms var(--ease) both}
  .route__dest,.route__dest-core{animation:arrive 1ms linear 750ms both}
  .hero__bloom{animation:bloom-in 600ms var(--ease) both}
  .hero__copy > .eyebrow,.hero__copy > h1,.hero__foot > *{animation:rise-in var(--dur) var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
}

/* 600 for the same reason as .nav__no: it is the top of the text axis. */
.routelabel{
  position:absolute;font-size:var(--t13);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on);
  white-space:nowrap;
}
.routelabel--a{left:0;top:100%;padding:10px 0 0 clamp(20px,5vw,64px)}
.routelabel--b{right:0;bottom:100%;padding:0 clamp(20px,5vw,64px) 10px 0;text-align:right}
@media (min-width:720px){
  /* both labels hang below their node. `top` is a percentage of the band, so
     it tracks the node at every width; a transform percentage would not, it
     resolves against the label's own box. */
  .routelabel--a{left:16%;top:calc(88.6% + 7%);transform:translate(-16px,0);padding:0}
  .routelabel--b{left:84%;right:auto;top:calc(11.4% + 7%);bottom:auto;transform:translate(-50%,0);padding:0}
}

/* ------------------------------------------------------------ 9. BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-text);font-size:var(--t17);font-weight:600;
  letter-spacing:-.005em;text-decoration:none;
  padding:15px 26px;border-radius:999px;border:2px solid transparent;
  transition:transform 140ms var(--ease),box-shadow 140ms var(--ease),background-color 140ms var(--ease);
}
/* ink on emerald is 4.94:1. White on emerald is 3.39:1 and fails, so it is
   never used. */
.btn--primary{
  color:#15201C;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 78%,#fff),var(--primary));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.55),0 8px 20px color-mix(in srgb,var(--primary) 34%,transparent);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255/.7),0 12px 26px color-mix(in srgb,var(--primary) 46%,transparent)}
.btn--ghost{color:var(--on);border-color:color-mix(in srgb,var(--on) 34%,transparent);background:transparent}
.btn--ghost:hover{border-color:var(--on);transform:translateY(-2px)}

/* --------------------------------------------------- 10. STOP 01, PLATES */
.plates{
  display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,27rem),1fr));
}
.plate{
  position:relative;overflow:hidden;
  background:var(--panel);color:var(--panel-on);
  border:1px solid var(--panel-line);border-radius:20px;
  padding:clamp(24px,2.6vw,34px);
  border-top:8px solid var(--primary);
  box-shadow:0 1px 2px rgb(var(--shadow)/.05),0 10px 26px rgb(var(--shadow)/.06);
  transition:transform 160ms var(--ease),box-shadow 160ms var(--ease);
}
.plate h3{margin-bottom:14px}
.plate p{max-width:var(--measure);text-wrap:pretty}
.plate:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgb(var(--shadow)/.06),0 20px 40px rgb(var(--shadow)/.12)}
.plates:has(.plate:hover) .plate:not(:hover){opacity:.66;transition:opacity 160ms var(--ease)}

/* one-shot specular sweep, transform driven so it composites. */
.plate::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-45%;width:42%;
  pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(100deg,transparent,var(--sheen),transparent);
  transform:translateX(-170%) rotate(10deg);
}
@media (prefers-reduced-motion:no-preference){
  .plate:hover::after{animation:sweep 620ms var(--ease) both}
}
.pull{
  font-family:var(--font-display);font-weight:800;font-size:var(--t28);
  letter-spacing:-.03em;line-height:1;color:var(--linkc);
}

/* ------------------------------------------- 11. STOP 02, STRIP DIAGRAM */
.tracks{display:grid;gap:clamp(38px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
.track__title{
  font-size:var(--t28);margin-bottom:26px;
  display:inline-flex;align-items:center;gap:12px;
  background:var(--primary);color:#15201C;
  padding:10px 20px 12px;border-radius:999px;
}
/* Same diagram language as assets/route-hero.svg, scaled from its road width
   of 24 to a 10px spine: origin 40 wide, intermediate stop 32 with a 9 ring,
   terminus 50 with a 20 core. Driven from CSS rather than route-spine.svg
   because these rows are of unequal height, so a uniformly scaled file could
   not put its nodes on them. */
.strip{position:relative;padding-left:60px}
.strip::before{
  content:"";position:absolute;left:19px;top:14px;bottom:14px;width:10px;
  background:var(--route-road);
}
.strip__stop{position:relative;padding-bottom:clamp(28px,3.4vw,40px)}
.strip__stop:last-child{padding-bottom:0}
/* intermediate stop: a ring with a knockout */
.strip__stop::before{
  content:"";position:absolute;left:-44px;top:5px;
  width:17px;height:17px;border-radius:50%;
  background:var(--route-paper);border:4px solid var(--route-road);
}
/* endpoints outrank it: filled, and larger */
.strip__stop--end::before{
  width:17px;height:17px;left:-44px;top:5px;
  background:var(--route-road);border-color:var(--route-road);
}
.strip__stop:last-child::before{
  width:21px;height:21px;left:-46px;top:3px;
  background:#FF6A4D;border-color:#FF6A4D;
}
.strip__stop:last-child::after{
  content:"";position:absolute;left:-39px;top:10px;
  width:8px;height:8px;border-radius:50%;background:var(--route-paper);
}
.strip__n{
  font-family:var(--font-display);font-weight:800;font-size:var(--t13);
  font-variant-numeric:tabular-nums;letter-spacing:.1em;
  color:var(--on-soft);margin-bottom:6px;
}
.strip__stop h4{margin-bottom:8px}
.strip__stop p{max-width:var(--measure);text-wrap:pretty}

/* ------------------------------------------------- 12. STOP 03, THE MONEY */
.money{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr))}
.panel{
  --bound:var(--panel-bound); --on-soft:var(--panel-soft);
  background:var(--panel);color:var(--panel-on);
  border:1px solid var(--panel-line);border-radius:22px;
  padding:clamp(26px,3vw,40px);
  box-shadow:0 2px 6px rgb(var(--shadow)/.07),0 18px 40px rgb(var(--shadow)/.10);
}
.panel h3{margin-bottom:18px;max-width:20ch}
.panel__foot{font-size:var(--t15);color:var(--panel-soft);max-width:var(--measure);margin-top:20px;text-wrap:pretty}
/* the two facts a rider wants, stacked, with the sentence demoted to caption */
.figure{margin-top:18px}
.figure .num{display:block;line-height:.9;margin:10px 0 6px}
.figure__cap{display:block;max-width:32ch}
.statement{
  font-size:clamp(var(--t28),4.6vw,var(--t64));line-height:.96;max-width:12ch;
  letter-spacing:-.035em;
}
.panel--statement{display:flex;flex-direction:column;justify-content:center}
.panel--statement h3{margin-bottom:24px}

.cap{
  margin-top:clamp(20px,2.6vw,28px);
  background:var(--panel);color:var(--panel-on);
  border:1px solid var(--panel-line);border-radius:22px;
  border-left:10px solid var(--accent);
  padding:clamp(26px,3vw,40px);
  box-shadow:0 2px 6px rgb(var(--shadow)/.07),0 18px 40px rgb(var(--shadow)/.10);
  --bound:var(--panel-bound);--on-soft:var(--panel-soft);
}
.cap h3{margin-bottom:22px;max-width:24ch}

.thesis{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(var(--t40),8.6vw,var(--t96));
  line-height:.92;letter-spacing:-.042em;
  margin:clamp(44px,6vw,84px) 0 clamp(40px,5vw,72px);
  max-width:13ch;text-wrap:balance;color:var(--on);
}

.ledger-block h3{margin-bottom:22px}
.ledger{display:grid;gap:0}
.ledger__row{
  display:grid;gap:6px 32px;align-items:start;
  padding:clamp(18px,2.2vw,26px) 0;
  border-top:2px solid color-mix(in srgb,var(--on) 26%,transparent);
}
.ledger__row:last-child{border-bottom:2px solid color-mix(in srgb,var(--on) 26%,transparent)}
.ledger__cond{
  font-family:var(--font-display);font-weight:800;font-size:var(--t28);
  line-height:1.08;letter-spacing:-.028em;
}
.ledger__cond .num{color:var(--on);display:block;margin-block:2px;white-space:nowrap}
.ledger__out{max-width:var(--measure);text-wrap:pretty}
.ledger__out b{font-weight:600}
@media (min-width:900px){
  .ledger__row{grid-template-columns:minmax(0,19rem) minmax(0,1fr)}
}

/* ------------------------------------------------ 13. STOP 04, THE ROWS */
.trust{
  display:grid;gap:12px 44px;
  padding-block:clamp(26px,3vw,36px);
  border-top:2px solid var(--hairline);
}
.trust:last-child{border-bottom:2px solid var(--hairline)}
.trust__title{font-size:var(--t28);max-width:14ch}
.rows{display:grid;gap:12px;max-width:var(--measure)}
.row{text-wrap:pretty}
.row b{font-weight:600}
.rows .row{
  padding-left:20px;position:relative;
}
.rows .row::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:2px;background:var(--primary);
}
.rows--bound .row::before{background:var(--bound)}
.row--figure{font-size:var(--t21);line-height:1.45}
.row--figure .num{display:block;line-height:.9;margin:6px 0 2px}
@media (min-width:1000px){
  .trust{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}
}

/* ---------------------------------------------- 14. STOP 05, THE LIMITS
   A list of limitations is the most trust-building thing on the page, so
   it gets a full coral slab of its own. Ink on #FFECE6 is 14.65:1. */
.stop--bound h2{max-width:14ch}
.limits{
  background:var(--accentbg);color:var(--accentbg-on);
  border-radius:24px;
  padding:clamp(26px,3.4vw,48px);
  display:grid;gap:clamp(16px,1.8vw,22px);
  box-shadow:0 20px 50px rgb(0 0 0/.28);
}
.limits__row{
  position:relative;padding-left:36px;
  font-size:var(--t21);line-height:1.42;
  max-width:52rem;text-wrap:pretty;
}
.limits__row::before{
  content:"";position:absolute;left:0;top:.5em;
  width:18px;height:6px;border-radius:2px;background:var(--accentbg-mark);
}
.limits__row--lead{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(var(--t21),3.2vw,var(--t28));
  line-height:1.08;letter-spacing:-.028em;
}
.limits__row--lead::before{top:.42em;width:26px;height:8px}
.limits__row--age{
  font-size:var(--t21);line-height:1.55;
  padding-top:clamp(10px,1.4vw,16px);
  border-top:2px solid color-mix(in srgb,var(--accentbg-mark) 30%,transparent);
}
.limits__row--age .num{color:var(--accentbg-mark);line-height:1;margin-inline:6px 3px}
.limits__row--age::before{top:1.05em}
@media (max-width:719px){
  .limits__row{font-size:var(--t17)}
  .limits__row--age{font-size:var(--t21)}
}

/* ------------------------------------------------------ 15. STOP 06, FAQ */
.faq{display:grid;gap:12px;max-width:46rem}
.qa{
  background:var(--panel);border:1px solid var(--panel-line);
  border-radius:18px;overflow:hidden;
  border-left:6px solid var(--primary);
  transition:box-shadow 160ms var(--ease);
}
.qa:hover{box-shadow:0 10px 26px rgb(var(--shadow)/.09)}
.qa[open]{box-shadow:0 12px 34px rgb(var(--shadow)/.10)}
.qa summary{
  list-style:none;cursor:pointer;
  padding:clamp(20px,2.4vw,28px) clamp(52px,6vw,72px) clamp(20px,2.4vw,28px) clamp(20px,2.4vw,30px);
  position:relative;display:grid;gap:8px;
}
.qa summary::-webkit-details-marker{display:none}
.qa__q{
  font-family:var(--font-text);font-size:var(--t15);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-soft);
}
/* answer sentence one, bold, visible whether the panel is open or shut */
.qa__a1{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--t21);line-height:1.2;letter-spacing:-.022em;
  color:var(--on);text-wrap:pretty;
}
.qa summary::after{
  content:"";position:absolute;right:clamp(20px,2.4vw,28px);top:50%;
  width:18px;height:4px;background:var(--primary);
  transform:translateY(-50%);
}
.qa summary::before{
  content:"";position:absolute;right:calc(clamp(20px,2.4vw,28px) + 7px);top:50%;
  width:4px;height:18px;background:var(--primary);
  transform:translateY(-50%);transition:opacity 140ms var(--ease);
}
.qa[open] summary::before{opacity:0}
.qa[open] summary{padding-bottom:10px}
.qa__body{padding:0 clamp(20px,2.4vw,30px) clamp(22px,2.6vw,30px)}
.qa__body p{max-width:var(--measure);text-wrap:pretty;color:var(--on)}

/* ------------------------------------------------- 16. STOP 07, TERMINUS */
.terminus__h{max-width:10ch}
.terminus{display:grid;gap:clamp(26px,3.4vw,44px);align-items:start}
.terminus__copy .lede{max-width:var(--measure)}
.terminus__note{margin-top:20px;max-width:var(--measure);font-size:var(--t17)}
.slot{
  background:var(--panel);color:var(--panel-on);
  border:3px dashed var(--panel-line);border-radius:22px;
  padding:clamp(24px,3vw,36px);
  --on-soft:var(--panel-soft);
}
.slot__mark{width:52px;height:52px;color:var(--primary-text);margin-bottom:18px}
.slot__title{
  font-family:var(--font-display);font-weight:800;font-size:var(--t28);
  line-height:1.08;letter-spacing:-.028em;max-width:16ch;
}
.slot__note{margin-top:14px;font-size:var(--t15);color:var(--on-soft);max-width:42ch;text-wrap:pretty}
@media (min-width:1000px){
  .terminus{grid-template-columns:minmax(0,1fr) minmax(0,25rem)}
}

/* -------------------------------------------------------- 17. DIVIDERS
   Dutch emergency-services striping, Studio Dumbar 1993, revised 2019.
   40 degrees, never 45, and constant at every scale. Band widths follow the
   472/236/118 ratio, so they halve at each breakpoint down. Used twice on
   the whole page: entering the limits, and entering the terminus. */
.divider--striping{
  height:clamp(28px,4vw,52px);
  background:repeating-linear-gradient(40deg,
    var(--accent) 0 var(--stripe),
    var(--ink) var(--stripe) calc(var(--stripe) * 2));
}
@media (min-width:720px){:root{--stripe:24px}}
@media (min-width:1200px){:root{--stripe:48px}}

/* ------------------------------------------------------------ 17b. GRAIN
   assets/grain.svg, fixed and repeating so it never repaints on scroll. */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:url("/assets/grain.svg") repeat;
  opacity:.05;
}
@media (forced-colors:active){.grain{display:none}}

/* ---------------------------------------------------------- 18. FOOTER */
.site-footer{background:var(--ink);color:#F2F5F2;padding-block:clamp(44px,6vw,72px)}
@media (prefers-color-scheme:dark){.site-footer{background:#263B36}}
.site-footer__inner{display:grid;gap:clamp(28px,4vw,52px)}
.site-footer__logo{height:30px;width:auto}
.site-footer__privacy{margin-top:18px;font-size:var(--t15);color:#9AA7A0;max-width:34ch}
.site-footer__note{font-size:var(--t15);color:#9AA7A0;max-width:56ch;text-wrap:pretty}
.site-footer__reg{
  display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:20px;
  font-size:var(--t13);letter-spacing:.06em;text-transform:uppercase;color:#F2F5F2;
}
.site-footer__copy{margin-top:14px;font-size:var(--t13);color:#9AA7A0}
@media (min-width:900px){
  .site-footer__inner{grid-template-columns:minmax(0,1fr) minmax(0,32rem)}
}

/* -------------------------------------------------- 19. REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important;
  }
  .progress{display:none}
}

/* ---------------------------------------------------- 20. FORCED COLORS */
@media (forced-colors:active){
  .plate,.panel,.cap,.qa,.slot,.limits{border:1px solid CanvasText}
  .divider--striping{background:none;border-top:3px solid CanvasText}
  .rail::before,.strip::before{background:CanvasText}
}