/* 不卖 BUMAI — one stylesheet for all three pages.
   Tokens lifted from the 4C scratch-card production frontend
   (pow1-evm/frontend/src/styles.css) so the two products read as siblings. */
:root{
  --paper:#f5f7f2; --surface:#fff; --ink:#151713; --muted:#5d655a; --border:#d7dccf;
  --yellow:#ffcc00; --dead:#C4342A; --green:#2f5d3b;
  --grid:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect x='0' y='0' width='3' height='3' fill='%23050607' fill-opacity='0.14'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(5,6,7,.045), transparent 34%, rgba(5,6,7,.035)),
    var(--yellow);
  --r:2px solid var(--ink);
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Display face lifted from the POW1 app so the two products read as a family.
     Chakra Petch tops out at 700, not Inter's 900 — its squarer, tighter shapes carry
     the weight, but every display rule below states 700 explicitly rather than relying
     on 900 silently rounding down. */
  --display:"Chakra Petch",Inter,ui-sans-serif,system-ui,sans-serif;
  --cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;
  line-height:1.5;font-synthesis:none;letter-spacing:0;text-rendering:geometricPrecision;
  overflow-x:hidden;padding-bottom:calc(52px + env(safe-area-inset-bottom))}

/* SHELL — the frame grows on desktop so the brutalist rules span the width.
   Prose is clamped separately below, so measure never degrades. */
/* No min-height:100vh. It forced the shell to a full viewport on short pages and the
   slack showed as a dead bordered box below the footer. Letting the page end where
   the content ends is correct at every length. */
.w{max-width:720px;margin:0 auto}
@media(min-width:720px){.w{border-left:var(--r);border-right:var(--r)}}
@media(min-width:900px){.w{max-width:1040px}}
.say,.lede,.blk p,.step p,p.body,.viz .cap,.ratio .cap{max-width:58ch}

.lbl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;font-weight:700;
  text-transform:uppercase}

/* ---------- header + nav ---------- */
.bar{background:var(--ink);color:var(--paper);display:flex;align-items:center;
  justify-content:space-between;padding:15px 20px}
.wm{font-family:var(--cjk);font-weight:800;font-size:24px;color:var(--yellow);
  line-height:1;text-decoration:none}
.wm span{font-family:var(--sans);font-weight:900;font-size:13px;letter-spacing:.1em;
  color:var(--paper);margin-left:10px;vertical-align:2px}
.clock{font-family:var(--mono);font-size:12.5px;font-weight:700;background:var(--yellow);
  color:var(--ink);padding:6px 10px;white-space:nowrap}
.mode{font-family:var(--mono);font-size:12px;letter-spacing:.1em;font-weight:700;
  padding:9px 20px;background:var(--dead);color:#fff;text-transform:uppercase}
.mode[hidden]{display:none}

.tabs{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;
  background:var(--ink);border-top:var(--r);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;text-align:center;padding:16px 0 14px;color:var(--paper);text-decoration:none;
  font-weight:900;font-size:13px;letter-spacing:.1em;border-right:1px solid #3a3f35}
.tab:last-child{border-right:0}
.tab[aria-current="page"]{background:var(--grid);color:var(--ink)}
@media(min-width:900px){
  .tabs{position:static;border-top:0;border-bottom:var(--r);padding-bottom:0}
  .tab{flex:0 0 auto;padding:14px 30px;border-right:var(--r)}
  body{padding-bottom:0}
}

/* ---------- hero ---------- */
.hero{padding:42px 20px 34px;border-bottom:var(--r)}
h1{font-weight:900;font-size:clamp(46px,13vw,80px);line-height:.9;letter-spacing:-.015em}
h1 em{font-style:normal;background:var(--grid);padding:.02em .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.say{margin-top:20px;font-size:19px;font-weight:700;line-height:1.4}
.hero-act{margin-top:24px}
.buy{display:block;background:var(--grid);border:var(--r);text-align:center;
  font-weight:900;font-size:21px;padding:20px;color:var(--ink);text-decoration:none}
.ca{display:block;width:100%;margin-top:10px;border:var(--r);background:var(--surface);
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  padding:13px;cursor:pointer;color:var(--ink)}
.ca[disabled]{color:var(--muted);cursor:default}
.howlink{display:inline-block;margin-top:18px;padding:12px 0;font-weight:800;font-size:16px;
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--yellow)}
@media(min-width:900px){
  .hero{display:grid;grid-template-columns:3fr 2fr;gap:48px;align-items:end}
  .hero-act{margin-top:0}
}

/* ---------- strips + sections ---------- */
.strip{background:var(--grid);border-bottom:var(--r);padding:22px 20px;
  display:flex;gap:28px;flex-wrap:wrap;justify-content:center;text-align:center}
.strip div{min-width:120px}
.strip .v{font-weight:900;font-size:clamp(30px,8vw,42px);line-height:1;margin-top:8px;
  letter-spacing:-.02em}
.strip .v small{font-size:.42em;font-weight:800}

section{display:block;border-bottom:var(--r);padding:32px 20px}
h2{font-weight:900;font-size:clamp(26px,6.5vw,34px);line-height:1.04;letter-spacing:-.02em}
.lede{margin-top:12px;font-size:16px;color:var(--muted)}

.step{display:flex;gap:15px;padding:19px 0;border-bottom:1px solid var(--border)}
.step:last-of-type{border-bottom:0}
.step .n{flex:none;width:34px;height:34px;background:var(--ink);color:var(--yellow);
  font-weight:900;font-size:16px;display:grid;place-items:center}
.step h3{font-weight:900;font-size:18px;letter-spacing:-.01em}
.step p{margin-top:5px;font-size:15.5px;color:var(--muted);line-height:1.5}
.step p b{color:var(--ink);font-weight:800}
.step p b.red{color:var(--dead)}
@media(min-width:900px){
  .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .steps3 .step{border-bottom:0;border-right:1px solid var(--border);padding:0 22px 0 0}
  .steps3 .step:last-of-type{border-right:0}
}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--r)}
.s{padding:22px 18px;border-right:var(--r);border-bottom:var(--r)}
.s:nth-child(2n){border-right:0}
.s:nth-child(n+3){border-bottom:0}
.s .v{font-weight:900;font-size:clamp(30px,8.5vw,42px);line-height:1;margin-top:11px;
  letter-spacing:-.02em;word-break:break-word}
.s .v small{font-size:.44em;font-weight:800;color:var(--muted)}
.s .v.wait{font-size:clamp(17px,4.6vw,22px);line-height:1.2;letter-spacing:.02em}
.s .sub{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.4}
.s.dark{background:var(--ink);color:var(--paper)}
.s.dark .lbl{color:var(--yellow)} .s.dark .sub{color:#a3aa9c} .s.dark .v small{color:#a3aa9c}
@media(min-width:900px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .s{border-bottom:0}
  .s:nth-child(2n){border-right:var(--r)}
  .s:nth-child(4n){border-right:0}
}

/* ---------- checker ---------- */
.chk{margin-top:14px;display:flex;border:var(--r);background:var(--surface)}
.chk input{flex:1;min-width:0;border:0;padding:18px 15px;font-family:var(--mono);
  font-size:16px;background:transparent;color:var(--ink);outline:none}
.chk button{flex:none;border:0;border-left:var(--r);background:var(--grid);color:var(--ink);
  font-weight:900;font-size:15px;padding:0 22px;cursor:pointer;letter-spacing:.04em}
.res{margin-top:16px;border:var(--r);padding:22px 19px;background:var(--surface)}
.res.in{background:var(--grid)} .res.out{background:var(--ink);color:var(--paper)}
.res .amt{font-weight:900;font-size:clamp(38px,12vw,58px);line-height:1;margin-top:9px;
  letter-spacing:-.03em;word-break:break-all}
.res .amt u{text-decoration:none;font-size:.27em;font-weight:800;margin-left:.14em;
  vertical-align:.6em}
.res .row{display:flex;justify-content:space-between;gap:14px;font-size:14px;margin-top:13px;
  padding-top:13px;border-top:1px solid rgba(21,23,19,.22);font-family:var(--mono);font-weight:500}
.res.out .row{border-top-color:rgba(245,247,242,.22)}
.res p{margin-top:11px;font-size:15px;line-height:1.5}
.noconn{margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  font-weight:700;color:var(--green);text-transform:uppercase}

/* ---------- split: leaderboard | cohort ---------- */
.split{border-bottom:var(--r)}
@media(min-width:900px){
  .split{display:grid;grid-template-columns:3fr 2fr}
  .split>.lb-sec{border-right:var(--r);border-bottom:0}
  .split>.pie-sec{border-bottom:0}
}
table{width:100%;border-collapse:collapse;margin-top:16px}
th{font-family:var(--mono);font-size:12px;letter-spacing:.12em;font-weight:700;
  text-align:right;padding:0 0 11px;border-bottom:var(--r);text-transform:uppercase}
th:first-child{text-align:left;width:32px} th:nth-child(2){text-align:left}
td{padding:15px 0;border-bottom:1px solid var(--border);text-align:right;
  font-family:var(--mono);font-size:15px}
td:first-child{text-align:left;font-weight:700} td:nth-child(2){text-align:left}
td.sh{font-weight:700}

/* cohort: donut on wide, honest stacked bar on narrow */
.cohort{margin-top:16px}
.donut{display:none}
.cbar{display:flex;height:34px;border:var(--r);background:var(--surface)}
.cbar i{display:block;height:100%}
.cbar i+i{border-left:2px solid var(--ink)}
.key{margin-top:12px}
.kr{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--border);font-size:14.5px}
.kr:last-child{border-bottom:0}
.kr .sw{width:14px;height:14px;flex:none;border:1.5px solid var(--ink)}
.kr .nm{flex:1} .kr .pc{font-family:var(--mono);font-weight:700}
.kr.hi{background:rgba(240,185,11,.16)}
.donut circle{cursor:pointer;transition:opacity .12s}
.donut circle.dim{opacity:.3}
@media(min-width:560px){
  .cohort{display:flex;gap:22px;align-items:center}
  .donut{display:block;flex:none;width:158px;height:158px}
  .cbar{display:none}
  .key{flex:1;min-width:190px;margin-top:0}
}

/* ---------- blocks ---------- */
.blk{padding:32px 20px;border-bottom:var(--r)}
.blk.dark{background:var(--ink);color:var(--paper)} .blk.dark h2{color:var(--paper)}
.blk.yell{background:var(--grid)}
.blk p{margin-top:13px;font-size:16px;line-height:1.55}
.blk.dark p{color:#c8cfc2} .blk.dark p b{color:var(--paper)}
.blk p b{font-weight:800}

.math{margin-top:18px;border:var(--r);background:var(--ink);color:var(--paper);
  padding:21px 18px;font-family:var(--mono);font-size:15px;line-height:2;overflow-x:auto}
.math b{color:var(--yellow);font-weight:700}
.math .c{color:#9aa392;font-size:13px}
.eg{margin-top:16px;border:var(--r);background:var(--surface);padding:19px 18px}
.eg h4{font-weight:900;font-size:16px}
.eg table{margin-top:11px;font-size:15px}
.eg td{padding:9px 0}
.eg td:last-child{text-align:right;font-weight:700}
.eg tr:last-child td{border-bottom:0}
@media(min-width:900px){.payout-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .payout-pair .math,.payout-pair .eg{margin-top:18px}}
.warn{margin-top:18px;border:var(--r);background:var(--grid);padding:19px 18px}
.warn h4{font-weight:900;font-size:17px}
.warn p{margin-top:9px;font-size:15.5px}
.warn b{font-weight:800}

.cta{display:block;padding:24px 20px;background:var(--grid);text-align:center;
  font-weight:900;font-size:19px;text-decoration:none;color:var(--ink);border-bottom:var(--r)}
footer{padding:24px 20px 40px;font-family:var(--mono);font-size:12.5px;line-height:2;
  color:var(--muted)}
footer a{color:var(--ink);font-weight:700}
.dot{display:inline-block;width:7px;height:7px;background:var(--green);margin-right:7px;
  vertical-align:middle}
.dot.old{background:var(--dead)}

/* ---------- added with the copy pass ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;font-weight:700;
  color:var(--muted);text-transform:uppercase;margin-bottom:14px}
h1{font-size:clamp(34px,8.4vw,58px);line-height:1.02}
.buysub{margin-top:10px;font-size:14px;font-weight:700;text-align:center}
.res .when{font-family:var(--mono);font-size:12.5px;font-weight:700;margin-top:4px;opacity:.75}
.eg .three td:first-child{font-weight:700}
.eg .three td:nth-child(2){text-align:right;color:var(--muted)}
.door{margin-top:18px;border:var(--r);background:var(--ink);color:var(--paper);padding:21px 18px}
.door h4{font-weight:900;font-size:18px;color:var(--yellow)}
.door p{margin-top:10px;font-size:15.5px;color:#c8cfc2;line-height:1.55}
.door p b{color:var(--paper);font-weight:800}

/* ---------- home: the headline metric ---------- */
.bigmetric{background:var(--grid);border-bottom:var(--r);padding:30px 20px;text-align:center}
.bigmetric .lbl{color:#4c3d05}
.bigmetric .n{font-weight:900;font-size:clamp(50px,16vw,96px);line-height:.94;
  margin-top:10px;letter-spacing:-.035em;word-break:break-word}
.bigmetric .n.wait{font-size:clamp(20px,5.6vw,32px);line-height:1.15}
.bigmetric .cap{margin-top:11px;font-size:14px;font-weight:600;max-width:38ch;
  margin-inline:auto;line-height:1.45}

/* ---------- hero: the whole game in four lines ---------- */
.rules{list-style:none;margin-top:22px;max-width:46ch}
.rules li{position:relative;padding:11px 0 11px 22px;font-size:16.5px;line-height:1.45;
  color:var(--muted);border-bottom:1px solid var(--border)}
.rules li:last-child{border-bottom:0}
.rules li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;
  background:var(--yellow);border:1.5px solid var(--ink)}
.rules li b{color:var(--ink);font-weight:800}

/* ---------- the size x time infographic ---------- */
.ig{margin-top:18px;max-width:560px}
.ig svg{display:block;width:100%;height:auto}
.ig text{font-family:var(--sans);fill:var(--ink);letter-spacing:0}
.ig text.mono{font-family:var(--mono)}
.ig-cap{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:58ch}
.ig-cap b{color:var(--ink);font-weight:800}

/* ---------- home: continuous money-flow argument ---------- */
.money-flow{margin-top:24px;width:100%;max-width:560px}
.money-flow svg{display:block;width:100%;height:auto}
.money-flow text{letter-spacing:0}

/* ---------- yield range strip (Claude Design 1c) ---------- */
.bigmetric .range{display:flex;margin-top:16px;border:var(--r);background:var(--paper)}
.bigmetric .range>div{flex:1;padding:10px 8px;border-right:var(--r);text-align:left}
.bigmetric .range>div:last-child{border-right:0}
.bigmetric .rl{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.04em}
.bigmetric .rv{font-weight:900;font-size:16px;margin-top:4px;color:var(--ink)}
.bigmetric .rnote{margin-top:11px;font-size:12.5px;line-height:1.45;color:#4c3d05;
  max-width:52ch;margin-inline:auto}

/* ---------- the plane: pot split bar ---------- */
.potbar{display:flex;height:62px;border:var(--r);margin-top:9px}
.potbar .pa{flex:80;background:var(--grid);display:flex;flex-direction:column;
  justify-content:center;padding:0 12px}
.potbar .pb{flex:20;background:var(--grid);border-left:var(--r);display:flex;
  flex-direction:column;justify-content:center;align-items:center}
.potbar .pv{font-weight:900;font-size:22px;line-height:1}
.potbar .pb .pv{font-size:16px}
.potbar .pv2{font-weight:900;font-size:15px}
.potbar .pk{font-family:var(--mono);font-size:11.5px;font-weight:700;margin-top:5px}
.potdead{display:flex;align-items:center;height:26px;padding:0 12px;border:var(--r);
  border-top:0;background:var(--surface);font-family:var(--mono);font-size:11.5px;
  font-weight:700;color:var(--dead)}

/* ================= carousel spacing pass =================
   Each block should read like one slide: more air, fewer competing elements. */
section,.blk{padding:44px 20px}
.bigmetric{padding:40px 20px}
.hero{padding:48px 20px 40px}
h2{margin-bottom:2px}
.lede{margin-top:14px;font-size:16.5px;line-height:1.55}
.rules{margin-top:26px}
.rules li{padding:14px 0 14px 24px;font-size:16.5px}

/* ---------- THE FIELD — live standing board ---------- */
.field{--now:100%;margin-top:20px;border:var(--r);background:var(--surface);padding:12px 12px 4px}
.fd-axis{position:relative;display:grid;grid-template-columns:1fr 84px;gap:0 10px;
  height:30px;margin-bottom:6px}
.fd-days{position:relative;border-bottom:2px solid var(--ink)}
.fd-days span{position:absolute;bottom:4px;transform:translateX(-50%);font-family:var(--mono);
  font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.06em}
.fd-days span:first-child{transform:none}
.fd-days span:last-of-type{transform:translateX(-100%)}
.fd-now{position:absolute;left:var(--now);bottom:-2px;transform:translateX(-50%);
  font-family:var(--mono);font-size:11.5px;font-weight:700;background:var(--ink);color:var(--yellow);
  padding:2px 5px;letter-spacing:.08em;white-space:nowrap;z-index:2;font-style:normal}
.fd-claimhead{align-self:end;padding-bottom:4px;text-align:right;font-family:var(--mono);
  font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.fr{display:grid;grid-template-columns:1fr 84px;gap:2px 10px;padding:7px 0 8px;
  border-bottom:1px solid var(--border)}
.fr:last-of-type{border-bottom:0}
/* Left-aligned, NOT space-between: pushed right, the entry-day label lands directly
   above the CLAIM bar and the two read as one broken column. */
.fr-meta{grid-column:1 / 3;display:flex;justify-content:flex-start;gap:10px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.03em;line-height:1;
  white-space:nowrap}
.fr-meta .who{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fr-meta .who b{color:var(--muted);font-weight:700;margin-right:6px}
.fr-meta .day{color:var(--muted)} .fr-meta .day.out{color:var(--dead)}
.fr-track{position:relative;align-self:center;min-height:4px}
.fr-track::after{content:"";position:absolute;left:var(--now);right:0;top:0;bottom:0;
  background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(93,101,90,.14) 3px 4px)}
.fr-bar,.fr-cut,.fr-ghost{position:absolute;top:0;bottom:0}
.fr-bar{background:var(--grid);border:1.5px solid var(--ink)}
.fr.dead .fr-bar{background:#dfe4d8;border-color:var(--muted)}
.fr-cut{width:3px;background:var(--dead);top:-3px;bottom:-3px;z-index:1}
.fr-ghost{border-bottom:2px dotted var(--muted);top:auto;height:0;bottom:calc(50% - 1px)}
.fr-claim{position:relative;align-self:center;height:12px}
.fr-claim i{position:absolute;left:0;top:0;bottom:0;background:var(--grid);border:1.5px solid var(--ink)}
.fr-claim b{position:absolute;left:0;top:50%;transform:translateY(-50%);font-family:var(--mono);
  font-size:11.5px;font-weight:700;line-height:1;padding-left:3px;mix-blend-mode:multiply;white-space:nowrap}
.fr-claim b.zero{color:var(--dead);font-size:12px}
.fd-more{padding:10px 0 9px;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--muted);text-transform:uppercase;border-top:2px solid var(--ink)}
.fd-empty{padding:26px 0 30px;text-align:center;font-family:var(--mono);font-size:12px;
  font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
@media (prefers-reduced-motion: no-preference){
  .fd-in .fr-bar{animation:fdGrow .55s cubic-bezier(.2,.8,.2,1) both;transform-origin:left center}
  @keyframes fdGrow{from{transform:scaleX(0)}}
}

/* ---------- three rules block ---------- */
.rulecards{display:grid;gap:0;margin-top:24px;border-top:var(--r)}
.rulecards .r{padding:20px 0;border-bottom:1px solid var(--border);display:grid;
  grid-template-columns:34px 1fr;gap:14px;align-items:start}
.rulecards .r:last-child{border-bottom:0}
.rulecards .n{width:34px;height:34px;background:var(--ink);color:var(--yellow);font-weight:900;
  font-size:15px;display:grid;place-items:center}
.rulecards h3{font-weight:900;font-size:17px;letter-spacing:.02em}
.rulecards p{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.rulecards p b{color:var(--ink);font-weight:800}
@media(min-width:900px){.rulecards{grid-template-columns:repeat(3,1fr);border-top:0;gap:0}
  .rulecards .r{border-bottom:0;border-right:1px solid var(--border);padding:0 22px 0 0}
  .rulecards .r:last-child{border-right:0}}

/* p.body had a max-width but never a margin, so every prose run on HOW collapsed into a
   single wall of text. Spacing is the only thing separating these ideas — they carry no
   heading of their own. */
p.body{margin-top:15px;font-size:16.5px;line-height:1.6}
.lede+p.body{margin-top:16px}
.eg+p.body,.math+p.body,.warn+p.body{margin-top:18px}

/* ---- yield block: header + weak-hands strip ---- */
.bigmetric .bm-h{font-size:clamp(21px,5.2vw,27px);font-weight:900;line-height:1.12;
  letter-spacing:-.01em;color:var(--ink);max-width:20ch;margin:0 auto 14px}
.bigmetric .bm-top{margin-top:14px;font-size:14.5px;line-height:1.45;color:#4c3d05;
  max-width:44ch;margin-left:auto;margin-right:auto}
.bigmetric .bm-top b{color:var(--ink);font-weight:800}
.bigmetric .rhead{margin-top:26px;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:#4c3d05}
.bigmetric .range{margin-top:8px;align-items:stretch}
.bigmetric .range>div{flex:1;padding:10px 10px 11px;border-right:var(--r)}
.bigmetric .range>div:last-child{border-right:0}
.bigmetric .rv u{text-decoration:none;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--muted);margin-left:4px;letter-spacing:.02em}
.bigmetric .rf{margin-top:5px;font-family:var(--mono);font-size:11px;font-weight:700;
  line-height:1.3;color:var(--muted);letter-spacing:.02em;min-height:1.3em}
.bridge{margin:26px 0 4px;padding:16px 18px;border:var(--r);background:var(--paper);
  font-size:16px;line-height:1.5;color:var(--muted);max-width:58ch}
.bridge b{color:var(--ink);font-weight:800}

/* ---- two-up figure panels ---- */
.twoup{margin-top:20px}
.twoup .ig{margin-top:30px}
.twoup .ig:first-child{margin-top:22px}
@media(min-width:900px){
  .twoup{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
  .twoup .ig,.twoup .ig:first-child{margin-top:0}
}
.ig-n{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  color:var(--ink);padding-bottom:9px;margin-bottom:14px;border-bottom:var(--r)}

/* ---- freshness stamp, next to the live numbers ---- */
.liveline{display:flex;align-items:center;gap:7px;padding:11px 20px;
  border-bottom:1px solid var(--border);font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.05em;color:var(--muted)}
.liveline .abs{color:#8b9287;letter-spacing:.03em}
section .liveline{padding-left:0;padding-right:0;border-bottom:0;padding-top:0;margin-bottom:10px}

/* ---- cohort table ---- */
.ctable{width:100%}
.ctable .ch,.ctable .cr{display:grid;grid-template-columns:1.6fr .7fr 1fr 1fr 1fr;
  gap:8px;align-items:center;padding:11px 0}
.ctable .ch{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);border-bottom:var(--r);padding-bottom:8px}
.ctable .ch span+span,.ctable .cr span+span{text-align:right}
.ctable .cr{border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13px;
  font-weight:700}
.ctable .cr:last-child{border-bottom:0}
.ctable .cr .nm{display:flex;align-items:center;gap:8px;font-family:var(--f);
  font-weight:800;font-size:14.5px}
.ctable .cr .nm .sw{width:11px;height:11px;flex:0 0 11px;border:1.5px solid var(--ink)}
.ctable .cr .up{color:var(--green)}
@media(max-width:560px){
  .ctable .ch,.ctable .cr{grid-template-columns:1.4fr .6fr .9fr .9fr .9fr;gap:5px;font-size:12.5px}
  .ctable .cr .nm{font-size:12.5px}
  .ctable .ch{font-size:11px;letter-spacing:.02em}
}

/* The cohort legend restated the table row for row. The table carries the swatches. */
.cohort .key{display:none}
.cohort{display:flex;gap:26px;align-items:center}
.cohort .ctable{flex:1 1 auto;min-width:0}
.cohort .donut{flex:0 0 116px;width:116px}
@media(max-width:700px){.cohort{display:block}.cohort .donut{display:none}}
.fr-claim u{position:absolute;left:0;top:calc(50% + 8px);text-decoration:none;
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--green);white-space:nowrap}
.fr{padding-bottom:14px}

/* ---- field legend: thickness is meaningless without a scale ---- */
.fd-legend{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 16px;
  padding:9px 0 12px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.fd-legend .lg{display:flex;align-items:center;gap:5px;font-family:var(--mono);
  font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.fd-legend .lg i{display:block;width:13px;background:var(--grid);
  border:1.5px solid var(--ink)}
.fd-legend .lgn{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--ink);letter-spacing:.02em}
@media(max-width:560px){.fd-legend .lgn{margin-left:0;width:100%}}

/* ---- formula callout + worked table ---- */
.fx{margin-top:26px;border:var(--r);background:var(--paper)}
.fx-h{padding:9px 14px;background:var(--ink);color:var(--yellow);font-family:var(--mono);
  font-size:11.5px;font-weight:700;letter-spacing:.09em}
.fx .math{margin:0;border:0}
.eg table.wk{width:100%;border-collapse:collapse}
.eg table.wk th{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.04em;text-align:right;padding:0 0 7px;border-bottom:1.5px solid var(--ink)}
.eg table.wk th:first-child{text-align:left;width:30%;white-space:nowrap}
.eg table.wk td{font-family:var(--mono);font-size:12.5px;padding:9px 0;text-align:right;
  border-bottom:1px solid var(--border);color:var(--muted)}
.eg table.wk td:first-child{text-align:left;color:var(--ink);font-weight:700}
.eg table.wk td b{color:var(--ink)}
.eg table.wk tr:last-child td{border-bottom:0}
.eg table.wk tr.be td{background:rgba(47,93,59,.07)}
.eg table.wk tr.be td b{color:var(--green)}
figure.ig+.fx{margin-top:30px}
.fx+.eg{margin-top:22px}
@media(max-width:560px){.eg table.wk td{font-size:12px}.eg table.wk th{font-size:11px}}
.eg .egn{margin:6px 0 12px;font-size:13px;line-height:1.5;color:var(--muted);max-width:58ch}
.eg .egn b{color:var(--ink);font-weight:800}
.eg table.wk .ms{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--green);
  letter-spacing:.04em;margin-left:5px;vertical-align:middle}
/* Charts need plot area, not bigger type — .ig's 560px cap starves them. */
.ig.wide{max-width:none}
.ig.wide+.ig.wide{margin-top:34px}
/* One chart, two drawings. A 620-wide viewBox squeezed into a 335px phone renders its
   7.6px labels at 4px — unreadable, and phones are the primary device. */
svg.cv-narrow{display:block}
.ig svg.cv-wide,svg.cv-wide{display:none}
@media(min-width:700px){
  .ig svg.cv-narrow,svg.cv-narrow{display:none}
  .ig svg.cv-wide,svg.cv-wide{display:block}
}


/* The negative-space opener wants the four denials tight and the payoff on its own line. */
.hero .say{font-size:19px;line-height:1.45}
.hero .say b{display:inline-block;margin-top:6px;color:var(--ink)}
/* Closing couplet — the line a section lands on. Given air so it reads as the landing. */
.cpl{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
  font-size:17.5px;line-height:1.45;color:var(--muted)}
.cpl b{color:var(--ink);font-weight:800}

/* ---- display face ----
   Reverted to Inter for headings — Chakra Petch at 700 read too light against Inter 900,
   and its wide squarish shapes fought the copy. It survives on the percentage figures
   only, which is the one place its technical look earns its keep. */
.bigmetric .n,.bigmetric .rv{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
h1,h2,.step h3,.rulecards h3,.bigmetric .bm-h,.strip .v,.s .v,.res .amt,.cta,.buy,.eg h4{
  font-family:var(--sans)}
h1,h2{font-weight:900;letter-spacing:-.015em}
h2{letter-spacing:-.02em}
.step h3,.rulecards h3,.bigmetric .bm-h{font-weight:900}
.strip .v,.s .v,.res .amt{font-weight:900;letter-spacing:-.01em}
.cta,.buy{font-weight:900}
.ig text{font-family:var(--sans)}

/* Descriptive sublines are prose, not data. Mono is for short uppercase data labels only;
   below ~12px its wide even spacing is what made these hard to read. */
.bigmetric .rf,.fd-legend .lg,.fd-legend .lgn,.fd-empty,.fd-more,.res .when{
  font-family:var(--sans);letter-spacing:0}
.bigmetric .rf{font-size:12.5px;line-height:1.35}

/* ================= section rhythm: yellow, then black, then paper ================= */
/* The hero carries the brand colour; the yield block goes dark so the one number the
   page exists for is the brightest thing on it. */
.hero{background:var(--grid);border-bottom:var(--r)}
.hero .say{color:#3d3103}
.hero .say b{color:var(--ink)}
.hero .eyebrow{color:#4c3d05}
.hero h1 em{background:var(--paper);box-shadow:none}
.buy{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.buy[href="#"],.buy.dead{background:rgba(21,23,19,.14);color:#4c3d05;border-color:#4c3d05}
.buysub{color:#3d3103}

.bigmetric{background:var(--ink);color:var(--paper);border-bottom:var(--r)}
.bigmetric .bm-h{color:var(--paper)}
.bigmetric .lbl{color:#9aa295}
.bigmetric .n{color:var(--yellow)}
.bigmetric .n.wait{color:#cfd5c8}
.bigmetric .cap{color:#aab2a4}
.bigmetric .bm-top{color:#cfd5c8}
.bigmetric .bm-top b{color:var(--paper)}
.bigmetric .rhead{color:#9aa295}
.bigmetric .range{background:transparent;border-color:var(--paper)}
.bigmetric .range>div{border-right-color:var(--paper)}
.bigmetric .range>div:last-child{border-right:0}
.bigmetric .rnote{color:#aab2a4}
.bigmetric .rnote b{color:var(--paper)}
.bigmetric .rnote a{color:var(--yellow)!important}

/* ---- BULL / BASE / BEAR: label left, the number given the room ---- */
.bigmetric .range{display:grid;grid-template-columns:1fr;text-align:left}
/* Single column on phones: the label row carries BULL plus up to three arrows, which
   does not fit a 58px gutter — it overflowed its own box. */
.bigmetric .range>div{display:grid;grid-template-columns:1fr;gap:9px;
  align-items:start;padding:16px;border-right:0;
  border-bottom:1px solid rgba(245,247,242,.28)}
.bigmetric .range>div:last-child{border-bottom:0}
.bigmetric .rt{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--yellow);align-self:start}
.bigmetric .rv{font-size:clamp(30px,8.5vw,40px);line-height:1;color:var(--paper)}
.bigmetric .rv u{font-size:12px;color:#9aa295;margin-left:7px;vertical-align:middle}
.bigmetric .rf{margin-top:6px;color:#9aa295;font-size:12.5px}
@media(min-width:760px){
  .bigmetric .range{grid-template-columns:repeat(3,1fr)}
  .bigmetric .range>div{border-bottom:0;border-right:1px solid rgba(245,247,242,.28);
    grid-template-columns:1fr;gap:0;align-content:start;padding:18px 18px 20px}
  .bigmetric .range>div:last-child{border-right:0}
  .bigmetric .rt{padding-top:0;margin-bottom:10px}
}
/* Two lines, always — the break is authored, not left to the column width. */
.hero h1{max-width:14ch}
.hero h1 br{display:block}
/* The disabled buy button sat muddy on the new yellow. Outline it instead. */
.buy[href="#"],.buy.dead{background:transparent;color:#4c3d05;border:var(--r);
  border-color:rgba(21,23,19,.45);box-shadow:none}
/* Six lines of centred 12px is a wall. Left-aligned and held to a readable measure. */
.bigmetric .rnote{text-align:left;max-width:62ch;margin:16px auto 0;font-size:13px;
  line-height:1.5}
.bigmetric{text-align:center}
.bigmetric .range{text-align:left}

/* "nothing" is the punchline of that heading — let it land. */
.bigmetric .bm-h em{font-style:normal;color:var(--yellow)}
/* One arrow, two, three — scaling with the yield, not with market direction. */
.bigmetric .rt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bigmetric .arw{display:inline-flex;gap:3px;align-items:center}
.bigmetric .ar{width:19px;height:19px;fill:none;stroke:var(--yellow);stroke-width:2.6;
  stroke-linecap:square;stroke-linejoin:miter}
.bigmetric .arw .ar:nth-child(1){opacity:1}
.bigmetric .arw .ar:nth-child(2){opacity:.72}
.bigmetric .arw .ar:nth-child(3){opacity:.48}
/* Hold the live subline to two lines — it is a caption, not a paragraph. */
.bigmetric .cap{max-width:46ch;margin-left:auto;margin-right:auto}

/* The mark breaks the bar on purpose. It is absolutely positioned so it does NOT drive
   the bar's height — otherwise the bar just grows to fit and nothing overhangs. */
.bar{overflow:visible;position:relative;height:62px;padding:0 20px}
.wm{display:flex;align-items:center;padding-left:74px}
.wm .mark{position:absolute;left:16px;top:1px;height:94px;width:auto;z-index:4;
  pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
@media(max-width:560px){
  .bar{height:56px;padding:0 14px}
  .wm{padding-left:58px;font-size:21px}
  .wm .mark{height:76px;left:10px;top:1px}
}

/* The mark hangs down over the strip below it, so that strip's text starts clear of it. */
.mode{padding-left:96px}
@media(max-width:560px){.mode{padding-left:78px}}

/* ---- contract address: copy, and two places to verify it ---- */
.carow{margin-top:18px;text-align:left}
.calbl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:#4c3d05;margin-bottom:7px}
.ca{display:flex;align-items:center;gap:10px;width:100%;margin:0;
  border:var(--r);background:var(--paper);padding:11px 12px;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--ink);text-align:left;transition:background .12s}
.ca:hover{background:#fff}
.ca .cav{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca .cacopy{flex:none;background:var(--ink);color:var(--yellow);padding:5px 9px;
  font-size:10.5px;letter-spacing:.1em}
.ca.ok .cacopy{background:var(--green);color:#fff}
.calinks{display:flex;gap:16px;margin-top:9px}
.calinks a{font-family:var(--mono);font-size:11.5px;font-weight:700;color:#4c3d05;
  text-decoration:none;border-bottom:1.5px solid rgba(21,23,19,.35);padding-bottom:2px}
.calinks a:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:560px){.ca .cav{font-size:11px}}
.ca.manual .cacopy{background:var(--yellow);color:var(--ink)}
.ca .cav::selection{background:var(--ink);color:var(--yellow)}

/* Language switch. The Chinese label is in Chinese — a reader scanning for their own
   language finds 中文, not "CHI". */
.tabs .lang{margin-left:auto;border-left:1px solid rgba(245,247,242,.22);
  color:var(--yellow);font-weight:800}
.tabs .lang:hover{background:rgba(255,204,0,.14)}
.tabs .lang{padding-left:18px;padding-right:20px}

/* ---- CJK measure ----
   `ch` is the width of the "0" glyph — about half a Chinese character. Every max-width
   set in ch therefore clamps Chinese copy to roughly half its intended measure, which is
   what split 「多／少」 across two lines in the yield heading. Widen for zh. */
html[lang^="zh"] .bm-h{max-width:none}
html[lang^="zh"] .say,html[lang^="zh"] .lede,html[lang^="zh"] .blk p,
html[lang^="zh"] p.body,html[lang^="zh"] .ig-cap,html[lang^="zh"] .bigmetric .rnote{
  max-width:40em}
html[lang^="zh"] .bigmetric .cap{max-width:32em}
html[lang^="zh"] h1{max-width:none}
/* Chinese should not break inside a word-like run */
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{word-break:keep-all}