/* ===================================================================
   VIEWCAST — THE PRINTED CABLE CHART, DAY EDITION
   The same world as the night rendition, printed: chart paper, tinted
   water, buff land, ink coastlines, one green ink for the SmartCast
   trunk, one newspaper grotesk for everything written.
   Flat print only: no glow, no blur, no gradient, no shadow. Depth is
   paper-tone panels, never cast light. Radius 0 everywhere except the
   range thumb. Background-colors are written as literal hex (they
   equal the tokens below) so static contrast tooling can resolve the
   ground.
   =================================================================== */

:root{
  /* --- the paper ---------------------------------------------------- */
  --paper:#F2F3F0;
  --paper-2:#E9EBE6;
  --paper-3:#DFE2DC;

  /* --- the chart's materials ---------------------------------------- */
  --water:#D8E6EC;
  --land:#ECE7DA;
  --coast:#3A3F3B;
  --graticule:#B9C7CE;

  /* --- the inks ------------------------------------------------------ */
  --ink:#171A18;
  --ink-2:#454A46;
  --ink-3:#6A706B;
  --rule:#C9CEC7;
  --green:#00B65B;
  --green-ink:#0B6B3B;
  --green-soft:#CDEEDB;
  --focus:#171A18;

  /* --- one family, weight-driven. The wordmark alone keeps Space
         Grotesk; --label and --mono are kept as names so every rule
         written for the night edition keeps resolving, but both now
         point at the one reading face: no narrow tracked labels, no
         monospace anywhere on the site. ---------------------------- */
  --display:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --label:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wordmark:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  --nav-h:64px;
  --strip-h:116px;
  --maxw:1680px;
  --gutter:clamp(16px,4vw,72px);
  --cell-pad:18px;
  --hero-inset:clamp(16px,4vw,48px);

  color-scheme:light;
  accent-color:#171A18;
  caret-color:#171A18;
  scrollbar-color:#6A706B #E9EBE6;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  padding-top:var(--nav-h);
  background-color:#F2F3F0;
  color:#171A18;
  font-family:var(--display);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

header,main,footer{background-color:#F2F3F0}
main{scroll-margin-top:var(--nav-h)}

::selection{background-color:#CDEEDB;color:#171A18}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background-color:#E9EBE6}
::-webkit-scrollbar-thumb{background-color:#6A706B}
::-webkit-scrollbar-thumb:hover{background-color:#454A46}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

svg{max-width:100%}
img{max-width:100%}

/* --- shared type ---------------------------------------------------- */

h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.6rem,5vw,4.5rem);line-height:.98;letter-spacing:-.025em}
h2{font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.015em}
h3{font-size:1.2rem;line-height:1.35;letter-spacing:-.01em}

p{margin:0;color:var(--ink-2);text-wrap:pretty}
.prose{max-width:66ch}
.prose p + p,.prose h3 + p{margin-top:1.05em}
.prose h3{margin-top:1.9em}
.lead{color:var(--ink)}

/* small labels and legend text: sentence case, no tracking, one face */
.label{
  font-family:var(--display);
  font-weight:500;
  font-size:.9375rem;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-3);
  margin:0;
}
.label-ivory{color:var(--ink)}
.label-2{color:var(--ink-2)}

/* a figure is the same face, heavier, with tabular numerals */
.fig{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.01em;color:var(--ink)}

/* drawn labels inside the authored diagrams: painted from `color`, so the
   text keeps a real, checkable color against the sheet it sits on */
.svg-label{font-family:var(--display);font-weight:500;letter-spacing:0;text-transform:none;fill:currentColor}
.svg-dim{color:#454A46}
.svg-green{color:#0B6B3B}

a{color:var(--ink);text-underline-offset:.28em}
a:not(.btn):not(.skip):hover{color:var(--green-ink)}

.skip{
  position:absolute;left:0;top:0;z-index:60;
  transform:translateY(-130%);
  background-color:#171A18;color:#F2F3F0;
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  letter-spacing:0;text-transform:none;
  padding:12px 18px;text-decoration:none;
}
.skip:focus{transform:none}

.vc-defs{position:absolute;width:0;height:0;overflow:hidden}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ink-3 reads 4.55:1 on paper but only 4.22:1 on paper-2, so every
   small text that sits inside a paper-2 panel steps up one ink. The
   ink-3 LINES (dimension rules, ticks, stubs) are unchanged — the step
   is about text, not about the drafting weight. */
.strip-in .label:not(.label-ivory),.strip-in .foot,.strip-in .note,
.drawing .scroll-hint,.sav-panel .chart-caption{color:var(--ink-2)}

/* --- buttons and links ----------------------------------------------
   Primary is ink on paper; the green is a chart ink, never a button. */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  background-color:#171A18;color:#F2F3F0;
  border:1px solid #171A18;border-radius:0;
  font-family:var(--display);font-weight:600;font-size:1rem;
  letter-spacing:0;text-transform:none;
  padding:14px 22px;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s linear,color .15s linear,transform .12s linear;
}
.btn:hover{background-color:#454A46;border-color:#454A46;color:#F2F3F0}
.btn:active{background-color:#171A18;border-color:#171A18;color:#F2F3F0;transform:translateY(1px)}
.btn-sm{padding:9px 16px;font-size:.9375rem}

.textlink{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:1rem;
  letter-spacing:0;text-transform:none;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
  transition:color .18s linear;
}
.textlink:hover{color:var(--green-ink)}
.textlink .arrow{transition:transform .18s linear}
.textlink:hover .arrow{transform:translateX(3px)}

/* --- nav ------------------------------------------------------------- */

.topbar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:40;
  height:var(--nav-h);
  background-color:#F2F3F0;
  border-bottom:1px solid transparent;
  transition:border-color .18s linear;
}
/* the rule under the nav is ruled in only once the page has moved */
.topbar.is-scrolled{border-bottom-color:var(--rule)}
.topbar-in{
  height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand .mark{height:26px;width:auto;color:var(--ink)}
/* the one place Space Grotesk is set on this site */
.wordmark{font-family:var(--wordmark);font-weight:500;font-size:1.06rem;letter-spacing:-.01em}

.navlist{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);list-style:none;margin:0;padding:0;margin-inline-start:auto}
.navlist a{
  position:relative;
  font-family:var(--display);font-weight:500;font-size:1rem;
  letter-spacing:0;text-transform:none;color:var(--ink-2);
  text-decoration:none;padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color .18s linear,border-color .18s linear;
}
/* the underline is drawn in from the left, the way a rule is ruled */
.navlist a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background-color:#171A18;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .18s cubic-bezier(.16,1,.3,1);
}
.navlist a:hover,.navlist a:focus-visible{color:var(--ink)}
.navlist a:hover::after,.navlist a:focus-visible::after{transform:scaleX(1)}
.navlist a[aria-current="true"],.navlist a[aria-current="page"]{color:var(--ink)}
.navlist a[aria-current="true"]::after,.navlist a[aria-current="page"]::after{transform:scaleX(1)}
.menu-panel a[aria-current="true"],.menu-panel a[aria-current="page"]{color:var(--ink)}

.topbar .btn{margin-inline-start:clamp(16px,2.4vw,32px)}

.menu{position:relative;display:none;margin-inline-start:auto}
.menu > summary{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;cursor:pointer;color:var(--ink);
  list-style:none;
}
.menu > summary::-webkit-details-marker{display:none}
.menu-panel{
  position:absolute;inset-inline-end:0;top:calc(100% + 11px);
  min-width:200px;
  background-color:#E9EBE6;
  border:1px solid var(--rule);
  padding:8px 0;
}
.menu-panel a{
  display:block;padding:11px 18px;
  font-family:var(--display);font-weight:500;font-size:1rem;
  letter-spacing:0;text-transform:none;color:var(--ink-2);
  text-decoration:none;
}
.menu-panel a:hover{color:var(--ink);background-color:#DFE2DC}

/* --- sheets ----------------------------------------------------------
   Sections are separated by whitespace, not by a rule. */

.sheet{padding-block:clamp(44px,4.6vw,72px);scroll-margin-top:calc(var(--nav-h) + var(--strip-h) + 18px)}

.sheet-head{
  display:flex;align-items:baseline;justify-content:flex-end;gap:16px;
  border-top:0;
  padding-top:0;
  margin-bottom:clamp(24px,3vw,44px);
}
.sheet-ref{white-space:nowrap}

/* --- sheet 1: the chart, full bleed ---------------------------------- */

.hero{position:relative;width:100%;overflow-x:clip}
.hero-map{
  width:100%;
  height:min(84vh,calc(100vw * 820 / 1600));
  min-height:520px;
  background-color:#F2F3F0;
}
.hero-map svg{display:block;width:100%;height:100%}

/* The title panel is an opaque sheet of paper laid over the emptiest
   quarter of the chart, ruled once in ink. Its width is capped so its
   right edge stays west of the South America master (map x 601 of
   1600) and of that master's fan. */
.cartouche-wrap{
  position:absolute;z-index:2;
  left:var(--hero-inset);bottom:40px;
  width:min(560px,calc(35vw - var(--hero-inset)));
}
.chart-title{
  display:inline-block;
  background-color:#F2F3F0;
  padding:0 12px 7px 0;
  max-width:100%;
  color:var(--ink-3);
}
.cartouche{
  position:relative;
  background-color:#F2F3F0;
  border:1px solid var(--ink);
  padding:clamp(24px,2.6vw,36px);
}
.cartouche h1{font-size:clamp(2.25rem,calc(4.8vw - 19px),3.75rem);max-width:none;margin-bottom:.1em}
.hero-actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(20px,2.2vw,30px);
}

/* --- the control block: one control for both drawings -----------------
   A paper-2 panel spanning the content width. The ground behind it is
   paper, so nothing shows through while it is docked; the only rule is
   the one under it, and only while it is docked. */

.controlled{position:relative}

.strip{
  position:sticky;top:var(--nav-h);z-index:5;
  background-color:#F2F3F0;
  border-top:0;
  border-bottom:1px solid transparent;
  transition:border-color .2s linear;
}
.strip-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.strip.is-docked{border-bottom-color:var(--rule)}
.strip-in{
  /* the panel spans the content width: the same box as .wrap's content */
  width:calc(100% - 2 * var(--gutter));
  max-width:calc(var(--maxw) - 2 * var(--gutter));
  margin-inline:auto;margin-block:10px;
  padding:20px 24px;
  background-color:#E9EBE6;
  min-height:var(--strip-h);
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr) minmax(0,1.5fr);
  align-items:stretch;
  column-gap:clamp(20px,2.6vw,44px);
}
.strip-cell{
  min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:9px;
  padding:0;
  border-left:0;
}
.strip-cell:first-child{border-left:0}
.strip-cap{font-size:.9375rem}

.key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.key li{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:12px}
.key svg{display:block;width:32px;height:8px}
.key span{
  font-family:var(--display);font-weight:500;font-size:.9375rem;line-height:1.35;
  letter-spacing:0;color:var(--ink-2);
  transition:color .18s linear;
}
.key li[data-layer]{cursor:default}
.key li:hover span{color:var(--ink)}

.slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* the count-up reserves its own width in ch, so no digit moves the row */
.slider-top output{font-size:1.75rem;line-height:1.1;min-width:8ch;text-align:right}
.rail{position:relative;height:28px}
.rail-line{position:absolute;left:6px;right:6px;top:13px;height:2px;background-color:rgba(106,112,107,.4)}
.rail-fill{position:absolute;left:6px;top:13px;height:2px;background-color:#00B65B;width:0}
.rail input[type="range"]{
  position:absolute;inset:0;width:100%;height:28px;margin:0;
  -webkit-appearance:none;appearance:none;background-color:transparent;cursor:pointer;
}
.rail input[type="range"]::-webkit-slider-runnable-track{height:28px;background-color:transparent;border:0}
.rail input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-top:6px;
  background-color:#171A18;border:0;border-radius:50%;
  transition:background-color .12s linear,transform .12s linear;
}
.rail input[type="range"]::-moz-range-track{height:28px;background-color:transparent;border:0}
.rail input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;background-color:#171A18;border:0;border-radius:50%;
  transition:background-color .12s linear,transform .12s linear;
}
.rail input[type="range"]:hover::-webkit-slider-thumb{background-color:#454A46}
.rail input[type="range"]:hover::-moz-range-thumb{background-color:#454A46}
.rail input[type="range"]:active::-webkit-slider-thumb{background-color:#171A18;transform:scale(1.15)}
.rail input[type="range"]:active::-moz-range-thumb{background-color:#171A18;transform:scale(1.15)}
.rail input[type="range"]:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.range-ends{display:flex;justify-content:space-between;gap:12px;font-size:.875rem}

/* the readouts read as legend entries: figure, label, caveat */
.ro-row{
  margin:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,22px);
}
.ro-row > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ro-row dt{margin:0}
.ro-row dd{margin:0;order:-1}
.ro-lab{font-size:.9375rem;letter-spacing:0}
.ro-row .fig{font-size:1.75rem;line-height:1.15;display:block;min-width:5ch}
.ro-row .fig-green{color:var(--ink)}
.foot{font-size:.9375rem;line-height:1.45;color:var(--ink-3);font-style:italic}
.note{font-size:.9375rem;line-height:1.5;color:var(--ink-3)}

/* --- sheet 2: the one-line signal drawing ---------------------------- */

.signal-body{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(28px,3.6vw,60px);
  row-gap:18px;
  align-items:start;
}
.signal-lead{grid-column:1;grid-row:1;font-size:1.25rem;line-height:1.5;max-width:46ch}
.signal-head{grid-column:2;grid-row:1}
.drawing{grid-column:1/-1;grid-row:2;margin-top:clamp(26px,3vw,44px)}
.signal-notes{grid-column:1/-1;grid-row:3;min-width:0;margin-top:clamp(20px,2.4vw,34px)}

/* the notes, as a running list under the drawing the balloons number:
   a bold numeral and the sentence, no rules and no table */
.runlist{
  list-style:none;margin:0;padding:0;counter-reset:runnote;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,72px);row-gap:.7em;
}
.runlist li{
  counter-increment:runnote;
  /* Hangende nummering met gewone tekstdoorloop. Dit wás een grid van
     1.9em + 1fr, en dat brak zodra een item naast tekst ook een element
     bevatte: dat element werd een derde grid-item en belandde op de
     volgende rij in de kolom van 1.9em, waar een URL per letter afbrak.
     Met een absolute marker loopt alles gewoon inline mee. */
  position:relative;
  padding-inline-start:2.3em;
  max-width:56ch;
  font-size:1rem;line-height:1.55;color:var(--ink-2);
}
.runlist li::before{
  content:counter(runnote);
  position:absolute;inset-inline-start:0;top:0;width:1.9em;
  font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
}
.runlist-cap{margin-bottom:.8em}

.phone-aside{display:none;margin-top:26px;flex-direction:column;gap:12px}

/* a drawing sits on a paper-2 panel, with no border at all. The
   figure's own UA margin is cleared, or the panel would read as an
   inset card rather than as the sheet the drawing is printed on. */
.drawing{background-color:#E9EBE6;padding:26px;margin-inline:0;margin-bottom:0}
.drawing-scroll{overflow-x:auto;overflow-y:hidden}
.dwg{display:block;width:100%;max-width:1500px;margin-inline:auto;height:auto}
.scroll-hint{
  display:none;align-items:center;gap:8px;margin-top:10px;
  font-family:var(--display);font-weight:500;font-size:.9375rem;
  letter-spacing:0;text-transform:none;color:var(--ink-3);
}
.scroll-hint svg{width:16px;height:10px;stroke:currentColor;stroke-width:1.5;fill:none;flex:none}

/* the drafting set, printed: ink 1.5px, one green signal at 3px,
   ink-3 for everything that measures rather than carries */
.dwg .sym{fill:none;stroke:#171A18;stroke-opacity:1;stroke-width:1.5}
.dwg .sig{fill:none;stroke:#00B65B;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round}
.dwg .fan{fill:none;stroke:#00B65B;stroke-width:1.5}
.dwg .node{fill:#00B65B;fill-opacity:1;stroke:#171A18;stroke-width:1.2}
.dwg .tick{fill:none;stroke:#6A706B;stroke-width:1}
.dwg .vw{fill:#6A706B}
.dwg .dim{fill:none;stroke:#6A706B;stroke-width:1}
.dwg .dim-head{fill:#6A706B}
.dwg .brk{fill:none;stroke:#6A706B;stroke-width:1}
.dwg .lead-line{fill:none;stroke:#171A18;stroke-width:1}
.dwg .balloon{fill:#E9EBE6;stroke:#171A18;stroke-width:1}
.dwg text{fill:currentColor}
.dwg .balloon-n{
  color:#171A18;font-family:var(--display);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;
  text-anchor:middle;dominant-baseline:central;
}
.dwg .t-lab{
  color:#171A18;font-family:var(--display);font-weight:500;
  font-size:15px;letter-spacing:0;text-transform:none;
}
.dwg .t-note{color:#454A46;font-family:var(--display);font-size:13.5px}
.dwg .t-dim{color:#454A46;font-family:var(--display);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.dwg .t-dim-live{color:#171A18}

/* --- proof strip: a legend row, not a ruled table --------------------- */

.proofstrip{
  display:flex;flex-wrap:wrap;
  gap:14px 32px;
  list-style:none;margin:0;padding:0;
  border:0;
}
.proofstrip li{
  display:flex;flex-direction:column;gap:2px;
  padding:0;
  border:0;
}
.proofstrip .fig{font-size:1.75rem;line-height:1.15}
.proofstrip .label{font-size:.9375rem}
.proofstrip .label:not(.label-2){color:var(--ink-3);font-style:italic}

/* --- sheet 3: how it works, drawn as one live comparison ------------- */

.how-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  column-gap:clamp(24px,3.4vw,64px);row-gap:22px;
  align-items:baseline;
}
.how-top h2{max-width:20ch}

/* the audience stepper: paper-2 cells, the chosen one inked */
.stepper{margin:0;padding:0;border:0;min-width:0}
.stepper legend{padding:0;margin-bottom:11px}
.seg{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px}
.seg-in{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;margin:0}
.seg-lab{
  display:inline-flex;align-items:baseline;gap:7px;
  margin-left:0;padding:10px 15px;
  border:0;
  background-color:#E9EBE6;
  font-family:var(--display);font-weight:500;font-size:1rem;
  letter-spacing:0;text-transform:none;
  color:var(--ink-2);
  white-space:nowrap;cursor:pointer;
  transition:background-color .16s linear,color .16s linear;
}
.seg-lab:first-of-type{margin-left:0}
.seg-lab .fig{font-size:1rem;letter-spacing:0;color:inherit;font-weight:700}
.seg-in:not(:checked) + .seg-lab:hover{color:var(--ink);background-color:#DFE2DC}
.seg-in:checked + .seg-lab{background-color:#171A18;color:#F2F3F0}
.seg-in:focus-visible + .seg-lab{outline:2px solid var(--focus);outline-offset:3px}

/* the comparison itself */
.compare{margin:clamp(30px,3.6vw,52px) 0 0;min-width:0;max-width:100%}
.cmp{display:block;width:100%;max-width:1500px;margin-inline:auto;height:auto}

.cmp .sym{fill:none;stroke:#171A18;stroke-opacity:1;stroke-width:1.5}
.cmp .cable{fill:none;stroke:#171A18;stroke-opacity:.6;stroke-width:.7}
.cmp .band{fill:url(#cmp-hatch);fill-opacity:.12;stroke:#171A18;stroke-opacity:.3;stroke-width:1}
.cmp .sig{fill:none;stroke:#00B65B;stroke-width:3}
.cmp .node-dot{fill:#00B65B;stroke:#171A18;stroke-width:1.2}
.cmp .fan{fill:none;stroke:#6A706B;stroke-width:1}
.cmp .vw{fill:#6A706B}
.cmp .bar{fill:url(#cmp-hatch);fill-opacity:.18;stroke:#171A18;stroke-opacity:.3;stroke-width:1}
.cmp .dim{fill:none;stroke:#6A706B;stroke-width:1}
.cmp .dim-head{fill:#6A706B}
.cmp .brk{fill:none;stroke:#6A706B;stroke-width:1}
.cmp .rule{fill:none;stroke:#C9CEC7;stroke-width:1}
.cmp text{fill:currentColor}
.cmp .t-lane{
  color:#171A18;font-family:var(--display);font-weight:600;
  font-size:16px;letter-spacing:0;text-transform:none;
}
.cmp .t-sym{
  color:#454A46;font-family:var(--display);font-weight:500;
  font-size:14px;letter-spacing:0;text-transform:none;
}
.cmp .t-note{color:#454A46;font-family:var(--display);font-size:13.5px}
.cmp .t-dim{color:#454A46;font-family:var(--display);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.cmp .t-copies{color:#171A18;font-family:var(--display);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.cmp .t-one{color:#0B6B3B;font-family:var(--display);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.cmp .t-viewers{color:#454A46;font-family:var(--display);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}

/* the two backbone counters, as legend entries */
.cmp-counters{
  margin:clamp(20px,2.4vw,32px) 0 0;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  border-top:0;
  padding-top:0;
}
.cmp-cap{font-size:.9375rem;letter-spacing:0}
.cmp-counts{
  margin:0;display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:12px 32px;
}
.cmp-counts > div{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:right}
.cmp-counts dt,.cmp-counts dd{margin:0}
.cmp-count{font-size:2.6rem;line-height:1.05;display:block}
.cmp-counts .fig-green{color:var(--ink)}

.how-prose{
  margin-top:clamp(32px,4vw,60px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,72px);
  align-items:start;
}
.how-prose .prose{max-width:62ch}
.how-prose h3{margin-top:0}
.leader{display:block;width:36px;height:28px;margin-bottom:14px;color:var(--ink-3);fill:none;stroke:currentColor;stroke-width:1.5}

/* --- sheet 4: savings ------------------------------------------------ */

.savings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.savings-grid h2{max-width:24ch;margin-bottom:.7em}
.savings-grid .prose + .figure-sentence{margin-top:1.05em}
/* the pull figure: the saving set at figure size inside its own sentence */
.pullfig{
  font-weight:700;font-size:2.6rem;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);
  white-space:nowrap;
}
.figure-sentence{max-width:60ch;line-height:1.55}
.sav-panel{background-color:#E9EBE6;padding:28px}
.chart-caption{margin-top:16px;font-size:.9375rem;line-height:1.5;color:var(--ink-3);font-style:italic;max-width:52ch}
#savings-chart{width:100%;max-width:640px;height:auto;display:block}

/* --- sheet 5: platform, the six modules as one signal chain -----------
   The chain is real ink, not a border: every module carries its own rail
   — an SVG with no viewBox, so one user unit is one CSS pixel at every
   width and the 2px line and the 4px node keep their printed size. The
   segments butt against one another (no column gap; the gutter is the
   module's own padding), so six segments read as one continuous line,
   the same markup breaks into two lines at three columns, and on phones
   the horizontal rail gives way to a vertical one down the left. */

.chain{
  --chain-gutter:clamp(18px,2vw,34px);
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:0;
  row-gap:clamp(30px,3.4vw,46px);
  margin-top:clamp(30px,3.6vw,52px);
}
.chain-mod{position:relative;min-width:0;padding-right:var(--chain-gutter)}
/* the rail runs the whole cell, gutter included, so the segments meet */
.rail-h{display:block;width:calc(100% + var(--chain-gutter));height:14px;overflow:visible}
.rail-v{display:none}
.chain-line{stroke:#00B65B;stroke-width:2;fill:none}
.chain-node{fill:#00B65B;stroke:#171A18;stroke-width:.8}
.chain-name{
  font-family:var(--display);font-weight:600;
  font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);
  margin:15px 0 0;
}
.chain-text{font-size:1rem;line-height:1.55;color:var(--ink-2);max-width:36ch;margin-top:.6em}

#platform h2{max-width:22ch}
.carve-intro{margin-top:.72em;font-size:1.15rem;line-height:1.5;max-width:66ch}
.carve{margin-top:clamp(34px,4vw,60px);font-size:1.15rem;line-height:1.5;max-width:66ch}

/* the "runs on" line: prose with a bold lead-in, no rules */
.specrow{
  display:block;
  margin:clamp(26px,3vw,40px) 0 0;
  border:0;
  padding:0;
  max-width:86ch;
}
.specrow dt,.specrow dd{margin:0;display:inline}
.specrow dt{font-weight:700;color:var(--ink)}
.specrow dt::after{content:"\00a0\00a0"}
.specrow dd{
  font-family:var(--display);font-weight:400;
  font-size:1.0625rem;line-height:1.6;letter-spacing:0;
  color:var(--ink-2);
}
.specrow .fig{font-size:1.0625rem;letter-spacing:0;font-weight:600}

/* --- sheet 6: proof --------------------------------------------------- */

.proof-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.proof-grid h2{max-width:16ch;margin-bottom:.62em}
.proof-body{max-width:56ch}
.proof-main .textlink{margin-top:clamp(26px,2.6vw,34px)}
/* The five production facts as a legend row: figure, term, caveat, set
   as one definition list so a reader — or a machine — gets the three as
   one entry. `dd` is ordered above `dt` so the figure still leads. */
.datarow{
  margin:clamp(30px,3.4vw,48px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:16px 32px;
  border:0;
}
.datarow > div{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  padding:0;
  border:0;
}
.datarow dt{display:flex;flex-direction:column;gap:0;margin:0;min-width:0}
.datarow dd{margin:0;order:-1}
.datarow .fig{font-size:1.75rem;line-height:1.15}
.datarow .label:not(.label-2){color:var(--ink-3);font-style:italic}

/* the chart notes: prose with a bold lead-in, no rules */
.notes-head{padding-bottom:0;border-bottom:0;margin-bottom:.9em}
.note-entry{border-top:0;padding-top:0;margin-top:1.3em}
.note-entry:first-of-type{border-top:0;padding-top:0;margin-top:0}
.note-entry .note-kind{margin-bottom:0;font-weight:700;color:var(--ink);font-style:normal}
.note-entry .note-txt{font-size:1rem;line-height:1.6;color:var(--ink-2)}

/* --- sheet 7: contact -------------------------------------------------- */

.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.contact-grid h2{max-width:12ch;margin-bottom:.62em}
.contact-side .prose{max-width:52ch}

.form-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.9vw,26px);
}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-wide{grid-column:1/-1}
.field input,.field textarea{
  width:100%;
  min-height:46px;
  background-color:#E9EBE6;
  color:#171A18;
  border:1px solid var(--rule);
  border-radius:0;
  font-family:var(--display);font-size:1rem;line-height:1.5;
  padding:11px 13px;
  transition:border-color .12s linear;
}
.field textarea{resize:vertical;min-height:7.2em}
#c-bill,#c-peak{font-family:var(--display);font-size:1rem;font-variant-numeric:tabular-nums}
.field input::placeholder,.field textarea::placeholder{color:#454A46;opacity:1}
.field input:hover,.field textarea:hover{border-color:#6A706B}
.field input:focus,.field textarea:focus{border-color:#171A18}
.field input[aria-invalid="true"]{border-color:#171A18;border-width:2px}

.field-error{
  margin-top:9px;padding-top:9px;border-top:2px solid var(--ink);
  font-family:var(--display);font-weight:500;font-size:.9375rem;line-height:1.45;
  letter-spacing:0;color:var(--ink);
}
.field-error:empty{margin-top:0;padding-top:0;border-top:0}

.form-foot{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,2vw,26px);
  margin-top:clamp(20px,2.2vw,30px);
}
.form-note{
  font-family:var(--display);font-weight:500;font-size:.9375rem;line-height:1.45;
  letter-spacing:0;color:var(--green-ink);margin:0;max-width:44ch;
}

.contact-meta{
  margin:clamp(26px,3vw,42px) 0 0;padding-top:0;
  border-top:0;
  display:flex;flex-wrap:wrap;
  gap:14px 32px;
}
.contact-meta > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-meta dt,.contact-meta dd{margin:0}
.contact-meta dd{
  font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.45;
  letter-spacing:0;color:var(--ink);
}
.contact-meta a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .15s linear}
.contact-meta a:hover{color:var(--green-ink)}

/* --- footer ---------------------------------------------------------- */

.colophon-sheet{padding-block:clamp(44px,5vw,76px) clamp(36px,4vw,56px)}
.colophon{
  font-family:var(--display);font-weight:400;
  font-size:.875rem;line-height:1.55;letter-spacing:0;
  color:var(--ink-3);
  columns:3;column-gap:34px;column-rule:0;
  margin:0;
  max-width:none;
}
.copyline{
  display:flex;align-items:center;gap:12px;
  margin-top:clamp(28px,3vw,44px);
  padding-top:0;
  border-top:0;
}
.copyline .mark{height:18px;width:auto;color:var(--ink-3)}
.copyline span{font-family:var(--display);font-size:.875rem;letter-spacing:0;color:var(--ink-3)}

/* --- responsive ------------------------------------------------------- */

@media (max-width:1239px){
  /* the chain breaks into two lines of three; each row's three segments
     still butt together, so each row is one line */
  .chain{grid-template-columns:repeat(3,minmax(0,1fr))}

  .strip-in{grid-template-columns:minmax(0,1.3fr) minmax(220px,1fr) minmax(0,1.5fr)}
  .strip-note{
    grid-column:1/-1;border-left:0;border-top:0;
    margin-top:12px;padding-top:12px;
    flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:14px;
    justify-content:flex-start;
  }
}

@media (max-width:1100px){
  .savings-grid,.proof-grid,.contact-grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,44px)}
  .savings-grid h2,.proof-grid h2,.contact-grid h2{max-width:26ch}
  .contact-side .prose{max-width:60ch}
  .how-top{grid-template-columns:minmax(0,1fr)}
  .how-top h2{max-width:26ch}
  .seg{justify-content:flex-start}
  .cmp-counters{align-items:flex-start}
  .cmp-counts{justify-content:flex-start}
  .cmp-counts > div{text-align:left}
  .how-prose{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:999px){
  /* one column: the chain turns and runs down the left margin. Each
     module's rail is the full height of its own cell, so the segments
     still butt into one unbroken line. */
  .chain{grid-template-columns:minmax(0,1fr);row-gap:0}
  .chain-mod{padding-right:0;padding-left:28px;padding-bottom:26px}
  .chain-mod:last-child{padding-bottom:0}
  .rail-h{display:none}
  .rail-v{display:block;position:absolute;left:0;top:0;width:14px;height:100%;overflow:visible}
  .chain-name{margin-top:0}
  .chain-text{max-width:56ch}

  :root{--strip-h:220px}
  .navlist{display:none}
  .menu{display:block}
  .topbar .btn{margin-inline-start:0}
  .topbar-in{gap:14px}

  .hero{display:flex;flex-direction:column}
  .hero-map{height:clamp(320px,58vh,520px);min-height:0;order:2}
  .cartouche-wrap{
    position:static;order:1;width:auto;
    padding:clamp(20px,4vw,28px) var(--gutter) clamp(22px,3vw,30px);
  }
  .cartouche{border-width:0;padding:0}
  .cartouche h1{font-size:2.5rem}
  .chart-title{padding-bottom:9px}

  .strip-in{grid-template-columns:minmax(0,1fr);min-height:0;padding:14px 16px}
  .strip-cell{padding-top:9px;padding-bottom:9px;gap:7px}
  .strip-legend,.strip-note{display:none}
  .strip-readouts{border-top:0;padding-top:0}
  .ro-row{gap:10px}
  .ro-row .fig{font-size:1.25rem}

  .signal-body{display:flex;flex-direction:column;gap:clamp(20px,3.5vw,30px)}
  .signal-lead{order:1}
  .signal-head{order:2}
  .drawing{order:3;margin-top:0}
  .signal-notes{order:4;margin-top:0}
  .runlist{grid-template-columns:minmax(0,1fr)}
  .dwg{min-width:900px}
  .scroll-hint{display:flex}
  .phone-aside{display:flex}

  /* the stepper becomes two rows of equal cells; the 2px gaps are the
     paper showing between them */
  .seg{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2px;background-color:transparent;
    border:0;
  }
  .seg-lab{
    margin-left:0;border:0;padding:11px 8px;
    justify-content:center;font-size:.9375rem;letter-spacing:0;
  }
  .seg-lab .fig{font-size:.9375rem}
  .seg-lab:last-child{grid-column:span 2}

  .cmp{min-width:900px}
  .cmp-counts{flex-direction:column;gap:18px}
}

@media (max-width:620px){
  .sav-panel,.drawing,.sp-fig{padding:16px}
  .sp-fig .dwg,.sp-side .sp-fig .dwg{min-width:520px}
  .sp-fig .scroll-hint{display:flex}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .field input{min-height:46px}
  .form-foot{gap:14px}
  .form-foot .btn{width:100%;justify-content:center}
  .contact-meta{flex-direction:column;gap:14px}
  .specrow{max-width:none}

  .colophon{columns:1}
  .hero-actions{gap:16px}
  .cartouche .btn{width:100%;justify-content:center}
  .ro-row{grid-template-columns:minmax(0,1fr)}
  .ro-row > div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
  .ro-row dt{max-width:18ch}
}

@media (max-width:420px){
  .wordmark{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* phone fixes (lead, 15 sep): no page-wide horizontal scroll; compact sticky strip */
@media (max-width:999px){
  .drawing,.drawing-scroll{min-width:0;max-width:100%}
  .drawing{margin-inline:0;width:auto}
  .strip-in{padding-top:10px;padding-bottom:10px}
  .strip-cell{padding-top:6px;padding-bottom:6px;gap:5px}
  .strip-readouts{padding-top:0}
  .strip-readouts > :not(.ro-row){display:none}
  .ro-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .ro-row > div{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .ro-row dt{max-width:none;font-size:.875rem;line-height:1.25}
  .slider-top output{font-size:1.5rem}
}

/* ===================================================================
   MOTION CONTRACT — one authored moment, then feedback only.
   The chart is plotted on load like a drafting pen laying cable; every
   other movement is either feedback (120–180ms) or relationship
   (200ms). Only transform, opacity, stroke-dashoffset, attributes,
   background-color and color are animated. No filter, no blur, no
   shadow, no loop. Every state below has a reduced-motion path at the
   bottom of this block.
   =================================================================== */

/* --- the title panel's rule, drafted around the box once on load ---- */
@media (min-width:1000px){
  .cartouche.is-drafting{border-color:transparent}
  .cartouche.is-drafting::before{
    content:"";position:absolute;inset:-1px;pointer-events:none;
    border:1px solid var(--ink);
    clip-path:inset(0 calc((1 - var(--draft,1)) * 100%) calc((1 - var(--draft,1)) * 100%) 0);
  }
}

/* --- the chart's pooled ink -----------------------------------------
   Every endnode the chart can draw exists once. A slot that the current
   audience does not use is not drawn at all; a repaint writes
   coordinates and toggles this class, and never makes or unmakes a
   node. */
.vc-off{display:none}

/* --- relationship hover on the chart --------------------------------
   Asking for one region brings its fan-out up and quiets the rest;
   asking for one legend layer keeps that layer and quiets the other
   two. JS only sets data-focus / data-layer / .is-lit. */
#vc-map .vc-route,#vc-map .vc-fan,#vc-map .vc-stub,#vc-map .vc-en-dot{
  transition:opacity .2s linear,stroke-width .2s linear;
}
/* the master keeps its printed ink ring; a transparent disc beside it
   carries the pointer target */
#vc-map .vc-hit{fill:rgba(0,0,0,0)}
#vc-map .vc-mlabel{cursor:pointer}
#vc-map[data-focus] .vc-fan,
#vc-map[data-focus] .vc-stub,
#vc-map[data-focus] .vc-en-dot{opacity:.35}
#vc-map[data-focus] .vc-route{opacity:.6}
#vc-map[data-focus] .is-lit .vc-fan{opacity:1;stroke-width:1.2}
#vc-map[data-focus] .is-lit .vc-stub,
#vc-map[data-focus] .is-lit .vc-en-dot{opacity:1}
#vc-map[data-focus] .vc-route.is-lit{opacity:1}
#vc-map[data-layer="trunk"] .vc-fan,
#vc-map[data-layer="trunk"] .vc-stub,
#vc-map[data-layer="trunk"] .vc-en-dot{opacity:.3}
#vc-map[data-layer="fans"] .vc-route,
#vc-map[data-layer="fans"] .vc-stub{opacity:.3}
#vc-map[data-layer="stubs"] .vc-route,
#vc-map[data-layer="stubs"] .vc-fan,
#vc-map[data-layer="stubs"] .vc-en-dot{opacity:.3}

/* --- a readout acknowledges its own change ---------------------------
   A 1px rule is ruled under the figure, left to right, and fades. */
.strip output{position:relative}
.strip output::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background-color:#171A18;
  transform:scaleX(0);transform-origin:left center;opacity:0;
  pointer-events:none;
}
.strip output.is-ack::after{animation:vc-ack .7s forwards}
@keyframes vc-ack{
  0%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  57%{transform:scaleX(1);opacity:1;animation-timing-function:linear}
  100%{transform:scaleX(1);opacity:0}
}
@keyframes vc-ack-still{
  0%{transform:scaleX(1);opacity:1}
  57%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

/* --- reduced motion: fewer and gentler, not nothing -------------------
   Spatial movement and plotting go (the load sequence, the scroll
   plots, the range thumb, the button nudge, the arrow, the underline
   wipe). Colour and state feedback stay, and a changed readout still
   acknowledges itself — the rule appears and fades without scaling. */
@media (prefers-reduced-motion:reduce){
  .btn,.navlist a,.seg-lab,.textlink,.key span,.strip{transition-duration:.12s !important}
  .btn:active{transform:none}
  .textlink:hover .arrow{transform:none}
  .navlist a::after{transition:none !important}
  .rail input[type="range"]:active::-webkit-slider-thumb{transform:none}
  .rail input[type="range"]:active::-moz-range-thumb{transform:none}
  .strip output.is-ack::after{animation:vc-ack-still .55s linear forwards !important}
}

/* ===================================================================
   THE GLOSSARY — the five words this site uses, defined once.

   A plain definition list: the term in the reading face at 600, its
   definition under it. No rules; the air between entries does the
   dividing.
   =================================================================== */

.glossary-block{margin-top:clamp(34px,4vw,58px)}
.glossary{
  margin:14px 0 0;
  display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);
  gap:0 clamp(18px,2.4vw,40px);
  border-top:0;
}
.glossary dt,.glossary dd{
  margin:0;
  border-bottom:0;
  padding:10px 0 9px;
  min-width:0;
}
.glossary dt{
  font-family:var(--display);font-weight:600;font-size:1rem;
  letter-spacing:0;text-transform:none;color:var(--ink);
  white-space:nowrap;
}
.glossary dfn{font-style:normal}
.glossary dd{font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:78ch}

/* on a phone the pair stacks: the term keeps its own air, and the
   space under the definition closes the entry */
@media (max-width:620px){
  .glossary{grid-template-columns:minmax(0,1fr)}
  .glossary dt{padding:14px 0 4px;white-space:normal}
  .glossary dd{padding:0 0 4px}
}

/* ===================================================================
   THE SUBPAGE LAYER — /smartplay and every page after it.

   Same sheets, same materials, same drawing ink. What is new: a hero
   with no world chart under it, a section body that carries a lede on
   the left and its chart notes on the right, a status table, and a
   closing pair of actions. These pages keep their night-edition
   grammar (notes tables, ruled rows) until phase 2; they are printed
   here in day materials so nothing breaks in the meantime.
   =================================================================== */

/* a page without the sticky strip scrolls its sheets under the nav only */
.page-sub .sheet{scroll-margin-top:calc(var(--nav-h) + 18px)}

.sp-hero{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(28px,3.6vw,64px);row-gap:clamp(26px,3vw,40px);
  align-items:center;
}
.sp-hero h1{max-width:14ch}
.sp-hero .sp-sub{margin-top:clamp(16px,1.8vw,24px);font-size:1.25rem;line-height:1.5;max-width:52ch}
.sp-actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(20px,2.2vw,30px);
}

.sp-body{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(28px,3.6vw,60px);row-gap:clamp(22px,2.6vw,34px);
  align-items:start;
}
.sp-main{grid-column:1;min-width:0}
.sp-side{grid-column:2;min-width:0}
.sp-body h2{max-width:20ch;margin-bottom:.62em}
.sp-lede{font-size:1.15rem;line-height:1.5;max-width:56ch;color:var(--ink)}
.sp-body .prose{max-width:60ch}
.sp-body .prose p + p{margin-top:1.05em}
.sp-note{margin-top:1.15em;font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:60ch}

/* the small authored drawings: printed on the same paper-2 panel as
   the home's, with no border at all. They scale down to phone width
   and only there do they scroll inside their own panel, the way the
   home's wide drawings do. */
.sp-fig{margin:clamp(24px,2.8vw,38px) 0 0;background-color:#E9EBE6;padding:26px}
.sp-fig .drawing-scroll{overflow-x:auto;overflow-y:hidden}
.sp-fig .dwg{min-width:0;width:100%;max-width:560px;margin-inline:0;height:auto}
.sp-fig figcaption{margin-top:12px;font-size:.9375rem;line-height:1.5;color:var(--ink-2);max-width:52ch}
.sp-side .sp-fig .dwg{max-width:640px}
/* ink-3 reads 4.22:1 on paper-2, so the hint steps up one ink, exactly
   as the home's does inside .drawing */
.sp-fig .scroll-hint{display:none;color:var(--ink-2)}

/* The one thing on the site that stays a real table, because it is
   read across as well as down: where each protection scheme stands.
   No grid and no frame — one 1px paper-3 line divides the rows, the
   header is the reading face at 500 in sentence case, and the status
   cell is the same face at 600 so the answer carries the weight. */
.status-tbl{
  table-layout:auto;border-collapse:collapse;width:100%;
  margin-top:14px;
}
.status-tbl caption{
  font-family:var(--display);font-weight:500;font-size:.9375rem;
  line-height:1.45;letter-spacing:0;text-transform:none;color:var(--ink-3);
  text-align:left;padding-bottom:10px;
}
.status-tbl th,.status-tbl td{
  border:0;
  padding:12px 24px 12px 0;vertical-align:top;text-align:left;
}
.status-tbl thead th{
  font-family:var(--display);font-weight:500;font-size:.9375rem;
  line-height:1.45;letter-spacing:0;text-transform:none;color:var(--ink-3);
  padding-block:0 9px;
}
.status-tbl tbody tr + tr{border-top:1px solid var(--paper-3)}
.status-tbl tbody td:last-child,.status-tbl thead th:last-child{padding-right:0}
.status-tbl .what{font-size:1rem;line-height:1.55;color:var(--ink-2);width:54%}
.status-tbl .st{
  font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.5;
  letter-spacing:0;color:var(--ink);
  width:46%;
}

.sp-close{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(22px,2.4vw,32px);
}

@media (max-width:1100px){
  .sp-hero{grid-template-columns:minmax(0,1fr)}
  .sp-hero h1{max-width:20ch}
  .sp-body{grid-template-columns:minmax(0,1fr)}
  .sp-main,.sp-side{grid-column:1}
  .sp-fig .dwg,.sp-side .sp-fig .dwg{max-width:720px}
}

@media (max-width:620px){
  /* on a phone the pair stacks: the scheme, then its status */
  .status-tbl .what{width:auto;display:block;padding:0 0 3px}
  .status-tbl .st{width:auto;display:block;padding:0}
  .status-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .status-tbl tbody tr{display:block;padding-block:12px}
  .status-tbl tbody tr + tr{border-top:1px solid var(--paper-3)}
  .sp-close .btn{width:100%;justify-content:center}
}

/* the drafting set, extended for the subpage drawings: a named symbol
   inside a frame, a hairline division inside a frame, and a hatched
   block for material that is spliced into a run */
.dwg .t-sym{
  color:#454A46;font-family:var(--display);font-weight:500;
  font-size:14px;letter-spacing:0;text-transform:none;
}
.dwg .hair{fill:none;stroke:#6A706B;stroke-opacity:.5;stroke-width:1}
.dwg .pod{fill:url(#sp-hatch);fill-opacity:.18;stroke:#171A18;stroke-opacity:1;stroke-width:1.5}

/* ===================================================================
   THE PAGE LAYER — /how-it-works, /smartcast, /proof and /contact.

   Four more sheets of the same chart, so almost nothing is added: a
   hero that carries only type, the control block unstuck from the nav
   for a page that is read down rather than scrolled past, the legend
   kept visible on a page whose control block does not carry it, and
   the five production facts set larger where the facts are the sheet
   rather than a column of it.
   =================================================================== */

.page-hero h1{max-width:22ch}
.page-lead{
  margin-top:clamp(16px,1.8vw,24px);
  font-size:1.25rem;line-height:1.5;max-width:52ch;
  color:var(--ink);
}
.page-lead + .prose{margin-top:1.05em}

/* the control block, unstuck: the same three readouts and the same
   slider, sitting in its sheet instead of sticking under the nav */
.strip-static{position:static;z-index:auto;margin-bottom:clamp(26px,3vw,44px)}
.strip-static .strip-in{grid-template-columns:minmax(280px,1fr) minmax(0,1.5fr)}
@media (max-width:999px){
  .strip-static .strip-in{grid-template-columns:minmax(0,1fr)}
}

/* the legend, on a page that has no strip cell to carry it */
.phone-aside.is-always{display:flex}

/* the production facts, read as the sheet itself */
.datarow-lg .fig{font-size:2.6rem;line-height:1.05}
@media (max-width:620px){
  .datarow-lg .fig{font-size:2rem}
}

/* one line of small print under a block */
.sheet-note{margin-top:18px;font-size:.9375rem;line-height:1.55;color:var(--ink-3);max-width:86ch}

/* ===================================================================
   PHASE 2 — what the five subpages needed that the home did not.

   The home's components carry every subpage: the running list, the
   legend rows, the note lead-ins, the paper-2 panels, the control
   block, the form and the colophon are the same objects. Three things
   are new here, and only here: a running list set in one column
   because a subpage column is half the home's width, the audience
   control placed inside the signal body on /how-it-works, and the
   questions on /how-it-works.
   =================================================================== */

/* a subpage column is too narrow for the home's two runs of notes */
.sp-body .runlist{grid-template-columns:minmax(0,1fr);row-gap:.85em}
.sp-body .runlist-cap{margin-top:clamp(22px,2.4vw,32px)}
.sp-side > .runlist-cap:first-child,
.sp-side > .notes-head:first-child{margin-top:0}
.sp-body .note-entry{max-width:62ch}

/* /how-it-works: the control sits between the lede and the drawing it
   drives, spanning the body. The home's own signal body is untouched:
   every rule below is inside .page-sub. */
.page-sub .signal-body > .hiw-control{
  grid-column:1/-1;grid-row:2;
  margin-top:clamp(22px,2.6vw,36px);
}
.page-sub .signal-body > .hiw-control .strip-in{
  width:100%;max-width:none;margin-inline:0;margin-block:0;
}
.page-sub .signal-body > .drawing{grid-row:3}
.page-sub .signal-body > .signal-notes{grid-row:4}
.hiw-steps{margin-bottom:clamp(22px,2.6vw,34px)}

@media (max-width:999px){
  .page-sub .signal-body > .hiw-control{order:3;margin-top:0}
  .page-sub .signal-body > .drawing{order:4}
  .page-sub .signal-body > .signal-notes{order:5}
}

/* the questions: the question at 600, its answer in ink-2, and air
   between entries instead of a rule */
.faq{
  margin:clamp(24px,2.8vw,38px) 0 0;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,2.4vw,32px);
}
.faq > div{min-width:0}
.faq-q{
  margin:0;
  font-family:var(--display);font-weight:600;
  font-size:1.15rem;line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);max-width:52ch;
}
.faq-a{
  margin:.45em 0 0;
  font-size:1.0625rem;line-height:1.6;color:var(--ink-2);max-width:68ch;
}
#questions h2,#glossary h2{max-width:24ch}

/* short pages: the colophon sits at the bottom of the window, never above blank paper */
body{min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}

/* ============================================================================
   Scherpte en diepte (JJ, 18 sep 2026) — opgenomen in de dageditie
   JJ wil de crispness en diepte uit de Apple-richting, zonder het systeem te
   wisselen. Daarom alles in het gedrukte idioom: diepte = papier op papier,
   niet zwevend glas. Eén lichtrichting (van boven), lage alfa's, korte val.
   Toegevoegde laag: geen bestaand kleur- of typetoken is gewijzigd.
   ========================================================================== */

:root{
  /* twee schaduwtokens, allebei inktkleurig ipv zwart: op papier is een schaduw
     nooit neutraal grijs maar de kleur van de inkt eromheen */
  --lift-plate: 0 1px 0 rgba(23,26,24,.045), 0 10px 22px -14px rgba(23,26,24,.22);
  --lift-card:  0 1px 0 rgba(23,26,24,.05),  0 18px 34px -22px rgba(23,26,24,.28);
}

/* ---------------------------------------------------------------- 1. platen
   De tekeningen zijn nu vlakken die tegen het papier aan liggen. Als opgeplakte
   plaat krijgen ze een rand en een korte val: dat is de diepte die een gedrukte
   kaart echt heeft. */
.drawing{
  border:1px solid var(--paper-3);
  box-shadow:var(--lift-plate);
}

/* de schuif-strip leest als een tweede vel over het eerste */
.strip{ box-shadow:var(--lift-card); }

/* ------------------------------------------------------- 2. scherpe hairlines
   Rechte lijnen op halve pixels worden grijs uitgesmeerd. crispEdges legt ze op
   hele pixels; curves houden geometricPrecision, anders worden ze hoekig. */
.dwg, .cmp{ shape-rendering:geometricPrecision; }
.dwg .rule, .dwg .dim, .dwg .brk, .dwg .bar,
.cmp .rule, .cmp .dim, .cmp .brk, .cmp .bar{ shape-rendering:crispEdges; }

/* ------------------------------------------------------------- 3. scherpe type
   Niet zwaarder, wel strakker: grote koppen krijgen iets meer negatieve tracking
   en echte kerning, zodat ze als gezet lood staan in plaats van als webtekst. */
h1, .h1, h2, .h2{
  letter-spacing:-.022em;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  text-rendering:optimizeLegibility;
}
/* cijfers blijven tabellarisch uitlijnen, ook als ze groot staan */
.fig, .t-copies, .t-viewers, .t-one{ font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------- 4. gestapeld
   Secties wisselen al van toon; een haarlijn op de naad maakt van twee tinten
   twee vellen. Alleen waar een sheet op een andere tint ligt. */
.sheet + .sheet{ box-shadow:inset 0 1px 0 rgba(23,26,24,.06); }

/* ------------------------------------------------------------------ 5. knoppen
   Een gedrukte knop drukt in, hij zweeft niet. Eén pixel, geen glow. */
.btn{ transition:transform .16s ease, box-shadow .16s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:var(--lift-plate); }
.btn:active{ transform:translateY(0) scale(.99); box-shadow:none; }

@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active{ transition:none; transform:none; }
}

/* de kop binnen een sheet, een maat onder de H2: gebruikt op de home in
   "Every viewer counted" voor het veiligheidsblok, zodat dat niet als een
   tweede hoofdstuk leest maar als de andere helft van hetzelfde verhaal */
.sec-head{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.15;letter-spacing:-.012em;
  color:var(--ink);margin:0 0 .5em;
}
.sec-body{margin-top:clamp(30px,3.4vw,52px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--rule)}
/* een leesblok dat direct op een lead volgt, krijgt dezelfde alinea-afstand
   als twee alinea’s binnen dat blok; zonder dit plakken ze aan elkaar */
.sp-lede + .prose{margin-top:1.05em}