:root{
  /* Licensed Brokers palette, pulled from the artwork itself.
     Brass is the collection's GOLD trait (226,184,72); ink navy is the
     most common suit colour deepened into a page ground; cream is
     terminal_cream, the most common background trait; sage is
     bullpen_sage. Nothing here is borrowed from a chain's branding. */
  --brass:#e2b848;
  --brass-2:#c69434;
  --brass-3:#fae082;
  --brass-glow:rgba(226,184,72,.5);
  --brass-soft:rgba(226,184,72,.11);

  /* legacy aliases so existing rules keep working */
  --acid:var(--brass);
  --acid-2:var(--brass-2);
  --acid-3:var(--brass-3);
  --acid-glow:var(--brass-glow);
  --acid-soft:var(--brass-soft);

  --bg:#0c0f16;
  --card:#141a26;
  --deep:#0a0d13;
  --line:rgba(226,184,72,.11);
  --line-2:rgba(226,184,72,.24);
  --text:#eee8da;
  --muted:#8b93a5;
  --paper:#e8dec8;
  --ink:#0c0f16;
  --sage:#a8bca4;
  --cyan:var(--sage);
  --red:#ce3a3e;
  --burgundy:#682a34;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --head:"Space Grotesk",ui-monospace,monospace;
  --body:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
  --pad:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;image-rendering:pixelated;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}

/* icons */
.ic{width:15px;height:15px;flex:0 0 auto;display:inline-block;vertical-align:-2px}
.ic.sm{width:11px;height:11px;opacity:.6}
.sep{display:inline-block;width:3px;height:3px;background:currentColor;
  opacity:.42;vertical-align:middle;margin:0 9px}

/* ============ nav ============ */
nav{position:sticky;top:0;z-index:60;background:rgba(8,10,7,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:30px;height:62px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--head);
  font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.logo img{width:30px;height:30px}
.nav-links{display:flex;gap:22px;margin-left:14px;font-size:12.5px;color:var(--muted)}
.nav-links a{padding:4px 0;transition:color .15s}
.nav-links a:hover,.nav-links a.on{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-btn{background:var(--paper);color:var(--ink);font-weight:700;font-size:13px;
  padding:9px 18px;white-space:nowrap}
.nav-btn:hover{background:#fff}
.burger{display:none;padding:8px;border:1px solid var(--line)}
.burger .ic{width:18px;height:18px}

/* ============ top strip ============ */
.strip{border-bottom:1px solid var(--line);background:var(--deep)}
.strip-in{display:flex;align-items:center;justify-content:center;gap:10px;
  height:38px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;text-align:center;padding:0 12px}
.strip-in b{color:var(--text);font-weight:600}
.pip{width:6px;height:6px;border-radius:50%;background:var(--acid);flex:0 0 auto}

/* ============ hero ============ */
.hero{padding:76px 0 64px;position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;
  align-items:center;position:relative;z-index:1}
h1{font-family:var(--head);font-size:clamp(34px,5.6vw,64px);font-weight:700;
  line-height:1.03;letter-spacing:-.022em;text-transform:uppercase;margin-bottom:20px}
h1 em{font-style:normal;color:var(--acid)}
.lede{font-size:clamp(15px,1.5vw,16.5px);line-height:1.7;color:var(--muted);
  max-width:50ch;margin-bottom:28px}
.lede b{color:var(--text);font-weight:500}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.b1{background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;padding:14px 26px}
.b1:hover{background:#fff}
.b2{border:1px solid var(--line-2);color:var(--text);font-weight:600;font-size:14px;padding:13px 24px}
.b2:hover{border-color:var(--text)}
.hero-facts{display:flex;gap:30px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11.5px;color:var(--muted)}
.hero-facts b{display:block;color:var(--text);font-size:19px;font-family:var(--head);
  font-weight:700;margin-top:3px;letter-spacing:-.01em}
.hero-art{position:relative}
.hero-art img{width:100%;border:1px solid var(--line)}
.hero-tag{position:absolute;left:0;bottom:0;background:var(--ink);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  padding:9px 15px;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.hero-tag b{color:var(--acid)}

/* ============ bento ============ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:26px}
.bx{background:var(--card);padding:26px;border:1px solid var(--line)}
.bx.wide{grid-column:span 2}
.bx .lab{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.15em;color:var(--muted);
  text-transform:uppercase;margin-bottom:14px}
.bx .lab .ic{color:var(--acid)}
.bx .big{font-family:var(--head);font-size:clamp(32px,4vw,40px);font-weight:700;
  letter-spacing:-.025em;line-height:1;margin-bottom:12px}
.bx .big.gold{color:var(--acid)}
.bx .big.green{color:var(--acid)}
.bx p{font-size:13.5px;line-height:1.62;color:var(--muted)}
.bx p b{color:var(--text);font-weight:600}

/* ============ sections ============ */
.sec{padding:clamp(56px,8vw,92px) 0}
.sec.paper{background:var(--paper);color:var(--ink)}
.sec.paper .kicker{color:rgba(8,10,7,.5)}
.sec.paper p{color:rgba(8,10,7,.68)}
.sec.deep{background:var(--deep)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px}
h2{font-family:var(--head);font-size:clamp(26px,4.4vw,50px);font-weight:700;
  line-height:1.05;letter-spacing:-.024em;text-transform:uppercase;margin-bottom:18px}
h2 em{font-style:normal;color:var(--acid)}
.sub{font-size:clamp(14.5px,1.5vw,16px);line-height:1.68;color:var(--muted);max-width:60ch}
.sec-head{margin-bottom:46px}

/* ============ marquee ============ */
.marq{overflow:hidden;border-block:1px solid var(--line);background:var(--card);padding:20px 0}
.marq-t{display:flex;gap:14px;width:max-content}
.marq-t img{width:132px;height:132px;border:1px solid var(--line)}

/* ============ steps ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(8,10,7,.12)}
.st{background:var(--paper);padding:30px 26px}
.sec:not(.paper) .st{background:var(--card)}
.st .n{display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:12px;letter-spacing:.12em;opacity:.5;margin-bottom:18px}
.st h3{font-family:var(--head);font-size:20px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.st p{font-size:14px;line-height:1.62}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;
  padding-top:34px;border-top:1px solid rgba(8,10,7,.14)}
.mt .v{font-family:var(--head);font-size:clamp(26px,3.4vw,34px);font-weight:700;
  letter-spacing:-.02em;line-height:1}
.mt .k{font-size:13px;margin-top:8px;opacity:.62;line-height:1.45}

/* ============ explorer ============ */
.exp{display:grid;grid-template-columns:264px 1fr;gap:26px;align-items:start}
.fil-toggle{display:none;align-items:center;gap:9px;width:100%;
  background:var(--card);border:1px solid var(--line);padding:13px 16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);margin-bottom:14px}
.fil-toggle .ic{color:var(--acid)}
.fil-n{margin-left:auto;color:var(--acid);font-size:11px}
.fil{background:var(--card);border:1px solid var(--line);position:sticky;top:78px}
.fil-h{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fil-h button{font-family:var(--mono);font-size:10px;color:var(--acid);letter-spacing:.07em}
.fil-b{max-height:530px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.fil-b::-webkit-scrollbar{width:6px}
.fil-b::-webkit-scrollbar-thumb{background:var(--line-2)}
details.cat{border-bottom:1px solid var(--line)}
details.cat summary{padding:12px 16px;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;font-family:var(--mono);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
details.cat summary::-webkit-details-marker{display:none}
details.cat summary .fx{width:11px;height:11px;position:relative;flex:0 0 auto}
details.cat summary .fx::before,details.cat summary .fx::after{
  content:"";position:absolute;background:var(--acid);transition:transform .2s}
details.cat summary .fx::before{top:5px;left:0;width:11px;height:1px}
details.cat summary .fx::after{left:5px;top:0;width:1px;height:11px}
details.cat[open] summary .fx::after{transform:scaleY(0)}
details.cat summary:hover{color:var(--text)}
.opt{display:flex;align-items:center;gap:9px;padding:8px 16px;font-size:12.5px;cursor:pointer}
.opt:hover{background:rgba(240,244,230,.04)}
.opt input{accent-color:var(--acid);width:14px;height:14px;flex:0 0 auto}
.opt .n{flex:1;color:var(--text);opacity:.85}
.opt .c{font-family:var(--mono);font-size:10px;color:var(--muted)}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.t-common{background:#5a614f}.t-uncommon{background:#8fae3c}
.t-rare{background:var(--cyan)}.t-legendary{background:var(--acid)}.t-mythic{background:#ff7ae0}
.exp-main{min-width:0}
.exp-bar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.srch-w{flex:1;min-width:190px;position:relative;display:flex;align-items:center}
.srch-w .ic{position:absolute;left:13px;color:var(--muted);pointer-events:none}
.srch{width:100%;background:var(--card);border:1px solid var(--line);
  padding:12px 14px 12px 36px;color:var(--text);font-family:var(--mono);font-size:13px}
.srch:focus{outline:none;border-color:var(--acid)}
.cnt{font-family:var(--mono);font-size:12px;color:var(--muted)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{background:var(--card);border:1px solid var(--line);padding:6px 10px;
  font-family:var(--mono);font-size:10px;display:flex;gap:8px;align-items:center;color:var(--muted)}
.chip b{color:var(--acid);font-weight:600}
.chip button{display:flex;padding:2px}
.chip button .ic{width:9px;height:9px}
.chip button:hover{color:var(--red)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);cursor:pointer}
.card:hover{border-color:var(--acid)}
.card img{width:100%;aspect-ratio:1}
.card .m{padding:8px 9px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px}
.card .m .i{color:var(--muted)}.card .m .r{color:var(--acid)}
.more{display:block;margin:28px auto 0;border:1px solid var(--line-2);padding:13px 32px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.more:hover{border-color:var(--acid);color:var(--acid)}

/* ============ grails ============ */
.grails{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gr{background:var(--card);border:1px solid var(--line);cursor:pointer}
.gr:hover{border-color:var(--acid)}
.gr img{width:100%;aspect-ratio:1}
.gr .lab{padding:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.05em;text-align:center;color:var(--muted)}
.gr .lab b{display:block;color:var(--acid);margin-top:3px}

/* ============ verify ============ */
.vbox{background:var(--card);border:1px solid var(--line);padding:clamp(20px,3vw,30px)}
.kv{display:grid;grid-template-columns:180px 1fr;gap:13px 22px;font-family:var(--mono);font-size:12px}
.kv .k{color:var(--muted);font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding-top:3px}
.kv .v{word-break:break-all;line-height:1.6;min-width:0}
.kv .v a{color:var(--acid);border-bottom:1px solid rgba(226,184,72,.32)}
.cp{margin-left:9px;border:1px solid var(--line);padding:3px 8px;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:5px;vertical-align:1px}
.cp .ic{width:10px;height:10px}
.cp:hover{color:var(--acid);border-color:var(--acid)}

/* ============ faq ============ */
.faq details{border-bottom:1px solid rgba(8,10,7,.14)}
.faq summary{padding:22px 2px;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:20px;font-family:var(--head);
  font-size:clamp(16px,2.2vw,19px);font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fx{width:15px;height:15px;position:relative;flex:0 0 auto;opacity:.55}
.faq summary .fx::before,.faq summary .fx::after{
  content:"";position:absolute;background:currentColor;transition:transform .22s}
.faq summary .fx::before{top:7px;left:0;width:15px;height:1.5px}
.faq summary .fx::after{left:7px;top:0;width:1.5px;height:15px}
.faq details[open] summary .fx::after{transform:scaleY(0)}
.faq p{padding:0 2px 24px;font-size:15px;line-height:1.72;max-width:76ch}

/* ============ footer ============ */
footer{border-top:1px solid var(--line);padding:48px 0 40px}
.ft{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.ft-l{max-width:340px}
.ft-l .logo{margin-bottom:14px}
.ft-l p{font-size:13px;line-height:1.65;color:var(--muted)}
.ft-cols{display:flex;gap:60px;flex-wrap:wrap}
.ft-c h4{font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.ft-c a{display:flex;align-items:center;gap:6px;font-size:13.5px;
  margin-bottom:10px;color:var(--text);opacity:.8}
.ft-c a:hover{opacity:1;color:var(--acid)}
.ft-bot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.8}

/* ============ modal ============ */
.modal{position:fixed;inset:0;z-index:100;display:none;background:rgba(5,7,4,.92);
  backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.mi{background:var(--card);border:1px solid var(--line-2);max-width:840px;width:100%;
  display:grid;grid-template-columns:1fr 1fr;max-height:88vh;overflow:hidden;position:relative}
.ma{background:var(--deep);padding:22px;display:flex;align-items:center}
.ma img{width:100%;border:1px solid var(--line)}
.ms{padding:28px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ms h3{font-family:var(--head);font-size:clamp(21px,3vw,26px);font-weight:700;
  letter-spacing:-.015em;margin-bottom:6px}
.mrank{font-family:var(--mono);font-size:12px;color:var(--acid);
  letter-spacing:.07em;margin-bottom:22px}
.tr{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.tr .tk{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.tr .tv{display:flex;align-items:center;gap:9px;text-align:right}
.tr .tp{font-family:var(--mono);font-size:10px;color:var(--muted)}
.mx{position:absolute;top:12px;right:14px;z-index:3;color:var(--muted);
  padding:8px;display:flex}
.mx .ic{width:20px;height:20px}
.mx:hover{color:var(--red)}

/* ============ responsive ============ */
@media(max-width:1020px){
  .grails{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
  :root{--pad:22px}
  .hero{padding:52px 0 44px}
  .hero-in{grid-template-columns:1fr;gap:38px}
  .hero-art{max-width:440px}
  .bento{grid-template-columns:1fr 1fr}
  .bx.wide{grid-column:span 2}
  .steps{grid-template-columns:1fr 1fr}
  .exp{grid-template-columns:1fr}
  .fil-toggle{display:flex}
  .fil{position:static;display:none}
  .fil.open{display:block}
  .fil-b{max-height:60vh}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--deep);
    border-bottom:1px solid var(--line);padding:8px 0}
  .nav-links.open a{padding:13px var(--pad);font-size:14px;
    border-bottom:1px solid var(--line)}
  .burger{display:flex}
  nav{position:sticky}
  .nav-in{position:relative}
  .mi{grid-template-columns:1fr;max-height:92vh}
  .ma{padding:16px;max-height:44vh}
  .ma img{max-height:38vh;width:auto;margin:0 auto}
  .ms{padding:22px}
  .marq-t img{width:104px;height:104px}
}
@media(max-width:640px){
  :root{--pad:18px}
  .strip-in{font-size:9.5px;letter-spacing:.1em;height:34px}
  .logo{font-size:15px}
  .logo img{width:26px;height:26px}
  .nav-btn{padding:8px 13px;font-size:12px}
  .hero-facts{gap:20px 26px}
  .hero-facts b{font-size:17px}
  .bento{grid-template-columns:1fr}
  .bx.wide{grid-column:span 1}
  .bx{padding:22px}
  .steps{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr;gap:18px}
  .grails{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .kv{grid-template-columns:1fr;gap:3px 0}
  .kv .k{margin-top:14px}
  .ft-cols{gap:34px}
  .sec-head{margin-bottom:34px}
  .b1,.b2{flex:1;text-align:center}
  .marq-t img{width:88px;height:88px}
  .cp{margin-left:0;margin-top:6px;display:inline-flex}
}
@media(max-width:380px){
  .grails{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:1fr}
}
/* touch devices: no hover-dependent reveals */
@media(hover:none){
  .card:hover,.gr:hover{transform:none}
  .marq-t img{filter:none}
}


/* ---------- dividends dashboard ---------- */

.rw-tiles{
  display:grid; gap:12px; margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
}
.rw-tile{
  border:1px solid var(--line); background:var(--card);
  padding:16px 18px; border-radius:2px; position:relative; overflow:hidden;
}
.rw-tile::after{
  content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--brass);
  opacity:.5;
}
.rw-k{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.rw-v{
  font-family:var(--head); font-size:20px; font-weight:700; color:var(--brass);
  margin-top:6px; word-break:break-word;
}
.rw-note{
  font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:10px;
}

.rw-panel{
  margin-top:22px; border:1px solid var(--line); background:var(--deep);
  border-radius:2px; overflow:hidden;
}
.rw-bar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.rw-who{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rw-addr{
  font-family:var(--mono); font-size:12px; color:var(--text);
}
.rw-chip{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--muted); padding:3px 8px; border-radius:2px;
}
.rw-chip.bad{ border-color:var(--red); color:#f0a2a4; }
.rw-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rw-mine{
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.06em;
}
.rw-mine b{ color:var(--brass); font-weight:700; }

.rw-wallets{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px 0; }
.rw-wbtn{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:var(--text); border:1px solid var(--line-2);
  padding:8px 12px; border-radius:2px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.rw-wbtn:hover{ border-color:var(--brass); color:var(--brass); }
.rw-wbtn:disabled{ opacity:.5; cursor:default; }
.rw-empty, .rw-msg{
  font-family:var(--mono); font-size:11px; color:var(--muted); padding:0 18px; margin:10px 0 0;
}
.rw-msg{ color:var(--brass-3); }

.rw-tablewrap{ overflow-x:auto; padding:14px 18px 18px; }
.rw-table{ width:100%; border-collapse:collapse; min-width:420px; }
.rw-table th{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-2);
  font-weight:400;
}
.rw-table td{
  font-family:var(--mono); font-size:12px; color:var(--text);
  padding:10px; border-bottom:1px solid var(--line);
}
.rw-id{ color:var(--brass); }
.rw-amt{ color:var(--text); }
.rw-state{ color:var(--muted); font-size:11px; }
.rw-act{ text-align:right; }
.rw-msgcell{ color:var(--muted); text-align:center; padding:18px 10px; }
.rw-claim{ padding:6px 12px; font-size:10px; }
/* What a license collects. Reads as data, so it stays monospace and dim
   against the brass id, and wraps rather than widening the table. */
.rw-picks{ color:var(--sage); font-size:11px; }
.rw-act{ white-space:nowrap; }
.rw-act .rw-claim + .rw-claim{ margin-left:6px; }

/* ---------- asset picker ---------- */
/* Overlay lives above the sticky nav. Fixed, not absolute, so a long token
   list cannot push it off screen on a short viewport. */
.rwp-back{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; padding:20px;
  background:rgba(10,13,19,.82); backdrop-filter:blur(6px);
}
.rwp-back[hidden]{ display:none; }
.rwp-box{
  width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line-2); padding:22px;
}
.rwp-title{ font-family:var(--head); font-size:17px; margin:0 0 8px; color:var(--text); }
.rwp-lead{ font-size:12.5px; line-height:1.65; color:var(--muted); margin:0 0 16px; }
/* An implicit `auto` grid column sizes to content and lets the flex row below
   blow past the modal on a narrow screen (measured 401px inside a 318px box at
   390px wide). An explicit minmax(0,1fr) track pins the row to the container
   and lets the select shrink instead. */
.rwp-rows{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.rwp-leg{ display:flex; gap:8px; align-items:center; width:100%; min-width:0; }
.rwp-sel{
  flex:1 1 auto; min-width:0; font-family:var(--mono); font-size:12px;
  background:var(--deep); color:var(--text);
  border:1px solid var(--line-2); padding:9px 10px;
}
.rwp-pct{
  flex:0 0 78px; font-family:var(--mono); font-size:12px; text-align:right;
  background:var(--deep); color:var(--text);
  border:1px solid var(--line-2); padding:9px 10px;
}
.rwp-rm{
  flex:0 0 auto; width:32px; height:34px; line-height:1;
  background:transparent; color:var(--muted);
  border:1px solid var(--line-2); font-size:15px; cursor:pointer;
}
.rwp-rm:hover{ color:var(--red); border-color:var(--red); }
.rwp-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px;
}
.rwp-foot .b2{ padding:8px 14px; font-size:11px; }
.rwp-sum{ font-family:var(--mono); font-size:11px; color:var(--muted); }
/* The total has to read 100% before the page will build a transaction, so it
   only turns brass when it actually does. */
.rwp-sumval{ color:var(--red); }
.rwp-sumval.ok{ color:var(--brass); }
.rwp-msg{
  font-family:var(--mono); font-size:11px; line-height:1.6;
  color:var(--red); margin:12px 0 0; min-height:1em;
}
.rwp-acts{ display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.rwp-acts .b1,.rwp-acts .b2{ padding:10px 18px; font-size:12px; }
@media (max-width:430px){
  .rwp-box{ padding:16px; }
  /* Same trap as the mint row: once these wrap into a column, a button's
     width becomes its height unless flex-basis is reset. */
  .rwp-acts{ flex-direction:column; }
  .rwp-acts .b1,.rwp-acts .b2{ flex:0 0 auto; width:100%; }
}

.rw-how{
  display:grid; gap:12px; margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.rw-step{
  border:1px solid var(--line); background:var(--card); padding:18px; border-radius:2px;
}
.rw-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--brass); opacity:.8;
}
.rw-step h3{
  font-family:var(--head); font-size:15px; margin:8px 0 6px; color:var(--text); font-weight:700;
}
.rw-step p{ font-size:13px; line-height:1.6; color:var(--muted); margin:0; }

@media (max-width:640px){
  .rw-v{ font-size:17px; }
  .rw-bar{ padding:12px 14px; }
  .rw-tablewrap{ padding:12px 14px 14px; }
  .rw-wallets{ padding:12px 14px 0; }
}

/* A disabled action must look disabled. Full-saturation brass on a button
   that cannot be pressed reads as the primary call to action and sends
   people clicking at nothing. */
.b1:disabled, .b2:disabled, .rw-claim:disabled{
  opacity:.38; cursor:not-allowed; filter:saturate(.55);
}
.b1:disabled:hover, .b2:disabled:hover, .rw-claim:disabled:hover{
  transform:none; box-shadow:none;
}

/* ---------- dividend rows inside the token modal ---------- */
/* Ties the art to the engine: opening a broker shows the weight that decides
   its cut, sourced from the same shard the contract verifies. */
.mdiv{
  border:1px solid var(--line); background:rgba(226,184,72,.045);
  padding:12px 14px; border-radius:2px; margin:14px 0 4px;
}
.mdiv-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:4px 0;
}
.mdiv-k{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted);
}
.mdiv-v{ font-family:var(--mono); font-size:12px; color:var(--brass); font-weight:700; }
.mdiv-proof{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--muted);
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  line-height:1.5; word-break:break-word;
}
.rw-proj{
  font-family:var(--mono); font-size:11px; color:var(--sage); line-height:1.6;
  padding:12px 18px 0; margin:0;
}
@media (max-width:640px){
  .mdiv-row{ flex-direction:column; gap:2px; }
  .rw-proj{ padding:10px 14px 0; }
}

/* While a token modal is open the page behind must not scroll. Otherwise the
   reader loses their place in the grid and a keyboard user can tab into
   content hidden behind the overlay.

   The scrolling element here is <html>, not <body>, so overflow:hidden on body
   alone does nothing. :has() lets the html element react to the body class
   without any extra JS.

   scrollbar-gutter:stable was tried here to stop the sideways shift when the
   bar disappears, but it reserves the gutter permanently and left clientWidth
   15px wider than scrollWidth on desktop. The overlay is opaque, so the shift
   is not visible anyway. */
body.noscroll{ overflow:hidden; }
html:has(body.noscroll){ overflow:hidden; }

/* ============ public mint ============ */
.mint{
  margin-top:26px; border:1px solid var(--line-2); background:var(--deep);
  border-radius:2px; overflow:hidden;
}
.mint-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line);
  background:var(--card);
}
.mint-badge{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brass);
}
.mint-badge .ic{ width:14px; height:14px; }
.mint-stage{
  font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em;
}
.mint-body{ padding:18px; }
.mint-facts{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-bottom:18px;
}
.mint-fact{
  border:1px solid var(--line); background:var(--card); padding:13px 15px;
  border-radius:2px; position:relative; overflow:hidden;
}
.mint-fact::after{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:var(--brass); opacity:.5;
}
.mint-k{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.mint-v{
  display:block; font-family:var(--head); font-size:17px; font-weight:700;
  letter-spacing:-.01em; color:var(--text);
}
.mint-act{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.mint-qty{
  display:flex; align-items:center; border:1px solid var(--line-2);
  border-radius:2px; overflow:hidden;
}
.mint-step{
  background:transparent; border:0; color:var(--text); cursor:pointer;
  padding:0 14px; align-self:stretch; display:flex; align-items:center;
  transition:color .15s ease, background .15s ease;
}
.mint-step:hover:not(:disabled){ color:var(--brass); background:var(--brass-soft); }
.mint-step:disabled{ opacity:.35; cursor:default; }
.mint-step .ic{ width:13px; height:13px; }
.mint-n{
  font-family:var(--head); font-size:18px; font-weight:700; min-width:44px;
  text-align:center; color:var(--text);
}
.mint-go{ flex:1 1 220px; border:0; cursor:pointer; }
.mint-go:disabled{ opacity:.45; cursor:default; }
.mint-total{
  font-family:var(--mono); font-size:11.5px; color:var(--brass-3);
  letter-spacing:.04em; margin-top:12px; min-height:16px;
}
.mint-msg{
  font-family:var(--mono); font-size:11px; color:var(--brass-3);
  margin:10px 0 0; letter-spacing:.03em;
}
.mint-msg.bad{ color:#f0a2a4; }
.mint-msg.ok{ color:var(--sage); }
/* The drop section is .paper, a light theme, and it sets a dark colour on any
   paragraph inside it. The mint panel is a dark card sitting on that light
   section, so that inherited rule put near-black text on a near-black panel:
   measured 1.02:1, effectively invisible. These two selectors carry the
   panel's own theme and have to out-specify .sec.paper p. */
.sec.paper .mint p,
.mint-fine{
  font-size:12px; line-height:1.6; color:var(--muted); margin:14px 0 0;
  max-width:62ch;
}
.sec.paper .mint .mint-msg{ color:var(--brass-3); }
.sec.paper .mint .mint-msg.bad{ color:#f0a2a4; }
.sec.paper .mint .mint-msg.ok{ color:var(--sage); }
#mint-wallets{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; padding:0; }
@media (max-width:430px){
  .mint-act{ flex-direction:column; }
  .mint-qty{ justify-content:space-between; }
  /* flex-basis is read along the main axis, so the 220px basis that sets the
     button's WIDTH in a row becomes its HEIGHT once the row turns into a
     column. Measured 220px tall on a 390px viewport before this reset. */
  .mint-go{ flex:0 0 auto; width:100%; }
  .mint-step{ padding:12px 18px; }
}