/* ═══ THE JOURNEY ════════════════════════════════════════════════
   Everything below the hero is one continuous lit space. Content
   floats in it on glass, chapters are stations on a drawn path,
   and a rail on the right says where you are.
   ═════════════════════════════════════════════════════════════ */

.journey{
  position:relative;
  z-index:1;                 /* under the hero, so the fixed light field
                                cannot bleed over the opening frame */
  isolation:isolate;
  background:var(--ground);
  overflow:clip;
}

/* ── the light field ──────────────────────────────────────────── */
.journey__sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--sky-on, 1);
  transition:opacity .8s var(--ease);
}
.bloom{
  position:absolute; display:block;
  border-radius:50%;
  /* No blur filter. These are radial gradients, so they are already soft —
     blurring a 62vw box on every frame was the single most expensive paint
     on the page and produced no visible difference. */
  will-change:transform;
}
.bloom--a{
  width:62vw; height:62vw; left:-16vw;
  top:calc(6% + var(--sky-p, 0) * -18%);
  background:radial-gradient(50% 50% at 50% 50%, var(--bloom-a), transparent 70%);
}
.bloom--b{
  width:54vw; height:54vw; right:-14vw;
  top:calc(38% + var(--sky-p, 0) * 26%);
  background:radial-gradient(50% 50% at 50% 50%, var(--bloom-b), transparent 70%);
}
.bloom--c{
  width:78vw; height:44vw; left:50%; translate:-50% 0;
  bottom:calc(-22% + var(--sky-p, 0) * 16%);
  background:radial-gradient(50% 50% at 50% 50%, var(--bloom-c), transparent 72%);
}

/* ── the drawn path ───────────────────────────────────────────── */
.journey__path{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
}
.journey__path path{ fill:none; vector-effect:non-scaling-stroke; }
.journey__trace{ stroke:rgba(var(--ice-rgb),.09); stroke-width:1; }
.journey__lit{
  stroke:var(--signal); stroke-width:1.2;
  filter:drop-shadow(0 0 6px rgba(143,216,240,.65));
  stroke-dasharray:var(--trace-len, 4000);
  stroke-dashoffset:calc(var(--trace-len, 4000) * (1 - var(--trace-p, 0)));
}

/* ── chapter rail ─────────────────────────────────────────────── */
.rail{
  position:fixed; right:clamp(10px,1.6vw,26px); top:50%;
  translate:0 -50%;
  z-index:40;
  display:grid; gap:clamp(14px,1.6vw,22px);
  transition:opacity .5s var(--ease);
}
/* JS marks the journey while it is on screen; if it never runs the rail
   simply stays visible, which is the safe way round */
.journey.past .rail{ opacity:0; pointer-events:none; }
.rail a{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--ice-ghost);
  transition:color .4s var(--ease), transform .5s var(--ease-out);
}
/* the arc: middle stations lean in toward the content */
.rail li:nth-child(1) a,.rail li:nth-child(6) a{ transform:translateX(0); }
.rail li:nth-child(2) a,.rail li:nth-child(5) a{ transform:translateX(-13px); }
.rail li:nth-child(3) a,.rail li:nth-child(4) a{ transform:translateX(-20px); }

.rail__label{
  opacity:0; translate:8px 0;
  transition:opacity .4s var(--ease), translate .4s var(--ease-out);
}
.rail__dot{
  width:7px; height:7px; flex:none; border-radius:50%;
  border:1px solid var(--rule-lit);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             box-shadow .4s var(--ease), scale .4s var(--ease-out);
}
.rail a:hover,
.rail a.on{ color:var(--ice); }
.rail a:hover .rail__label,
.rail a.on   .rail__label{ opacity:1; translate:0 0; }
.rail a.on .rail__dot{
  background:var(--signal); border-color:var(--signal);
  box-shadow:0 0 0 4px rgba(143,216,240,.16), 0 0 14px rgba(143,216,240,.8);
  scale:1.15;
}
@media (max-width:1180px){ .rail{ display:none; } }

/* ── chapters ─────────────────────────────────────────────────── */
.chap{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
  position:relative; z-index:2;
  padding-block:clamp(60px,8.5vh,124px);
  padding-inline:var(--gutter);
  max-width:var(--measure);
  margin-inline:auto;
}
/* Where the rail is on show, keep a clean lane for it. This has to sit
   AFTER .chap: same specificity, so source order decides. */
@media (min-width:1181px){
  .chap, .foot{ max-width:min(var(--measure), calc(100vw - 220px)); }
}

/* heading on the left, a short readout on the right — the chapters read
   as compositions rather than a heading with a void beside it */
.chap__head{
  display:grid; gap:clamp(22px,3vw,44px);
  margin-bottom:clamp(30px,4vw,60px);
  align-items:end;
}
@media (min-width:940px){
  .chap__head{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}
/* the measure belongs on the heading, where `ch` is the display size —
   on the wrapper it resolves against the base font and strangles it */
.chap__head > div:first-child{ display:grid; gap:clamp(16px,1.8vw,24px); }
.chap__head .title{ max-width:15ch; }
.chap__head .lead{ max-width:36ch; }

/* the readout beside a chapter heading */
.aside{ display:grid; gap:0; align-content:end; }
.aside__t{
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--ice-ghost); padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.aside li{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:clamp(9px,1vw,14px) 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--ice-ghost);
  transition:color .4s var(--ease), padding-left .4s var(--ease-out);
}
.aside li b{
  font-family:var(--f-display); font-weight:200; font-size:1.35rem;
  letter-spacing:0; color:var(--signal);
  font-variant-numeric:tabular-nums;
}
.aside li:hover{ color:var(--ice-soft); padding-left:8px; }

/* a small card that closes a chapter's open side */
.nudge{
  display:grid; gap:12px; justify-items:start;
  padding:clamp(20px,2vw,28px);
  border:1px solid var(--rule); border-radius:var(--radius-sm);
  background:rgba(var(--ice-rgb),.03);
}
.nudge p{ font-size:var(--t-small); line-height:1.6; color:var(--ice-soft); max-width:32ch; }
.chap__head .title{ color:var(--ice); }

.title{
  font-family:var(--f-display); font-weight:200;
  font-size:var(--t-h2); line-height:1;
  letter-spacing:.012em; text-transform:uppercase;
}

/* ── glass ────────────────────────────────────────────────────── */
.pane{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  background:var(--glass);
  /* Deliberately no backdrop-filter: the ground behind a pane is a flat
     colour plus soft blooms, so the blur was invisible — but it forced the
     backdrop to be re-sampled every frame while the panes drift. Compared
     side by side the two renders are identical. Keep the blur only where
     something real sits behind it: the scrims and the notice. */
  box-shadow:var(--glass-edge), var(--glass-drop);
  padding:clamp(22px,2.3vw,34px);
  display:grid; gap:clamp(14px,1.6vw,20px); align-content:start;
  transition:background .55s var(--ease), box-shadow .55s var(--ease), translate .55s var(--ease-out);
}
/* tracked spotlight */
.pane::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(143,216,240,.16), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
/* a light that walks the top edge on a long loop, and settles into a
   full-width line while the pointer is on the pane */
.pane::after{
  content:''; position:absolute; left:0; top:0; width:46%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,244,254,.85),transparent);
  opacity:0;
  transition:opacity .5s var(--ease);
}
.pane:not(:hover)::after{ animation:edge 11s var(--ease) infinite; }
@keyframes edge{
  0%   { transform:translateX(-105%); opacity:0; }
  6%   { opacity:.75; }
  34%  { transform:translateX(222%); opacity:0; }
  100% { transform:translateX(222%); opacity:0; }
}
.pane:hover{
  background:var(--glass-lift);
  box-shadow:var(--glass-edge), var(--glass-drop), 0 0 0 1px var(--rule-hot);
  translate:0 -4px;
}
.pane:hover::before{ opacity:1; }
.pane:hover::after{ opacity:1; transform:none; left:12%; width:76%; }

/* ── ambient life ─────────────────────────────────────────────
   Every pane breathes on its own clock, so a chapter never reads
   as a static grid. Hover still wins: `translate` and `transform`
   are separate properties, so the lift composes over the drift.  */
.pane{ animation:drift 9s var(--ease) infinite; }
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(0,-7px,0); }
}
.lay > *:nth-child(2) .pane, .lay > .pane:nth-child(2){ animation-duration:11.5s; animation-delay:-2.4s; }
.lay > *:nth-child(3) .pane, .lay > .pane:nth-child(3){ animation-duration:10.2s; animation-delay:-5.1s; }
.lay > *:nth-child(4) .pane, .lay > .pane:nth-child(4){ animation-duration:12.4s; animation-delay:-1.3s; }
.lay > *:nth-child(5) .pane, .lay > .pane:nth-child(5){ animation-duration:9.6s;  animation-delay:-6.7s; }
.lay > *:nth-child(6) .pane, .lay > .pane:nth-child(6){ animation-duration:11s;   animation-delay:-3.8s; }
.pane:hover{ animation-play-state:paused; }

.pill i{ animation:beat 2.6s var(--ease-out) infinite; }
.lay > *:nth-child(even) .pill i{ animation-delay:-1.3s; }

@media (prefers-reduced-motion: reduce){
  .pane, .pane::after, .pill i{ animation:none !important; }
  .pane::after{ opacity:0; }
}
.pane > *{ position:relative; }

.pane__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--ice-soft);
  border:1px solid var(--rule); border-radius:99px;
  padding:6px 12px;
  background:rgba(var(--ice-rgb),.04);
}
.pill i{ width:5px; height:5px; border-radius:50%; background:var(--signal); flex:none; }
.glyph{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--rule);
  color:var(--ice-soft);
  transition:color .5s var(--ease), border-color .5s var(--ease), rotate .7s var(--ease-out);
}
.glyph svg{ width:17px; }
.pane:hover .glyph{ color:var(--signal); border-color:var(--rule-hot); rotate:8deg; }
.glyph svg *{ stroke-dasharray:var(--len,120); }
.pane:hover .glyph svg *{ animation:draw .9s var(--ease-out) forwards; }
@keyframes draw{ from{ stroke-dashoffset:var(--len,120); } to{ stroke-dashoffset:0; } }

.pane__t{ font-family:var(--f-display); font-weight:200; font-size:var(--t-h3);
  text-transform:uppercase; letter-spacing:.02em; line-height:1.06; color:var(--ice); }
.pane__d{ font-size:var(--t-small); line-height:1.6; color:var(--ice-soft); max-width:36ch; }
.pane__foot{
  margin-top:6px; padding-top:14px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice-faint);
}

/* bright card — the reference's one solid plate among the glass */
.pane--solid{
  background:var(--plate);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--on-plate);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.5);
}
.pane--solid .pane__t{ color:var(--on-plate); }
.pane--solid .pane__d{ color:rgba(var(--on-plate-rgb),.68); }
.pane--solid .pill{ color:rgba(var(--on-plate-rgb),.72); border-color:rgba(var(--on-plate-rgb),.2); background:rgba(var(--on-plate-rgb),.06); }
.pane--solid .glyph{ color:rgba(var(--on-plate-rgb),.72); border-color:rgba(var(--on-plate-rgb),.2); }
.pane--solid .pane__foot{ color:rgba(var(--on-plate-rgb),.55); border-color:rgba(var(--on-plate-rgb),.16); }
.pane--solid:hover{ background:var(--plate-lift); }
.pane--solid::before{ background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(var(--on-plate-rgb),.10), transparent 62%); }

/* ── ring gauge ───────────────────────────────────────────────── */
.gauge{ display:grid; place-items:center; position:relative; padding-block:6px; --v:.62; }
.gauge svg{ width:min(210px, 46vw); rotate:-90deg; }
.gauge circle{ fill:none; stroke-width:1.5; }
.gauge .track{ stroke:var(--rule); }
.gauge .arc{
  /* 2πr for the r=54 circle in the markup; the value is the fraction of it
     to draw. Both used to be inline style attributes — they are constants,
     and moving them here is what clears style-src of 'unsafe-inline'. */
  --c:339.3;
  stroke:var(--signal);
  stroke-linecap:round;
  stroke-dasharray:var(--c);
  stroke-dashoffset:var(--c);
  filter:drop-shadow(0 0 7px rgba(143,216,240,.7));
  transition:stroke-dashoffset 1.5s var(--ease-out);
}
.in .gauge .arc{ stroke-dashoffset:calc(var(--c) * (1 - var(--v))); }
.gauge__mid{
  position:absolute; display:grid; place-items:center; gap:3px; text-align:center;
}
.gauge__n{ font-family:var(--f-display); font-weight:200; font-size:clamp(2rem,3.6vw,3rem);
  line-height:1; font-variant-numeric:tabular-nums; }
.gauge__l{ font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice-faint); }

.big{
  font-family:var(--f-display); font-weight:200;
  font-size:clamp(2.4rem,5.4vw,4.2rem); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.big em{ font-style:normal; color:var(--ice-faint); font-size:.36em; letter-spacing:.1em; }

/* ── chapter compositions ─────────────────────────────────────── */
.lay{ display:grid; gap:clamp(16px,1.7vw,26px); }

/* 01 · the leak — copy left, gauge right and lower, solid chip lower-left */
@media (min-width:940px){
  .lay--leak{
    grid-template-columns:1.06fr .94fr;
    grid-template-areas:"copy gauge" "chip gauge";
    align-items:start;
  }
  .lay--leak .lay__copy { grid-area:copy; padding-top:clamp(10px,2vw,36px); }
  .lay--leak .lay__gauge{ grid-area:gauge; align-self:center; margin-top:clamp(-70px,-5vw,-20px); }
  .lay--leak .lay__chip { grid-area:chip; max-width:400px; margin-top:clamp(24px,3vw,48px); }
}

/* 02 · the system — three stations stepping down a diagonal */
@media (min-width:940px){
  .lay--steps{ grid-template-columns:repeat(3,1fr); align-items:start; }
  .lay--steps > *:nth-child(1){ margin-top:0; }
  .lay--steps > *:nth-child(2){ margin-top:clamp(40px,6vw,96px); }
  .lay--steps > *:nth-child(3){ margin-top:clamp(80px,12vw,192px); }
}

/* 03 · what runs — three even columns, but the middle one rides lower.
   Symmetric about the centre line, still nothing like a plain grid. */
@media (min-width:720px){ .lay--routes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){
  .lay--routes{ grid-template-columns:repeat(3,1fr); align-items:start; }
  .lay--routes > *:nth-child(3n+2){ margin-top:clamp(38px,5vw,92px); }
  .lay--routes > *{ min-height:clamp(210px,17vw,260px); }
}

/* the integrations read as their own band, centred under the plates */
.integ-band{ display:grid; justify-items:center; gap:clamp(18px,2.2vw,30px); text-align:center; }
.integ-band .kicker{ justify-content:center; }
.integ-band .kicker::before{
  content:''; flex:0 0 clamp(40px,7vw,110px); height:1px;
  background:currentColor; opacity:.32;
}
.integ{ justify-content:center; }

/* 04 · the arithmetic */
.lay--calc{ }
@media (min-width:940px){ .lay--calc{ grid-template-columns:1.05fr .95fr; align-items:center; } }
.pane--calc{ padding:clamp(26px,3vw,48px); }

/* 05 · questions */
.pane--faq{ padding:clamp(10px,1.4vw,22px) clamp(22px,2.6vw,40px); }

/* 06 · next */
.chap--close{ text-align:center; display:grid; justify-items:center; gap:clamp(24px,3vw,40px);
  padding-block:clamp(120px,20vh,240px); }
.chap--close .title{ font-size:clamp(2.1rem,5.4vw,4.6rem); max-width:16ch; }

/* ── sliders ──────────────────────────────────────────────────── */
.dial{ display:grid; gap:clamp(18px,2.2vw,28px); }
.dial__row{ display:grid; gap:10px; }
.dial__top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.dial__lab{ font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice-faint); }
.dial__val{ font-family:var(--f-display); font-weight:200; font-size:1.5rem;
  font-variant-numeric:tabular-nums; color:var(--signal); }

input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:26px; background:none; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:1px; background:var(--rule); }
input[type=range]::-moz-range-track{ height:1px; background:var(--rule); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; margin-top:-6px;
  border-radius:50%; background:var(--signal);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
input[type=range]::-moz-range-thumb{ width:13px; height:13px; border:0; border-radius:50%; background:var(--signal); }
input[type=range]:hover::-webkit-slider-thumb{ box-shadow:0 0 0 8px rgba(143,216,240,.16); transform:scale(1.15); }

.out{ display:grid; gap:8px; }
.out__num{ font-family:var(--f-display); font-weight:200;
  font-size:clamp(2.8rem,6.6vw,5.4rem); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.012em; }
.out__sub{ font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice-faint); }
.out__year{ margin-top:10px; font-size:var(--t-small); color:var(--ice-soft); }
.out__year b{ color:var(--signal); font-weight:400; font-variant-numeric:tabular-nums; }

/* ── integrations ─────────────────────────────────────────────── */
.integ{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  position:relative; overflow:hidden;
  border:1px solid var(--rule); border-radius:99px;
  padding:11px 19px;
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--ice-soft);
  background:rgba(var(--ice-rgb),.035);
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
/* A percentage translate is measured against the text's own height, so
   inside a padded pill it never clears the padding and the outgoing
   word stays half visible. Give it a track exactly one line tall. */
.chip__slide{ display:block; height:1.15em; line-height:1.15em; overflow:hidden; }
.chip__slide span{
  display:block; height:1.15em;
  transition:transform .5s var(--ease-out);
}
.chip__slide span:last-child{ color:var(--signal); }
.chip:hover{ border-color:var(--rule-hot); background:rgba(143,216,240,.07); color:var(--ice); }
.chip:hover .chip__slide span{ transform:translateY(-100%); }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq__i{ border-bottom:1px solid var(--rule); position:relative; }
.faq__i:last-child{ border-bottom:0; }
.faq__i::before{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,var(--signal),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.faq__i:hover::before, .faq__i[open]::before{ transform:scaleX(1); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(18px,2.2vw,28px) 0; text-align:left;
  font-family:var(--f-display); font-weight:200; font-size:clamp(1.1rem,1.8vw,1.6rem);
  text-transform:uppercase; letter-spacing:.02em; color:var(--ice);
}
.faq__ico{ width:13px; flex:none; color:var(--ice-faint); transition:transform .45s var(--ease-out), color .4s var(--ease); }
.faq__i[open] .faq__ico{ transform:rotate(135deg); color:var(--signal); }
.faq__a{ overflow:hidden; display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out); }
.faq__i[open] .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ padding-bottom:clamp(20px,2.2vw,30px); max-width:62ch; color:var(--ice-soft); font-size:var(--t-body); line-height:1.7; }

/* ── signal strip ─────────────────────────────────────────────── */
.strip{
  position:relative; z-index:2;
  border-block:1px solid var(--rule);
  overflow:hidden; padding-block:16px;
  background:rgba(var(--ice-rgb),.02);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.strip__track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.strip:hover .strip__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.strip__set{ display:flex; }
.strip__item{
  display:flex; align-items:center; gap:13px;
  padding-inline:clamp(20px,2.8vw,42px);
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--ice-faint); white-space:nowrap;
}
.strip__item b{ font-weight:400; color:var(--ice); }
.strip__item::after{ content:''; width:4px; height:4px; border-radius:50%; background:var(--rule-lit); }

/* ── footer ───────────────────────────────────────────────────── */
.foot{
  position:relative; z-index:2;
  padding:clamp(56px,7vw,110px) var(--gutter) clamp(24px,2.6vw,36px);
  max-width:var(--measure); margin-inline:auto;
  border-top:1px solid var(--rule);
  overflow:clip;
  container-type:inline-size;   /* the wordmark is sized off this box */
}
.foot__top{ display:grid; gap:clamp(40px,5vw,80px); }
@media (min-width:900px){ .foot__top{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); } }

.foot__say{ display:grid; gap:clamp(18px,2vw,28px); align-content:start; justify-items:start; }
.foot__line{
  font-family:var(--f-display); font-weight:200;
  font-size:clamp(1.5rem,2.8vw,2.6rem); line-height:1.06;
  letter-spacing:.01em; color:var(--ice);
}

.foot__cols{ display:grid; gap:clamp(28px,3vw,48px); }
@media (min-width:620px){ .foot__cols{ grid-template-columns:repeat(3,1fr); } }
.foot__col{ display:grid; gap:11px; align-content:start; }
.foot__col h4{
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--ice-ghost); margin-bottom:6px;
  padding-bottom:10px; border-bottom:1px solid var(--rule);
}
.foot__col a, .foot__col span{ font-size:var(--t-small); line-height:1.5; color:var(--ice-soft); }
.foot__col a{ position:relative; width:fit-content; transition:color .35s var(--ease), padding-left .35s var(--ease-out); }
.foot__col a::before{
  content:''; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--signal); transition:width .35s var(--ease-out);
}
.foot__col a:hover{ color:var(--signal); padding-left:16px; }
.foot__col a:hover::before{ width:10px; }
.foot__where{ color:var(--ice-ghost) !important; }

/* the wordmark: big, quiet, and lit from above */
.foot__mark{
  margin:clamp(46px,6vw,96px) 0 clamp(20px,2.4vw,34px);
  font-family:var(--f-display); font-weight:200;
  font-size:clamp(1.9rem,9.6cqw,16rem); line-height:.86;
  letter-spacing:.02em; text-transform:uppercase;
  white-space:nowrap;
  background:linear-gradient(178deg, rgba(var(--ice-rgb),.30) 4%, rgba(var(--ice-rgb),.05) 62%, transparent 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none;
}

.foot__base{
  padding-top:20px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:var(--t-micro); font-weight:300;
  letter-spacing:var(--track-mono); text-transform:uppercase; color:var(--ice-ghost);
}
.live{ display:inline-flex; align-items:center; gap:9px; color:var(--ice-soft); }
.live b{ color:var(--signal); font-weight:400; font-variant-numeric:tabular-nums; }
.live i{
  width:6px; height:6px; border-radius:50%; background:var(--signal); flex:none;
  box-shadow:0 0 0 0 rgba(143,216,240,.55);
  animation:beat 2.4s var(--ease-out) infinite;
}
@keyframes beat{
  0%  { box-shadow:0 0 0 0 rgba(143,216,240,.5); }
  70% { box-shadow:0 0 0 9px rgba(143,216,240,0); }
  100%{ box-shadow:0 0 0 0 rgba(143,216,240,0); }
}

/* ── narrow ───────────────────────────────────────────────────── */
@media (max-width:940px){
  .lay--leak .lay__gauge, .lay--leak .lay__chip{ margin-top:0; }
  .chap{ padding-block:clamp(64px,10vh,110px); }
}

/* ═══ NARROW SCREENS ═════════════════════════════════════════════
   A phone is not a small desktop. The desktop rhythm — deep chapter
   breathing, a heading beside a readout, six plates in three columns —
   turns into scrolling past emptiness at this width. Everything here
   tightens the vertical spend and lets each block fill the measure.
   ═════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .chap{
    padding-block:clamp(44px,9vw,64px);
    contain-intrinsic-size:auto 1200px;
  }
  .chap__head{ gap:clamp(16px,4vw,24px); margin-bottom:clamp(22px,5vw,32px); }
  .chap__head > div:first-child{ gap:clamp(12px,3vw,18px); }
  .chap__head .title{ max-width:none; }
  .chap__head .lead{ max-width:none; }

  /* the readout reads as a compact table, not a sparse list */
  .aside{ width:100%; }
  .aside li{ padding:clamp(8px,2vw,11px) 0; gap:12px; }
  .aside li b{ font-size:1.15rem; }
  .aside__t{ padding-bottom:9px; }

  .lay{ gap:clamp(10px,2.6vw,14px); }
  .pane{ padding:clamp(18px,4.6vw,24px); gap:clamp(10px,2.6vw,14px); }
  .pane__t{ font-size:1.15rem; }
  .pane__d{ max-width:none; }
  .glyph{ width:34px; height:34px; }
  .glyph svg{ width:15px; }
  .pane__foot{ padding-top:11px; margin-top:2px; }

  /* the plates drift on a desktop where there is room for it to read as
     life; at this width it is just movement under the thumb */
  .pane{ animation:none; }

  .gauge svg{ width:min(180px, 52vw); }
  .gauge__n{ font-size:2.4rem; }
  .big{ font-size:clamp(2.1rem,11vw,2.8rem); }

  .lay--calc{ gap:clamp(20px,5vw,30px); }
  .out__num{ font-size:clamp(2.6rem,14vw,3.4rem); }
  .dial{ gap:clamp(14px,3.6vw,20px); }

  .integ-band{ gap:clamp(14px,3.6vw,20px); }
  .integ{ gap:7px; }
  .chip{ padding:9px 15px; }

  .faq__q{ padding:clamp(15px,4vw,20px) 0; gap:16px; }
  .pane--faq{ padding:clamp(6px,2vw,12px) clamp(18px,4.6vw,24px); }

  .nudge{ padding:clamp(16px,4vw,22px); }
  .nudge p{ max-width:none; }

  .chap--close{ padding-block:clamp(70px,16vw,110px); }
  .chap--close .title{ max-width:none; }

  /* the rail is hidden at this width, so reclaim the lane */
  .foot{ padding-inline:var(--gutter); }
  .foot__top{ gap:clamp(28px,7vw,40px); }
  .foot__mark{ margin:clamp(30px,8vw,48px) 0 clamp(16px,4vw,24px); }
  .foot__base{ gap:12px; }
  .strip__item{ padding-inline:clamp(16px,4vw,24px); }
}

@media (max-width:520px){
  /* one plate per row reads better than two cramped ones */
  .lay--routes{ grid-template-columns:1fr; }
  .lay--leak{ gap:clamp(14px,4vw,20px); }
  .foot__cols{ grid-template-columns:1fr 1fr; display:grid; gap:clamp(20px,6vw,30px); }
}