:root{
  --brand:#536029;
  --brand-deep:#3B4520;
  --brand-soft:#7C8C45;
  --brand-glow:#B9D07A;

  --paper:#F7F5EF;
  --paper-2:#EFEDE3;
  --line:#DDD9C8;
  --ink:#232619;
  --ink-soft:#5A6047;

  --wrap:1140px;
  --header-h:64px;
  --header-space:80px;  /* the sticky header's slot in normal flow */
  --snap-pad:104px;     /* header + offset, for scroll-padding on anchors */
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:var(--paper);
  scroll-padding-top:var(--snap-pad);
}
body{
  position:relative;          /* so the full-page backdrop can span the document */
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 15% -8%,rgba(124,140,69,.10),transparent 60%),
    radial-gradient(700px 380px at 92% 4%,rgba(185,208,122,.10),transparent 62%),
    var(--paper);
  background-repeat:no-repeat;
  color:var(--ink);
  font:400 16.5px/1.6 Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Inter,system-ui,sans-serif;font-weight:600;line-height:1.1;margin:0;letter-spacing:-.03em}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- floating glass header ---------- */
.site-header{
  position:sticky;top:16px;z-index:50;
  padding:16px 0 0;
  background:transparent;
}
.header-inner{
  position:relative;
  display:flex;align-items:center;gap:20px;
  min-height:var(--header-h);
  padding:8px 12px 8px 16px;
  border-radius:20px;

  /* no backdrop-filter: it re-blurs everything behind a sticky, full-width bar
     on every scroll frame (measured 29 -> 38 fps). over this near-flat page it
     bought almost nothing visually, so the opacity carries it instead. */
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 10px 28px -12px rgba(83,96,41,.30),
    0 2px 6px -2px rgba(35,38,25,.08),
    0 0 0 1px rgba(83,96,41,.05);
}
/* thin specular sheen across the top, like the mark's gloss */
.header-inner::before{
  content:"";position:absolute;left:0;right:0;top:0;height:50%;
  border-radius:20px 20px 0 0;      /* must follow the pill's top corners */
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
  pointer-events:none;
}
.header-inner > *{position:relative}

/* first-screen backdrop. It sits *below* the liquid layer in paint order (same
   z-index, earlier in the DOM) so drips run down over the image and pool on top
   of it, rather than the picture covering them. */
.hero-bg{
  position:absolute;top:0;left:0;right:0;
  height:100svh;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-bg::before{
  content:"";position:absolute;inset:-40px;      /* bleed, so the blur has no soft edge */
  background:url(/hero-bg.webp) center/cover no-repeat;
  filter:blur(7px) saturate(105%);
  transform:scale(1.04);
}
/* wash it back so the headline stays readable and it melts into the paper */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(247,245,239,.62) 0%,
    rgba(247,245,239,.58) 45%,
    rgba(247,245,239,.86) 82%,
    var(--paper) 100%);
}

/* second backdrop for everything below the fold. It starts well past the hero
   and fades in as you reach the treasury, holding to the bottom of the page.
   Same layer order as the hero image, so drips still run over it. */
.page-bg{
  position:absolute;
  top:100svh;left:0;right:0;bottom:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.page-bg::before{
  content:"";position:absolute;inset:-40px;
  background:url(/page-bg.webp) center/cover no-repeat;
  background-attachment:local;
  filter:blur(7px) saturate(105%);
  transform:scale(1.04);
}
.page-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--paper) 0%,
    rgba(247,245,239,.94) 22%,
    rgba(247,245,239,.72) 48%,
    rgba(247,245,239,.6) 100%);
}

/* page-wide drips: a fixed, click-through layer pinned behind the content, so
   the cursor leaves a trail anywhere on the site and it pools at the bottom of
   the window. sits above the paper background but under everything readable. */
.liquid-page{
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
}
.liquid-page .goo-clip{position:absolute;inset:0;overflow:hidden;border-radius:0}
.liquid-page .goo-canvas{opacity:.82}   /* matches how vivid the header reads */
/* NB: the header must keep position:sticky. Listing it here previously
   overrode that, which broke sticking and shifted it 16px over the content. */
main,.doc-shell,.site-footer{position:relative;z-index:1}

/* liquid drips layer — clipped to the pill by its own wrapper, so the header
   itself can let hovered buttons pop outside its bounds */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.goo-clip{
  position:absolute;inset:0;z-index:0;
  border-radius:inherit;overflow:hidden;
  pointer-events:none;
}
.goo-canvas{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:.88;
  filter:url(#goo) drop-shadow(0 0 7px rgba(126,209,63,.45));
}
/* A full-viewport goo filter measured 7-8fps (it rasterises the whole layer
   every frame), so large hosts skip it and fake the merge while drawing. */
.goo-canvas.flat{filter:none}
@media (prefers-reduced-motion:reduce){.goo-canvas{display:none}}

.brand{display:flex;align-items:center;margin-right:auto}
.brand-mark{
  width:44px;height:44px;object-fit:contain;
  transition:transform .2s ease;
}
.brand:hover .brand-mark{transform:scale(1.04)}

.nav{display:flex;align-items:center;gap:22px;padding-right:6px}
.nav-link{
  display:inline-flex;align-items:center;
  font:500 1.02rem/1 Inter,system-ui,sans-serif;
  color:var(--brand-deep);
  transition:color .18s ease,transform .18s ease,opacity .18s ease;
}
.nav-link:hover{color:var(--brand);transform:translateY(-1px)}
.nav-icon svg{width:22px;height:22px;fill:currentColor;display:block}
.nav-icon{padding:4px}
.nav-toggle,.nav-burger{display:none}

/* ---------- glass button: buttons.png, 3-sliced ---------- */
/* the caps are sliced out of the asset and the middle stretches, so the
   pill keeps its exact round ends at any label width. slice 100 of a
   200px-tall source == radius, and border width height/2 keeps it circular. */
.btn-glass{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;
  padding:0 6px;
  -webkit-appearance:none;appearance:none;
  background:transparent;                       /* kill the UA buttonface fill */
  border:0 solid transparent;
  border-left-width:23px;                       /* = height / 2 */
  border-right-width:23px;
  border-image:url(/button.webp) 0 100 fill / 0 23px / 0 stretch;
  font:600 .94rem/1 Inter,system-ui,sans-serif;
  letter-spacing:-.005em;
  color:#2F5124;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
  cursor:pointer;
  filter:drop-shadow(0 5px 8px rgba(48,78,46,.26));
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),filter .2s ease;
}
.btn-glass:hover{
  transform:translateY(-3px) scale(1.035);      /* small pop */
  filter:drop-shadow(0 10px 14px rgba(48,78,46,.3)) drop-shadow(0 0 12px rgba(178,232,150,.55));
}
.btn-glass:active{transform:translateY(0) scale(.99);filter:drop-shadow(0 3px 5px rgba(48,78,46,.3))}
.btn-glass:focus-visible{outline:2px solid #46801F;outline-offset:5px}

/* ---------- hero ---------- */
/* the hero is the one full-screen page; everything after it scrolls freely.
   the sticky header already takes --header-space in flow above this, so the
   hero only needs the remainder or it would push a screen and a bit. */
.hero{
  display:flex;align-items:center;
  min-height:calc(100svh - var(--header-space));
  padding:28px 0 44px;
}
.hero-inner{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(28px,5vh,64px);
  width:100%;
}
/* copy on the left, mark on the right */
.hero-top{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
  gap:40px;
}

/* one row of six along the bottom of the first screen. the panel art needs a
   thick border to draw its corners, so these run a compact variant. */
.hero-stats .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.hero-stats .panel{border-width:19px;padding:0}
.hero-stats .panel::before{inset:-19px;border-width:19px;border-image-width:19px}
.hero-stats .panel::after{inset:-10px 0 0;border-radius:20px}
.hero-stats .stat strong{
  margin:7px 0 2px;
  font-family:'Space Grotesk',Inter,system-ui,sans-serif;
  font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.15rem,1.8vw,1.6rem);
  font-variant-numeric:tabular-nums lining-nums;
}
.hero-stats .lbl{font-size:.66rem;letter-spacing:.07em;line-height:1.25}
.hero-stats .stat .sub{font-size:.74rem}
.hero-title{
  display:grid;gap:.02em;
  font-family:'Space Grotesk',Inter,system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(2.05rem,3.9vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--ink);
}
.hero-title span:last-child{color:var(--brand)}
.hero-sub{
  margin:22px 0 0;
  max-width:46ch;
  font-size:1.06rem;
  line-height:1.6;
  color:var(--ink-soft);
}


/* ---------- how it works (home) ----------------------------------------
   stacked horizontal strips rather than four tall columns: number and title
   on the left, the explanation running across — much shorter to read down. */
.loop-grid{display:grid;grid-template-columns:1fr;gap:10px}
.loop-step{
  display:grid;
  grid-template-columns:52px minmax(130px,180px) minmax(0,1fr);
  align-items:center;
  column-gap:20px;
  border-width:18px;
  padding:0;
}
.loop-step::before{inset:-18px;border-width:18px;border-image-width:18px}
.loop-step::after{inset:-9px 0 0;border-radius:20px}
.loop-step .step-n{
  font-family:'Space Grotesk',Inter,system-ui,sans-serif;
  font-size:1.95rem;
  font-weight:400;
  line-height:1;              /* keeps the strip the same height as before */
  letter-spacing:-.02em;      /* the old tracking left a gap that read as a box */
  color:var(--brand-soft);
  font-variant-numeric:tabular-nums lining-nums;
}
.loop-step h3{margin:0;font-size:1.02rem;letter-spacing:-.02em}
.loop-step p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.how-more{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:22px}

/* ---------- subpages: ladder, staking ----------------------------------
   These were shipped without styles, so the title ran under the floating
   header and stacked panels butted straight into each other. -------------*/
.subpage{padding-bottom:8px}
.page-head{
  padding-top:36px;          /* clear of the sticky header, which sits above */
  padding-bottom:4px;
}
.page-eyebrow{
  display:block;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-soft);
}
.page-head h1{
  margin:12px 0 0;
  font-family:'Space Grotesk',Inter,system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  letter-spacing:-.035em;
}
.page-head p{
  margin:14px 0 0;max-width:58ch;
  font-size:1.05rem;line-height:1.6;color:var(--ink-soft);
}

/* the panel art fills its whole border box, so siblings need real space
   between them or they touch */
.subpage .section > .wrap > * + *{margin-top:30px}

.stake-note h2{
  margin:0 0 12px;
  font-family:'Space Grotesk',Inter,system-ui,sans-serif;
  font-weight:500;font-size:1.2rem;letter-spacing:-.02em;
}
.stake-note p{margin:0 0 12px;color:var(--ink-soft);line-height:1.65}
.stake-note p:last-child{margin-bottom:0}
.ladder-note{margin-top:26px}

/* ---------- glass panel: the button asset, 9-sliced so it grows both ways ---
   slice 99 of the 200px-tall source is the pill's radius, so the corners stay
   true quarter-rounds and only the edges stretch. -----------------------------*/
.panel{
  position:relative;
  isolation:isolate;
  border:34px solid transparent;
  padding:2px 6px 8px;
}
/* the art sits on its own layer: a filter on the panel itself would force the
   whole box to re-filter whenever anything inside it repaints */
.panel::before{
  content:"";
  position:absolute;inset:-34px;
  border:34px solid transparent;
  border-image:url(/panel.webp) 99 fill / 34px / 0 stretch;
  pointer-events:none;
  z-index:-1;
}
.panel::after{
  content:"";
  position:absolute;inset:-18px 0 0;
  border-radius:34px;
  box-shadow:0 14px 26px -10px rgba(48,78,46,.20);
  pointer-events:none;
  z-index:-2;
}

/* ---------- sections ---------- */
.section{
  padding:64px 0;
  content-visibility:auto;      /* off-screen sections cost nothing to render */
  contain-intrinsic-size:auto 640px;
}
/* a section taller than the screen must not be clipped or trapped */
.section > .wrap{width:100%}
.sec-head{margin-bottom:26px}
.sec-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em}
.sec-head p{margin:8px 0 0;color:var(--ink-soft);font-size:1rem}
.muted{color:var(--ink-soft)}
.is-hidden{display:none !important}
.lbl{
  display:block;font-size:.76rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-soft);
}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}

/* ---------- fee decay ---------- */
.fee-rates{display:flex;flex-wrap:wrap;gap:14px 44px;padding:6px 10px 16px}
.fee-rate strong{
  display:block;margin-top:6px;
  font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:600;
  letter-spacing:-.035em;color:var(--ink);
}
.fee-countdown strong{color:var(--brand)}
.fee-chart{margin:0;padding:0 6px}
.fee-chart svg{width:100%;height:auto;display:block;overflow:visible}
.fee-chart .grid line{stroke:rgba(60,90,50,.16);stroke-width:1}
.fee-chart .grid text{fill:var(--ink-soft);font-size:11px;text-anchor:end}
.curve-buy{stroke:#4E8F27;stroke-width:3;stroke-linecap:round}
.curve-sell{stroke:#8FCD53;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 5}
.now{stroke:#2F5124;stroke-width:2}
.fee-chart figcaption{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding:12px 2px 4px;font-size:.86rem;color:var(--ink-soft);
}
.key{width:14px;height:3px;border-radius:2px;display:inline-block;margin-right:7px;vertical-align:middle}
.key-buy{background:#4E8F27}
.key-sell{background:#8FCD53}
.fee-badge{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fee-badge strong{font-size:1.3rem;font-weight:600}

/* ---------- stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{text-align:left}
.stat strong{
  display:block;margin:10px 0 2px;
  font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;
  letter-spacing:-.03em;color:var(--ink);
}
.stat .sub{font-size:.82rem;color:var(--ink-soft)}

/* group label inside a stats block */
.grp-label{
  margin:30px 0 14px;
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-deep);
}
.grp-label span{
  display:block;margin-top:5px;
  font-size:.9rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink-soft);
}

/* ---------- treasury ---------- */
.treasury-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding:4px 8px 18px}
.treasury-top .big{display:block;margin-top:8px;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.035em}
.treasury-next strong{display:block;margin-top:8px;font-size:1.3rem;font-weight:600;color:var(--brand)}
.meter{
  height:14px;border-radius:999px;margin:0 8px;
  background:rgba(70,128,31,.12);
  box-shadow:inset 0 1px 2px rgba(48,78,46,.18);
  overflow:hidden;
}
.meter > span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(180deg,#9BDC63,#5FA82E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:width .5s ease;
}
.meter-legend{display:flex;justify-content:space-between;gap:16px;padding:10px 8px 0;font-size:.88rem}
.treasury-action{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px 8px 6px}
.note{margin:0;max-width:56ch;font-size:.9rem;color:var(--ink-soft)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto}
.ladder-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:820px}
.addr-table{min-width:0}
.ladder-table th{
  text-align:left;padding:10px 12px;white-space:nowrap;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-soft);border-bottom:1px solid rgba(70,128,31,.18);
}
.ladder-table td{padding:12px;border-bottom:1px solid rgba(70,128,31,.10);white-space:nowrap}
.ladder-table tr:last-child td{border-bottom:0}
.ladder-table td.warn{color:#A33;font-weight:600}
.tag{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:600}
.st-open{background:rgba(70,128,31,.10);color:var(--brand-deep)}
.st-filled{background:#DFF3C4;color:#2F5124;box-shadow:0 0 0 1px rgba(70,128,31,.35)}
.st-done{background:rgba(90,96,71,.10);color:var(--ink-soft)}
.rowmeter{width:110px;height:8px;border-radius:999px;background:rgba(70,128,31,.12);overflow:hidden}
.rowmeter > span{display:block;height:100%;background:linear-gradient(180deg,#9BDC63,#5FA82E)}
.empty-state{padding:34px 12px;text-align:center}
.empty-state strong{display:block;font-size:1.05rem;font-weight:600}
.empty-state p{margin:8px 0 0;color:var(--ink-soft);font-size:.94rem}
[data-addr].is-set{color:var(--brand-deep)}
.addr-link{text-decoration:none;border-bottom:1px solid rgba(70,128,31,.35)}
.addr-link:hover{border-bottom-color:var(--brand)}
.tok-link{
  color:var(--brand);font-weight:600;
  border-bottom:1px solid rgba(83,96,41,.4);
  transition:border-color .18s ease,color .18s ease;
}
.tok-link:hover{color:var(--brand-deep);border-bottom-color:var(--brand-deep)}

/* ---------- staking + chart ---------- */
.soon-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;padding:8px 10px 14px}
.soon-panel p{margin:12px 0 0;max-width:56ch;color:var(--ink-soft);font-size:.98rem}
.pill{
  display:inline-block;padding:5px 13px;border-radius:999px;
  background:rgba(70,128,31,.12);color:var(--brand-deep);
  font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.chart-panel iframe{width:100%;height:460px;border:0;border-radius:18px;display:block}

/* button variants */
.btn-glass.btn-sm{height:34px;border-left-width:17px;border-right-width:17px;border-image-width:0 17px;font-size:.84rem}
.btn-glass[disabled]{opacity:.55;cursor:not-allowed;filter:none;transform:none}
.btn-glass.is-ready{animation:ready 1.8s ease-in-out infinite}
@keyframes ready{
  0%,100%{filter:drop-shadow(0 5px 8px rgba(48,78,46,.26))}
  50%{filter:drop-shadow(0 5px 10px rgba(48,78,46,.3)) drop-shadow(0 0 14px rgba(160,232,95,.9))}
}

/* ---------- footer: the same floating glass bar as the header ---------- */
.site-footer{padding:20px 0 0;margin-top:56px;background:transparent}
.footer-inner{
  position:relative;
  display:flex;align-items:center;gap:22px;
  min-height:56px;
  padding:10px 18px 14px;
  /* boxed: rounded and inset at the sides, flush with the bottom of the page */
  border-radius:20px 20px 0 0;

  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.85);
  border-bottom:0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -8px 26px -14px rgba(83,96,41,.30),
    0 0 0 1px rgba(83,96,41,.05);
}
/* the specular sheen, clipped to the top corners like the header's */
.footer-inner::before{
  content:"";position:absolute;left:0;right:0;top:0;height:50%;
  border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
  pointer-events:none;
}
.footer-inner > *{position:relative}
.site-footer .brand-mark{width:34px;height:34px}

.footer-nav{display:flex;align-items:center;gap:22px;margin-right:auto}
.footer-nav a{
  font-size:.94rem;font-weight:500;color:var(--brand-deep);
  transition:color .18s ease,transform .18s ease;
}
.footer-nav a:hover{color:var(--brand);transform:translateY(-1px)}
.footer-x svg{width:17px;height:17px;fill:currentColor;display:block}
.footer-note{margin:0;color:var(--ink-soft);font-size:.86rem;white-space:nowrap}

/* ---------- responsive ------------------------------------------------
   large desktop → laptop → tablet → phone. panel borders and the snap
   padding shrink with the viewport so the art never eats the content. --*/

/* laptop */
@media (max-width:1180px){
  .wrap{padding:0 20px}
  .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* tablet */
@media (max-width:1024px){
  :root{--snap-pad:96px}
  .panel{border-width:28px}
  .panel::before{inset:-28px;border-width:28px;border-image-width:28px}
  .hero-inner{gap:32px}
  .hero-stats .stat-grid{grid-template-columns:1fr}
}

/* tablet portrait — stack the hero */
@media (max-width:900px){
  .hero{padding:24px 0 40px}
  .page-head{padding-top:26px}
  .subpage .section > .wrap > * + *{margin-top:22px}
  .hero{min-height:auto}
  .hero-stats .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-top{grid-template-columns:1fr;gap:24px;text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-visual img{width:min(100%,220px)}
  .hero-stats .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .section{padding:56px 0}
  .stat-grid,.stat-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .treasury-top{gap:14px}
  .chart-panel iframe{height:380px}
}

/* phone */
@media (max-width:720px){
  :root{--snap-pad:88px}
  .hero-visual{display:none}          /* first screen is copy + stats only */
  .hero-top{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  .panel{border-width:22px;padding:0 2px 4px}
  .panel::before{inset:-22px;border-width:22px;border-image-width:22px}
  .section{padding:44px 0}
  .sec-head{margin-bottom:20px}
  .loop-step{grid-template-columns:1fr;row-gap:6px;text-align:left}
  .loop-step .step-n{font-size:.72rem}
  .how-more{gap:14px}
  .chart-panel iframe{height:320px}

  .site-header{top:10px;padding-top:10px}
  .header-inner{border-radius:18px;flex-wrap:wrap}
  .header-inner::before{border-radius:18px 18px 0 0}
  .nav-burger{
    display:block;width:40px;height:40px;cursor:pointer;position:relative;
    border:1px solid rgba(83,96,41,.18);border-radius:12px;
    background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));
    box-shadow:inset 0 1px 0 #fff;
  }
  .nav-burger span,.nav-burger span::before,.nav-burger span::after{
    content:"";position:absolute;left:10px;width:18px;height:2px;
    background:var(--brand-deep);border-radius:2px
  }
  .nav-burger span{top:19px}
  .nav-burger span::before{top:-6px;left:0}
  .nav-burger span::after{top:6px;left:0}
  .nav{
    display:none;order:3;width:100%;
    align-items:center;gap:18px;
    padding:12px 4px 6px;margin-top:8px;
    border-top:1px solid rgba(83,96,41,.12);
  }
  .nav .btn-glass{margin-left:auto}
  .nav-toggle:checked ~ .nav{display:flex}
  .footer-inner{flex-wrap:wrap;gap:14px;padding:12px 16px 16px}
  .footer-nav{gap:16px;font-size:.9rem}
  .footer-note{width:100%;order:3}
}

/* small phone */
@media (max-width:520px){
  .stat-grid,.stat-grid-3{grid-template-columns:1fr}
  .panel{border-width:18px}
  .panel::before{inset:-18px;border-width:18px;border-image-width:18px}
  .hero-title{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .hero-stats .stat-grid{grid-template-columns:1fr}
  .treasury-action{flex-direction:column;align-items:flex-start}
  .soon-panel{flex-direction:column;align-items:flex-start}
  .brand-mark{width:38px;height:38px}
  .btn-glass{height:42px;border-left-width:21px;border-right-width:21px;border-image-width:0 21px}
}

/* short screens — don't letterbox the hero */
@media (max-height:680px){
  .hero{min-height:auto;padding:24px 0 36px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}