/* flames v3 - the source's visual system on a pastel red ground.
   Flat saturated ground, lighter alternating bands, white rounded cards with a
   soft red-tinted ambient shadow and a white hairline, deep warm ink, one fire
   red accent. Space Grotesk for type, IBM Plex Mono for every figure, eyebrow
   and chip. The wordmark alone stays Geist 600, because the locked lockup rule
   in lab/README.md is stated against Geist's cap height. */

:root{
  --ground:#F5A3A3;
  --ground-alt:#F8B9B9;
  --tile:#D6302B;
  --tile-deep:#A8231F;
  --ink:#2A0D0D;
  --muted:rgba(42,13,13,.62);          /* on panel: 5.16:1 */
  --muted-ground:rgba(42,13,13,.74);   /* on ground: 5.25:1, .62 only reaches 3.87 */
  --tile-text:#8E1C18;                 /* accent as text on the ground: 4.57:1 */
  --panel:#FFFFFF;
  --line:rgba(42,13,13,.10);
  --wline:rgba(255,255,255,.42);
  --hot:#FF8A3D;
  --loss:#4A6FA5;
  --shadow:0 2px 4px rgba(120,20,20,.06), 0 18px 40px -8px rgba(120,20,20,.18);
  --shadow-nav:0 2px 4px rgba(120,20,20,.05), 0 14px 34px -10px rgba(120,20,20,.22);
  --r-card:22px;
  --r-ctl:12px;
  --wrap:1184px;
  --ease:cubic-bezier(.32,.72,0,1);
  --font:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --lock:"Geist","Space Grotesk",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:16px; font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit}
button,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--tile); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.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}
.skip{position:absolute; left:-9999px; top:0; z-index:60; background:var(--panel); color:var(--ink); padding:12px 18px; border-radius:var(--r-ctl)}
.skip:focus{left:16px; top:16px}
.accent{color:var(--tile)}
.soft{color:var(--muted)}

/* ---------- type ---------- */
h1,h2,h3{margin:0; font-weight:400; color:var(--ink)}
h1{font-size:clamp(42px,5.45vw,78px); line-height:1.02; letter-spacing:-.04em}
h1 em{font-style:normal; color:var(--tile-text)}
h2{font-size:clamp(30px,3.25vw,46px); line-height:1.08; letter-spacing:-.03em}
h3{font-size:16.5px; font-weight:500; line-height:1.35; letter-spacing:-.01em}
p{margin:0}
.eyebrow,.card-label{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow{color:rgba(42,13,13,.72)}
/* the source gives one section the accent eyebrow with a live dot */
.eyebrow-live{color:var(--tile-text)}
.eyebrow-plain{text-transform:none; letter-spacing:.10em}
.card-label strong{color:var(--ink); font-weight:500}
.lede{margin-top:22px; max-width:52ch; font-size:17px; color:var(--ink)}
.sub{margin-top:16px; max-width:64ch; font-size:16px; color:rgba(42,13,13,.80)}
.fine{font-size:13px; line-height:1.55; color:var(--muted)}
.fine.push{margin-top:auto; padding-top:18px}
.figure{font-family:var(--mono); font-weight:500; font-size:clamp(34px,3.3vw,47.5px); line-height:1; letter-spacing:-.02em; margin-top:12px; color:var(--ink)}

/* ---------- surfaces ---------- */
.shell{background:none; border:0; border-radius:var(--r-card); padding:0; box-shadow:none}
.core,.card{
  background:var(--panel); border:1px solid var(--wline); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:22px;
  height:100%; display:flex; flex-direction:column;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  font-size:15px; font-weight:500; letter-spacing:-.005em; text-decoration:none; cursor:pointer;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn-primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-primary:hover{background:var(--tile); border-color:var(--tile)}
.btn-ghost{background:var(--panel); color:var(--ink); border-color:var(--wline); box-shadow:0 1px 2px rgba(120,20,20,.06)}
.btn-ghost:hover{background:#fff; border-color:rgba(42,13,13,.16)}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.42; cursor:not-allowed}
.btn[disabled]:active{transform:none}
.btn-sm{padding:9px 16px; font-size:14px; white-space:nowrap}
.btn-xs{padding:6px 12px; font-size:12px}
.btn-wide{width:100%; margin-top:14px}
.btn-ico{width:21px; height:21px; border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); font-size:11px; line-height:1; transition:transform .35s var(--ease)}
.btn-primary:hover .btn-ico{transform:translate(2px,-2px)}
.linkish{background:none; border:0; padding:0; cursor:pointer; color:var(--muted); font-size:14.5px}
.linkish[disabled]{opacity:.55; cursor:not-allowed}
.row-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.row-btns.tight{margin-top:10px; gap:8px}
.row-btns.tight .btn{flex:1}
.row-btns.center{justify-content:center}

/* ---------- pills + dot ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; margin:0; white-space:nowrap;
  border-radius:999px; border:1px solid var(--wline); background:var(--ground-alt);
  font-size:12.5px; color:var(--ink);
}
.pill-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.pill .mono{color:var(--ink); font-size:12.5px}
button.pill{cursor:pointer; transition:border-color .35s var(--ease)}
button.pill:not([disabled]):hover{border-color:rgba(42,13,13,.2)}
button.pill[disabled]{cursor:default}
.pill-static{margin-top:22px; background:var(--panel)}
.dot{width:7px; height:7px; border-radius:999px; background:var(--muted); flex:none}
.dot[data-state="connecting"]{background:var(--hot); animation:blink 1.4s var(--ease) infinite}
.dot[data-state="live"]{background:var(--tile)}
.dot[data-state="offline"]{background:var(--loss)}
.dot[data-state="idle"]{background:var(--muted)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; padding:0;
  background:rgba(255,255,255,.94); border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%)}
.nav-inner{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:10px; padding:10px 24px;
}
.brand{--sq:1.05417; --gp:0.18934; --dy:0.06589;
  display:inline-flex; align-items:baseline; text-decoration:none; flex:none}
.brand .mark{
  width:calc(var(--wm) * var(--sq)); height:calc(var(--wm) * var(--sq));
  margin-right:calc(var(--wm) * var(--gp));
  transform:translateY(calc(var(--wm) * var(--dy)));
  align-self:baseline; flex:none;
}
.brand-nav{--wm:16px}
.brand-footer{--wm:20px}
.wordmark{font-family:var(--lock); font-weight:600; letter-spacing:-.02em; font-size:var(--wm); line-height:1; color:var(--ink)}
.nav-links{display:flex; gap:2px; margin-left:6px}
.nav-links a{
  text-decoration:none; color:var(--ink); font-size:14.5px; padding:7px 8px;
  border-radius:999px; white-space:nowrap; transition:color .35s var(--ease), background-color .35s var(--ease);
}
.nav-links a:hover{color:var(--tile-text); background:rgba(214,48,43,.07)}
.nav-right{display:flex; align-items:center; gap:7px; margin-left:auto}
.pill-clock .mono{min-width:42px; text-align:right}
.pill-ca{max-width:190px; background:var(--panel)}
.pill-ca .mono{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.burger{display:none; width:38px; height:38px; border-radius:999px; border:1px solid var(--wline); background:var(--ground-alt); cursor:pointer; position:relative}
.burger span{position:absolute; left:11px; width:16px; height:1.5px; background:var(--ink); transition:transform .45s var(--ease)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

.drawer{
  position:fixed; inset:68px 20px auto; z-index:39; padding:16px;
  border-radius:var(--r-card); border:1px solid var(--wline);
  background:var(--panel); box-shadow:var(--shadow);
}
.drawer-links{display:grid; gap:2px}
.drawer-links a{text-decoration:none; padding:12px 12px; border-radius:var(--r-ctl); color:var(--ink); font-size:16px}
.drawer-links a:hover{background:var(--ground-alt)}
.drawer .btn-wide{margin-top:14px}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,5.4vw,77px) 0 72px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start}
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; margin:0 0 28px;
  border-radius:999px; border:1px solid var(--wline); background:var(--panel);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.stat-strip{display:grid; grid-template-columns:repeat(4,minmax(0,auto)); margin:40px 0 0;
  justify-content:start; border-top:1px solid var(--line); padding-top:18px}
.stat-strip div{display:flex; flex-direction:column-reverse; gap:6px; padding-right:52px}
.stat-strip dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted)}
.stat-strip dd{margin:0; font-family:var(--mono); font-weight:500; font-size:21px; letter-spacing:-.01em}

.hero-side{display:grid; gap:24px}
.ca-card .core{padding:20px 22px}
.ca-head{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ca-state{color:var(--tile)}
.ca-row{display:flex; align-items:center; gap:12px; margin:14px 0;
  background:#FBF4F4; border:1px solid var(--line); border-radius:14px; padding:11px 11px 11px 14px}
.ca-row code{font-family:var(--mono); font-size:13.5px; overflow-wrap:anywhere; flex:1}
.ca-row .btn{flex:none; background:var(--ink); color:#fff; border-color:var(--ink)}
.ca-row .btn:hover{background:var(--tile); border-color:var(--tile)}

/* the 3D object sits under the contract card, like the source */
.hero-object{position:relative; width:100%; aspect-ratio:1/1; margin:0}
.hero-object canvas{width:100%; height:100%; display:block}
.hero-object img{width:100%; height:auto}

/* ---------- bands ---------- */
.band{padding:112px 0}
.band-alt{background:var(--ground-alt)}
#machine.band{padding-top:64px}
.sec-head{margin-bottom:40px}
/* the source wraps only its long headlines, so the cap is per headline
   rather than global: these three break, the rest hold one line */
#mechTitle,#heatTitle,#tokenTitle{max-width:14.2em}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head strong{font-weight:500}

/* ---------- machine ---------- */
.machine-grid{display:grid; grid-template-columns:1fr 1fr 1.08fr 1fr; gap:16px; align-items:stretch}
.card-tall{min-height:100%}
.rows{margin:18px 0 0; display:grid}
.rows div{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; border-top:1px solid var(--line)}
.rows div:first-child{border-top:0}
.rows dt{font-size:13.5px; color:var(--muted); white-space:nowrap}
.rows dd{margin:0; font-family:var(--mono); font-size:13.5px; text-align:right; overflow-wrap:anywhere}
.rows dd a{color:var(--tile); text-decoration:none}
.rows dd a:hover{text-decoration:underline}

.field{margin-top:16px}
.field label{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); margin-bottom:9px}
.field label .mono{color:var(--ink)}
.field input[type=text]{
  width:100%; background:#FBF4F4; border:1px solid var(--line); border-radius:14px;
  padding:11px 13px; font-family:var(--mono); font-size:14px; color:var(--ink);
  transition:border-color .35s var(--ease);
}
.field input[type=text]:focus{border-color:var(--tile); outline:none}
.field input[type=text]:disabled{color:var(--muted); cursor:not-allowed}
.amount-row{display:flex; gap:8px; align-items:center}
.amount-row input{flex:1}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg,var(--tile) var(--fill,0%),rgba(42,13,13,.14) var(--fill,0%));
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:999px;
  background:var(--panel); border:2px solid var(--tile); box-shadow:0 1px 3px rgba(120,20,20,.25); cursor:grab}
input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:999px; background:var(--panel); border:2px solid var(--tile); cursor:grab}
.wallet-state{display:flex; align-items:center; gap:9px; margin-top:14px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted)}
.wmsg{margin-top:12px; padding:10px 12px; border-radius:var(--r-ctl); font-size:12px; line-height:1.5;
  border:1px solid var(--line); background:#FBF4F4; color:var(--muted); overflow-wrap:anywhere}
.wmsg[data-tone="good"]{border-color:rgba(214,48,43,.4); color:var(--ink)}
.wmsg[data-tone="bad"]{border-color:rgba(74,111,165,.45); color:var(--loss)}

.notes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.note{background:var(--panel); border:1px solid var(--wline); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:22px}
.note h3{margin-bottom:8px}
.note p{color:var(--muted); font-size:13.5px}

/* ---------- stake ---------- */
.stake-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch}
.stake-grid .term-shell,.stake-grid .term{height:100%}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:14px; align-content:start}
.step{position:relative; padding:22px 22px 22px 60px}
.step-n{position:absolute; left:22px; top:24px; font-family:var(--mono); font-size:11.5px;
  font-style:normal; letter-spacing:.06em; color:var(--tile)}
.step h3{margin-bottom:7px}
.step p{color:var(--muted); font-size:13.5px}

.term-shell{overflow:hidden}
.term{padding:0; background:var(--panel); overflow:hidden}
.term-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line)}
.tl{width:9px; height:9px; border-radius:999px; background:rgba(42,13,13,.14)}
.term-title{margin-left:10px; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.term-eyebrow{padding:20px 20px 0}
.term-body{margin:0; padding:20px; font-family:var(--mono); font-size:12.5px; line-height:1.85;
  color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; min-height:190px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px);
  mask-image:linear-gradient(180deg,transparent 0,#000 30px);
}
.term-body b{color:var(--ink); font-weight:500}
.term-body i{font-style:normal; color:var(--tile)}
.term .fine{padding:0 20px 20px}

/* ---------- receipts ---------- */
.rec-head{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin:-22px -22px 0; padding:15px 22px; background:rgba(245,163,163,.20);
  border-bottom:1px solid var(--line); border-radius:21px 21px 0 0}
.rec-head strong{font-weight:500}
.table-scroll{overflow-x:auto; margin:0 -22px -22px; padding:0 22px 6px}
table.receipts{width:100%; border-collapse:collapse; min-width:560px}
table.receipts th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted); font-weight:400; padding:16px 10px 10px}
table.receipts th:nth-child(n+4){text-align:right}
table.receipts td{padding:10px 10px; border-top:1px solid var(--line); font-family:var(--mono); font-size:13px}
table.receipts td:nth-child(n+4){text-align:right}
table.receipts td:first-child,table.receipts td:nth-child(2),table.receipts td:nth-child(5){color:var(--muted)}
table.receipts td:nth-child(4){color:var(--tile)}
table.receipts tr.fresh td{animation:fade-row .8s var(--ease)}
@keyframes fade-row{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

/* ---------- mechanism ---------- */
.mech-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.mech{padding:24px}
.mech .step-n{position:static; align-self:flex-start; margin-bottom:12px}
.mech h3{margin-bottom:8px}
.mech p{color:var(--muted); font-size:13.5px}

/* ---------- the heat ---------- */
.heat-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
.chart-card{background:var(--panel); border:1px solid var(--wline); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:24px}
.chart-card .chart{margin:14px 0 16px}
.chart{width:100%; height:auto}
.chart .grid line{stroke:var(--line); stroke-width:1}
.chart .axis text{fill:var(--muted); font-size:11px; letter-spacing:.08em}
.chart .climb{stroke:var(--tile); stroke-width:2.5; stroke-linecap:round}
.chart .drop{stroke:var(--loss); stroke-width:2; stroke-dasharray:4 4}
.chart .knot{fill:var(--tile)}
.chart .knot-cold{fill:var(--loss)}
.chart .label{fill:var(--muted); font-size:11px}
.chart .label.cold{fill:var(--loss)}
.heat-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:0; align-content:start}
.heat-stats .wide{grid-column:1 / -1}
.tile{padding:20px}
.tile dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted)}
.tile dd{margin:9px 0 5px; font-family:var(--mono); font-weight:500; font-size:27px; letter-spacing:-.02em; color:var(--ink)}
.caveat{margin-top:26px; padding-left:18px; border-left:2px solid var(--tile);
  font-size:13.5px; color:var(--muted-ground); max-width:88ch}
.caveat strong{color:var(--ink); font-weight:500}

/* ---------- chain, the one dark card ---------- */
.chain-shell{border-radius:var(--r-card)}
.chain-card{background:var(--ink); border:0; box-shadow:var(--shadow); color:#fff;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; padding:40px}
.chain-card h2{color:#fff; font-size:clamp(26px,2.3vw,33px); line-height:1.12}
.chain-card .eyebrow{color:#fff}
.chain-card .eyebrow{color:var(--ground)}
.chain-card .sub{color:rgba(255,255,255,.78)}
.chain-rows div{padding:12px 0; border-top-color:rgba(255,255,255,.14)}
.chain-rows dt{color:rgba(255,255,255,.66)}
.chain-rows dd{color:#fff}
.chain-rows dd a{color:var(--ground)}

/* ---------- token ---------- */
.token-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:16px; align-items:stretch}
.supply-card{padding:24px}
.alloc-card{padding:24px}
.alloc + .alloc{margin-top:20px}
.alloc-top{display:flex; justify-content:space-between; gap:20px; align-items:baseline; flex-wrap:wrap}
.alloc-top h3{font-size:15px}
.alloc-top .fine{text-align:right; flex:1; min-width:180px}
.alloc-pct{font-family:var(--mono); font-size:14px; margin:7px 0; color:var(--ink)}
.bar{height:4px; border-radius:999px; background:rgba(42,13,13,.10); overflow:hidden}
.bar span{display:block; height:100%; border-radius:999px; background:var(--tile)}

/* ---------- changelog ---------- */
.log-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; align-items:start}
.log-grid .term-shell{position:sticky; top:96px}
.log{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.log li{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  background:var(--panel); border:1px solid var(--wline); border-radius:16px;
  box-shadow:0 1px 2px rgba(120,20,20,.06); padding:13px 18px}
.log p{font-size:13.5px; color:var(--muted)}
.log strong{color:var(--ink); font-weight:500}
.log-n{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.chip{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; background:var(--ground-alt); color:var(--ink); white-space:nowrap}
.chip-done{background:var(--tile); color:#fff}

/* ---------- faq ---------- */
.faq{border-top:0}
.qa{border-bottom:1px solid rgba(42,13,13,.18)}
.qa h3{font-size:inherit; font-weight:inherit}
.q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px;
  background:none; border:0; padding:19px 2px; cursor:pointer; text-align:left;
  font-size:15.5px; font-weight:500; letter-spacing:-.01em; color:var(--ink);
  transition:color .35s var(--ease)}
.q:hover{color:var(--tile-text)}
.q-ico{position:relative; width:24px; height:24px; border-radius:999px; border:1px solid rgba(42,13,13,.2); flex:none;
  transition:transform .45s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease)}
.q-ico::before,.q-ico::after{content:""; position:absolute; left:50%; top:50%; width:9px; height:1.5px;
  background:var(--ink); transform:translate(-50%,-50%); transition:opacity .35s var(--ease)}
.q-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.q[aria-expanded="true"] .q-ico{transform:rotate(180deg); background:var(--tile); border-color:var(--tile)}
.q[aria-expanded="true"] .q-ico::before,.q[aria-expanded="true"] .q-ico::after{background:#fff}
.q[aria-expanded="true"] .q-ico::after{opacity:0}
.a p{padding:0 56px 24px 2px; font-size:15px; color:rgba(42,13,13,.80); max-width:80ch}

/* ---------- cta ---------- */
.cta{text-align:center}
.cta-inner{display:flex; flex-direction:column; align-items:center}
.cta-mark{display:block; width:152px; height:152px; margin:0 auto 22px;
  border-radius:34px; overflow:hidden; box-shadow:var(--shadow)}
.cta-mark img{width:152px; height:152px; transform:none}
.cta .sub{margin-inline:auto; max-width:50ch}

/* ---------- footer ---------- */
.footer{background:var(--ground); border-top:1px solid var(--line); padding:64px 0 44px}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:40px; padding-bottom:44px}
.footer-brand .sub{margin-top:16px; max-width:36ch; font-size:14.5px}
.footer-col h3{font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted-ground); margin-bottom:16px}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer-col a{text-decoration:none; color:var(--ink); font-size:14.5px; transition:color .35s var(--ease)}
.footer-col a:hover,.linkish:not([disabled]):hover{color:var(--tile-text)}
.risk{border-top:1px solid var(--line); padding-top:26px; max-width:74ch; font-size:12.5px; line-height:1.65; color:var(--muted-ground)}
.risk strong{color:var(--ink); font-weight:500}
.colophon{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:24px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.04em; color:var(--muted-ground)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:1; transform:none}
html.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .reveal.in,html.forced .reveal{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .machine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{display:none}
}
@media (max-width:980px){
  .band{padding:80px 0}
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-side{max-width:540px}
  .notes,.mech-grid{grid-template-columns:1fr}
  .heat-grid,.token-grid,.log-grid,.stake-grid{grid-template-columns:1fr}
  .log-grid .term-shell{position:static}
  .chain-card{grid-template-columns:1fr; gap:30px; padding:28px}
  .footer-grid{grid-template-columns:repeat(2,1fr); gap:32px}
}
@media (max-width:820px){
  .nav{padding:12px 0 0}
  .nav-inner{gap:10px; padding:9px 18px}
  .pill-clock{display:none}
  .burger{display:block}
  .nav-right .btn-sm{display:none}
  .pill-ca{max-width:none}
}
@media (max-width:680px){
  .wrap{padding-inline:18px}
  .nav-inner{padding:9px 18px}
  .drawer{inset:72px 10px auto}
  .machine-grid,.heat-stats{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr); gap:20px 0}
  .stat-strip div{padding-right:24px}
  .alloc-top .fine{text-align:left; min-width:0}
  .footer-grid{grid-template-columns:1fr}
  .a p{padding-right:2px}
  .row-btns .btn{flex:1 1 100%; white-space:nowrap}
  .row-btns.tight .btn{flex:1 1 0}
  .core,.card,.note{padding:20px}
  .rec-head{margin:-20px -20px 0; padding:14px 20px}
  .table-scroll{margin:0 -20px -20px; padding:0 20px 6px}
}

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


/* ---------- motion ---------- */
/* the close beat: the countdown card ring, the epoch roll, the new receipt row */
@keyframes beat-ring{
  0%{box-shadow:var(--shadow), 0 0 0 0 rgba(214,48,43,.55)}
  40%{box-shadow:var(--shadow), 0 0 0 3px rgba(214,48,43,.45)}
  100%{box-shadow:var(--shadow), 0 0 0 0 rgba(214,48,43,0)}
}
.core.beat{animation:beat-ring .4s var(--ease)}
@keyframes epoch-roll{
  0%{transform:translateY(0); opacity:1}
  45%{transform:translateY(-70%); opacity:0}
  55%{transform:translateY(70%); opacity:0}
  100%{transform:translateY(0); opacity:1}
}
#mEpoch{display:inline-block}
#mEpoch.roll{animation:epoch-roll .42s var(--ease)}
@keyframes row-in{
  from{opacity:0; transform:translateY(-10px)}
  to{opacity:1; transform:none}
}
table.receipts tr.fresh td{animation:row-in .5s var(--ease)}
table.receipts tbody tr:last-child{animation:row-out .5s var(--ease)}
@keyframes row-out{from{opacity:1}to{opacity:.35}}
/* the log terminal hands one receipt over at each close */
#termLog{transition:opacity .2s var(--ease), transform .2s var(--ease)}
#termLog.advance{opacity:0; transform:translateY(-8px)}

/* allocation bars and the heat line draw in on reveal */
.bar span{transition:width 1.1s var(--ease)}
#heatLine{transition:stroke-dashoffset 1.2s var(--ease)}
#heatDrop,#heatTag{opacity:0; transition:opacity .45s var(--ease) .95s}
#heatDrop.in,#heatTag.in{opacity:1}

@media (prefers-reduced-motion:reduce){
  .core.beat,#mEpoch.roll,table.receipts tr.fresh td,table.receipts tbody tr:last-child{animation:none}
  #termLog.advance{opacity:1; transform:none}
  .bar span,#heatLine,#heatDrop,#heatTag{transition:none}
  #heatDrop,#heatTag{opacity:1}
  #heatLine{stroke-dashoffset:0 !important}
}