/* ============================================================
   THE THRESHOLD — one line runs down the whole page, and the
   band the marker is standing in LIGHTS UP. The page ground
   itself never moves; a single illuminated section travels
   down with the reader.

   COLOUR MODEL
   --paper is constant. Each zone carries its own ground and
   text tokens which apply ONLY while it holds [data-lit] —
   set by JS on every element sharing that zone name, so
   nav+hero light as one band and close+footer as another.
   Nothing below hardcodes a ground-dependent colour: it reads
   --ground / --fg / --fg-soft / --fg-mute / --hair /
   --rule-off / --accent-on-ground.
   The drawn line is the exception — it spans every band at
   once, so it gets its own two-state pair (--line-off and
   --signal), verified >=3:1 against every ground on the page
   including the ink one.
   ============================================================ */

/* registered so the ground can be *transitioned*, not cut */
@property --ground            { syntax:"<color>"; inherits:true; initial-value:oklch(0.948 0.007 236); }
@property --fg                { syntax:"<color>"; inherits:true; initial-value:oklch(0.185 0.026 232); }
@property --fg-soft           { syntax:"<color>"; inherits:true; initial-value:oklch(0.335 0.024 232); }
@property --fg-mute           { syntax:"<color>"; inherits:true; initial-value:oklch(0.530 0.018 236); }
@property --hair              { syntax:"<color>"; inherits:true; initial-value:oklch(0.185 0.026 232 / 0.18); }
@property --rule-off          { syntax:"<color>"; inherits:true; initial-value:oklch(0.605 0.018 236); }
@property --accent-on-ground  { syntax:"<color>"; inherits:true; initial-value:oklch(0.525 0.212 27); }
@property --marker            { syntax:"<color>"; inherits:true; initial-value:oklch(0.505 0.205 27); }
@property --signal            { syntax:"<color>"; inherits:true; initial-value:oklch(0.505 0.205 27); }
@property --line-off          { syntax:"<color>"; inherits:true; initial-value:oklch(0.505 0.020 238); }

:root{
  /* ---- the page ground. constant. the bands move, not this ---- */
  --paper:      oklch(0.948 0.007 236);

  /* ---- fixed constants: these NEVER move with the zone ---- */
  --accent:     oklch(0.535 0.213 27);   /* solid CTA fill. never a ground. */
  --on-accent:  oklch(0.985 0.008 84);   /* text on a solid accent chip  */
  --plate-ink:  oklch(0.185 0.026 232);  /* letterbox behind photography */
  --on-plate:   oklch(0.938 0.005 232);  /* caption text on the plate    */

  /* ---- resting tokens: an unlit band, and everything that
     lives outside a band (skip link, the line's own box) ---- */
  --ground:oklch(0.948 0.007 236); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.512 0.019 238); --hair:oklch(0.185 0.026 232 / 0.19);
  --rule-off:oklch(0.590 0.019 238); --accent-on-ground:oklch(0.525 0.212 27);

  /* ---- the drawn line. It crosses every band at once, so it
     only ever has two states: light grounds, and the ink one. */
  --line-off:oklch(0.505 0.020 238);
  --signal:  oklch(0.505 0.205 27);
  --marker:  oklch(0.505 0.205 27);

  /* ---- pace of the band lighting ----
     Asymmetric on purpose. Colour arrives the moment you reach
     a section (fast, no delay); the section you are leaving
     lets go of its colour slowly behind you, so the two briefly
     overlap instead of snapping from one band to the next. */
  --zone-dur:   380ms;                       /* fading IN  */
  --zone-out:   900ms;                       /* fading OUT */
  --zone-lag:   0ms;
  --marker-dur: 300ms;
  --zone-ease:  cubic-bezier(.22,.61,.36,1); /* ease-out */

  /* geometry — the datum */
  --line-x: 26px;
  --pad: 20px;
  --rule: 2px;
  --line-end: 76px;
  --content-l: calc(var(--line-x) + 20px);

  --f-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (min-width:640px){ :root{ --line-x:64px; --pad:32px; --content-l:calc(var(--line-x) + 28px); } }
@media (min-width:1000px){ :root{ --line-x:min(33vw,500px); --pad:44px; --line-end:96px; } }
@media (min-width:1440px){ :root{ --pad:56px; } }

/* ============================================================
   THE BAND TABLE — the single source of truth.
   A band is unlit until the marker enters it, then it takes
   its own ground and its own text tokens. Only ONE band is
   lit at a time, so each colour is judged against the
   constant --paper it sits in, not against its neighbours.
   Every value is oklch; the cool grounds are the 232 hue
   family, the two warm ones its low-chroma warm counterpart.
   Verified against their own ground: --fg ≥10:1,
   --fg-soft ≥7:1, --fg-mute ≥4.7:1, --rule-off ≥3.3:1,
   --accent-on-ground ≥4.1:1.
   ============================================================ */

/* the resting state of every band */
[data-zone]{
  --ground:var(--paper); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.512 0.019 238); --hair:oklch(0.185 0.026 232 / 0.19);
  --rule-off:oklch(0.590 0.019 238); --accent-on-ground:oklch(0.525 0.212 27);
  background:var(--ground); color:var(--fg);
  /* the SLOW half: this rule is the destination when a band
     goes dark again, so it governs the fade OUT */
  transition:
    --ground           var(--zone-out) var(--zone-ease),
    --fg               var(--zone-out) var(--zone-ease),
    --fg-soft          var(--zone-out) var(--zone-ease),
    --fg-mute          var(--zone-out) var(--zone-ease),
    --hair             var(--zone-out) var(--zone-ease),
    --rule-off         var(--zone-out) var(--zone-ease),
    --accent-on-ground var(--zone-out) var(--zone-ease);
}
/* the FAST half: destination when a band lights, so colour is
   already there by the time the section is under you */
[data-zone][data-lit]{
  transition:
    --ground           var(--zone-dur) var(--zone-ease),
    --fg               var(--zone-dur) var(--zone-ease),
    --fg-soft          var(--zone-dur) var(--zone-ease),
    --fg-mute          var(--zone-dur) var(--zone-ease),
    --hair             var(--zone-dur) var(--zone-ease),
    --rule-off         var(--zone-dur) var(--zone-ease),
    --accent-on-ground var(--zone-dur) var(--zone-ease);
}

/* 01 nav + hero — the page opens white and clean */
[data-zone="open"][data-lit]{
  --ground:oklch(0.988 0.003 232); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.530 0.018 236); --hair:oklch(0.185 0.026 232 / 0.18);
  --rule-off:oklch(0.605 0.018 236); --accent-on-ground:oklch(0.535 0.213 27);
}
/* 02 what crosses it — the first cool draught */
[data-zone="unease"][data-lit]{
  --ground:oklch(0.912 0.018 243); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.492 0.019 240); --hair:oklch(0.185 0.026 232 / 0.20);
  --rule-off:oklch(0.572 0.020 240); --accent-on-ground:oklch(0.520 0.210 27);
}
/* 03 the line, named */
[data-zone="boundary"][data-lit]{
  --ground:oklch(0.855 0.022 239); --fg:oklch(0.178 0.026 232); --fg-soft:oklch(0.322 0.024 232);
  --fg-mute:oklch(0.450 0.020 238); --hair:oklch(0.178 0.026 232 / 0.22);
  --rule-off:oklch(0.532 0.022 238); --accent-on-ground:oklch(0.495 0.203 27);
}
/* 04 what we do */
[data-zone="descent"][data-lit]{
  --ground:oklch(0.800 0.026 236); --fg:oklch(0.170 0.026 232); --fg-soft:oklch(0.305 0.024 232);
  --fg-mute:oklch(0.408 0.022 236); --hair:oklch(0.170 0.026 232 / 0.24);
  --rule-off:oklch(0.490 0.024 236); --accent-on-ground:oklch(0.465 0.190 27);
}
/* 05 inside / outside — the one band that goes dark */
[data-zone="ink"][data-lit]{
  --ground:oklch(0.185 0.026 232); --fg:oklch(0.972 0.004 232); --fg-soft:oklch(0.845 0.012 232);
  --fg-mute:oklch(0.690 0.014 232); --hair:oklch(0.972 0.004 232 / 0.20);
  --rule-off:oklch(0.560 0.018 232); --accent-on-ground:oklch(0.635 0.200 27);
}
/* 06 how it works */
[data-zone="proof"][data-lit]{
  --ground:oklch(0.875 0.014 234); --fg:oklch(0.180 0.026 232); --fg-soft:oklch(0.325 0.024 232);
  --fg-mute:oklch(0.462 0.020 236); --hair:oklch(0.180 0.026 232 / 0.22);
  --rule-off:oklch(0.545 0.021 236); --accent-on-ground:oklch(0.500 0.205 27);
}
/* 07 why us — back into clean daylight */
[data-zone="record"][data-lit]{
  --ground:oklch(0.985 0.004 230); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.530 0.018 234); --hair:oklch(0.185 0.026 232 / 0.18);
  --rule-off:oklch(0.600 0.019 234); --accent-on-ground:oklch(0.535 0.213 27);
}
/* 08 pricing — near-neutral cool grey. Almost no chroma, so it
   reads as paper stock rather than as a colour: the one band
   where the page should look like a document, not a mood. */
[data-zone="terms"][data-lit]{
  --ground:oklch(0.872 0.011 248); --fg:oklch(0.180 0.026 232); --fg-soft:oklch(0.325 0.024 232);
  --fg-mute:oklch(0.460 0.018 240); --hair:oklch(0.180 0.026 232 / 0.22);
  --rule-off:oklch(0.543 0.019 240); --accent-on-ground:oklch(0.500 0.205 27);
}
/* 09 close + footer — the same sea, lifted into daylight */
[data-zone="close"][data-lit]{
  --ground:oklch(0.930 0.022 216); --fg:oklch(0.185 0.026 232); --fg-soft:oklch(0.335 0.024 232);
  --fg-mute:oklch(0.502 0.020 224); --hair:oklch(0.185 0.026 232 / 0.20);
  --rule-off:oklch(0.582 0.020 224); --accent-on-ground:oklch(0.525 0.212 27);
}

/* the lit band's own number steps forward out of the margin */
[data-lit] .eyebrow, [data-lit] .datum p:first-child{ color:var(--fg); }

/* THE LINE. It crosses lit and unlit ground at once, so it
   carries only two states — and the marker takes the dark one
   a beat before the ink band lights under it. */
html[data-line="ink"], html[data-line="footer"]{
  --line-off:oklch(0.610 0.016 232); --signal:oklch(0.632 0.196 27);
}
html[data-line-next="ink"], html[data-line-next="footer"]{ --marker:oklch(0.632 0.196 27); }

*,*::before,*::after{ box-sizing:border-box; }
html{
  overflow-x:clip; -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  background:var(--paper);
  transition:
    --line-off var(--zone-dur) var(--zone-ease) var(--zone-lag),
    --signal   var(--zone-dur) var(--zone-ease) var(--zone-lag),
    --marker   var(--marker-dur) var(--zone-ease) 0ms;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  :root{ --zone-dur:0s; --zone-out:0s; --zone-lag:0s; --marker-dur:0s; }
}
body{
  margin:0; background:var(--paper); color:var(--fg);
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{
  font-family:var(--f-display); font-weight:800; font-stretch:125%;
  font-variation-settings:"wdth" 125; letter-spacing:-0.018em; line-height:0.95;
  margin:0; text-wrap:balance; overflow-wrap:break-word;
}
p{ margin:0 0 1em; text-wrap:pretty; }
/* the webfont ships 300-600 only — never ask the browser for 700 */
b,strong{ font-weight:600; }
ul{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
:focus-visible{ outline:2px solid var(--accent-on-ground); outline-offset:3px; border-radius:1px; }

.mono{ font-family:var(--f-mono); font-size:1.6875rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:500; line-height:1.25; overflow-wrap:break-word; }
.mid{ color:var(--fg-mute); }
.skip{ position:absolute; left:0; top:-80px; background:var(--fg); color:var(--ground); padding:14px 18px; z-index:99; font-family:var(--f-mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; transition:top .15s; }
.skip:focus{ top:0; }

/* ---------- the page + THE LINE -------------------------------- */
.page{ position:relative; --progress:1; }
.line{
  position:absolute; top:0; bottom:var(--line-end); left:var(--line-x);
  width:var(--rule); transform:translateX(-50%);
  background:var(--line-off); z-index:6; pointer-events:none;
}
.line__fill{
  position:absolute; inset:0; display:block; background:var(--signal);
  transform:scaleY(var(--progress)); transform-origin:top center;
}
.line__head{
  position:absolute; left:50%; top:calc(var(--progress) * 100%);
  width:11px; height:11px; margin:-5px 0 0 -5.5px; display:block;
  background:var(--marker);
}
.line__head::after{
  content:""; position:absolute; left:50%; top:50%; width:29px; height:29px;
  margin:-15px 0 0 -15px; border:1px solid var(--marker); opacity:0.35;
}

/* ---------- layout scaffolding --------------------------------- */
.wrap{ padding-left:var(--content-l); padding-right:var(--pad); }
section{ position:relative; }

@media (min-width:1000px){
  .wrap{ padding-left:var(--pad); }
  .split{ display:grid; grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); }
  .split > .out{ padding-right:26px; text-align:right; }
  .split > .in{ padding-left:34px; }
}
.out .mono{ display:block; }

/* an element whose left edge sits exactly ON the line */
.flush{ margin-left:calc(var(--line-x) - var(--content-l)); }
@media (min-width:1000px){ .flush{ margin-left:calc(var(--line-x) - var(--pad)); } }

/* ---------- nav ------------------------------------------------ */
.nav{ padding-top:22px; padding-bottom:22px; position:relative; }
.brand{ font-family:var(--f-display); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125;
  font-size:0.95rem; letter-spacing:0.02em; text-transform:uppercase; text-decoration:none; line-height:1;
  display:inline-flex; align-items:center; gap:0.36em; min-height:44px; }
.brand span{ color:var(--fg-mute); font-weight:600; }
.navlinks{ display:flex; flex-wrap:wrap; gap:4px 22px; align-items:center; margin-top:14px; }
.navlinks a{
  font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; color:var(--fg-soft); padding:11px 0; display:inline-block; min-height:44px; line-height:22px;
}
.navlinks a:hover{ color:var(--fg); box-shadow:inset 0 -1px 0 var(--fg); }
.navlinks a[aria-current]{ color:var(--fg); box-shadow:inset 0 -2px 0 var(--fg); }
.nav-cta{
  font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--fg); padding:12px 16px; min-height:44px; display:inline-flex;
  align-items:center; background:transparent; transition:background .18s, color .18s; margin-top:10px;
}
.nav-cta:hover{ background:var(--fg); color:var(--ground); }
@media (min-width:1000px){
  .nav{ padding-top:30px; padding-bottom:30px; }
  .nav-cta{ margin-top:0; margin-left:auto; }
  .nav .out{ padding-top:2px; }
  .navlinks{ margin-top:0; gap:0 26px; flex-wrap:nowrap; }
  .brand{ font-size:1.05rem; }
}

/* ---------- buttons -------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:14px; min-height:52px; padding:15px 24px;
  font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.13em; text-transform:uppercase; font-weight:500;
  text-decoration:none; background:var(--accent); color:var(--on-accent);
  box-shadow:0 1px 0 oklch(0.40 0.17 27), 0 10px 22px -12px oklch(0.30 0.12 27 / 0.85);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 2px 0 oklch(0.40 0.17 27), 0 16px 30px -14px oklch(0.30 0.12 27 / 0.9); }
.btn:active{ transform:translateY(1px); box-shadow:0 0 0 oklch(0.40 0.17 27); }
.btn .arw{ font-family:var(--f-mono); }
.btn--ink{ background:var(--fg); color:var(--ground); box-shadow:0 1px 0 oklch(0.10 0.02 232 / 0.55), 0 10px 22px -12px oklch(0.18 0.03 232 / 0.8); }
.btn--ink:hover{ box-shadow:0 2px 0 oklch(0.10 0.02 232 / 0.55), 0 16px 30px -14px oklch(0.18 0.03 232 / 0.85); }
.btn--ghost{
  background:transparent; color:var(--fg); border:1px solid var(--fg); box-shadow:none;
}
.btn--ghost:hover{ background:var(--fg); color:var(--ground); box-shadow:none; transform:none; }

/* ---------- plates (photography) -------------------------------- */
.plate{ position:relative; overflow:hidden; background:var(--plate-ink); isolation:isolate; }
.plate img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.22) brightness(1.02); }
.plate::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:oklch(0.30 0.045 232); mix-blend-mode:color; opacity:0.62;
}
.plate::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.plate figcaption{
  position:absolute; z-index:4; right:12px; bottom:12px; max-width:min(340px,72%);
  background:oklch(0.14 0.02 232 / 0.92); color:var(--on-plate); padding:9px 12px;
  font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.13em; text-transform:uppercase; line-height:1.5;
  box-shadow:0 8px 24px -14px oklch(0.10 0.02 232);
}
@media (min-width:1000px){ .plate figcaption{ right:22px; bottom:22px; font-size:0.6875rem; } }

/* ---------- hero ------------------------------------------------ */
.hero{ padding-top:clamp(30px,6vw,64px); }
.hero h1{ font-size:clamp(2.7rem,8.4vw,6.5rem); margin:16px 0 0; }
.hero h1 em{ font-style:normal; display:block; color:var(--fg-mute); }
.hero .deck{ max-width:46ch; margin-top:26px; font-size:clamp(1.05rem,0.98rem + 0.45vw,1.3rem); color:var(--fg-soft); line-height:1.5; }
/* generic two-button row — usable in ANY band, not just hero/close */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }
.hero .cta-row{ margin-top:34px; }
.hero .datum{ margin-bottom:8px; }
.hero .datum p{ font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-mute); line-height:2.1; margin:0; transition:color var(--zone-dur) var(--zone-ease) var(--zone-lag); }
@media (min-width:1000px){
  .hero{ padding-top:clamp(48px,5vw,92px); }
  .hero .datum{ margin-bottom:0; }
  .hero .datum p{ line-height:2.3; }
}
.hero-plate{ height:clamp(230px,40vw,520px); margin-top:clamp(48px,6vw,88px); }

/* ---------- section furniture ----------------------------------- */
.sect{ padding-top:clamp(60px,8vw,120px); padding-bottom:clamp(56px,7vw,104px); }
.eyebrow{ color:var(--fg-mute); margin:0 0 18px; display:block; transition:color var(--zone-dur) var(--zone-ease) var(--zone-lag); }
@media (min-width:1000px){ .intro .out .eyebrow{ margin:10px 0 0; } }
.h2{ font-size:clamp(2rem,5.6vw,4rem); max-width:16ch; }
.lede{ max-width:52ch; margin-top:22px; font-size:clamp(1.02rem,0.98rem + 0.3vw,1.2rem); color:var(--fg-soft); }
/* annotation prose — mono, but sentence case so it can be read at length */
.note{ font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.005em; color:var(--fg-mute); line-height:1.75; }
.note::before{ content:"— "; }

/* ---------- 02 what crosses it today ---------------------------- */
.breach{
  position:absolute; left:var(--line-x); transform:translateX(-50%);
  top:0; bottom:0; width:6px; z-index:7; pointer-events:none;
  background:repeating-linear-gradient(to bottom, var(--ground) 0 11px, transparent 11px 25px);
}
.leaks{ margin-top:clamp(34px,5vw,60px); border-bottom:1px solid var(--hair); }
.leak{
  position:relative; padding:20px 0 22px; border-top:1px solid var(--hair);
  margin-left:calc(8px - var(--content-l)); padding-left:calc(var(--content-l) - 8px);
}
.leak__in{ display:block; font-size:clamp(1.02rem,0.97rem + 0.45vw,1.35rem); line-height:1.35; letter-spacing:-0.01em; max-width:34ch; }
.leak__out{
  display:block; margin-top:9px; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-mute);
}
@media (min-width:1000px){
  .leak{
    margin-left:0; padding-left:0;
    display:grid; grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr);
  }
  .leak__out{ grid-column:1; grid-row:1; margin-top:5px; padding-right:26px; text-align:right; align-self:start; }
  .leak__in{ grid-column:2; grid-row:1; padding-left:34px; max-width:40ch; }
}
.leak:hover .leak__out{ color:var(--fg-soft); }
.leaks-foot{ margin-top:26px; max-width:44ch; }
@media (min-width:1000px){ .leaks-foot{ max-width:calc(var(--line-x) - var(--pad) - 30px); } }

/* ---------- 03 the line, named ---------------------------------- */
.named .principle{ margin-top:26px; max-width:40ch; font-size:clamp(1.15rem,1rem + 0.8vw,1.6rem); line-height:1.36; letter-spacing:-0.012em; }
.named-plate{ height:clamp(190px,26vw,340px); margin-top:clamp(44px,5vw,72px); }
.sides{ display:grid; gap:0; margin-top:clamp(34px,4vw,54px); }
.side{ padding:18px 0; border-top:1px solid var(--hair); }
.side b{ display:block; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); font-weight:500; margin-bottom:7px; }
.side span{ display:block; max-width:38ch; color:var(--fg-soft); }
@media (min-width:1000px){
  .sides{ grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); }
  .side--out{ padding-right:26px; text-align:right; }
  .side--out span{ margin-left:auto; }
  .side--in{ padding-left:34px; }
}

/* ---------- 04 what we do --------------------------------------- */
.prop{ position:relative; padding-top:clamp(40px,5vw,72px); }
.prop + .prop{ margin-top:clamp(40px,5vw,64px); }
.prop__num{ font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.16em; color:var(--fg-mute); }
.prop h3{ font-size:clamp(1.7rem,4.2vw,3rem); margin-top:12px; max-width:18ch; }
.prop p{ max-width:48ch; margin-top:18px; color:var(--fg-soft); }
.prop__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; margin-top:24px; }
.prop__price{ font-family:var(--f-mono); font-size:0.9rem; letter-spacing:0.06em; font-variant-numeric:tabular-nums; font-weight:600; }
.prop__link{
  font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; box-shadow:inset 0 -1px 0 var(--fg); padding:12px 0; min-height:44px; display:inline-flex; align-items:center; gap:9px;
}
.prop__link:hover{ box-shadow:inset 0 -2px 0 var(--accent-on-ground); }
.vault-plate{ height:clamp(300px,52vw,600px); margin-top:clamp(30px,4vw,44px); }
.vault-rail{ margin-top:26px; display:grid; gap:0; }
.vault-rail li{ padding:15px 0; border-top:1px solid var(--hair); display:flex; gap:16px; align-items:baseline; }
.vault-rail li:last-child{ border-bottom:1px solid var(--hair); }
.vault-rail i{ font-style:normal; font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.12em; color:var(--fg-mute); flex:0 0 auto; }

/* ---------- 05 inside / outside ---------------------------------
   No local colour: this section simply happens to sit in the ink
   zone, so the whole viewport is ink while the marker is in it.  */
.io-grid{ margin-top:clamp(38px,5vw,64px); display:grid; gap:38px 0; }
.io-col h3{ font-size:clamp(1.05rem,2.4vw,1.35rem); letter-spacing:0.02em; }
.io-col .tag{ font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); display:block; margin-bottom:10px; }
.io-col li{
  padding:15px 0; border-top:1px solid var(--hair); font-size:0.98rem; line-height:1.45;
}
.io-col li:last-child{ border-bottom:1px solid var(--hair); }
.io-col--out li{ color:var(--fg-soft); }
.io-col--out{ margin-left:calc(8px - var(--content-l)); padding-left:calc(var(--content-l) - 8px); }
.io-honest{ margin-top:clamp(34px,4vw,52px); max-width:52ch; color:var(--fg-soft); border-left:2px solid var(--accent-on-ground); padding-left:20px; }
@media (min-width:1000px){ .io-honest{ max-width:calc(var(--line-x) - var(--pad) - 30px); } }
@media (min-width:1000px){
  .io-grid{ grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); gap:0; }
  .io-col--out{ margin-left:0; padding-left:0; padding-right:26px; text-align:right; }
  .io-col--out .tag{ text-align:right; }
  .io-col--in{ padding-left:34px; }
}

/* ---------- 06 how it works (ticks) ------------------------------ */
.steps{ margin-top:clamp(30px,4vw,52px); }
.step{ position:relative; }
.step__body{
  position:relative; border-top:1px solid var(--hair); padding:26px 0 30px;
  margin-left:calc(var(--line-x) - var(--content-l)); padding-left:calc(var(--content-l) - var(--line-x));
}
/* the tick sits exactly where the row rule meets the line */
.step__tick{
  position:absolute; z-index:8; top:-1px; left:0;
  width:22px; height:2px; margin-left:-11px; background:var(--fg-soft);
  transition:width .45s ease, margin-left .45s ease, background .45s ease;
}
.step.is-on .step__tick{ width:44px; margin-left:-22px; background:var(--fg); }
.step__n{ display:block; font-family:var(--f-mono); font-size:0.6875rem; letter-spacing:0.16em; color:var(--fg-mute); transition:color .35s ease; padding-bottom:9px; }
.step.is-on .step__n{ color:var(--fg); }
.step h3{ font-size:clamp(1.35rem,3.2vw,2.1rem); }
.step p{ margin-top:12px; max-width:46ch; color:var(--fg-soft); margin-bottom:0; }
@media (min-width:1000px){
  .step{ display:grid; grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); }
  .step__n{ padding:27px 26px 0 0; text-align:right; }
  .step__body{ margin-left:0; padding-left:34px; }
}
@media (prefers-reduced-motion:reduce){
  .step__tick, .step__n{ transition:none; }
}

/* ---------- 07 why us -------------------------------------------- */
.why{ margin-top:clamp(30px,4vw,52px); }
.why li{ display:grid; }
.why__in{ border-top:1px solid var(--hair); padding:22px 0 24px; margin-left:calc(var(--line-x) - var(--content-l)); padding-left:calc(var(--content-l) - var(--line-x)); }
.why li:last-child .why__in{ border-bottom:1px solid var(--hair); }
.why h3{ font-size:clamp(1.15rem,2.6vw,1.55rem); letter-spacing:-0.01em; }
.why p{ margin:10px 0 0; max-width:44ch; color:var(--fg-soft); font-size:0.98rem; }
.why__n{ font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; color:var(--fg-mute); display:block; margin-bottom:9px; }
@media (min-width:1000px){
  .why li{ grid-template-columns:calc(var(--line-x) - var(--pad)) minmax(0,1fr); }
  .why__n{ padding-right:26px; text-align:right; padding-top:23px; margin:0; }
  .why__in{ margin-left:0; padding-left:34px; }
}
.arch-plate{ height:clamp(220px,34vw,420px); margin-top:clamp(44px,5vw,72px); }

/* ---------- 08 pricing ------------------------------------------- */
.ptable{ margin-top:clamp(34px,4vw,56px); border-top:2px solid var(--fg); }
.prow{ padding:24px 0; border-bottom:1px solid var(--hair); display:grid; gap:10px; }
.prow h3{ font-size:clamp(1.2rem,2.8vw,1.7rem); }
.prow p{ margin:0; color:var(--fg-soft); font-size:0.97rem; max-width:42ch; }
.prow .fig{
  font-family:var(--f-mono); font-size:clamp(1rem,2.4vw,1.35rem); font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:0.01em; white-space:nowrap;
}
.prow .fig small{ display:block; font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-mute); font-weight:500; margin-top:6px; }
@media (min-width:760px){
  .prow{ grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:34px; }
  .prow .fig{ text-align:right; grid-row:span 2; }
  .prow h3{ grid-column:1; }
  .prow p{ grid-column:1; }
  .prow .fig{ grid-column:2; grid-row:1 / span 2; }
}
.indicative{ margin-top:24px; max-width:50ch; }

/* ---------- 09 close --------------------------------------------- */
.close h2{ font-size:clamp(2.1rem,6vw,4.4rem); max-width:14ch; }
.close .lede{ max-width:46ch; }
.close .cta-row{ margin-top:32px; }

/* ---------- footer + terminus ------------------------------------ */
/* the footer is the one band that never changes: permanently
   black. Declared after the band table so it outranks the
   resting [data-zone] tokens, and there is no [data-lit] block
   for it, so nothing can light it. No border-top — the colour
   change is the divider. */
.foot{
  --ground:oklch(0.155 0.020 232); --fg:oklch(0.975 0.004 232); --fg-soft:oklch(0.855 0.010 232);
  --fg-mute:oklch(0.705 0.013 232); --hair:oklch(0.975 0.004 232 / 0.20);
  --rule-off:oklch(0.575 0.018 232); --accent-on-ground:oklch(0.645 0.200 27);
  padding-top:clamp(40px,5vw,64px);
}
.foot-grid{ display:grid; gap:30px; }
.foot h4{ font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); margin:0 0 14px; font-weight:500; }
.foot a{ text-decoration:none; }
.foot-links li a{ display:inline-flex; align-items:center; min-height:44px; box-shadow:inset 0 -1px 0 transparent; font-size:0.95rem; }
.foot-links li a:hover{ box-shadow:inset 0 -1px 0 var(--fg); }
.foot address{ font-style:normal; color:var(--fg-soft); font-size:0.95rem; line-height:1.7; max-width:34ch; }
.foot address a{ display:inline-flex; align-items:center; min-height:44px; box-shadow:inset 0 -1px 0 var(--hair); }
.foot address a:hover{ box-shadow:inset 0 -1px 0 var(--fg); }
.credits{ margin-top:clamp(36px,4vw,56px); padding-bottom:26px; color:var(--fg-mute); font-size:0.6875rem; font-family:var(--f-mono); letter-spacing:0.08em; line-height:1.8; max-width:70ch; }
@media (min-width:760px){ .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; } }
/* the credits sit in the margin, outside the line, and never cross it */
@media (min-width:1000px){ .credits{ max-width:calc(var(--line-x) - var(--pad) - 30px); } }

.terminus{ position:relative; height:var(--line-end); }
.terminus__bar{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--fg); }
.terminus__stop{
  position:absolute; top:0; left:var(--line-x); width:16px; height:16px; margin:-7px 0 0 -8px; background:var(--accent-on-ground);
}
.terminus__label{
  position:absolute; top:22px; left:var(--line-x); margin-left:-8px;
  font-family:var(--f-mono); font-size:0.625rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute);
}
@media (max-width:639px){ .terminus__label{ margin-left:14px; } }