/* ═══════════════════════════════════════════════════════════════════════
   WILLIAMS INSTRUMENTS — design system v3 "editorial" · 2026-08-08

   Reference study (reasonstudios.com, live CSS inspected):
   grotesk body (FK Grotesk) + loud condensed display face (FK Screamer);
   warm off-white #f4f4f5 and black grounds; TWO flat accent fields only;
   1280px content inside 1920px bleeds; radii mostly 4–8px; hierarchy from
   scale + whitespace + thin rules, not boxes and shadows.

   WI translation (original, not a clone):
   display  — Anton (self-hosted /fonts) : the loud voice, headlines only
   grotesk  — Archivo variable          : body, UI, navigation
   grounds  — warm off-white  ⇄  near-black chapters
   accent   — ONE family: WI signal blue, used as flat fields + indicators
   radius   — 0–4px editorial, 6px only for app screenshots
   shadows  — none decorative
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Archivo';
  src:url('/fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;font-display:swap;
}
@font-face{
  font-family:'Silkscreen';
  src:url('/fonts/silkscreen.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Anton';
  src:url('/fonts/anton.woff2') format('woff2');
  font-weight:400;font-display:swap;
}

:root{
  /* COLORS */
  --wi-black:#0b0b0c;
  --wi-ink:#141416;
  --wi-off-white:#f4f2ed;
  --wi-white:#ffffff;
  --wi-grey-100:#e9e6df;
  --wi-grey-300:#c9c5bc;
  --wi-grey-600:#6f6c66;
  --wi-accent:#2038e6;          /* WI signal blue — the one accent family */
  --wi-accent-ink:#ffffff;
  --pass:#0f7d3c; --warn:#8a6100; --fail:#c03320;

  /* set per-chapter; sections flip these, components read them.
     BLACK IS THE GROUND (Reason study, confirmed on /get-reason);
     off-white .band chapters are the interludes. */
  --bg:var(--wi-black);
  --ink:#f4f2ed;
  --mut:#b9b6af;
  --dim:#8b8983;
  --line:rgba(244,242,237,.6);
  --line-soft:rgba(244,242,237,.18);
  --panel:#161618;

  /* TYPOGRAPHY */
  --font-display:'Anton','Archivo',Impact,sans-serif;
  --font-body:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --font-pixel:'Silkscreen',ui-monospace,monospace;

  /* TYPE SCALE */
  --text-xs:12px;
  --text-sm:13.5px;
  --text-body:clamp(16px,1.15vw,18px);
  --text-lg:clamp(17px,1.25vw,20px);
  --text-h3:clamp(19px,1.9vw,26px);
  --text-h2:clamp(28px,3.4vw,44px);
  --text-h1:clamp(38px,4.9vw,68px);

  /* SPACING (4 8 12 16 24 32 48 64 80 96 128 160) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:80px;--space-10:96px;
  --space-11:128px;--space-12:160px;

  /* LAYOUT */
  --page-gutter:48px;
  /* Column gap in the "where it fits" flow. The blue "you are here" block
     bleeds half of this on each side, so the two are defined together. */
  --flow-gap:32px;
  --content-width:1440px;
  --text-width:66ch;
  --r-ed:4px;         /* editorial containers */
  --r-shot:6px;       /* app screenshots */
  --dur:.22s;
}
@media(max-width:1023px){:root{--page-gutter:32px}}
@media(max-width:760px){:root{--page-gutter:20px}}

/* ── reset ─────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:var(--text-body);font-weight:420;line-height:1.65;
  -webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
b,strong{font-weight:650}
img{max-width:100%;height:auto}
::selection{background:var(--wi-accent);color:#fff}

.wrap{max-width:calc(var(--content-width) + 2*var(--page-gutter));
  margin:0 auto;padding:0 var(--page-gutter)}

/* ── the display voice ─────────────────────────────────────────────────── */
h1,h2{font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.96;
  text-wrap:balance}
h1{font-size:var(--text-h1)}
h2{font-size:var(--text-h2)}
h3{font-family:var(--font-body);font-weight:700;font-size:var(--text-h3);
  line-height:1.15;letter-spacing:-.01em}

/* small editorial label: STREAMING · WORKFLOW · VALIDATION */
.kicker,.eyebrow,.slabel{display:block;font-family:var(--font-pixel);
  font-size:13px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--wi-accent);
  -webkit-font-smoothing:none;font-smooth:never}
.band .kicker,.band .eyebrow,.band .slabel{color:var(--wi-accent)}
body>section:not(.band):not(.band-lift) .slabel,.hero-xl .eyebrow{color:#8ea0ff}

/* ── chapters: off-white ⇄ black ⇄ accent field ────────────────────────── */
section{padding:var(--space-10) 0}
.bleed{width:100%}
.band{--bg:var(--wi-off-white);--ink:var(--wi-ink);--mut:#4f4d49;
  --dim:var(--wi-grey-600);--line:rgba(20,20,22,.55);
  --line-soft:rgba(20,20,22,.16);--panel:var(--wi-white);
  background:var(--bg);color:var(--ink)}
.band a{color:var(--ink)}
.band-lift{--bg:var(--wi-accent);--ink:#fff;--mut:rgba(255,255,255,.82);
  --dim:rgba(255,255,255,.6);--line:rgba(255,255,255,.7);
  --line-soft:rgba(255,255,255,.28);--panel:rgba(255,255,255,.08);
  background:var(--bg);color:var(--ink)}
.band-lift a{color:#fff}
.band-lift .kicker,.band-lift .eyebrow,.band-lift .slabel{color:rgba(255,255,255,.75)}

/* left-aligned section heads — headline huge, lede at reading measure */
.section-head{max-width:none;margin:0 0 var(--space-8);text-align:left}
.section-head h2{max-width:16ch;margin-bottom:var(--space-5)}
.section-head p{max-width:var(--text-width);color:var(--mut);font-size:var(--text-lg);
  line-height:1.55}
.section-head p+p{margin-top:var(--space-4)}

/* ── header ────────────────────────────────────────────────────────────── */
header{background:var(--bg);border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:60}
header .wrap{display:flex;align-items:center;gap:var(--space-6);min-height:64px}
.logo{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .mark{width:40px;height:22px;background:var(--ink);flex:none;
  -webkit-mask:url(/img/wi-mark.svg) no-repeat center/contain;
  mask:url(/img/wi-mark.svg) no-repeat center/contain}
.logo .rule{width:1px;height:24px;background:var(--line-soft);flex:none}
.logo .wordmark{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--ink)}
.logo .prodname{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--wi-accent);margin-left:2px}
nav.deskn{margin-left:auto;display:flex;align-items:center;gap:var(--space-6);
  font-size:14.5px;font-weight:520}
nav.deskn a{color:var(--mut)}
nav.deskn a:hover{color:var(--ink);text-decoration:none}

/* ── buttons: rectangular, graphic, deliberate ─────────────────────────── */
.btn{display:inline-block;padding:15px 30px;border-radius:2px;
  font-family:var(--font-body);font-weight:600;font-size:15.5px;line-height:1;
  letter-spacing:.005em;border:1px solid transparent;
  transition:background var(--dur),color var(--dur),border-color var(--dur)}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.primary:hover{background:transparent;color:var(--ink)}
.band-lift .btn.primary{background:#fff;color:var(--wi-accent);border-color:#fff}
.band-lift .btn.primary:hover{background:transparent;color:#fff;border-color:#fff}
.btn.ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.small,.btn.navcta{padding:11px 18px;font-size:13.5px}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* text CTA: label + arrow that moves 4px */
.more{display:inline-block;font-weight:650;font-size:15px;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;transition:color var(--dur)}
.more:hover{text-decoration:none;color:var(--wi-accent);border-color:var(--wi-accent)}

/* ── hero: left composition, product dominant below ────────────────────── */
.hero-xl{padding:var(--space-10) var(--page-gutter) var(--space-9);
  max-width:calc(var(--content-width) + 2*var(--page-gutter));margin:0 auto;
  text-align:left}
.hero-xl .eyebrow{margin-bottom:var(--space-5)}
.hero-xl h1{max-width:17ch}
.hero-xl .sub{margin-top:var(--space-6);max-width:52ch;font-size:var(--text-lg);
  line-height:1.5;color:var(--mut);font-weight:480}
.cta{display:flex;gap:var(--space-4);margin-top:var(--space-7);flex-wrap:wrap}
.centered-cta{justify-content:flex-start}
.hero-xl .fine,.fine{margin-top:var(--space-5);font-size:14px;
  color:var(--dim);letter-spacing:.01em}
.centered-fine{text-align:left}

/* the product moment: full-bleed black band around the screenshot */
.shot{background:transparent;padding:var(--space-9) var(--page-gutter);margin:0}
.shot picture,.shot img{display:block}
.shot img{max-width:var(--content-width);margin:0 auto;border-radius:var(--r-shot)}
.shot figcaption{max-width:var(--content-width);margin:var(--space-5) auto 0;
  font-size:var(--text-sm);color:#8b8983;letter-spacing:.02em}

/* ── PROBLEMS as editorial rows, not cards ─────────────────────────────── */
.tiles{display:block;margin-top:0}
.tile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:var(--space-7);align-items:start;
  padding:var(--space-7) 0;border-top:1px solid var(--line-soft);
  background:none;border-radius:0}
.tile:last-child{border-bottom:1px solid var(--line-soft)}
.tile .kicker{font-family:var(--font-display);font-size:clamp(26px,3.4vw,44px);
  font-weight:400;letter-spacing:.005em;line-height:1;text-transform:uppercase;
  color:var(--ink)}
.tile h3{margin-bottom:var(--space-3)}
.tile p{color:var(--mut);max-width:56ch}
.tile.wide{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}

/* ── workflow: oversized numbers ───────────────────────────────────────── */
.flowgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border-top:1px solid var(--line-soft)}
.flowgrid li{padding:var(--space-6) var(--space-6) var(--space-6) 0;
  border-bottom:1px solid var(--line-soft)}
.flowgrid li b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3vw,44px);line-height:1;text-transform:uppercase;
  letter-spacing:.01em;margin-bottom:var(--space-3)}
.flowgrid li span{color:var(--mut);font-size:var(--text-sm);max-width:26ch;display:block}
.flowgrid li.go b{color:#8ea0ff}
.steps-note{margin-top:var(--space-6);color:var(--mut);font-size:var(--text-sm);
  max-width:var(--text-width)}
.steps-note.longform{border-top:1px solid var(--line-soft);padding-top:var(--space-5)}

/* ── feature rows (consistency / streaming) ────────────────────────────── */
.row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:var(--space-9);align-items:center}
.rowtext .kicker{margin-bottom:var(--space-4)}
.rowtext h2{margin-bottom:var(--space-5);max-width:14ch}
.rowtext p{color:var(--mut);margin-bottom:var(--space-4);max-width:52ch}
.rowtext .more{margin-top:var(--space-2)}
.fineprint{font-size:var(--text-sm);color:var(--dim)}

/* data panels: thin border, small radius, no shadow */
.tracklist,.verdict-card{background:var(--panel);
  border:1px solid var(--line-soft);border-radius:var(--r-ed);
  padding:var(--space-6)}
.tracklist{display:flex;flex-direction:column;gap:var(--space-3)}
.trk{display:grid;grid-template-columns:72px 1fr minmax(96px,auto);
  align-items:center;gap:var(--space-4)}
.trk span{font-size:var(--text-xs);color:var(--dim);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600}
.trk i{display:block;height:12px;border-radius:2px;background:var(--wi-accent)}
.trk b{font-size:var(--text-xs);font-weight:650;text-align:right;
  letter-spacing:.04em;text-transform:uppercase}
.ok{color:var(--pass)} .hot{color:var(--fail)} .low{color:var(--warn)}
.dimlbl{color:var(--dim)}
.w96{width:96%}.w72{width:72%}.w70{width:70%}.w68{width:68%}.w62{width:62%}.w38{width:38%}

.vc-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--space-4);font-weight:700;font-size:var(--text-h3);
  padding-bottom:var(--space-4);border-bottom:1px solid var(--line-soft);
  margin-bottom:var(--space-4)}
.vc-head b{font-size:var(--text-sm);font-weight:650}
.vc-plain{color:var(--mut)}
.vc-more{margin-top:var(--space-4);border-top:1px solid var(--line-soft)}
.vc-row{display:flex;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) 0;border-bottom:1px solid var(--line-soft);
  font-weight:600;font-size:15px}
.vc-row b{font-size:var(--text-sm);font-weight:600}
.vc-adv{margin-top:var(--space-4)}
.vc-adv summary{cursor:pointer;font-size:var(--text-sm);color:var(--dim);
  list-style:none}
.vc-adv summary::-webkit-details-marker{display:none}
.vc-adv summary::before{content:"+ "}
.vc-adv[open] summary::before{content:"− "}
.vc-adv p{font-family:var(--font-mono);font-size:13px;color:var(--dim);
  margin-top:var(--space-2)}

/* conceptual loudness comparison */
.loudviz{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);
  max-width:900px}
.lv-col{border-top:1px solid var(--line-soft);padding-top:var(--space-5)}
.lv-title{font-weight:700;margin-bottom:var(--space-4);font-size:var(--text-lg)}
.lv-row{display:grid;grid-template-columns:150px 1fr;align-items:center;
  gap:var(--space-4);margin:var(--space-2) 0}
.lv-row span{font-size:var(--text-xs);color:var(--mut);text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}
.lv-bar{display:block;height:14px;border-radius:2px;background:currentColor;
  color:var(--ink)}
.lv-bar.dim{opacity:.45}
.lv-arrow{color:var(--dim);margin:2px 0 2px 150px}
.lv-note{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--dim)}
.lv-note.ok{color:inherit;opacity:.9}

/* plain-questions list */
.qs{list-style:none;max-width:var(--text-width)}
.qs li{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(22px,3vw,40px);line-height:1.15;letter-spacing:.005em;
  padding:var(--space-4) 0;border-bottom:1px solid var(--line-soft)}

/* engineering credibility */
.cred{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;max-width:900px;border-top:1px solid var(--line-soft)}
.cred li{padding:var(--space-4) var(--space-5) var(--space-4) 0;
  border-bottom:1px solid var(--line-soft);font-weight:600;font-size:15px}
.selftest-fold{margin-top:var(--space-6)}
.selftest-fold>summary{cursor:pointer;font-weight:650;font-size:15px;
  list-style:none;display:inline-block;border-bottom:1px solid var(--ink);
  padding-bottom:2px}
.selftest-fold>summary::-webkit-details-marker{display:none}
.selftest-fold>summary::after{content:"  +"}
.selftest-fold[open]>summary::after{content:"  −"}
.selftest{margin-top:var(--space-6);max-width:760px;
  font-family:var(--font-mono);font-size:13px;
  border:1px solid var(--line-soft);border-radius:var(--r-ed);
  padding:var(--space-5);background:var(--panel)}
.selftest.centered{margin-left:0}
.selftest table{width:100%;border-collapse:collapse}
.selftest td,.selftest th{padding:8px 10px;text-align:left;
  border-bottom:1px solid var(--line-soft)}
.selftest th{font-family:var(--font-body);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.12em;color:var(--dim);font-weight:650}
.selftest .p{color:var(--pass);font-weight:700}
.selftest caption{caption-side:bottom;padding-top:var(--space-4);
  font-family:var(--font-body);font-size:var(--text-sm);color:var(--dim);
  text-align:left}

/* ── ownership strip + pricing as editorial columns ────────────────────── */
.ownit{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--space-6);
  margin-bottom:var(--space-8);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);padding:var(--space-4) 0}
.ownit li{font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:var(--space-1) 0;color:var(--mut)}
.ownit li::before{content:"— ";color:var(--wi-accent)}

.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid var(--line-soft);border-radius:var(--r-ed);overflow:hidden}
.tier{padding:var(--space-7) var(--space-6);display:flex;flex-direction:column;
  background:var(--panel);border-left:1px solid var(--line-soft)}
.tier:first-child{border-left:0}
.tier h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,2.4vw,34px);letter-spacing:.01em}
.tier .whofor{font-size:var(--text-sm);color:var(--dim);margin-top:var(--space-1)}
.tier .price{font-size:clamp(38px,3.4vw,52px);font-weight:750;
  letter-spacing:-.03em;margin:var(--space-5) 0 2px}
.tier .price small{font-size:var(--text-sm);font-weight:480;color:var(--dim)}
.tier ul{list-style:none;margin:var(--space-5) 0 var(--space-6);flex:1}
.tier li{padding:var(--space-2) 0;border-bottom:1px solid var(--line-soft);
  font-size:14.5px;color:var(--mut)}
.tier li b{color:var(--ink)}
.tier .monthly{font-size:var(--text-sm);color:var(--dim);min-height:20px;
  margin-bottom:var(--space-2)}
.tier .monthly a{color:var(--mut);border-bottom:1px dotted var(--dim)}
.tier .btn{text-align:center}
.tier.featured{background:var(--wi-off-white);--ink:var(--wi-ink);--mut:#4f4d49;
  --dim:var(--wi-grey-600);--line-soft:rgba(20,20,22,.16);color:var(--ink)}
.tier.featured .btn.primary{background:var(--wi-accent);color:#fff;
  border-color:var(--wi-accent)}
.tier.featured .btn.primary:hover{background:transparent;color:var(--wi-ink);
  border-color:var(--wi-ink)}

/* ── FAQ: large editorial accordion ────────────────────────────────────── */
.faq.narrow{max-width:960px}
.faq h2{margin-bottom:var(--space-7)}
.faq details{border-top:1px solid var(--line-soft)}
.faq details:last-of-type{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:baseline;gap:var(--space-6);
  padding:var(--space-5) 0;font-weight:700;font-size:var(--text-h3);
  line-height:1.2;letter-spacing:-.01em;transition:color var(--dur)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);font-weight:400;
  font-size:28px;color:var(--dim);flex:none;transition:transform var(--dur)}
.faq details[open] summary::after{content:"×"}
.faq summary:hover{color:var(--wi-accent)}
.faq details p{color:var(--mut);max-width:var(--text-width);
  padding:0 0 var(--space-6);font-size:var(--text-body)}
/* legacy dl fallback (guide pages may still use it) */
.faq dt{font-weight:700;margin-top:var(--space-5);font-size:var(--text-lg)}
.faq dd{color:var(--mut);margin-top:var(--space-2);max-width:var(--text-width)}

/* ── footer: orderly columns + giant wordmark ending ───────────────────── */
footer{background:var(--wi-black);color:#f4f2ed;padding:var(--space-10) 0 0;
  --ink:#f4f2ed;--mut:#b9b6af;--dim:#8b8983;--line-soft:rgba(244,242,237,.16)}
footer a{color:#b9b6af}
footer a:hover{color:#f4f2ed}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-8);padding-bottom:var(--space-9)}
.fcol{display:flex;flex-direction:column;gap:var(--space-2)}
.fbrand{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.fsub{color:#8b8983;font-size:var(--text-sm);margin-top:var(--space-3);line-height:1.7}
.fhead{font-size:var(--text-xs);letter-spacing:.16em;font-weight:650;
  text-transform:uppercase;color:#8b8983;margin-bottom:var(--space-2)}
.fcol a{font-size:15px;padding:2px 0}
.push{margin-left:auto}

/* ── prose pages: guide, legal, acknowledgments ────────────────────────── */
.doc{max-width:860px;padding:var(--space-9) var(--page-gutter) var(--space-10)}
.doc h1{font-size:clamp(40px,6vw,72px);margin-bottom:var(--space-3)}
.doc .updated{font-family:var(--font-pixel);font-size:12px;color:var(--dim);
  margin-bottom:var(--space-7);-webkit-font-smoothing:none}
.doc h2{font-size:clamp(26px,3vw,38px);margin:var(--space-8) 0 var(--space-4);
  padding-top:var(--space-6);border-top:1px solid var(--line-soft)}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc h3{font-size:var(--text-lg);margin:var(--space-6) 0 var(--space-2)}
.doc p,.doc li{color:var(--mut);font-size:var(--text-body);max-width:var(--text-width)}
.doc p{margin-bottom:var(--space-4)}
.doc ul,.doc ol{margin:0 0 var(--space-5) var(--space-5)}
.doc li{margin-bottom:var(--space-2)}
.doc strong{color:var(--ink)}
.doc code,.doc kbd{font-family:var(--font-mono);font-size:.85em;
  background:var(--wi-grey-100);border-radius:3px;padding:1px 6px;color:var(--ink)}
.doc pre{background:var(--wi-black);color:#f4f2ed;border-radius:var(--r-ed);
  padding:var(--space-5);overflow-x:auto;margin-bottom:var(--space-5)}
.doc pre code{background:none;color:inherit;padding:0;font-size:13px;line-height:1.6}
.doc table{width:100%;border-collapse:collapse;margin-bottom:var(--space-5);
  font-size:14.5px}
.doc th,.doc td{text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--line-soft);color:var(--mut)}
.doc th{color:var(--dim);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.12em;font-weight:650}
.doc td strong{color:var(--ink)}
.doc blockquote{border-left:2px solid var(--wi-accent);
  padding:2px 0 2px var(--space-5);margin:0 0 var(--space-5)}
.note{border-top:2px solid var(--wi-accent);
  padding:var(--space-5) 0 var(--space-2);margin-bottom:var(--space-6)}
.note p:last-child{margin-bottom:0}
.toc{border:1px solid var(--line-soft);border-radius:var(--r-ed);
  padding:var(--space-5);margin-bottom:var(--space-7);background:var(--panel)}
.toc ul{margin:0 0 0 var(--space-5)}
.langswitch{font-size:var(--text-sm);color:var(--dim);margin-bottom:var(--space-4)}
.langswitch a{color:var(--wi-accent)}
.langswitch b{color:var(--ink);font-weight:650}
.spec-table{border:1px solid var(--line-soft);border-radius:var(--r-ed);
  padding:var(--space-5);background:var(--panel);font-size:14px}
.spec-table table{width:100%;border-collapse:collapse}
.spec-table td,.spec-table th{padding:9px 10px;text-align:left;
  border-bottom:1px solid var(--line-soft)}
.spec-table th{font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.12em;color:var(--dim)}
.lead{color:var(--mut);max-width:var(--text-width);margin-bottom:var(--space-6);
  font-size:var(--text-lg)}
.hero-lead{margin:var(--space-5) 0 0}

/* ── accessibility ─────────────────────────────────────────────────────── */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--wi-accent);outline-offset:3px}
:where(a,button):focus:not(:focus-visible){outline:none}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--wi-accent);
  color:#fff;padding:12px 20px;font-weight:650;font-size:14px}
.skip:focus{left:0}

/* ── mobile header (details/summary, no JS) ────────────────────────────── */
.menu{display:none}
@media(max-width:860px){
  nav.deskn{display:none}
  .menu{display:block;margin-left:auto}
  .menu>summary{display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;cursor:pointer;list-style:none;margin-right:-8px}
  .menu>summary::-webkit-details-marker{display:none}
  .bars,.bars::before,.bars::after{display:block;width:22px;height:2px;
    background:var(--ink);transition:transform var(--dur),opacity var(--dur)}
  .bars{position:relative}
  .bars::before,.bars::after{content:"";position:absolute;left:0}
  .bars::before{top:-7px}.bars::after{top:7px}
  .menu[open] .bars{background:transparent}
  .menu[open] .bars::before{transform:translateY(7px) rotate(45deg)}
  .menu[open] .bars::after{transform:translateY(-7px) rotate(-45deg)}
  .menu>nav{position:absolute;left:0;right:0;top:100%;display:flex;
    flex-direction:column;background:var(--bg);
    border-bottom:1px solid var(--line-soft);padding:var(--space-2) 0 var(--space-4)}
  .menu>nav a{padding:14px var(--page-gutter);min-height:44px;display:flex;
    align-items:center;font-size:16px;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--line-soft)}
  .menu>nav a:last-child{border-bottom:0}
  .menu>nav .btn{margin:var(--space-3) var(--page-gutter) 0;display:inline-flex;
    justify-content:center;border-bottom:0}
}

/* ── responsive compositions (not shrunken desktop) ────────────────────── */
@media(max-width:1023px){
  .row{grid-template-columns:1fr;gap:var(--space-7)}
  .rowtext h2{max-width:none}
  .flowgrid{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  section{padding:var(--space-9) 0}
  .hero-xl{padding:var(--space-8) var(--page-gutter) var(--space-8)}
  .hero-xl h1{font-size:clamp(48px,14vw,88px)}
  .tile{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-6) 0}
  .flowgrid{grid-template-columns:1fr}
  .loudviz{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .tier{border-left:0;border-top:1px solid var(--line-soft)}
  .tier:first-child{border-top:0}
  .cred{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr;gap:var(--space-6)}
  .cta{flex-direction:column}
  .cta .btn{text-align:center}
  .shot{padding:var(--space-7) 0}
  .shot img{border-radius:0}
  .shot figcaption{padding:0 var(--page-gutter)}
  .trk{grid-template-columns:56px 1fr minmax(84px,auto)}
  .lv-row{grid-template-columns:110px 1fr}
  .lv-arrow{margin-left:110px}
  .faq summary{font-size:clamp(18px,4.6vw,24px)}
}

/* ═══ HOMEPAGE RESCUE — recomposition layer ══════════════════════════════
   One idea per viewport. Product enormous. Asymmetric hero. Three problems
   as display statements. Three conceptual steps. */

/* asymmetric hero: copy left, real UI rail entering the frame right */
.hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);
  gap:var(--space-8);align-items:center}
.hero-copy .eyebrow{margin-bottom:var(--space-5)}
/* Static, not absolutely positioned: the floating version left a hole under
   the hero at every width that wasn't the one it was tuned on. */
.hero-art img{display:block;width:100%;max-width:460px;margin-left:auto;
  height:auto;border-radius:var(--r-shot);
  border:1px solid rgba(244,242,237,.18)}

/* full-bleed product moment */
.prodmoment{padding:var(--space-9) 0}
.prodmoment figure{max-width:min(1720px,96vw);margin:0 auto;padding:0}
.prodmoment img{width:100%;border-radius:var(--r-shot);display:block}
.prodmoment figcaption{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(20px,2.6vw,34px);letter-spacing:.01em;line-height:1.1;
  color:#f4f2ed;margin-top:var(--space-6);
  padding:0 var(--page-gutter)}

/* huge single statements */
h2.statement{font-size:clamp(48px,7.4vw,104px);max-width:14ch;
  margin-bottom:var(--space-6)}
.lede{font-size:var(--text-lg);color:var(--mut);max-width:var(--text-width);
  margin-bottom:var(--space-7)}

/* three problems — display statements with magazine numbers, alternating */
.probs{margin-top:var(--space-7)}
.prob{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:var(--space-7);align-items:end;padding:var(--space-7) 0;
  border-top:1px solid var(--line-soft)}
.prob .pnum{grid-column:1/-1;font-family:var(--font-pixel);font-size:13px;
  color:var(--dim);letter-spacing:.1em;-webkit-font-smoothing:none}
.prob h2{font-size:clamp(40px,6vw,88px);max-width:13ch}
.prob:nth-child(2) h2{margin-left:auto;text-align:right}
.prob:nth-child(2){grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.prob:nth-child(2) .pbody{order:-1;align-self:end}
.prob:nth-child(2) h2{grid-column:2}
.prob .pbody h3{margin-bottom:var(--space-2);font-size:var(--text-lg)}
.prob .pbody p{color:var(--mut);max-width:44ch;font-size:15.5px}

/* three conceptual steps */
.bigsteps{list-style:none;margin-top:var(--space-7)}
.bigsteps li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-7);padding:var(--space-6) 0;border-top:1px solid var(--line-soft);
  align-items:baseline}
.bigsteps .pnum{display:block;font-family:var(--font-pixel);font-size:13px;
  color:var(--dim);letter-spacing:.1em;grid-column:1/-1;-webkit-font-smoothing:none}
.bigsteps h2{font-size:clamp(36px,5vw,72px)}
.bigsteps p{color:var(--mut);max-width:46ch;align-self:end}
.inline-shot{margin-top:var(--space-8)}
.inline-shot img{width:100%;max-width:1000px;border-radius:var(--r-shot);
  border:1px solid var(--line-soft);display:block}
.inline-shot figcaption{margin-top:var(--space-4);font-size:var(--text-sm);
  color:var(--dim)}

/* refined loudviz: typographic, no arrows */
.loudviz{border-top:1px solid var(--line-soft);padding-top:var(--space-6);
  max-width:960px}
.lv-arrow{display:none}
.lv-row{grid-template-columns:130px 1fr;margin:var(--space-3) 0}
.lv-bar{height:20px;border-radius:0}
.lv-note{font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase;
  font-weight:650}

/* relief moment on the accent field */
.relief{max-width:820px}
.relief-intro{font-size:var(--text-lg);font-weight:650;margin-bottom:var(--space-4)}
.band-lift .qs li{border-color:rgba(255,255,255,.3)}

/* quiet proof line */
.proofline{display:flex;gap:var(--space-6);align-items:baseline;
  font-family:var(--font-pixel);font-size:13px;color:var(--mut);
  -webkit-font-smoothing:none;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:var(--space-4) 0;margin:var(--space-6) 0;max-width:560px}
.proofline .p{color:#37d072;font-weight:700;margin-left:auto}

/* mobile recompositions */
@media(max-width:1023px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{display:none}
  .hero-xl{padding-bottom:var(--space-8)}
  .prob,.prob:nth-child(2){grid-template-columns:1fr;gap:var(--space-4)}
  .prob:nth-child(2) h2{margin-left:0;text-align:left;grid-column:auto}
  .prob:nth-child(2) .pbody{order:0}
  .bigsteps li{grid-template-columns:1fr;gap:var(--space-3)}
}
@media(max-width:760px){
  .prob{padding:var(--space-7) 0}
  .prob h2{font-size:clamp(34px,9vw,52px)}
  h2.statement{font-size:clamp(40px,11vw,64px)}
  .prodmoment figcaption{font-size:clamp(17px,4.6vw,24px)}
  .proofline{flex-wrap:wrap;gap:var(--space-3)}
}

/* ═══ GUIDE — premium manual layout ══════════════════════════════════════ */
.ghero{padding:var(--space-9) var(--page-gutter) var(--space-7)}
.ghero h1{font-size:clamp(56px,9vw,120px)}
.gmeta{font-family:var(--font-pixel);font-size:12px;color:var(--dim);
  margin-top:var(--space-3);-webkit-font-smoothing:none}

.gdoc{display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:var(--space-9);align-items:start}
.gnav{position:sticky;top:88px;border-top:1px solid var(--line-soft);
  padding-top:var(--space-5);display:flex;flex-direction:column;
  gap:var(--space-5)}
.gnav-group{display:flex;flex-direction:column;gap:2px}
.gnav-group>span{font-size:var(--text-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-weight:650;
  margin-bottom:var(--space-1)}
.gnav a{font-size:14.5px;color:var(--mut);padding:3px 0;
  border-left:2px solid transparent;padding-left:10px;margin-left:-12px}
.gnav a:hover{color:var(--ink);text-decoration:none}
.gcontents{display:none}

/* numbered chapters, magazine style */
.gbody{max-width:none;padding:0;counter-reset:chapter}
.gbody>h2{counter-increment:chapter;font-size:clamp(38px,4.6vw,68px);
  margin:var(--space-11) 0 var(--space-5);padding-top:var(--space-7);
  border-top:1px solid var(--line-soft);scroll-margin-top:96px}
.gbody>h2:first-of-type{margin-top:var(--space-6)}
.gbody>h2::before{content:counter(chapter,decimal-leading-zero);
  display:block;font-family:var(--font-pixel);font-size:13px;-webkit-font-smoothing:none;
  color:var(--wi-accent);letter-spacing:.1em;margin-bottom:var(--space-3)}
.gbody :target{scroll-margin-top:96px}

.gshot{margin:var(--space-6) 0 var(--space-7)}
.gshot img{width:100%;border-radius:var(--r-shot);
  border:1px solid var(--line-soft);display:block}
.gshot.half img{max-width:280px}
.gshot figcaption{margin-top:var(--space-3);font-size:var(--text-sm);
  color:var(--dim)}

/* the learning links: editorial article rows, not a note box */
.gbody .note ul{list-style:none;margin:var(--space-3) 0 0}
.gbody .note li{margin:0;border-bottom:1px solid var(--line-soft)}
.gbody .note li:last-child{border-bottom:0}
.gbody .note li a{display:block;padding:var(--space-4) 0;font-weight:700;
  font-size:var(--text-lg);color:var(--ink)}
.gbody .note li a:hover{color:var(--wi-accent);text-decoration:none}

/* quick-start numbered steps, large */
.gbody>ol{list-style:none;margin:0;counter-reset:step}
.gbody>ol>li{counter-increment:step;padding:var(--space-5) 0 var(--space-5) 72px;
  position:relative;border-top:1px solid var(--line-soft);margin:0;
  max-width:none}
.gbody>ol>li::before{content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:var(--space-5);
  font-family:var(--font-display);font-size:34px;line-height:1;
  color:var(--wi-grey-300)}

@media(max-width:1023px){
  /* minmax(0,1fr), not 1fr: a grid column's implicit min-width is
     min-content, so the guide's widest unbreakable string (the Specs path,
     set with no-break spaces) inflated the whole article to 354px inside a
     320px wrap — every paragraph ran 34px off-screen. */
  .gdoc{grid-template-columns:minmax(0,1fr)}
  .gnav{display:none}
  .gcontents{display:block;margin-bottom:var(--space-6);
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
  .gcontents>summary{cursor:pointer;list-style:none;padding:var(--space-4) 0;
    font-weight:700;font-size:var(--text-lg)}
  .gcontents>summary::-webkit-details-marker{display:none}
  .gcontents>summary::after{content:" ↓"}
  .gcontents[open]>summary::after{content:" ↑"}
  .gcontents .gnav{display:flex;position:static;border-top:0;
    padding-bottom:var(--space-5)}
}

/* ═══ newsletter signup ══════════════════════════════════════════════════ */
.signup .lede{margin-bottom:var(--space-6)}
.siform{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:stretch;
  max-width:620px;margin-bottom:var(--space-4)}
.siform input[type=email]{flex:1 1 260px;min-width:0;
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:2px;
  padding:14px 16px;transition:border-color var(--dur)}
.siform input[type=email]::placeholder{color:var(--dim)}
.siform input[type=email]:focus{outline:none;border-color:var(--wi-accent);
  box-shadow:inset 0 0 0 1px var(--wi-accent)}
.siform .btn{flex:0 0 auto;border:1px solid transparent;cursor:pointer}
/* Off-screen, not display:none — bots skip what is hidden outright. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.doc .siform{margin:var(--space-6) 0 var(--space-4)}
@media(max-width:520px){
  .siform{flex-direction:column}
  .siform .btn{width:100%;text-align:center}
}

/* ═══ hero video banner ══════════════════════════════════════════════════
   Same construction Reason uses: a muted, looping, inline video behind the
   headline. No JavaScript — autoplay+muted+playsinline is all a browser
   needs, which matters because the site's CSP is script-src 'none'. */
.herobanner{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:min(86vh,860px);padding:var(--space-10) 0 var(--space-9);
  overflow:hidden}
.hb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2}
/* Heavier on the left, where the words are; the right stays open so the
   console still reads as a photograph rather than a texture. */
.hb-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(11,11,12,.95) 0%,rgba(11,11,12,.86) 42%,
                        rgba(11,11,12,.52) 72%,rgba(11,11,12,.62) 100%),
  linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,0) 28%,
                        rgba(11,11,12,.35) 72%,var(--wi-black) 100%)}
.herobanner .hero-grid{width:100%;position:relative}
.herobanner .hero-art img{border-color:rgba(244,242,237,.28)}

/* Someone who has asked their system for less motion gets the still frame. */
@media(prefers-reduced-motion:reduce){
  .hb-video{display:none}
  .herobanner{background:url(/img/hero-poster.jpg) center/cover no-repeat}
}
@media(max-width:1023px){
  .herobanner{min-height:auto;padding:var(--space-9) 0 var(--space-8)}
  .hb-scrim{background:
    linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.88) 55%,
                          var(--wi-black) 100%)}
}

/* ═══ full-height banner: pink wash + grain ══════════════════════════════
   WI's second accent. Blue is the technical voice; pink is the music one.
   Over a blue-lit console it reads as a duotone rather than a filter. */
:root{ --wi-pink:#ff3ea5; }

.herobanner{min-height:min(94vh,1080px)}
.hb-video{z-index:-4}
.hb-scrim{z-index:-3}
/* Sits ABOVE the darkening so the colour stays vivid instead of muddy. */
.hb-tint{position:absolute;inset:0;z-index:-2;pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(60% 80% at 82% 30%,rgba(255,62,165,.55) 0%,rgba(255,62,165,0) 70%),
    radial-gradient(70% 90% at 6% 88%,rgba(32,56,230,.45) 0%,rgba(32,56,230,0) 70%)}
/* Grain: a 200px tile of real noise, tiled. Kills the plastic look that
   flat gradients over video always have. */
.hb-noise{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(/img/noise.png);background-size:200px 200px;
  opacity:.13;mix-blend-mode:overlay}
@media(prefers-reduced-motion:reduce){ .hb-noise{opacity:.08} }



/* ═══ accent CTA band + light footer ═════════════════════════════════════
   Reason ends on a flat field of their brand colour carrying one enormous
   line, then a LIGHT footer — mono links, uppercase column heads. Same
   architecture here, WI's colours and words. */
.ctaband{display:flex;align-items:center;justify-content:center;
  background:var(--wi-pink);color:#fff;text-align:center;
  min-height:min(46vh,420px);padding:var(--space-9) var(--page-gutter);
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;line-height:.92;font-size:clamp(46px,9vw,150px);
  transition:background var(--dur)}
.ctaband:hover{text-decoration:none;background:#ff2496}

footer{background:var(--wi-off-white);color:var(--wi-ink);
  padding:var(--space-9) 0 var(--space-6);
  --ink:var(--wi-ink);--mut:#4f4d49;--dim:var(--wi-grey-600);
  --line-soft:rgba(20,20,22,.14)}
footer a{color:var(--wi-ink)}
.ftop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--space-8);padding-bottom:var(--space-8)}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.fcol{display:flex;flex-direction:column;gap:var(--space-2)}
/* The 8-bit voice, where Reason puts their bold caps. */
.fhead{display:block;font-family:var(--font-pixel);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--wi-ink);
  margin-bottom:var(--space-4);-webkit-font-smoothing:none}
/* Mono links, as in the reference — it makes a list of links read as a
   directory rather than as prose. */
.fcol a{font-family:var(--font-mono);font-size:14px;color:#4f4d49;
  padding:3px 0;text-underline-offset:3px}
.fcol a:hover{color:var(--wi-ink);text-decoration:underline}

footer .siform{max-width:520px;gap:var(--space-3);margin:0}
footer .siform input[type=email]{border:1px solid rgba(20,20,22,.4);
  border-radius:980px;padding:14px 22px;background:transparent;
  color:var(--wi-ink);font-family:var(--font-mono);font-size:13px;
  letter-spacing:.04em}
footer .siform input[type=email]::placeholder{color:#8b8983;
  text-transform:uppercase;letter-spacing:.08em}
footer .siform input[type=email]:focus{border-color:var(--wi-ink);
  box-shadow:none;outline:none}
.fsend{flex:0 0 auto;width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(20,20,22,.4);color:var(--wi-ink);
  font-size:19px;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;transition:background var(--dur),color var(--dur)}
.fsend:hover{background:var(--wi-ink);color:var(--wi-off-white)}

.fbottom{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-3) var(--space-6);padding-top:var(--space-5);
  border-top:1px solid var(--line-soft);font-size:13px;color:#6f6c66}
.fbottom a{color:#6f6c66}
/* WI mark closes the page, right-aligned, like a colophon. */
.fmark{margin-left:auto;width:52px;height:29px;background:var(--wi-ink);
  -webkit-mask:url(/img/wi-mark.svg) no-repeat center/contain;
  mask:url(/img/wi-mark.svg) no-repeat center/contain;opacity:.85}
@media(max-width:860px){
  .ftop{grid-template-columns:1fr;gap:var(--space-7)}
  .ctaband{min-height:auto;padding:var(--space-8) var(--page-gutter)}
}
@media(max-width:520px){
  .fcols{grid-template-columns:1fr 1fr}
  .fmark{margin-left:0}
}

/* ═══ announcement bar + full-bleed header ═══════════════════════════════
   The reference runs a flat pink strip above a transparent nav that sits
   directly on the video, with the headline anchored bottom-left and the
   call to action opposite it. Same architecture, WI's colours. */
.annbar{background:var(--wi-pink);color:#0b0b0c;text-align:center;
  padding:11px var(--page-gutter);position:relative;z-index:30}
.annbar a{color:#0b0b0c;font-weight:700;font-size:14px;letter-spacing:.01em}
.annbar a:hover{text-decoration:underline;text-underline-offset:3px}

.topstack{position:relative}
/* Absolute, so the video runs the full height behind it. */
.topstack>header{position:absolute;top:0;left:0;right:0;z-index:20;
  background:transparent;border-bottom:0}
.topstack>header .wrap{border-bottom:1px solid rgba(244,242,237,.28);
  padding-top:var(--space-4);padding-bottom:var(--space-4)}
.topstack .herobanner{padding-top:calc(96px + var(--space-7));
  align-items:flex-end}

.hb-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-8);align-items:end;width:100%;position:relative}
.hb-copy h1{max-width:15ch}
.hb-copy .sub{margin-top:var(--space-5);max-width:46ch}

/* Outlined, set in the display face — a button big enough to be a landmark. */
.hb-cta{display:inline-block;white-space:nowrap;font-family:var(--font-display);
  font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1;
  font-size:clamp(24px,3vw,52px);color:#fff;border:2px solid rgba(255,255,255,.9);
  border-radius:980px;padding:.34em 1em;margin-bottom:6px;
  transition:background var(--dur),color var(--dur)}
.hb-cta:hover{background:#fff;color:var(--wi-black);text-decoration:none}

/* Price above the fold. Every plug-in page that outsells us puts the number
   in the hero — you should not have to scroll to learn what it costs. */
.hb-price{margin-top:var(--space-5);font-size:clamp(15px,1.5vw,18px);
  color:#fff;letter-spacing:.005em}
.hb-price strong{font-family:var(--font-display);font-weight:400;
  font-size:1.5em;letter-spacing:.01em;vertical-align:-.04em;margin-right:.18em}

/* Two actions, stacked: try it, or go straight to the number. */
.hb-actions{display:flex;flex-direction:column;align-items:flex-end;
  gap:var(--space-3)}
.hb-cta2{display:inline-block;white-space:nowrap;font-size:14px;
  text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;
  transition:color var(--dur),border-color var(--dur)}
.hb-cta2:hover{color:#fff;border-color:#fff;text-decoration:none}

/* "Will it run on your Mac" — three plain columns, no table. */
.needgrid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-7,32px);margin-top:var(--space-6)}
.needgrid h3{font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;font-size:18px;
  margin:0 0 var(--space-3);padding-bottom:var(--space-3);
  border-bottom:1px solid var(--line)}
.needgrid ul{list-style:none;margin:0;padding:0}
.needgrid li{color:var(--mut);font-size:var(--text-sm);line-height:1.55;
  padding:var(--space-2) 0}
.needgrid li+li{border-top:1px solid rgba(128,128,128,.18)}

@media(max-width:900px){.needgrid{grid-template-columns:1fr;gap:var(--space-5)}}
@media(max-width:1023px){
  .hb-actions{align-items:flex-start;flex-direction:row;
    align-items:center;gap:var(--space-5);flex-wrap:wrap}
}

@media(max-width:1023px){
  .hb-inner{grid-template-columns:1fr;gap:var(--space-6);align-items:start}
  .hb-cta{justify-self:start;font-size:clamp(22px,6vw,34px)}
  .topstack .herobanner{padding-top:calc(84px + var(--space-6))}
  .annbar a{font-size:13px}
}

/* ═══ rebuild: musician-first sections ═══════════════════════════════════ */

/* Service names set as type, not logos — see the note in the commit. */
.strip{padding:var(--space-6) 0;border-bottom:1px solid var(--line-soft)}
.strip .slabel{margin-bottom:var(--space-4)}
.dsps{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}
.dsps li{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(15px,1.6vw,22px);letter-spacing:.01em;color:var(--mut)}

/* Where MASTRD fits — the mental model, as a numbered run of steps. */
.flow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin-top:var(--space-7);border-top:1px solid var(--line-soft)}
.flow-step{padding:var(--space-6) var(--space-5) var(--space-6) 0;
  border-bottom:1px solid var(--line-soft);position:relative}
.fs-num{display:block;font-family:var(--font-pixel);font-size:12px;
  color:var(--dim);letter-spacing:.1em;margin-bottom:var(--space-3);
  -webkit-font-smoothing:none}
.flow-step h3{font-size:clamp(17px,1.7vw,22px);margin-bottom:var(--space-2)}
.fs-names{font-family:var(--font-mono);font-size:12.5px;color:var(--dim);
  line-height:1.7}
/* The one step that is the product. */
.flow-step.is-here{background:var(--wi-accent);color:#fff;
  padding-left:var(--space-5);margin-left:calc(-1*var(--space-3))}
.flow-step.is-here .fs-num,.flow-step.is-here .fs-names{color:rgba(255,255,255,.85)}

.privacy{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;max-width:900px;border-top:1px solid var(--line-soft)}
.privacy li{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(24px,3.4vw,46px);line-height:1.1;letter-spacing:.01em;
  padding:var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom:1px solid var(--line-soft)}

/* Reference tables — data, set like metering. */
.dsptable,.cmp{width:100%;border-collapse:collapse;margin-top:var(--space-6);
  font-family:var(--font-mono);font-size:14px}
.dsptable th,.dsptable td,.cmp th,.cmp td{text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--line-soft)}
.dsptable thead th,.cmp thead th{font-family:var(--font-pixel);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  -webkit-font-smoothing:none}
.dsptable tbody th,.cmp tbody th{font-family:var(--font-body);font-weight:600;
  color:var(--ink)}
.dsptable td,.cmp td{color:var(--mut)}
.dsptable caption,.cmp caption{caption-side:bottom;padding-top:var(--space-4);
  font-family:var(--font-body);font-size:var(--text-sm);color:var(--dim);
  text-align:left}
.cmp{margin-top:var(--space-8)}
.cmp tbody td{text-align:center;width:14%}
.cmp thead th:not(:first-child){text-align:center}

.tier-for{font-size:14px;color:var(--mut);margin:var(--space-3) 0 var(--space-5);
  flex:1}
.tier{position:relative}
.tier-flag{position:absolute;top:0;right:0;background:var(--wi-pink);color:#fff;
  font-family:var(--font-pixel);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 12px;-webkit-font-smoothing:none}

@media(max-width:1023px){
  .flow{grid-template-columns:1fr 1fr}
  .flow-step.is-here{margin-left:0}
}
@media(max-width:760px){
  .flow{grid-template-columns:1fr}
  .privacy{grid-template-columns:1fr}
  .dsptable,.cmp{display:block;overflow-x:auto;white-space:nowrap}
  .dsps li{font-size:16px}
}

/* ═══ DENSITY PASS ═══════════════════════════════════════════════════════
   Measured first, then cut. Before: hero 116px, section heads 104px, CTA
   band 130px, footer 510px, page 16.2 screens. The brief's principle —
   large is not premium; proportion is — applied without touching the
   identity, the components or the colour system. Last in the cascade so
   the intent of each override is legible in one place. */

/* Rhythm: standard sections 80, dramatic moments keep more. Not every
   section may shout, or none of them do. */
section{padding:var(--space-9) 0}
#product,#privacy{padding:var(--space-10) 0}

/* Groups that belong together, brought together. */
.section-head{margin-bottom:var(--space-7)}
.section-head h2,h2.statement{margin-bottom:var(--space-4)}
.section-head p{font-size:var(--text-lg)}
.lede{margin-bottom:var(--space-6)}
.slabel,.kicker,.eyebrow{margin-bottom:var(--space-3)}

/* Display sizes: still the loudest thing on screen, no longer the only. */
section h2,.section-head h2{font-size:clamp(28px,3.6vw,44px)}
h2.statement{font-size:clamp(30px,4vw,46px);max-width:18ch}
.hero-xl h1,.hb-copy h1{max-width:17ch}
.prob h2{font-size:clamp(26px,3.4vw,42px)}
.bigsteps h2{font-size:clamp(24px,2.8vw,36px)}
.privacy li{font-size:clamp(20px,2.4vw,32px);padding:var(--space-4) var(--space-4) var(--space-4) 0}
.qs li{font-size:clamp(19px,2.2vw,28px);padding:var(--space-3) 0}
.tile .kicker{font-size:clamp(20px,2.4vw,30px)}
.flowgrid li b{font-size:clamp(22px,2.4vw,32px)}
.prodmoment figcaption{font-size:clamp(16px,1.7vw,22px);margin-top:var(--space-4)}
.doc h1{font-size:clamp(32px,4vw,50px)}
.ghero h1{font-size:clamp(38px,5vw,64px)}
.gbody>h2{font-size:clamp(26px,3vw,40px);margin:var(--space-9) 0 var(--space-4);
  padding-top:var(--space-5)}

/* Hero: reveal the product without a scroll. min-height in viewport units
   was manufacturing most of the empty space. */
.herobanner{min-height:auto}
.topstack .herobanner{padding-top:calc(72px + var(--space-7));
  padding-bottom:var(--space-8)}
.hb-copy .sub{margin-top:var(--space-4)}
.hb-cta{font-size:clamp(20px,2.2vw,34px);padding:.42em 1.05em}
.hero-xl{padding:var(--space-8) var(--page-gutter) var(--space-7)}

/* Buttons were 38px — under the 44–48 the brief asks for, and under
   Apple's 44pt target. Compact is not the same as small. */
.btn{padding:13px 26px;font-size:15px;line-height:1.25}
.btn.small,.btn.navcta{padding:10px 18px;font-size:13.5px}

/* Feature rows read as one story, not five landing pages. */
.row{gap:var(--space-7)}
.row + .row{margin-top:var(--space-8)}
.tile{padding:var(--space-6)}
.prob{padding:var(--space-6) 0}
.bigsteps li{padding:var(--space-5) 0}
.flow-step{padding:var(--space-5) var(--space-4) var(--space-5) 0}
.tracklist,.verdict-card{padding:var(--space-5)}
.loudviz{padding-top:var(--space-5)}
.steps-note{margin-top:var(--space-5)}

/* Measurement tables set like metering software, not marketing. */
.dsptable,.cmp,.selftest{font-size:13px}
.dsptable th,.dsptable td,.cmp th,.cmp td{padding:9px 12px}
.selftest{padding:var(--space-4)}
.selftest td,.selftest th{padding:6px 9px}
.proofline{padding:var(--space-3) 0;margin:var(--space-5) 0}

/* Pricing: readable together on a 13-inch screen. */
.tier{padding:var(--space-6)}
.tier h3{font-size:21px}
.tier .price{font-size:clamp(32px,2.6vw,44px);margin:var(--space-4) 0 2px}
.tier ul{margin:var(--space-4) 0 var(--space-5)}
.tier li{padding:6px 0;font-size:14px}
.tier-for{margin:var(--space-2) 0 var(--space-4)}
.ownit{margin-bottom:var(--space-6);padding:var(--space-3) 0}
.cmp{margin-top:var(--space-6)}

/* FAQ rows land at ~60px closed. */
.faq summary{padding:var(--space-4) 0;font-size:clamp(16px,1.5vw,19px)}
.faq details p{padding-bottom:var(--space-5);font-size:16px;line-height:1.6}
.faq h2{margin-bottom:var(--space-5)}

/* The band ends the page; it does not need to be another page. */
.ctaband{min-height:auto;padding:var(--space-8) var(--page-gutter);
  font-size:clamp(34px,5.4vw,84px)}

/* Footer: a finishing element. Design kept exactly; proportions cut. */
footer{padding:var(--space-7) 0 var(--space-5)}
.ftop{gap:var(--space-6) var(--space-7);padding-bottom:var(--space-6)}
.fhead{margin-bottom:var(--space-3)}
.fcol a{font-size:14px;padding:2px 0}
.fnews>p{font-size:14px;margin:var(--space-2) 0 var(--space-4)}
footer .siform input[type=email]{padding:12px 20px}
.fsend{width:44px;height:44px}
.fbottom{padding-top:var(--space-4);font-size:12.5px}
.fmark{width:44px;height:25px}

/* Laptops are the actual audience for Mac software. */
@media(max-width:1439px){
  section{padding:var(--space-8) 0}
  #product,#privacy{padding:var(--space-9) 0}
  .topstack .herobanner{padding-top:calc(72px + var(--space-6));
    padding-bottom:var(--space-7)}
}
@media(max-width:760px){
  section{padding:var(--space-7) 0}
  #product,#privacy{padding:var(--space-8) 0}
  .hero-xl h1,.hb-copy h1{font-size:clamp(34px,10vw,46px)}
  h2.statement,section h2{font-size:clamp(26px,7vw,34px)}
  .section-head{margin-bottom:var(--space-6)}
  .ctaband{font-size:clamp(30px,9vw,44px);padding:var(--space-7) var(--page-gutter)}
  .privacy li{font-size:clamp(20px,6vw,28px)}
  body{font-size:16px}
}

/* Final trim: the app must break the fold on a laptop. The brief's test is
   nav + headline + copy + CTA + a slice of the product, without scrolling. */
.strip{padding:var(--space-5) 0}
#product{padding:var(--space-7) 0 var(--space-9)}
.topstack .herobanner{padding-top:calc(72px + var(--space-6));
  padding-bottom:var(--space-7)}
@media(max-width:1439px){
  .topstack .herobanner{padding-top:calc(72px + var(--space-5));
    padding-bottom:var(--space-6)}
  #product{padding:var(--space-6) 0 var(--space-8)}
}

/* 13-inch MacBook is the real audience for Mac software: make the app break
   the fold there too, not only on a 900px display. */
@media(max-width:1439px){
  .strip{padding:var(--space-4) 0}
  #product{padding:var(--space-5) 0 var(--space-8)}
  .topstack .herobanner{padding-bottom:var(--space-5)}
}
/* Footer to the 260–380 target: it is a finishing element, not a chapter. */
footer{padding:var(--space-6) 0 var(--space-4)}
.ftop{padding-bottom:var(--space-5);gap:var(--space-5) var(--space-7)}
.fnews>p{margin:var(--space-2) 0 var(--space-3)}

/* ── flow diagram: the blue step, aligned exactly ────────────────────────
   It was set with a negative margin and extra left padding, so it hung 12px
   into its neighbour, sat 12px wider than every other cell, and pushed its
   own text 12px off the column. The text now shares the identical box as
   its siblings; the colour field is a bleeding pseudo-element, so it can
   extend past the text without ever moving it. */
.flow-step.is-here{position:relative;isolation:isolate;margin-left:0;
  padding-left:0;background:none;border-bottom-color:transparent}

/* The blue block had nowhere to sit: .flow was `gap:0` and the space between
   columns was faked with padding-right on each step. So the highlight was
   given hand-picked bleeds (-16px left, -12px right) which were both
   asymmetric AND, with no real gap to bleed into, put its right edge 12px
   past the column — running underneath the next step's number.
   The fix is a real column gap. The block then bleeds exactly half of it on
   each side: symmetric by construction, and it can never reach a neighbour
   however the columns are sized. */
.flow{column-gap:var(--flow-gap)}
.flow-step{padding-right:0}
.flow-step.is-here::before{content:"";position:absolute;z-index:-1;
  top:-1px;bottom:-1px;                         /* cover the hairlines cleanly */
  left:calc(-1 * var(--flow-gap) / 2);
  right:calc(-1 * var(--flow-gap) / 2);
  background:var(--wi-accent)}

/* Single column: there is no neighbour to collide with, so the block runs
   the full width of the screen. Half-gap bleeds would push past the page
   gutter and give the whole page a horizontal scrollbar. */
@media(max-width:760px){
  .flow-step.is-here::before{
    left:calc(-1 * var(--page-gutter));
    right:calc(-1 * var(--page-gutter))}
}

/* ── footer: close the page properly under the legal line ─────────────── */
.fbottom{padding-top:var(--space-4);padding-bottom:0}
footer{padding-bottom:var(--space-5)}

/* ── footer social row ───────────────────────────────────────────────────
   Inline SVG so there are no extra requests and the glyphs take the ink
   colour. Outlined circles, matching the reference footer's treatment. */
.fsocial{list-style:none;display:flex;gap:var(--space-3);
  margin-top:var(--space-4)}
.fsocial a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(20,20,22,.35);color:var(--wi-ink);
  transition:background var(--dur),color var(--dur),border-color var(--dur)}
.fsocial a:hover{background:var(--wi-ink);color:var(--wi-off-white);
  border-color:var(--wi-ink);text-decoration:none}
.fsocial svg{fill:currentColor;display:block}

/* The visit-counting pixel. A class, not a style attribute — the CSP is
   style-src 'self', which blocks inline styles outright. */
.px{position:absolute;left:-9999px;width:1px;height:1px}

/* Currency note under the pricing table. Quiet, but it must be readable —
   an unexpected exchange-rate difference on a card statement is a chargeback. */
.pricenote{max-width:62ch;margin:var(--space-4) 0 var(--space-5);
  font-size:var(--text-sm);color:var(--wi-muted);line-height:1.5}

/* The pay-monthly links are payment actions sitting in body copy, and at
   16px tall they were the smallest tap targets on the page — well under the
   44px Apple asks for. Padding gives them a real hit area without turning
   them into buttons that would compete with the tier's own CTA. */
.tier .monthly a{display:inline-block;padding:9px 2px;line-height:1.2}
@media (hover:none){
  .tier .monthly a{padding:13px 4px}
}

/* ═══ PRODUCTION POLISH PASS (2026-08-08) ══════════════════════════════════
   Measured findings, not taste. Each block names the defect it fixes. */

/* At 320-349px the letterspaced wordmark (274px) plus gutters left no room
   for the menu button, which sat entirely off-screen: no navigation at all.
   The lockup yields before the menu does — smaller mark, tighter tracking.
   Never the other way round: branding must not cost the user the menu. */
@media(max-width:379px){
  .logo{gap:10px}
  .logo .mark{width:32px;height:18px}
  .logo .rule{height:18px}
  .logo .wordmark,.logo .prodname{font-size:10px;letter-spacing:.13em}
}

/* Guide and legal tables were 410px wide at a 320px viewport with
   overflow:visible — the right-hand columns were simply cut off. Data
   scrolls inside its own container; the page itself never does. */
@media(max-width:760px){
  .doc table,.gwrap table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .doc p code,.doc li code,.gwrap p code,.gwrap li code{overflow-wrap:anywhere}
}

/* Near-duplicate values doing the same job as existing tokens: the footer
   placeholder used its own grey one step off --wi-muted, and the CTA band's
   hover pink was a raw literal. Point both at the palette. */

/* ── the six machines, each with its own mark ────────────────────────────
   The marks are the same drawings the plug-in uses, traced to SVG on the
   same 24-unit grid. They carry `currentColor`, so they take the row's
   colour and need no palette of their own.

   ITS OWN GRID, because .lv-row is two columns — a label and a bar — and
   these rows are three things: a mark, a name and a sentence. Reusing the
   two-column rule would have pushed every description onto the next row. */
.machines .lv-row{grid-template-columns:72px 130px 1fr;align-items:center;
  gap:var(--space-4);padding:var(--space-4) 0;
  border-bottom:1px solid var(--line-soft)}
.machines .lv-row:last-child{border-bottom:0}
.mi-wrap{display:block;width:56px;height:56px;color:var(--ink);opacity:.9}
.mi{width:100%;height:100%;display:block}
.machines h3{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--text-lg);line-height:1.1;letter-spacing:.01em;margin:0}
.machines p{margin:0;color:var(--dim);font-size:var(--text-sm);line-height:1.5}

@media (max-width:760px){
  /* The mark stays with the name; the sentence drops beneath both. */
  .machines .lv-row{grid-template-columns:52px 1fr;gap:var(--space-3)}
  .mi-wrap{width:44px;height:44px}
  .machines p{grid-column:1 / -1;margin-top:var(--space-1)}
}