/* ═══════════════════════════════════════════════════════════════
   BRACE — landing.

   Same facility as the lab, one register calmer. Mono is the
   instrument (labels, plates, tick rails, the one hero line);
   sans carries every sentence and every heading, so the hero's
   mono display is the only one on the page and stays memorable.

   Brand is monochrome. Amber annotates. Green and red belong to
   the pulse, where they mean something.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ THE CANVAS RULE ═══════════════════════════════════════════
   Container wide, measure narrow. The document column runs to
   --shell (1560px) so the surface always reaches the canvas at
   desktop widths; the READING measure is then constrained inside
   it to --prose. A narrow column on a narrow page is the single
   most reliable tell of an amateur layout — the fix is never to
   stretch the prose, it is to widen the surface underneath it and
   let the prose sit in a column of that surface.
   ─────────────────────────────────────────────────────────────── */
.landing{
  --measure:var(--shell);
  --prose:68ch;
  /* the landing's prose runs one notch larger than the lab's dense
     readouts — this is a page you read, not an instrument you scan */
  --t-body:14px;
  --t-lede:17px;
  --rhythm:clamp(72px, 8.4vw, 124px);   /* section-to-section */
}
.landing main{ width:100%; }

.landing .rail{ position:sticky; top:0; z-index:20; }
.chip--go{
  text-decoration:none; color:var(--ink); border-color:var(--edge-hot);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip--go:hover{ background:var(--ink); color:var(--floor); border-color:var(--ink); }

/* ── reveal ───────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(var(--rise,14px));
  transition:opacity var(--t-beat) var(--ease), transform var(--t-beat) var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ═══ HERO ══════════════════════════════════════════════════════
   Left: the claim. Right: the calibration disc at a size where you
   can actually read what it is — a target with the signal running
   through it, silent at impact centre. That is the whole product
   in one glyph, so it gets the room. */
/* The hero owns the first screen. Rail height is subtracted so the
   claim, the instrument and the gate compose against the fold
   instead of sitting in the top third with dead space beneath. */
.hero{
  padding:clamp(40px,6vw,80px) var(--pad-x) clamp(24px,4vw,56px);
  min-height:calc(100svh - 66px);
  display:flex; flex-direction:column; justify-content:center;
}
/* Left: the claim, at display size. Right: the instrument column —
   the calibration disc stacked on the live scope. The instrument
   column is the WIDER of the two, the way every reference hero
   runs it: the running artifact earns the canvas, the copy sits in
   a comfortable measure beside it. */
.hero__inner{
  max-width:var(--measure); margin:0 auto;
  display:grid; gap:clamp(40px,4.5vw,80px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  align-items:center;
}
.hero__stage{ display:flex; flex-direction:column; gap:var(--s5); min-width:0; }

/* the spec plate — an engineering report header, not a badge */
.plate{
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  margin:0 0 var(--s5); padding:0;
  font-size:var(--t-micro); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2);
  border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  padding:var(--s2) 0;
}
.plate i{
  font-style:normal; color:var(--ink-3); letter-spacing:var(--track-label);
  margin-right:var(--s2);
}
.plate i + i,
.plate i:not(:first-child){ margin-left:var(--s4); padding-left:var(--s4); border-left:1px solid var(--edge); }

/* The one mono display on the site. At 68px the counters open up and
   it stops reading as a terminal and starts reading as stencilled
   plant signage — which is the register we want. Leading goes sub-1
   because at this size the ascenders carry the rhythm. */
.hero__pitch{
  margin:0; max-width:15ch;
  font-family:var(--mono);
  font-size:var(--t-display); line-height:.98; font-weight:700;
  letter-spacing:var(--track-display); color:var(--ink);
  text-wrap:balance;
}
.hero__pitch .nb{ white-space:nowrap; }
.hero__sub{
  margin:var(--s5) 0 0; max-width:46ch;
  font-family:var(--sans); font-size:clamp(16px,1.35vw,21px); line-height:1.55; color:var(--ink-2);
  letter-spacing:-.006em;
}

.hero__cta{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6); }
.btn{
  display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:600;
  padding:14px 24px; border-radius:var(--r); border:1px solid transparent;
  transition:background var(--t-mid) var(--ease), color var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}
.btn span{ transition:transform var(--t-mid) var(--ease); }
.btn--primary{ background:var(--ink); color:var(--floor); box-shadow:var(--e1); }
.btn--primary:hover{ background:var(--btn-hover); transform:translateY(-2px); box-shadow:var(--e2); }
.btn--primary:hover span{ transform:translateX(4px); }
.btn--ghost{ border-color:var(--edge-hot); color:var(--ink-2); }
.btn--ghost:hover{ border-color:var(--ink-2); color:var(--ink); transform:translateY(-2px); }
.btn--ghost:hover span{ transform:translateY(3px); }
.btn--lg{ padding:17px 30px; font-size:13px; }

.hero__nofriction{
  margin:var(--s5) 0 0; font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}

/* the disc, annotated like a lab photograph */
.hero__disc{ display:flex; flex-direction:column; align-items:center; gap:var(--s4); }
.hero__mark{ width:min(100%,232px); height:auto; overflow:visible; }
.mark__tick{ stroke:var(--amber); opacity:.9; }
.hero__disc-note{
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:var(--s2);
}
.hero__disc-note::before,
.hero__disc-note::after{ content:""; width:var(--s5); height:1px; background:var(--edge-hot); }

/* ═══ THE GATE ══════════════════════════════════════════════════
   Cause and effect as a two-row timeline. Row 01 is what shipping
   blind costs; row 02 is the same statement after the rehearsal.
   The 1px joint between them, with the calibration mark sitting on
   it, IS the product — so the diagram makes you look at it.
   Red and green here are verdicts, which is what they are for. */
.gate{
  max-width:var(--measure); margin:clamp(40px,6vw,80px) auto 0;
  border:1px solid var(--edge); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),var(--panel-deep));
  box-shadow:var(--e1), var(--bezel);
  padding:clamp(20px,2.2vw,32px) clamp(20px,2.4vw,40px);
  display:grid; gap:0;
}
.gate__row{
  position:relative;
  display:flex; align-items:baseline; gap:var(--s4);
  padding:var(--s3) 0 var(--s3) var(--s5);
  min-width:0;
}
/* the verdict stripe: 2px, the full height of its own row */
.gate__row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; border-radius:1px;
}
.gate__row--blind::before { background:var(--red); }
.gate__row--caught::before{ background:var(--green); }

.gate__no{
  flex:none;
  font-size:var(--t-micro); letter-spacing:.14em; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.gate__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.gate__title{
  font-size:var(--t-label); font-weight:600;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-2);
}
.gate__fact{
  font-size:clamp(14px,1.25vw,19px); letter-spacing:.01em; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.gate__fact i{ font-style:normal; font-weight:700; letter-spacing:-.015em; }
.gate__fact em{ font-style:normal; color:var(--ink-3); opacity:.5; margin:0 2px; }
.gate__row--blind  .gate__fact i{ color:var(--red); }
.gate__row--caught .gate__fact i{ color:var(--green); }

/* the joint — a hairline dropping from row 01 to row 02, interrupted
   at its midpoint by the calibration disc */
.gate__joint{
  position:relative; display:flex; align-items:center; gap:var(--s3);
  padding-left:1px; margin-left:0; min-height:52px;
}
.gate__joint::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, var(--red), var(--edge-hot) 45%, var(--edge-hot) 55%, var(--green));
  opacity:.55;
}
.gate__node{
  position:relative; z-index:1; flex:none;
  width:26px; height:26px; margin-left:-13px;
  display:grid; place-items:center;
  border-radius:50%; background:var(--panel);
  box-shadow:0 0 0 1px var(--edge-hot);
}
.gate__node svg{ width:16px; height:16px; display:block; }
.gate__joint-label{
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
  margin-left:var(--s2);
}

/* wide: the two rows sit side by side and the joint runs horizontally */
@media (min-width:860px){
  .gate{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center; gap:var(--s4);
  }
  .gate__joint{
    flex-direction:column; justify-content:center; min-height:0;
    width:120px; padding-left:0;
  }
  .gate__joint::before{
    left:0; right:0; top:50%; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg, var(--red), var(--edge-hot) 45%, var(--edge-hot) 55%, var(--green));
  }
  .gate__node{ margin-left:0; }
  .gate__joint-label{ margin:var(--s2) 0 0; text-align:center; }
}

/* ═══ THE CONTROL LOOP ══════════════════════════════════════════
   Five bordered chips on a connecting rail — the same rail the
   topology strip uses, so the two pages agree about what a flow
   diagram looks like here. Each chip carries a real setting. */
.loop{
  list-style:none; margin:var(--s7) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
}
.loop__step{
  position:relative; min-width:0;
  display:flex; flex-direction:column; gap:6px;
  padding:var(--s4) var(--s4) var(--s5);
  border:1px solid var(--edge); border-radius:var(--r);
  background:var(--panel);
  box-shadow:var(--bezel);
  transition:border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.loop__step + .loop__step{ margin-left:var(--s5); }
/* the rail: a hairline with an arrowhead, between every pair */
.loop__step + .loop__step::before{
  content:""; position:absolute; left:calc(var(--s5) * -1); top:50%; width:var(--s5); height:1px;
  background:var(--edge-hot);
}
.loop__step + .loop__step::after{
  content:""; position:absolute; left:-7px; top:50%; transform:translateY(-50%);
  border-left:5px solid var(--edge-hot); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}
.loop__step:hover{ border-color:var(--edge-hot); background:var(--panel-2); }
.loop__no{
  font-size:9px; letter-spacing:.2em; color:var(--amber); font-variant-numeric:tabular-nums;
}
.loop__step b{
  font-size:var(--t-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink);
}
.loop__val{
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  overflow-wrap:anywhere;
}

/* ═══ THE INCIDENT BAND ═════════════════════════════════════════
   The one deliberate full-bleed break in the dark. It is the
   facility's own amber, at wash strength, with amber hairlines
   top and bottom — no new colour enters the system. It marks the
   receipts as the section that is quoting somebody else. */
.band{
  position:relative; width:100%; margin-top:var(--rhythm);
  border-top:1px solid var(--amber-dim); border-bottom:1px solid var(--amber-dim);
  background:
    linear-gradient(180deg, var(--amber-wash), var(--amber-wash)),
    var(--floor);
  padding-bottom:clamp(48px,7vw,72px);
}
/* the hero already reserves a full screen and pads its own bottom —
   the band that follows it must not add a second rhythm on top */
.hero + .band{ margin-top:clamp(16px,2.5vw,40px); }
.band .sec{ padding-top:clamp(48px,7vw,72px); }
/* inside the band the receipts are ruled by amber hairlines instead of
   the 1px-gap grid, so the band shows through them */
.band .receipts{
  background:transparent; gap:0;
  border-top-color:var(--amber-dim); border-bottom-color:var(--amber-dim);
}
.band .receipt{ background:transparent; }
.band .receipt + .receipt{ border-left:1px solid var(--amber-dim); }
.band .receipts__note{ color:var(--ink-2); }

/* ── the facility band ────────────────────────────────────────
   The second surface change, and the quieter one: a half-step of
   the panel tone rather than a colour. It groups the two
   infrastructure sections into one chapter and gives the sections
   either side of it a visible edge. Depth by surface, not shadow. */
/* The band is a step DOWN from the floor in both themes — recessed,
   not lifted — so every panel inside it keeps its existing --panel
   fill and still reads as an instrument sitting in a bay. */
.band--quiet{
  --band-floor:#04070b;
  border-color:var(--edge);
  background:var(--band-floor);
  padding-bottom:clamp(56px,7vw,96px);
}
:root[data-theme="light"] .band--quiet{ --band-floor:#e2e7ef; }
.band--quiet .sec{ padding-top:clamp(56px,7vw,96px); }
.band--quiet .sec + .sec{ padding-top:var(--rhythm); }
/* the receipts pattern reuses --floor as its own cell fill; inside a
   band that fill has to follow the band */
.band--quiet .receipt{ background:var(--band-floor); }
/* a band already supplies its own bottom breathing room — the next
   section must not pay for it twice */
.band + .close,
.band + .sec{ margin-top:clamp(40px,4vw,64px); padding-top:clamp(40px,4vw,64px); }

/* ═══ THE SECTION RAIL ══════════════════════════════════════════
   A fixed report index in the top-right corner: [03/06] › THE
   CLAIM. Makes the page read as a numbered document rather than a
   scroll. Hidden wherever the top rail already owns that corner. */
.secrail{
  position:fixed; z-index:19; right:var(--gut); top:76px;
  display:flex; align-items:center; gap:var(--s2);
  padding:5px 10px;
  border:1px solid var(--edge); border-radius:var(--r-pill);
  background:var(--rail-bg); backdrop-filter:blur(8px);
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
  pointer-events:none;
  opacity:0; transform:translateY(-6px);
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.secrail.in{ opacity:1; transform:none; }
.secrail__no{ font-weight:700; color:var(--amber); font-variant-numeric:tabular-nums; letter-spacing:.1em; }
.secrail__name{ color:var(--ink-2); }

/* ── TEASER (the brand gesture, with a real axis under it) ─── */
.teaser{
  margin:0; width:100%;
  border:1px solid var(--edge); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),var(--panel-deep));
  box-shadow:var(--e2), var(--bezel);
  overflow:hidden;
  padding-bottom:var(--s3);
}
.teaser__cap{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--gut); border-bottom:1px solid var(--edge);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.teaser__state{ color:var(--green); transition:color var(--t-slow) var(--ease); }
.teaser__state::before{ content:"state "; color:var(--ink-3); }
.teaser__state[data-hurt="1"]{ color:var(--red); }
#teaser{ display:block; width:100%; height:132px; }

/* ═══ SECTIONS ══════════════════════════════════════════════════ */
.sec{ max-width:var(--measure); margin:0 auto; padding:var(--rhythm) var(--pad-x) 0; }

/* The section header is a two-column masthead at desktop: the eyebrow
   and the h2 hold the left, the lede sits beside them rather than
   under them. It stops every section opening with three stacked
   left-aligned blocks and a dead right half. */
.sec__head{
  max-width:none;
  display:grid; gap:var(--s5) clamp(32px,4vw,72px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:1000px){
  .sec__head{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:end; }
  .sec__head .eyebrow{ grid-column:1 / -1; margin-bottom:0; }
  .sec__head h2{ margin-bottom:0; }
  .sec__lede{ margin-top:0; padding-bottom:.35em; }
}

/* the dimension callout — a tick, a label, and a leader running
   out to the edge of the measurement. Every section is annotated
   the way a lab report annotates a figure. */
.eyebrow{
  display:flex; align-items:center; gap:var(--s3);
  font-size:var(--t-micro); letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--s5);
}
.eyebrow::before{
  content:""; flex:none; width:var(--s5); height:5px;
  border-left:1px solid var(--amber); border-bottom:1px solid var(--amber); border-right:1px solid var(--amber);
}
.eyebrow::after{
  content:""; flex:1; height:1px; min-width:var(--s5);
  background:linear-gradient(90deg, var(--edge-hot), transparent);
}

.sec__head h2, .close h2{
  margin:0; max-width:20ch; font-family:var(--sans); font-weight:680;
  font-size:var(--t-h2); line-height:1.08; letter-spacing:-.032em; color:var(--ink);
  text-wrap:balance;
}
.sec__lede{
  margin:var(--s5) 0 0; max-width:var(--prose);
  font-family:var(--sans); font-size:var(--t-lede); line-height:1.7; color:var(--ink-2);
}

/* ── the four phases ──────────────────────────────────────── */
.steps{
  list-style:none; margin:var(--s7) 0 0; padding:0;
  display:grid; gap:1px; background:var(--edge);
  border:1px solid var(--edge); border-radius:var(--r-lg);
  grid-template-columns:repeat(2,1fr); overflow:hidden;
  box-shadow:var(--e1), var(--bezel);
}
.step{
  position:relative; background:var(--panel); padding:var(--s6) var(--s5) var(--s6);
  transition:background var(--t-mid) var(--ease);
}
.step::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--amber);
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--t-slow) var(--ease);
}
.step:hover{ background:var(--panel-2); }
.step h3{ text-wrap:balance; }
.step:hover::before{ transform:scaleY(1); }

/* the phase number as a stamped plate, the way a rig stamps a run */
.step__no{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-bottom:var(--s4);
  border:1px solid var(--edge-hot); border-radius:var(--r-sm);
  font-size:var(--t-micro); letter-spacing:.06em; color:var(--ink-3);
}
.step h3{
  margin:0 0 var(--s3); font-family:var(--sans); font-size:var(--t-h3); font-weight:650;
  letter-spacing:-.012em; color:var(--ink);
}
.step p{ margin:0; font-family:var(--sans); font-size:var(--t-body); line-height:1.7; color:var(--ink-2); max-width:46ch; }

/* Four phases, four columns. At 2×2 in a 1432px content column each
   card was 700px wide holding a 46ch paragraph — half of every card
   was empty. Four across is the same information at the width it
   actually wants. */
@media (min-width:1180px){
  .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .step{ padding:clamp(28px,2.6vw,40px) clamp(20px,1.8vw,28px); }
}

/* ── RECEIPTS ─────────────────────────────────────────────────
   Evidence in an engineering-report register: three columns ruled
   off from each other, the sentence set in sans because a person
   wrote it, the citation in mono because it is a reference. */
.receipts{
  list-style:none; margin:var(--s7) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--edge); border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
}
.receipt{
  background:var(--floor); padding:var(--s5) var(--s5) var(--s5) 0;
  display:flex; flex-direction:column; gap:var(--s4);
}
.receipt:not(:first-child){ padding-left:var(--s5); }
/* the years are the argument: 2024, 2025, 2026 — it keeps happening */
.receipt__year{
  font-family:var(--mono); font-size:22px; font-weight:700;
  letter-spacing:.02em; color:var(--amber);
}
.receipt blockquote{ flex:1; }
.receipt__src{ margin-top:auto; }
.receipt blockquote{
  margin:0; font-family:var(--sans); font-size:clamp(16px,1.32vw,21px); line-height:1.42;
  letter-spacing:-.018em; font-weight:520; color:var(--ink); text-wrap:balance;
}
.receipt blockquote::before{ content:"“"; color:var(--amber); }
.receipt blockquote::after{ content:"”"; color:var(--amber); }
.receipt__src{
  margin:0; display:flex; flex-direction:column; gap:var(--s1);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
}
.receipt__src a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--edge-hot); align-self:flex-start; }
.receipt__src a:hover{ color:var(--ink); border-color:var(--amber); }
.receipt__who{ color:var(--ink-2); }
.receipt__src span:last-child{ color:var(--ink-3); letter-spacing:.1em; text-transform:none; font-size:var(--t-micro); }
.receipts__note{
  margin:var(--s5) 0 0; font-family:var(--sans); font-size:var(--t-body); line-height:1.7;
  color:var(--ink-3); max-width:var(--prose);
}

/* ── THE CLAIM ────────────────────────────────────────────── */
.claim{
  max-width:var(--measure); margin:var(--rhythm) auto 0; padding:0 var(--pad-x);
}
.claim__line{
  margin:0; max-width:22ch;
  font-family:var(--sans); font-weight:680;
  font-size:clamp(26px,3.4vw,46px); line-height:1.1; letter-spacing:-.032em; color:var(--ink-3);
  border-left:2px solid var(--amber); padding-left:clamp(16px,3vw,32px);
}

/* The claim is the page's one editorial pull-quote. At desktop the
   statement holds the left and the honest-about-the-neighbours
   footnote sits beside it, so the section is a spread rather than a
   short line with an empty right half. */
@media (min-width:1000px){
  .claim{
    display:grid; align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    column-gap:clamp(48px,5vw,96px);
  }
  .claim__line{ grid-row:1 / span 2; }
  .claim__foot{ margin-top:0; padding-left:0; }
  .claim__prior{ padding-left:0; }
}
.claim__line b{ color:var(--ink); font-weight:650; }
.claim__foot{ margin:var(--s6) 0 0; padding-left:clamp(16px,3vw,34px); }
.claim__foot .eyebrow{ margin-bottom:0; }
.claim__prior{
  margin:var(--s4) 0 0; padding-left:clamp(16px,3vw,34px); max-width:74ch;
  font-family:var(--sans); font-size:var(--t-body); line-height:1.78; color:var(--ink-2);
}
.claim__prior code{
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  border:1px solid var(--edge); border-radius:var(--r-sm); padding:1px 5px; white-space:nowrap;
}

/* ── ZEROPS ───────────────────────────────────────────────── */
.topo--big{
  margin-top:var(--s7); display:block; padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,40px);
  border:1px solid var(--edge); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),var(--panel-deep));
  box-shadow:var(--e1), var(--bezel);
}
.topo--big .topo__flow{ display:flex; align-items:stretch; gap:0; margin:0; padding:0; list-style:none; flex-wrap:wrap; row-gap:var(--s3); }
.topo--big .node{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:var(--s4) var(--s5); border:1px solid var(--edge); border-radius:var(--r); background:var(--panel-2);
  transition:border-color var(--t-mid) var(--ease);
}
.topo--big .node:hover{ border-color:var(--edge-hot); }
/* Three services across the full instrument face — the diagram is
   the width of the thing it describes, not a huddle on the left. */
@media (min-width:900px){
  .topo--big .topo__flow{ flex-wrap:nowrap; }
  .topo--big .node{ flex:1 1 0; min-width:0; }
  .topo--big .node + .node{ margin-left:clamp(48px,5vw,88px); }
  .topo--big .node + .node::before{ left:calc(-1 * clamp(48px,5vw,88px) + 4px); width:calc(clamp(48px,5vw,88px) - 12px); }
  .topo--big .node + .node::after{ left:-9px; }
}
.topo--big .node b{ font-size:var(--t-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); }
.topo--big .node span{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.topo--big .node + .node{ margin-left:var(--s6); position:relative; }
.topo--big .node + .node::before{
  content:""; position:absolute; left:-28px; top:50%; width:24px; height:1px; background:var(--edge-hot);
}
.topo--big .node + .node::after{
  content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  border-left:5px solid var(--edge-hot); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}

.twins{ margin-top:var(--s5); padding-top:var(--s5); border-top:1px dashed var(--edge); }
.twins__label{ font-size:9.5px; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-3); }
.twins__row{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3); align-items:center; }
.dummy{
  transition:border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  border:1px dashed var(--edge-hot); border-radius:var(--r-sm); padding:var(--s2) var(--s3);
}
.dummy--tpl{ border-style:solid; border-color:var(--ink-3); color:var(--ink); }
.dummy--gone{ color:var(--ink-3); text-decoration:line-through; opacity:.6; }
.twins__note{ margin:var(--s4) 0 0; font-family:var(--sans); font-size:var(--t-body); line-height:1.7; color:var(--ink-3); max-width:60ch; }

.selfhost{
  margin:var(--s5) 0 0; font-family:var(--sans); font-size:var(--t-lede); line-height:1.7; color:var(--ink-2); max-width:var(--prose);
}

/* ── BRING YOUR OWN DATA ──────────────────────────────────── */
.byod{
  margin:var(--s7) 0 0; padding:0; list-style:none;
  display:grid; gap:var(--s5);
}
.byod__step{
  /* minmax(0,1fr), not 1fr: the code block's `white-space:pre` gives the
     track a min-content width of the longest line, which blew the page
     out horizontally at phone widths */
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4);
  align-items:start;
  padding:clamp(24px,2.6vw,40px); border:1px solid var(--edge); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),var(--panel-deep));
  box-shadow:var(--e1), var(--bezel);
  transition:border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.byod__step:hover{ border-color:var(--edge-hot); box-shadow:var(--e2), var(--bezel); transform:translateY(-2px); }
.byod__n{
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:var(--track-label); color:var(--ink-3);
  padding-top:2px;
}
.byod__body{ min-width:0; }
.byod__body h3{
  margin:0; font-family:var(--sans); font-size:var(--t-h3); font-weight:640;
  line-height:1.3; letter-spacing:-.014em; color:var(--ink);
}
.byod__body > p{
  margin:var(--s3) 0 0; font-family:var(--sans); font-size:var(--t-body);
  line-height:1.7; color:var(--ink-3); max-width:64ch;
}
.byod__body code{ font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.byod__code{
  margin:var(--s4) 0 0; padding:var(--s4);
  border:1px solid var(--edge); border-radius:var(--r-sm);
  background:var(--panel-2);
  overflow-x:auto;
}
.byod__code code{
  font-family:var(--mono); font-size:12.5px; line-height:1.8;
  color:var(--ink-2); white-space:pre; display:block;
}

/* Instruction left, the command you actually paste on the right.
   The step whose payload is prose rather than a shell block keeps a
   single column, so the grid never opens a hole. */
@media (min-width:1080px){
  .byod__body{
    display:grid; align-items:start;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:clamp(32px,3.4vw,56px); row-gap:var(--s3);
  }
  .byod__body h3,
  .byod__body > p{ grid-column:1; }
  .byod__code{ grid-column:2; grid-row:1 / span 2; margin-top:0; align-self:stretch; }
  .byod__step:not(:has(.byod__code)) .byod__body{ grid-template-columns:minmax(0,1fr); }
  .byod__step:not(:has(.byod__code)) .byod__body > p{ max-width:78ch; }
}

/* ── CLOSE ────────────────────────────────────────────────── */
.close{
  max-width:var(--measure); margin:var(--rhythm) auto 0;
  padding:clamp(56px,7vw,96px) var(--pad-x); text-align:center;
  border-top:1px solid var(--edge);
}
.close h2{ max-width:none; font-size:clamp(30px,4.2vw,56px); }
.close p{ margin:var(--s4) auto var(--s7); max-width:52ch; font-family:var(--sans); font-size:clamp(16px,1.3vw,20px); line-height:1.55; color:var(--ink-2); }

/* ═══ SIGN-OFF ══════════════════════════════════════════════════
   The page's emotional close. Full-bleed: the lab's own trace runs
   edge to edge with its heartbeat spikes and the small red gap at
   impact centre, and the name sits beneath it at full size, cropped
   by the bottom of the frame. The gradient fill etches the letters —
   bright at the crown, dissolving into the floor at the crop — so it
   reads as a surface the page ends on, not a second logo.
   ─────────────────────────────────────────────────────────────── */
.signoff{
  margin-top:clamp(40px,6vw,72px);
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
}

/* The trace, masked away at BOTH horizontal ends so it has no visible
   start or finish — it is simply passing through the page. Stroke is a
   gradient: ink at the edges, a whisper of the health green at centre. */
.sig-line{ stroke:var(--ink); opacity:.34; stroke-dasharray:960; stroke-dashoffset:0; }
.sig-gap { stroke:var(--red);  opacity:.5; }
.sig-stop-ink  { stop-color:var(--ink);   stop-opacity:.55; }
.sig-stop-green{ stop-color:var(--green); stop-opacity:.9; }

.signoff__pulse{
  --rise:0px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.signoff__pulse svg{ display:block; width:100%; height:clamp(38px,5.5vw,84px); overflow:visible; }
.signoff__pulse .sig-line{ opacity:1; filter:drop-shadow(0 0 6px var(--green-glow)); }
.signoff__pulse.in .sig-line{ animation:sig-draw 1600ms var(--ease) both; }
.signoff__pulse.in .sig-line--b{ animation-delay:140ms; }
@keyframes sig-draw{ from{ stroke-dashoffset:960; } }

/* The name, at the size it deserves. The gradient runs bright at the
   crown, mid through the body, and reaches full transparency at 88% —
   so the letterforms DISSOLVE into the floor instead of being cut off.
   The negative bottom margin then crops what little is left. */
.signoff__word{
  --rise:60px;
  margin:clamp(4px,1vw,14px) 0 -.06em;
  padding:0 var(--gut);
  font-family:var(--mono); font-weight:700;
  font-size:clamp(5rem, 33vw, 26rem); line-height:.82;
  letter-spacing:-.045em; white-space:nowrap;
  /* Once the clamp reaches its 26rem ceiling the word no longer spans the
     viewport, so without this it hangs against the left gutter with dead
     space beside it. Centred, it stays optically anchored at every width. */
  text-align:center;
  transition-delay:260ms !important;
  transition-timing-function:var(--ease-strong);

  color:var(--ink);
  background-image:var(--signoff-fill);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .signoff__word{
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}

/* ── the ambient heartbeat ────────────────────────────────────
   Fixed to the bottom edge, masked so it fades upward into nothing.
   landing.js drives its opacity from scroll position and hands it
   off to the sign-off pulse as the finale arrives. */
.ambient{
  position:fixed; inset:auto 0 0 0; height:clamp(110px,16vh,190px);
  z-index:0; pointer-events:none; opacity:.1; overflow:hidden;
  -webkit-mask-image:linear-gradient(0deg, #000, #000 42%, transparent);
  mask-image:linear-gradient(0deg, #000, #000 42%, transparent);
}
.ambient svg{ display:block; width:100%; height:100%; }
/* named explicitly — a blanket `> *` rule here would restyle the
   skip link's position and drop it into the flow */
.landing > header,
.landing > main,
.landing > footer{ position:relative; z-index:1; }

/* ── FOOT ─────────────────────────────────────────────────── */
.foot--landing{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  text-align:left; margin-top:var(--s7);
}
.foot__link{ color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--edge); }
.foot__link:hover{ color:var(--ink); border-color:var(--ink-2); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
/* Below the two-column threshold the instrument column drops under
   the claim and the disc shrinks to a plate-sized mark beside its
   own annotation, so the hero still opens with the sentence. */
@media (max-width:1140px){
  .hero__inner{ grid-template-columns:1fr; gap:var(--s6); }
  .hero__stage{ gap:var(--s4); }
  .hero__disc{ flex-direction:row; align-items:center; justify-content:flex-start; gap:var(--s4); }
  .hero__mark{ width:min(100%,84px); }
  .hero__disc-note::before{ display:none; }
  .hero__pitch{ max-width:16ch; }
  #teaser{ height:112px; }
}
@media (max-width:860px){
  .receipts{ grid-template-columns:1fr; }
  .receipt{ padding:var(--s5) 0; gap:var(--s3); }
  .receipt:not(:first-child){ padding-left:0; }
  .band .receipt + .receipt{ border-left:0; border-top:1px solid var(--amber-dim); }
}
/* the loop folds from five across, to three, to a vertical rail —
   the connector rotating with it each time */
@media (max-width:1000px){
  .loop{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5) 0; }
  .loop__step:nth-child(3n+1){ margin-left:0; }
  .loop__step:nth-child(3n+1)::before,
  .loop__step:nth-child(3n+1)::after{ display:none; }
}
@media (max-width:620px){
  .loop{ grid-template-columns:1fr; gap:var(--s5) 0; }
  .loop__step{ margin-left:0 !important; }
  .loop__step + .loop__step::before{
    display:block; left:var(--s5); top:calc(var(--s5) * -1); width:1px; height:var(--s5);
  }
  .loop__step + .loop__step::after{
    display:block; left:calc(var(--s5) - 3px); top:-7px; transform:none;
    border-left:3.5px solid transparent; border-right:3.5px solid transparent;
    border-top:5px solid var(--edge-hot); border-bottom:0;
  }
}
/* the top rail owns that corner below this width — one badge, not two */
@media (max-width:1080px){
  .secrail{ display:none; }
}
@media (max-width:760px){
  .steps{ grid-template-columns:1fr; }
  .topo--big .topo__flow{ flex-direction:column; align-items:stretch; }
  .topo--big .node + .node{ margin-left:0; margin-top:var(--s5); }
  .topo--big .node + .node::before{ left:22px; top:-18px; width:1px; height:14px; }
  .topo--big .node + .node::after{
    left:19px; top:-6px; transform:none;
    border-left:3.5px solid transparent; border-right:3.5px solid transparent;
    border-top:5px solid var(--edge-hot); border-bottom:0;
  }
  .foot--landing{ flex-direction:column; text-align:center; }
}
@media (max-width:640px){
  .hero__pitch{ max-width:13ch; }
  #teaser{ height:96px; }
  .step{ padding:var(--s5) var(--s4); }
  .claim__line{ padding-left:var(--s4); }
  .claim__prior, .claim__foot{ padding-left:var(--s4); }
  .plate i:not(:first-child){ margin-left:var(--s3); padding-left:var(--s3); }
}