/* ═══════════════════════════════════════════════════════════════════════════
   raisemargins.com v2, "the Ledger"
   A financial document, not a landing page. Rules and columns instead of cards,
   tabular figures, footnotes, one accent used sparingly.
   Constraints that are load bearing and must not be broken:
     no border-radius anywhere · no gradients, glass or shadows on chrome
     Hanken Grotesk only, self hosted · violet is the only accent, rose is loss only
     every :hover inside @media(hover:hover) · .btn:active stays BELOW the hover block
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
  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:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --paper:#FCFBFE; --white:#FFFFFF; --tint:#F7F5FD;
  --ink:#140E2E; --ink-2:#3A3360; --ink-3:#55507A; --faint:#6B658E;
  --rule:#E8E4F4; --rule-2:#D9D3EE;
  --violet:#4723DB; --violet-deep:#3414AE;
  --rose:#F5356E; --rose-deep:#C61E51;
  --dark:#16103A; --on-dark:#F4F2FF; --on-dark-2:#CFC8F0; --on-dark-3:#A79ED2;

  /* Type contrast is the point of this system: one very large thing per screen,
     everything else small and quiet. Display to body is roughly 6:1 at desktop. */
  --t-display:clamp(38px,5.9vw,78px);
  --t-h2:clamp(27px,3.6vw,44px);
  --t-h3:clamp(19px,1.7vw,22px);
  --t-figure:clamp(34px,5.4vw,64px);
  --t-lead:clamp(17px,1.35vw,19.5px);
  --t-body:16.5px;
  --t-small:14px;
  --t-micro:11px;

  --maxw:1180px;
  --pad:clamp(22px,5vw,64px);
  --gutter:clamp(0px,9vw,132px);   /* the ledger's left margin column */
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:var(--t-body);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums lining-nums;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:80}
.skip:focus{left:8px;top:8px}

/* ── layout primitives ──────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* A band is a horizontal register of the document. Padding varies with weight,
   deliberately: uniform section padding is what made the old page read flat. */
.band{padding-block:clamp(56px,7vw,100px)}
.band--tight{padding-block:clamp(40px,4.6vw,62px)}
.band--loose{padding-block:clamp(64px,8vw,116px)}
.band--ruled{border-top:1px solid var(--rule)}
.band--dark{background:var(--dark);color:var(--on-dark)}

/* The ledger row: a narrow marker column on the left, content on the right. */
.led{display:block}

/* ── type ───────────────────────────────────────────────────────────────── */
.display{
  font-size:var(--t-display);font-weight:800;line-height:.97;letter-spacing:-.032em;
  max-width:17ch;
}
.h2{font-size:var(--t-h2);font-weight:800;line-height:1.02;letter-spacing:-.028em;max-width:22ch}
.h3{font-size:var(--t-h3);font-weight:700;line-height:1.22;letter-spacing:-.015em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);max-width:46ch}
.band--dark .lead{color:var(--on-dark-2)}
.small{font-size:var(--t-small);line-height:1.55;color:var(--ink-3);max-width:54ch}
.micro{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.violet{color:var(--violet)}
.rose{color:var(--rose-deep)}
@media(max-width:900px){
  .display,.h2{text-wrap:balance}
}

/* ── the accent, used three times on a page ─────────────────────────────── */
.rule-violet{height:2px;background:var(--violet);width:56px}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.7em;justify-content:center;
  min-height:52px;padding:0 26px;font-size:var(--t-small);font-weight:700;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease);
}
.btn svg{width:13px;height:13px;flex:none}
.btn--primary{background:var(--violet);color:#fff}
.btn--ghost{border-color:var(--rule-2);color:var(--ink);background:var(--white)}
.band--dark .btn--ghost{border-color:#3A3460;color:var(--on-dark);background:transparent}
.btn--sm{min-height:42px;padding:0 16px}

/* a text link that behaves like a footnote reference in print */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-weight:700;
  font-size:var(--t-small);color:var(--ink);border-bottom:1px solid var(--violet);
  padding-bottom:2px;transition:color .18s var(--ease),border-color .18s var(--ease);
}
.tlink svg{width:12px;height:12px}
.band--dark .tlink{color:var(--on-dark)}

@media(hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--violet-deep)}
  .btn--ghost:hover{border-color:var(--ink);}
  .tlink:hover{color:var(--violet)}
  .fig:hover{background:var(--tint)}
}
/* stays below the hover block on purpose: same specificity, and moving it up
   silently kills press feedback while the pointer is over the button */
.btn:active{transform:scale(.97)}

/* ── masthead ───────────────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease);
  view-transition-name:mast;
}
.mast.scrolled{border-bottom-color:var(--rule)}
.mast__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:70px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;letter-spacing:-.02em;font-size:16px}
.brand svg{width:19px;height:19px}
.brand span{color:var(--ink)}
.brand i{font-style:normal;color:var(--faint);font-weight:500}
.mast nav{display:flex;gap:clamp(14px,2vw,26px);margin-left:auto}
.mast nav a{font-size:var(--t-small);text-decoration:none;color:var(--ink-3);font-weight:500;transition:color .18s var(--ease)}
.mast nav a[aria-current="page"]{color:var(--ink);font-weight:700}
.mast__cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-left:auto}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(hover:hover) and (pointer:fine){ .mast nav a:hover{color:var(--ink)} }
@media(max-width:860px){
  /* brand and one control. The hero carries the primary action above the fold and
     the dock carries it below, so a wrapping button in the masthead earns nothing. */
  .mast nav,.mast__cta{display:none}
  .burger{display:flex}
}

/* menu screen */
.menu{position:fixed;inset:0;z-index:70;background:var(--paper);display:none;padding:22px var(--pad)}
.menu.show{display:block;animation:fade .18s var(--ease) both}
.menu.closing{animation:fade .14s var(--ease) reverse both}
.menu__top{display:flex;align-items:center;height:48px}
.menu__x{margin-left:auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.menu ol{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule)}
.menu li{border-bottom:1px solid var(--rule)}
.menu li a{display:flex;align-items:baseline;gap:14px;padding:20px 0;text-decoration:none;font-size:23px;font-weight:700;letter-spacing:-.02em}
.menu li a em{font-style:normal;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;color:var(--faint)}
.menu .btn{width:100%;margin-top:28px}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(44px,5.5vw,84px) clamp(36px,4.4vw,64px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.hero .display{max-width:none;font-size:clamp(38px,5.2vw,68px)}
.hero .micro+.display{margin-top:22px}
.hero .lead{margin-top:26px}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:center}

/* the record block: the document's own header, set as a small table */
.record{border-top:1px solid var(--ink);padding-top:14px}
.record dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:baseline}
.record dt{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.record dd{margin:0;font-size:var(--t-small);color:var(--ink-2)}
.record dd b{font-weight:700;color:var(--ink)}
.record .tlink{margin-top:16px}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:40px;align-items:start}
  .record{max-width:520px}
}

/* ── the film ───────────────────────────────────────────────────────────── */
/* The film sits on the page itself, with no dark band behind it, so there is no
   light to dark edge to manage. A wide frame in the old band's --dark marks it as the thing to watch
   (founder, 2026-09-26). */
#film{background:none;padding-top:0}
#film .frame{border:clamp(12px,1.8vw,22px) solid var(--dark);aspect-ratio:auto}
/* the film keeps its own 16:9 inside the frame: the border must not crop the
   burned-in subtitles at the bottom edge */
#film .frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.frame{position:relative;aspect-ratio:16/9;background:#0D0A22;border:1px solid #2A2450;overflow:hidden}
.frame video{width:100%;height:100%;object-fit:cover}
.frame__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.frame__ph svg{width:clamp(46px,6vw,66px);height:auto}
.frame__ph p{font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3)}
.frame__grid{position:absolute;inset:0;
  background-image:linear-gradient(to right,#221C42 1px,transparent 1px),linear-gradient(to bottom,#221C42 1px,transparent 1px);
  background-size:72px 72px;opacity:.5}
.film__foot{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:baseline;margin-top:18px}

/* ── figures table, the heart of the ledger ─────────────────────────────── */
.figs{border-top:1px solid var(--ink);margin-top:34px}
.fig{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px 20px;
  padding:18px 10px 18px 0;border-bottom:1px solid var(--rule);
  transition:background .18s var(--ease);
}
.fig__label{font-size:var(--t-small);color:var(--ink-2);max-width:42ch}
.fig__val{font-size:clamp(23px,2.6vw,31px);font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.fig__val small{font-size:.5em;font-weight:700;letter-spacing:0;color:var(--faint);margin-left:.4em}
.fig--lead .fig__val{font-size:var(--t-figure)}
.figs__note{font-size:var(--t-micro);letter-spacing:.06em;color:var(--faint);padding-top:14px;text-transform:none}

/* pull quote, set as a document extract */
.extract{border-left:2px solid var(--violet);padding-left:clamp(18px,2.4vw,30px);max-width:44ch}
.extract p{font-size:clamp(19px,2vw,24px);line-height:1.34;letter-spacing:-.018em;font-weight:500}
.extract cite{display:block;margin-top:16px;font-style:normal;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ── the offer, one diagram plus three lines ────────────────────────────── */
.offer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:start;margin-top:44px}
.steps{border-top:1px solid #3A3460}
.step{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #3A3460}
.step__n{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;color:var(--on-dark-3);padding-top:.35em}
.step h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.015em}
.step p{font-size:var(--t-small);color:var(--on-dark-2);margin-top:6px;max-width:42ch}
.paybar{margin-top:8px}
.paybar figcaption{font-size:var(--t-micro);letter-spacing:.06em;color:var(--on-dark-3);margin-top:16px;max-width:38ch;line-height:1.7}

/* ── the lead ───────────────────────────────────────────────────────────── */
.who{margin-top:clamp(26px,3vw,38px);display:grid;grid-template-columns:132px 1fr;gap:clamp(22px,3vw,40px);align-items:start;max-width:720px}
.who img{width:132px;height:166px;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.06)}
@media(max-width:640px){
  .who{grid-template-columns:96px 1fr}
  .who img{width:96px;height:124px}
}

/* ── close ──────────────────────────────────────────────────────────────── */
.close__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center}
.terms{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:30px;padding-top:18px;border-top:1px solid var(--rule)}
.terms div{font-size:var(--t-small);color:var(--ink-3)}
.terms b{font-weight:700;color:var(--ink)}

/* ── footnotes ──────────────────────────────────────────────────────────── */
sup.fn{font-size:.62em;font-weight:700;color:var(--violet);vertical-align:super;line-height:0;margin-left:.15em}
.notes{border-top:1px solid var(--rule);padding-top:20px}
.notes ol{margin:0;padding:0;list-style:none;counter-reset:n}
.notes li{
  counter-increment:n;position:relative;padding-left:26px;margin-bottom:9px;
  font-size:12.5px;letter-spacing:.005em;line-height:1.75;color:var(--faint);text-transform:none;max-width:84ch;
}
.notes li::before{content:counter(n);position:absolute;left:0;top:0;font-weight:700;color:var(--ink-3)}
.notes a{color:var(--ink-3)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule);padding-block:44px 52px;view-transition-name:foot}
.foot__in{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:flex-start;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 26px;max-width:640px}
.foot nav a{font-size:var(--t-small);color:var(--ink-3);text-decoration:none;min-height:44px;display:flex;align-items:center}
.foot__c{font-size:var(--t-micro);color:var(--faint);letter-spacing:.06em;margin-top:30px;text-transform:none}
@media(hover:hover) and (pointer:fine){ .foot nav a:hover{color:var(--ink)} }

/* ── calculator ─────────────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,72px);align-items:start;margin-top:46px}
.panel{border-top:1px solid var(--ink);padding-top:26px}

.field{margin-bottom:26px}
.field>label,.field__top label{display:block;font-size:var(--t-small);font-weight:700;margin-bottom:9px}
.field__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.field__v{font-size:19px;font-weight:800;letter-spacing:-.02em}

select{
  width:100%;min-height:52px;padding:0 40px 0 14px;border:1px solid var(--rule-2);background:var(--white);
  font-size:var(--t-body);color:var(--ink);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355507A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:10px;
}
input[type=email],input[type=number],input[type=text]{
  width:100%;min-height:52px;padding:0 14px;border:1px solid var(--rule-2);background:var(--white);
  font-size:var(--t-body);color:var(--ink);font-family:var(--font)
}

/* presets read as tabs on a form, not as pills */
.presets{display:flex;border:1px solid var(--rule-2)}
.presets button{
  flex:1;min-height:52px;font-size:var(--t-small);font-weight:700;cursor:pointer;
  border-right:1px solid var(--rule-2);background:var(--white);color:var(--ink-3);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.presets button:last-child{border-right:0}
.presets button span{display:block;font-size:var(--t-micro);font-weight:500;letter-spacing:.06em;color:var(--faint);margin-top:2px}
.presets button[aria-pressed=true]{background:var(--ink);color:#fff}
.presets button[aria-pressed=true] span{color:var(--on-dark-3)}
.presets button span i{font-style:normal}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;display:block;margin:0
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:linear-gradient(to right,var(--violet) 0 var(--pct,50%),var(--rule-2) var(--pct,50%) 100%)}
input[type=range]::-moz-range-track{height:2px;background:var(--rule-2)}
input[type=range]::-moz-range-progress{height:2px;background:var(--violet)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:26px;background:var(--ink);margin-top:-12px;border:0}
input[type=range]::-moz-range-thumb{width:18px;height:26px;background:var(--ink);border:0;border-radius:0}
.scale{display:flex;justify-content:space-between;font-size:var(--t-micro);color:var(--faint);letter-spacing:.06em;margin-top:2px;text-transform:none}

details.more{border-top:1px solid var(--rule);padding-top:16px}
details.more summary{font-size:var(--t-small);font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";font-weight:700;color:var(--violet);width:12px}
details.more[open] summary::before{content:"–"}
.more__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:6px}

.warn{display:none;font-size:var(--t-small);color:var(--rose-deep);border-left:2px solid var(--rose);padding-left:12px;margin-top:6px}
.warn.show{display:block}

.result{border-top:1px solid var(--ink);padding-top:26px}
.result__hero{padding-bottom:22px;border-bottom:1px solid var(--rule)}
.result__hero .micro{display:block;margin-bottom:10px}
.result__big{font-size:clamp(42px,7.4vw,82px);font-weight:800;letter-spacing:-.04em;line-height:.95;color:var(--rose-deep)}
.result__sub{font-size:var(--t-small);color:var(--ink-3);margin-top:12px}
.result .figs{margin-top:0;border-top:0}
.recap{font-size:var(--t-small);color:var(--ink-2);margin:22px 0 0;max-width:46ch}
.model-line{font-size:var(--t-small);color:var(--ink-2);border-left:2px solid var(--violet);padding-left:14px;margin-top:24px;max-width:48ch}
.calc__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

@media(max-width:900px){
  .calc,.offer__grid{grid-template-columns:1fr}
  .more__grid{grid-template-columns:1fr}
}

/* ── the gate ───────────────────────────────────────────────────────────── */
.gate{position:fixed;inset:0;z-index:90;background:rgba(20,14,46,.5);display:none;align-items:center;justify-content:center;padding:20px}
.gate.show{display:flex;animation:fade .2s var(--ease) both}
.gate.closing{animation:fade .12s var(--ease) reverse both}
.gate__panel{background:var(--paper);width:100%;max-width:460px;padding:clamp(24px,4vw,36px);max-height:92vh;overflow:auto}
.gate__top{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.gate__x{margin-left:auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;flex:none}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:var(--t-micro);color:var(--faint);line-height:1.7;text-transform:none;letter-spacing:.01em}
.consent input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--violet)}
.err{font-size:var(--t-small);color:var(--rose-deep);margin-top:10px;min-height:1.2em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── reveal ─────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.instant{transition:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ── phone: one idea per screen, never more than two columns ────────────── */
@media(max-width:640px){
  :root{--t-body:16px}
  .band{padding-block:48px}
  .band--loose{padding-block:54px}
  .band--tight{padding-block:34px}
  .display{max-width:none}
  .h2{max-width:none}
  .hero{padding-block:36px 34px}
  .hero__acts .btn{width:100%}
  .fig{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .fig__val{font-size:30px}
  .fig--lead .fig__val{font-size:40px}
  .presets{flex-direction:column}
  .presets button{border-right:0;border-bottom:1px solid var(--rule-2)}
  .presets button:last-child{border-bottom:0}
  .close__acts .btn{width:100%}
  .terms{flex-direction:column;gap:8px}
  .film__foot{flex-direction:column;gap:12px}
}

/* one sticky action on a phone, and only after the film has passed */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--rule);
  transform:translateY(102%);transition:transform .26s var(--ease);
}
.dock .btn{width:100%}
.dock.show{transform:none}
@media(max-width:860px){ .dock{display:block} }

@view-transition{navigation:auto}

/* ── questions and answers ──────────────────────────────────────────────── */
.qalist{border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:clamp(18px,1.7vw,21px);font-weight:700;letter-spacing:-.018em;line-height:1.28;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;width:12px;height:12px;flex:none;align-self:center}
.qa summary i::before,.qa summary i::after{
  content:"";position:absolute;background:var(--violet);
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.qa summary i::before{left:0;top:5px;width:12px;height:2px}
.qa summary i::after{left:5px;top:0;width:2px;height:12px}
.qa[open] summary i::after{opacity:0;transform:scaleY(0)}
.qa p{font-size:var(--t-small);color:var(--ink-2);max-width:58ch;padding-bottom:26px;line-height:1.7}

/* the open and close animation, native, with no JS */
:root{interpolate-size:allow-keywords}
.qa::details-content{block-size:0;overflow:hidden;
  transition:block-size .26s var(--ease),content-visibility .26s var(--ease) allow-discrete}
.qa[open]::details-content{block-size:auto}
@media(prefers-reduced-motion:reduce){ .qa::details-content{transition:none} }

/* ── legal pages, the document set as running prose ─────────────────────── */
.prose{max-width:74ch}
.prose h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin-bottom:10px}
.prose h2{font-size:clamp(19px,1.8vw,23px);font-weight:700;letter-spacing:-.015em;margin:46px 0 12px;
  padding-top:18px;border-top:1px solid var(--rule)}
.prose h3{font-size:17px;font-weight:700;margin:26px 0 8px}
.prose p{margin-bottom:14px;color:var(--ink-2);font-size:15.5px;line-height:1.72}
.prose .lead{font-size:var(--t-lead);color:var(--ink-2);max-width:60ch;margin-bottom:26px}
.prose .updated{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:28px}
.prose .note{font-size:13.5px;color:var(--faint);line-height:1.7}
.prose ul,.prose ol{margin:0 0 16px;padding-left:20px;color:var(--ink-2);font-size:15.5px;line-height:1.72}
.prose li{margin-bottom:7px}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--violet);padding-bottom:1px}
.prose strong{font-weight:700;color:var(--ink)}
.prose .card{border:1px solid var(--rule-2);background:var(--white);padding:20px;margin:18px 0}
.prose .tscroll{overflow-x:auto;margin:18px 0;border-top:1px solid var(--ink)}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.prose th{text-align:left;font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:12px 14px 12px 0;border-bottom:1px solid var(--rule)}
.prose td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
@media(hover:hover) and (pointer:fine){ .prose a:hover{color:var(--violet)} }
.dock[hidden]{display:none}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf{min-height:64vh;display:flex;flex-direction:column;justify-content:center}
.nf .code{font-size:clamp(64px,12vw,140px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--violet)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE VISUAL SYSTEM
   Diagrams, not decoration. Every one explains a mechanism the text would
   otherwise have to spell out, which is what lets the copy stay short.
   Motion rules, held to across all of them:
     purpose is explanation, seen once, so a longer build is allowed
     transform and opacity only, never width or height
     strong ease-out, entrances only, nothing above the fold on load
     stagger 12 to 70ms depending on element count, and it always finishes
     reduced motion keeps the fade and drops every transform and delay
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --wait:#F9DAE3;                  /* rose tint. Rose is the brand's colour for waiting */
  --wait-line:#EDB2C4;
}

.viz{margin:clamp(36px,4.5vw,56px) 0 0}
.viz__cap{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px}
.viz__ax{display:flex;justify-content:space-between;gap:16px;font-size:var(--t-small);
  color:var(--ink-3);margin-top:10px}
.viz__ax span:last-child{font-weight:700;color:var(--ink)}
.viz figcaption{font-size:12.5px;line-height:1.7;color:var(--faint);margin-top:20px;max-width:70ch}
.viz__after{margin-top:28px}

/* ── the strips: a month of days, then one of those days ────────────────── */
.strip{width:100%;height:clamp(30px,3.6vw,38px);display:block}
.strip--hours{height:clamp(34px,4.2vw,44px)}
.strip .c{
  transform:scaleY(.18);transform-box:fill-box;transform-origin:50% 100%;opacity:0;
  transition:transform .42s var(--ease-out),opacity .32s linear;
  transition-delay:calc(var(--i) * 12ms);
}
.strip--hours .c{transition-delay:calc(560ms + var(--i) * 16ms)}
.viz.in .strip .c{transform:none;opacity:1}
.c--wait{fill:var(--wait);stroke:var(--wait-line);stroke-width:1}
.c--work{fill:var(--violet)}

/* the zoom, which is what makes the second strip mean "inside the first cell" */
.zoom{width:100%;height:clamp(26px,3.4vw,44px);margin-top:2px}
.zoom .z{stroke:var(--wait-line);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.zoom .zcone{fill:var(--wait);opacity:.55;stroke:none}
.zoom .z,.zoom .zcone{
  transform:scaleY(0);transform-box:fill-box;transform-origin:50% 0;
  transition:transform .5s var(--ease-out);transition-delay:440ms}
.viz.in .zoom .z,.viz.in .zoom .zcone{transform:none}

.viz__keys,.paybar__keys{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:14px}
.key{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-small);color:var(--ink-3)}
.key::before{content:"";width:11px;height:11px;flex:none}
.key--work::before{background:var(--violet)}
.key--wait::before{background:var(--wait);outline:1px solid var(--wait-line);outline-offset:-1px}
.key--frame::before{background:transparent;outline:1px solid var(--rule-2);outline-offset:-1px}
.key--plain::before{background:var(--ink)}
.band--dark .key{color:var(--on-dark-2)}

/* ── the equation: three figures you already have, multiplied ───────────── */
.eq{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.eq__cell{
  flex:1 1 160px;min-width:0;border:1px solid var(--rule-2);background:var(--white);
  padding:16px 16px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  opacity:0;transform:translateY(12px);
  transition:opacity .38s linear,transform .46s var(--ease-out);
  transition-delay:calc(var(--i) * 70ms);
}
.eq__op{
  align-self:center;font-size:19px;font-weight:700;color:var(--faint);
  opacity:0;transition:opacity .3s linear;transition-delay:calc(var(--i) * 70ms);
}
.viz.in .eq__cell{opacity:1;transform:none}
.viz.in .eq__op{opacity:1}
.eq__t{font-size:var(--t-small);color:var(--ink-3);line-height:1.4}
.eq__b{display:block;height:2px;background:var(--ink);opacity:.18}
.eq__cell--out{border-color:var(--ink)}
.eq__cell--out .eq__t{color:var(--ink);font-weight:700}
.eq__cell--out .eq__b{height:auto;background:none;opacity:1;font-size:clamp(26px,3.2vw,38px);
  font-weight:800;letter-spacing:-.03em;color:var(--violet);line-height:1}

/* ── the three steps, each with a drawn mark ────────────────────────────── */
.steps2{list-style:none;margin:clamp(34px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--ink)}
.step2{display:grid;grid-template-columns:64px 1fr;gap:clamp(18px,2.4vw,34px);
  padding:26px 0;border-bottom:1px solid var(--rule);align-items:start}
.step2__p{font-size:var(--t-small);color:var(--ink-2);margin-top:7px;max-width:56ch;line-height:1.7}
.mark{width:58px;height:58px}
.mark .ink{stroke:var(--ink);stroke-width:2.2;fill:none;opacity:.5}
.mark .acc{stroke:var(--violet);stroke-width:2.4;fill:none;
  transition:transform .55s var(--ease-out);transition-delay:120ms}
.mark .flag{transform:translateX(-10px)}
.mark .box{transform:translateX(-14px)}
.mark .coin{transform:scale(.55);transform-box:fill-box;transform-origin:center}
.step2.in .mark .flag,.step2.in .mark .box{transform:none}
.step2.in .mark .coin{transform:none}

/* ── the paybar ─────────────────────────────────────────────────────────── */
.paybar{margin-top:clamp(34px,4vw,48px)}
.paybar svg{width:100%;max-width:520px;height:auto}
.pb-frame{fill:none;stroke:var(--rule-2)}
.band--dark .pb-frame{stroke:#4A4470}
.pb-fill{fill:var(--violet);transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%;
  transition:transform .9s var(--ease-out);transition-delay:220ms}
.pb-rest{fill:none;stroke:var(--violet);stroke-dasharray:3 4;opacity:0;
  transition:opacity .4s linear;transition-delay:900ms}
.pb-axis{stroke:var(--rule-2)}
.band--dark .pb-axis{stroke:#4A4470}
.pb-arrow{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:0;transform:translateX(-14px);
  transition:opacity .4s linear,transform .5s var(--ease-out);transition-delay:1080ms}
.band--dark .pb-arrow{stroke:var(--on-dark-2)}
.paybar.in .pb-fill{transform:none}
.paybar.in .pb-rest,.paybar.in .pb-arrow{opacity:1}
.paybar.in .pb-arrow{transform:none}
.paybar figcaption{font-size:12.5px;line-height:1.7;color:var(--faint);margin-top:18px;max-width:64ch}

/* ── hero claims, the three bullets ─────────────────────────────────────── */
.claims{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.claims li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;
  border-bottom:1px solid var(--rule);font-size:var(--t-small);color:var(--ink-2);line-height:1.5}
.claims__m{width:9px;height:9px;flex:none;background:var(--violet);margin-top:.42em}

/* ── proof, one line and a door ─────────────────────────────────────────── */
.proofline{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:center;justify-content:space-between}
.proofline .lead{max-width:52ch;margin:0}

.lead--tight{margin-top:18px}
.micro--dim{color:var(--on-dark-3)}
.h2+.lead--tight{max-width:44ch}

@media(max-width:640px){
  .eq{gap:8px}
  .eq__cell{flex:1 1 calc(50% - 8px);padding:13px 13px 12px;gap:14px}
  .eq__op{flex:0 0 100%;text-align:center;align-self:auto}
  .step2{grid-template-columns:42px 1fr;gap:16px}
  .mark{width:42px;height:42px}
  .proofline{gap:20px}
  .proofline .btn{width:100%}
  .claims li{font-size:14.5px}
}

@media(prefers-reduced-motion:reduce){
  .strip .c,.zoom .z,.eq__cell,.eq__op,.mark .acc,.pb-fill,.pb-rest,.pb-arrow{
    transition-delay:0ms!important;transition-duration:.2s!important}
  .strip .c,.eq__cell{transform:none!important}
  .zoom .z,.pb-fill{transform:none!important}
  .mark .flag,.mark .box{transform:none!important}
  .mark .coin{transform:none!important}
  .pb-arrow{transform:none!important}
}

/* ── bar chart: recoverable share, process by process ───────────────────── */
.bars{display:block}
.bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,2.1fr) auto;
  align-items:center;gap:8px 22px;padding:15px 0;border-bottom:1px solid var(--rule)}
.bars .bar:first-child{border-top:1px solid var(--ink)}
.bar__l{font-size:var(--t-small);color:var(--ink-2)}
.bar__t{height:18px;background:var(--wait);outline:1px solid var(--wait-line);outline-offset:-1px}
.bar__f{display:block;height:100%;width:calc(var(--pct) * 1%);background:var(--violet);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease-out);transition-delay:calc(var(--i) * 80ms)}
.viz.in .bar__f{transform:none}
.bar__v{font-size:clamp(20px,2.1vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1;
  min-width:3.2ch;text-align:right}
.bar__v small{font-size:.5em;font-weight:700;color:var(--faint);margin-left:.25em}

/* a wide ledger row: a small label column, then the payload */
.fig--wide{grid-template-columns:150px 1fr;align-items:start;gap:8px 22px}

/* ── stacked share bar ──────────────────────────────────────────────────── */
.share__t{display:flex;height:clamp(34px,4.2vw,44px);outline:1px solid var(--rule-2);outline-offset:-1px}
.share__seg{display:block;width:calc(var(--pct) * 1%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .75s var(--ease-out);transition-delay:calc(var(--i) * 140ms)}
.viz.in .share__seg{transform:none}
.share__seg--work{background:var(--violet)}
.share__seg--rest{background:var(--wait)}
.share__seg--plain{background:var(--tint);box-shadow:inset 1px 0 0 var(--rule-2)}
.share__seg--hair{background:var(--ink);min-width:2px}
.key--rest::before{background:var(--wait);outline:1px solid var(--wait-line);outline-offset:-1px}
.key--tint::before{background:var(--tint);outline:1px solid var(--rule-2);outline-offset:-1px}
.key--hair::before{background:var(--ink);width:2px;margin-inline:4px 5px}
.viz+.viz{margin-top:clamp(30px,3.6vw,44px)}

/* marks used on the builds and the data rows */
.mark .pull,.mark .check,.mark .slash{transform:translateX(-8px)}
.mark .cell,.mark .item,.mark .sheet{transform:translate(-8px,4px)}
.step2.in .mark .pull,.step2.in .mark .check,.step2.in .mark .slash,
.step2.in .mark .cell,.step2.in .mark .item,.step2.in .mark .sheet{transform:none}
.mark .cell,.mark .item,.mark .sheet{fill:none}

/* the paybar, reused inside an answer. A callback, in a smaller role. */
.paybar--inline{margin:18px 0 26px;max-width:420px}
.paybar--inline svg{max-width:360px}

@media(max-width:640px){
  .bar{grid-template-columns:1fr auto;gap:6px 14px}
  .bar__l{grid-column:1 / -1}
  .bar__t{grid-column:1}
  .bar__v{grid-column:2}
  .fig--wide{grid-template-columns:1fr;gap:6px}
  .flagp{font-size:10px}
  .flagp b{font-size:12.5px}
}

@media(prefers-reduced-motion:reduce){
  .bar__f,.share__seg,.ruler .axis,.flagp,.ruler .tk{
    transition-delay:0ms!important;transition-duration:.2s!important;transform:none!important}
}

/* ── v3: the guide, the stakes, and the numbered steps on a dark band ───── */
.trust{list-style:none;margin:clamp(30px,3.6vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);
  border-top:1px solid var(--rule)}
.trust li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--rule);font-size:var(--t-small);color:var(--ink-2);line-height:1.5}
.trust__m{width:7px;height:7px;flex:none;background:var(--violet);margin-top:.5em}

.stake{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between}
.stake .h3{max-width:34ch;font-weight:700}

/* the steps, numbered, on the dark band */
.steps2--dark{border-top-color:#3A3460}
.steps2--dark .step2{grid-template-columns:34px 1fr;border-bottom-color:#3A3460}
.step2__n{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;color:var(--on-dark-3);padding-top:.45em}
.steps2--dark .step2__p{color:var(--on-dark-2)}

@media(max-width:640px){
  .trust{grid-template-columns:1fr}
  .stake{gap:16px}
  .stake .h3{max-width:none}
}

/* ── v3 calculator: one number, and a form that does not look like work ─── */
.panel__hint{font-size:var(--t-small);color:var(--faint);margin:0 0 26px;max-width:38ch}
.result__hero{padding-bottom:26px}
.result .figs{border-top:1px solid var(--rule)}
.result .fig:last-child{border-bottom:0}
.calc__cta{margin-top:30px}
.calc__cta .btn{flex:1 1 auto;min-width:200px}
.model-line{margin-top:20px}
@media(max-width:640px){ .calc__cta .btn{width:100%} }
/* ink on an ink band is invisible: the "yours" key flips on dark */
.band--dark .key--plain::before{background:var(--on-dark-2)}

/* ── the bottleneck, drawn without a single borrowed figure ─────────────── */
.flow{display:grid;gap:clamp(26px,3.4vw,42px)}
.flow__t{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px}
.flow__row--after .flow__t{color:var(--violet)}
.flow__lane{position:relative;height:clamp(78px,9vw,104px)}
.flow__svg{position:absolute;inset:0;width:100%;height:100%}
/* the cells are CSS boxes, not SVG: they stay square at every width, and they sit
   inside the zones where the pipe holds its full height, so nothing can escape it */
.fgrid{position:absolute;top:50%;transform:translateY(-50%);display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(3px,.42vw,5px);width:clamp(84px,9.5%,116px)}
.fgrid--in{left:2.5%}
.fgrid--out{right:2.5%}
.fgrid--few{grid-template-columns:repeat(3,1fr);width:clamp(62px,7.1%,87px)}
.fgrid i{display:block;aspect-ratio:1;background:var(--ink);opacity:0;transform:translateX(-8px);
  transition:opacity .34s linear,transform .44s var(--ease-out);
  transition-delay:calc(240ms + var(--i) * 26ms)}
.viz.in .fgrid i{opacity:.5;transform:none}
.fgrid--out i{background:var(--violet)}
.viz.in .fgrid--out i{opacity:1}
.fp{fill:var(--wait);stroke:var(--wait-line);stroke-width:1;vector-effect:non-scaling-stroke;
  transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%;
  transition:transform .8s var(--ease-out)}
.viz.in .fp{transform:none}
.fthroat{fill:none;stroke:var(--violet);stroke-width:2;vector-effect:non-scaling-stroke;
  opacity:0;transition:opacity .4s linear;transition-delay:560ms}
.viz.in .fthroat{opacity:1}
.flow__n{font-size:var(--t-small);color:var(--ink-2);margin-top:12px;max-width:62ch;line-height:1.6}
@media(max-width:640px){
  .flow__lane{height:70px}
  .flow__n{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  .fp,.fthroat,.fgrid i{transition-delay:0ms!important;transition-duration:.2s!important;transform:none!important}
  .fgrid{transform:translateY(-50%)!important}
}
/* rose means waiting, so it belongs only in the lane where work is waiting */
.flow__row--after .fp{fill:var(--tint);stroke:var(--rule-2)}
.fthroat--wide{fill:rgba(71,35,219,.09)}

/* ── the build price, filling with savings. The animation is the explanation, ──
   because the paragraph that used to explain it has been deleted. */
.pay__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:12px;max-width:420px}
.pay__t{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-3)}
.pay__bar{position:relative;height:clamp(44px,5vw,56px);border:2px solid var(--on-dark-3);
  display:flex;align-items:stretch;padding:5px;gap:5px;max-width:420px}
.pay__fill{display:flex;gap:5px;flex:1}
.sv{flex:1;background:var(--violet);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s var(--ease-out);transition-delay:calc(260ms + var(--i) * 150ms)}
.paybar.in .sv{transform:none}
.pay__cap{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);opacity:0;transition:opacity .35s linear;transition-delay:1560ms}
.paybar.in .pay__cap{opacity:1}
.pay__n{font-size:var(--t-small);color:var(--on-dark-2);margin-top:14px;max-width:44ch;line-height:1.6}
.pay__after{display:flex;align-items:flex-start;gap:14px;margin-top:6px;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s linear,transform .5s var(--ease-out);transition-delay:1700ms}
.paybar.in .pay__after{opacity:1;transform:none}
.pay__arrow{flex:none;width:2px;height:34px;background:var(--on-dark-3);margin-top:16px}
.pay__n--after{color:var(--on-dark);font-weight:700;margin-top:14px}
@media(prefers-reduced-motion:reduce){
  .sv,.pay__cap,.pay__after{transition-delay:0ms!important;transition-duration:.2s!important;transform:none!important}
}

/* ── one rate leads, the rest is the scale it sits on ───────────────────── */
.hero-rate{display:flex;align-items:baseline;gap:clamp(18px,2.6vw,36px);flex-wrap:wrap;
  padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--ink)}
.hero-rate__n{display:flex;align-items:baseline;line-height:.82;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s linear,transform .6s var(--ease-out)}
.viz.in .hero-rate__n{opacity:1;transform:none}
.hero-rate__fig{font-size:clamp(76px,13vw,168px);font-weight:800;letter-spacing:-.05em;color:var(--violet)}
.hero-rate__pc{font-size:clamp(30px,4.4vw,60px);font-weight:800;letter-spacing:-.03em;color:var(--violet)}
.hero-rate__l{flex:1 1 260px;font-size:clamp(17px,1.8vw,22px);line-height:1.34;font-weight:500;
  letter-spacing:-.015em;max-width:26ch;
  opacity:0;transition:opacity .4s linear;transition-delay:220ms}
.viz.in .hero-rate__l{opacity:1}
.bars .bar:first-of-type{border-top:0}

/* ── the short version, above the long one ──────────────────────────────── */
.shorts{list-style:none;margin:clamp(34px,4vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);
  border-top:1px solid var(--ink)}
.shorts li{padding:20px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:7px}
.shorts__k{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.shorts__v{font-size:var(--t-small);color:var(--ink-2);line-height:1.55}
.display--wide{max-width:none}
@media(max-width:760px){ .shorts{grid-template-columns:1fr} }

/* ── the hero visual: the headline drawn ────────────────────────────────── */
.rev{margin:0}
.rev__t,.rev__n{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.rev__n{margin-top:16px;text-transform:none;letter-spacing:.01em;font-weight:400;font-size:var(--t-small);
  color:var(--ink-3);max-width:34ch;line-height:1.55}
.rev__bar{display:flex;height:clamp(96px,11vw,132px);margin-top:12px;border:1px solid var(--ink);overflow:hidden}
.rev__cost,.rev__marg{display:flex;align-items:flex-end;padding:12px;overflow:hidden;
  transition:flex-grow 1.5s var(--ease-in-out)}
.rev__cost{flex:60 1 0;background:var(--wait);border-right:1px solid var(--ink)}
.rev__marg{flex:40 1 0;background:var(--violet)}
.rev__cost b,.rev__marg b{font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.rev__cost b{color:var(--rose-deep)}
.rev__marg b{color:#fff}
.rev.in .rev__cost{flex-grow:38}
.rev.in .rev__marg{flex-grow:62}
.rev__axis{display:flex;justify-content:space-between;margin-top:9px}
.rev__axis span{width:1px;height:7px;background:var(--rule-2)}
@media(prefers-reduced-motion:reduce){
  .rev__cost,.rev__marg{transition:none}
  .rev__cost{flex-grow:38}.rev__marg{flex-grow:62}
}
@media(max-width:900px){ .rev{margin-top:8px} }
.who__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.who__body .h3{margin-bottom:2px}
.who__body .small{max-width:46ch}
.who__body .btn{margin-top:4px}

/* ── the client quote, treated as the asset it is ───────────────────────── */
.quote{margin:0;text-align:center;max-width:44ch;margin-inline:auto;
  border-top:1px solid #3A3460;border-bottom:1px solid #3A3460;padding:30px 0}
.quote__t{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin-bottom:20px}
.quote blockquote{margin:0;font-size:clamp(19px,2.1vw,25px);line-height:1.36;letter-spacing:-.018em;
  font-weight:500;color:var(--on-dark)}
.quote cite{display:block;margin-top:18px;font-style:normal;font-size:var(--t-micro);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PAYBACK CHART, third attempt.
   The previous two encoded the meaning in colour, so the reader had to learn a key
   before the picture said anything. This one puts the quantity in the geometry: the
   columns after payback are visibly SHORTER, which is the fact both earlier versions
   hid by keeping every column the same height. The dashed line is what the work costs
   today and never moves, so the drop at the end is measured against it by eye.
   ═══════════════════════════════════════════════════════════════════════════ */
.pay3{margin:0}
.pay3__cap{font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-3);margin-bottom:7px}
.pay3__plot{position:relative;display:grid;grid-template-columns:repeat(6,1fr);
  grid-template-rows:34% 66%;gap:0 clamp(5px,.8vw,9px);height:clamp(140px,16vw,196px)}
.pay3__ref{position:absolute;left:0;right:0;top:0;height:0;
  border-top:1px dashed var(--on-dark-3);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .34s var(--ease-out)}
.pay3.in .pay3__ref{transform:none}

.base,.cap{display:block;transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .3s var(--ease-out)}
.base{grid-row:2;background:#2E2852;transition-delay:calc(340ms + var(--i) * 70ms)}
.cap{grid-row:1;transition-delay:calc(560ms + var(--i) * 70ms)}
.pay3.in .base,.pay3.in .cap{transform:none}
.cap--waste{background:var(--rose)}
.cap--pay{background:var(--violet)}
.cap--gone{background:none}          /* the whole point: nothing is there any more */

/* the space the last two columns no longer fill */
.pay3__keep{grid-row:1;grid-column:5 / 7;align-self:center;text-align:center;
  opacity:0;transform:translateY(-6px);
  transition:opacity .35s linear,transform .45s var(--ease-out);transition-delay:1020ms}
.pay3.in .pay3__keep{opacity:1;transform:none}
.pay3__keep b{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark);line-height:1.3}
.pay3__keep::after{content:"";display:block;width:1px;height:16px;margin:6px auto 0;
  background:var(--on-dark-2)}

.pay3__axis{display:grid;grid-template-columns:repeat(6,1fr);gap:0 clamp(5px,.8vw,9px);margin-top:9px;
  opacity:0;transition:opacity .35s linear;transition-delay:900ms}
.pay3.in .pay3__axis{opacity:1}
.ax{font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.3;padding-top:8px;border-top:1px solid #3A3460;color:var(--on-dark-2)}
.ax--a{grid-column:1/2;color:var(--rose)}
.ax--b{grid-column:2/5;color:var(--violet)}
.ax--c{grid-column:5/7}
.pay3--sm{max-width:420px}
.pay3--sm .pay3__plot{height:120px}

@media(max-width:640px){
  .pay3__plot{height:120px}
  .ax{font-size:9.5px;letter-spacing:.03em}
  .pay3__keep b{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){
  .pay3__ref,.base,.cap,.pay3__keep,.pay3__axis{
    transition-delay:0ms!important;transition-duration:.2s!important;transform:none!important;opacity:1}
}
/* direction stated, not implied */
.arw{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  margin-left:5px;vertical-align:middle}
.arw--dn{border-top:6px solid var(--rose-deep)}
.arw--up{border-bottom:6px solid #fff}

/* the audit as an object, because a line of text about it is not proof */
.proofline__doc{width:clamp(108px,12vw,150px);height:auto;border:1px solid var(--rule-2);flex:none}
.proofline{align-items:center;gap:clamp(22px,3vw,44px)}
.proofline .lead{margin-bottom:20px}
@media(max-width:640px){ .proofline{flex-direction:column;align-items:flex-start} }

/* ── two bars, one scale. No key to learn: one is a nub, one is a month. ── */
.gap2__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,2.4fr) auto;
  align-items:center;gap:8px 22px;padding:20px 0;border-bottom:1px solid var(--rule)}
.gap2 .gap2__row:first-child{border-top:1px solid var(--ink)}
.gap2__l{font-size:var(--t-small);color:var(--ink-2)}
.gap2__track{height:20px;background:var(--tint);outline:1px solid var(--rule-2);outline-offset:-1px}
.gap2__bar{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .85s var(--ease-out)}
.viz.in .gap2__bar{transform:none}
.gap2__bar--work{width:0.8%;min-width:5px;background:var(--violet);transition-delay:160ms}
.gap2__bar--wait{width:100%;background:var(--wait);outline:1px solid var(--wait-line);outline-offset:-1px;
  transition-delay:420ms}
.gap2__v{font-size:clamp(19px,2.1vw,25px);font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.gap2__v--loss{color:var(--rose-deep)}
.gap2 figcaption{margin-top:16px}

/* the client review drives sales, so it takes the width and the left margin */
.quote{text-align:left;max-width:none;margin-inline:0;padding:32px 0}
.quote blockquote{font-size:clamp(22px,3vw,38px);line-height:1.22;max-width:22ch}
.quote cite{margin-top:22px}
.fineprint{font-size:12.5px;line-height:1.7;color:var(--faint);max-width:70ch}

@media(max-width:640px){
  .gap2__row{grid-template-columns:1fr auto;gap:6px 14px}
  .gap2__l{grid-column:1/-1}
  .gap2__track{grid-column:1}
  .gap2__v{grid-column:2}
}

/* the columns are money, so the plot gets an axis to say so */
.pay3__plot{padding-left:16px}
.pay3__y{position:absolute;left:0;top:0;bottom:0;width:1px;background:#3A3460}
.pay3__y b{position:absolute;top:-3px;left:-11px;font-size:11px;font-weight:700;color:var(--on-dark-3);line-height:1}

/* ── the audit, on a screen. Flat primitives, no render, no perspective. ── */
.mon{flex:none;width:clamp(210px,24vw,320px);display:flex;flex-direction:column;align-items:center}
.mon__screen{width:100%;aspect-ratio:16/10;border:2px solid var(--ink);background:#fff;
  padding:9px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mon__screen img{width:auto;height:100%;object-fit:contain;border:1px solid var(--rule)}
.mon__neck{width:12px;height:16px;background:var(--ink)}
.mon__foot{width:42%;height:3px;background:var(--ink)}
@media(max-width:640px){ .mon{width:min(100%,260px)} }

/* ── the ninety days, rebuilt. The old version overlaid the labels on the SVG
      with a negative margin, which collided at almost every width. ───────── */
.tl__plot{position:relative;height:clamp(76px,8vw,94px);margin-top:clamp(28px,3.4vw,42px)}
.tl__axis{position:absolute;left:0;right:0;bottom:20px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease-out)}
.viz.in .tl__axis{transform:none}
.tl__ticks{position:absolute;left:0;right:0;bottom:12px;height:8px;display:flex;justify-content:space-between;
  opacity:0;transition:opacity .3s linear;transition-delay:520ms}
.viz.in .tl__ticks{opacity:1}
.tl__ticks i{display:block;width:1px;height:8px;background:var(--rule-2)}
.tl__flag{position:absolute;bottom:22px;left:var(--x);height:calc(100% - 22px);
  padding-left:10px;border-left:2px solid var(--violet);
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;white-space:nowrap;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s linear,transform .5s var(--ease-out);transition-delay:700ms}
.tl__flag--end{left:auto;right:0;padding-left:0;padding-right:10px;border-left:0;
  border-right:2px solid var(--violet);align-items:flex-end;text-align:right;transition-delay:840ms}
.viz.in .tl__flag{opacity:1;transform:none}
.tl__flag b{font-size:var(--t-small);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.1}
.tl__flag em{font-style:normal;font-size:var(--t-micro);letter-spacing:.06em;color:var(--faint);line-height:1.2}
.tl .viz__ax{margin-top:10px}
@media(max-width:640px){
  .tl__flag b{font-size:12.5px}
  .tl__flag em{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){
  .tl__axis,.tl__ticks,.tl__flag{transition-delay:0ms!important;transition-duration:.2s!important;
    transform:none!important;opacity:1}
}

/* ══ phone pass, 2026-09-26. Most visitors arrive on a phone, so this block is the
   primary layout, not an afterthought. Apple's rules applied: respond on press,
   44px hit areas, the thing that matters first, sheets that rise from where the
   thumb is and leave the way they came, translucent chrome, no hard jumps. ═══════ */

/* no 300ms double-tap wait, no grey flash; press feedback is .btn:active above */
a,button,summary,label,select,input{touch-action:manipulation}
html{-webkit-tap-highlight-color:transparent}

/* 44px hit areas without moving a pixel of layout: the link keeps its size, an
   invisible pad around it takes the tap */
.tlink,.foot nav a,.brand{position:relative}
.tlink::after,.foot nav a::after,.brand::after{content:"";position:absolute;inset:-12px -8px}

/* sliders: a thumb a fingertip can find */
@media(pointer:coarse){
  input[type=range]::-webkit-slider-thumb{width:24px;height:34px;margin-top:-16px}
  input[type=range]::-moz-range-thumb{width:24px;height:34px}
}

@media(max-width:860px){
  /* a slimmer masthead, solid: a backdrop blur is redrawn on every scroll frame
     and made the jump to the calculator stutter on iPhone (2026-10-02) */
  .mast__in{height:56px}

}



@media(max-width:640px){
  /* the film is the pitch: it starts inside the first screen. The revenue diagram
     repeats the headline, so on a phone it gives way. */
  .hero .rev{display:none}

  /* three volume presets side by side, as one control, not a stacked list */
  .presets{flex-direction:row}
  .presets button{border-bottom:0;border-right:1px solid var(--rule-2);padding:10px 8px;line-height:1.3;min-height:58px}
  .presets button:last-child{border-right:0}
  /* a segmented control: equal segments, parallel labels, one line each. "around"
     is dropped on a phone so "2,500 a month" fits with real padding, not wrapped
     against the border while its neighbours sit on one line. */
  .presets button span{letter-spacing:.01em;white-space:nowrap}
  .presets button span i{display:none}

  /* the founder: a smaller portrait so the LinkedIn button keeps one line */
  .who{grid-template-columns:72px 1fr;gap:18px}
  .who img{width:72px;height:92px}
  .who__body .btn{white-space:nowrap;padding-inline:14px}

  /* chart labels stay legible */
  .ax{font-size:11px;letter-spacing:.02em}
  .pay3__keep b{font-size:11px}

  /* the report dialog becomes a sheet: it rises from the bottom, where the thumb
     already is, and leaves the same way. Full width, safe area respected. */
  .gate{align-items:flex-end;padding:0}
  .gate__panel{max-width:none;max-height:calc(100dvh - 20px);overscroll-behavior:contain;
    padding:22px var(--pad) calc(24px + env(safe-area-inset-bottom))}
  .gate.show .gate__panel{animation:sheet .34s var(--ease) both}
  .gate.closing .gate__panel{animation:sheet .2s var(--ease) reverse both}
}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}

@media(pointer:coarse),(max-width:860px){ .btn--sm{min-height:44px} }

/* the objections, answered in place: question in the buyer's words, one quiet line
   of answer. Rules, never cards; two columns at most, one on a phone. */
.asks{margin:clamp(22px,3vw,34px) 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,5vw,72px);border-top:1px solid var(--ink)}
.ask{padding:20px 0 22px;border-bottom:1px solid var(--rule)}
.ask dt{font-size:clamp(17px,1.5vw,19px);font-weight:700;letter-spacing:-.015em;line-height:1.3}
.ask dd{margin:6px 0 0;font-size:var(--t-small);color:var(--ink-2);line-height:1.55;max-width:44ch}
.asks__more{margin-top:24px}
@media(max-width:760px){ .asks{grid-template-columns:1fr} .ask{padding:18px 0 19px} }

/* the close: the button sits beside the sentence it completes, not a screen below
   it, and the footnote rule follows straight on instead of after a second band of
   padding. Spacing here is chosen, not accumulated. */
.close{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:clamp(32px,6vw,96px)}
.close .close__acts{margin-top:0}
#start{padding-block:clamp(48px,6vw,84px)}
#start + .band{padding-top:0}
@media(max-width:760px){
  .close{grid-template-columns:1fr}
  .close .close__acts{margin-top:24px}
  #start{padding-block:40px 36px}
}

/* in-page jumps (Watch the film, Calculate your waste) stop below the sticky
   masthead instead of under it */
html{scroll-padding-top:70px}
@media(max-width:860px){ html{scroll-padding-top:56px} }

/* the confirmation: straight to the inbox. Two equal buttons, the provider's own
   mark at 18px, then one quiet line about spam. */
.inbox{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.inbox .btn{gap:10px;padding-inline:12px}
.inbox img{width:18px;height:18px;flex:none}
.inbox__note{margin-top:14px;color:var(--faint)}
/* the call is the one primary action once the report is sent (2026-10-04, Hormozi:
   book while the pain is fresh). Status first, then one violet button, the mail
   buttons demoted below it as ghost buttons. */
.next{margin-top:22px;padding:18px;background:var(--tint);border:1px solid var(--rule)}
.next .btn{width:100%;margin-top:10px}
.next__note{margin-top:10px;color:var(--ink-3)}
.next + .inbox{margin-top:16px}

/* phone spacing pass 2 (2026-10-02): every gap chosen, none accumulated */
@media(max-width:640px){
  /* the calculator starts close under its title, not after two stacked margins */
  .calc{margin-top:22px}
  /* Three steps: heading, then straight into the steps */
  .offer__grid{margin-top:22px}
  .offer__grid .steps2{margin-top:0}
  /* FAQ groups read as one list: no empty band and double rule between groups */
  .band--qa{border-top:0;padding-top:0}
  .band:has(+ .band--qa){padding-bottom:0}
  .band--qa .qalist{border-top:0}
  /* the calculator page: title, then the tool, with one rule between them, not two */
  .hero + #calcTool{border-top:0;padding-top:0}
  /* book and before-your-call: intro, then the list, without a second empty band */
  .hero + .band--ruled > .wrap > .asks:first-child{margin-top:0}
  /* footer links as a tidy three by two grid instead of five and an orphan */
  .foot nav{display:grid;grid-template-columns:repeat(3,max-content);column-gap:32px;row-gap:0}
}

/* ── the check, step 2 (lead magnet v2, 2026-10-06): tick tasks, rank them ── */
.split{border-top:1px solid var(--rule);padding-top:22px;margin-bottom:26px}
.split__q{font-size:var(--t-small);font-weight:700;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:var(--t-small);padding:9px 13px;border:1px solid var(--rule-2);background:var(--white);color:var(--ink);cursor:pointer;line-height:1.2}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed=true]::before{content:"\2713\00a0"}
@media(hover:hover) and (pointer:fine){ .chip:hover{border-color:var(--ink)} }
.trows{margin-top:6px}
.trow{border-top:1px solid var(--rule);padding-top:16px;margin-top:16px}
.trow .field{margin-bottom:14px}
.trow__name{font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.rank{border-top:1px solid var(--rule);margin-top:22px;padding-top:18px}
.result__hero + .rank{border-top:0;margin-top:0}
.rank .micro{display:block;margin-bottom:6px}
.rank__list{list-style:none;margin:0;padding:0;counter-reset:r}
.rank__list li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);counter-increment:r}
.rank__list li span::before{content:counter(r) ". ";color:var(--faint);font-weight:700}
.rank__list li b{font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.rank__more{color:var(--faint);margin-top:10px}
.rank__bench{border-left:2px solid var(--violet);padding-left:12px;margin-top:14px;color:var(--ink-2)}
.rank__nudge{color:var(--ink-3);margin-top:18px}
[hidden]{display:none!important}
/* step 3: the cash part and the next hire */
details.cash{border-top:1px solid var(--rule)}
.cash__intro{color:var(--ink-3);margin:14px 0 16px}
.cash .more__grid label{display:block;font-size:var(--t-small);font-weight:700;margin-bottom:6px}
.cashres{border-top:1px solid var(--rule);margin-top:22px}
.cashres .fig{border-top:0}
.cashres__parts{color:var(--ink-3)}
/* the film on the thank-you screen (lead magnet v2, edit 8) */
.donefilm{margin-top:20px}
.donefilm .micro{display:block;margin-bottom:8px}
.donefilm video{width:100%;display:block;background:var(--ink);aspect-ratio:16/9}
/* the five-invoice sample on the thank-you screen */
.sample{border-top:1px solid var(--rule);margin-top:20px;padding-top:16px}
.sample .micro{display:block;margin-bottom:8px}
.sample__pick{margin-top:12px;cursor:pointer}
.sample__card{border:1px solid var(--rule);padding:12px 14px;margin-top:12px}
.sample__name{font-weight:800;font-size:var(--t-small);overflow-wrap:anywhere}
.sample__fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:6px 14px;margin:10px 0 0;font-size:var(--t-small)}
.sample__fields dt{color:var(--ink-3)}
.sample__fields dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.sample__check{font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rose-deep);border:1px solid var(--rose);padding:1px 5px}
/* apple-design pass (2026-10-06): response on press, 44px targets, continuity, gentle motion */
.chip{min-height:44px;transition:background .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease),transform .1s var(--ease);-webkit-tap-highlight-color:transparent}
.chip:active{transform:scale(.97)}
.trow{animation:rowIn .22s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rank__list li{transition:background .2s var(--ease)}
.split__back{font:inherit;font-size:var(--t-small);background:none;border:0;border-bottom:1px solid var(--violet);color:var(--ink);padding:0 0 2px;margin-top:16px;cursor:pointer;min-height:32px}
.sample__card{animation:rowIn .22s var(--ease) both}
.sample__name[data-busy]::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.5em;border:2px solid var(--rule-2);border-top-color:var(--violet);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .trow,.sample__card{animation:fadeIn .2s ease both}
  .chip:active{transform:none}
  .sample__name[data-busy]::after{animation:none;border-top-color:var(--rule-2)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sample__miss{color:var(--ink-3);margin-top:10px}
/* the Margin Check, simplified (2026-10-06): hero with the film beside it, stack, proof, promise, live bar */
.hero--check{padding-block:clamp(28px,3.6vw,56px) clamp(20px,2.6vw,36px)}
.hcheck{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center}
.hcheck .display{font-size:clamp(32px,4.2vw,56px);margin-top:14px}
.hcheck__cap{color:var(--ink-3);margin-top:8px}
@media(max-width:820px){.hcheck{grid-template-columns:1fr}.hcheck__film{max-width:520px}}
.proofline{margin-top:20px}
.stack{border-top:1px solid var(--rule);margin-top:20px;padding-top:16px}
.stack .micro{display:block;margin-bottom:8px}
.stack__list{list-style:none;margin:0;padding:0;font-size:var(--t-small);color:var(--ink-2)}
.stack__list li{padding:5px 0 5px 22px;position:relative}
.stack__list li::before{content:"\2713";position:absolute;left:0;color:var(--violet);font-weight:800}
.stack__list b{color:var(--ink);font-weight:700}
.promise{color:var(--ink-3);margin-top:12px;max-width:52ch}
.livebar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ink);color:#fff;transform:translateY(100%);transition:transform .22s var(--ease)}
.livebar.show{transform:none}
.livebar__n{font-weight:800;font-size:20px;letter-spacing:-.02em;color:#fff}
.livebar__l{font-size:var(--t-micro);letter-spacing:.06em;color:var(--on-dark-3)}
.livebar a{color:#fff;font-size:var(--t-small);font-weight:700;text-decoration:none;border-bottom:1px solid var(--violet);padding:8px 0}
@media(max-width:820px){.livebar{display:flex}}
@media(prefers-reduced-motion:reduce){.livebar{transition:none}}
/* example summary beside the free stack; optional label; margin line */
.stack{display:grid;grid-template-columns:minmax(0,1fr) 96px;column-gap:18px}
.stack>.micro,.stack>.stack__list{grid-column:1}
.stack__ex{grid-column:2;grid-row:1 / span 2;align-self:start;display:block;text-decoration:none;color:var(--ink-3)}
.stack__ex img{width:96px;height:auto;display:block;border:1px solid var(--rule-2);background:#fff}
.stack__ex span{display:block;font-size:var(--t-micro);letter-spacing:.06em;margin-top:4px;text-align:center}
@media(hover:hover) and (pointer:fine){.stack__ex:hover img{border-color:var(--ink)}}
.opt{font-weight:400;color:var(--ink-3)}
.result__margin{color:var(--ink);font-weight:700}
.cash__rev{margin:4px 0 18px}
.nextproblem{border-left:2px solid var(--violet);padding-left:12px;color:var(--ink-2);margin-top:18px}

/* ═══════════════════════════════════════════════════════════════════════════
   Design pass 2026-10-07: alignment, contrast and clarity. Every value below
   fixes something measured on a 390 px phone and a 1440 px desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
/* footnote rule sits on the text column, not across the side padding */
.wrap.notes{border-top:0;padding-top:0}
.wrap.notes::before{content:"";display:block;border-top:1px solid var(--rule);margin-bottom:20px}
/* the line under a closing sentence gets room to breathe */
.close .lead + .small,.close .lead + .qtr{margin-top:14px}
/* text on the dark band: every label passes 4.5:1 */
.band--dark .small{color:var(--on-dark-2)}
.quote__t{color:#A897FF}
.ax--b{color:#A897FF}
/* the payback chart: axis labels line up with the columns; the bare euro mark goes */
.pay3__plot{padding-left:0}
.pay3__y{display:none}
.pay3__key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:var(--t-small);color:var(--on-dark-2)}
.pay3__key span{display:inline-flex;align-items:center;gap:8px}
.pay3__key i{width:10px;height:10px;flex:none}
.pay3__key .k-waste{background:var(--rose)}
.pay3__key .k-pay{background:var(--violet);outline:1px solid #A897FF;outline-offset:-1px}
/* the hero diagram: the caption already says "unchanged"; the stray end ticks go */
.rev__axis{display:none}
/* both bars in "work vs wait" share one scale, so they share one track width */
.gap2__row{grid-template-columns:minmax(0,1fr) minmax(140px,2.4fr) clamp(128px,11.5vw,160px)}
.gap2__v{text-align:right}
@media(max-width:640px){ .gap2__row{grid-template-columns:minmax(0,1fr) 128px} }
/* a wrapped link underlines its words, not the whole box */
.proofline .tlink{display:inline;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--violet);text-underline-offset:5px;line-height:1.6}
.proofline .tlink:hover{text-decoration-thickness:2px}
/* the ad page has no nav, so its one button still sits at the right edge */
.brand + .mast__cta{margin-left:auto}
/* the callout above a heading belongs to it */
.hcheck .micro + .display,.wrap > .micro + .h2{margin-top:10px}
/* footer: the wordmark and the links share one centre line */
.foot__in{align-items:center}