/* SPONGE / PONS-inspired brand layer. Keep after the original prototype CSS.
   Accent fills and readable text have separate tokens. Existing hooks stay intact. */
:root {
  --bg:#fafbf4; --surface:#fff; --surface-2:#f2f5e9;
  --ink:#172b0b; --muted:#58644f; --line:rgba(34,56,19,.16);
  --accent:#baff36; --lime:#355f11; --cyan:#426b20;
  --pons:#396b85; --coral:#b33f48; --gold:#36591f;
  --radius:26px; --display:"Fredoka",system-ui,sans-serif;
}
body { background:var(--bg); color:var(--ink); }
body::before { display:none; }
::selection { background:var(--accent); color:var(--ink); }
button,input { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #4d751e; outline-offset:5px; }
section { padding:88px 0; scroll-margin-top:110px; }
.wrap { max-width:1280px; padding-inline:40px; }
.btn { border-radius:999px; min-height:48px; padding:14px 23px; font-family:"Hanken Grotesk",sans-serif; font-weight:700; transition:transform .2s,background-color .2s,border-color .2s; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-primary { background:var(--accent); color:var(--ink); }
.btn-primary:hover { background:#acef24; }
.btn-line { border:1px solid #a5b199; background:transparent; }
.btn-line:hover { background:#eef3e2; border-color:var(--ink); }
nav { background:rgba(250,251,244,.94); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
nav .wrap { height:84px; }
.brand { font-size:25px; letter-spacing:-.04em; gap:9px; }
.brand .mark { width:36px; height:36px; border-radius:12px; }
.navlinks { font-size:14px; gap:23px; color:var(--ink); }
.navlinks a { position:relative; padding-block:8px; }
.navlinks a::after { content:""; position:absolute; height:2px; background:var(--ink); bottom:2px; left:0; right:0; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.navlinks a:hover::after { transform:scaleX(1); }
.hero { padding:46px 0 44px; overflow:hidden; }
.hero-grid { grid-template-columns:1.13fr 1fr; gap:36px; align-items:center; }
.hero-copy { padding:8px 0 20px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; margin:0 0 25px; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.hero-eyebrow::before { content:none; }
.hero h1 { font-size:clamp(48px,5.45vw,76px); line-height:1.03; font-weight:600; letter-spacing:-.04em; }
.hero h1 .pons-word { color:var(--ink); background:var(--accent); background-clip:border-box; -webkit-background-clip:border-box; filter:none; padding:0 .12em .065em; border-radius:.2em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hero .sub { font-size:17px; max-width:39ch; margin:26px 0; line-height:1.65; }
.cta { gap:10px; }
.trust { gap:16px; margin-top:24px; }
.trust span { font-size:11.5px; }
.trust span::before { content:none; }
.stage { margin:0; min-width:0; display:block; position:relative; border-radius:36px; overflow:hidden; isolation:isolate; background:#b6d9f2; aspect-ratio:1/1.09; border:1px solid rgba(82,133,158,.12); }
.stage::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,.6); box-shadow:inset 0 1px 16px rgba(255,255,255,.15); pointer-events:none; }
.stage .sponge { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; filter:none; }
.art-caption { position:absolute; bottom:20px; left:20px; right:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 17px; border-radius:16px; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.85); box-shadow:inset 0 1px 0 #fff; backdrop-filter:blur(14px); font-size:12px; font-weight:700; }
.art-caption b { font-family:var(--display); font-size:20px; letter-spacing:-.03em; }
.art-caption span { color:#36526a; }
.bob { animation:none; }
.prototype-note { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 13px; font-size:11px; font-weight:600; color:var(--muted); }
.prototype-note strong { color:var(--ink); font-weight:700; display:inline-flex; align-items:center; gap:7px; }
.prototype-note strong::before { content:""; width:6px; height:6px; border-radius:50%; background:#729d3d; }
#payouts { padding-bottom:64px; }
.readout { position:relative; display:grid; grid-template-columns:1.25fr 1fr; gap:0 40px; overflow:hidden; margin:0; padding:32px 36px 26px; border:0; border-radius:28px; background:var(--accent); box-shadow:none; }
.readout::before { content:""; position:absolute; pointer-events:none; width:430px; height:430px; border:1px solid rgba(34,56,19,.12); border-radius:50%; top:-300px; left:38%; box-shadow:0 0 0 28px rgba(34,56,19,.035),0 0 0 57px rgba(34,56,19,.03),0 0 0 85px rgba(34,56,19,.025); }
.readout .top { grid-column:1/-1; position:relative; }
.live { color:var(--ink); font-size:10px; letter-spacing:.11em; }
.readout .num { margin:10px 0 16px; font-family:var(--display); color:var(--ink); font-size:clamp(48px,7.5vw,86px); line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.readout .num .u { color:#3e5921; font-size:.23em; letter-spacing:-.02em; }
.spark { height:60px; align-self:center; margin:0 0 15px; }
#sparkline { stroke:#244709; stroke-width:1.5; }
#sparkfill { fill:rgba(42,79,15,.10); }
.grid4 { grid-column:1/-1; margin:8px 0 0; background:transparent; border:0; border-top:1px solid rgba(28,49,9,.2); border-radius:0; gap:0; }
.cell { background:transparent; padding:21px 20px 2px; border-right:1px solid rgba(28,49,9,.16); }
.cell:first-child { padding-left:0; }.cell:last-child { border-right:0; }
.cell b { font-family:"Hanken Grotesk",sans-serif; font-size:21px; font-weight:700; }
.cell span { color:#40592a; font-size:12px; }
.ca-strip { gap:16px; margin-top:16px; }
.ca { min-width:0; background:transparent; padding:16px 19px; border-radius:16px; gap:12px; }
.ca .sym { font-family:"Hanken Grotesk",sans-serif; font-size:13px; }
.ca .who { font-size:11px; }
.ca .addr { font-size:11px; }
.ca .copy { min-height:34px; padding:6px 10px; font-family:"Hanken Grotesk",sans-serif; font-weight:600; }
.explore { font-size:12px; gap:20px; }
.explore a { text-decoration:underline; text-decoration-color:#bdc9b1; text-underline-offset:4px; }
.kicker { text-transform:uppercase; letter-spacing:.11em; font-size:10px; color:var(--muted); }
.kicker svg { width:15px; height:15px; }
.h2 { font-size:clamp(34px,4.2vw,54px); line-height:1.05; font-weight:600; letter-spacing:-.035em; margin:15px 0 16px; }
.lead { font-size:16px; max-width:61ch; line-height:1.7; }
#how { background:#edf2e5; border-block:1px solid var(--line); }
.rail { margin-top:46px; }
.rail-line { height:1px; background:#bbcba7; }
.rail-drop { display:none; }
.rail-nodes { gap:28px; }
.rbadge { width:72px; height:72px; border-radius:23px; border:1px solid #dce6d1; box-shadow:0 0 0 9px #edf2e5; background:#fff; }
.rbadge.teal,.rbadge.gold { background:var(--accent); }
.rbadge.teal svg { color:var(--ink); }
.rstep { opacity:1; font-family:"Hanken Grotesk",sans-serif; font-weight:700; font-size:10px; }
.rnode b { font-family:"Hanken Grotesk",sans-serif; font-size:18px; }
.rnode p { font-size:14px; }
.rail-loop { margin-top:35px; background:transparent; border-color:#b8c7a5; font-size:12px; padding:9px 17px; }
.dcaption { color:#5b6950; font-size:13px; max-width:71ch; margin-top:18px; }
.panel { background:var(--surface); border-color:var(--line); box-shadow:none; padding:30px; }
.panel-h { padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.synced { font-family:"Hanken Grotesk",sans-serif; font-size:12px; }
#treasury { padding-bottom:70px; }
#treasury .panel>div:nth-child(2) { font-family:var(--display)!important; color:var(--ink)!important; font-size:clamp(44px,5vw,66px)!important; line-height:1.1; }
.asset { padding:22px 0; }
.a-badge { border-radius:14px; background:#e6efd9!important; color:var(--ink)!important; }
.a-amt { font-size:17px; }.a-usd { font-family:"Hanken Grotesk",sans-serif; font-size:21px; font-weight:700; }
.a-sub { font-size:12px; }
.preview-note { opacity:1; font-family:"Hanken Grotesk",sans-serif; font-size:12px; }
.deco { display:none; }
#rewards { border-top:1px solid var(--line); background:#f1f5e9; }
.stat-grid { gap:0; margin-top:36px; border-block:1px solid #d2dcc6; }
.tile { background:transparent; border:0; border-radius:0; padding:25px 26px; border-right:1px solid #d2dcc6; }
.tile:first-child { padding-left:0; }.tile:last-child { border:0; }
.tile .v { font-family:var(--display); color:var(--ink); font-size:38px; font-weight:500; letter-spacing:-.04em; }
.tile .k { font-size:12px; }
.wallet-label { display:block; width:100%; font-size:12px; font-weight:700; margin-top:18px; }
.checker { margin-top:9px; }
.checker input { background:#fafcf7; min-width:0; border-radius:12px; min-height:50px; font-size:13px; padding:13px 16px; }
.checker input:focus { outline:2px solid #729d3d; outline-offset:2px; }
.checker-help { font-size:12px; margin:12px 0 0; color:var(--muted); }
.checker-error { color:#a42e37; font-size:12px; margin:10px 0 0; }
.checker-error:empty { display:none; }
.co { background:#f3f7ed; border:0; min-width:0; }
.co .v { font-family:"Hanken Grotesk",sans-serif; font-size:23px; color:var(--ink); }
.ledger { background:white; border-radius:20px; min-width:750px; }
.ledger-wrap { border-radius:20px; }
.ledger th { background:#e5eddc; font-family:"Hanken Grotesk",sans-serif; color:#536448; padding:17px 18px; font-size:10px; }
.ledger td { padding:16px 18px; border-bottom:1px solid #eaf0e3; font-size:12px; }
.ledger .mono,.ledger .amt,.ledger .tx a { font-family:"Hanken Grotesk",sans-serif; font-variant-numeric:tabular-nums; }
.ledger .amt { color:#355f11; font-weight:700; }
.ledger .tx a { color:#3e6483; }
.ledger tbody tr:hover { background:#f5f8ef; }
.badge-ok { background:#e7f7d1; color:#345a16; padding:4px 9px; font-size:10px; }
.spec { border-radius:24px; }
.spec-row { padding:26px 30px; grid-template-columns:180px 1fr; }
.spec-row .l { font-family:"Hanken Grotesk",sans-serif; font-size:11px; font-weight:700; }
.spec-row .r b { font-family:"Hanken Grotesk",sans-serif; font-size:22px; font-weight:700; }
.spec-row:first-child { background:var(--accent); }
.spec-row:first-child .r b { font-family:var(--display); font-size:36px; letter-spacing:-.03em; }
.spec-row:first-child .l,.spec-row:first-child .r span { color:#3e5728; }
#buy { padding-top:0; }
.buy { overflow:hidden; border:0; border-radius:30px; background:#193408; color:#f3f8ea; padding:44px; --ink:#f3f8ea; --muted:#c2d1b4; --cyan:#baff36; --line:#425a33; }
.buy .kicker { color:#c4dda9; }
.buy .btn-primary { color:#193408; }
.buy .h2 { max-width:16ch; }
.steps { margin-top:34px; gap:26px; }
.step .n { background:var(--accent); border-radius:50%; }
.step b { font-family:"Hanken Grotesk",sans-serif; font-size:17px; }
.step span { font-size:14px; }
.warn { background:rgba(255,255,255,.04); border:1px solid #526844; color:#dae6d0; font-size:13px; }
.warn svg { color:#baff36; }
#faq { padding-top:0; }
details.qa { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; margin:0; }
details.qa summary { padding:24px 0; font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:18px; }
details.qa summary .plus { display:grid; place-items:center; width:30px; height:30px; border:1px solid #d1dcc6; border-radius:50%; font-size:18px; flex:none; }
details.qa p { padding:0 55px 24px 0; max-width:80ch; }
footer { padding:38px 0; background:#e8efdc; }
.smallprint { opacity:1; font-size:12px; max-width:47ch; }
.socials a { background:transparent; border-color:#becdaa; border-radius:50%; color:var(--ink); }
.socials a:hover { background:var(--accent); }

@media (min-width:921px) and (max-width:1150px) {
  .hero-grid { grid-template-columns:1.1fr 1fr; gap:24px; }
  .hero h1 { font-size:5.3vw; }.hero .sub { font-size:16px; }
  .navlinks { gap:16px; }.wrap { padding-inline:30px; }
  .trust { gap:11px; }.trust span { font-size:10.5px; }
  .hero .btn { font-size:14px; padding:13px 18px; }
}
@media (max-width:920px) {
  nav .wrap { height:auto; min-height:76px; flex-wrap:wrap; padding-top:16px; padding-bottom:10px; gap:12px; }
  .navlinks { display:flex; order:3; width:100%; overflow-x:auto; gap:22px; font-size:12px; padding-block:1px; white-space:nowrap; }
  nav .btn { min-height:42px; font-size:13px; padding:10px 17px; }
  section { scroll-margin-top:130px; padding-block:64px; }
  .hero { padding:35px 0; }.hero-grid { grid-template-columns:1fr; gap:28px; text-align:left; }
  .hero-copy { padding:0; }.hero h1 { font-size:clamp(48px,8.5vw,76px); }
  .hero .sub { margin-inline:0; max-width:50ch; font-size:17px; }
  .cta,.trust { justify-content:flex-start; }
  .stage { aspect-ratio:1.3; width:100%; max-height:520px; }
  .stage .sponge { object-position:center 48%; }
  .rail-nodes { grid-template-columns:1fr 1fr; gap:25px; }
  .rail-line { display:none; }
  .rnode { display:block; text-align:left; border:0; padding:0; background:transparent; }
  .rbadge { margin:0 0 20px; box-shadow:none; }
  .rnode p { max-width:28ch; }
  .stat-grid { grid-template-columns:repeat(4,1fr); }
  .tile { padding:24px 16px; }.tile .v { font-size:30px; }
  .steps { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px) {
  .wrap { padding-inline:20px; }
  .brand { font-size:22px; }.brand .mark { width:31px; height:31px; }
  .hero-eyebrow { font-size:9px; margin-bottom:22px; }
  .hero h1 { font-size:clamp(36px,9.6vw,60px); line-height:1.06; }
  .hero .sub { font-size:15.5px; margin:23px 0; }
  .cta .btn { font-size:13px; padding:13px 17px; }
  .trust { gap:12px; margin-top:22px; }.trust span { font-size:10px; gap:5px; }
  .stage { aspect-ratio:1; border-radius:25px; }
  .art-caption { bottom:14px; left:14px; right:14px; padding:11px 13px; font-size:10px; }
  .art-caption b { font-size:17px; }
  .prototype-note { display:block; font-size:10px; }.prototype-note>span { display:block; margin-top:5px; }
  .readout { padding:23px 22px; border-radius:24px; grid-template-columns:1fr; gap:0; }
  .readout .top { gap:10px; align-items:flex-start; }.readout .top .live { font-size:8px; }
  .readout .top .live:last-child { white-space:nowrap; }
  .readout .num { margin:20px 0 0; font-size:clamp(44px,12vw,72px); }
  .spark { margin:18px 0 10px; height:35px; }
  .grid4 { grid-template-columns:1fr 1fr; }
  .cell { padding:16px 0; border-right:0; }.cell:nth-child(even) { padding-left:20px; border-left:1px solid rgba(28,49,9,.16); }
  .cell:nth-child(-n+2) { border-bottom:1px solid rgba(28,49,9,.16); }
  .cell:nth-child(n+3) { padding-bottom:0; }.cell b { font-size:19px; }.cell span { font-size:11px; }
  .ca-strip { flex-direction:column; gap:10px; }.ca { padding:12px 14px; }
  .ca .addr { font-size:10px; }.explore { gap:15px; font-size:11px; }
  #payouts { padding-bottom:48px; }.h2 { font-size:36px; }.lead { font-size:15px; }
  .rail-nodes { grid-template-columns:1fr; gap:27px; }
  .rnode { display:flex; gap:20px; }.rbadge { width:58px; height:58px; border-radius:18px; margin:0; }
  .rbadge img { width:39px; height:39px; }.rnode p { max-width:none; }
  .rail-loop { font-size:10px; padding-inline:12px; gap:7px; }.rail-loop svg { width:29px; }
  .dcaption { font-size:12px; }
  .panel { padding:22px 20px; border-radius:22px; }.panel-h { gap:12px; padding-bottom:15px; margin-bottom:22px; }
  .panel-h .live { font-size:9px; }.synced { font-size:10px; }
  #treasury .panel>div:nth-child(2) { font-size:44px!important; }
  .asset { grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; padding:20px 0; }
  .asset>div:nth-child(2) { display:block; grid-column:1; padding-left:52px; }
  .a-sym { grid-column:1; grid-row:1; gap:12px; }.a-badge { width:40px; height:40px; }
  .asset .a-usd { grid-column:2; grid-row:1/3; font-size:18px; }
  .a-amt { font-family:"Hanken Grotesk",sans-serif; font-size:14px; font-weight:700; }.a-sub { font-size:10px; }
  .stat-grid { grid-template-columns:1fr 1fr; }.tile,.tile:first-child { padding:18px 0; }
  .tile:nth-child(even) { border-right:0; padding-left:22px; }.tile:nth-child(-n+2) { border-bottom:1px solid #d2dcc6; }
  .tile .v { font-size:35px; }.tile .k { font-size:11px; }
  .checker { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }.checker input { width:100%; font-size:12px; }
  .checker .btn { justify-content:center; }.checker-out { flex-direction:column; }.co { width:100%; }
  .spec-row { grid-template-columns:1fr; gap:8px; padding:22px; }.spec-row .r b { font-size:20px; }
  .spec-row:first-child .r b { font-size:29px; }.spec-row .r span { font-size:13px; }
  .buy { padding:28px 24px; border-radius:25px; }.buy .h2 { font-size:36px; }
  .warn { font-size:12px; padding:14px; }.buy .btn { font-size:14px; }
  details.qa summary { font-size:16px; gap:14px; }details.qa p { padding-right:0; font-size:14px; }
  .foot { gap:22px; }.preview-note { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}