/* ============================================================
   FONTS — self-hosted.
   Google's CDN costs two extra round-trips before text can render
   correctly; on 4G that is real delay for no benefit.

   The body fallback is metric-matched to Archivo so the swap does
   not move the page: Archivo and Arial happen to share an advance
   width exactly (0.556em), which is why size-adjust stays at 100%
   — measured with fontTools, not guessed. Mono is small-surface
   and carries no such risk, so it just falls through to the system
   monospace stack.
   ============================================================ */
@font-face{
  font-family:"Archivo";
  src:url("assets/fonts/archivo-var-v2.woff2") format("woff2-variations");
  font-weight:400 800; font-stretch:100% 120%; font-display:swap;
}
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust:100%; ascent-override:87.8%; descent-override:21%; line-gap-override:0%;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("assets/fonts/plexmono-400.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("assets/fonts/plexmono-500.woff2") format("woff2");
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("assets/fonts/plexmono-600.woff2") format("woff2");
  font-weight:600; font-display:swap;
}
/* the wordmark is one small element: a brief invisible beat beats a
   visible fallback flash on the most brand-critical thing on the page */
@font-face{
  font-family:"Poppins";
  src:url("assets/fonts/poppins-700.woff2") format("woff2");
  font-weight:700; font-display:block;
}

/* ============================================================
   GrowthARCH — Find the leak. Build the fix.
   A committed dark instrument panel. Single theme by design:
   the page is meant to read as a diagnostic readout, so it
   paints every colour explicitly and never borrows a ground.
   ============================================================ */

:root{
  /* ---- Ground: blue-shifted near-black, not pure grey ---- */
  --void:      #08090B;
  --panel:     #0D0F13;
  --panel-hi:  #13161C;
  --panel-top: #191D25;

  /* ---- Hairlines ---- */
  --line:      #1C212A;
  --line-hi:   #2A313D;

  /* ---- Ink: cool, chosen neutrals biased toward the accent ---- */
  --ink:       #E9ECF1;   /* 15.4:1 on --void */
  --ink-2:     #A3ADBB;   /*  8.4:1 on --void */
  --ink-3:     #76808F;   /*  4.98:1 on --void, 4.53:1 on --panel-hi — clears AA everywhere it lands */

  /* ---- Semantics: teal = system / fix. amber = leak / loss. ---- */
  --signal:    #3DE0C4;
  --signal-dk: #1E7F70;
  --signal-gl: rgba(61,224,196,.10);
  --leak:      #FFA23A;
  --leak-dk:   #8A5416;
  --leak-gl:   rgba(255,162,58,.10);
  --wa:        #25D366;

  /* ---- Type ---- */
  --sans: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Rhythm ---- */
  --frame: 1220px;
  --gut: clamp(20px, 5vw, 56px);
  --band-y: clamp(64px, 9vw, 132px);
  --r: 3px;             /* hard, near-square. instruments don't have soft corners */
}

/* ---------- reset ---------- */
*,*::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{
  position:relative;
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.62;
  font-weight:400;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:#00120E; padding:12px 18px;
  font:600 15px/1 var(--sans); text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- ambient grid: the instrument's graticule ---------- */
.grid-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:calc(100% / 6) 100%;
}
@media (max-width:860px){ .grid-overlay{ background-size:calc(100% / 3) 100%; } }

/* ---------- layout frame ---------- */
.frame{
  width:100%; max-width:var(--frame);
  margin-inline:auto; padding-inline:var(--gut);
  position:relative; z-index:1;
}
.frame-narrow{ max-width:780px; }

/* ============================================================
   TYPE SYSTEM
   Display uses Archivo's width axis — expanded for headlines,
   normal for prose. Mono is reserved for data and labels.
   ============================================================ */

.h-display{
  font-size:clamp(2.6rem, 7.2vw, 5.1rem);
  line-height:.98;
  font-weight:800;
  font-stretch:118%;
  letter-spacing:-.028em;
  color:var(--ink);
}
.h-display .accent{ color:var(--signal); }

.h-section{
  font-size:clamp(1.85rem, 3.9vw, 2.9rem);
  line-height:1.08;
  font-weight:700;
  font-stretch:112%;
  letter-spacing:-.022em;
  color:var(--ink);
}

/* the utility label — monospace lives HERE and nowhere else */
.k{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.k-accent{ color:var(--signal); }
.k-dim{ color:var(--ink-3); }

.eyebrow{
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:flex; align-items:center; gap:9px;
  margin-bottom:22px;
}
.eyebrow .dot{
  width:6px; height:6px; background:var(--signal); border-radius:50%;
  box-shadow:0 0 0 4px var(--signal-gl);
  flex:none;
}

.lede{
  font-size:clamp(1.06rem, 1.9vw, 1.22rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:56ch;
  margin-top:26px;
}
.lede-2{
  font-size:clamp(1.06rem, 1.9vw, 1.22rem);
  line-height:1.6;
  color:var(--ink);
  max-width:54ch;
  margin-top:18px;
  font-weight:500;
}
.body-lg{
  font-size:1.06rem;
  line-height:1.68;
  color:var(--ink-2);
  max-width:62ch;
}
.body-lg + .body-lg{ margin-top:18px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans);
  font-size:.98rem; font-weight:600; letter-spacing:-.006em;
  padding:13px 22px;
  border-radius:var(--r);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn svg{ flex:none; }
.btn-lg{ padding:16px 28px; font-size:1.02rem; }
.btn-block{ width:100%; }

.btn-wa{
  background:var(--wa); color:#04240F; border-color:var(--wa);
}
.btn-wa:hover{ background:#1FBF5B; border-color:#1FBF5B; }

.btn-solid{
  background:var(--signal); color:#00120E; border-color:var(--signal);
}
.btn-solid:hover{ background:#5BEBD3; border-color:#5BEBD3; }

.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line-hi);
}
.btn-ghost:hover{ border-color:var(--ink-3); background:var(--panel-hi); }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--void);
  border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex; align-items:center; gap:28px;
  height:92px;
}
.wordmark{
  display:flex; align-items:center;
  text-decoration:none; color:var(--ink); flex:none;
}

/* ── The wordmark lockup ───────────────────────────────────────
   Poppins appears here and nowhere else on the page. The "A" is
   the arch itself, with the thrust bars running past the
   baseline the way they do on the badge. ──────────────────── */
.wm{
  display:inline-flex; align-items:center;
  font-family:"Poppins", var(--sans);
  font-weight:700;
  font-size:1.55rem;
  letter-spacing:-.012em;
  line-height:1;
  white-space:nowrap;
}
.wm-a{ color:var(--ink); }
.wm-b{ color:var(--signal); }
.wm-glyph{
  /* Traced from the badge artwork. The lockup keeps the badge's own
     proportions: the rocket stands about 1.95x cap height and the thrust
     runs below the baseline like a descender, which is what makes it read
     as a rocket rather than a letter A. */
  height:2.04em; width:auto;
  margin:0 .02em 0 .04em;
  color:var(--ink);
  /* measured off the badge: the glyph's centre sits a touch below the
     text's centre, which is what keeps nose and thrust balanced */
  transform:translateY(.127em);
  overflow:visible;
}
.wm-glyph .t{ fill:var(--signal); }
.wm-glyph .t-s{ opacity:.55; }
.wordmark:hover .wm-glyph .t-m{ fill:var(--leak); }
.wm-lg{ font-size:1.42rem; }

.head-nav{
  display:flex; gap:26px; margin-left:auto;
}
.head-nav a{
  font-size:.93rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
  transition:color .16s ease;
}
.head-nav a:hover{ color:var(--ink); }

.head-cta{ flex:none; padding:10px 16px; font-size:.92rem; }

/* The hamburger. Hidden once the anchors fit on their own. */
.nav-toggle[hidden]{ display:none !important; }
.nav-toggle{
  display:none;
  margin-left:auto;
  width:46px; height:46px; padding:0;
  background:transparent; border:1px solid var(--line-hi); border-radius:var(--r);
  color:var(--ink); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-bars{ display:block; width:20px; height:14px; position:relative; }
.nav-bars span{
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .18s ease, opacity .14s ease, top .18s ease;
}
.nav-bars span:nth-child(1){ top:0; }
.nav-bars span:nth-child(2){ top:6px; }
.nav-bars span:nth-child(3){ top:12px; }
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .nav-bars span{ transition:none; } }

@media (max-width:1040px){ .head-cta{ margin-left:auto; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(48px, 7vw, 92px); padding-bottom:clamp(40px,5vw,60px); }
.hero-copy{ max-width:min(100%, 900px); }
.hero-copy .h-display{ max-width:15ch; }

.cta-row{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;
}
@media (max-width:520px){
  .cta-row{ flex-direction:column; }
  .cta-row .btn{ width:100%; }
}
.cta-note{
  margin-top:18px; font-size:.94rem; color:var(--ink-3); max-width:46ch;
}

/* Fig. 01 — a full-width instrument strip. The metaphor is
   horizontal flow, so the figure is given the width it needs
   instead of being boxed into a column. */
.hero-vis{ margin:clamp(44px,5.5vw,72px) 0 0; }
.hero-vis canvas{
  /* The ratios below mirror the three in script.js. They live here so the
     browser reserves the right box at first paint: JS used to set the
     height after measuring, which shifted a mid-page element by ~200px on
     a phone, every single load. */
  width:100%; height:auto; display:block;
  aspect-ratio:1 / .80;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
}
@media (min-width:560px){ .hero-vis canvas{ aspect-ratio:1 / .46; } }
@media (min-width:900px){ .hero-vis canvas{ aspect-ratio:1 / .30; } }
.hero-vis figcaption{
  margin-top:14px; font-size:.9rem; line-height:1.55; color:var(--ink-3);
  max-width:60ch;
}
.hero-vis figcaption .k{ display:block; margin-bottom:5px; color:var(--ink-3); }

/* ---------- status strip ---------- */
.status-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:clamp(40px,6vw,72px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.status-strip li{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:18px 22px 18px 0; min-width:0;
  font-size:.96rem;
}
.status-strip li + li{ border-left:1px solid var(--line); padding-left:22px; }
.status-strip b{ font-weight:600; color:var(--ink); }
@media (max-width:820px){
  .status-strip{ grid-template-columns:1fr; }
  .status-strip li{ padding:14px 0; }
  .status-strip li + li{ border-left:0; border-top:1px solid var(--line); padding-left:0; }
}
.s-state{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
  margin-left:auto; white-space:nowrap; padding-left:10px;
}
.s-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.s-dot.live{  background:var(--signal); box-shadow:0 0 0 4px var(--signal-gl); }
.s-dot.talk{  background:var(--leak);   box-shadow:0 0 0 4px var(--leak-gl); }
.s-dot.build{ background:var(--ink-3); }

/* ============================================================
   BANDS
   ============================================================ */
.band{ padding-block:var(--band-y); border-top:1px solid var(--line); }
.band-alt{ background:var(--panel); }
.band-head{ max-width:64ch; margin-bottom:clamp(36px,4.6vw,60px); }
.band-sub{
  margin-top:20px; font-size:1.06rem; line-height:1.66; color:var(--ink-2);
  max-width:60ch;
}
.band-after{
  margin-top:34px; font-size:.99rem; line-height:1.66;
  color:var(--ink-3); max-width:62ch;
}

/* ============================================================
   THE LEAK REPORT — the specimen deliverable.
   Conventions borrowed from survey / defect-schedule documents:
   an identified finding, its evidence, its cost, its remedy.
   ============================================================ */
.report{
  background:var(--panel-hi);
  border:1px solid var(--line-hi);
  border-radius:var(--r);
  overflow:hidden;
}
.band-alt .report{ background:var(--void); }

.report-top{
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end;
  justify-content:space-between;
  padding:clamp(20px,3vw,30px);
  border-bottom:1px solid var(--line-hi);
  background:
    linear-gradient(to bottom, rgba(61,224,196,.045), transparent);
}
.report-top .k-accent{ margin-bottom:8px; display:block; }
.report-title{
  font-size:clamp(1.15rem,2.3vw,1.5rem); font-weight:700;
  font-stretch:106%; letter-spacing:-.015em; line-height:1.22;
}
.report-meta{
  display:flex; gap:clamp(18px,3vw,34px); margin:0; flex-wrap:wrap;
}
.report-meta div{ display:flex; flex-direction:column; gap:4px; }
.report-meta dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.report-meta dd{
  margin:0; font-size:1.02rem; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.report-meta .leak-fig{
  color:var(--leak); font-family:var(--mono); font-weight:600; font-size:1.06rem;
}
.report-meta .leak-fig span{ font-size:.74em; color:var(--ink-3); margin-left:2px; }

.report-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.report-table{
  width:100%; min-width:860px;
  border-collapse:collapse;
  font-size:.95rem;
}
.report-table th{
  text-align:left;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  padding:14px clamp(12px,1.6vw,18px);
  border-bottom:1px solid var(--line-hi);
  white-space:nowrap;
}
.report-table td{
  padding:18px clamp(12px,1.6vw,18px);
  border-bottom:1px solid var(--line);
  vertical-align:top;
  color:var(--ink-2); line-height:1.55;
}
.report-table tbody tr{ transition:background-color .1s linear; }

.c-id{ width:52px; }
.c-id .k{ color:var(--leak); font-size:.75rem; letter-spacing:.08em; }
.c-leak{ width:23%; }
.c-leak b{ color:var(--ink); font-weight:600; display:block; line-height:1.4; }
.c-evid{ width:27%; font-size:.91rem; color:var(--ink-3); }
.c-cost{ width:15%; white-space:nowrap; }
.c-fix{ width:27%; font-size:.93rem; }

.fig{
  font-family:var(--mono); font-weight:600; font-size:1.02rem;
  color:var(--leak); font-variant-numeric:tabular-nums;
}
.fig-total{ color:var(--ink); font-size:1.1rem; }

.report-table tfoot td{
  border-bottom:0; border-top:1px solid var(--line-hi);
  background:rgba(255,255,255,.02);
  padding-block:18px;
}
.report-table tfoot b{ color:var(--ink); font-weight:700; }

.report-foot{
  padding:clamp(16px,2.2vw,22px) clamp(20px,3vw,30px);
  border-top:1px solid var(--line-hi);
  background:var(--panel);
}
.band-alt .report-foot{ background:var(--panel); }
.report-foot p{
  font-size:.9rem; line-height:1.6; color:var(--ink-3); max-width:78ch;
}
.report-foot .k{ display:block; margin-bottom:5px; }

/* scroll hint on narrow screens */
@media (max-width:900px){
  .report-scroll{ position:relative; }
  .report-scroll::after{
    content:""; position:sticky; right:0; top:0; float:right;
    width:34px; height:100%; pointer-events:none;
    background:linear-gradient(to left, var(--panel-hi), transparent);
  }
}

/* ============================================================
   WHAT WE CHECK
   ============================================================ */
.checks{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.check-group{
  background:var(--void);
  padding:0;
}
.band-alt .check-group{ background:var(--panel); }
.check-group summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:clamp(16px,2vw,20px) clamp(20px,2.4vw,26px);
  cursor:pointer; list-style:none; min-height:52px;
  transition:background-color .15s ease;
}
.check-group summary::-webkit-details-marker{ display:none; }
.cg-name{
  font-size:1.02rem; font-weight:700; font-stretch:106%;
  letter-spacing:-.012em; color:var(--ink);
}
.check-group summary .k{ flex:none; }
/* the disclosure marker, drawn rather than inherited */
.check-group summary::after{
  content:""; flex:none; width:9px; height:9px; margin-left:2px;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.check-group[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
@media (hover:hover) and (pointer:fine){
  .check-group summary:hover{ background:var(--panel-hi); }
  .check-group summary:hover .cg-name{ color:var(--signal); }
}
.check-group summary:focus-visible{ outline:2px solid var(--signal); outline-offset:-3px; }
.check-group ul{ padding:0 clamp(20px,2.4vw,26px) clamp(18px,2.2vw,24px); }
.check-group li{
  font-size:.95rem; line-height:1.5; color:var(--ink-2);
  padding:7px 0 7px 18px; position:relative;
}
.check-group li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:7px; height:1px; background:var(--signal-dk);
}

/* provenance: true, and of no interest to the person buying */
.provenance{ margin-top:18px; max-width:62ch; }
.provenance summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); list-style:none;
  padding:6px 0;
}
.provenance summary::-webkit-details-marker{ display:none; }
.provenance summary::after{
  content:""; width:7px; height:7px;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
.provenance[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.provenance summary:hover{ color:var(--ink-2); }
.provenance summary:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.provenance p{
  font-size:.92rem; line-height:1.65; color:var(--ink-3);
  padding:10px 0 4px; max-width:62ch;
}
.provenance a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-hi); }
.provenance a:hover{ color:var(--signal); text-decoration-color:var(--signal); }

/* ============================================================
   STEPS
   ============================================================ */
.steps{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:clamp(28px,3.4vw,44px);
}
.step{
  background:var(--void);
  padding:clamp(22px,2.6vw,30px);
  display:flex; flex-direction:column; gap:12px;
}
.band-alt .step{ background:var(--panel); }
.step-top{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.step h3{
  font-size:1.24rem; font-weight:700; font-stretch:108%;
  letter-spacing:-.018em; color:var(--ink);
}
.step p{ font-size:.96rem; line-height:1.6; color:var(--ink-2); }

.terms{
  display:grid; gap:clamp(20px,2.6vw,32px);
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.term{ border-top:2px solid var(--signal-dk); padding-top:18px; }
.term h4{
  font-size:1.02rem; font-weight:700; color:var(--ink); margin-bottom:10px;
  font-stretch:106%;
}
.term p{ font-size:.96rem; line-height:1.62; color:var(--ink-2); }

/* ============================================================
   SPLIT SECTIONS
   ============================================================ */
.split{
  display:grid; gap:clamp(32px,5vw,64px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split-who{ grid-template-columns:minmax(0,.62fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .split-who{ grid-template-columns:1fr; } }
.split-copy .h-section{ margin-bottom:20px; }
.split-copy .eyebrow{ margin-bottom:16px; }

/* ---------- screenshot slot ---------- */
.shot{ margin:0; }
.shot-frame{
  border:1px solid var(--line-hi);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--void);
}
.shot-bar{
  display:flex; gap:7px; align-items:center;
  padding:11px 14px; border-bottom:1px solid var(--line-hi);
  background:var(--panel-hi);
}
.shot-bar span{ width:9px; height:9px; border-radius:50%; background:var(--line-hi); flex:none; }
.shot-bar .k{ margin-left:8px; }
.shot-frame img{ display:block; width:100%; height:auto; }
.shot-body{
  aspect-ratio:4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:28px; text-align:center;
}
.shot-body p{ font-size:.93rem; color:var(--ink-3); max-width:34ch; line-height:1.55; }
.shot-empty .shot-body{
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 10px, transparent 10px 20px);
}
.shot figcaption{ margin-top:14px; font-size:.9rem; line-height:1.6; color:var(--ink-3); max-width:56ch; }

/* ---------- portrait ---------- */
.portrait-wrap{ margin:0; }
.portrait{
  width:100%; height:auto;
  border-radius:var(--r);
  border:1px solid var(--line-hi);
  /* tone adjustment is baked into the JPEG rather than done here: a
     filter on a large image forces its own compositing layer for a
     barely-perceptible change. */
}



.role{ margin:10px 0 22px; display:block; }
.contact-list{ margin-top:28px; display:grid; gap:12px; }
.contact-list li{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:12px;
  font-size:1rem;
}
.contact-list .k{ min-width:86px; flex:none; }
.contact-list a{ color:var(--ink); text-decoration:none; font-weight:500;
  border-bottom:1px solid var(--line-hi); }
.contact-list a:hover{ color:var(--signal); border-bottom-color:var(--signal); }

/* ============================================================
   THE SEARCH (quote band)
   ============================================================ */
.band-quote .h-section{ margin-bottom:26px; }
.band-quote .body-lg{ font-size:1.12rem; color:var(--ink-2); max-width:66ch; }
.band-quote .body-lg + .body-lg{ margin-top:22px; }

/* ============================================================
   WHO THIS ISN'T FOR
   ============================================================ */
.notfor{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.notfor li{
  background:var(--void);
  display:flex; gap:16px; align-items:flex-start;
  padding:clamp(20px,2.4vw,26px);
  font-size:1rem; line-height:1.62; color:var(--ink-2);
}
.band-alt .notfor li{ background:var(--panel); }
.notfor b{ color:var(--ink); font-weight:650; }
.notfor .x{
  flex:none; width:18px; height:18px; margin-top:4px; position:relative;
}
.notfor .x::before,.notfor .x::after{
  content:""; position:absolute; left:1px; top:8px; width:16px; height:1.5px;
  background:var(--leak-dk);
}
.notfor .x::before{ transform:rotate(45deg); }
.notfor .x::after{ transform:rotate(-45deg); }

/* ============================================================
   CTA
   ============================================================ */
.band-cta{ background:var(--panel); }
.cta-grid{
  display:grid; gap:clamp(32px,5vw,64px);
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:start;
}
@media (max-width:900px){ .cta-grid{ grid-template-columns:1fr; } }

.h-cta{ font-size:clamp(2.2rem,5.4vw,3.6rem); margin-bottom:22px; }
.cta-left .btn-block{ margin-top:30px; max-width:430px; }
.cta-alt{
  margin-top:18px; font-size:.96rem; color:var(--ink-3);
}
.cta-alt a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-hi); }
.cta-alt a:hover{ color:var(--signal); text-decoration-color:var(--signal); }

.cta-form{
  background:var(--void);
  border:1px solid var(--line-hi);
  border-radius:var(--r);
  padding:clamp(22px,3vw,32px);
  display:grid; gap:16px;
}
.form-label{ margin-bottom:2px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.92rem; font-weight:500; color:var(--ink-2); }
.field input,.field textarea{
  width:100%;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--panel-hi);
  border:1px solid var(--line-hi);
  border-radius:var(--r);
  padding:12px 14px;
  transition:border-color .16s ease, background-color .16s ease;
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); }
.field input:hover,.field textarea:hover{ border-color:var(--ink-3); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--signal); background:var(--void);
  box-shadow:0 0 0 3px var(--signal-gl);
}
.field.invalid input,.field.invalid textarea{ border-color:var(--leak); }
.cta-form .btn{ margin-top:6px; }
.form-note{ font-size:.9rem; line-height:1.55; color:var(--ink-3); min-height:1.2em; }
.form-note.ok{ color:var(--signal); }
.form-note.err{ color:var(--leak); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{ border-top:1px solid var(--line); padding-top:clamp(48px,6vw,72px); }
.foot-inner{
  display:grid; gap:clamp(28px,4vw,48px);
  grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  padding-bottom:clamp(40px,5vw,60px);
}
@media (max-width:860px){ .foot-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-inner{ grid-template-columns:1fr; } }

.foot-brand .wm{ margin-bottom:14px; }
.foot-brand p{ font-size:.98rem; color:var(--ink-2); max-width:40ch; }
.foot-tag{ margin-top:10px; font-size:.9rem !important; color:var(--ink-3) !important; }

.foot-col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.foot-col .k{ margin-bottom:4px; }
.foot-col a,.foot-col p{
  font-size:.96rem; color:var(--ink-2); text-decoration:none; line-height:1.55;
}
.foot-col a{ display:inline-flex; align-items:center; min-height:24px; }
.foot-col a:hover{ color:var(--signal); }

.foot-base{
  border-top:1px solid var(--line);
  padding-block:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.foot-base p{ font-size:.88rem; color:var(--ink-3); }

/* ============================================================
   MOTION — one moment only, and it is the diagram.
   Nothing on this page is parked at opacity 0 waiting to be
   revealed: the first frame a visitor gets, including the CTA,
   is the complete page. A hero button that fades in is a hero
   button that is missing when the connection is slow.
   ============================================================ */

}

/* ============================================================
   THE LIVE DIAGNOSTIC
   A Level 1 screening, in the language energy auditors use:
   rough order of magnitude, from numbers the owner gives us.
   Everything is computed in the browser; nothing is sent.
   ============================================================ */
.band-diag{ background:var(--panel); }
.diag{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
@media (max-width:940px){ .diag{ grid-template-columns:1fr; } }

/* ---------- inputs ---------- */
.diag-inputs{
  display:grid; gap:clamp(20px,2.4vw,26px);
  background:var(--void);
  border:1px solid var(--line-hi);
  border-radius:var(--r);
  padding:clamp(22px,3vw,30px);
  position:sticky; top:88px;
}
@media (max-width:940px){ .diag-inputs{ position:static; } }

.ctrl{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:4px 14px;
  border:0; padding:0; margin:0; min-width:0;
}
.ctrl label,.ctrl legend{
  font-size:.95rem; font-weight:500; color:var(--ink-2); padding:0;
}
.ctrl output{
  font-family:var(--mono); font-size:1.02rem; font-weight:600;
  color:var(--signal); font-variant-numeric:tabular-nums;
  justify-self:end; white-space:nowrap;
}

/* range: a machine control, not a toy */
.ctrl input[type="range"]{
  grid-column:1 / -1;
  -webkit-appearance:none; appearance:none;
  width:100%; height:30px; margin:2px 0 0; padding:0;
  background:transparent; cursor:ew-resize;
}
.ctrl input[type="range"]::-webkit-slider-runnable-track{
  height:3px; background:var(--line-hi); border-radius:2px;
}
.ctrl input[type="range"]::-moz-range-track{
  height:3px; background:var(--line-hi); border-radius:2px;
}
.ctrl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin-top:-6.5px;
  background:var(--signal); border:0; border-radius:2px;
  box-shadow:0 0 0 4px rgba(61,224,196,.12);
  transition:box-shadow .15s ease;
}
.ctrl input[type="range"]::-moz-range-thumb{
  width:16px; height:16px;
  background:var(--signal); border:0; border-radius:2px;
  box-shadow:0 0 0 4px rgba(61,224,196,.12);
}
.ctrl input[type="range"]:hover::-webkit-slider-thumb,
.ctrl input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 7px rgba(61,224,196,.18);
}
.ctrl input[type="range"]:focus-visible{ outline:none; }
.ctrl input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--void), 0 0 0 5px var(--signal);
}
.ctrl input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 3px var(--void), 0 0 0 5px var(--signal);
}

/* segmented control — real radios, with an indicator that slides */
.ctrl-seg{ display:block; }
.ctrl-seg legend{ margin-bottom:10px; }
.seg{
  position:relative;
  display:grid; gap:0;
  border:1px solid var(--line-hi); border-radius:var(--r); overflow:hidden;
  background:var(--void);
}
.seg-3{ grid-template-columns:repeat(3,1fr); }
.seg input{
  position:absolute; opacity:0; pointer-events:none;
  width:1px; height:1px; margin:0;
}
.seg-btn{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  font-family:var(--sans); font-size:.88rem; font-weight:500;
  color:var(--ink-2); text-align:center;
  padding:11px 6px; min-height:46px; white-space:nowrap;
  border-left:1px solid var(--line-hi);
  transition:color .18s ease;
}
.seg-btn:first-of-type{ border-left:0; }
.seg input:checked + .seg-btn{ color:#00120E; font-weight:600; }
@media (hover:hover) and (pointer:fine){
  .seg input:not(:checked) + .seg-btn:hover{ color:var(--ink); }
}
.seg input:focus-visible + .seg-btn{
  outline:2px solid var(--signal); outline-offset:-3px; border-radius:2px;
}
/* the indicator translates rather than cross-fading, the way a physical
   switch moves; a touch of overshoot, capped so it never reads as bouncy */
.seg-ind{
  position:absolute; z-index:0; top:0; bottom:0; left:0;
  width:calc(100% / 3);
  background:var(--signal);
  transform:translateX(0);
  transition:transform .2s cubic-bezier(.34,1.4,.64,1);
  pointer-events:none;
}
.seg[data-i="1"] .seg-ind{ transform:translateX(100%); }
.seg[data-i="2"] .seg-ind{ transform:translateX(200%); }
@media (prefers-reduced-motion: reduce){ .seg-ind{ transition:none; } }

/* ---------- readout ---------- */
.diag-out{ display:grid; gap:clamp(18px,2.4vw,26px); }

.readout{
  border:1px solid var(--leak-dk);
  background:var(--leak-gl);
  border-radius:var(--r);
  padding:clamp(20px,2.8vw,28px);
}
.readout-fig{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(2.3rem,6.4vw,3.6rem);
  line-height:1.05; color:var(--leak);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  margin:10px 0 8px;
}
.readout-sub{ font-size:.98rem; color:var(--ink-2); }
.readout-sub span{
  font-family:var(--mono); color:var(--ink); font-variant-numeric:tabular-nums;
}

/* ---------- breakdown ---------- */
.breakdown{
  width:100%; border-collapse:collapse;
  border:1px solid var(--line); border-radius:var(--r);
}
.breakdown th{
  text-align:left; font-weight:500; font-size:.96rem; color:var(--ink-2);
  padding:14px 16px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px;
}
.breakdown th .k{ color:var(--leak); flex:none; }
.breakdown td{
  text-align:right; padding:14px 16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-weight:500; color:var(--leak);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.breakdown tr:last-child th,.breakdown tr:last-child td{ border-bottom:0; }

.diag-caveat{
  font-size:.93rem; line-height:1.6; color:var(--ink-3);
  border-left:2px solid var(--line-hi); padding-left:16px;
}
.diag-caveat b{ color:var(--ink-2); font-weight:600; }

.band-diag .hero-vis{ margin:0; }

/* ---------- condition ratings, after the survey convention ---------- */
.sev{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-top:6px;
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  border-radius:2px; cursor:help;
}
.sev-1{ background:rgba(61,224,196,.14); color:var(--signal); border:1px solid var(--signal-dk); }
.sev-2{ background:rgba(255,162,58,.13); color:var(--leak);   border:1px solid var(--leak-dk); }
.sev-3{ background:rgba(255,95,69,.14);  color:#FF7B63;        border:1px solid #7A2E1E; }
.c-id{ display:flex; flex-direction:column; gap:0; align-items:flex-start; }

.conf{
  display:block; margin-top:5px;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}
.meta-line{
  display:block; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.report-foot b{ color:var(--ink-2); font-weight:600; }

.cta-email{ margin-top:12px; max-width:430px; }
.foot-remote{ font-size:.88rem !important; color:var(--ink-3) !important; margin-top:8px; }

/* ============================================================
   THE SURVEY DOCUMENT
   Conventions lifted from building-survey and energy-audit
   reports: a finding carries an ID, a condition rating shown
   as a position within a range, its basis, its cost, and its
   remedy — plus the things that were checked and found sound,
   and the things that could not be measured at all.
   ============================================================ */

/* conditions of observation */
.meta-grid{
  display:grid; gap:1px; margin:20px 0 0;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  background:var(--line); border:1px solid var(--line);
}
.meta-grid > div{ background:var(--panel-hi); padding:13px 16px; }
.band-alt .meta-grid > div{ background:var(--void); }
.meta-grid dt{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.meta-grid dd{ margin:0; font-size:.92rem; line-height:1.45; color:var(--ink-2); }

/* the condition-rating strip: a range with one position lit,
   not a badge. it survives greyscale and colour-blindness. */
.sev-strip{ display:inline-flex; border:1px solid var(--line-hi); border-radius:2px; overflow:hidden; }
.sc{
  font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.04em;
  min-width:19px; padding:3px 2px; text-align:center;
  color:var(--ink-3); background:transparent;
  border-right:1px solid var(--line-hi);
  transition:background-color .18s linear, color .18s linear;
}
.sc:last-child{ border-right:0; }
.sc.on-3{ background:rgba(255,162,58,.92); color:#2A1704; }
.sc.on-2{ background:rgba(255,162,58,.28); color:var(--leak); }
.sc.on-1{ background:rgba(61,224,196,.22); color:var(--signal); }
.sc.on-nm{ background:var(--line-hi); color:var(--ink-2); }
/* JS lifts this class to replay the reading once, on first view */
.sev-strip.settling .sc{ background:transparent; color:var(--ink-3); }

/* loss accounting, after the IWA water balance */
.balance{ padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,30px); border-bottom:1px solid var(--line-hi); }
.bal-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.bal-total{
  font-family:var(--mono); font-weight:600; font-size:1.3rem;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.bal-total span{ font-size:.7em; color:var(--ink-3); }
.bar{ display:flex; height:10px; margin:14px 0 12px; background:var(--line); border-radius:1px; overflow:hidden; }
.bar-billed{ background:var(--ink-3); }
.bar-leak{ background:var(--leak); }
.bar-key{
  display:flex; gap:22px; flex-wrap:wrap;
  font-size:.86rem; color:var(--ink-3);
}
.bar-key b{ font-family:var(--mono); color:var(--ink-2); font-weight:600; }
.sw{ display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:1px; }
.sw-billed{ background:var(--ink-3); }
.sw-leak{ background:var(--leak); }

/* findings table */
.c-sev{ width:92px; }
.bench{ display:block; margin-top:6px; color:var(--ink-3); font-style:italic; }
.fig-none{ color:var(--ink-3); }
.row-clear .c-leak b,.row-nm .c-leak b{ color:var(--ink-2); font-weight:600; }
.row-nm td{ color:var(--ink-3); }

/* legend + limitations */
.legend{ display:grid; gap:10px; margin:0 0 20px;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }
.legend > div{ display:flex; gap:11px; align-items:flex-start; }
.legend dt{ flex:none; }
.legend dt .sc{ border:1px solid var(--line-hi); border-radius:2px; display:inline-block; }
.legend dd{ margin:0; font-size:.87rem; line-height:1.45; color:var(--ink-3); }
.legend dd b{ color:var(--ink-2); font-weight:600; }
.limits{ font-size:.89rem; line-height:1.62; color:var(--ink-3); max-width:82ch; }
.limits .k{ display:block; margin-bottom:6px; }
.limits b{ color:var(--ink-2); font-weight:600; }

/* the sample stamp — this is a worked example, and it says so */
.stamp{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line-hi); border-radius:2px;
  padding:7px 13px; margin-bottom:18px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2);
  background:var(--panel-hi);
}
.stamp::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ink-3); flex:none;
}

/* ---------- the nameplate ---------- */
.nameplate{
  margin:0;
  display:grid; gap:0;
  align-content:start;
  border-top:1px solid var(--line);
}
@media (max-width:860px){ .nameplate{ grid-column:1 / -1; } }
.nameplate > div{
  display:grid; grid-template-columns:92px 1fr; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.nameplate dt{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); padding-top:2px;
}
.nameplate dd{
  margin:0; font-family:var(--mono); font-size:.82rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.nameplate dd a{
  color:var(--ink-2); text-decoration:none;
  /* WCAG 2.2 AA (2.5.8): 24px minimum target, without disturbing the
     tabular grid these sit in. */
  display:inline-flex; align-items:center; min-height:24px;
}
.nameplate dd a:hover{ color:var(--signal); }

.foot-inner{ grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.6fr); }
@media (max-width:860px){ .foot-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-inner{ grid-template-columns:1fr; } }

/* the sticky header must not clip whatever an anchor lands on */
:where(section[id], .report){ scroll-margin-top:86px; }

/* a scrollable region needs to look scrollable, and be reachable by keyboard */
.report-scroll:focus-visible{ outline:2px solid var(--signal); outline-offset:-2px; }

/* ============================================================
   CRAFT LAYER
   ============================================================ */

/* native controls inherit the palette rather than the browser's */
:root{ accent-color:var(--signal); }
input,textarea{ caret-color:var(--signal); }

/* selecting a figure is usually "I want to copy this exact number" —
   a functional act, so it gets the system colour. Prose does not. */
::selection{ background:var(--line-hi); color:var(--ink); }
.fig::selection,.k::selection,.nameplate dd::selection,
.readout-fig::selection,.bal-total::selection,.ctrl output::selection{
  background:rgba(61,224,196,.28); color:var(--ink);
}

/* a zero that cannot be misread as a letter, in a document claiming precision */
.fig,.k,.nameplate dd,.readout-fig,.bal-total,.ctrl output,.report-meta dd,.bar-key b{
  font-variant-numeric:tabular-nums slashed-zero;
}

/* suppress the grey Android tap flash, then actually replace it */
a,button,input,textarea,summary{ -webkit-tap-highlight-color:transparent; }
.btn:active{ transform:scale(.97); }
.seg-btn:active{ transform:scale(.98); }
@media (prefers-reduced-motion: reduce){
  .btn:active,.seg-btn:active{ transform:none; }
}

/* hover styling is for devices that actually hover */
@media (hover:hover) and (pointer:fine){
  .report-table tbody tr:hover{ background:rgba(255,255,255,.018); }
}
@media not all and (hover:hover){
  .report-table tbody tr:hover{ background:transparent; }
}

/* wrapping: balance short headings, prevent orphans in prose */
h1,h2,h3,h4,.h-display,.h-section,.report-title{ text-wrap:balance; }
.lede,.lede-2,.body-lg,.band-sub,.limits,.diag-caveat,.cta-note,
.step p,.term p,.notfor li,.check-group li{ text-wrap:pretty; }

/* the readout must not shift the layout as digits come and go */
.readout-fig{
  min-width:11ch; display:block;
  font-variant-numeric:tabular-nums slashed-zero;
}
.money{ white-space:nowrap; }

/* ---------- the scrollable findings table ---------- */
.report-scroll{
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  position:relative;
}
/* an edge shade, painted once, rather than a mask recomposited per frame */
.report-scroll::after{
  content:""; position:sticky; float:right; top:0;
  width:44px; height:100%; margin-left:-44px;
  pointer-events:none; opacity:1;
  background:linear-gradient(to right, transparent, var(--panel-hi));
  transition:opacity .2s ease;
}
.report-scroll.at-end::after{ opacity:0; }
.report-table thead th{ scroll-snap-align:start; }
/* the record's identity stays put while the rest scrolls past */
.report-table .c-id{
  position:sticky; left:0; z-index:2;
  background:var(--panel-hi);
  box-shadow:1px 0 0 var(--line);
}
.band-alt .report-table .c-id{ background:var(--void); }
.report-table tfoot .c-id{ background:var(--panel-hi); }

/* ---------- sticky header: a hairline that arrives on scroll ---------- */
.site-head{ border-bottom-color:transparent; transition:border-color .2s ease, background-color .2s ease; }
.site-head.is-scrolled{ border-bottom-color:var(--line); }
@media (prefers-reduced-motion: reduce){ .site-head{ transition:none; } }

/* ---------- print: a survey report that survives a printer ---------- */
@media print{
  :root{
    --void:#fff; --panel:#fff; --panel-hi:#fff; --panel-top:#fff;
    --line:#c9ccd1; --line-hi:#9aa0a8;
    --ink:#000; --ink-2:#26292e; --ink-3:#5a6068;
    --signal:#0a6d5e; --leak:#8a4b00;
  }
  body{ background:#fff; color:#000; font-size:11pt; }
  .grid-overlay,.site-head,.hero-vis,.cta-form,.btn,.band-cta,
  .diag-inputs,.skip,.head-nav{ display:none !important; }
  .band{ padding-block:18pt; border-top:1px solid #c9ccd1; page-break-inside:avoid; }
  .report,.report-scroll{ overflow:visible !important; }
  .report-scroll{ -webkit-mask-image:none !important; mask-image:none !important; }
  .report-table{ min-width:0 !important; font-size:9pt; }
  .report-table .c-id{ position:static; box-shadow:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#5a6068; }
  a[href^="#"]::after{ content:""; }
  .nameplate{ page-break-inside:avoid; }
}

/* ---------- the verdict: what you get before you are asked for anything ---------- */
.verdict{
  border:1px solid var(--line-hi);
  border-left:2px solid var(--signal);
  background:var(--panel-hi);
  border-radius:var(--r);
  padding:clamp(20px,2.8vw,26px);
}
.band-diag .verdict{ background:var(--void); }
.verdict-line{
  font-size:clamp(1.12rem,2.4vw,1.4rem); font-weight:700; font-stretch:106%;
  letter-spacing:-.015em; line-height:1.3; color:var(--ink);
  margin:10px 0 12px;
}
.verdict-line span{ color:var(--leak); font-family:var(--mono); font-weight:600; }
.verdict-line #v-name{ color:var(--ink); font-family:var(--sans); font-weight:700; }
.verdict p{ font-size:.99rem; line-height:1.62; color:var(--ink-2); }
.verdict-free{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  color:var(--ink-3) !important; font-size:.94rem !important;
}

/* ============================================================
   THE FINDINGS TABLE ON A PHONE
   Sideways scrolling put the two columns that matter — what it
   costs and what closes it — off screen, at the exact moment a
   reader is most engaged. Below 760px each finding becomes a
   record you read top to bottom.
   ============================================================ */
@media (max-width:760px){
  .report-scroll{
    overflow:visible; scroll-snap-type:none;
    -webkit-mask-image:none !important; mask-image:none !important;
  }
  .report-table{ min-width:0; display:block; }
  .report-table thead{ display:none; }
  .report-table tbody,.report-table tfoot{ display:block; }

  .report-table tbody tr{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:0 14px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
  }
  .report-table td{
    display:block; padding:0; border:0;
  }
  .report-table .c-id{
    position:static; box-shadow:none; background:transparent;
    grid-column:1; grid-row:1; align-self:start;
  }
  .report-table .c-sev{ grid-column:2; grid-row:1; width:auto; margin-bottom:8px; }
  .report-table .c-leak{ grid-column:1 / -1; grid-row:2; width:auto; margin-bottom:10px; }
  .report-table .c-leak b{ font-size:1.02rem; }

  /* cost is the payload: give it its own line and its label back */
  .report-table .c-cost{
    grid-column:1 / -1; grid-row:3; width:auto;
    display:flex; align-items:baseline; gap:10px;
    padding:9px 0; margin-bottom:10px;
    border-block:1px solid var(--line);
  }
  .report-table .c-cost::before{
    content:"Cost / month"; flex:none;
    font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .report-table .c-cost .conf{ margin:0 0 0 auto; }

  .report-table .c-fix{ grid-column:1 / -1; grid-row:4; width:auto; }
  .report-table .c-fix::before{
    content:"Remedy"; display:block; margin-bottom:5px;
    font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-3);
  }
  /* the basis is supporting detail on a phone, not headline */
  .report-table .c-evid{
    grid-column:1 / -1; grid-row:5; width:auto;
    margin-top:12px; padding-top:10px; border-top:1px dotted var(--line);
    font-size:.87rem;
  }
  .report-table .c-evid::before{
    content:"Basis"; display:block; margin-bottom:4px;
    font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-3);
  }

  .report-table tfoot tr{
    grid-template-columns:1fr auto; padding:16px 0; border-bottom:0;
    border-top:1px solid var(--line-hi); background:transparent;
  }
  .report-table tfoot .c-id,.report-table tfoot .c-sev,
  .report-table tfoot .c-evid,.report-table tfoot .c-fix{ display:none; }
  .report-table tfoot .c-leak{ grid-column:1; grid-row:1; margin:0; }
  .report-table tfoot .c-cost{
    grid-column:2; grid-row:1; border:0; padding:0; margin:0; display:block;
  }
  .report-table tfoot .c-cost::before{ content:none; }
}

/* honeypot: off-screen rather than display:none, which some bots detect */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* the condition scale reads as a real definition list: term, then meaning */
.legend dt{
  display:flex; align-items:center; gap:8px;
  font-size:.84rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
}
.legend > div{ display:block; }
.legend dd{ margin-top:4px; }

.form-privacy{
  font-size:.84rem; line-height:1.55; color:var(--ink-3); margin-top:4px;
}
.form-privacy a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; }
.form-privacy a:hover{ color:var(--signal); }

.band-sub a{ color:var(--ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--line-hi); }
.band-sub a:hover{ color:var(--signal); text-decoration-color:var(--signal); }

/* privacy page: sub-headings step down from the page title */
.pv-h{ font-size:clamp(1.15rem,2.4vw,1.45rem); margin:34px 0 12px; }
.foot-base a{ color:var(--ink-3); text-decoration:none; }
.foot-base a:hover{ color:var(--signal); }

.more-findings{
  padding:16px clamp(20px,3vw,30px) 0;
  border-top:1px solid var(--line);
}
.btn-more{ width:100%; font-size:.94rem; padding:12px 18px; }

/* the mobile rule sets display:grid on rows, which outranks the browser's
   own [hidden] rule — so say it explicitly */
.report-table tbody tr[hidden]{ display:none !important; }

/* business type: the control that rewrites every label under it */
.ctrl-biz{ grid-template-columns:1fr; }
.ctrl-biz select{
  grid-column:1 / -1; width:100%;
  appearance:none; -webkit-appearance:none;
  font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--ink);
  background:var(--panel-hi);
  border:1px solid var(--line-hi); border-radius:var(--r);
  padding:12px 40px 12px 14px; margin-top:8px; min-height:48px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
  transition:border-color .16s ease;
}
.ctrl-biz select:hover{ border-color:var(--ink-3); }
.ctrl-biz select:focus-visible{
  outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-gl);
}
.ctrl-biz select option{ background:var(--panel-hi); color:var(--ink); }

/* scope: a claim about what the method covers, with the work as evidence —
   rather than a list of verticals that quietly excludes everyone else */
.scope-line{
  margin-top:clamp(40px,6vw,72px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(20px,2.6vw,26px);
  display:grid; gap:12px;
}
.scope-claim{
  font-size:clamp(1.02rem,2vw,1.16rem); line-height:1.5;
  color:var(--ink); font-weight:500; max-width:54ch;
}
.scope-proof{
  font-size:.92rem; line-height:1.6; color:var(--ink-3); max-width:66ch;
}
.scope-proof .k{ display:block; margin-bottom:5px; }

/* the arithmetic behind each figure — a number you cannot check is a
   number you cannot trust, and every tester asked for this */
.working{
  display:block; margin-top:5px;
  font-family:var(--mono); font-size:.68rem; line-height:1.5;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.breakdown th{ display:block; }
.b-amt{ vertical-align:top; }

/* a slider handle a thumb can actually catch */
.ctrl input[type="range"]{ height:44px; }
.ctrl input[type="range"]::-webkit-slider-thumb{ width:22px; height:22px; margin-top:-9.5px; }
.ctrl input[type="range"]::-moz-range-thumb{ width:22px; height:22px; }

.readout.is-capped .readout-fig::after{
  content:" (capped)";
  font-size:.3em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); vertical-align:middle;
}

/* before a business type is picked, the numbers are nobody's */
/* Showing somebody else's numbers dimmed reads as "not for you".
   Show nothing at all until the reader has said what they run. */
.awaiting .readout,.awaiting .breakdown,.awaiting .verdict,
.awaiting .hero-vis,.awaiting #d-send,.awaiting .diag-caveat{ display:none; }
.awaiting .diag-out::before{
  content:"Say what you run, above. Your numbers appear here.";
  display:block; padding:22px 18px;
  border:1px dashed var(--line-hi); border-radius:var(--r);
  font-size:.98rem; color:var(--ink-2); text-align:center;
}

/* ============================================================
   THE HERO PICKER
   One question, answered in a second, and the page starts
   talking about the reader's own business. The hero is complete
   without it — picking sharpens it, it never gates it.
   ============================================================ */
.hero-pick{
  font-size:clamp(1.24rem, 2.6vw, 1.6rem);
  font-weight:500; color:var(--ink-2);
  margin-top:22px;
  display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap;
}
.pick-wrap{ position:relative; display:inline-flex; }
#hero-biz{
  appearance:none; -webkit-appearance:none;
  font-family:var(--sans); font-size:inherit; font-weight:700;
  font-stretch:106%; letter-spacing:-.015em;
  color:var(--signal); background:transparent;
  border:0; border-bottom:2px dashed var(--signal-dk);
  padding:0 1.5em .12em 0; margin:0; cursor:pointer;
  transition:border-color .18s ease;
}
#hero-biz:hover{ border-bottom-color:var(--signal); }
#hero-biz:focus-visible{ outline:2px solid var(--signal); outline-offset:4px; border-radius:2px; }
.pick-wrap::after{
  content:""; position:absolute; right:.28em; bottom:.42em;
  width:.34em; height:.34em; pointer-events:none;
  border-right:2px solid var(--signal); border-bottom:2px solid var(--signal);
  transform:rotate(45deg);
}
#hero-biz option{ background:var(--panel-hi); color:var(--ink); font-size:1rem; }

/* the lede swaps text; a short cross-fade stops it reading as a glitch */
#hero-lede{ transition:opacity .18s ease; }
#hero-lede.swapping{ opacity:.25; }
@media (prefers-reduced-motion: reduce){ #hero-lede{ transition:none; } }

/* ============================================================
   TAKE THIS
   The one section that asks for nothing. Three fixes that come
   up in almost every survey, given away whole.
   ============================================================ */
.band-gift{ background:var(--panel); }
.gifts{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  counter-reset:gift;
}
.gift{
  background:var(--void);
  padding:clamp(22px,2.8vw,30px);
  display:flex; flex-direction:column; gap:12px;
  position:relative;
}
.gift h3{
  font-size:1.1rem; font-weight:700; font-stretch:106%;
  letter-spacing:-.015em; line-height:1.32; color:var(--ink);
  padding-top:4px;
}
.gift p{ font-size:.96rem; line-height:1.62; color:var(--ink-2); }
.gift-do{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.93rem !important; color:var(--ink-3) !important;
}
.gift-do .k{ display:block; margin-bottom:5px; }
.gift-close{
  margin-top:clamp(26px,3vw,36px);
  font-size:1.02rem; line-height:1.65; color:var(--ink-2);
  max-width:66ch;
  border-left:2px solid var(--signal-dk); padding-left:18px;
}

/* each section ends owing the next one a question, so nothing dead-ends */
.next-q{
  margin-top:20px; font-size:.99rem; line-height:1.6; color:var(--ink-3);
}
.next-q a{
  display:inline-block; color:var(--ink); font-weight:500;
  text-decoration:none;
  border-bottom:1px solid var(--line-hi);
  padding-bottom:1px;
  transition:color .16s ease, border-color .16s ease;
}
.next-q a:hover{ color:var(--signal); border-bottom-color:var(--signal); }
.verdict .next-q{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }

/* ============================================================
   THE FREE FIX
   Handed over in the first screen, before anything is asked for.
   ============================================================ */
.freebie{
  margin-top:24px;
  border:1px solid var(--signal-dk);
  border-left:3px solid var(--signal);
  background:var(--signal-gl);
  border-radius:var(--r);
  padding:clamp(18px,2.4vw,24px);
  max-width:60ch;
}
.freebie .k{ display:block; margin-bottom:10px; }
.freebie-what{
  font-size:clamp(1.06rem,2.1vw,1.24rem); font-weight:700; font-stretch:106%;
  letter-spacing:-.015em; line-height:1.32; color:var(--ink);
  margin-bottom:10px;
}
.freebie-how{ font-size:1rem; line-height:1.6; color:var(--ink-2); }
.freebie-cost{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--signal-dk);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--signal);
}

/* ============================================================
   THE THREE
   Given away before anything is asked, before anything is
   tapped. A visitor who reads only the first screen still
   leaves knowing where the money usually goes.
   ============================================================ */
.three{
  display:grid; gap:1px;
  margin:22px 0 0;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  max-width:52ch;
}
.three li{
  background:var(--void);
  display:flex; align-items:baseline; gap:12px;
  padding:13px 16px;
  font-size:1.04rem; font-weight:500; color:var(--ink);
  transition:background-color .2s ease, color .2s ease;
}
.three li .k{ flex:none; color:var(--ink-3); transition:color .2s ease; }
.three li.is-yours{ background:var(--leak-gl); color:var(--ink); }
.three li.is-yours .k{ color:var(--leak); }
.three li.is-yours::after{
  content:"yours"; margin-left:auto; flex:none;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--leak);
}
@media (prefers-reduced-motion: reduce){ .three li{ transition:none; } }

.pick-hint{
  display:block; width:100%;
  font-size:.96rem; font-weight:400; color:var(--ink-3);
  margin-top:6px;
}
.hero-pick{ margin-top:26px; }

/* The worked example was the quit point for three testers in four: a long
   technical document arriving before anyone had asked for one. It is still
   the strongest proof on the page, so it stays whole — one tap away. */
.report-wrap{ border:1px solid var(--line-hi); border-radius:var(--r); overflow:hidden; }
.report-open{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(18px,2.4vw,26px); cursor:pointer; list-style:none;
  background:var(--panel-hi); min-height:56px;
  transition:background-color .15s ease;
}
.report-open::-webkit-details-marker{ display:none; }
.ro-what{ font-size:1.04rem; font-weight:700; font-stretch:106%; color:var(--ink); }
.ro-meta{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); text-align:right;
}
.report-open::after{
  content:""; flex:none; width:9px; height:9px; margin-left:4px;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
.report-wrap[open] .report-open::after{ transform:rotate(-135deg) translateY(-2px); }
.report-wrap[open] .report-open{ border-bottom:1px solid var(--line-hi); }
@media (hover:hover){ .report-open:hover .ro-what{ color:var(--signal); } }
.report-open:focus-visible{ outline:2px solid var(--signal); outline-offset:-3px; }
.report-wrap .report{ border:0; border-radius:0; }

/* ============================================================
   DESKTOP: use the screen
   The frame was a phone column stretched onto a laptop, with
   dead margins either side. Wider frame, and the hero becomes
   two columns once there is room for two.
   ============================================================ */
@media (min-width:1100px){
  :root{ --frame:1400px; --gut:64px; }

  .hero-copy{ max-width:none; }
  .hero-copy-wrap .hero-copy{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    grid-template-areas:
      "head  three"
      "lede  pick"
      "gift  gift"
      "cta   cta"
      "note  note";
    column-gap:clamp(48px,5vw,96px);
    row-gap:0;
    align-items:start;
  }
  .hero-copy .h-display{ grid-area:head; max-width:none; align-self:start; }
  .hero-copy #hero-lede{ grid-area:lede; margin-top:26px; max-width:34ch; }
  .hero-copy .three{ grid-area:three; margin-top:8px; max-width:none; }
  .hero-copy .hero-pick{ grid-area:pick; margin-top:26px; }
  .hero-copy .freebie{ grid-area:gift; max-width:none; }
  .hero-copy .cta-row{ grid-area:cta; }
  .hero-copy .cta-note{ grid-area:note; max-width:70ch; }

  /* Prose still needs a readable measure, but the page around it does not.
     A single 70ch column in a 1400px frame reads as half an empty screen,
     which is the same dead space the hero had. Section headers become two
     columns: the heading holds the left, everything else stacks on the
     right, each keeping its own measure.

     Every child defaults to column 2 — these headers carry anything from a
     lone h2 to a heading plus three paragraphs and a <details>, and placing
     only the known three left the rest to auto-place on top of each other. */
  .band-head{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(48px,5vw,96px);
    align-items:start;
  }
  .band-head > *{ grid-column:2; }
  .band-head > .eyebrow{ grid-column:1 / -1; }
  .band-head > .h-section{ grid-column:1; grid-row:2; max-width:20ch; }
  .band-head > .band-sub{ max-width:58ch; }
  .band-head > .band-sub:first-of-type{ margin-top:0; }

  /* a header with nothing to put beside the heading keeps its own measure
     rather than reserving half a screen for nothing */
  .band-head:not(:has(> .band-sub)){ display:block; max-width:34ch; }

  .body-lg{ max-width:70ch; }
}

@media (min-width:1500px){
  :root{ --frame:1560px; }
  .h-display{ font-size:clamp(3.4rem,5.4vw,6rem); }
}

/* Past this width a fixed frame just banks dead margin either side,
   so the frame goes fluid and keeps a constant gutter instead. */
@media (min-width:1680px){
  :root{ --frame:min(92vw, 1900px); --gut:clamp(64px, 4vw, 88px); }
}

/* ============================================================
   THE FLOATING WHATSAPP BUTTON
   Off the header, onto the thumb. Present on every screen
   without taking space from the name.
   ============================================================ */
.wa-float{
  position:fixed; z-index:120;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wa); color:#04240F;
  border-radius:50%;
  width:60px; height:60px; padding:0;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.wa-float svg{ flex:none; }
/* Stand down while one of the page's own WhatsApp buttons is on screen,
   so the float never covers the thing it duplicates. */
.wa-float[data-stood-down]{
  opacity:0; transform:scale(.8) translateY(10px); pointer-events:none;
}
@media (max-width:420px){ .wa-float{ width:54px; height:54px; } }
.wa-float-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (hover:hover) and (pointer:fine){
  .wa-float:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.5); }
}
.wa-float:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){ .wa-float{ transition:none; } }

/* the name gets the space the button used to take */
.head-inner{ justify-content:flex-start; }
.head-nav{ margin-left:auto; }
.wm{ font-size:clamp(1.62rem, 2.6vw, 2.1rem); }
@media (max-width:1040px){ .wm{ font-size:1.72rem; } }

/* room at the foot so the floating button never sits on the last line */
.site-foot{ padding-bottom:88px; }
@media (min-width:641px){ .site-foot{ padding-bottom:32px; } }

/* ============================================================
   THE SPECIMEN
   One finding, shown whole, in the open. The proof stack was
   behind a collapse — the one thing on the page doing the
   credibility work was the one thing hidden by default.
   ============================================================ */
.specimen{
  border:1px solid var(--line-hi);
  border-left:3px solid var(--leak);
  border-radius:var(--r);
  background:var(--panel-hi);
  padding:clamp(20px,3vw,30px);
  max-width:780px;
}
.band-alt .specimen{ background:var(--void); }
.sp-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.sp-top .k{ color:var(--leak); }
.sp-cost{ margin-left:auto; text-align:right; }
.sp-cost .fig{ font-size:1.3rem; display:block; }
.sp-what{
  font-size:clamp(1.14rem,2.4vw,1.44rem); font-weight:700; font-stretch:106%;
  letter-spacing:-.018em; line-height:1.28; color:var(--ink); margin-bottom:18px;
}
.sp-body{ display:grid; gap:14px; margin:0; }
.sp-body > div{ display:grid; gap:5px; }
.sp-body dt{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.sp-body dd{ margin:0; font-size:.98rem; line-height:1.6; color:var(--ink-2); }

/* ---------- fit: two columns, read in one pass ---------- */
.fitgrid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.fit-col{ background:var(--void); padding:clamp(20px,2.6vw,28px); }
.band-alt .fit-col{ background:var(--panel); }
.fit-col .k{ display:block; margin-bottom:14px; }
.fit-col li{
  font-size:.98rem; line-height:1.5; color:var(--ink-2);
  padding:9px 0 9px 20px; position:relative;
}
.fit-yes li::before{
  content:""; position:absolute; left:0; top:.78em;
  width:9px; height:5px; border-left:1.5px solid var(--signal);
  border-bottom:1.5px solid var(--signal); transform:rotate(-45deg);
}
.fit-no li::before{
  content:""; position:absolute; left:1px; top:.95em;
  width:9px; height:1.5px; background:var(--ink-3);
}

/* ---------- an inline ask, wherever the argument lands ---------- */
.inline-cta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:clamp(22px,3vw,32px);
  padding-top:20px; border-top:1px solid var(--line);
}
.inline-cta p{ font-size:.98rem; color:var(--ink-3); margin:0; }

/* ============================================================
   THE MENU ON A PHONE
   The anchors used to sit in a scrolling strip under the header,
   which read as a stray band of "pages" and ate a row of screen.
   Behind a hamburger now: nothing until it is asked for.
   ============================================================ */
@media (max-width:1040px){
  .nav-toggle{ display:inline-flex; }

  .head-nav{
    display:block;
    position:absolute; left:0; right:0; top:100%;
    background:var(--panel);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:6px var(--gut) 10px;
    box-shadow:0 18px 40px rgba(0,0,0,.5);
  }
  .head-nav[hidden]{ display:none; }
  .head-nav a{
    display:block;
    padding:13px 0; font-size:1rem; color:var(--ink-2);
    border-bottom:1px solid var(--line);
  }
  .head-nav a:last-child{ border-bottom:0; }

  .head-inner{ height:78px; }
  :where(section[id], .report){ scroll-margin-top:86px; }
}