/* ============================================================
   MUDUCT — muduct.com
   Built to Brand Book v2.0 + Web Guidelines v1.0
   Core five: Electric Cobalt / Signal Lime / Proof Amber /
              Signal Ice / Deep Navy
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* core five */
  --cobalt:#1746E0;
  --lime:#C7F000;
  --amber:#F4A340;
  --ice:#F5F7FF;
  --navy:#081A33;

  /* ramps (only these tints exist) */
  --cobalt-300:#A7BDF8; --cobalt-400:#6F91F1; --cobalt-600:#1339B8; --cobalt-900:#071445;
  --lime-100:#F8FEDC;   --lime-600:#A4C700;   --lime-900:#3A4700;
  --amber-100:#FEF4E7;  --amber-700:#B4741F;
  --n-000:#FFFFFF; --n-050:#F5F7FF; --n-100:#E2E7F2; --n-200:#C7CFE6;
  --n-400:#8A94A8; --n-600:#41567A; --n-800:#0E2547; --n-900:#081A33;

  /* dark surface set */
  --base:#050F20; --s1:#081A33; --s2:#0E2547; --line:#20365A; --muted:#AFC0DE;

  /* type */
  --disp:"Space Grotesk","Space Grotesk Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Space Mono","Space Mono Fallback",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --hero:clamp(2.5rem,1.35rem + 4.6vw,4.5rem);      /* 40 → 72 */
  --h1:clamp(2rem,1.43rem + 2.29vw,3rem);           /* 32 → 48 */
  --h2:clamp(1.5rem,1.21rem + 1.14vw,2rem);         /* 24 → 32 */
  --h3:clamp(1.25rem,1.11rem + 0.57vw,1.5rem);      /* 20 → 24 */
  --txt:1.0625rem;  --txt-lh:1.588;                 /* 17 / 27 fixed */
  --sm:0.9375rem;   --sm-lh:1.467;                  /* 15 / 22 fixed */
  --money:1.125rem; --money-lg:1.75rem;             /* 18 / 28 fixed */
  --label:0.75rem;

  /* space + shape */
  --pad:clamp(1rem,0.3rem + 2.8vw,3rem);
  --r:10px; --r-lg:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.42s;
  --measure:66ch;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--base); color:var(--ice);
  font-family:var(--body); font-size:var(--txt); line-height:var(--txt-lh);
  font-weight:400; -webkit-font-smoothing:antialiased; overflow:hidden;
}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0}
a{color:var(--cobalt-400); text-decoration-thickness:1px; text-underline-offset:3px}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--disp); font-weight:700; letter-spacing:-0.02em}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}

::selection{background:var(--lime); color:var(--navy)}

/* focus visible — 3px cobalt ring, keyboard only, never suppressed */
:focus{outline:none}
:focus-visible{outline:3px solid var(--cobalt-400); outline-offset:3px; border-radius:4px}

.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:200; transform:translateY(-160%);
  background:var(--lime); color:var(--navy); padding:.6rem 1rem; border-radius:var(--r);
  font-family:var(--mono); font-size:var(--label); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip:focus-visible{transform:none}

/* ---------- 3. TYPE HELPERS ---------- */
.display{font-size:var(--hero); line-height:.94; letter-spacing:-0.035em}
.h1{font-size:var(--h1); line-height:1.05; letter-spacing:-0.03em}
.h2{font-size:var(--h2); line-height:1.15; letter-spacing:-0.025em}
.h3{font-size:var(--h3); line-height:1.2; letter-spacing:-0.02em}
.body{font-size:var(--txt); line-height:var(--txt-lh); max-width:var(--measure); color:var(--ice)}
.cap{font-size:var(--sm); line-height:var(--sm-lh); color:var(--muted); max-width:60ch}
.num{font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
     letter-spacing:0; font-feature-settings:"tnum" 1}
.amber{color:var(--amber)}
.lime-t{color:var(--lime)}

/* vertical rhythm between a heading and the copy that follows it */
.h1+.body,.h2+.body,.h3+.body,.h1+.lede,.display+.lede{margin-top:1rem}
.body+.body,.body+.quote,.body+.steps{margin-top:1.1rem}

.label,.eyebrow{
  font-family:var(--mono); font-weight:700; font-size:var(--label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt-400);
}
.eyebrow{color:var(--lime-600)}
.label{margin-bottom:1.1rem}

.tick{
  display:inline-block; width:.85em; height:.85em; margin-right:.35em; vertical-align:-1px;
  background:currentColor;
  clip-path:polygon(41% 74%,10% 45%,0 55%,41% 96%,100% 22%,90% 12%);
}

/* ---------- 4. HEADER ---------- */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:90; height:74px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:1rem; padding:0 var(--pad);
  background:color-mix(in srgb,var(--s1) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.lockup{display:flex; align-items:center; gap:.62rem; text-decoration:none; color:var(--ice)}
.seal{display:block; width:38px; height:38px; flex:0 0 38px}
.seal svg{width:100%; height:100%; overflow:visible}
.seal-ring{fill:none; stroke:var(--ice); stroke-width:9.7}
.seal-bar{fill:var(--amber)}
.seal-m{fill:var(--ice); font-family:var(--disp); font-weight:700; font-size:46px;
        letter-spacing:-0.03em}
.lockup:hover .seal-ring{stroke:var(--lime)}
.seal-ring{transition:stroke var(--dur) var(--ease)}

.wordmark{
  font-family:var(--disp); font-weight:700; font-size:1.3rem;
  letter-spacing:-0.035em; text-transform:uppercase; line-height:1;
}
.wordmark.small{font-size:1.05rem}

.edition{
  justify-self:center; font-family:var(--mono); font-weight:700; font-size:var(--label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.bar-nav{display:flex; align-items:center; gap:1rem}
.ghost{
  font-size:var(--sm); color:var(--ice); padding:.55rem .2rem; cursor:pointer;
  border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease);
}
.ghost:hover{border-bottom-color:var(--lime)}

.bar-rule{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent}
.bar-rule span{display:block; height:100%; width:0; background:var(--lime);
  transition:width .25s linear}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --bg:var(--lime); --fg:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.85rem 1.35rem; border-radius:var(--r);
  background:var(--bg); color:var(--fg); text-decoration:none;
  font-family:var(--disp); font-weight:700; font-size:1rem; letter-spacing:-0.01em;
  line-height:1.15; text-align:center; cursor:pointer;
  transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease),
             background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{filter:brightness(.92); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lime{--bg:var(--lime); --fg:var(--navy)}
.btn-navy{--bg:var(--navy); --fg:var(--ice)}
.btn-line{
  --bg:transparent; --fg:var(--ice);
  border:1.5px solid var(--line);
}
.btn-line:hover{--bg:rgba(111,145,241,.10); border-color:var(--cobalt-400); filter:none}
.btn-sm{min-height:40px; padding:.55rem 1rem; font-size:.9rem}
.wide{width:100%}

/* ---------- 6. DECK SHELL ---------- */
.story{
  display:flex; height:100vh; height:100dvh; width:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.story::-webkit-scrollbar{display:none}
.spread{
  position:relative; flex:0 0 100%; width:100%; height:100%;
  scroll-snap-align:start;
  overflow:hidden; display:flex; flex-direction:column; justify-content:center;
}
.spread.pad{padding:calc(74px + var(--pad)) var(--pad) calc(84px + var(--pad))}

.grid{display:grid; gap:clamp(1.5rem,3vw,3.5rem); align-items:center}
.split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.split.rev>.col:first-child{order:2}
.split.rev>.media{order:1}
.head-row{grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:end; margin-bottom:clamp(1.2rem,2.4vw,2.2rem)}
.col{min-width:0}

/* ---------- 7. COVER ---------- */
.cover{
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto;
  align-content:stretch; padding:0; overflow:hidden;
}
.cover-media{position:absolute; inset:0; z-index:0}
.cover-image{
  position:absolute; inset:-4%; background:#0b1e3d center/cover no-repeat;
  background-image:url("/assets/muduct-hero.jpg");
  transform:scale(1.04) translate3d(0,0,0); will-change:transform;
  transition:transform 1.2s var(--ease);
}
.cover-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(5,15,32,.96) 0%,rgba(5,15,32,.82) 42%,rgba(5,15,32,.28) 78%,rgba(5,15,32,.55) 100%),
    linear-gradient(0deg,rgba(5,15,32,.92) 0%,rgba(5,15,32,0) 55%);
}
.cover-grid{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(90deg,rgba(111,145,241,.10) 1px,transparent 1px);
  background-size:calc(100%/12) 100%;
}
.cover-body{
  position:relative; z-index:2; align-self:center;
  padding:calc(74px + var(--pad)) var(--pad) var(--pad);
  max-width:min(56rem,86vw); min-height:0;
}
.cover .display .l1,.cover .display .l2{display:block}
.cover .display .l2{color:var(--amber)}
.cover .lede{
  margin-top:1.15rem; max-width:44ch; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  line-height:1.55; color:var(--ice);
}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem}
.cover-proof{
  display:grid; gap:.55rem; margin-top:1.7rem; max-width:54ch;
  font-size:var(--sm); line-height:1.5; color:var(--ice);
}
.cover-proof li{display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start}
.cover-proof .tick{color:var(--lime); margin:.3em 0 0; width:.9em; height:.9em}
.cover-proof .num{color:var(--lime)}

.rail{
  position:absolute; z-index:2; right:calc(var(--pad) - .1rem); top:50%;
  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-family:var(--mono); font-weight:700; font-size:var(--label);
  letter-spacing:.3em; text-transform:uppercase; color:rgba(175,192,222,.55);
}
.cover-foot{
  position:relative; z-index:2; display:flex; align-items:stretch; gap:1rem;
  padding:0 var(--pad) calc(84px + .6rem); justify-self:end;
  width:min(34rem,80vw);
}
/* a lime rule instead of a numeral — it points at the sentence */
.foot-rule{
  flex:0 0 auto; align-self:stretch; width:3px; min-height:2.6rem;
  background:var(--lime); border-radius:2px;
}
.cover-foot p{font-size:var(--sm); line-height:var(--sm-lh); color:var(--ice)}

/* ---------- 8. MEDIA FRAMES ---------- */
.media{margin:0}
.media-frame{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--s2); aspect-ratio:4/3;
}
.media-frame>[role=img]{
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* these need equal-or-higher specificity than the rule above, or the
   background-image is dropped */
.media-frame>.problem-canvas{
  background-image:url("/assets/market-stacked-fee-wheel.png");
  background-size:contain; background-color:var(--s1);
}
.media-frame>.promise-image{background-image:url("/assets/restaurant-owner.jpg")}
.media .cap{margin-top:.7rem}

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

.stamp{
  position:absolute; right:.9rem; bottom:.9rem; display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem; border-radius:var(--r); background:rgba(8,26,51,.92);
  border:1px solid var(--line); backdrop-filter:blur(6px);
}
.stamp span{font-family:var(--mono); font-weight:700; font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--lime); line-height:1.35}

/* atmospheric photography behind text spreads — never blocking, never load-critical */
.spread-bg{
  position:absolute; inset:0; z-index:0; background:var(--base) center/cover no-repeat;
  opacity:.9;
}
.spread-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(5,15,32,.97) 0%,rgba(5,15,32,.93) 55%,rgba(5,15,32,.86) 100%),
    linear-gradient(0deg,rgba(5,15,32,.9) 0%,rgba(5,15,32,.7) 100%);
}
.bg-menu{background-image:url("/assets/menu-board.jpg")}
.bg-rider{background-image:url("/assets/rider-handoff.jpg")}
.bg-pass{background-image:url("/assets/kitchen-pass.jpg")}
.spread.pad>*:not(.spread-bg){position:relative; z-index:1}

/* ---------- 9. PROBLEM ---------- */
/* eight charges, four across — the block squares off against the measure of
   the paragraph above it and the quote below it */
.chips{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.4rem; margin:1.15rem 0 0; max-width:var(--measure);
}
.chips li{
  display:grid; place-items:center; text-align:center;
  font-family:var(--mono); font-weight:700; font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.45rem .5rem; border-radius:6px;
  background:var(--s2); border:1px solid var(--line); color:var(--muted);
}
.quote{margin:1.3rem 0 0; padding-left:1rem; border-left:3px solid var(--amber)}
.quote p{font-family:var(--disp); font-weight:700; font-size:var(--h3); line-height:1.3;
  letter-spacing:-0.02em; color:var(--ice); max-width:40ch}
.close-note{margin-top:1.2rem; font-size:var(--txt); line-height:var(--txt-lh);
  color:var(--muted); max-width:var(--measure)}
.close-note .num{color:var(--lime)}

/* ---------- 10. SPREAD 03 — DISGUISED DISCOUNT ---------- */
.steps{display:grid; gap:.5rem; margin:1.25rem 0 0}
.steps li{
  display:flex; gap:.75rem; align-items:baseline; padding:.7rem .9rem;
  background:var(--s2); border-left:3px solid var(--cobalt); border-radius:0 var(--r) var(--r) 0;
  font-size:var(--sm); line-height:var(--sm-lh);
}
.steps li .num{color:var(--cobalt-400); font-size:.8125rem}
.steps li.on{border-left-color:var(--amber)}
.steps li.on .num{color:var(--amber)}

.note-navy{
  margin-top:1.25rem; padding:1rem 1.1rem; border-radius:var(--r);
  background:var(--s1); border:1px solid var(--line);
  font-size:var(--sm); line-height:var(--sm-lh); color:var(--muted); max-width:56ch;
}
.note-key{font-family:var(--mono); font-weight:700; font-size:var(--label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--lime); margin-bottom:.35rem}
.note-navy .num{color:var(--lime)}

.chart-card{
  margin:0; padding:1.1rem 1.2rem 1.2rem; border-radius:var(--r-lg);
  background:var(--n-050); border:1px solid var(--n-100); color:var(--navy);
}
.chart-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin-bottom:1.1rem}
.chart-title{font-family:var(--mono); font-weight:700; font-size:var(--label);
  letter-spacing:.12em; text-transform:uppercase; color:var(--amber-700)}
.chart-meta{font-family:var(--mono); font-weight:700; font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--n-400)}

/* Chart: three stacked grids sharing one column track, so the dashed
   menu-price line can sit at an exact percentage of the plot height.
   No inline styles — the CSP on this host forbids style attributes. */
.chart{--plot:13rem; --menu:73%}
.bar-vals,.bars,.bar-caps{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem}
.bar-val{font-family:var(--mono); font-weight:700; font-size:var(--money);
  text-align:center; color:var(--navy)}
.plot{position:relative; height:var(--plot); margin-top:.4rem}
.bars{position:absolute; inset:0; align-items:end}
.cbar{border-radius:3px 3px 0 0; transform-origin:bottom;
  animation:grow .9s var(--ease) both}
.b-navy{background:var(--navy); height:var(--menu)}
.b-amber{background:var(--amber); height:100%}
.b-hatch{
  background:repeating-linear-gradient(45deg,var(--amber) 0 6px,#fbd7ab 6px 12px);
  height:80%; animation-delay:.08s;
}
.b-lime{background:var(--lime); height:var(--menu); animation-delay:.16s}
.menu-line{
  position:absolute; left:0; right:0; bottom:var(--menu);
  border-top:1.5px dashed var(--navy); pointer-events:none;
}
.menu-line span{
  position:absolute; right:0; top:-1.25rem; font-family:var(--mono); font-weight:700;
  font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--n-600);
}
.bar-caps{margin-top:.55rem; align-items:start}
.bar-cap{font-size:.75rem; line-height:1.3; text-align:center; color:var(--n-600)}
.bar-cap b{color:var(--navy)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.gap-row{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem;
  margin-top:1.1rem; padding:.85rem 1rem; border-radius:var(--r);
  background:var(--navy); color:var(--ice); font-size:var(--sm); line-height:1.4;
}
.gap-row .num{font-size:var(--money)}

.claim-lime{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:.4rem 1rem; margin-top:.85rem; padding:.95rem 1.1rem;
  border-radius:var(--r-lg); background:var(--lime); color:var(--navy);
}
.claim-key{font-family:var(--mono); font-weight:700; font-size:var(--label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--lime-900)}
.claim-line{font-family:var(--disp); font-weight:700; font-size:var(--h3);
  letter-spacing:-0.02em; line-height:1.2}
.claim-sub{font-size:.8125rem; color:var(--lime-900); margin-top:.15rem}
.claim-num{font-size:var(--money-lg); white-space:nowrap}

/* ---------- 11. PROMISE ---------- */
.promise{margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line)}
.promise-key{
  font-family:var(--mono); font-weight:700; font-size:2rem; line-height:1;
  color:var(--lime); margin-bottom:.5rem;
}
.promise-key.sign{color:var(--amber)}
.promise .h3{margin-bottom:.45rem}
.promise .body{color:var(--muted)}
.promise .num{color:var(--lime)}

/* ---------- 12. CARDS ---------- */
.cards{display:grid; gap:clamp(.8rem,1.6vw,1.2rem)}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  position:relative; display:flex; flex-direction:column; gap:.5rem;
  padding:clamp(1rem,1.6vw,1.25rem); border-radius:var(--r-lg);
  background:var(--n-050); border:1px solid var(--n-100); color:var(--navy);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:rgba(8,26,51,0); transition:background var(--dur) var(--ease);
}
.card:hover{transform:translateY(-3px)}
.card:hover::after{background:rgba(8,26,51,.06)}
.card .body{color:var(--n-600); font-size:var(--sm); line-height:var(--sm-lh)}
.card-key{
  font-family:var(--mono); font-weight:700; font-size:1.75rem; line-height:1;
  color:var(--cobalt);
}
.card-foot{
  margin-top:auto; padding-top:.9rem; font-family:var(--mono); font-weight:700;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-700);
}
.card.dark{background:var(--s1); border-color:var(--line); color:var(--ice)}
.card.dark .card-key{color:var(--cobalt-400)}
.card.dark .body{color:var(--muted)}
.card.dark .card-foot{color:var(--lime)}
.card.dark:hover::after{background:rgba(245,247,255,.05)}

.rule-note{
  margin-top:clamp(1rem,2vw,1.6rem); padding:.85rem 1rem; border-radius:var(--r);
  background:var(--s1); border-left:3px solid var(--lime);
  font-size:var(--sm); line-height:var(--sm-lh); color:var(--muted);
}

/* ---------- 13. JOIN ---------- */
.join-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.5rem)}
.join-card{
  display:flex; flex-direction:column; gap:.85rem;
  padding:clamp(1.2rem,2.2vw,2rem); border-radius:var(--r-lg);
  background:var(--s1); border:1px solid var(--line);
}
.join-card .body{color:var(--muted)}
.join-card .btn{margin-top:auto}
.join-key{
  font-family:var(--mono); font-weight:700; font-size:var(--label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt-400);
}
.join-card.lime{background:var(--lime); border-color:var(--lime-600); color:var(--navy)}
.join-card.lime .join-key{color:var(--lime-900)}
.join-card.lime .body{color:var(--navy)}
.cap.dark{color:var(--lime-900)}

.foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem;
  margin-top:clamp(1rem,2vw,1.8rem); padding-top:1rem; border-top:1px solid var(--line);
  font-size:var(--sm); color:var(--muted);
}
.foot a{color:var(--cobalt-400)}

/* ---------- 15. PAGER ---------- */
.pager{
  position:fixed; left:50%; bottom:calc(var(--pad) * .7); transform:translateX(-50%);
  z-index:95; display:flex; align-items:center; gap:.9rem;
  padding:.5rem .7rem; border-radius:999px;
  background:color-mix(in srgb,var(--s1) 90%,transparent);
  border:1px solid var(--line); backdrop-filter:blur(14px);
}
.pg{
  width:40px; height:40px; display:grid; place-items:center; border-radius:999px;
  cursor:pointer; color:var(--ice); border:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pg svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.pg:hover{background:var(--lime); color:var(--navy)}
.pg[disabled]{opacity:.32; cursor:not-allowed}
.pg[disabled]:hover{background:none; color:var(--ice)}
.pg-track{width:clamp(80px,18vw,190px); height:2px; background:var(--line); border-radius:2px}
.pg-track span{display:block; height:100%; width:14%; background:var(--lime); border-radius:2px;
  transition:width .3s var(--ease)}
.pg-count{font-family:var(--mono); font-weight:700; font-size:.8125rem; white-space:nowrap;
  display:flex; gap:.4rem}
.pg-count b{color:var(--lime)}
.pg-count span{color:var(--muted)}

/* ---------- 16. HOW-TO SHEET ---------- */
.sheet{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:var(--pad); background:rgba(5,15,32,.82); backdrop-filter:blur(8px);
  animation:fade .25s var(--ease) both;
}
.sheet[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-box{
  width:min(34rem,100%); padding:clamp(1.3rem,3vw,2.2rem); border-radius:var(--r-lg);
  background:var(--s1); border:1px solid var(--line);
}
.how-list{display:grid; gap:.7rem; margin:1.2rem 0 1.6rem; font-size:var(--sm);
  color:var(--muted)}
.how-list li{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
kbd{
  font-family:var(--mono); font-weight:700; font-size:.75rem; color:var(--ice);
  padding:.2rem .45rem; border-radius:5px; background:var(--s2); border:1px solid var(--line);
}

/* ---------- 17. INTERACTIVE CURSOR ----------
   Two layers: a lime dot that tracks the pointer exactly, and a ring that
   trails it, then snaps to and wraps whatever it is hovering. Size, radius
   and position are written by script; this block owns colour and easing. */
.cur{
  position:fixed; inset:0; z-index:180; pointer-events:none; display:none;
  opacity:0; transition:opacity .3s var(--ease);
}
.cur.on{opacity:1}

.cur-ring,.cur-dot{position:absolute; top:0; left:0; will-change:transform}
.cur-ring{
  width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:999px;
  border:1.5px solid var(--cobalt-400); background:rgba(111,145,241,.07);
  display:grid; place-items:center;
  transition:width .32s var(--ease), height .32s var(--ease), margin .32s var(--ease),
             border-radius .32s var(--ease), background-color .28s var(--ease),
             border-color .28s var(--ease), opacity .2s var(--ease);
}
.cur-dot{
  width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:999px; background:var(--lime);
  transition:opacity .2s var(--ease);
}
/* reading — the ring becomes a caret beside the words */
.cur.is-text .cur-ring{
  border-color:transparent; background:var(--lime); border-radius:2px; opacity:.85;
}
.cur.is-text .cur-dot{opacity:0}

/* links and cards */
.cur.is-link .cur-ring{border-color:var(--lime); background:rgba(199,240,0,.12)}
.cur.is-card .cur-ring{border-color:var(--amber); background:rgba(244,163,64,.14)}

/* buttons and deck arrows — the ring wraps the control, nothing is written
   over it: the control keeps its own label */
.cur.is-magnet .cur-ring{
  border-color:var(--lime); background:rgba(199,240,0,.16); border-width:1.5px;
}
.cur.is-magnet .cur-dot{opacity:0}

@media (hover:hover) and (pointer:fine){
  .cur{display:block}
  body.cur-on,body.cur-on a,body.cur-on button{cursor:none}
}

/* ---------- 18. RESPONSIVE ---------- */
/* LG — 1280+ keeps 12-column feel, content capped at 1440 */
@media (min-width:1600px){
  .spread.pad{padding-left:max(var(--pad),calc((100vw - 1440px)/2));
              padding-right:max(var(--pad),calc((100vw - 1440px)/2))}
  .cover-body{padding-left:max(var(--pad),calc((100vw - 1440px)/2))}
  /* margin, not padding: padding would eat the foot's own content box */
  .cover-foot{margin-right:max(0px,calc((100vw - 1440px)/2 - var(--pad)))}
}

/* MD — up to 1279 */
@media (max-width:1279px){
  .bar-vals,.bars,.bar-caps{gap:.4rem}
  .chart{--plot:10.5rem}
  .edition{display:none}
}

/* the promise photograph has no caption under it, so it squares off top and
   bottom against the column of text beside it */
@media (min-width:1024px){
  #promise .media{align-self:stretch; display:flex}
  #promise .media-frame{aspect-ratio:auto; flex:1; min-height:24rem}
}

/* SHORT VIEWPORTS — a laptop at 1440x720 must still show the whole cover */
@media (min-width:1024px) and (max-height:860px){
  :root{--hero:clamp(2.25rem,1.1rem + 3.4vw,3.5rem)}
  .cover .lede{margin-top:.85rem; font-size:1.0625rem}
  .cta-row{margin-top:1.25rem}
  .cover-proof{margin-top:1.15rem; gap:.4rem 1.4rem}
  .chart{--plot:10rem}
  .promise{margin-top:1rem; padding-top:.9rem}
}
@media (min-width:1024px) and (max-height:720px){
  :root{--hero:clamp(2rem,1rem + 2.8vw,3rem); --h1:clamp(1.75rem,1.2rem + 1.8vw,2.5rem)}
  .cover-proof{margin-top:.9rem; font-size:.875rem}
  .cover-foot{padding-bottom:calc(84px + .2rem)}
  .cover-foot p{font-size:.8125rem; line-height:1.4}
  .chart{--plot:8.5rem}
  .quote p{font-size:1.125rem}
  .chips{display:none}
}

/* SM — under 1024 the deck stops being a deck. Spreads stack and the page
   scrolls down like any other page: no horizontal scroll, no snap fighting
   the thumb, no section taller than its own content. */
@media (max-width:1023px){
  :root{--pad:1.15rem}

  html{scroll-behavior:smooth}
  body{overflow:auto; overscroll-behavior-y:none}

  .story{display:block; height:auto; overflow:visible; scroll-snap-type:none}

  .spread{
    display:block; flex:none; width:100%; height:auto; min-height:0;
    overflow:visible; scroll-snap-align:none;
    scroll-margin-top:74px;
  }
  .spread.pad{padding:3.25rem var(--pad)}
  .spread + .spread{border-top:1px solid var(--line)}

  /* cover keeps a full screen; everything else is content-height */
  .cover{
    display:flex; flex-direction:column; justify-content:flex-end;
    min-height:100svh;
  }
  .cover-body{padding:calc(74px + 3rem) var(--pad) 1.5rem; margin-top:auto; max-width:none}
  .cover-foot{width:auto; justify-self:auto; padding:0 var(--pad) 6rem}
  .cover-grid{background-size:calc(100%/4) 100%}
  .cover-veil{background:
    linear-gradient(90deg,rgba(5,15,32,.95) 0%,rgba(5,15,32,.80) 60%,rgba(5,15,32,.55) 100%),
    linear-gradient(0deg,rgba(5,15,32,.96) 8%,rgba(5,15,32,0) 62%)}
  .rail{display:none}

  .grid{gap:1.5rem}
  .split,.head-row,.cards.three,.join-grid{grid-template-columns:minmax(0,1fr)}
  .split.rev>.col:first-child{order:0}
  .split.rev>.media{order:0}
  .head-row{align-items:start}
  .media-frame{aspect-ratio:16/10}
  .cta-row .btn{flex:1 1 15rem}

  .chart{--plot:9rem}
  .bar-vals,.bars,.bar-caps{gap:.35rem}
  .bar-val{font-size:1rem}
  .bar-cap{font-size:.6875rem}
  .claim-lime{grid-template-columns:1fr; gap:.4rem}
  .claim-num{font-size:var(--money-lg)}

  .edition{display:none}
  .foot{flex-direction:column; align-items:flex-start; gap:.35rem}
  .cur{display:none !important}

  /* the pager becomes a compact up/down control */
  .pager{bottom:.75rem; gap:.5rem; padding:.35rem .45rem}
  .pg svg{transform:rotate(90deg)}
  .pg-track{width:64px}
}

@media (max-width:767px){
  .spread.pad{padding:2.75rem var(--pad)}
  .chips{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; max-width:none}
  .chips li{font-size:.625rem; padding:.4rem .5rem}
  .quote p{font-size:1.125rem}
  .chart{--plot:8rem}
  .bar-val{font-size:.9375rem}
  .bar-cap{font-size:.625rem}
  .stamp{right:.6rem; bottom:.6rem; padding:.5rem .65rem}
  .pg-track{display:none}
}

/* ---------- 19. MOTION + PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal>*{opacity:1; transform:none}
  .cur{display:none !important}
  body.cur-on,body.cur-on a,body.cur-on button{cursor:auto}
}
@media print{
  body{overflow:visible; background:#fff; color:#081A33}
  .bar,.pager,.cur,.sheet,.skip{display:none !important}
  .story{display:block; height:auto}
  .spread{height:auto; page-break-after:always; padding:1.5cm !important}
}