/* ══════════════════════════════════════════════════════════════════════════
   UNASSUMED — one stylesheet, no framework.
   The page uses no utility classes, so Tailwind and the shadcn layer that the
   draft imported are gone: they added ~50 KB and styled nothing on this page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────────────────────────────────────
   Self-hosted rather than loaded from fonts.googleapis.com. Three reasons that
   matter here: it removes two extra connections from the critical path (a
   stylesheet request that must resolve before the font request even starts),
   it means no visitor IP is handed to a third party — which is what a UK/EU
   privacy notice has to account for otherwise — and it lets us `preload` the
   exact file. All three are latin-subset variable fonts, ~169 KB total.
   ───────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Archivo";
  src:url("/fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight:400 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/fonts/jetbrains-mono-latin-var.woff2") format("woff2-variations");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Shantell Sans";
  src:url("/fonts/shantell-sans-latin-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --paper:#f5f0e6;--paper-ui:#fffdf8;--paper-alt:#efe9dc;
  --ink:#191915;--ink-soft:#4a4a43;--ink-mute:rgba(25,25,21,.68);
  --yellow:#ffe24d;--red:#e23a2e;--red-text:#c62a20;
  --teal:#0f5c5a;--teal-wash:#dcebe7;
  --rule:rgba(25,25,21,.22);--rule-soft:rgba(25,25,21,.12);--rule-dark:#5c5a53;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hand:"Shantell Sans","Comic Sans MS",cursive;
  --shell:min(1180px,100% - 48px);
  /* Section rhythm. Loud sections take --pad-lg, quiet ones --pad-sm. The
     contrast between them is the page's pulse; one repeated value is not. */
  --pad-lg:clamp(84px,9vw,132px);
  --pad-md:clamp(64px,7vw,96px);
  --pad-sm:clamp(48px,5vw,68px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,p,figure,ol,ul{margin:0}
img,svg{max-width:100%;height:auto}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:14px 20px;font-weight:700}
.skip:focus{left:12px;top:12px}
.disp{font-weight:900;letter-spacing:-.038em;line-height:.98;text-wrap:balance}
.hand{font-family:var(--hand);font-weight:600}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em}
.eyebrow i{width:10px;height:10px;background:var(--red);flex:none}
/* A section label carries a rule under it. Used on sections that open a claim
   only, so that a label still means something when it appears. */
.slabel{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;padding:5px 9px;border:1px solid var(--ink);white-space:nowrap}
.tag-red{background:var(--red-text);border-color:var(--red-text);color:#fff}
.tag-teal{background:var(--teal);border-color:var(--teal);color:#fff}
.tag-yellow{background:var(--yellow)}
.tag-open{background:transparent;border-style:dashed}
.lede{font-size:clamp(1.06rem,1.35vw,1.25rem);line-height:1.55;max-width:34em;color:#2c2c26;text-wrap:pretty}
.body{font-size:clamp(1rem,1.1vw,1.09rem);line-height:1.62;color:var(--ink-soft);text-wrap:pretty;max-width:38em}
.body + .body{margin-top:18px}

/* A value we have not decided. Drawn as a blank on a form, so the brackets
   read as a field deliberately left empty rather than a variable we forgot. */
.tbd{border-bottom:.055em dashed currentColor;padding-bottom:.04em;opacity:.72}

/* ── Rhetorical motion: highlight + strike ──────────────────────────────── */
/* Marks are drawn by default. Only a section that JS has confirmed it can
   observe gets .will-reveal, which hides them so they can animate in. */
.mark{position:relative;isolation:isolate;white-space:nowrap}
.mark::after{content:"";position:absolute;z-index:-1;left:-.02em;right:-.03em;bottom:.08em;height:.34em;background:var(--yellow);transform:rotate(-1.1deg);transform-origin:left;mix-blend-mode:multiply}
/* The strike is painted as a background, not an ::after bar, so that a struck
   sentence which wraps gets a rule on every line. box-decoration-break gives
   each line fragment its own background box; an absolutely positioned bar only
   ever draws once, which is why the old one vanished below the first line on
   a phone. background-size is animatable, so it still draws left to right. */
.strike{color:var(--red-text);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 .56em;background-size:100% 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.will-reveal .mark::after{transform:rotate(-1.1deg) scaleX(0)}
.will-reveal .strike{background-size:0 3px}
.will-reveal.is-in .mark::after{transform:rotate(-1.1deg) scaleX(1);transition:transform .72s cubic-bezier(.2,.8,.3,1) .18s}
.will-reveal.is-in .strike{background-size:100% 3px;transition:background-size .5s cubic-bezier(.4,0,.2,1) .35s}

/* ── Controls ───────────────────────────────────────────────────────────── */
.waitlist{margin:0}
.field{display:flex;max-width:600px;border:2px solid var(--ink);background:var(--paper-ui);box-shadow:5px 5px 0 var(--ink)}
.field:focus-within{box-shadow:5px 5px 0 var(--yellow)}
.field input{flex:1;min-width:0;border:0;background:transparent;padding:17px 18px;font:inherit;font-size:16px;color:var(--ink);outline:none}
.field input::placeholder{color:rgba(25,25,21,.42)}
.field button{border:0;background:var(--ink);color:#fff;padding:15px 22px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;white-space:nowrap;min-height:48px}
.field button:hover{background:var(--teal)}
.field button[aria-busy="true"]{opacity:.7;cursor:progress}
.field-dark{border-color:#fff;box-shadow:6px 6px 0 var(--yellow)}
.field-dark button{background:var(--yellow);color:var(--ink)}
.field-dark button:hover{background:#fff}
.field-err{border-color:var(--red-text)}
/* The honeypot. Off-screen rather than display:none — a bot that reads the
   computed style skips hidden fields, but fills anything it can see a label
   for. tabindex and autocomplete keep it away from humans and password
   managers. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formnote{font-family:var(--mono);font-size:11.5px;line-height:1.7;margin-top:16px;color:var(--ink-mute);max-width:36em}
.errnote{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--red-text);margin-top:12px}
.errnote:empty{display:none}
.close .errnote{color:#ffd9d5}
.done{max-width:600px;padding:20px 22px;border:2px solid var(--teal);background:var(--teal-wash);box-shadow:5px 5px 0 var(--teal)}
.done strong{display:block;font-size:19px;font-weight:800}
.done p{margin-top:8px;font-size:15px;line-height:1.55;color:#26463f}
.done-dark{background:var(--paper-ui);border-color:var(--yellow);box-shadow:6px 6px 0 var(--yellow);color:var(--ink);text-align:left}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--ink)}
.nav .shell{height:88px;display:flex;align-items:center;gap:32px}
.wordmark{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-size:23px;font-weight:900;letter-spacing:-.055em}
.wordmark span{font-weight:400}
.wordmark i{color:var(--red-text);font-style:normal}
.nav-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;margin-left:auto;color:var(--ink-mute)}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-weight:800;font-size:15px;box-shadow:inset 0 -3px 0 var(--yellow)}
.nav-cta:hover{box-shadow:inset 0 -3px 0 var(--red)}

/* ── Hero — split ───────────────────────────────────────────────────────── */
/* Poses the problem and stops. The diagnosis is here; the rewrite is the peak,
   three sections down, and duplicating the payoff here would spend it early. */
.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(48px,6vw,88px);align-items:start;padding-block:clamp(52px,6vw,78px) var(--pad-md)}
.hero h1{font-size:clamp(3.4rem,7.3vw,6.5rem);margin:32px 0 28px}
.review{position:relative;padding-top:12px}
.review-card{background:var(--paper-ui);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.review-head{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:2px solid var(--ink);background:var(--paper-alt);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em}
.review-head i{width:9px;height:9px;background:var(--red);flex:none}
.review-src{margin-left:auto;font-weight:400;letter-spacing:.1em;color:var(--ink-mute)}
.review-body{padding:28px 30px 30px}
.review-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--ink-mute)}
.review-q{font-size:clamp(1.15rem,1.5vw,1.31rem);font-weight:700;line-height:1.4;margin-top:12px}
.review-flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.review-score{display:flex;align-items:flex-end;gap:20px;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.review-nums{display:flex;align-items:baseline;gap:6px;margin-top:6px;font-family:var(--mono);color:var(--red-text)}
.review-nums .was{font-size:46px;font-weight:700;line-height:.9}
.review-nums small{font-size:14px}
.review-verdict{margin-left:auto;text-align:right;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.11em;line-height:1.7;color:var(--red-text)}
.aside-note{position:absolute;right:-8px;top:-26px;color:var(--red-text);font-size:17px;transform:rotate(-4deg)}

/* ── Ticker — a hard cut. The questions the page is about to take away. ─── */
.ticker{background:var(--yellow);border-block:2px solid var(--ink);padding:15px 0;overflow:hidden;white-space:nowrap}
.ticker p{width:max-content;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.16em;animation:roll 34s linear infinite}
.ticker b{margin:0 26px;color:var(--red-text)}
@keyframes roll{to{transform:translateX(-50%)}}

/* ── The enemy — unboxed. Two claims and a hairline, nothing else. ──────── */
/* Deliberately quieter and shorter than the section after it, so the teardown
   has somewhere to land. */
.enemy{padding-block:var(--pad-md);position:relative}
.enemy h2{font-size:clamp(2.4rem,4.6vw,4.1rem);margin:40px 0 var(--pad-sm);max-width:16em}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.pair .good{padding-left:clamp(32px,5vw,72px);border-left:1px solid var(--rule)}
.pair q{display:block;font-size:clamp(1.35rem,1.9vw,1.72rem);font-weight:800;line-height:1.26;margin-top:20px;quotes:"“" "”"}
.pair p{font-size:15.5px;line-height:1.62;margin-top:16px;color:var(--ink-soft)}
.margin-red{position:absolute;right:0;bottom:20px;color:var(--red-text);font-size:18px;transform:rotate(-2.5deg);max-width:22em;text-align:right}

/* ── PEAK — the teardown ────────────────────────────────────────────────── */
/* The frame pins and the sentence is edited by the scroll. Every state below
   is keyed on [data-stage], which JS sets; with no attribute at all the
   finished state renders, so a reader without JS still sees a true page. */
.td{position:relative;height:360vh;background:var(--paper-alt);border-block:1px solid var(--ink)}
.td-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;overflow:hidden}
.td-frame{background:var(--paper-ui);border:2px solid var(--ink);box-shadow:12px 12px 0 var(--ink)}
.td-head{display:flex;align-items:center;gap:10px;padding:13px 22px;border-bottom:2px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em}
.td-head i{width:9px;height:9px;background:var(--red);flex:none;animation:blink 1.6s steps(1,end) infinite}
@keyframes blink{50%{opacity:.25}}
.td-src{margin-left:auto;font-weight:400;letter-spacing:.1em;color:#a9a79f}
.td-body{display:grid;grid-template-columns:1.42fr .58fr;gap:clamp(28px,4vw,54px);padding:clamp(26px,3.4vw,44px) clamp(24px,3.4vw,44px)}
.td-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--ink-mute)}
.td-lbl-good{color:var(--teal);margin-top:clamp(20px,2.2vw,28px);transition:opacity .4s ease}
.td-bad,.td-good{font-size:clamp(1.35rem,2.55vw,2.35rem);font-weight:800;line-height:1.24;margin-top:12px}
.td-bad{transition:opacity .55s ease}
.td-good{color:var(--ink)}
.td-w{display:inline-block;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.3,1)}
/* The replacement question assembles word by word. The stagger lives here
   rather than in a style attribute so the page needs no inline styles at all,
   which is what lets the CSP below drop 'unsafe-inline'. */
.td-good .td-w:nth-of-type(1){transition-delay:0ms}
.td-good .td-w:nth-of-type(2){transition-delay:42ms}
.td-good .td-w:nth-of-type(3){transition-delay:84ms}
.td-good .td-w:nth-of-type(4){transition-delay:126ms}
.td-good .td-w:nth-of-type(5){transition-delay:168ms}
.td-good .td-w:nth-of-type(6){transition-delay:210ms}
.td-good .td-w:nth-of-type(7){transition-delay:252ms}
.td-good .td-w:nth-of-type(8){transition-delay:294ms}
.td-good .td-w:nth-of-type(9){transition-delay:336ms}
.td-good .td-w:nth-of-type(10){transition-delay:378ms}
.td-good .td-w:nth-of-type(11){transition-delay:420ms}
/* Same background-painted strike as .strike, so it survives wrapping. */
.td-c{background-image:linear-gradient(var(--red-text),var(--red-text));background-repeat:no-repeat;background-position:0 .56em;background-size:100% 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .42s cubic-bezier(.4,0,.2,1),color .42s ease;color:var(--red-text)}
.td-flags{list-style:none;padding:0;display:grid;gap:14px;align-content:start;border-left:1px solid var(--rule);padding-left:clamp(20px,2.4vw,32px);transition:opacity .5s ease}
.td-flags li{display:grid;gap:7px;justify-items:start;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.3,1)}
.td-flags li span:last-child{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.td-foot{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;padding:20px clamp(24px,3.4vw,44px) clamp(22px,2.6vw,30px);border-top:2px solid var(--ink);background:var(--paper-alt)}
.td-num{display:flex;align-items:baseline;gap:6px;margin-top:4px;font-family:var(--mono);font-weight:700;color:var(--red-text);transition:color .5s ease}
.td-num > span{font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.86;font-variant-numeric:tabular-nums}
.td-num small{font-size:14px}
.td-cta{margin-left:auto;background:var(--teal);color:#fff;padding:12px 16px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.3,1)}

/* Stage 0–2: clauses not yet struck. */
.td-pin[data-stage="0"] .td-c,
.td-pin[data-stage="1"] .td-c[data-c="2"],.td-pin[data-stage="1"] .td-c[data-c="3"],
.td-pin[data-stage="2"] .td-c[data-c="3"]{background-size:0 3px;color:var(--ink)}
/* Flags stamp in beside the clause they indict. */
.td-pin[data-stage="0"] .td-flags li,
.td-pin[data-stage="1"] .td-flags li[data-c="2"],.td-pin[data-stage="1"] .td-flags li[data-c="3"],
.td-pin[data-stage="2"] .td-flags li[data-c="3"]{opacity:0;transform:translateX(14px)}
/* The struck sentence stays at full strength until the diagnosis is complete. */
.td-bad{opacity:.68}
.td-pin[data-stage="0"] .td-bad,.td-pin[data-stage="1"] .td-bad,
.td-pin[data-stage="2"] .td-bad,.td-pin[data-stage="3"] .td-bad{opacity:1}
/* Then the evidence recedes and the replacement assembles. */
.td-pin[data-stage="0"] .td-lbl-good,.td-pin[data-stage="1"] .td-lbl-good,
.td-pin[data-stage="2"] .td-lbl-good,.td-pin[data-stage="3"] .td-lbl-good,
.td-pin[data-stage="4"] .td-lbl-good{opacity:0}
.td-pin[data-stage="0"] .td-w,.td-pin[data-stage="1"] .td-w,.td-pin[data-stage="2"] .td-w,
.td-pin[data-stage="3"] .td-w,.td-pin[data-stage="4"] .td-w{opacity:0;transform:translateY(16px);transition-delay:0s!important}
.td-pin[data-stage="5"] .td-num,.td-pin[data-stage="6"] .td-num{color:var(--teal)}
.td-pin[data-stage="0"] .td-cta,.td-pin[data-stage="1"] .td-cta,.td-pin[data-stage="2"] .td-cta,
.td-pin[data-stage="3"] .td-cta,.td-pin[data-stage="4"] .td-cta,
.td-pin[data-stage="5"] .td-cta{opacity:0;transform:translateY(8px)}

/* ── The loop — authored silence. Dark, unruled, low. ───────────────────── */
.loop{background:var(--ink);color:var(--paper);padding-block:var(--pad-lg)}
.loop-head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(40px,6vw,88px);align-items:end}
.loop-head h2{font-size:clamp(2.3rem,4.4vw,3.9rem)}
.loop-head em{font-style:normal;color:var(--yellow)}
/* Light type on dark: one notch more leading and tracking, or it reads thin. */
.loop-head p{font-size:17px;line-height:1.68;letter-spacing:.004em;color:#cfccc2;text-wrap:pretty}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3.6vw,52px);margin-top:clamp(64px,8vw,104px)}
.steps small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--yellow)}
.steps h3{font-size:clamp(1.3rem,1.75vw,1.68rem);margin:16px 0 14px}
.steps p{font-size:14.5px;line-height:1.7;letter-spacing:.004em;color:#bfbcb3}
.loop-foot{display:flex;align-items:center;gap:16px;margin-top:clamp(56px,6vw,84px);padding-top:26px;border-top:1px solid var(--rule-dark);color:var(--yellow);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em}
.loop-foot span{font-size:24px}

/* ── The workbench — split ──────────────────────────────────────────────── */
.bench{padding-block:var(--pad-lg) var(--pad-md)}
.bench-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(44px,6vw,80px);align-items:center}
.bench h2{font-size:clamp(2.3rem,4.3vw,3.8rem);margin-bottom:28px}
.bench h2 em{font-style:normal;color:var(--teal)}
.legend{list-style:none;padding:0;margin-top:34px;border-top:1px solid var(--rule);padding-top:24px;display:grid;gap:14px}
.legend li{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.legend strong{color:var(--ink)}
.legend i{width:34px;height:14px;border:1px solid var(--ink);flex:none}
.legend .y i{background:var(--yellow)}
.legend .r i{background:var(--red)}
.legend .t i{background:var(--teal)}
.score{background:var(--paper-ui);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:32px 34px 34px}
.score-top{display:flex;align-items:flex-end;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.score-top div{margin-right:auto}
.score-title{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em}
.score-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-mute);margin-top:5px}
.score-top strong{font-family:var(--mono);font-size:clamp(2.6rem,4vw,4rem);font-weight:700;line-height:.72}
.score-top small{font-family:var(--mono);font-size:14px;padding-bottom:4px}
.score-rows{display:grid;gap:20px;margin-top:26px}
.score-rows div{display:grid;grid-template-columns:minmax(120px,190px) 1fr 42px;gap:14px;align-items:center;font-size:14.5px}
.score-rows i{display:block;height:11px;background:var(--rule-soft)}
.score-rows i span{display:block;height:11px;background:var(--teal)}
/* Bar widths, again as rules rather than style attributes. */
.score-rows div:nth-of-type(1) i span{width:76%}
.score-rows div:nth-of-type(2) i span{width:58%}
.score-rows div:nth-of-type(3) i span{width:42%}
.score-rows div:nth-of-type(4) i span{width:31%}
.score-rows .down{color:var(--red-text)}
.score-rows .down i span{background:var(--red)}
.score-rows b{font-family:var(--mono);font-size:12px;font-weight:400;text-align:right}
.score-note{margin-top:28px;padding:18px 20px;background:var(--paper-alt);border-left:5px solid var(--red)}
.score-note-lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--red-text)}
.score-note p{font-size:17px;line-height:1.42;margin-top:8px;color:var(--red-text)}
.score .score-cta{display:block;width:100%;margin-top:24px;background:var(--ink);color:#fff;border:0;padding:16px;font:inherit;font-weight:800;font-size:14px;letter-spacing:.06em;text-align:center;text-decoration:none;min-height:48px}
.score .score-cta:hover{background:var(--teal)}

/* ── Provenance — the second card supersedes the first ──────────────────── */
.prov{background:var(--paper-alt);border-block:1px solid var(--ink)}
.prov .shell{padding-block:var(--pad-md)}
.prov-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,80px);align-items:center;margin-top:clamp(40px,5vw,64px)}
.prov h2{font-size:clamp(2.3rem,4.3vw,3.8rem);margin-bottom:28px}
.prov-stack{position:relative;padding-top:6px}
.prov-stack article{background:var(--paper-ui);padding:26px 28px}
.prov-stack .sim{border:2px dashed rgba(25,25,21,.4);background:transparent;transform:rotate(-.8deg);transform-origin:left top}
/* The evidence card lands on top of the guess, overlapping it. Two states of
   one belief, not two objects in a list. */
.prov-stack .real{position:relative;margin-left:clamp(18px,3vw,44px);border:2px solid var(--teal);box-shadow:8px 8px 0 var(--teal)}
.prov-arrow{position:relative;z-index:2;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--ink-mute);margin:20px 0 10px}
.prov-stack header{display:flex;align-items:center;gap:10px}
.prov-stack time{font-family:var(--mono);font-size:10px;letter-spacing:.1em;margin-left:auto;color:var(--ink-mute)}
.prov-stack q{display:block;font-size:19px;font-weight:700;line-height:1.38;margin-top:18px}
.prov-stack footer{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.prov-stack footer b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink-mute)}
.prov-stack .real footer b{color:var(--teal)}
.prov-stack footer p{font-family:var(--mono);font-size:12.5px;line-height:1.8;margin-top:8px;color:var(--ink-soft)}
.prov-stack footer a{display:inline-flex;align-items:center;min-height:32px;margin-top:8px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--teal);text-decoration:underline;text-underline-offset:4px}

/* ── Our own assumptions — a register, not a card grid ──────────────────── */
.wall{padding-block:var(--pad-lg) var(--pad-sm)}
.wall-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(44px,6vw,80px);align-items:end;margin-top:clamp(36px,4vw,52px)}
.wall-head h2{font-size:clamp(2.3rem,4.3vw,3.8rem)}
.ledger{margin-top:clamp(48px,6vw,76px);border-top:2px solid var(--ink)}
.ledger-head,.ledger-row{display:grid;grid-template-columns:170px 1fr 300px;gap:clamp(20px,3vw,44px);align-items:baseline;padding:22px 0}
.ledger-head{padding:10px 0;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--ink-mute);border-bottom:1px solid var(--ink)}
.ledger-row{border-bottom:1px solid var(--rule)}
.ledger-row p{font-size:clamp(1.05rem,1.4vw,1.31rem);font-weight:700;line-height:1.4}
.ledger-row small{font-family:var(--mono);font-size:11.5px;line-height:1.7;letter-spacing:.04em;color:var(--ink-mute)}
.ledger-row .tag{justify-self:start}
.ledger-row.t-red p{color:var(--red-text)}
.ledger-row.t-red p span{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 .62em;background-size:100% 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ledger-row.t-red small{color:var(--red-text)}

/* ── Filter — unboxed checklist ─────────────────────────────────────────── */
.filter{padding-bottom:var(--pad-md)}
.filter-inner{border-top:1px solid var(--ink);padding-top:clamp(44px,5vw,64px)}
.filter h2{font-size:clamp(2.1rem,3.9vw,3.4rem);max-width:20em}
.filter-grid{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(32px,5vw,72px);margin-top:clamp(44px,5vw,66px)}
.filter-grid ul{list-style:none;padding:0;display:grid;gap:30px;align-content:start}
.filter-grid .no{padding-left:clamp(32px,5vw,72px);border-left:1px solid var(--rule)}
.filter-grid li{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;padding-top:20px;border-top:2px solid var(--ink)}
.filter-grid .no li{border-top-color:var(--red)}
.filter-grid li::before{content:"✓";grid-row:1/3;align-self:start;display:grid;place-items:center;width:28px;height:28px;background:var(--teal);color:#fff;font-weight:900;font-size:15px}
.filter-grid .no li::before{content:"×";background:var(--red-text)}
.filter-grid h3{font-size:clamp(1.15rem,1.5vw,1.38rem);font-weight:800;align-self:center;min-height:28px;display:flex;align-items:center}
.filter-grid p{grid-column:2;font-size:15px;line-height:1.62;color:var(--ink-soft);max-width:36em}

/* ── Price — a short, wide band ─────────────────────────────────────────── */
.price{background:var(--paper-ui);border-block:1px solid var(--ink);position:relative}
.price .shell{padding-block:var(--pad-sm);display:grid;grid-template-columns:1fr auto;gap:clamp(36px,5vw,64px);align-items:center}
.price h2{font-size:clamp(1.9rem,3.4vw,3rem)}
.price h2 em{font-style:normal;color:var(--teal)}
.price small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-mute);margin-top:20px}
.price-fig{text-align:right}
.price-fig b{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-mute)}
.price-fig strong{display:block;font-size:clamp(3rem,5.6vw,5rem);margin-top:10px}
.price-fig strong span{font-size:24px;font-stretch:100%}
.price-fig small{margin-top:8px}

/* ── Close ──────────────────────────────────────────────────────────────── */
.close{background:var(--teal);color:#fff;padding-block:var(--pad-lg)}
.close .shell{text-align:center;display:flex;flex-direction:column;align-items:center}
.close .eyebrow i{background:var(--yellow)}
.close h2{font-size:clamp(2.6rem,5.4vw,4.8rem);margin:40px 0 24px;max-width:14em}
.close > .shell > p{font-size:17px;line-height:1.68;letter-spacing:.004em;max-width:38em;color:#d3e6e3}
.close .waitlist,.close .done{margin-top:38px;width:100%;max-width:600px}
.close .field{width:100%;max-width:none}
.close .formnote{color:#b6d4d0;text-align:center}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule)}
.foot .shell{min-height:124px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:26px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-mute)}
.foot .wordmark{font-size:19px}
.foot a:not(.wordmark){color:var(--ink-mute);text-decoration:underline;text-underline-offset:4px}
.foot a:not(.wordmark):hover{color:var(--ink)}
.foot-legal{margin-left:auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* ── Standalone pages: /thanks, /privacy, /404, Worker error ────────────── */
.mini{display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:40px 0}
.mini-card{width:var(--shell);max-width:640px;background:var(--paper-ui);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:clamp(30px,5vw,48px)}
.mini-card .disp{font-size:clamp(2.1rem,5vw,3.2rem);margin:26px 0 20px}
.mini-card .slabel{display:block}
.mini-back,.mini-card .mini-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:26px;font-weight:800;font-size:15px;color:var(--ink);text-decoration:none;box-shadow:inset 0 -3px 0 var(--yellow)}
.mini-back:hover,.mini-card .mini-cta:hover{box-shadow:inset 0 -3px 0 var(--red)}

.doc{width:var(--shell);max-width:760px;margin-inline:auto;padding-block:clamp(48px,7vw,88px)}
.doc h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:24px 0 12px}
.doc h2{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:800;margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--rule)}
.doc p,.doc li{font-size:16px;line-height:1.68;color:var(--ink-soft);text-wrap:pretty}
.doc p + p{margin-top:14px}
.doc ul{margin:14px 0 0;padding-left:22px;display:grid;gap:10px}
.doc a{color:var(--teal);text-underline-offset:3px}
.doc .updated{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-mute);margin-top:16px}
.doc .callout{margin-top:22px;padding:16px 18px;background:var(--paper-alt);border-left:5px solid var(--yellow);font-size:15px;line-height:1.6}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:980px){
  .hero,.loop-head,.bench-grid,.prov-grid,.wall-head{grid-template-columns:1fr}
  .hero{gap:44px}
  .review{padding-top:0;max-width:600px}
  .aside-note{display:none}
  .steps{grid-template-columns:1fr 1fr;gap:40px}
  .pair{grid-template-columns:1fr;gap:34px}
  .pair .good{padding-left:0;padding-top:34px;border-left:0;border-top:1px solid var(--rule)}
  .margin-red{position:static;margin:44px 0 0 auto;text-align:right}
  .td{height:300vh}
  .td-body{grid-template-columns:1fr;gap:26px}
  .td-flags{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:22px;grid-template-columns:1fr;gap:12px}
  .ledger-head{display:none}
  .ledger-row{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .filter-grid{grid-template-columns:1fr;gap:30px}
  .filter-grid .no{padding-left:0;border-left:0}
  .price .shell{grid-template-columns:1fr}
  .price-fig{text-align:left}
}
@media(max-width:620px){
  :root{--shell:min(1180px,100% - 32px)}
  .nav .shell{height:70px;gap:16px}
  .nav-note{display:none}
  .field{flex-direction:column;align-items:stretch}
  .field button{min-height:54px}
  .steps{grid-template-columns:1fr;gap:34px}
  .score,.review-body{padding:22px 20px}
  .score-rows div{grid-template-columns:1fr 42px}
  .score-rows i{grid-column:1/-1;order:2}
  .score-rows b{order:1}
  .review-score{flex-direction:column;align-items:flex-start;gap:16px}
  .review-verdict{margin-left:0;text-align:left}
  .td{height:260vh}
  .td-frame{box-shadow:7px 7px 0 var(--ink)}
  .td-bad,.td-good{font-size:1.22rem}
  /* A pinned frame on a phone reserves the replacement's space for the whole
     first act, so keep that reservation small or stage 0 is mostly void. */
  .td-body{padding:20px;gap:20px}
  .td-flags{padding-top:18px;gap:10px}
  .td-flags li{gap:5px}
  .td-flags li span:last-child{font-size:12.5px;line-height:1.45}
  .legend li{font-size:11.5px;align-items:flex-start}
  .legend i{margin-top:3px}
  .td-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .td-cta{margin-left:0}
  .prov-stack .real{margin-left:0}
  .foot .shell{flex-direction:column;align-items:flex-start;gap:14px;padding-block:28px}
  .foot-legal{margin-left:0;gap:18px}
}
/* The hero headline needs to step down a rung on a phone, or it wraps to six
   lines. The desktop clamp floor is still a desktop floor. */
@media(max-width:430px){
  .hero h1{font-size:2.85rem}
  .close h2{font-size:2.3rem}
}

/* ── Preferences ────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .will-reveal .mark::after{transform:rotate(-1.1deg) scaleX(1)}
  .will-reveal .strike{background-size:100% 3px}
  /* The teardown stops pinning and simply states its finished result. */
  .td{height:auto;padding-block:var(--pad-md)}
  .td-pin{position:static;height:auto}
  .td-bad{opacity:.68}
}
@media(prefers-contrast:more){body::before{display:none}}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print{
  body::before,.ticker,.skip{display:none}
  .td{height:auto}.td-pin{position:static;height:auto}
  .loop,.close{background:#fff;color:#000}
  .loop-head p,.steps p,.close > .shell > p{color:#333}
  *{box-shadow:none!important}
}