@import url('tokens.css?v=1789827737');

/* ---- fonts, local, no CDN ---- */
/* variable axes: opsz drives the high-contrast serif look at display sizes */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/fraunces-var.woff2') format('woff2-variations'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:300 700; font-display:swap;
  src:url('../fonts/fraunces-italic-var.woff2') format('woff2-variations'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/spacegrotesk-var.woff2') format('woff2-variations'); }
@font-face { font-family:'Fira Code'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/firacode-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/barlowcondensed-600.woff2') format('woff2'); }

:root {
  --f-display:'Fraunces', Georgia, serif;
  --f-body:'Space Grotesk', system-ui, sans-serif;
  --f-mono:'Fira Code', ui-monospace, monospace;
  --f-ui:'Barlow Condensed', sans-serif;
  --measure: 62ch;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0;
  background:var(--color-background);
  color:var(--color-foreground);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; display:block; }
a { color:var(--color-display-emphasis); }
:focus-visible { outline:2px solid var(--color-ring); outline-offset:3px; }

.wrap { max-width:1080px; margin:0 auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }

/* the one particle field. Everything else is a formation slot the pool gets recruited into. */
#field { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
.wrap { position:relative; z-index:1; }
/* The content scrims bleed ~40px past each side so their fade has somewhere to go.
   On a narrow viewport the content box already fills the screen, so that bleed became
   real horizontal overflow. overflow-x:clip removes it without creating a scroll
   container, so overflow-y stays visible (unlike overflow-x:hidden, which would
   force the other axis to auto and break sticky/anchored behaviour). */
.wrap { overflow-x: clip; }

/* ---- header, shared on all 4 pages ---- */
.site-head {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.1rem; flex-wrap:wrap;
  border-bottom:1px solid var(--color-border);
}
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--color-foreground); }
/* logo is a navy->teal gradient; unlifted it disappears against the near-black ground */
.brand img { width:28px; height:28px; filter:brightness(1.95) saturate(1.15); }
.brand span { font-family:var(--f-mono); font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; }
.site-nav { display:flex; gap:1.5rem; }
.site-nav a {
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-muted-foreground); text-decoration:none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--color-label); }

/* ---- type ---- */
h1,h2,h3 { font-family:var(--f-display); font-weight:400; line-height:1.06; text-wrap:balance; margin:0;
  font-variation-settings:'opsz' 144, 'SOFT' 0, 'WONK' 0; letter-spacing:-.005em; }
h1 { font-size:clamp(2.5rem,6vw,4.5rem); }
h2 { font-size:clamp(1.9rem,3.4vw,2.6rem); }
h3 { font-size:1.4rem; }
em, .em { font-style:italic; font-weight:400; color:var(--color-display-emphasis); }
p { max-width:var(--measure); }
.lede { font-size:clamp(1.1rem,1.7vw,1.3rem); color:var(--color-muted-foreground); }
.eyebrow {
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-label); margin:0 0 1.1rem;
}
.muted { color:var(--color-muted-foreground); }
.stat { font-family:var(--f-mono); color:var(--color-signal-caught); font-weight:600; }

/* ---- buttons ---- */
.btn {
  display:inline-block; font-family:var(--f-ui); font-size:1rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; border:none;
  padding:var(--button-primary-padding-y) var(--button-primary-padding-x);
  border-radius:var(--button-primary-radius);
  transition:transform 150ms ease, opacity 150ms ease;
}
.btn:hover { transform:translateY(-1px); opacity:.92; }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }
.btn-primary { background:var(--button-primary-bg); color:var(--button-primary-fg); }
.btn-secondary {
  background:transparent; color:var(--button-secondary-fg);
  border:1px solid var(--button-secondary-border);
}

/* ---- sections ---- */
main section { padding-block:clamp(3.5rem,9vw,var(--spacing-section)); }
main section + section { border-top:1px solid var(--color-border); }
/* hero: one centred column. The mark sits BELOW the ask, holding the page rather
   than competing with the headline for the first thing a visitor reads. */
.hero { display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-block:clamp(2rem,5vh,3.5rem) clamp(1rem,3vh,2rem) !important; }
.hero-copy { max-width:60rem; display:flex; flex-direction:column; align-items:center; }
.hero h1 { max-width:18ch; }
.hero .lede { margin:1.25rem auto 1.75rem; max-width:52ch; }
.hero .metrics { justify-content:center; }
.hero .metric { text-align:center; }
.hero .metric .l { margin-inline:auto; }
.hero .metrics-note { margin-inline:auto; text-align:center; }
#hero-slot { width:min(360px,64vw); aspect-ratio:1; margin-top:clamp(.5rem,2vh,1.5rem); }
@media (max-width:820px){ #hero-slot { width:min(300px,68vw); } }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin-top:2.5rem; }
.card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius); padding:var(--card-padding);
}
.card .tag {
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-signal-decaying); display:block; margin-bottom:.55rem;
}
.card p { font-size:.95rem; color:var(--color-muted-foreground); margin:.4rem 0 0; }

.case { display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:clamp(1.5rem,4vw,3.5rem); }
.case + .case { margin-top:clamp(2.5rem,6vw,4.5rem); padding-top:clamp(2.5rem,6vw,4.5rem); border-top:1px solid var(--color-border); }
.case-figure { aspect-ratio:1; width:100%; }
@media (max-width:720px){ .case { grid-template-columns:1fr; } }

blockquote {
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-variation-settings:'opsz' 144;
  font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.4;
  max-width:34ch; margin:0 auto 1.25rem; text-align:center; text-wrap:balance;
}
.attrib { display:block; text-align:center; font-family:var(--f-mono); font-size:.75rem; color:var(--color-muted-foreground); }

.cta-row { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ---- forms ---- */
form { max-width:34rem; display:grid; gap:1.25rem; margin-top:2.5rem; }
label { display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-label); margin-bottom:.45rem; }
input[type=text], input[type=email], input[type=tel], textarea {
  width:100%; font-family:inherit; font-size:1rem;
  background:var(--input-bg); color:var(--input-fg);
  border:1px solid var(--input-border); border-radius:var(--input-radius);
  padding:var(--input-padding-y) var(--input-padding-x);
}
textarea { min-height:6.5rem; resize:vertical; }
.consent { display:flex; gap:.7rem; align-items:flex-start; }
.consent input { margin-top:.3rem; width:1.05rem; height:1.05rem; accent-color:var(--color-signal-caught); flex-shrink:0; }
.consent label { font-family:var(--f-body); font-size:.92rem; text-transform:none; letter-spacing:0;
  color:var(--color-muted-foreground); margin:0; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-msg { font-family:var(--f-mono); font-size:.85rem; min-height:1.4em; }
.form-msg[data-state=error] { color:var(--color-destructive); }
.form-msg[data-state=ok] { color:var(--color-signal-decaying); }

/* ---- log ---- */
.log-empty { border:1px dashed var(--color-border); border-radius:var(--card-radius);
  padding:2.5rem; text-align:center; color:var(--color-muted-foreground); font-family:var(--f-mono); font-size:.9rem; }

/* ---- footer ---- */
.site-foot {
  border-top:1px solid var(--color-border); padding-block:2.5rem 1.75rem; margin-top:2rem;
  font-size:.85rem; color:var(--color-body-dim);
}
.foot-top { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  flex-wrap:wrap; padding-bottom:1.75rem; }
.foot-copy { color:var(--color-muted-foreground); }
.foot-cols { display:grid; gap:2rem clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  padding-block:2rem; border-top:1px solid var(--color-border); }
.foot-h { margin:0 0 1rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-muted-foreground); }
.foot-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.foot-col a { color:var(--color-body-dim); text-decoration:none; }
.foot-col a:hover, .foot-bottom a:hover { color:var(--color-foreground); }
.foot-col a[aria-current="page"] { color:var(--color-foreground); }
.foot-bottom { padding-block:1.5rem; border-top:1px solid var(--color-border);
  display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap; }
.foot-legal { display:flex; gap:1.5rem; flex-wrap:wrap; }
.foot-legal a { color:var(--color-muted-foreground); text-decoration:none; }
.foot-legal a:hover, .foot-legal a[aria-current="page"] { color:var(--color-body-dim); }
.foot-bottom a { color:var(--color-body-dim); text-decoration:none; }

/* ---- exhibits (case studies), full-viewport scroll sections ---- */
.exhibit {
  min-height:100vh; display:grid; align-items:center;
  padding-block:clamp(2rem,6vh,4rem);
}
main .exhibit + .exhibit { border-top:none; }
/* The formation now sits INSIDE the card, in a window cut out of its background. The
   standard section scrim would drop a dark plate between the particle field and that
   window, so the exhibits opt out of it. Text contrast comes from the card's own
   background instead, which is opaque exactly where the words are. */
main .exhibit::before { display:none; }

/* One card per case, the full width of the page and most of its height, because the
   card IS the page here. The particle formation lives in the left third of it, in a
   transparent window, so the dust gathers beside the words rather than off in the
   margin. No backdrop-filter: it would blur the field showing through that window. */
.plaque {
  display:grid; grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
  align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  min-height:min(74vh,660px);
  background:linear-gradient(97deg,
    rgb(6 10 22 / 0)    0%,
    rgb(6 10 22 / .18) 24%,
    rgb(10 17 40 / .78) 42%,
    rgb(12 21 48 / .9)  56%,
    rgb(8 13 30 / .88) 100%);
  border:1px solid var(--color-border); border-left:2px solid var(--color-label);
  border-radius:var(--card-radius); padding:clamp(1.75rem,3.2vw,3rem);
}
.plaque-figure { width:100%; aspect-ratio:1; max-height:44vh; }
.plaque-body { min-width:0; }
@media (max-width:880px){
  .exhibit { min-height:auto; }
  .plaque {
    grid-template-columns:1fr; min-height:0; gap:1.5rem;
    background:linear-gradient(180deg,
      rgb(6 10 22 / 0)    0%,
      rgb(6 10 22 / .2)  16%,
      rgb(10 17 40 / .8) 30%,
      rgb(12 21 48 / .9) 44%,
      rgb(8 13 30 / .88) 100%);
  }
  .plaque-figure { max-height:26vh; }
}
.plaque-head {
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.9rem;
}
.plaque-head .no { font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--color-display-emphasis); }
.plaque-head .ref { color:var(--color-muted-foreground); }
.plaque h2 { font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:1.1rem; }
.plaque .meta {
  font-family:var(--f-mono); font-size:.7rem; line-height:2; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-muted-foreground);
}
.plaque hr { border:none; border-top:1px solid var(--color-border); margin:1.4rem 0; }
.plaque p { font-size:1.02rem; max-width:56ch; }
.plaque p + p { margin-top:.9rem; }
.plaque-foot {
  margin-top:1.4rem; padding-top:1rem; border-top:1px dotted var(--color-border);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-label);
}
.hall-meta {
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-muted-foreground); padding-block:.9rem;
}
.hall-meta .count { color:var(--color-label); }
.descend { text-align:center; padding-bottom:3rem; }
.descend span { font-family:var(--f-display); font-style:italic; color:var(--color-muted-foreground); font-size:.95rem; }
.descend i { display:block; width:1px; height:44px; background:linear-gradient(var(--color-label), transparent); margin:.8rem auto 0; }

/* ---- hero metrics ---- */
.metrics { display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem); margin:1.5rem 0 1.5rem; }
.metric .n {
  font-family:var(--f-mono); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:400;
  color:var(--color-display-emphasis); font-variant-numeric:tabular-nums;
  line-height:1.1; display:block;
}
.metric .l {
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-muted-foreground); margin-top:.4rem; display:block; max-width:16ch;
}
.metrics-note {
  font-size:.8rem; color:var(--color-muted-foreground); margin:0 0 1.5rem; max-width:52ch; opacity:.8;
}

/* ---- stack band ---- */
.stack-band { text-align:center; }
/* global `p { max-width: 62ch }` would centre this inside a narrow left-aligned box */
.stack-band .eyebrow { margin:0 auto 2rem; max-width:none; }
.stack-band h2 { margin:0 auto 2.5rem; max-width:22ch; }
/* flex, not auto-fit grid: with 11 items the grid leaves a ragged final row, flex
   centres both rows and keeps the spacing even */
.stack-grid {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(1.5rem,3.5vw,3rem); max-width:860px; margin:0 auto; padding:0;
}
.stack-grid li { list-style:none; display:flex; align-items:center; justify-content:center;
  height:40px; width:76px; }
/* mask, not <img>, so one brand colour can't fight the palette. Eleven vendor
   colours would undo the two-accent discipline the whole design rests on. */
.stack-grid .mk {
  width:100%; height:100%;
  background-color:var(--color-muted-foreground);
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  transition:background-color 200ms ease;
}
.stack-grid li:hover .mk { background-color:var(--color-display-emphasis); }
/* Azure has no openly-licensed mark (Microsoft had theirs removed from Simple
   Icons), so it is set as a wordmark rather than borrowing a protected logo. */
.stack-grid .word {
  font-family:var(--f-ui); font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-muted-foreground); transition:color 200ms ease;
}
.stack-grid li:hover .word { color:var(--color-display-emphasis); }

.mk-openai { -webkit-mask-image:url('../img/logos/openai.svg'); mask-image:url('../img/logos/openai.svg'); }
.mk-gemini { -webkit-mask-image:url('../img/logos/gemini.svg'); mask-image:url('../img/logos/gemini.svg'); }
.mk-anthropic { -webkit-mask-image:url('../img/logos/anthropic.svg'); mask-image:url('../img/logos/anthropic.svg'); }
.mk-python { -webkit-mask-image:url('../img/logos/python.svg'); mask-image:url('../img/logos/python.svg'); }
.mk-postgres { -webkit-mask-image:url('../img/logos/postgres.svg'); mask-image:url('../img/logos/postgres.svg'); }
.mk-sqlite { -webkit-mask-image:url('../img/logos/sqlite.svg'); mask-image:url('../img/logos/sqlite.svg'); }
.mk-supabase { -webkit-mask-image:url('../img/logos/supabase.svg'); mask-image:url('../img/logos/supabase.svg'); }
.mk-n8n { -webkit-mask-image:url('../img/logos/n8n.svg'); mask-image:url('../img/logos/n8n.svg'); }
.mk-gcloud { -webkit-mask-image:url('../img/logos/gcloud.svg'); mask-image:url('../img/logos/gcloud.svg'); }
.mk-aws { -webkit-mask-image:url('../img/logos/aws.svg'); mask-image:url('../img/logos/aws.svg'); }

/* ---- process. Numbered here because it IS a sequence: order carries real
   information, unlike the three situations, which are parallel and stay unnumbered. ---- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(1.5rem,3vw,2.5rem); margin-top:2.5rem; }
.step { border-top:1px solid var(--color-border); padding-top:1rem; }
.step .n { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; color:var(--color-label); display:block; margin-bottom:.6rem; }
.step h3 { font-size:1.2rem; margin-bottom:.5rem; }
.step p { font-size:.92rem; color:var(--color-muted-foreground); margin:0; max-width:34ch; }

/* ---- who it's for / not for ---- */
.fit { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1.5rem,4vw,3rem); margin-top:2.5rem; }
.fit-col h3 { font-size:1.25rem; margin-bottom:1rem; }
.fit-col ul { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.fit-col li { font-size:.95rem; color:var(--color-muted-foreground); padding-left:1.5rem; position:relative; max-width:42ch; }
.fit-col li::before { position:absolute; left:0; font-family:var(--f-mono); font-size:.85rem; }
.fit-yes li::before { content:'+'; color:var(--color-signal-decaying); }
.fit-no li::before { content:'\2212'; color:var(--color-muted-foreground); opacity:.6; }

/* ---- faq. <details> is the native accordion: no JS, keyboard and screen-reader
   support for free, and it still works if scripts fail. ---- */
.faq { max-width:56rem; margin-top:2.5rem; }
.faq details { border-bottom:1px solid var(--color-border); }
.faq summary {
  cursor:pointer; list-style:none; padding:1.15rem 2rem 1.15rem 0; position:relative;
  font-family:var(--f-display); font-size:1.12rem; color:var(--color-foreground);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:'+'; position:absolute; right:.2rem; top:1rem;
  font-family:var(--f-mono); color:var(--color-label); font-size:1.2rem;
}
.faq details[open] summary::after { content:'\2212'; }
.faq summary:focus-visible { outline:2px solid var(--color-ring); outline-offset:2px; }
.faq-more { margin-top:1.5rem; }
.faq-more a { color:var(--color-signal-caught); text-decoration:none; }
.faq-more a:hover { text-decoration:underline; }
.faq details p { margin:0 0 1.25rem; color:var(--color-body-dim); font-size:.96rem;
  line-height:1.65; max-width:62ch; }

/* ---- leakage calculator ---- */
.calc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,4rem); margin-top:2.5rem; align-items:start; }
@media (max-width:820px){ .calc { grid-template-columns:1fr; } }
.calc-fields { display:grid; gap:1.5rem; }
.calc-field label { display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--color-label); margin-bottom:.5rem; }
.calc-field .row { display:flex; align-items:center; gap:1rem; }
.calc-field input[type=number] {
  width:100%; font-family:var(--f-mono); font-size:1.05rem;
  background:var(--input-bg); color:var(--input-fg);
  border:1px solid var(--input-border); border-radius:var(--input-radius);
  padding:.7rem .85rem;
}
.calc-field input[type=range] { width:100%; accent-color:var(--color-signal-decaying); }
.calc-field .val { font-family:var(--f-mono); font-size:.95rem; color:var(--color-foreground);
  min-width:3.5ch; text-align:right; font-variant-numeric:tabular-nums; }
.calc-out {
  background:var(--card-bg); border:1px solid var(--card-border); border-left:2px solid var(--color-label);
  border-radius:var(--card-radius); padding:clamp(1.5rem,3vw,2rem);
}
.calc-out .big {
  font-family:var(--f-mono); font-size:clamp(1.6rem,3.2vw,2.5rem); color:var(--color-display-emphasis);
  font-variant-numeric:tabular-nums; line-height:1.1; display:block; white-space:nowrap;
}
.calc-out .cap { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-muted-foreground); display:block; margin-top:.7rem; line-height:1.7; }
.calc-out dl { margin:1.5rem 0 0; padding-top:1.25rem; border-top:1px solid var(--color-border);
  display:flex; flex-direction:column; gap:.7rem; }
.calc-out .r { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.calc-out dt { font-size:.86rem; color:var(--color-muted-foreground); }
.calc-out dd { margin:0; font-family:var(--f-mono); font-size:.9rem;
  font-variant-numeric:tabular-nums; color:var(--color-foreground); white-space:nowrap; }

.cta-wrap { display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.cta-sub { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-muted-foreground); }
.cta-row .cta-sub { flex-basis:100%; }
.cta-wrap.calc-cta { display:flex; margin:1.25rem 0 0; padding-top:1.25rem;
  border-top:1px solid var(--color-border); align-items:center; }

/* ---- featured case: the one that matches the ICP, sat above the three supporting ones ---- */
.feature-case {
  margin-top:2.5rem; padding:clamp(1.5rem,3vw,2.25rem);
  background:var(--card-bg); border:1px solid var(--card-border);
  border-left:2px solid var(--color-label); border-radius:var(--card-radius);
}
.feature-case .tag { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-label); display:block; margin-bottom:1rem; }
.feature-case .fc-lede { font-size:1.05rem; color:var(--color-foreground); max-width:62ch; margin:0 0 1.1rem; }
.feature-case .fc-stat { margin:0; font-size:1.05rem; color:var(--color-muted-foreground); max-width:56ch; }
.feature-case .fc-stat strong { font-family:var(--f-mono); font-weight:400; color:var(--color-display-emphasis); }

/* ---- centred sections ---- */
.centered { text-align:center; }
.centered p, .centered .lede { margin-left:auto; margin-right:auto; }
.centered h2 { margin-left:auto; margin-right:auto; }
/* the calculator is a form, so its fields stay left-aligned inside a centred block */
.centered .calc { text-align:left; max-width:60rem; margin-left:auto; margin-right:auto;
  align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.centered .calc label, .centered .calc-out { text-align:left; }

/* CTA: supporting line sits directly under the button and centres on it */
.cta-wrap { display:inline-flex; flex-direction:column; align-items:center; gap:.75rem; }
.cta-wrap .cta-sub { text-align:center; }
.cta-row { flex-direction:column; gap:.85rem; }

/* ---- the story: a real sequence in time, so it is numbered ---- */
.measure-c { max-width:58ch; margin-inline:auto; }
.story { list-style:none; counter-reset:beat; padding:0; margin:2.25rem auto 0;
  max-width:46ch; text-align:left; display:flex; flex-direction:column; gap:1.05rem; }
.story li { counter-increment:beat; position:relative; padding-left:2.6rem;
  color:var(--color-muted-foreground); font-size:1.02rem; }
.story li::before { content:counter(beat); position:absolute; left:0; top:.05em;
  font-family:var(--f-mono); font-size:.8rem; color:var(--color-label);
  width:1.6rem; height:1.6rem; border:1px solid var(--color-border); border-radius:50%;
  display:grid; place-items:center; }
/* the last beat is the one that costs money */
.story li:last-child { color:var(--color-foreground); }
/* the punch line is the point of the whole story, so it is set larger than the beats
   that lead to it and larger than a .lede: this is the sentence that has to sting */
.story-punch { margin:2.5rem auto 0; max-width:min(40rem, 94%); color:var(--color-foreground);
  letter-spacing:-.01em; }

/* ---- the decay block: three time windows, state carried by colour not decoration ---- */
.decay { padding:0; margin-top:2rem; }
.decay li { list-style:none; border-top:3px solid var(--color-muted-foreground); position:relative; }
.decay { padding-top:2.6rem; }
/* The three cards carry the same five rows (tag, state, body, odds, source) but the
   body copy differs in length, which left the 21x figure and the source line sitting
   at a different height in each card. Subgrid makes all three share one set of rows,
   so every line reads across. gap:0 because the subgrid would otherwise inherit the
   1.5rem column gap between every row inside the card. */
.decay { grid-template-rows:repeat(5,auto); }
.decay li { display:grid; grid-template-rows:subgrid; grid-row:span 5; gap:0; }
.decay li[data-state=alive]   { border-top-color:var(--color-signal-caught); }
.decay li[data-state=cooling] { border-top-color:var(--color-body-dim); }
.decay li[data-state=gone]    { opacity:.72; }
.card .d-state { font-family:var(--f-ui); text-transform:uppercase; letter-spacing:.1em;
  font-size:1.15rem; margin:.55rem 0 .7rem; }
[data-state=alive]   .d-state { color:var(--color-signal-caught); }
[data-state=cooling] .d-state { color:var(--color-body-dim); }
[data-state=gone]    .d-state { color:var(--color-muted-foreground); }
.card .d-odds { margin-top:1.1rem; color:var(--color-foreground); }
.d-odds strong { font-family:var(--f-mono); font-size:1.45rem; color:var(--hue, var(--color-signal-caught));
  display:block; margin-bottom:.15rem; }
/* superseded: the figure now takes its card's --hue like everything else */
.card .d-src { font-family:var(--f-mono); font-size:.7rem; line-height:1.5;
  color:var(--color-muted-foreground); border-top:1px solid var(--color-border);
  padding-top:.75rem; margin-top:1.1rem; }
.synthesis { margin-top:2.5rem; color:var(--color-foreground); }

/* The mobile collapse for .calc lives here, at .centered .calc specificity and after it.
   The earlier @media rule targets bare `.calc` (0,1,0) and was being beaten by
   `.centered .calc` (0,2,0), so the calculator stayed two columns at 360px and the
   output figure overflowed its own panel. Keep these selectors in sync. */
@media (max-width:820px){
  .calc, .centered .calc { grid-template-columns:minmax(0,1fr); }
}

/* the one-word answer. Gold because in this palette gold is the signal that got caught. */
.one-word { font-size:clamp(3rem,8vw,5.25rem); color:var(--color-display-emphasis);
  line-height:1; margin:.4rem 0 0; }
.fix-line { color:var(--color-foreground); font-size:clamp(1.15rem,2vw,1.45rem); margin-top:1.1rem; }
.fix-line + .lede { margin-top:1.75rem; }

/* ---- legibility pass 2026-08-29 ----
   Anuj flagged the step copy and the fit lists as hard to read. Two causes, both fixed:
   these sections had no [data-quiet], so full-brightness starfield ran behind small text,
   and the text used --color-muted-foreground (6.4:1) at under 15px. Now damped behind,
   set in --color-body-dim (9.7:1, AAA) and sized up to 1rem. */
.step p, .fit-col li, .faq details p { color:var(--color-body-dim); font-size:1rem; }
.fit-col li { max-width:38ch; }

/* Steps read as a centred row: the number sits above the heading rather than beside it. */
.steps-centered .step { text-align:center; border-top:none; padding-top:0; }
.steps-centered .step p { margin-inline:auto; max-width:30ch; }
.steps-centered .step .n {
  margin:0 auto .8rem; width:2.2rem; height:2.2rem; border:1px solid var(--color-border);
  border-radius:50%; display:grid; place-items:center; font-size:.78rem;
}
/* the fit columns stay left-aligned: a list of criteria is scanned, not read as prose */
.fit-col { text-align:left; }
/* the currency control matches the number inputs beside it */
/* appearance:none is required: without it macOS/iOS paint the native control and ignore
   background and color entirely, which rendered a white box with black text on the dark
   ground. The chevron is an inline SVG data URI so it inherits no external request. */
.calc-field select {
  width:100%; background-color:var(--color-surface); color:var(--color-foreground);
  border:1px solid var(--color-border); border-radius:var(--card-radius);
  padding:.6rem 2.2rem .6rem .7rem;
  font-family:var(--f-mono); font-size:.95rem; line-height:1.4;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23C9922E' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; background-size:.7rem;
}
.calc-field select:hover { border-color:var(--color-label); }
/* the dropdown list itself is drawn by the OS, so its colours must be set explicitly
   or the options inherit the page's light-on-dark into a light-drawn menu */
.calc-field select option { background:var(--color-surface); color:var(--color-foreground); }

/* the "why speed" line sits between the one-word answer and the promise: it is the
   reasoning, so it reads quieter than both, not louder. */
.speed-why { margin-top:1.1rem; color:var(--color-muted-foreground); font-style:italic; }
.speed-why + .fix-line { margin-top:.9rem; }

/* ---- where it leaks: each row pairs a leak with the system that closes it ----
   Deliberately unnumbered. These are parallel failure points, not a sequence, so
   numbering them would encode an order that does not exist. The pairing is the
   information, so the two halves sit side by side and share a row rule. Colour
   follows the palette's existing meaning: teal is the signal decaying, gold is it caught. */
.leaks { list-style:none; padding:0; margin:2.75rem 0 0; }
.leaks li {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  padding:1.75rem 0; border-top:1px solid var(--color-border);
}
.leaks li:last-of-type { border-bottom:1px solid var(--color-border); }
.leaks p { margin:0; max-width:46ch; }
.leak-lbl {
  display:block; margin-bottom:.55rem; font-family:var(--f-mono);
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
}
.leak-where .leak-lbl { color:var(--color-body-dim); }
.leak-fix .leak-lbl { color:var(--color-signal-caught); }
.leak-where p { color:var(--color-foreground); font-size:1.02rem; }
.leak-fix p { color:var(--color-body-dim); font-size:1rem; }
.leaks-foot { margin-top:2rem; }
@media (max-width:720px){
  .leaks li { grid-template-columns:1fr; gap:1.1rem; }
}

/* ---- content scrim, 2026-09-12 ----------------------------------------------
   The particle field is atmosphere, never competition. Anything with words on it
   gets a soft pool of ground colour behind it so the type is the focal point and
   the field survives only in the margins and the gaps between blocks.

   Structural on purpose. The previous approach tagged sections [data-quiet] one at
   a time, which had reached 6 of 12 sections on the homepage and none at all on the
   other four pages. Opt-out is reliable where opt-in was not.

   Mechanics: .wrap is the stacking context (position:relative; z-index:1) above the
   canvas at z-index:0, so a ::before at z-index:-1 lands above the particles and
   below the text. The gradient fades to transparent well inside the edges, so there
   is no visible rectangle, only a softening. */
main section, .site-head, .site-foot { position: relative; }
main section::before, .site-head::before, .site-foot::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.5rem -2.5rem;
  background: radial-gradient(ellipse 78% 68% at 50% 50%,
    rgb(6 10 22 / .95) 0%,
    rgb(6 10 22 / .9)  42%,
    rgb(6 10 22 / .62) 68%,
    rgb(6 10 22 / 0)   86%);
}

/* Sections that host a particle formation must not be scrimmed as a whole, or the
   scrim would sit on top of the formation and hide it. Scrim only their text half. */
.hero::before, .exhibit::before { content: none; }
.hero-copy, .plaque { position: relative; }
.hero-copy::before, .plaque::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.5rem -2.5rem;
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    rgb(6 10 22 / .95) 0%,
    rgb(6 10 22 / .9)  42%,
    rgb(6 10 22 / .62) 68%,
    rgb(6 10 22 / 0)   86%);
}

/* ---- inline CTA, 2026-09-13 ----------------------------------------------
   Placed after a section has given the reader a reason to act, not at fixed
   intervals. Sits inside the preceding section's scrim gap, so it reads as a
   pause in the page rather than a new section: no divider rule, tighter
   padding, and a hairline above to separate it from the argument it follows. */
.cta-inline {
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(2.5rem, 6vw, 3.75rem);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  position: relative;
}
.cta-inline::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(90px, 30%); height: 1px; background: var(--color-border);
}
.cta-line {
  margin: 0; font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); color: var(--color-foreground);
  max-width: 30ch;
}
.cta-inline .cta-sub, .cta-inline .cta-alt {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--color-muted-foreground); max-width: 46ch;
}
.cta-inline .cta-alt { font-family: var(--f-body); font-size: .9rem; letter-spacing: 0; }

/* ---- the 60-second promise ----------------------------------------------
   Set apart from the ordinary cta-sub because it is a commitment, not a detail.
   Gold, because in this palette gold is the signal that got caught in time. */
.cta-sub.promise {
  color: var(--color-signal-caught); font-size: .8rem; letter-spacing: .05em;
}

/* Claim lines carry a small circled tick each, one per claim. Teal, because the
   tick is the shield: it must never read as the thing being protected (gold). */
.ticks { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:center; }
.ticks > span { display:inline-flex; align-items:flex-start; gap:.45rem; }
.ticks > span::before { content:"\2713"; flex:none; margin-top:.12em;
  width:1.15em; height:1.15em; border:1px solid var(--color-signal-decaying);
  border-radius:50%; color:var(--color-signal-decaying);
  font-size:.85em; line-height:1; display:inline-flex; align-items:center;
  justify-content:center; }

.promise-note {
  margin: 1.5rem auto 0; max-width: 52ch;
  font-size: .9rem; color: var(--color-body-dim); font-style: italic;
}

/* ---- hero wordmark + proof line, 2026-09-13 ----------------------------------
   The wordmark is a second particle formation below the rotating mark. It carries
   [data-still] so it never turns: the mark can spin, but the name has to stay
   readable at every scroll position, which is the whole point of it being there. */
#hero-word {
  width: min(520px, 78vw); aspect-ratio: 5 / 1;
  margin-top: clamp(.25rem, 1.5vh, .75rem);
}
.hero-proof {
  margin: clamp(1rem, 3vh, 1.75rem) 0 0;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-muted-foreground);
}

/* ---- the punch, staged ------------------------------------------------------
   Five separate beats instead of one paragraph. Each line gets its own weight so
   the eye steps down them, and the last line is the one that has to land: display
   face, largest type on the section, in the emphasis amber. */
.story-punch { display:flex; flex-direction:column; gap:.35rem; }
.story-punch p { margin:0; font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.3; }
.story-punch .punch-why {
  font-family:var(--f-display); font-style:italic; color:var(--color-muted-foreground);
  margin-top:.5rem;
}
.story-punch .punch-final {
  font-family:var(--f-display); color:var(--color-display-emphasis);
  font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.12; letter-spacing:-.01em;
  margin-top:.7rem; max-width:22ch; margin-inline:auto;
  /* balance stops the last word being stranded on a line of its own */
  text-wrap:balance;
}

/* ---- the road: How We Work ---------------------------------------------------
   Four stops on a single route. The spine is a real gradient rather than a plain
   rule: it runs teal (the signal still decaying) up to stop 03, resolves to gold
   there, and carries on. So the colour is saying the same thing the copy is, and
   03 is where the route arrives rather than just a bigger card. */
.road { list-style:none; padding:0; margin:0; position:relative; }
.road::before {
  content:''; position:absolute; top:.6rem; bottom:.6rem; left:27px; width:2px;
  background:linear-gradient(180deg,
    var(--color-signal-decaying) 0%,
    var(--color-signal-decaying) 34%,
    var(--color-signal-caught) 52%,
    var(--color-signal-caught) 68%,
    var(--color-border) 100%);
  opacity:.55;
}
.stop { position:relative; padding:0 0 clamp(2.5rem,6vw,4rem) 72px; }
.stop:last-child { padding-bottom:0; }
.stop-n {
  position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--f-mono); font-size:.82rem;
  color:var(--color-muted-foreground);
  background:var(--color-background); border:1px solid var(--color-border);
}
.stop-card h2 { font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 .7rem; }
.stop-card p { color:var(--color-body-dim); margin:0; max-width:54ch; }
.stop-meta {
  margin-top:.9rem !important; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-muted-foreground) !important;
}

/* stop 03 is the destination, so it gets the weight: gold marker, a card with a
   real surface behind it, and the only flag on the page. */
.stop-key .stop-n {
  width:64px; height:64px; left:-4px; color:var(--color-signal-caught);
  border-color:var(--color-signal-caught); font-size:.95rem;
}
.stop-key .stop-card {
  background:var(--card-bg); border:1px solid var(--color-border);
  border-left:3px solid var(--color-signal-caught); border-radius:var(--card-radius);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.stop-key .stop-card h2 { font-size:clamp(1.9rem,3.4vw,2.7rem); }
.stop-key .stop-card p { color:var(--color-foreground); }
.stop-flag {
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-signal-caught) !important;
  margin:0 0 .8rem !important;
}
.stop-points { list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.55rem; }
.stop-points li {
  position:relative; padding-left:1.4rem; font-size:.97rem; color:var(--color-body-dim);
}
.stop-points li::before {
  content:'+'; position:absolute; left:0; font-family:var(--f-mono);
  color:var(--color-signal-caught);
}
@media (max-width:600px){
  .road::before { left:19px; }
  .stop { padding-left:54px; }
  .stop-n { width:40px; height:40px; font-size:.72rem; }
  .stop-key .stop-n { width:46px; height:46px; left:-3px; }
}

/* Six nav items no longer fit a phone. Wrap rather than clip: the wrapper's
   overflow-x:clip was hiding the last items entirely instead of scrolling to them. */
.site-head { flex-wrap: wrap; row-gap: .5rem; }
.site-nav { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px){
  .site-head { justify-content: center; }
  .site-nav { justify-content: center; gap: .9rem 1.05rem; }
  .site-nav a { font-size: .72rem; }
}

/* ---- the drum: How We Work -----------------------------------------------
   DEFAULT is a plain stacked list. Only [drum-on], added by drum.js when motion
   is allowed, switches on the cylinder. So no JS, a JS error, or reduced motion
   all leave a readable page rather than four cards piled on one spot. */
.drum { list-style:none; margin:0; padding:0; display:grid; gap:clamp(1.5rem,4vw,2.5rem); }
.drum-card {
  background:var(--card-bg); border:1px solid var(--color-border);
  border-left:3px solid var(--color-signal-caught); border-radius:var(--card-radius);
  padding:clamp(1.75rem,3.4vw,3rem); position:relative;
}
.drum-card .stop-n {
  position:static; width:auto; height:auto; border:none; background:none;
  display:block; margin-bottom:.9rem; text-align:left;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.08em;
  color:var(--color-signal-caught);
}
.drum-card h2 { font-size:clamp(1.9rem,3.6vw,3rem); margin:0 0 1rem; line-height:1.1; }
.drum-card p { color:var(--color-body-dim); margin:0; max-width:60ch; font-size:clamp(1.02rem,1.5vw,1.22rem); }
.drum-card .stop-points { margin-top:1.5rem; }
.drum-card .stop-points li { font-size:clamp(1rem,1.35vw,1.1rem); }

/* drum mode. The extra segment on the height is the closing stack. */
.drum-wrap.drum-on { height:calc(5.4 * 92vh); }
.drum-on .drum-sticky {
  position:sticky; top:0; height:100vh;
  display:grid; place-items:center; perspective:1600px;
}
.drum-on .drum {
  display:block; position:relative; width:min(1020px, 94%);
  height:clamp(420px, 56vh, 520px); transform-style:preserve-3d;
}
.drum-on .drum-card {
  position:absolute; top:50%; left:50%; width:100%;
  transform-origin:center center; backface-visibility:hidden;
  will-change:transform, filter, opacity;
}
@media (max-width:720px){
  .drum-wrap.drum-on { height:calc(5.4 * 86vh); }
  .drum-on .drum { height:clamp(360px, 58vh, 440px); perspective:1000px; width:94%; }
  .drum-card h2 { font-size:clamp(1.5rem,6vw,2rem); }
}
}

/* The drum's sticky block is 100vh with the card centred in it, so before it pins
   there is half a viewport of dead space between the headline and card 01. Close it
   by taking the padding off both sides of that join and dropping the divider, so the
   first card sits directly under the headline. */
.hww-head { padding-block: clamp(2.5rem,7vh,4rem) 0 !important; }
main section.drum-wrap { padding-block: 0; border-top: none; }
/* Before it pins, the sticky block sits below the headline with the card centred in
   its 100vh, which leaves half a viewport empty. Pull the block up so card 01 lands
   just under the headline. Capped at 320px so a short window cannot drag the card
   into the headline; on tall windows the vh value is the one that applies. */
.drum-on { margin-top: max(-320px, -30vh); }

/* The CTA sits in the space the drum leaves once it has flattened, so it needs no
   rule above it: the assembled stack is already the separator. */
.drum-cta { padding-top: clamp(2rem,5vh,3.5rem); }
.drum-cta::after { display: none; }

/* The "under 5 minutes" card is the only one of the three that describes what working
   with us looks like; the other two describe what happens without. The badge says so,
   the way a comparison table flags its own column. Gold because that is the caught
   signal, and a ring so the card reads as lifted out of the row. */
/* The ring is the ONLY gold outline. Giving the card a gold border too put two lines
   within 5px of each other, which read as one crowded double edge rather than a card
   sitting inside a frame. The ring stands 14px clear so the space itself is visible. */
/* The ring is Persuadra, so it is TEAL: the brand holding the lead at gold instead of
   letting it fade to grey like the two cards beside it. Gold stays what is being
   protected, never the thing doing the protecting. */
.decay-ours::after {
  content: ''; position: absolute; inset: -22px; border-radius: calc(var(--card-radius) + 22px);
  border: 1px solid var(--color-signal-decaying); opacity: .65; pointer-events: none;
}
.decay-badge {
  /* Centred ON the teal ring, so the ring line runs through the middle of the badge
     the way the reference does. The ring sits far enough out (22px, 16px on mobile)
     that a badge centred on it still clears the card's gold top border underneath,
     which is the thing that must never be covered. */
  position: absolute; top: -22px; left: 50%; transform: translate(-50%, -50%);
  background: var(--color-signal-decaying); color: var(--color-background);
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  padding: .38rem .8rem; border-radius: 999px; z-index: 2;
}
@media (max-width:520px){
  .decay-badge { font-size: .54rem; padding: .3rem .55rem; top: -16px; }
  /* the page gutter is only ~20px here, so a 14px ring leaves 6px to the screen edge */
  .decay-ours::after { inset: -16px; border-radius: calc(var(--card-radius) + 16px); }
}

/* ---- type hierarchy inside cards and rows, 2026-09-13 ----------------------
   Measured against the reference: its card spans 13px to 64px, a 5:1 range, with
   one word anchoring each card. Ours spanned 11px to 23px and the state word was
   18px, identical to the body text beside it, so nothing held the eye. The fix is
   not bigger text everywhere, it is one big thing per card. */
.card .d-state {
  font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: .01em;
  margin: .35rem 0 .9rem;
}
.d-odds strong { font-size: clamp(1.9rem, 2.6vw, 2.2rem); margin-bottom: .25rem; }

/* Same idea in the leak rows: the leak is the statement, the fix is the answer to
   it, so they must not weigh the same. */
.leak-where p { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.34; }
.leak-fix p { font-size: clamp(.98rem, 1.25vw, 1.06rem); }

/* ---- measure ---------------------------------------------------------------
   The column was leaving a lot of unused width either side and wrapping lines that
   had room to sit on one. Widened to the point where short list items fit on a
   single line, and no further: past roughly 85 characters a line becomes harder to
   track back to the next one, which is the opposite of the goal. */
.wrap { max-width: 1140px; }
.story { max-width: min(48rem, 94%); }
.measure-c { max-width: 68ch; }
.leaks p { max-width: 52ch; }
.story-punch { max-width: min(46rem, 94%); }

/* ---- chips and tinted panels, 2026-09-13 -----------------------------------
   The reference does not just scale type, it gives each element its own container
   tinted to that card's hue: the state label is an outlined pill, the stat sits in
   a bordered panel. That is what stops three cards of the same shape reading as one
   uniform block. Colour comes from `color` on the card, so each rule is written once
   and the hue is set in a single place per state. */
/* Teal is a BRAND colour, so it must not signify failure: a lead going cold should
   not be rendered in the same colour as the company. Decay is grey, fading from
   body-dim (cooling) to muted (gone). Gold stays the caught signal. Teal keeps its
   correct uses: the particle field, the success state, and the positive fit column. */
[data-state=alive]   { --hue: var(--color-signal-caught); }
[data-state=cooling] { --hue: var(--color-body-dim); }
[data-state=gone]    { --hue: var(--color-muted-foreground); }

.decay .tag {
  display: inline-block; margin: 0 0 .9rem;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hue) 55%, transparent);
  background: color-mix(in srgb, var(--hue) 9%, transparent);
  color: var(--hue); font-size: .6rem; letter-spacing: .13em;
}
.card .d-odds {
  border: 1px solid color-mix(in srgb, var(--hue) 32%, transparent);
  background: color-mix(in srgb, var(--hue) 7%, transparent);
  border-radius: var(--card-radius);
  padding: .9rem 1rem 1rem; margin-top: 1.2rem;
}
.card .d-src {
  border-top: none; margin-top: 1rem; padding-top: 0;
  opacity: .8;
}

/* Same device in the leak rows, so the two columns are visibly different kinds of
   thing rather than two paragraphs side by side. */
.leaks .leak-lbl {
  display: inline-block; padding: .28rem .65rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  margin-bottom: .85rem;
}

/* The case-studies link is a real button now, but a quiet one: it must not compete
   with the primary CTA a screen below it. */
/* The global paragraph measure (62ch) was capping this line at 675px and centring the
   button inside THAT box, not the section, so it sat well left of centre. */
.leaks-foot { text-align: center; margin: 2.5rem auto 0; max-width: none; }

/* ---- legal + security pages: long-form prose, narrow measure ----
   These are the only pages on the site that are read rather than scanned, so they
   get a real reading width and a heading rhythm the marketing sections do not use. */
.legal section { max-width:70ch; margin-inline:auto; }
.legal h1 { margin-bottom:.5rem; }
.legal h2 { margin-top:0; }
.legal h3 { font-family:var(--f-body); font-size:1.02rem; font-weight:600; letter-spacing:0;
  margin:2.25rem 0 .6rem; color:var(--color-foreground); }
.legal p { color:var(--color-body-dim); line-height:1.7; }
.legal ul { margin:1rem 0; padding-left:1.2rem; color:var(--color-body-dim); line-height:1.7; }
.legal li { margin-bottom:.4rem; }
.legal a { color:var(--color-foreground); }
.legal-meta { font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--color-muted-foreground); }
/* Deliberately loud. These are unresolved facts and must never ship unnoticed. */
.legal-todo { color:var(--color-signal-caught); font-family:var(--f-mono); font-size:.9em; }

.sec-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-top:2rem; }
.legal .sec-grid { max-width:none; }
.legal section:has(.sec-grid) { max-width:62rem; }
.sec-card { border:1px solid var(--color-border); border-radius:var(--radius-lg,14px);
  padding:1.35rem 1.4rem; background:rgb(255 255 255 / .015); }
.sec-card h3 { margin:0 0 .6rem; font-size:1rem; line-height:1.35; }
.sec-card p { margin:0; font-size:.92rem; }

/* ---- contact: preferred reply channel ----
   Radios rather than a select, so all three read as capabilities the system has
   rather than a setting buried in a dropdown. The choice drives which branch of the
   n8n workflow answers, so it is required. */
.channel { border:1px solid var(--color-border); border-radius:var(--card-radius);
  padding:1rem 1.15rem 1.15rem; margin:0; }
.channel legend { font-family:var(--f-mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--color-label); padding:0 .4rem; }
.channel label { display:inline-flex; align-items:center; gap:.5rem; margin-right:1.5rem;
  font-family:var(--f-body); font-size:.95rem; letter-spacing:normal; text-transform:none;
  color:var(--color-body-dim); cursor:pointer; }
.channel input[type=radio] { accent-color:var(--color-signal-decaying); }
@media (max-width:480px){ .channel label { display:flex; margin:.55rem 0 0; } }