@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:#f3f0e7;
  --paper-2:#e9e5da;
  --ink:#0b0b0b;
  --muted:#62645f;
  --line:#111;
  --lime:#c9ff00;
  --lime-2:#9bd500;
  --purple:#a86cff;
  --blue:#37a8ff;
  --green:#50d96b;
  --gold:#ffb400;
  --red:#ff3d42;
  --card:#111;
  --card-2:#171717;
  --white:#fff;
  --display:'Archivo',Arial,sans-serif;
  --mono:'Space Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--display);line-height:1.5}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);background-size:28px 28px;z-index:-1}
a{color:inherit;text-decoration:none}a:hover{text-decoration:none}img{max-width:100%}

/* NAV */
.topbar{position:sticky;top:0;z-index:100;background:rgba(243,240,231,.94);backdrop-filter:blur(14px);border-bottom:3px solid var(--line)}
.topbar-inner{max-width:1220px;margin:auto;padding:12px 22px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
.brand{display:flex;align-items:baseline;gap:7px;font-weight:900;font-size:1.05rem;letter-spacing:-.04em;white-space:nowrap}
.brand-robohood{font-size:1.18rem}.brand .sub{font:700 .62rem var(--mono);color:#666;letter-spacing:.04em}
.nav-links{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.nav-links a{font:700 .68rem var(--mono);letter-spacing:.03em;padding:8px 11px;border:2px solid transparent;text-transform:uppercase}
.nav-links a:hover{background:var(--lime);border-color:var(--line)}
.nav-links a.active{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.nav-links a.opensea-link{border-color:var(--line)}.nav-links a.opensea-link.disabled{opacity:.45;cursor:not-allowed}
.nav-right-group{display:flex;justify-content:flex-end}
.nav-wallet-btn{font:800 .68rem var(--mono);background:var(--lime);color:var(--ink);border:2px solid var(--line);padding:9px 12px;cursor:pointer;box-shadow:3px 3px 0 var(--line);white-space:nowrap}
.nav-wallet-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--line)}
.nav-wallet-btn.connected{background:var(--ink);color:var(--lime);border-color:var(--line);cursor:default}

/* GENERAL */
.page{max-width:1120px;margin:0 auto;padding:0 22px 80px}
.marquee{padding:52px 0 28px;border-bottom:3px solid var(--line)}
.eyebrow{font:700 .68rem var(--mono);letter-spacing:.09em;margin:0 0 12px;color:var(--muted);text-transform:uppercase}.eyebrow .dot{display:inline-block;width:8px;height:8px;background:var(--lime);border:2px solid var(--line);margin-right:7px;vertical-align:middle}
h1.logo{margin:0;font:900 clamp(42px,8vw,88px)/.9 var(--display);letter-spacing:-.075em;text-transform:uppercase;color:var(--ink)}
.tagline{margin:16px 0 0;font:500 1rem var(--mono);color:var(--muted)}
.panel{background:var(--paper);border:3px solid var(--line);padding:26px;margin:22px 0;box-shadow:7px 7px 0 var(--line);position:relative}
.panel-title{font:900 .86rem var(--mono);letter-spacing:.06em;margin:0 0 5px;text-transform:uppercase}.panel-sub{margin:0 0 18px;color:var(--muted);font:500 .86rem/1.65 var(--mono)}
.step-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.status-pill{font:700 .64rem var(--mono);padding:6px 9px;border:2px solid var(--line);background:var(--paper-2);text-transform:uppercase}.status-pill.ok{background:var(--lime);color:var(--ink)}.status-pill.warn{background:var(--gold)}
.msg{font:600 .78rem var(--mono);margin-top:10px;min-height:18px}.msg.err{color:var(--red)}.msg.ok{color:#15802b}

/* BUTTONS */
button.play,a.play{display:block;width:100%;margin-top:15px;padding:14px 16px;background:var(--lime);color:var(--ink);border:3px solid var(--line);box-shadow:4px 4px 0 var(--line);font:900 .78rem var(--mono);letter-spacing:.02em;text-transform:uppercase;text-align:center;cursor:pointer;transition:.12s ease}
button.play:hover,a.play:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--line)}
button.play:active,a.play:active{transform:translate(4px,4px);box-shadow:none}button.play:disabled{opacity:.5;cursor:not-allowed}
button.play.ghost,a.play.ghost{background:var(--paper);color:var(--ink)}button.play.ghost:hover,a.play.ghost:hover{background:var(--ink);color:var(--lime)}
.btn-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.btn-row .play{margin:0;min-width:0}
.pill-btn{font:800 .65rem var(--mono);background:var(--lime);border:2px solid var(--line);padding:8px 11px;cursor:pointer}.pill-btn:hover{background:var(--ink);color:var(--lime)}

/* HOME */
body.watermark{background-color:var(--paper)}
.hero{max-width:1120px;margin:0 auto;padding:58px 22px 35px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:38px;align-items:center}
.sticker{display:inline-block;background:var(--lime);border:3px solid var(--line);box-shadow:5px 5px 0 var(--line);padding:7px 12px;font:900 .64rem var(--mono);transform:rotate(-2deg);margin-bottom:22px}
.hero-tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.hero-tags .tag{border:2px solid var(--line);padding:5px 9px;font:700 .62rem var(--mono);background:var(--paper-2)}.hero-tags .slash{font:700 .8rem var(--mono);color:#777}
.hero-small{font:700 .78rem var(--mono);margin:0 0 10px;color:#555;text-transform:uppercase}.hero-title{margin:0;font:900 clamp(54px,8vw,106px)/.83 var(--display);letter-spacing:-.085em;text-transform:uppercase}.hero-yellow{display:inline-block;margin-top:22px;background:var(--ink);color:var(--lime);padding:8px 12px;border:3px solid var(--ink);font:900 clamp(14px,2vw,20px)/1.1 var(--display);text-transform:uppercase;letter-spacing:-.02em}.hero-desc{max-width:680px;margin:20px 0 0;color:#454640;font:500 .82rem/1.75 var(--mono)}.hero-desc .code{background:var(--ink);color:var(--lime);padding:2px 5px}
.hero-ctas{display:flex;gap:12px;margin-top:24px}.hero-ctas a.play{width:auto;min-width:190px;margin:0}
.hero-art{position:relative;border:3px solid var(--line);background:var(--card);box-shadow:9px 9px 0 var(--line);padding:14px}.hero-art:before{content:"ROBOHOOD / 4 COLORS / 4 TIERS";display:block;color:var(--lime);font:700 .6rem var(--mono);letter-spacing:.08em;padding:3px 4px 11px}.hero-art-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.hero-art-grid img{width:100%;display:block;aspect-ratio:1;object-fit:cover}.hero-art-foot{display:flex;justify-content:space-between;gap:10px;padding:11px 4px 2px;color:#ddd;font:700 .62rem var(--mono)}
.status-panel{margin-top:18px}.status-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.status-row{display:flex;justify-content:space-between;gap:15px;border-top:2px solid var(--line);padding:12px 0;font:600 .75rem var(--mono)}.status-row .k{color:#777;text-transform:uppercase}.status-row .v{font-family:var(--mono)}.status-row .v.dash{color:#999}.status-supply .v{color:#159128}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}.step-card{background:var(--ink);color:#eee;border:3px solid var(--line);padding:22px;box-shadow:6px 6px 0 #b6b2a8}.step-num{display:flex;width:34px;height:34px;align-items:center;justify-content:center;background:var(--lime);color:var(--ink);font:900 .85rem var(--mono);border:2px solid var(--line)}.step-eyebrow{font:700 .62rem var(--mono);color:#888;text-transform:uppercase;margin:17px 0 3px}.step-title{font:900 1.1rem var(--display);text-transform:uppercase;margin:0 0 8px;color:var(--lime)}.step-desc{font:500 .76rem/1.65 var(--mono);color:#c7c7c7;margin:0}
.safety-panel{background:var(--ink);color:#eee;border:3px solid var(--line);padding:24px;box-shadow:7px 7px 0 var(--red);margin:26px 0}.safety-header{display:flex;align-items:center;gap:10px}.safety-header .panel-title{color:var(--lime)}.no-rug-pill{background:var(--lime);color:var(--ink);padding:4px 8px;font:900 .6rem var(--mono)}.safety-list{list-style:none;margin:12px 0 0;padding:0}.safety-item{display:flex;gap:10px;padding:10px 0;border-top:1px solid #333;font:500 .74rem/1.65 var(--mono)}.safety-item .check{flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--lime);color:var(--ink);font-weight:900}.code-chip{background:#252525;color:var(--lime);padding:2px 5px;font-family:var(--mono)}
.contract-info{border:3px solid var(--line);padding:16px 20px;background:var(--paper-2);margin:24px 0;box-shadow:5px 5px 0 var(--line)}.contract-info summary{cursor:pointer;font:900 .78rem var(--mono);list-style:none}.contract-info summary::-webkit-details-marker{display:none}.contract-info summary:before{content:'+';display:inline-block;margin-right:8px;background:var(--ink);color:var(--lime);padding:1px 5px}.contract-info[open] summary:before{content:'−'}.ci-grid{margin-top:14px}.ci-row{display:flex;justify-content:space-between;gap:12px;border-top:2px solid var(--line);padding:9px 0;font:600 .72rem var(--mono)}.ci-row .k{color:#777}.ci-row .v{text-align:right}

/* LOOT */
.loot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 8px}.slot{background:var(--card);border:3px solid var(--slot-color);padding:7px;box-shadow:4px 4px 0 var(--slot-color);text-align:center}.slot img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.slot .tier-name{margin-top:9px;color:var(--slot-color);font:900 .72rem var(--mono)}.slot .odds{color:#ddd;font:700 .7rem var(--mono);margin-top:2px}.slot.legendary{--slot-color:var(--gold)}.slot.epic{--slot-color:var(--purple)}.slot.rare{--slot-color:var(--blue)}.slot.common{--slot-color:var(--green)}.roll-note{font:600 .68rem/1.6 var(--mono);color:#777;margin:12px 0 0}

/* MINT */
.mint-hero{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;margin-bottom:22px}.mint-price{background:var(--ink);color:#eee;border:3px solid var(--line);padding:26px;box-shadow:7px 7px 0 var(--lime)}.mint-price .label{font:700 .65rem var(--mono);color:#999}.mint-price .amount{font:900 clamp(42px,7vw,76px)/.95 var(--display);letter-spacing:-.07em;color:var(--lime);margin:10px 0}.mint-price .note{font:600 .7rem/1.6 var(--mono);color:#c7c7c7}.curve-box{border:3px solid var(--line);padding:22px;background:var(--paper-2);box-shadow:7px 7px 0 var(--line)}.curve-box .curve-line{height:120px;position:relative;margin:18px 0 10px;overflow:hidden;border-bottom:3px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(0,0,0,.06) 49px),repeating-linear-gradient(0deg,transparent 0 28px,rgba(0,0,0,.06) 29px)}.curve-box svg{position:absolute;inset:0;width:100%;height:100%}.curve-labels{display:flex;justify-content:space-between;font:700 .62rem var(--mono)}
.field-label{font:700 .65rem var(--mono);color:#666;letter-spacing:.05em;margin:22px 0 7px;text-transform:uppercase}.url-row{display:flex;gap:8px}.url-row input{min-width:0;flex:1;background:var(--card);color:var(--lime);border:3px solid var(--line);padding:12px;font:600 .72rem var(--mono)}button.copy{border:3px solid var(--line);background:var(--lime);color:var(--ink);padding:0 15px;font:900 .65rem var(--mono);cursor:pointer}button.copy:hover{background:var(--ink);color:var(--lime)}.divider{border:0;border-top:3px dashed var(--line);margin:28px 0}.dialogue{margin-top:18px;border:3px solid var(--line);background:var(--ink);color:#eee;padding:18px;font:700 .82rem/1.5 var(--mono);box-shadow:5px 5px 0 var(--lime)}.dialogue .who{display:block;color:var(--lime);font:900 .62rem var(--mono);margin-bottom:7px}.cursor{display:inline-block;width:7px;height:15px;background:var(--lime);margin-left:4px;vertical-align:-3px;animation:blink .8s steps(1) infinite}.mint-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0}.flow-step{border:3px solid var(--line);padding:13px;background:var(--paper-2);min-height:120px}.flow-step .n{font:900 .65rem var(--mono);color:#777}.flow-step h3{font:900 .86rem var(--display);text-transform:uppercase;margin:9px 0 5px}.flow-step p{font:500 .66rem/1.55 var(--mono);color:#666;margin:0}

/* PROFILE */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{border:3px solid var(--line);background:var(--card);padding:18px;text-align:center;box-shadow:4px 4px 0 var(--lime)}.stat .num{font:900 1.7rem var(--display);color:var(--lime)}.stat .label{font:700 .6rem var(--mono);color:#aaa;margin-top:4px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}.item-card{background:var(--card);border:3px solid var(--tier-color);padding:9px;box-shadow:5px 5px 0 var(--tier-color)}.item-card img{width:100%;display:block;aspect-ratio:1;object-fit:cover}.item-card .name{color:var(--tier-color);font:900 .68rem var(--mono);margin-top:9px}.item-card.legendary{--tier-color:var(--gold)}.item-card.epic{--tier-color:var(--purple)}.item-card.rare{--tier-color:var(--blue)}.item-card.common{--tier-color:var(--green)}

/* DOCS */
.docs-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:20px;align-items:start}.docs-toc{position:sticky;top:82px;border:3px solid var(--line);background:var(--ink);padding:16px;box-shadow:5px 5px 0 var(--lime)}.docs-toc .t{color:var(--lime);font:900 .65rem var(--mono);margin-bottom:10px}.docs-toc a{display:block;color:#ddd;font:600 .7rem var(--mono);padding:6px 0;border-top:1px solid #333}.docs-toc a:hover{color:var(--lime)}.docs h2{font:900 clamp(1.25rem,3vw,2rem)/1 var(--display);letter-spacing:-.04em;margin:0 0 16px;text-transform:uppercase}.docs h3{font:900 1rem var(--display);text-transform:uppercase;margin:24px 0 8px}.docs p,.docs li{font:500 .78rem/1.75 var(--mono);color:#3f403d}.docs ul,.docs ol{padding-left:21px}.docs li{margin-bottom:6px}.docs code{background:var(--ink);color:var(--lime);padding:2px 5px;font:700 .72rem var(--mono)}.docs pre{background:var(--ink);color:#ddd;border:3px solid var(--line);padding:16px;overflow:auto;font:600 .68rem/1.6 var(--mono);box-shadow:5px 5px 0 #aaa}.docs pre code{background:none;padding:0}.docs table{width:100%;border-collapse:collapse;font:600 .7rem var(--mono);margin:14px 0}.docs th,.docs td{border:2px solid var(--line);padding:9px;text-align:left}.docs th{background:var(--ink);color:var(--lime);text-transform:uppercase}.docs td{background:var(--paper-2)}

/* FOOTER / MISC */
footer.legend{text-align:center;margin-top:28px;color:#777;font:600 .65rem/1.7 var(--mono)}footer.legend .k{color:#111}.footer-brand{max-width:1120px;margin:0 auto;padding:18px 22px 28px;border-top:3px solid var(--line);display:flex;justify-content:space-between;gap:15px;font:700 .62rem var(--mono);color:#777}.footer-brand .fb-name{color:var(--ink);font-weight:900}.empty{text-align:center;padding:42px 15px;color:#777;font:600 .75rem var(--mono)}.empty .glyph{font:900 2rem var(--display);color:#aaa;margin-bottom:12px}
@keyframes blink{50%{opacity:0}}

@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-art{max-width:680px}.topbar-inner{grid-template-columns:auto 1fr}.nav-right-group{grid-column:2}.mint-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.nav-links{justify-content:flex-start;overflow:auto}.nav-right-group{grid-column:1/-1;justify-content:flex-end}.hero{padding-top:38px}.step-grid,.mint-hero{grid-template-columns:1fr}.loot-grid{grid-template-columns:repeat(2,1fr)}.docs-layout{grid-template-columns:1fr}.docs-toc{position:static}.btn-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.topbar-inner{padding:10px 12px}.page{padding:0 14px 60px}.hero{padding:34px 14px 22px}.hero-title{font-size:clamp(46px,16vw,72px)}.hero-ctas{flex-direction:column}.hero-ctas a.play{width:100%}.panel{padding:20px 16px;box-shadow:5px 5px 0 var(--line)}.loot-grid{gap:8px}.stat-strip{grid-template-columns:1fr}.btn-row{grid-template-columns:1fr}.mint-flow{grid-template-columns:1fr}.url-row{flex-direction:column;gap:8px}button.copy{padding:12px}.footer-brand{flex-direction:column}}

/* ROBOHOOD mint refinements */
.nav-claude-btn{
  font:800 .66rem var(--mono);
  background:var(--purple);
  color:#fff;
  border:2px solid var(--line);
  padding:8px 10px;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:3px 3px 0 var(--line);
  white-space:nowrap;
}
.nav-claude-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--line);background:var(--ink);color:var(--lime)}
.curve-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.curve-head .panel-sub{max-width:520px}
.price-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px}
.price-mini-grid div{border:2px solid #444;padding:9px 8px;background:#171717}
.price-mini-grid span,.curve-economics span{display:block;color:#888;font:700 .56rem var(--mono);text-transform:uppercase}
.price-mini-grid b{display:block;color:var(--lime);font:900 .9rem var(--display);margin-top:3px}
.mint-progress-panel{background:var(--paper-2)}
.mint-progress-meta{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:8px 0 8px;font:800 .78rem var(--mono)}
.mint-progress-meta strong{font-size:1rem}
.mint-progress-meta span{color:#666}
.mint-progress-track{height:25px;border:3px solid var(--line);background:#d9d5ca;box-shadow:4px 4px 0 var(--line);overflow:hidden}
.mint-progress-fill{height:100%;width:0;background:var(--lime);border-right:3px solid var(--line);transition:width .35s ease}
.mint-progress-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;font:700 .62rem var(--mono);color:#666}
.mint-progress-foot span:nth-child(2){text-align:center;color:var(--ink)}
.mint-progress-foot span:last-child{text-align:right}
.mint-progress-foot b{color:var(--ink)}
.curve-economics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}
.curve-economics div{border-top:2px solid var(--line);padding-top:9px}
.curve-economics b{display:block;font:900 1rem var(--display);margin-top:2px}
.setup-callout{display:flex;justify-content:space-between;align-items:center;gap:15px;border:3px solid var(--line);padding:15px;background:var(--paper-2);box-shadow:4px 4px 0 var(--line)}
.setup-callout b{display:block;font:900 .78rem var(--mono)}
.setup-callout span{display:block;color:#666;font:500 .68rem var(--mono);margin-top:3px}
.play.compact{width:auto!important;margin:0!important;padding:10px 12px!important}
.claude-action{background:var(--purple)!important;color:#fff!important}
.helper-note{margin:10px 0 0;color:#777;font:600 .64rem/1.6 var(--mono)}
.mint-result-note{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px;padding:13px;border:2px solid var(--line);background:var(--paper-2);font:600 .68rem/1.55 var(--mono)}
.mint-result-note b{font-weight:900}
.economics-panel{background:var(--ink);color:#eee}
.economics-panel .panel-title{color:var(--lime)}
.economics-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:15px}
.economics-grid div{border:2px solid #333;padding:13px 10px;background:#171717}
.economics-grid span{display:block;color:#888;font:700 .56rem var(--mono)}
.economics-grid b{display:block;color:var(--lime);font:900 1.05rem var(--display);margin-top:4px}
.economics-panel .roll-note{color:#aaa}
@media(max-width:900px){
  .nav-claude-btn{display:none}
  .curve-head{flex-direction:column}
  .economics-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .price-mini-grid,.curve-economics,.mint-progress-foot{grid-template-columns:1fr}
  .mint-progress-foot span,.mint-progress-foot span:last-child{text-align:left}
  .setup-callout{flex-direction:column;align-items:flex-start}
  .mint-result-note{grid-template-columns:1fr}
  .economics-grid{grid-template-columns:repeat(2,1fr)}
}

.price-mini-grid.single{grid-template-columns:1fr}.price-mini-grid.single div{border-top:2px solid #333;padding-top:10px}
.mint-progress-foot{grid-template-columns:1fr 1fr}.mint-progress-foot span:first-child{text-align:left}.mint-progress-foot span:nth-child(2){text-align:right;color:var(--ink)}


/* ROBOHOOD brand mark */
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { width:38px; height:38px; object-fit:contain; display:block; background:#000; border:2px solid #111; }
.brand-wordmark { display:inline-flex; align-items:baseline; gap:0; }
@media (max-width: 700px) { .brand-mark { width:32px; height:32px; } }

/* ═══════════════════════════════════════════════════
   FULL-PAGE ANIMATION SYSTEM — ROBOHOOD PRO
   ═══════════════════════════════════════════════════ */

/* ---- SCROLL REVEAL BASE ---- */
.reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* Direction variants */
.reveal-up    { transform: translateY(48px); }
.reveal-down  { transform: translateY(-48px); }
.reveal-left  { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-scale { transform: scale(0.88); }
.reveal-blur  { filter: blur(12px); transform: translateY(24px); }

/* Stagger children — each child delays 80ms more */
.stagger > * { opacity: 0; transform: translateY(32px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 0.13s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 0.21s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 0.29s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 0.37s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 0.45s; }
.stagger.is-visible > * { opacity: 1; transform: none; }

/* ---- KEYFRAME ANIMATIONS ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 4px 4px 0 var(--line), 0 0 0 rgba(201,255,0,0); }
  50%      { box-shadow: 4px 4px 0 var(--line), 0 0 22px rgba(201,255,0,0.25); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--line); }
  50%      { box-shadow: 4px 4px 0 var(--line), 0 0 28px rgba(201,255,0,0.3), 0 0 8px rgba(201,255,0,0.15); }
}
@keyframes border-glow {
  0%, 100% { border-color: var(--line); }
  50%      { border-color: var(--lime); }
}
@keyframes text-glow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 18px rgba(201,255,0,0.4); }
}
@keyframes dash-draw {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.3) translateY(30px); }
  50%  { transform: scale(1.08) translateY(-4px); }
  70%  { transform: scale(0.96) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- MARQUEE ENTRANCE ---- */
.marquee .eyebrow { animation: slide-in-left 0.6s 0.1s cubic-bezier(0.16,1,0.3,1) both; }
.marquee h1.logo  { animation: slide-in-up 0.7s 0.25s cubic-bezier(0.16,1,0.3,1) both; }
.marquee .tagline  { animation: fade-in 0.8s 0.5s ease both; }

/* ---- HERO ART float ---- */
.hero-art { animation: float 4s ease-in-out infinite; }
.hero-art-grid img { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.hero-art-grid img:hover { transform: scale(1.06); z-index: 2; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

/* ---- STICKER bounce ---- */
.sticker { animation: bounce-in 0.6s 0.15s cubic-bezier(0.16,1,0.3,1) both; }

/* ---- HERO TITLE glow ---- */
.hero-title { animation: text-glow 3s ease-in-out infinite; }

/* ---- PANEL hover lift ---- */
.panel {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.panel:hover {
  transform: translateY(-3px);
  box-shadow: 9px 10px 0 var(--line);
}

/* ---- STEP CARDS entrance ---- */
.step-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: 8px 10px 0 #b6b2a8;
}
.step-num {
  transition: transform 0.25s ease, background 0.25s ease;
}
.step-card:hover .step-num {
  transform: scale(1.15) rotate(5deg);
  background: var(--ink);
  color: var(--lime);
}

/* ---- LOOT SLOT hover ---- */
.slot {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.slot:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 6px 8px 0 var(--slot-color), 0 0 20px rgba(201,255,0,0.1);
}
.slot img {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.slot:hover img {
  transform: scale(1.08);
}

/* ---- BUTTONS glow on hover ---- */
button.play:hover, a.play:hover {
  animation: glow-pulse 1.5s ease-in-out infinite;
}
button.play:not(:disabled) {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

/* ---- GENERATE MCP BUTTON special states ---- */
#generateBtn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
#generateBtn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.5s ease;
}
#generateBtn:hover::after {
  left: 100%;
}
#generateBtn.phase-generate {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
  animation: glow-pulse 2s ease-in-out infinite;
}
#generateBtn.phase-generate::after {
  animation: shimmer 2s linear infinite;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size: 200% 100%;
  left: 0;
}

/* ---- CURVE SVG draw ---- */
.curve-line svg path {
  stroke-dasharray: 600;
  animation: dash-draw 1.8s 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.curve-line svg circle {
  animation: pop-in 0.5s 2s cubic-bezier(0.16,1,0.3,1) both;
}

/* ---- FLOW STEPS stagger ---- */
.mint-flow .flow-step {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.mint-flow .flow-step:hover {
  transform: translateY(-4px);
  border-color: var(--lime);
  box-shadow: 4px 6px 0 var(--lime);
}
.mint-flow .flow-step .n {
  transition: color 0.3s ease;
}
.mint-flow .flow-step:hover .n {
  color: var(--lime);
}

/* ---- PROGRESS BAR shimmer ---- */
.mint-progress-fill {
  position: relative;
  overflow: hidden;
}
.mint-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
}

/* ---- STATUS PILL pulse when active ---- */
.status-pill.ok {
  animation: border-glow 2s ease-in-out infinite;
}

/* ---- SAFETY PANEL items ---- */
.safety-item {
  transition: transform 0.2s ease, padding-left 0.2s ease;
}
.safety-item:hover {
  transform: translateX(5px);
  padding-left: 5px;
}
.safety-item .check {
  transition: transform 0.25s ease;
}
.safety-item:hover .check {
  transform: scale(1.2) rotate(8deg);
}

/* ---- CONTRACT INFO ---- */
.contract-info {
  transition: box-shadow 0.3s ease;
}
.contract-info:hover {
  box-shadow: 7px 7px 0 var(--lime);
}

/* ---- DIALOGUE cursor glow ---- */
.dialogue {
  transition: box-shadow 0.3s ease;
}
.dialogue:hover {
  box-shadow: 5px 5px 0 var(--lime), 0 0 20px rgba(201,255,0,0.15);
}

/* ---- SETUP CALLOUT ---- */
.setup-callout {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.setup-callout:hover {
  transform: translateY(-2px);
  box-shadow: 5px 6px 0 var(--lime);
}

/* ---- URL ROW glow on focus ---- */
.url-row input:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 12px rgba(201,255,0,0.2);
}

/* ---- HERO YELLOW badge ---- */
.hero-yellow {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-yellow:hover {
  transform: scale(1.03);
  box-shadow: 0 0 16px rgba(201,255,0,0.2);
}

/* ---- NAV BRAND hover ---- */
.brand {
  transition: transform 0.2s ease;
}
.brand:hover {
  transform: scale(1.04);
}

/* ---- FOOTER subtle entrance ---- */
.footer-brand {
  animation: fade-in 1s 0.3s ease both;
}
footer.legend {
  animation: fade-in 1s 0.5s ease both;
}

/* ---- ECONOMICS GRID items ---- */
.economics-grid div {
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.economics-grid div:hover {
  transform: translateY(-3px);
  border-color: var(--lime);
}

/* ---- PRICE DISPLAY pulse ---- */
.mint-price .amount {
  animation: text-glow 3s ease-in-out infinite;
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .stagger > * { opacity: 1; transform: none; }
}

/* ROBOHOOD pricing + live chain cards */
.price-step-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:18px}
.price-step-grid>div{border:2px solid var(--line);background:var(--paper-2);padding:12px 8px;box-shadow:3px 3px 0 var(--line);display:flex;flex-direction:column;gap:5px;min-height:66px;justify-content:center}
.price-step-grid b{font:900 1rem var(--display);color:var(--ink)}
.price-step-grid span{font:600 .55rem var(--mono);color:var(--muted);text-transform:uppercase}
.live-chain-panel{background:var(--ink);color:#fff;border:3px solid var(--line);padding:24px;box-shadow:7px 7px 0 var(--line)}
.live-chain-panel .panel-title{color:var(--lime)}
.live-chain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.live-chain-grid>div{border:2px solid #444;background:#171717;padding:14px;display:flex;flex-direction:column;gap:6px;min-height:82px}
.live-chain-grid span{font:700 .54rem var(--mono);color:#999;letter-spacing:.06em;text-transform:uppercase}
.live-chain-grid b{font:900 .9rem var(--display);color:#fff}
.live-chain-grid>div:nth-child(2) b,.live-chain-grid>div:nth-child(3) b{color:var(--lime)}
.ci-row a{color:inherit;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.mint-progress-foot{flex-wrap:wrap;gap:10px 20px}
.mint-progress-foot small{font:700 .48rem var(--mono);color:var(--muted);margin-left:4px}
@media(max-width:900px){.price-step-grid{grid-template-columns:repeat(3,1fr)}.live-chain-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.price-step-grid{grid-template-columns:repeat(2,1fr)}.live-chain-grid{grid-template-columns:1fr 1fr}.live-chain-grid b{font-size:.78rem}}


/* =========================================================
   ROBOHOOD MOBILE / RESPONSIVE FIX — 2026-08
   Keeps the desktop design intact while making the entire
   site fit narrow phones without horizontal clipping.
   ========================================================= */

/* Prevent accidental horizontal overflow from long wallet/CID strings. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body[data-page="mint.html"] {
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
}

button, input, textarea, select {
  max-width: 100%;
  box-sizing: border-box;
}

/* Tablet / small laptop */
@media (max-width: 900px) {
  .topbar-inner {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 10px 16px;
  }

  .nav-links {
    min-width: 0;
    width: 100%;
  }

  .nav-links a {
    white-space: nowrap;
  }

  .nav-right-group {
    min-width: 0;
  }

  .page {
    width: 100%;
    max-width: 100%;
  }

  .mint-hero {
    grid-template-columns: 1fr;
  }

  .panel {
    min-width: 0;
  }

  .panel-sub,
  .helper-note,
  .roll-note,
  .msg,
  .dialogue,
  .mint-result-note,
  .setup-callout {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Phones */
@media (max-width: 600px) {
  .topbar {
    position: sticky;
    top: 0;
  }

  .topbar-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 9px 10px;
  }

  .brand {
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 7px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  .brand-wordmark {
    min-width: 0;
    font-size: .95rem;
  }

  .brand-robohood {
    font-size: 1rem;
  }

  .brand .sub {
    font-size: .5rem;
  }

  /* Keep nav on one compact horizontal strip rather than wrapping into
     a broken multi-row layout. The user can swipe it horizontally. */
  .nav-links {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding: 2px 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    flex: 0 0 auto;
    font-size: .58rem;
    padding: 7px 9px;
  }

  .nav-right-group {
    width: 100%;
    justify-content: stretch;
  }

  .nav-wallet-btn {
    width: 100%;
    min-height: 38px;
    font-size: .62rem;
  }

  .page {
    width: 100%;
    max-width: 100%;
    padding: 0 10px 42px;
  }

  .marquee {
    padding: 30px 2px 20px;
  }

  .eyebrow {
    font-size: .56rem;
    line-height: 1.5;
  }

  h1.logo {
    font-size: clamp(40px, 13vw, 64px);
    line-height: .88;
    letter-spacing: -.07em;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .tagline {
    margin-top: 12px;
    font-size: .72rem;
    line-height: 1.65;
    max-width: 100%;
  }

  .panel {
    width: 100%;
    max-width: 100%;
    padding: 17px 13px;
    margin: 16px 0;
    box-shadow: 5px 5px 0 var(--line);
  }

  .panel-title {
    font-size: .74rem;
    line-height: 1.35;
  }

  .panel-sub {
    font-size: .68rem;
    line-height: 1.6;
    margin-bottom: 13px;
  }

  .status-pill {
    font-size: .55rem;
    padding: 5px 7px;
  }

  /* Mint hero */
  .mint-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
  }

  .mint-price,
  .curve-box {
    width: 100%;
    min-width: 0;
    padding: 18px 14px;
    box-shadow: 5px 5px 0 var(--line);
  }

  .mint-price {
    box-shadow: 5px 5px 0 var(--lime);
  }

  .mint-price .amount {
    font-size: clamp(42px, 15vw, 66px);
  }

  .mint-price .note {
    font-size: .62rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .curve-box .curve-line {
    height: 92px;
    margin: 14px 0 8px;
  }

  .curve-labels {
    font-size: .56rem;
  }

  .price-mini-grid {
    grid-template-columns: 1fr 1fr;
  }

  .price-mini-grid div {
    padding: 9px 7px;
  }

  .price-mini-grid b {
    font-size: .8rem;
  }

  /* Progress */
  .mint-progress-meta {
    gap: 8px;
    font-size: .66rem;
    flex-wrap: wrap;
  }

  .mint-progress-meta strong {
    font-size: .8rem;
  }

  .mint-progress-track {
    height: 20px;
    box-shadow: 3px 3px 0 var(--line);
  }

  .mint-progress-foot {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: .54rem;
  }

  .mint-progress-foot span,
  .mint-progress-foot span:last-child {
    text-align: left;
  }

  /* Tier cards */
  .loot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 12px;
  }

  .slot {
    padding: 5px;
    box-shadow: 3px 3px 0 var(--slot-color);
  }

  .slot .tier-name {
    font-size: .6rem;
    margin-top: 6px;
  }

  .slot .odds {
    font-size: .58rem;
  }

  .roll-note {
    font-size: .57rem;
    line-height: 1.6;
  }

  /* Steps / callouts */
  .step-row {
    align-items: flex-start;
  }

  .setup-callout {
    gap: 10px;
    padding: 12px;
  }

  .setup-callout b {
    font-size: .68rem;
  }

  .setup-callout span {
    font-size: .58rem;
  }

  .play.compact {
    width: 100% !important;
  }

  button.play,
  a.play {
    width: 100%;
    min-height: 44px;
    padding: 12px 11px;
    font-size: .62rem;
  }

  .field-label {
    font-size: .58rem;
    margin-top: 17px;
  }

  .url-row {
    flex-direction: column;
    width: 100%;
  }

  .url-row input {
    width: 100%;
    min-width: 0;
    font-size: .58rem;
    padding: 10px;
  }

  .url-row .copy {
    width: 100%;
  }

  .helper-note {
    font-size: .56rem;
  }

  .mint-result-note {
    grid-template-columns: 1fr;
    font-size: .6rem;
    padding: 11px;
  }

  .dialogue {
    padding: 13px;
    font-size: .64rem;
  }

  .mint-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .flow-step {
    min-height: 0;
    padding: 12px;
  }

  .flow-step h3 {
    font-size: .82rem;
  }

  .flow-step p {
    font-size: .62rem;
    line-height: 1.55;
  }

  .curve-economics,
  .economics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .economics-grid div {
    padding: 10px 8px;
  }

  /* Prevent long addresses, URLs and hashes from ever stretching a card. */
  .ci-grid,
  .ci-row,
  .ci-row .v,
  .ci-row a,
  .mcp-url,
  input[readonly] {
    min-width: 0;
    max-width: 100%;
  }

  .ci-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .topbar-inner {
    padding-left: 8px;
    padding-right: 8px;
  }

  .page {
    padding-left: 8px;
    padding-right: 8px;
  }

  .brand-wordmark {
    font-size: .88rem;
  }

  .brand-robohood {
    font-size: .94rem;
  }

  h1.logo {
    font-size: clamp(36px, 12.5vw, 52px);
  }

  .tagline {
    font-size: .66rem;
  }

  .panel {
    padding: 14px 11px;
    box-shadow: 4px 4px 0 var(--line);
  }

  .loot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .mint-progress-foot {
    grid-template-columns: 1fr;
  }
}

/* Touch devices: remove hover transforms that can create visual overflow. */
@media (hover: none), (pointer: coarse) {
  button.play:hover,
  a.play:hover,
  .nav-wallet-btn:hover,
  .flow-step:hover {
    transform: none;
  }
}

/* =========================================================
   FINAL MOBILE HEADER FIX — 2026-08-18
   Forces a clean 3-row mobile header at <=600px:
   brand / nav / wallet. Prevents the nav from sitting beside
   the logo and eliminates the cramped desktop-grid layout.
   ========================================================= */
@media (max-width: 600px) {
  .topbar-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 10px 11px !important;
    gap: 9px !important;
  }

  .brand {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  .brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  .brand-wordmark {
    min-width: 0 !important;
    max-width: calc(100% - 40px) !important;
    display: inline-flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .92rem !important;
  }

  .brand-robohood {
    font-size: 1rem !important;
  }

  .brand .sub {
    font-size: .46rem !important;
    flex: 0 0 auto !important;
  }

  .nav-links {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 3px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-links::-webkit-scrollbar {
    display: none !important;
  }

  .nav-links a,
  .nav-links button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .nav-links a {
    font-size: .56rem !important;
    line-height: 1 !important;
    padding: 7px 8px !important;
    margin: 0 !important;
  }

  .nav-right-group {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  .nav-wallet-btn {
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    font-size: .58rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .nav-claude-btn {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .topbar-inner {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .nav-links {
    gap: 4px !important;
  }

  .nav-links a {
    font-size: .53rem !important;
    padding: 7px 7px !important;
  }

  .nav-wallet-btn {
    min-height: 36px !important;
    font-size: .56rem !important;
  }
}

/* FINAL — mobile brand matches desktop proportions without clipping */
@media (max-width: 600px) {
  .topbar-inner .brand {
    width: auto !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .topbar-inner .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    object-fit: contain !important;
  }

  .topbar-inner .brand-wordmark {
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    display: inline-flex !important;
    align-items: baseline !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
  }

  .topbar-inner .brand-robohood {
    font-size: 1.08rem !important;
    line-height: 1 !important;
    letter-spacing: -.055em !important;
  }

  .topbar-inner .brand-wordmark .sub,
  .topbar-inner .brand .sub {
    font-size: .50rem !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    margin-left: 1px !important;
  }
}

@media (max-width: 390px) {
  .topbar-inner .brand {
    gap: 7px !important;
  }

  .topbar-inner .brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .topbar-inner .brand-wordmark {
    font-size: .94rem !important;
  }

  .topbar-inner .brand-robohood {
    font-size: 1rem !important;
  }

  .topbar-inner .brand-wordmark .sub,
  .topbar-inner .brand .sub {
    font-size: .46rem !important;
  }
}

/* =========================================================
   MOBILE NAV — HAMBURGER MENU
   HOME / MINT / STAKING / DOCS / OPENSEA collapse into a
   toggled dropdown on phones. Desktop nav is untouched.
   Appended last on purpose so it wins over the earlier
   mobile !important rules above.
   ========================================================= */

.nav-toggle{display:none}

@media (max-width:600px){
  .topbar-inner{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    position:relative !important;
    gap:8px !important;
    padding:10px 10px 11px !important;
  }

  .brand{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
  }

  .nav-toggle{
    display:flex !important;
    order:2 !important;
    flex:0 0 auto !important;
    position:relative;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    background:var(--paper);
    border:3px solid var(--line);
    box-shadow:3px 3px 0 var(--line);
    cursor:pointer;
    padding:0;
  }
  .nav-toggle:hover{background:var(--lime) !important}
  .nav-toggle span{
    position:absolute;left:7px;right:7px;height:3px;background:var(--ink);
    transition:transform .15s ease,opacity .15s ease,top .15s ease;
  }
  .nav-toggle span:nth-child(1){top:11px}
  .nav-toggle span:nth-child(2){top:17px}
  .nav-toggle span:nth-child(3){top:23px}
  .nav-toggle.open span:nth-child(1){top:17px;transform:rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){top:17px;transform:rotate(-45deg)}

  .nav-links{
    display:none !important;
    position:absolute !important;
    top:100% !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    flex-direction:column !important;
    align-items:stretch !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
    gap:0 !important;
    margin:8px 0 0 !important;
    padding:6px !important;
    background:var(--paper) !important;
    border:3px solid var(--line) !important;
    box-shadow:6px 6px 0 var(--line) !important;
    z-index:200 !important;
  }
  .nav-links.open{display:flex !important}

  .nav-links a,
  .nav-links button{
    width:100% !important;
    flex:0 0 auto !important;
    white-space:normal !important;
  }
  .nav-links a{
    font-size:.72rem !important;
    line-height:1.4 !important;
    padding:12px 10px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:2px solid var(--line) !important;
    text-align:left !important;
  }
  .nav-links a:last-of-type{border-bottom:0 !important}
  .nav-links a:hover{background:var(--lime) !important}
  .nav-links a.active{background:var(--ink) !important;color:var(--lime) !important}

  .nav-claude-btn{display:none !important}

  .nav-right-group{
    order:3 !important;
    width:100% !important;
  }
}