@import url("fonts.css");

/* ═══ tokens ═══════════════════════════════════════════════════ */
:root{
  --paper:#FFFFFF; --ink:#0B0B0C; --ink-2:#55575A; --ink-3:#6E7176;
  --line:#E4E4E4; --line-2:#F2F2F2; --surface:#FFFFFF;
  --up:#0E7C3A; --down:#B32B22; --lime:#D4FC50;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Satoshi",system-ui,-apple-system,sans-serif;
  --disp:var(--sans);
  --nav:62px; --tape:30px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:#fff;padding:0 18px;
  font-family:var(--mono);font-size:12px;min-height:44px;display:flex;align-items:center}
.skip:focus{left:8px;top:8px}

/* ═══ tape ═════════════════════════════════════════════════════ */
.tape{height:var(--tape);border-bottom:1px solid var(--line);display:flex;align-items:center;background:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;overflow:hidden;position:relative;z-index:30}
.tape .lbl{padding:0 14px;height:100%;display:flex;align-items:center;background:var(--ink);color:#fff;
  font-weight:600;letter-spacing:.12em;flex:0 0 auto}
.tape .row{display:flex;gap:0;padding-left:22px;white-space:nowrap;min-width:0;overflow:hidden;flex:1 1 auto}
/* Two identical sequences side by side, both translated by 100% of their own
   width: when the first has fully left, the second is exactly where the first
   started, so the loop has no seam. Transform only — no layout, no repaint. */
.tape .seq{display:flex;gap:26px;padding-right:26px;flex:0 0 auto;
  animation:tape-run var(--tape-dur,52s) linear infinite;will-change:transform}
@keyframes tape-run{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.tape:hover .seq{animation-play-state:paused}
.tape b{font-weight:600}
.tape .u{color:var(--up)} .tape .d{color:var(--down)} .tape .m{color:var(--ink-3)}
.tape .q{color:var(--ink-3)}

/* ═══ nav ══════════════════════════════════════════════════════ */
.nav{height:var(--nav);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 34px;
  border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:30;gap:18px}
/* Three columns rather than space-between: with flex the middle block centres in
   whatever is left over, so the tabs sat 62px left of the page centre because the
   right-hand group is wider than the brand. Equal 1fr edges centre it for real. */
.nav > .brand{justify-self:start}
.nav > .tabs{justify-self:center}
.nav > .navr{justify-self:end}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.brand svg{width:19px;height:19px;display:block}
.wordmark{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  white-space:nowrap}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;padding:9px 13px;border-radius:2px;white-space:nowrap;min-height:38px;display:flex;align-items:center}
.tabs a:hover{color:var(--ink);background:var(--line-2)}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--surface);box-shadow:inset 0 -2px 0 var(--ink)}
.navr{display:flex;align-items:center;gap:12px}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.09em;border:1px solid var(--line);padding:8px 12px;
  border-radius:2px;color:var(--ink-2);white-space:nowrap}
.cta{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;background:var(--ink);
  color:#fff;padding:11px 16px;border-radius:2px;text-decoration:none;font-weight:600;white-space:nowrap;min-height:44px;
  display:flex;align-items:center}
.cta[aria-disabled="true"]{background:var(--surface);color:var(--ink-3);border:1px solid var(--line);cursor:default}

/* ═══ home: one screen, no scroll ══════════════════════════════ */
body.home{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.home .stage{flex:1 1 auto;position:relative;min-height:0;container-type:inline-size;overflow:hidden}
.corridor{position:absolute;inset:0;pointer-events:none}
.world{position:absolute;inset:0;transform-style:preserve-3d}
.card{position:absolute;overflow:hidden;backface-visibility:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,11,12,.04),0 12px 34px rgba(11,11,12,.07)}
.veil{position:absolute;inset:0;pointer-events:none;z-index:5;background:
  radial-gradient(46% 40% at 50% 40%,#fff 0%,rgba(255,255,255,.96) 46%,rgba(255,255,255,0) 78%),
  linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 86%,#fff 100%),
  linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 11%,rgba(255,255,255,0) 82%,#fff 100%)}

.eq{height:100%;display:flex;flex-direction:column;padding:6.5% 7.5%;container-type:inline-size}
.eq .t{font-family:var(--mono);font-weight:700;font-size:18.5cqw;letter-spacing:-.045em;line-height:1}
.eq .n{font-size:6.4cqw;color:var(--ink-3);margin-top:2.5cqw;line-height:1.25}
.eq .spark{margin:auto 0;padding:6cqw 0}
.eq svg{width:100%;height:auto;display:block}
.eq .rule{height:1px;background:var(--line-2);margin:4cqw 0}
.eq .p{font-family:var(--mono);font-size:9cqw;font-weight:600;letter-spacing:-.03em}
.eq .c{font-family:var(--mono);font-size:6.6cqw;margin-top:1.6cqw}
.eq .c.u{color:var(--up)} .eq .c.d{color:var(--down)}
.rc{height:100%;display:flex;flex-direction:column;padding:7% 7.5%;container-type:inline-size;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)}
.rc .k{font-family:var(--mono);font-size:5.8cqw;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.rc .b{font-family:var(--mono);font-size:13cqw;font-weight:700;letter-spacing:-.04em;margin-top:3cqw}
.rc .s{font-family:var(--mono);font-size:8.2cqw;font-weight:600;background:var(--lime);display:inline-block;padding:0 2cqw;
  margin-top:1cqw;align-self:flex-start}
.rc .rows{margin-top:auto;font-family:var(--mono);font-size:5.9cqw;color:var(--ink-2)}
.rc .r{display:flex;justify-content:space-between;padding:2.6cqw 0;border-top:1px solid var(--line)}

.overlay{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:44px 34px 0;text-align:center;pointer-events:none}
.overlay a{pointer-events:auto}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:9px;max-width:100%;text-wrap:balance;background:rgba(255,255,255,.88);padding:8px 14px;border:1px solid var(--line)}
.eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);display:block;flex:0 0 auto}
.eyebrow.live i{background:var(--up)}
h1.hero{font-family:var(--disp);font-weight:400;font-size:clamp(27px,4.6vw,64px);line-height:1.06;letter-spacing:-.028em;
  margin-top:26px;max-width:26ch;text-wrap:balance}
h1.hero em{font-style:normal;position:relative;display:inline-block}
h1.hero em::after{content:"";position:absolute;left:-.03em;right:-.03em;bottom:.09em;height:.26em;background:var(--lime);z-index:-1}
.lede{margin:18px auto 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:48ch}
.lede b{color:var(--ink);font-weight:700}
.strip{width:calc(100% + 68px);margin:0 -34px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);background:#fff;pointer-events:auto}
.st{padding:16px 22px 18px;border-right:1px solid var(--line);text-align:left}
.st:last-child{border-right:0}
.st .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.st .v{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:8px}
.st .v.sm{font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--ink-2);padding:4px 0}

/* ═══ secondary pages ══════════════════════════════════════════ */
main.page{max-width:1180px;margin:0 auto;padding:0 34px 96px}
.phead{padding:56px 0 34px;border-bottom:1px solid var(--line);margin-bottom:44px}
.phead .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
h1.ptitle{font-family:var(--disp);font-weight:400;font-size:clamp(34px,5.1vw,60px);line-height:1.03;letter-spacing:-.028em;
  margin-top:18px;max-width:18ch}
.psub{margin-top:20px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.psub b{color:var(--ink);font-weight:700}
section{margin-bottom:56px}
h2{font-family:var(--disp);font-weight:500;font-size:26px;letter-spacing:-.018em;margin-bottom:20px}
h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
p{max-width:68ch;color:var(--ink-2);margin-bottom:14px}
p b,li b{color:var(--ink);font-weight:700}
ul{margin:0 0 16px 0;padding-left:0;list-style:none;max-width:68ch}
ul li{position:relative;padding-left:20px;margin-bottom:9px;color:var(--ink-2)}
ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:1px;background:var(--ink-3)}
.soon{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);padding:5px 10px}
.soon::before{content:"";width:5px;height:5px;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}

table{width:100%;border-collapse:collapse;font-size:14px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap}
td{padding:15px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.sym{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:-.02em}
.addr{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);
  word-break:break-all}
.addr:hover{color:var(--ink);border-bottom-color:var(--ink)}
.up{color:var(--up)} .down{color:var(--down)}

.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)}
.cell{background:#fff;padding:24px}
.cell .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.cell .v{font-family:var(--disp);font-weight:500;font-size:24px;letter-spacing:-.018em;margin-top:10px}
.cell p{font-size:14px;margin:9px 0 0}

.steps{counter-reset:s;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.step .no{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);padding-top:4px}
.step h4{font-family:var(--disp);font-weight:500;font-size:21px;letter-spacing:-.016em;margin-bottom:8px}
.step p{margin:0;font-size:15px}
.step.mark{background:linear-gradient(90deg,rgba(212,252,80,.16),transparent 62%)}

.empty{border:1px dashed var(--line);padding:56px 32px;text-align:center;background:var(--surface)}
.empty .big{font-family:var(--disp);font-weight:500;font-size:26px;letter-spacing:-.018em;margin-bottom:12px}
.empty p{margin:0 auto;max-width:46ch;font-size:15px}

.tabrail{display:none}
.foot{border-top:1px solid var(--line);padding:26px 34px;display:flex;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.foot a{text-decoration:none} .foot a:hover{color:var(--ink)}
body.home .foot{height:32px;padding:0 34px;align-items:center;flex-wrap:nowrap;flex:0 0 auto;position:relative;z-index:30}

/* ═══ mobile: decided, not shrunk ══════════════════════════════ */
@media (max-width:1180px){
  .nav{padding:0 18px;gap:12px}
  .tabs{display:none}
  /* the rail switches on at exactly the width the inline tabs switch off,
     so there is never a band with no navigation */
  .tabrail{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);
    padding:0 18px;background:#fff;position:relative;z-index:30}
  .tabrail::-webkit-scrollbar{display:none}
  .tabrail a{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
    text-decoration:none;padding:0 12px;height:44px;display:flex;align-items:center;white-space:nowrap}
  .tabrail a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
  main.page{padding:0 18px 72px}
  .grid.c3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  :root{--nav:56px}
  /* the tab row moves to its own scrollable band under the brand */
  .nav{padding:0 16px}
  .navr .pill{display:none}
  .tabrail{padding:0 16px}
  /* the chain labels were hidden only because a static tape was clipped;
     it scrolls now, so there is room for them */
  .tape .seq{gap:18px;padding-right:18px}
  .overlay{padding:22px 18px 0}
  .eyebrow{font-size:8.6px;letter-spacing:.11em;padding:7px 11px;gap:7px}
  /* the phone lede is shorter: the headline already carries the claim, and the
     four lines it used to run to were squeezing the corridor into a strip */
  .lede .long{display:none}
  .cta{font-size:9.5px;letter-spacing:.09em;padding:10px 12px}
  h1.hero{margin-top:16px;max-width:19ch;font-weight:500;letter-spacing:-.024em}
  h1.ptitle{font-weight:500;letter-spacing:-.024em}
  .lede{font-size:13.5px;max-width:38ch;margin-top:14px}
  .strip{width:calc(100% + 36px);margin:0 -18px;grid-template-columns:repeat(2,1fr)}
  .st{padding:13px 16px 15px;border-bottom:1px solid var(--line)}
  .st:nth-child(2n){border-right:0}
  .st:nth-child(n+3){border-bottom:0}
  .st .v{font-size:18px}
  .phead{padding:34px 0 26px;margin-bottom:32px}
  .psub{font-size:15.5px}
  .grid.c2,.grid.c3{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .foot{padding:20px 16px;font-size:9px;gap:10px}
  body.home .foot{height:auto;padding:9px 16px;justify-content:center}
  body.home .foot .keep{font-size:8.6px;letter-spacing:.09em}
  body.home .foot span:not(.keep){display:none}
}

@media (prefers-reduced-motion:reduce){
  .tape .seq{animation:none}
  .card{animation-play-state:paused!important}
  *{scroll-behavior:auto!important}
}
@media print{.corridor,.veil,.tape{display:none}}

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

/* ── portfolio: the 7-day trend column ─────────────────────────── */
td.spark{width:108px;padding:12px 16px}
th.spark{width:108px}
td.spark svg{width:100%;height:30px;display:block}
@media (max-width:640px){ td.spark,th.spark{width:78px} td.spark svg{height:26px} }

/* ── mechanism: the batch schematic ────────────────────────────── */
.diagram{margin:0 0 34px;border:1px solid var(--line);background:#fff}
.diagram > svg{display:block;width:100%;height:auto}
.diagram text{font-family:var(--mono)}
.diagram .lbl text{font-size:10.5px;letter-spacing:.14em;fill:var(--ink)}
.diagram .sub{font-size:9.5px;letter-spacing:.06em;fill:var(--ink-3)}
.diagram .node{font-size:15px;font-weight:700;letter-spacing:.04em;fill:var(--ink)}
.diagram figcaption{border-top:1px solid var(--line);padding:13px 18px;font-family:var(--mono);
  font-size:10px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.diagram .dgm-v{display:none}
.diagram .lbl-t{font-size:10.5px;letter-spacing:.14em;fill:var(--ink);font-family:var(--mono)}
/* Below tablet the wide schematic is replaced by a vertical one, not given a
   horizontal scrollbar: a diagram you have to drag sideways on a phone is a
   desktop diagram with an excuse. */
@media (max-width:820px){
  .diagram .dgm-h{display:none}
  .diagram .dgm-v{display:block;padding:20px 0 8px}
  .diagram .sub{font-size:10.5px}
}

/* the tab rail scrolls; fade its right edge so it reads as more-to-come, not cut off */
@media (max-width:640px){
  .tabrail{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
}

/* On a phone the table still scrolls — that is right for a data table — but the
   columns that matter must be on screen before you scroll. The issuer sub-line
   is dropped and the padding tightened so ticker, trend and price all fit. */
@media (max-width:640px){
  th,td{padding:12px 11px}
  td .issue-sub{display:none}
  td.spark,th.spark{width:70px}
  .sym{font-size:14px}
  table{font-size:13.5px}
}

.eyebrow.live i{background:var(--up)}

/* ── home: the contract, visible and copyable ──────────────────── */
.cabar{width:calc(100% + 68px);margin:0 -34px;pointer-events:auto;display:flex;align-items:center;
  justify-content:center;gap:16px;border-top:1px solid var(--line);background:#fff;
  padding:13px 20px;font-family:var(--mono);cursor:pointer;border:0;border-top:1px solid var(--line);
  color:var(--ink);min-height:46px}
.cabar:hover{background:var(--line-2)}
.cabar .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cabar .a{font-size:12.5px;letter-spacing:.01em}
.cabar .do{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:var(--lime);padding:5px 8px}
.cabar.done .do{background:var(--up);color:#fff}
@media (max-width:640px){
  .cabar{width:calc(100% + 36px);margin:0 -18px;gap:10px;padding:11px 12px;flex-wrap:wrap}
  .cabar .a{font-size:10px;word-break:break-all}
  .cabar .k{display:none}
}

/* ── holders lookup ────────────────────────────────────────────── */
.lookup label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.lookup .row{display:flex;gap:10px}
.lookup input{flex:1;min-width:0;font-family:var(--mono);font-size:14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);min-height:48px}
.lookup input:focus-visible{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.lookup button{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;background:var(--ink);color:#fff;border:0;padding:0 22px;min-height:48px;cursor:pointer}
.lookup button:hover{background:#26272a}
#lookup-help{font-size:13.5px;margin-top:12px}
#result{margin-top:26px}
#result .hit{border:1px solid var(--line)}
#result .sum{padding:22px 24px;border-bottom:1px solid var(--line)}
#result .sum .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
#result .sum .v{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-.026em;margin-top:8px}
#result .miss{border:1px dashed var(--line);padding:34px 24px;text-align:center;color:var(--ink-2);font-size:15px}
#result .bad{color:var(--down)}

tr.soon-row td{opacity:.72}
tr.soon-row .sym{opacity:1}
tr.soon-row td .soon{margin-top:7px}

/* ── roadmap ───────────────────────────────────────────────────── */
.rm{margin-bottom:44px}
.rm-head{display:flex;align-items:center;gap:16px;padding-bottom:13px;margin-bottom:0;
  border-bottom:1.5px solid var(--ink)}
.rm-when{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-.026em}
.rm-state{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line)}
.rm-state.shipped{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.rm-state.next{background:var(--ink);border-color:var(--ink);color:#fff}
.rm-state.planned{color:var(--ink-3)}
.rm-items{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.rm-item{padding:22px 26px 24px 0;border-bottom:1px solid var(--line)}
.rm-item:nth-child(odd){padding-right:40px}
.rm-item h4{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.024em;margin-bottom:8px}
.rm-item p{font-size:14.5px;margin:0;max-width:46ch}
.rm-planned .rm-item h4{color:var(--ink-2)}
@media (max-width:820px){
  .rm-items{grid-template-columns:1fr}
  .rm-item,.rm-item:nth-child(odd){padding-right:0}
}

/* ── the ballot ──────────────────────────────────────────────────────────
   Standings read from the chain, so every row here is checkable. The active
   row is marked by weight, not by us. */
.vhead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:6px}
.vhead h2{margin:0}
.vmeta{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px}
.vboard{border:1px solid var(--line)}
.vrow{display:grid;grid-template-columns:92px 1fr 62px 104px;align-items:center;gap:16px;
  padding:13px 18px;border-bottom:1px solid var(--line-2)}
.vrow:last-child{border-bottom:0}
.vrow.lead{background:var(--line-2)}
.vsym{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em}
.vbar{display:block;height:10px;background:var(--line-2);border:1px solid var(--line)}
.vbar i{display:block;height:100%;background:var(--ink-3)}
.vrow.lead .vbar i{background:var(--lime)}
.vrow.mine .vbar i{background:var(--ink)}
.vpct{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--ink-2)}
.vbtn{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 12px;min-height:38px;border:1px solid var(--ink);background:var(--surface);
  color:var(--ink);cursor:pointer}
.vbtn:hover:not([disabled]){background:var(--ink);color:var(--paper)}
.vbtn[disabled]{border-color:var(--line);color:var(--ink-3);cursor:default}
.vrow.mine .vbtn{background:var(--lime);border-color:var(--lime)}
.vnote{margin:14px 0 0;font-size:13.5px;color:var(--ink-2);min-height:1.4em}
.vnote.warn{color:var(--down)}
.vnote.ok{color:var(--up)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.vcard{border:1px solid var(--line);padding:20px 22px}
.vcard .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.vcard p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 0 14px}
.vcard.off .vform{opacity:.45;pointer-events:none}
.vwrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line-2)}
.vwrow:last-child{border-bottom:0}
.vwrow span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.vwrow b{font-family:var(--mono);font-size:14px;font-weight:600}
.vform{display:flex;gap:10px}
.vform input{flex:1;min-width:0;font-family:var(--mono);font-size:13px;padding:11px 12px;
  min-height:44px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.vform input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* .vcard p is more specific than .vfloor alone, so the floor line inherited
   body copy size and shouted. Match the specificity rather than reach for !important. */
.vcard .vfloor{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 0 0;line-height:1.6}
.cta.vcta{border:0;cursor:pointer;justify-content:center}
.cta.vcta[disabled]{background:var(--surface);color:var(--ink-3);border:1px solid var(--line);cursor:default}
.vempty{font-size:14px;line-height:1.55;color:var(--ink-3);padding:18px}
.vcard .vempty{padding:0}
.fine{margin-top:20px;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  border-left:2px solid var(--line);padding-left:16px}
@media (max-width:820px){
  .vgrid{grid-template-columns:1fr}
  /* the bar is the first thing to go: the number carries the same information */
  .vrow{grid-template-columns:76px 1fr 92px;gap:12px;padding:12px 14px}
  .vbar{display:none}
  .vform{flex-direction:column}
}