/* ============================================================================
   PLEDGE · THE PLEDGE DRIVE
   A telethon tally board for a charity launchpad on Robinhood Chain (pons).
   Direction: clients/pledge/working/00_brand/BRAND.md

   REVISED 2026-09-06. The dark lime dashboard was measured against the two live
   competitors (pons.care, ponscharity.family) and lost: for a CHARITY product,
   near-black + acid lime reads degen, and warmth reads trustworthy.

   The world is now A SEALED INSTRUMENT. Bone paper, engraver's green ink, one
   wax red. The material is ENGRAVED LINE: guilloche rosettes drawn parametrically
   in code (brand/seal/seal.py), where every vault engraves its own.
   Direction: clients/pledge/_direction.md

   Type: Archivo Variable (wdth 62..125) is display and body. Chivo Mono
   Variable carries every figure and label; both pass type_audit --money
   (tnum + slashed zero), both OFL, subset with axes preserved.
   ============================================================================ */

@font-face{
  font-family:"Pledge Display";
  src:url("/fonts/display.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Pledge Mono";
  src:url("/fonts/mono.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* THE PAPER. layered warm bone, never one flat plane. */
  --void:#F4F1E7;
  --s1:#EFEBDD;
  --s2:#E8E3D2;
  --s3:#E0DAC6;

  --line:rgba(18,61,48,.16);
  --line-2:rgba(18,61,48,.30);
  --glass:rgba(18,61,48,.045);

  --ink:#123D30;              /* engraver's green. 10.70:1 on the paper */
  --ink-2:#2C5446;
  --ink-3:#4B6B5E;            /* 5.21:1 — the floor for readable text */
  --ink-4:#93A199;            /* 2.38:1 — decorative ONLY, never on real text */

  /* the accent IS the ink. a printed instrument has one colour and uses it well. */
  --lime:#123D30;
  --lime-2:#0C2C22;
  --lime-wash:rgba(18,61,48,.075);
  --lime-line:rgba(18,61,48,.34);
  --on-accent:#F4F1E7;

  --up:#1C6B45;
  --dn:#A6332B;               /* wax. doubles as the SEALED / PRE-LAUNCH lamp */
  --dn-wash:rgba(166,51,43,.10);
  --gold:#B08D3F;             /* decorative only */

  /* the plate material: an engraved tile, not a backlit split-flap */
  --flap-face:#EAE5D5;
  --flap-face-2:#DED7C2;
  --flap-glyph:#123D30;
  --flap-seam:rgba(18,61,48,.18);
  --flap-edge:rgba(255,255,255,.9);

  /* spacing scale, monotonic */
  --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:22px;
  --sp-5:34px; --sp-6:52px; --sp-7:84px;

  --r-1:6px; --r-2:10px; --r-3:16px;

  --mono:"Pledge Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Pledge Display",Archivo,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--disp);
  font-variation-settings:"wdth" 96;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* hidden, never clip: clip breaks overflow probes */
}
::selection{background:var(--lime); color:var(--on-accent)}

.mono{font-family:var(--mono); font-feature-settings:"zero" 1}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--lime); color:var(--on-accent); padding:10px 16px; border-radius:var(--r-1);
  font-weight:700; text-decoration:none;
}
.skip:focus{left:12px; top:12px}

/* ---------------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--sp-4);
  padding:12px clamp(16px,4vw,40px);
  background:rgba(244,241,231,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.lockup{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.mark{width:30px; height:30px; flex:none}
.mark-s{width:24px; height:24px}
.mark-plate{fill:var(--ink)}
.mark-ring{fill:none; stroke:var(--void); stroke-width:2.72}
.mark-pip{fill:var(--void)}
.wordmark{
  font-weight:860; letter-spacing:.06em; font-size:19px;
  font-variation-settings:"wdth" 125;
}
.wordmark-s{font-size:15px}

.tabs{display:flex; gap:2px; margin-inline:auto}
.tabs a{
  color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px;
  font-variation-settings:"wdth" 88;
}
.tabs a:hover{color:var(--ink); background:var(--s2)}
.tabs a.active{color:var(--lime); background:var(--lime-wash)}

.topbar-right{display:flex; align-items:center; gap:var(--sp-3)}
.lamp{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  color:var(--dn); background:var(--dn-wash);
  border:1px solid rgba(255,69,58,.35);
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.lamp-dot{
  width:7px; height:7px; border-radius:50%; background:var(--dn); flex:none;
  animation:lamp-breathe 2.6s ease-in-out infinite;
}
@keyframes lamp-breathe{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce){ .lamp-dot{animation:none} }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px;
  font-family:var(--disp); font-size:15px; font-weight:750;
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--lime); color:var(--on-accent)}
.btn-primary:hover{background:var(--lime-2)}
.btn-primary:disabled{
  background:var(--s3); color:var(--ink-3); cursor:not-allowed; transform:none;
}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3); background:var(--s1)}
.btn-connect{
  background:var(--s2); color:var(--ink); border-color:var(--line-2);
  font-size:13.5px; padding:9px 16px;
}
.btn-connect:hover{border-color:var(--lime-line); color:var(--lime)}
.btn-connect.connected{color:var(--lime); border-color:var(--lime-line); font-family:var(--mono); font-size:12.5px}

:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--lime); outline-offset:2px; border-radius:var(--r-1);
}

/* ---------------------------------------------------------------- hero */
.cover{
  padding:clamp(40px,6vw,84px) clamp(16px,4vw,40px) var(--sp-6);
  max-width:1240px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,64px); align-items:center;
}
@media (max-width:1000px){
  .cover{grid-template-columns:1fr; gap:var(--sp-5); align-items:start}
}
.kicker{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lime); margin:0 0 var(--sp-4);
}
.cover h1,.page-head h1{
  margin:0 0 var(--sp-4);
  font-size:clamp(44px,8.4vw,104px);
  line-height:.96; letter-spacing:-.015em; font-weight:870;
  font-variation-settings:"wdth" 118;
  text-wrap:balance;
}
.lede{max-width:620px; color:var(--ink-2); font-size:17.5px; margin:0 0 var(--sp-5)}
.hero-cta{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-7)}

/* the board */
.board-frame{
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--line-2);
  border-radius:var(--r-3);
  box-shadow:inset 0 1px 0 var(--glass), 0 30px 60px rgba(0,0,0,.45);
  padding:clamp(18px,3.4vw,36px);
}
.board-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap;
}
.board-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2);
}
.board-lamp{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dn);
}
.board-lamp .lamp-dot{width:6px; height:6px}

/* flap tiles */
.flapline{display:flex; gap:5px; flex-wrap:wrap}
.flap{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-feature-settings:"zero" 1; font-weight:560;
  color:var(--flap-glyph);
  background:linear-gradient(180deg,var(--flap-face) 0 49%,var(--flap-face-2) 51% 100%);
  border:1px solid var(--flap-edge);
  border-radius:var(--r-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 5px rgba(0,0,0,.5);
}
.flap::before{
  content:""; position:absolute; left:0; right:0; top:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  border-radius:var(--r-1) var(--r-1) 0 0; pointer-events:none;
}
.flap::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  margin-top:-1px; background:var(--flap-seam); pointer-events:none;
}
.flapline-s .flap::after{height:1px; margin-top:0}
.flap.blank{color:var(--ink-4); background:var(--s1)}
.flap.sym{color:var(--lime)}
.flapline-xl{justify-content:center; padding:var(--sp-4) 0}
.flapline-xl .flap{width:clamp(46px,7.2vw,88px); height:clamp(64px,10vw,120px); font-size:clamp(34px,5.2vw,66px)}
.flapline-m  .flap{width:34px; height:46px; font-size:24px}
.flapline-s  .flap{width:22px; height:30px; font-size:15px}
.flapline-s{gap:3px}
@media (max-width:520px){
  .flapline-m .flap{width:27px; height:38px; font-size:19px}
}

.flap .flap-top{
  position:absolute; inset:0 0 50% 0; overflow:hidden; border-radius:var(--r-1) var(--r-1) 0 0;
  display:flex; align-items:flex-start; justify-content:center;
  background:linear-gradient(180deg,var(--flap-face),var(--flap-face-2));
  transform-origin:bottom; backface-visibility:hidden; pointer-events:none;
  opacity:0;
}
.flap.flip .flap-top{opacity:1; animation:flapdown .38s cubic-bezier(.55,0,.55,1)}
@keyframes flapdown{
  0%{transform:rotateX(0); }
  100%{transform:rotateX(-88deg);}
}
@media (prefers-reduced-motion:reduce){
  .flap.flip .flap-top{animation:none; opacity:0}
}

.board-substats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4); margin-top:var(--sp-5);
  border-top:1px solid var(--line); padding-top:var(--sp-4);
}
.substat{display:flex; flex-direction:column; gap:10px; min-width:0}
.substat-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.board-honesty{
  margin:var(--sp-4) 0 0; max-width:640px; color:var(--ink-3); font-size:14.5px;
}
@media (max-width:760px){
  .board-substats{grid-template-columns:1fr; gap:var(--sp-3)}
  .substat{flex-direction:row; align-items:center; justify-content:space-between}
}

/* ------------------------------------------------------------- page heads */
/* Each page opens the same way and then diverges: the shapes below are the
   point of splitting the site up. A head, then a structure that belongs to
   that page and to no other. */
.page-head{
  padding:clamp(38px,5.5vw,72px) clamp(16px,4vw,40px) var(--sp-5);
  max-width:820px; margin-inline:auto 0;
  padding-inline-start:max(clamp(16px,4vw,40px),calc(50vw - 590px));
}
.page-head-wide{max-width:1000px}
.page-head-doc{max-width:760px}
.page-head-tight{padding-bottom:var(--sp-4)}
.cover h1,.page-head h1{margin:0 0 var(--sp-4)}
.page-head h1{
  font-size:clamp(38px,6vw,68px); line-height:1; letter-spacing:-.015em;
  font-weight:860; font-variation-settings:"wdth" 116; text-wrap:balance;
}
.page-head .lede{margin-bottom:0; font-size:17px}

/* reveal on scroll: transform+opacity only, JS-added, reduced-motion safe */
.rv{opacity:0; transform:translateY(18px)}
.rv.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none} }

/* ---------------------------------------------------------------- launch */
.launch-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-5); align-items:start;
}
@media (max-width:900px){ .launch-grid{grid-template-columns:1fr} }

.launch-form{display:flex; flex-direction:column; gap:var(--sp-4)}
.field{display:flex; flex-direction:column; gap:8px}
.field label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2);
}
.field input[type=text], .field select{
  background:var(--s1); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-2);
  padding:13px 15px; font-family:var(--disp); font-size:15.5px;
  width:100%;
}
.field input[type=text]::placeholder{color:var(--ink-4)}
.field input[type=text]:hover, .field select:hover{border-color:var(--ink-3)}
.field select{appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 51%);
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
  background-size:6px 6px; background-repeat:no-repeat;
}
#fTicker{font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase}
#fWallet{font-family:var(--mono); font-size:13.5px}
.field-hint{margin:2px 0 0; font-size:13px; color:var(--ink-3)}

.slider-row{display:flex; align-items:center; gap:var(--sp-3)}
.slider-out{
  min-width:64px; text-align:right; font-size:22px; font-weight:640; color:var(--lime);
}
input[type=range]{
  flex:1; appearance:none; -webkit-appearance:none; height:30px; background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:3px;
  background:linear-gradient(90deg,var(--lime) var(--fill,100%),var(--s3) var(--fill,100%));
}
input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--lime); border:3px solid var(--void);
  box-shadow:0 0 0 1px var(--lime-line);
  margin-top:-8px;
}
input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:var(--s3)}
input[type=range]::-moz-range-progress{height:6px; border-radius:3px; background:var(--lime)}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--lime); border:3px solid var(--void);
}

.preflight{
  margin-top:var(--sp-2);
  background:var(--s1); border:1px solid var(--line);
  border-radius:var(--r-3); padding:var(--sp-4);
}
.preflight h3{
  margin:0 0 6px; font-size:16px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; font-variation-settings:"wdth" 100;
}
.preflight-sub{margin:0 0 var(--sp-3); color:var(--ink-3); font-size:13.5px}
.checks{list-style:none; margin:0 0 var(--sp-4); padding:0;
  display:flex; flex-direction:column; gap:10px}
.checks li{
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; color:var(--ink-2);
}
.check-dot{
  width:9px; height:9px; border-radius:50%; flex:none; align-self:center;
  background:var(--ink-4);
}
.checks li.ok .check-dot{background:var(--up)}
.checks li.fail .check-dot{background:var(--dn)}
.checks li.warn .check-dot{background:#e0a83c}
.check-note{
  font-style:normal; font-family:var(--mono); font-size:11.5px;
  color:var(--ink-3); margin-left:auto; text-align:right;
}
.checks li.ok .check-note{color:var(--up)}
.checks li.fail .check-note{color:var(--dn)}
.btn-launch{width:100%}
.preflight-state{
  margin:var(--sp-3) 0 0; text-align:center;
  font-size:11.5px; letter-spacing:.14em; color:var(--dn);
}

/* the pledge card */
.pledge-card{
  position:sticky; top:96px;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--line-2); border-radius:var(--r-3);
  box-shadow:inset 0 1px 0 var(--glass), 0 24px 50px rgba(0,0,0,.4);
  padding:var(--sp-4);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.card-title{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2);
}
.chip{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--on-accent); background:var(--lime);
  padding:5px 11px; border-radius:999px; font-weight:640; white-space:nowrap;
}
.chip.partial{background:transparent; color:var(--lime); border:1px solid var(--lime-line)}
.card-name{margin:var(--sp-3) 0 var(--sp-4); font-size:19px; font-weight:750; color:var(--ink)}
.card-terms{margin:0; display:flex; flex-direction:column}
.card-terms > div{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  padding:11px 0; border-top:1px solid var(--line);
}
.card-terms dt{
  color:var(--ink-3); font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; flex:none; padding-top:2px;
}
.card-terms dd{margin:0; text-align:right; font-size:14px; color:var(--ink-2); max-width:60%}
.card-foot{
  margin:var(--sp-4) 0 0; padding-top:var(--sp-3); border-top:1px solid var(--line);
  color:var(--ink-3); font-size:13px;
}

/* ---------------------------------------------------------------- route */
.route{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-3);
}
@media (max-width:1020px){ .route{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .route{grid-template-columns:1fr} }
.route li{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4);
  box-shadow:inset 0 1px 0 var(--glass);
}
.route-step{font-size:12px; color:var(--lime); letter-spacing:.2em}
.route h3{
  margin:var(--sp-3) 0 8px; font-size:19px; font-weight:820;
  font-variation-settings:"wdth" 108;
}
.route p{margin:0; font-size:14px; color:var(--ink-2)}

/* ---------------------------------------------------------------- board table */
.table-wrap{overflow-x:auto; border:1px solid var(--line-2); border-radius:var(--r-3); background:var(--s1)}
.board-table{width:100%; border-collapse:collapse; min-width:640px}
.board-table th{
  text-align:left; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  padding:14px 18px; border-bottom:1px solid var(--line-2); font-weight:500;
}
.board-table th.num{text-align:right}
.board-table td{padding:14px 18px; border-bottom:1px solid var(--line)}
.empty-row td{padding:var(--sp-6) var(--sp-4); text-align:center}
.empty-row .flapline{justify-content:center; margin-bottom:var(--sp-4)}
.empty-row p{margin:0 auto; max-width:420px; color:var(--ink-3); font-size:14.5px}

/* ---------------------------------------------------------------- causes */
.causes-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3);
}
@media (max-width:1020px){ .causes-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .causes-grid{grid-template-columns:1fr} }
.cause{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:10px;
  box-shadow:inset 0 1px 0 var(--glass);
}
.cause-tag{
  align-self:flex-start; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lime);
  background:var(--lime-wash); padding:4px 9px; border-radius:999px;
}
.cause h3{margin:2px 0 0; font-size:16.5px; font-weight:780; line-height:1.25;
  font-variation-settings:"wdth" 104}
.cause p{margin:0; font-size:13.5px; color:var(--ink-3); flex:1}
.cause-raised{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line); padding-top:10px;
}
.cause-raised span:first-child{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.cause-raised span:last-child{font-family:var(--mono); font-size:14px; color:var(--ink-2)}
.causes-note{margin:var(--sp-4) 0 0; color:var(--ink-3); font-size:13px; max-width:640px}

/* ---------------------------------------------------------------- ledger */
.ledger-schema{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-5);
  align-items:start;
}
@media (max-width:900px){ .ledger-schema{grid-template-columns:1fr} }
.schema{margin:0; border:1px solid var(--line-2); border-radius:var(--r-3);
  background:var(--s1); overflow:hidden}
.schema > div{
  display:flex; gap:var(--sp-4); padding:13px 18px; border-bottom:1px solid var(--line);
}
.schema > div:last-child{border-bottom:0}
.schema dt{
  flex:none; width:110px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lime); padding-top:2px;
}
.schema dd{margin:0; font-size:14px; color:var(--ink-2)}
.ledger-empty{
  border:1px dashed var(--line-2); border-radius:var(--r-3); padding:var(--sp-5);
  text-align:center;
}
.ledger-empty-stamp{
  display:inline-block; font-size:13px; letter-spacing:.22em; color:var(--ink-2);
  border:1px solid var(--line-2); padding:9px 16px; border-radius:var(--r-1);
  margin-bottom:var(--sp-3);
}
.ledger-empty p{margin:0 auto; max-width:420px; color:var(--ink-3); font-size:14.5px}

/* ---------------------------------------------------------------- terms */
.terms-list{
  margin:0; padding:0; list-style:none;
  counter-reset:term;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3);
}
@media (max-width:820px){ .terms-list{grid-template-columns:1fr} }
.terms-list li{
  counter-increment:term;
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-4) 64px; position:relative;
  font-size:14.5px; color:var(--ink-2);
}
.terms-list li::before{
  content:counter(term,decimal-leading-zero);
  position:absolute; left:22px; top:24px;
  font-family:var(--mono); font-size:12px; color:var(--lime); letter-spacing:.08em;
}
.terms-list strong{color:var(--ink); font-weight:780}

/* ---------------------------------------------------------------- footer */
.footer{
  border-top:1px solid var(--line);
  padding:var(--sp-6) clamp(16px,4vw,40px) var(--sp-7);
  max-width:1180px; margin-inline:auto;
}
.footer-lockup{display:flex; align-items:center; gap:9px; margin-bottom:var(--sp-3)}
.footer-line{margin:0 0 var(--sp-4); color:var(--ink-3); font-size:14px; max-width:520px}
.footer-nav{display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4)}
.footer-nav a{
  color:var(--ink-2); text-decoration:none; font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.footer-nav a:hover{color:var(--lime)}
.footer-fine{margin:0; color:var(--ink-3); font-size:12.5px}

/* ---------------------------------------------------------------- topbar collapse */
/* Eight nav items no longer fit beside the lockup AND the wallet button: at
   900-1100px the Connect button was pushed clean off the viewport. Measured by
   element rects, because body{overflow-x:hidden} hides it from a scrollWidth
   probe. Shed in three stages instead of one. */
@media (max-width:1150px){
  .lamp{display:none}          /* the board and the ribbon already say PRE-LAUNCH */
}
@media (max-width:1040px){
  .tabs a{padding:8px 9px; font-size:12.5px; letter-spacing:.06em}
}
@media (max-width:940px){
  .tabs{display:none}
  .topbar{justify-content:space-between}
}

/* board rows, live */
.row-ok{color:var(--up); font-size:11.5px; letter-spacing:.14em}
.row-bad{color:var(--dn); font-size:11.5px; letter-spacing:.14em}
.board-table td .chip{font-size:10.5px; padding:4px 9px}

/* flagship · LAUNCH 001 */
.flagship{
  background:var(--s1); border:1px solid var(--lime-line); border-radius:var(--r-3);
  box-shadow:inset 0 1px 0 var(--glass);
  padding:var(--sp-4) var(--sp-5);
}
.flagship-head{display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-4)}
.flagship-index{font-size:12px; letter-spacing:.22em; color:var(--lime)}
.flagship-body{display:flex; gap:var(--sp-5); align-items:flex-start; flex-wrap:wrap}
.flagship-copy{flex:1; min-width:260px}
.flagship-copy h2{margin:0 0 var(--sp-2); font-size:22px; font-weight:830;
  font-variation-settings:"wdth" 110; line-height:1.15}
.flagship-copy p{margin:0; color:var(--ink-2); font-size:14.5px; max-width:56ch}
.flagship-copy strong{color:var(--ink)}

/* causes directory controls */
.causes-controls{display:flex; gap:var(--sp-3); align-items:center;
  flex-wrap:wrap; margin-bottom:var(--sp-4)}
#causeSearch{
  background:var(--s1); color:var(--ink); border:1px solid var(--line-2);
  border-radius:999px; padding:10px 18px; font-family:var(--disp); font-size:14.5px;
  width:min(320px,100%); -webkit-appearance:none; appearance:none;
}
#causeSearch::placeholder{color:var(--ink-3)}
#causeSearch::-webkit-search-cancel-button{-webkit-appearance:none}
.cause-chips{display:flex; gap:6px; flex-wrap:wrap}
.cause-chips button{
  background:transparent; color:var(--ink-2); border:1px solid var(--line-2);
  border-radius:999px; padding:7px 13px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.cause-chips button:hover{color:var(--ink); border-color:var(--ink-3)}
.cause-chips button.on{color:var(--on-accent); background:var(--lime); border-color:var(--lime)}
.causes-more{margin-top:var(--sp-4)}
.cause-route{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--up);
}
.causes-grid.capped .cause:nth-child(n+25){display:none}
.cause[hidden]{display:none}

/* the receipts */
.receipts-stats{display:grid; grid-template-columns:1.45fr 1fr 1fr;
  gap:var(--sp-3); margin-bottom:var(--sp-5)}
.rstat:first-child .rstat-num{font-size:clamp(48px,6vw,72px)}
@media (max-width:820px){ .receipts-stats{grid-template-columns:1fr} }
.rstat{background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4); box-shadow:inset 0 1px 0 var(--glass)}
.rstat-num{display:block; font-family:var(--mono); font-feature-settings:"zero" 1;
  font-size:clamp(34px,4vw,48px); font-weight:640; color:var(--lime);
  margin-bottom:var(--sp-2); letter-spacing:-.01em}
.rstat p{margin:0; font-size:13.5px; color:var(--ink-2)}
.receipts-grid{display:flex; flex-direction:column; gap:var(--sp-3)}
.receipt-card{background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4) var(--sp-5); box-shadow:inset 0 1px 0 var(--glass);
  display:grid; grid-template-columns:280px 1fr; gap:var(--sp-5); align-items:start}
@media (max-width:820px){ .receipt-card{grid-template-columns:1fr; gap:var(--sp-2)} }
.receipt-card h3{margin:0; font-size:19px; font-weight:820; line-height:1.2;
  font-variation-settings:"wdth" 108}
.receipt-card p{margin:0; font-size:14px; color:var(--ink-2)}
.receipt-card a, .rstat a{color:var(--lime-2); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px}
.receipt-card a:hover, .rstat a:hover{color:var(--lime)}

/* permissionless sweep */
.btn-sweep{
  background:var(--lime); color:var(--on-accent); border:0; border-radius:999px;
  padding:6px 14px; cursor:pointer;
  font-family:var(--disp); font-size:12.5px; font-weight:750;
}
.btn-sweep:hover{background:var(--lime-2)}
.btn-sweep:disabled{background:var(--s3); color:var(--ink-3); cursor:not-allowed}
.sweep-idle{font-size:11px; color:var(--ink-3); letter-spacing:.06em}
.ledger-net{color:var(--lime)}
#ledgerWrap{margin-top:var(--sp-4)}
#ledgerWrap a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px;
  font-family:var(--mono); font-size:12px}
.sweep-note{margin:var(--sp-3) 0 0; font-size:13.5px; color:var(--ink-2); max-width:70ch}
.sweep-note.bad{color:var(--dn)}
.terms-list a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}
.terms-list a:hover{color:var(--lime)}

/* ============================================================================
   THE PAGE SYSTEM
   The site used to be one scroll. It is now a cover plus seven segments, and
   the whole point of that split is that each segment gets a SHAPE instead of
   the same stacked sections with different words in them:

     cover     two columns, the tally board as the object, then a run of show
     launch    a desk: form + live card, with the preflight as a fixed rig
     route     a vertical track down a spine, each step marked chain or desk
     board     a wide instrument panel, the table dominant
     causes    a dense directory under a sticky filter bar
     ledger    a narrow document column
     receipts  an essay measure with hanging case numbers
     terms     a narrow legal column

   Everything below is that. Shared chrome (topbar, ribbon, footer) lives at
   the top and bottom of this block.
   ============================================================================ */

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------- nav state */
.tabs a[aria-current="page"]{color:var(--lime); background:var(--lime-wash)}

/* the collapsed nav has to OPEN, not vanish: on a seven-page site a hidden
   nav is a dead end, where on the old one-pager you could still scroll */
.menu-btn{
  display:none; align-items:center; justify-content:center;
  width:40px; height:38px; padding:0; cursor:pointer;
  background:var(--s2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:999px;
}
.menu-btn:hover{border-color:var(--lime-line)}
.menu-bars{display:flex; flex-direction:column; gap:5px; width:16px}
.menu-bars i{display:block; height:2px; background:currentColor; border-radius:2px}
.menu-btn[aria-expanded="true"]{color:var(--lime); border-color:var(--lime-line)}

.menu-panel{
  position:sticky; top:63px; z-index:49;
  background:rgba(244,241,231,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
}
.menu-panel nav{display:flex; flex-direction:column; padding:var(--sp-2) clamp(16px,4vw,40px) var(--sp-4)}
.menu-panel a{
  color:var(--ink-2); text-decoration:none;
  font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a[aria-current="page"]{color:var(--lime)}
@media (max-width:940px){ .menu-btn{display:inline-flex} }
@media (min-width:941px){ .menu-panel{display:none} }

/* --------------------------------------------------------- the tally ribbon */
/* the cover carries the big board; every other page carries this, so the show
   is still running while you read the fine print */
.ribbon{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--s1),var(--void));
}
.ribbon-inner{
  max-width:1240px; margin-inline:auto;
  padding:var(--sp-3) clamp(16px,4vw,40px);
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
}
.ribbon-title{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--lime);
  flex:none;
}
.ribbon-stats{display:flex; gap:clamp(14px,2.4vw,32px); flex-wrap:wrap; flex:1; min-width:0}
.rib{display:flex; align-items:center; gap:10px; min-width:0}
.rib-k{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}
.ribbon-cta{
  flex:none; color:var(--lime); text-decoration:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--lime-line); border-radius:999px; padding:7px 14px;
}
.ribbon-cta:hover{background:var(--lime-wash)}
@media (max-width:700px){
  .ribbon-title,.ribbon-cta{display:none}
  .ribbon-stats{gap:var(--sp-3)}
  .ribbon-inner{padding-block:10px}
}

/* -------------------------------------------------------------- page heads */
.page-head{
  max-width:1180px; margin-inline:auto;
  padding:clamp(36px,5vw,68px) clamp(16px,4vw,40px) var(--sp-5);
}
.page-head .kicker{margin-bottom:var(--sp-3)}
.page-head h1{max-width:15ch}
.page-head .lede{max-width:66ch; margin-bottom:0}
.page-head-doc h1{max-width:13ch}
.page-head-doc .lede{max-width:58ch}

/* ------------------------------------------------------------------ cover */
.cover-copy{min-width:0}
.cover .hero-cta{margin-bottom:0}
.cover .lede{margin-bottom:var(--sp-4); font-size:17px}
.cover .board-frame{margin:0}
@media (max-width:1000px){
  .cover h1{font-size:clamp(44px,10vw,72px)}
}

/* ---------------------------------------------------------- the run of show */
/* the segment rail IS the navigation on the cover: numbered rows, a live
   readout on the right of each, and nothing that looks like a card grid */
.rundown-wrap{max-width:1240px; margin-inline:auto; padding:var(--sp-6) clamp(16px,4vw,40px)}
.rundown-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap;
  border-bottom:1px solid var(--line-2); padding-bottom:var(--sp-3); margin-bottom:var(--sp-2);
}
.rundown-head h2{
  margin:0; font-size:clamp(22px,2.6vw,30px); font-weight:840;
  font-variation-settings:"wdth" 112; letter-spacing:-.005em;
}
.rundown-head p{margin:0; color:var(--ink-3); font-size:14px}
.rundown{list-style:none; margin:0; padding:0; counter-reset:seg}
.rundown li{border-bottom:1px solid var(--line)}
.rundown a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--sp-4); align-items:center;
  padding:var(--sp-4) 0; text-decoration:none; color:var(--ink);
  position:relative;
}
.rundown a::before{
  content:""; position:absolute; left:calc(clamp(16px,4vw,40px) * -1); right:calc(clamp(16px,4vw,40px) * -1);
  top:0; bottom:0; background:var(--lime-wash); opacity:0;
  transition:opacity .18s ease;
}
.rundown a:hover::before{opacity:1}
.rd-no{
  font-size:13px; letter-spacing:.14em; color:var(--ink-3);
  width:2.4em; flex:none; transition:color .18s ease;
}
.rundown a:hover .rd-no{color:var(--lime)}
.rd-body{display:flex; flex-direction:column; gap:5px; min-width:0}
.rd-title{
  font-size:clamp(20px,2.6vw,28px); font-weight:820; line-height:1.1;
  font-variation-settings:"wdth" 110; letter-spacing:-.005em;
}
.rd-line{color:var(--ink-3); font-size:14px; max-width:70ch}
.rd-state{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px;
  padding:6px 12px; white-space:nowrap; flex:none;
}
@media (max-width:640px){
  .rundown a{grid-template-columns:auto minmax(0,1fr); row-gap:var(--sp-2)}
  .rd-state{grid-column:2; justify-self:start}
}

/* ------------------------------------------------------------ the flagship */
.flagship-wrap{max-width:1240px; margin-inline:auto; padding:0 clamp(16px,4vw,40px) var(--sp-6)}
.flagship-links{margin-top:var(--sp-3) !important; font-size:13px}
.flagship-links a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}
.flagship-links a:hover{color:var(--lime)}

/* ------------------------------------------------------------------- desk */
/* the launch page is a workspace, not a section: form left, live card right,
   and the instrument rig pinned under both */
.desk{max-width:1180px; margin-inline:auto; padding-bottom:var(--sp-6)}
.desk-grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(22px,3vw,48px); align-items:start;
  padding:0 clamp(16px,4vw,40px);
}
@media (max-width:900px){ .desk-grid{grid-template-columns:1fr} }
.desk-note{
  border-top:1px solid var(--line); padding-top:var(--sp-4); margin-top:var(--sp-2);
}
.desk-note h2{
  margin:0 0 var(--sp-2); font-size:15px; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; font-variation-settings:"wdth" 100;
}
.desk-note p{margin:0; color:var(--ink-3); font-size:14px; max-width:62ch}
.desk-note a,.field-hint a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}
.desk-note a:hover,.field-hint a:hover{color:var(--lime)}
.pledge-card{top:88px}

/* --------------------------------------------------------------- the rig */
/* the four lights and the button ride at the bottom of the launch page, so
   "why is this button off" never needs a scroll to answer */
.rig{
  position:sticky; bottom:0; z-index:40;
  background:rgba(244,241,231,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--lime-line);
  padding:var(--sp-3) clamp(16px,4vw,40px) var(--sp-3);
}
.rig-inner{
  max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-5); align-items:center;
}
.rig-lights{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; min-width:0}
.rig-title{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--lime);
  margin:0; flex:none; font-weight:500;
}
.rig .checks{
  flex-direction:row; flex-wrap:wrap; gap:var(--sp-4);
  margin:0; flex:1; min-width:0;
}
.rig .checks li{flex-direction:row; align-items:center; gap:8px; font-size:13px}
.check-name{color:var(--ink-2); white-space:nowrap}
.rig .check-note{margin-left:0; font-size:11px}
.rig-act{display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:230px}
.rig .btn-launch{width:100%}
.rig .preflight-state{margin:0; font-size:10.5px}
.rig-fine{
  max-width:1180px; margin:var(--sp-2) auto 0; color:var(--ink-3); font-size:11.5px;
}
@media (max-width:860px){
  .rig-inner{grid-template-columns:1fr; gap:var(--sp-3)}
  .rig-title{display:none}
  .rig .checks{gap:var(--sp-2) var(--sp-4)}
  .rig .checks li{width:calc(50% - var(--sp-4))}
  .rig-act{min-width:0}
  .rig-fine{display:none}
}

/* ------------------------------------------------------------------ track */
/* the route runs DOWN a spine instead of across five equal cards, because the
   five steps are a sequence and two of them are done by people */
.track{
  list-style:none; margin:0 auto; padding:0 clamp(16px,4vw,40px) var(--sp-6);
  max-width:900px; position:relative;
}
.track li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-4);
  padding-bottom:var(--sp-4); position:relative;
}
.track-no{position:relative; display:flex; justify-content:center; padding-top:var(--sp-4)}
.track li:not(:last-child) .track-no::after{
  content:""; position:absolute; top:calc(var(--sp-4) + 34px); bottom:calc(var(--sp-4) * -1);
  width:1px; background:linear-gradient(180deg,var(--lime-line),var(--line));
}
.track-card{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--sp-4); box-shadow:inset 0 1px 0 var(--glass);
}
.track-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-2); flex-wrap:wrap;
}
.track-card h2{
  margin:0; font-size:21px; font-weight:820; font-variation-settings:"wdth" 108;
}
.track-card p{margin:0; font-size:14.5px; color:var(--ink-2)}
.track-card a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}
.track-card a:hover{color:var(--lime)}
.tag-chain,.tag-desk{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.tag-chain{color:var(--lime); background:var(--lime-wash); border:1px solid var(--lime-line)}
.tag-desk{color:var(--ink-2); background:var(--s3); border:1px solid var(--line-2)}

/* the on-chain / desk comparison that closes the route */
.split{max-width:1180px; margin-inline:auto; padding:0 clamp(16px,4vw,40px) var(--sp-7)}
.split-title{
  margin:0 0 var(--sp-4); font-size:clamp(24px,3vw,36px); font-weight:840;
  font-variation-settings:"wdth" 112; letter-spacing:-.005em;
}
.split-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-3)}
@media (max-width:760px){ .split-grid{grid-template-columns:1fr} }
.split-col{
  border:1px solid var(--line); border-radius:var(--r-3); padding:var(--sp-4);
  background:var(--s1); box-shadow:inset 0 1px 0 var(--glass);
}
.split-chain{border-color:var(--lime-line)}
.split-col h3{
  margin:0 0 var(--sp-3); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500;
}
.split-chain h3{color:var(--lime)}
.split-desk h3{color:var(--ink-2)}
.split-col ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:9px}
.split-col li{font-size:14.5px; color:var(--ink-2)}
.split-chain li::marker{color:var(--lime)}
.split-fine{
  margin:var(--sp-4) 0 0; color:var(--ink-3); font-size:13.5px; max-width:76ch;
}
.split-fine a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}

/* ------------------------------------------------------------- instrument */
.instrument{max-width:1320px; margin-inline:auto; padding:0 clamp(16px,4vw,40px)}
.instrument-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); padding-bottom:var(--sp-3); flex-wrap:wrap;
}
.instrument-title{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--lime);
}
.instrument-meta{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.notes-grid{
  max-width:1320px; margin-inline:auto; padding:var(--sp-6) clamp(16px,4vw,40px) var(--sp-7);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3);
}
@media (max-width:900px){ .notes-grid{grid-template-columns:1fr} }
.note-card{
  border-top:2px solid var(--lime-line); padding-top:var(--sp-3);
}
.note-card h2{
  margin:0 0 var(--sp-2); font-size:16px; font-weight:800;
  font-variation-settings:"wdth" 104;
}
.note-card p{margin:0; color:var(--ink-3); font-size:14px}
.note-card a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}
.note-card .mono{color:var(--ink-2); font-size:13px}

/* -------------------------------------------------------------- filterbar */
.filterbar{
  position:sticky; top:63px; z-index:30;
  background:rgba(244,241,231,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line);
  margin-bottom:var(--sp-4);
}
.filterbar-inner{
  max-width:1320px; margin-inline:auto;
  padding:var(--sp-3) clamp(16px,4vw,40px);
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
}
.filter-count{
  margin-left:auto; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}
.causes-grid,.causes-note{
  max-width:1320px; margin-inline:auto;
  padding-inline:clamp(16px,4vw,40px);
}
.causes-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.causes-note{padding-bottom:var(--sp-7); max-width:min(76ch,1320px)}
.causes-note a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}
.cause h2{
  margin:2px 0 0; font-size:16.5px; font-weight:780; line-height:1.25;
  font-variation-settings:"wdth" 104;
}
@media (max-width:1020px){ .causes-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .causes-grid{grid-template-columns:1fr} }

/* -------------------------------------------------------------- documents */
/* the ledger and the terms are documents: one narrow column, nothing beside it */
.doc{
  max-width:760px; margin-inline:auto;
  padding:0 clamp(16px,4vw,40px) var(--sp-7);
}
.doc-h{
  margin:var(--sp-6) 0 var(--sp-3); font-size:20px; font-weight:820;
  font-variation-settings:"wdth" 108;
  border-top:1px solid var(--line-2); padding-top:var(--sp-4);
}
.doc-p{margin:0 0 var(--sp-3); color:var(--ink-2); font-size:15px}
.doc-p a,.doc a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}
.doc-p a:hover{color:var(--lime)}
.doc .terms-list{grid-template-columns:1fr; gap:var(--sp-2)}
.doc .ledger-empty{margin-bottom:var(--sp-4)}

/* ----------------------------------------------------------------- essay */
/* the receipts page is the one you READ, so it gets a measure and a rhythm
   rather than a card grid */
.receipts-stats{
  max-width:1180px; margin-inline:auto;
  padding:0 clamp(16px,4vw,40px);
}
.essay{
  max-width:820px; margin-inline:auto;
  padding:var(--sp-6) clamp(16px,4vw,40px) var(--sp-7);
}
.essay-block{
  padding-top:var(--sp-5); margin-top:var(--sp-5);
  border-top:1px solid var(--line-2);
}
.essay-block:first-child{border-top:0; margin-top:0; padding-top:0}
.essay-no{
  margin:0 0 var(--sp-2); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--lime);
}
.essay-block h2{
  margin:0 0 var(--sp-3); font-size:clamp(23px,3vw,32px); font-weight:840;
  line-height:1.12; font-variation-settings:"wdth" 110; letter-spacing:-.005em;
}
.essay-block p{margin:0 0 var(--sp-3); font-size:16px; color:var(--ink-2); max-width:68ch}
.essay-block a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px}
.essay-block a:hover{color:var(--lime)}
.essay-so{
  border-left:2px solid var(--lime-line); padding-left:var(--sp-3);
  color:var(--ink) !important; margin-bottom:0 !important;
}
.essay-so .mono{color:var(--lime); font-size:13px; letter-spacing:.12em; text-transform:uppercase}

/* ----------------------------------------------------------------- footer */
.footer{max-width:1240px}
.footer-top{
  display:flex; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  padding-bottom:var(--sp-4); border-bottom:1px solid var(--line); margin-bottom:var(--sp-4);
}
.footer-brand{max-width:420px}
.footer .footer-nav{
  display:grid; grid-template-columns:repeat(2,auto); gap:10px var(--sp-5);
  margin-bottom:0; align-content:start;
}
.footer-nav a[aria-current="page"]{color:var(--lime)}
.footer-fine{max-width:78ch}

/* --------------------------------------------------- cover board, corrected */
/* A number must never wrap: 0.0000 breaking after the fourth tile reads as a
   rendering bug, not as a total. The xl tiles are sized to the cover COLUMN
   rather than to the old full-width hero, with room left for a long figure. */
.flapline-xl{flex-wrap:nowrap}
.cover .flapline-xl{padding:var(--sp-3) 0}
.cover .flapline-xl .flap{
  width:clamp(36px,3.5vw,52px);
  height:clamp(50px,4.9vw,72px);
  font-size:clamp(25px,2.5vw,38px);
}
/* a decimal point does not need a full tile beside five digits */
.cover .flapline-xl .flap.sym{width:clamp(16px,1.5vw,24px)}

/* the headline is now beside the board, so it is set to that column */
.cover h1{font-size:clamp(38px,4.6vw,62px); line-height:.98}
.cover{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
@media (max-width:1000px){
  .cover{grid-template-columns:1fr}
  .cover h1{font-size:clamp(40px,8.6vw,68px)}
}
.cover .board-substats{margin-top:var(--sp-4); gap:var(--sp-3)}
.cover .substat-label{font-size:10px; letter-spacing:.14em}
.cover .board-honesty{font-size:13.5px}

/* the rig label belongs ABOVE the lights: centred beside a wrapping row it
   floated onto the second line and read like a stray word */
.rig-lights{flex-direction:column; align-items:flex-start; gap:8px}
.rig .checks{width:100%}
@media (max-width:860px){ .rig-lights{gap:6px} }

/* ------------------------------------------------- flap words, not letters */
/* the outer gap now separates WORDS and the inner gap separates tiles, so a
   multi-word stamp wraps at a space or not at all */
.flapword{display:inline-flex; gap:5px}
.flapline{gap:15px}
.flapline-s{gap:9px}
.flapline-s .flapword{gap:3px}
.flapline-m .flapword{gap:5px}
@media (max-width:520px){ .flapline-m .flapword{gap:4px} }
@media (max-width:620px){
  .empty-row .flapline-m .flap{width:20px; height:29px; font-size:14px}
  .empty-row .flapline{gap:10px}
}

/* --------------------------------------------- causes filter bar on mobile */
/* nineteen categories wrapped to seven rows and pushed the first card off the
   screen, in a bar that is sticky. one scrolling row instead. */
@media (max-width:760px){
  .filterbar-inner{gap:10px}
  #causeSearch{flex:1; min-width:150px}
  .filter-count{margin-left:0; order:3}
  .cause-chips{
    order:4; flex-wrap:nowrap; overflow-x:auto; width:100%;
    scrollbar-width:none; padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }
  .cause-chips::-webkit-scrollbar{display:none}
  .cause-chips button{flex:none}
}

/* --------------------------------------------------------------- the film */
/* one object on the page, sized to the room. preload="none" + a poster keeps
   a 3MB file off the critical path; the video is the point of the page, so it
   is allowed to be the only thing on it. */
.cinema{max-width:1240px; margin-inline:auto; padding:0 clamp(16px,4vw,40px) var(--sp-5)}
.cinema video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  background:var(--s2); border:1px solid var(--line-2); border-radius:var(--r-3);
  box-shadow:inset 0 1px 0 var(--glass), 0 40px 90px rgba(0,0,0,.55);
}
.cinema-meta{
  margin:var(--sp-3) 0 0; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.cinema a{color:var(--lime-2); text-decoration:underline; text-underline-offset:3px}


/* ============================================================================
   THE INSTRUMENT — the cover's right-hand object.
   Replaces the split-flap tally board, which showed five grey zeros and said
   nothing. This shows the ONE figure that is both real today and enormous:
   the share of every trade a fully-vowed coin routes to its cause, derived
   live from the curve rather than quoted. The seal is the house medallion,
   engraved by brand/seal/seal.py from the same generator every vault uses.
   ============================================================================ */
.instrument{
  position:relative; border:1px solid var(--line-2); background:var(--s1);
  padding:clamp(20px,3vw,34px); overflow:hidden;
}
.instrument::before{
  content:""; position:absolute; inset:6px; border:1px solid var(--line); pointer-events:none;
}
.inst-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  position:relative; z-index:1;
}
.inst-title{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.inst-seal{
  width:min(340px,62%); margin:var(--sp-4) auto var(--sp-3); aspect-ratio:1/1;
  position:relative; z-index:1;
}
.inst-seal svg,
.inst-seal img{display:block; width:100%; height:auto}
/* height:auto is load-bearing: the img carries width/height attrs for CLS,
   and without it those attrs win and the 900px intrinsic size blows the
   panel out of the viewport. Measured: 246px of horizontal overflow. */
.inst-rate{
  text-align:center; position:relative; z-index:1;
  font-family:var(--mono); font-variation-settings:"wght" 560;
  font-size:clamp(46px,7vw,74px); line-height:1; color:var(--ink);
  letter-spacing:-.02em;
}
.inst-rate-label{
  text-align:center; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-top:var(--sp-3); position:relative; z-index:1;
}
.inst-figs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);
  margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line);
  position:relative; z-index:1;
}
.inst-fig dt{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.inst-fig dd{margin:6px 0 0; font-family:var(--mono); font-size:19px; color:var(--ink)}
.inst-note{
  margin:var(--sp-4) 0 0; font-size:13px; line-height:1.6; color:var(--ink-3);
  position:relative; z-index:1;
}
@media (max-width:880px){
  .inst-figs{grid-template-columns:1fr 1fr}
  .inst-seal{width:min(260px,70%)}
}

/* ============================================================================
   THE BOARD IS OPEN — real causes on the cover.
   The cover had no product on it: eight rows of links to other pages is a table
   of contents, and the two live competitors both put their actual launches on
   the cover. We have no launches yet, so we show the thing we DO have and can
   prove — 109 named, categorised nonprofits — rather than inventing activity.
   Each card carries its own rosette, engraved from the cause's id.
   ============================================================================ */
.board-open{
  padding:var(--sp-7) clamp(16px,4vw,40px) var(--sp-6);
  max-width:1360px; margin:0 auto;
}
.bo-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5);
  padding-bottom:var(--sp-4); border-bottom:1px solid var(--line-2); margin-bottom:var(--sp-5);
}
.bo-head h2{font-size:clamp(30px,3.4vw,46px); line-height:1.06; letter-spacing:-.02em; margin:0}
.bo-head p{margin:var(--sp-3) 0 0; max-width:64ch; color:var(--ink-3); font-size:15.5px; line-height:1.6}
.bo-all{white-space:nowrap; flex:none}

.fc-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--line);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  border:1px solid var(--line);
}
.fc{
  background:var(--void); padding:var(--sp-4) var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:10px; position:relative;
}
.fc-seal{display:block; width:72px; height:72px; opacity:.9}
.fc-seal svg{display:block; width:100%; height:100%}
.fc-tag{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.fc h3{
  margin:0; font-size:19px; line-height:1.22; letter-spacing:-.01em;
  font-variation-settings:"wght" 680,"wdth" 104;
}
.fc p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-3)}
.fc-route{
  margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--up);
}
@media (max-width:720px){
  .bo-head{flex-direction:column; align-items:flex-start}
  .fc-grid{grid-template-columns:1fr 1fr}
  .fc{padding:var(--sp-3)}
  .fc-seal{width:52px;height:52px}
}
@media (max-width:430px){ .fc-grid{grid-template-columns:1fr} }