/* ============================================================
   BonaBuild — bonabuild.org
   Identity v1: ink ground, emerald commons, teal incoming block.
   Type: Sora (display) · IBM Plex Sans (body) · IBM Plex Mono (data).
   Committed dark world — this is the brand, not a theme option.
   ============================================================ */

:root{
  --ink-950:#080B0F;
  --ink-900:#0E141B;
  --ink-850:#131B24;
  --ink-800:#1A2430;

  --line:rgba(230,237,243,.08);
  --line-strong:rgba(230,237,243,.14);
  --line-accent:rgba(52,211,153,.35);

  --emerald:#34D399;       /* the commons */
  --emerald-deep:#2BB786;
  --teal:#2DD4BF;          /* the incoming module */
  --amber:#FBBF24;         /* impact pool, charts only */
  --red:#F87171;           /* the never-list only */

  --text:#E6EDF3;
  --muted:#93A7B8;
  --faint:#5E7183;

  --display:'Sora',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --r:16px;
  --r-sm:10px;
  --wrap:1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}

body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  background:var(--ink-950);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); line-height:1.16; text-wrap:balance; margin:0; }
p{ margin:.4em 0 1em; }
a{ color:var(--emerald); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
code{ font-family:var(--mono); font-size:.92em; }
:focus-visible{ outline:2px solid var(--emerald); outline-offset:3px; border-radius:4px; }

.bona-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.bona-wrap-narrow{ max-width:860px; }
.bona-center{ display:flex; flex-direction:column; align-items:center; }
.bona-center-text{ text-align:center; }

/* ---------- Brand mark ---------- */
.bona-mark{
  display:inline-block; width:34px; height:34px; flex:none;
  background:url("../brand/logo.svg") center/contain no-repeat;
}
.bona-brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--display); font-weight:700; font-size:19px;
  color:var(--text); letter-spacing:-.01em;
}
.bona-brand:hover{ text-decoration:none; }
.bona-brand em{ font-style:normal; color:var(--emerald); }

/* ---------- Nav ---------- */
.bona-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,11,15,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.bona-nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:66px; }
.bona-nav-links{ display:flex; gap:26px; }
.bona-nav-links a{
  color:var(--muted); font-size:14.5px; font-weight:500;
}
.bona-nav-links a:hover{ color:var(--text); text-decoration:none; }
.bona-nav-actions{ display:flex; align-items:center; gap:12px; }

.bona-menu-btn{ display:none; background:none; border:0; cursor:pointer; padding:10px; }
.bona-menu-btn span{ display:block; width:20px; height:2px; background:var(--text); margin:4px 0; border-radius:2px; }

/* ---------- Buttons ---------- */
.bona-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 24px; border-radius:12px;
  font-family:var(--display); font-weight:600; font-size:15px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;

  /* A <button> arrives with the browser's own background, border and font.
     On an <a> none of that applies, so the class worked everywhere it was
     first used and broke the moment it was put on a real button: .bona-btn-ghost
     sets a text colour and no background, which over the UA default is light
     text on a light ButtonFace — the approve step of the buy panel was white
     on white. Neutralised here so the class means the same thing on both. */
  appearance:none; -webkit-appearance:none;
  background:transparent;
  border:0;
  color:inherit;
  cursor:pointer;
  text-align:center;
}
.bona-btn:hover{ text-decoration:none; transform:translateY(-1px); }
.bona-btn-accent{ background:var(--emerald); color:#07130E; }
.bona-btn-accent:hover{ background:#4ADFA8; }
.bona-btn-ghost{ border:1px solid var(--line-strong); color:var(--text); }
.bona-btn-ghost:hover{ border-color:var(--line-accent); }
.bona-btn-sm{ padding:9px 16px; font-size:13.5px; border-radius:10px; }

/* ---------- Hero ---------- */
.bona-hero-inner{ position:relative; z-index:1; max-width:820px; }
.bona-hero-blocks{
  position:absolute; inset:auto -40px -60px auto; z-index:0;
  width:min(46vw,560px); opacity:.55; pointer-events:none;
}
.bona-eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--emerald); margin:0 0 18px;
}
.bona-lede{ font-size:18.5px; color:var(--muted); max-width:56ch; margin:0 0 30px; }
.bona-lede strong{ color:var(--text); }
.bona-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.bona-cta-center{ justify-content:center; }
.bona-hero-note{ margin-top:26px; font-family:var(--mono); font-size:13.5px; color:var(--faint); max-width:60ch; }

/* hero stat blocks — the mark's grammar applied to numbers */
.bona-stat-blocks{ display:flex; gap:14px; margin-top:44px; flex-wrap:wrap; }
.bona-stat-block{
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 22px; min-width:180px; flex:1;
  border-top:3px solid var(--emerald);
}
.bona-stat-block:last-child{ border-top-color:var(--teal); }
.bona-stat-block .bona-v{ font-family:var(--display); font-weight:700; font-size:26px; }
.bona-stat-block .bona-k{ font-size:13.5px; color:var(--muted); margin-top:2px; }

/* ---------- Sections ---------- */
.bona-sec{ padding:96px 0; border-top:1px solid var(--line); }
.bona-sec-alt{ background:var(--ink-900); }
.bona-kicker{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--emerald); margin:0 0 14px;
}
.bona-kicker::before{
  content:""; display:inline-block; width:9px; height:9px; border-radius:2.5px;
  background:var(--emerald); margin-right:10px; vertical-align:baseline;
}
.bona-sec h2{ font-size:clamp(27px,3.6vw,38px); font-weight:700; letter-spacing:-.015em; margin:0 0 16px; }
.bona-sec-lede{ font-size:17.5px; color:var(--muted); max-width:66ch; margin:0 0 8px; }
.bona-sec-lede strong,.bona-sec-lede em{ color:var(--text); font-style:normal; }

.bona-two-col{
  display:grid; grid-template-columns:1.15fr .85fr; gap:44px;
  align-items:start; margin-top:28px;
}
.bona-two-col p{ color:var(--muted); }
.bona-two-col strong{ color:var(--text); }
.bona-two-col h3{ font-size:18px; margin:0 0 10px; }

.bona-note{ font-size:14px; color:var(--faint); max-width:70ch; margin-top:22px; }
.bona-note strong{ color:var(--muted); }

/* ---------- Stats (problem section) ---------- */
.bona-stat-stack{ display:grid; gap:14px; }
.bona-stat{
  background:var(--ink-850); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 24px; display:grid; gap:2px;
  border-left:3px solid var(--emerald-deep);
}
.bona-stat-v{ font-family:var(--display); font-weight:700; font-size:30px; }
.bona-stat-k{ font-size:14px; color:var(--muted); }

/* ---------- Cards ---------- */
.bona-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:30px; }
.bona-card{
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; transition:border-color .18s ease, transform .18s ease;
}
.bona-sec-alt .bona-card{ background:var(--ink-850); }
.bona-card:hover{ border-color:var(--line-accent); transform:translateY(-2px); }
.bona-card h3{ font-size:16.5px; margin:0 0 8px; }
.bona-card p{ font-size:14.5px; color:var(--muted); margin:0; }
.bona-card ul{ margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:14.5px; display:grid; gap:8px; }
.bona-card li strong{ color:var(--text); }

/* ---------- Callout ---------- */
.bona-callout{
  margin-top:30px; background:var(--ink-900);
  border:1px solid var(--line); border-left:3px solid var(--emerald);
  border-radius:var(--r); padding:26px 28px;
}
.bona-sec-alt .bona-callout{ background:var(--ink-850); }
.bona-callout h3{ font-size:16.5px; margin:0 0 12px; }
.bona-callout p{ color:var(--muted); font-size:15px; }
.bona-callout ul{ margin:10px 0 0; padding-left:18px; display:grid; gap:10px; color:var(--muted); font-size:14.5px; }
.bona-callout li strong{ color:var(--text); }

/* ---------- The cycle (how it works) ---------- */
.bona-steps{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  counter-reset:step;
}
.bona-steps li{
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px 24px; position:relative;
  transition:border-color .18s ease, transform .18s ease;
}
.bona-steps li:hover{ border-color:var(--line-accent); transform:translateY(-2px); }
.bona-step-n{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:9px; margin-bottom:14px;
  background:rgba(52,211,153,.12); color:var(--emerald);
  font-family:var(--display); font-weight:700; font-size:15px;
}
.bona-steps li:last-child .bona-step-n{ background:rgba(45,212,191,.12); color:var(--teal); }
.bona-steps h3{ font-size:16px; margin:0 0 6px; }
.bona-steps p{ font-size:14px; color:var(--muted); margin:0; }

/* ---------- Flow (governance / rounds) ---------- */
.bona-gov-flow{ display:grid; gap:0; position:relative; }
.bona-gov-step{
  position:relative; padding:13px 16px 13px 52px;
  font-size:14.5px; color:var(--muted);
  border-left:2px solid var(--line-strong);
  margin-left:17px;
}
.bona-gov-step:first-child{ padding-top:2px; }
.bona-gov-step:last-child{ padding-bottom:2px; }
.bona-gov-step span{
  position:absolute; left:-19px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:36px; height:36px;
  background:var(--ink-850); border:1px solid var(--line-strong); border-radius:10px;
  font-family:var(--mono); font-size:11.5px; color:var(--emerald);
}

/* ---------- Allocation bars ---------- */
.bona-alloc{ display:grid; gap:22px; margin-top:34px; }
.bona-alloc-head{ display:flex; align-items:center; gap:10px; font-size:15px; }
.bona-alloc-head strong{ font-family:var(--display); font-weight:600; }
.bona-dot{ width:11px; height:11px; border-radius:3.5px; background:var(--c,#fff); flex:none; }
.bona-alloc-pct{ margin-left:auto; font-family:var(--mono); font-size:14px; color:var(--muted); }
.bona-bar{
  height:12px; border-radius:7px; background:var(--ink-850);
  border:1px solid var(--line); overflow:hidden; margin-top:8px;
}
.bona-bar i{
  display:block; height:100%; width:var(--w,0%);
  background:var(--c,var(--emerald)); border-radius:7px;
}
.bona-alloc-note{ font-size:13px; color:var(--faint); margin:7px 0 0; }

/* ---------- Tables ---------- */
.bona-table-scroll{ overflow-x:auto; }
.bona-tbl{ width:100%; border-collapse:collapse; margin-top:30px; font-size:14.5px; }
.bona-tbl th{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-strong);
}
.bona-tbl td{ padding:13px 14px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
.bona-tbl td strong{ color:var(--text); }
.bona-tbl tbody tr{ transition:background .15s ease; }
.bona-tbl tbody tr:hover{ background:rgba(230,237,243,.02); }

.bona-tag{
  display:inline-block; padding:3px 11px; border-radius:999px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  background:rgba(52,211,153,.13); color:var(--emerald);
  border:1px solid rgba(52,211,153,.25); white-space:nowrap;
}
.bona-tag-wait{
  background:rgba(230,237,243,.05); color:var(--faint);
  border-color:var(--line-strong);
}

/* ---------- Contract address ---------- */
.bona-ca{ margin-top:34px; }
.bona-ca-label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:10px;
}
.bona-ca-box{
  display:flex; align-items:center; gap:12px;
  background:var(--ink-850); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px;
}
.bona-ca-box code{ font-size:13.5px; color:var(--teal); overflow-wrap:anywhere; }
.bona-ca-copy{
  margin-left:auto; flex:none; background:none; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:8px;
  color:var(--text); font-family:var(--display); font-weight:600; font-size:12.5px;
  padding:7px 14px; transition:border-color .15s ease;
}
.bona-ca-copy:hover{ border-color:var(--line-accent); }
.bona-ca-warn{ font-size:13px; color:var(--faint); margin-top:10px; }

/* ---------- FAQ ---------- */
details{
  border-bottom:1px solid var(--line);
  padding:4px 0;
}
details:first-of-type{ border-top:1px solid var(--line); margin-top:30px; }
summary{
  cursor:pointer; list-style:none; position:relative;
  padding:18px 44px 18px 0;
  font-family:var(--display); font-weight:600; font-size:16px;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:19px; color:var(--emerald);
  transition:transform .18s ease;
}
details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
details p{ color:var(--muted); font-size:15px; margin:0 0 20px; max-width:72ch; }
details p strong,details p em{ color:var(--text); font-style:normal; }

/* ---------- Footer ---------- */
.bona-foot{ border-top:1px solid var(--line); padding:56px 0 44px; background:var(--ink-900); }
.bona-foot-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:26px; flex-wrap:wrap; margin-bottom:34px;
}
.bona-foot-brand{ display:flex; align-items:center; gap:14px; }
.bona-foot-brand strong{ font-family:var(--display); font-size:17px; display:block; }
.bona-foot-brand span{ font-size:13px; color:var(--faint); }
.bona-foot-social{ display:flex; gap:20px; flex-wrap:wrap; }
.bona-foot-social a{ color:var(--muted); font-size:14px; font-weight:500; }
.bona-foot-social a:hover{ color:var(--text); text-decoration:none; }
.bona-disclaimer{ font-size:12.5px; color:var(--faint); line-height:1.75; max-width:88ch; }
.bona-copy{ font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:18px; }

/* ---------- Toast ---------- */
.bona-toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px);
  background:var(--ink-800); border:1px solid var(--line-accent);
  color:var(--text); font-size:14px; padding:11px 20px; border-radius:12px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  z-index:99;
}
.bona-toast.bona-show{ opacity:1; transform:translate(-50%,0); }

/* ---------- Responsive ---------- */
@media (max-width:940px){
  .bona-two-col{ grid-template-columns:1fr; gap:30px; }
  .bona-steps{ grid-template-columns:repeat(2,1fr); }
  .bona-hero-blocks{ display:none; }
}
@media (max-width:660px){
  .bona-nav-links{
    position:fixed; inset:66px 0 auto 0; z-index:49;
    flex-direction:column; gap:0; padding:8px 24px 18px;
    background:var(--ink-900); border-bottom:1px solid var(--line);
    display:none;
  }
  .bona-nav-links.bona-open{ display:flex; }
  .bona-nav-links a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
  .bona-nav-links a:last-child{ border-bottom:0; }
  .bona-menu-btn{ display:block; }
  .bona-nav .bona-btn{ display:none; }
  .bona-steps{ grid-template-columns:1fr; }
  .bona-sec{ padding:68px 0; }
  .bona-stat-blocks{ flex-direction:column; }
}

/* ============================================================
   v3 — multi-page + motion layer
   ============================================================ */

/* ---------- Scroll choreography ---------- */
.bona-reveal{ opacity:0; transform:translateY(18px); }
.bona-reveal.bona-in{
  opacity:1; transform:none;
  transition:opacity .7s ease var(--d,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .bona-reveal{ opacity:1; transform:none; }
}

/* ---------- Home hero: the block field ---------- */
.bona-hero-home{
  position:relative; overflow:hidden;
  min-height:min(92vh,900px);
  display:flex; align-items:center;
  padding:90px 0 110px;
}
#bona-blockfield{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.bona-hero-home::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 72% at 18% 34%, rgba(8,11,15,.94) 38%, rgba(8,11,15,.55) 68%, rgba(8,11,15,0) 100%),
    linear-gradient(to top, var(--ink-950) 0%, rgba(8,11,15,0) 26%),
    linear-gradient(to bottom, rgba(8,11,15,.8) 0%, rgba(8,11,15,0) 18%);
}
.bona-hero-home::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  width:640px; height:640px; right:-160px; top:-180px;
  background:radial-gradient(closest-side, rgba(45,212,191,.10), transparent 70%);
}
.bona-hero-home .bona-hero-inner{ position:relative; z-index:2; max-width:860px; }
.bona-hero-home h1{
  /* Written as two lines — "Built once." / "Shared by everyone." — with the
     break in the markup. At 88px the second line did not fit the 860px
     column and broke again, so the headline arrived as three lines of very
     large type stacked at 1.08 leading. That is what read as crowded: an
     accidental third line, not the leading itself.

     76px keeps the intended two lines at every width the clamp allows, and
     balance is the safety net if a translation or an edit ever makes it wrap
     anyway — two even lines rather than a long one and an orphan. */
  font-size:clamp(42px,6.2vw,76px); font-weight:800; letter-spacing:-.025em;
  margin:0 0 30px; line-height:1.1; text-wrap:balance;
}
.bona-hero-home h1 .bona-hl{ color:var(--emerald); }
/* Slightly narrower than the body default: under a headline this size a
   four-line paragraph running the full column reads as a wall. */
.bona-hero-home .bona-lede{ font-size:clamp(17px,2vw,19.5px); max-width:52ch; }

.bona-scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  width:24px; height:38px; border:2px solid var(--line-strong); border-radius:14px;
}
.bona-scroll-hint::after{
  content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%);
  width:4px; height:8px; border-radius:3px; background:var(--emerald);
  animation:scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint{
  0%,100%{ transform:translate(-50%,0); opacity:1; }
  60%{ transform:translate(-50%,12px); opacity:.2; }
}

/* ---------- Sub-page hero ---------- */
.bona-page-hero{
  position:relative; overflow:hidden;
  padding:88px 0 64px;
  background:
    radial-gradient(46% 90% at 82% 0%, rgba(52,211,153,.07), transparent 70%),
    var(--ink-900);
  border-bottom:1px solid var(--line);
}
.bona-page-hero h1{
  font-size:clamp(34px,5vw,56px); font-weight:700; letter-spacing:-.02em;
  margin:0 0 14px;
}
.bona-page-hero .bona-lede{ font-size:17.5px; color:var(--muted); max-width:62ch; margin:0; }
.bona-page-hero .bona-lede strong{ color:var(--text); }

/* ---------- Home: model cards ---------- */
.bona-model-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.bona-model-card{
  position:relative; display:block; overflow:hidden;
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px 26px; color:var(--text);
  transition:border-color .2s ease, transform .2s ease;
}
.bona-model-card:hover{ border-color:var(--line-accent); transform:translateY(-3px); text-decoration:none; }
.bona-model-card::after{
  content:""; position:absolute; top:20px; right:20px;
  width:14px; height:14px; border-radius:4.5px; background:var(--teal);
  opacity:0; transform:translate(6px,-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.bona-model-card:hover::after{ opacity:1; transform:none; }
.bona-model-card .bona-n{
  font-family:var(--mono); font-size:12px; color:var(--emerald); letter-spacing:.18em;
}
.bona-model-card h3{ font-size:20px; margin:12px 0 10px; }
.bona-model-card p{ font-size:14.5px; color:var(--muted); margin:0 0 18px; }
.bona-model-card .bona-go{
  font-family:var(--display); font-weight:600; font-size:14px; color:var(--emerald);
}
.bona-model-card .bona-go::after{ content:" \2192"; }

/* ---------- Stats band ---------- */
.bona-band{
  border-block:1px solid var(--line); background:var(--ink-900);
  padding:52px 0;
}
.bona-band-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bona-band-item{ text-align:center; padding:8px 12px; }
.bona-band-item .bona-v{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(30px,4vw,46px); color:var(--text);
  font-variant-numeric:tabular-nums;
}
.bona-band-item .bona-v em{ font-style:normal; color:var(--emerald); }
.bona-band-item .bona-k{ font-size:14px; color:var(--muted); margin-top:6px; }

/* ---------- CTA band ---------- */
.bona-cta-band{
  position:relative; overflow:hidden; padding:96px 0;
  background:
    radial-gradient(52% 120% at 50% 130%, rgba(52,211,153,.12), transparent 70%),
    var(--ink-950);
  border-top:1px solid var(--line);
}
.bona-cta-band-inner{ text-align:center; max-width:640px; margin-inline:auto; }
.bona-cta-band h2{ font-size:clamp(30px,4.4vw,44px); font-weight:700; margin:0 0 14px; }
.bona-cta-band p{ color:var(--muted); font-size:16.5px; margin:0 0 28px; }

/* ---------- Nav active ---------- */
.bona-nav-links a.bona-active{ color:var(--text); position:relative; }
.bona-nav-links a.bona-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  border-radius:2px; background:var(--emerald);
}
@media (max-width:660px){
  .bona-nav-links a.bona-active::after{ display:none; }
  .bona-nav-links a.bona-active{ color:var(--emerald); }
}

/* ---------- Responsive extras ---------- */
@media (max-width:940px){
  .bona-model-cards{ grid-template-columns:1fr; }
  .bona-band-grid{ grid-template-columns:1fr; gap:34px; }
  .bona-hero-home{ min-height:0; }
}

/* ============================================================
   v4 — original section systems (the block grammar as layout)
   ============================================================ */

/* ---------- Ghost numerals & plates (feature rows) ---------- */
.bona-plates{ display:grid; gap:18px; margin-top:40px; }
.bona-plate{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:26px;
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 36px;
  transition:border-color .2s ease;
}
.bona-plate:hover{ border-color:var(--line-accent); }
.bona-plate .bona-ghost{
  font-family:var(--display); font-weight:800; line-height:.8;
  font-size:clamp(64px,9vw,118px); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(52,211,153,.28);
  user-select:none;
}
.bona-plate:nth-child(3n) .bona-ghost{ -webkit-text-stroke-color:rgba(45,212,191,.32); }
.bona-plate h3{ font-size:21px; margin:0 0 10px; }
.bona-plate p{ color:var(--muted); font-size:15px; margin:0; max-width:64ch; }
.bona-plate p strong{ color:var(--text); }
.bona-plate .bona-go{ display:inline-block; margin-top:14px; font-family:var(--display); font-weight:600; font-size:14px; }
.bona-plate .bona-go::after{ content:" \2192"; }
a.bona-plate{ color:var(--text); } a.bona-plate:hover{ text-decoration:none; }

/* ---------- Manifesto (problem) ---------- */
.bona-manifesto{ padding:110px 0; border-top:1px solid var(--line); }
.bona-manifesto .bona-big{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(30px,4.6vw,52px); line-height:1.18; max-width:20ch;
  text-wrap:balance; margin:0 0 34px;
}
.bona-manifesto .bona-big em{ font-style:normal; color:var(--emerald); }
.bona-manifesto .bona-big .bona-x{ color:var(--teal); font-variant-numeric:tabular-nums; }
.bona-manifesto-cols{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
.bona-manifesto-cols p{ color:var(--muted); font-size:15.5px; margin:0; }
.bona-manifesto-cols strong{ color:var(--text); }

/* ---------- Zig timeline (the cycle) ---------- */
.bona-zig{ list-style:none; margin:48px 0 0; padding:0; position:relative; }
.bona-zig::before{
  content:""; position:absolute; left:50%; top:8px; bottom:8px; width:2px;
  transform:translateX(-50%);
  background:linear-gradient(var(--line-strong) 60%, transparent 0) center/2px 14px repeat-y;
}
.bona-zig li{
  position:relative; width:calc(50% - 44px); padding:24px 26px;
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:26px;
}
.bona-zig li:nth-child(odd){ margin-right:auto; }
.bona-zig li:nth-child(even){ margin-left:auto; }
.bona-zig .bona-zn{
  position:absolute; top:22px;
  width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--ink-850); border:1px solid var(--line-strong);
  font-family:var(--display); font-weight:700; font-size:16px; color:var(--emerald);
}
.bona-zig li:nth-child(odd) .bona-zn{ right:-68px; }
.bona-zig li:nth-child(even) .bona-zn{ left:-68px; }
.bona-zig li:last-child .bona-zn{ background:rgba(45,212,191,.14); color:var(--teal); border-color:rgba(45,212,191,.3); }
.bona-zig h3{ font-size:17px; margin:0 0 6px; }
.bona-zig p{ font-size:14.5px; color:var(--muted); margin:0; }

/* ---------- Horizontal rail (governance lifecycle) ---------- */
.bona-rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:44px; position:relative; }
.bona-rail::before{
  content:""; position:absolute; left:6%; right:6%; top:23px; height:2px;
  background:var(--line-strong);
}
.bona-rail-step{ position:relative; text-align:center; padding:0 10px; }
.bona-rail-step .bona-rn{
  position:relative; z-index:1; margin:0 auto 14px;
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--ink-850); border:1px solid var(--line-strong);
  font-family:var(--mono); font-size:13px; color:var(--emerald);
}
.bona-rail-step:last-child .bona-rn{ color:var(--teal); border-color:rgba(45,212,191,.3); }
.bona-rail-step h3{ font-size:14.5px; margin:0 0 4px; }
.bona-rail-step p{ font-size:12.5px; color:var(--faint); margin:0; }

/* ---------- Supply map (tokenomics treemap) ---------- */
.bona-supply{ margin-top:44px; }
.bona-supply-grid{
  display:grid; grid-template-columns:repeat(20,1fr); gap:5px;
}
.bona-supply-grid i{
  aspect-ratio:1; border-radius:22%;
  background:var(--c,#333); opacity:.92;
  transition:transform .12s ease, opacity .12s ease;
}
.bona-supply-grid i:hover{ transform:scale(1.28); opacity:1; }
.bona-supply-legend{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.bona-supply-key{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); }
.bona-supply-key .bona-dot{ width:12px; height:12px; border-radius:4px; }
.bona-supply-key b{ color:var(--text); font-family:var(--mono); font-weight:500; font-size:12.5px; }
.bona-supply-note{ font-size:13px; color:var(--faint); margin-top:10px; }
.bona-supply-detail{
  margin-top:34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px;
}
.bona-supply-detail .bona-cell{
  border:1px solid var(--line); border-left:3px solid var(--c,#333);
  border-radius:var(--r-sm); padding:16px 18px; background:var(--ink-900);
  font-size:13.5px; color:var(--muted);
}
.bona-supply-detail .bona-cell b{ display:block; color:var(--text); font-family:var(--display); font-size:14.5px; margin-bottom:4px; }

/* ---------- Quadratic widget ---------- */
.bona-qf{
  margin-top:44px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-900); overflow:hidden;
}
.bona-qf-head{ padding:26px 30px 0; }
.bona-qf-head h3{ font-size:18px; margin:0 0 6px; }
.bona-qf-head p{ font-size:14px; color:var(--muted); margin:0; }
.bona-qf-body{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.bona-qf-side{ padding:26px 30px 30px; }
.bona-qf-side + .bona-qf-side{ border-left:1px solid var(--line); }
.bona-qf-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
.bona-qf-blocks{
  min-height:132px; display:flex; flex-wrap:wrap; gap:4px; align-content:flex-start;
}
.bona-qf-blocks i{ border-radius:22%; background:var(--emerald); }
.bona-qf-blocks.bona-whale i{ width:64px; height:64px; background:var(--faint); border-radius:16%; }
.bona-qf-score{ margin-top:18px; font-family:var(--mono); font-size:13px; color:var(--muted); }
.bona-qf-score b{
  display:block; font-family:var(--display); font-weight:800; font-size:30px;
  color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.bona-qf-side.bona-win .bona-qf-score b{ color:var(--emerald); }
.bona-qf-ctl{ padding:20px 30px 26px; border-top:1px solid var(--line); }
.bona-qf-ctl label{ font-size:13.5px; color:var(--muted); display:block; margin-bottom:10px; }
.bona-qf-ctl label b{ color:var(--text); font-family:var(--mono); }
/* the slider itself speaks the block grammar: a thick track that fills
   with emerald as the crowd grows, dragged by a block-shaped thumb */
.bona-qf-ctl input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:34px; margin:2px 0 0;
  background:transparent; cursor:pointer; --p:0%;
}
.bona-qf-ctl input[type=range]::-webkit-slider-runnable-track{
  height:12px; border-radius:8px;
  background:linear-gradient(to right,
    var(--emerald) 0 var(--p), var(--ink-800) var(--p) 100%);
  border:1px solid var(--line-strong);
}
.bona-qf-ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-8px;
  border-radius:8px; background:var(--emerald);
  border:3px solid #0B1015;
  box-shadow:0 0 0 1px var(--line-accent), 0 4px 14px rgba(52,211,153,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.bona-qf-ctl input[type=range]:hover::-webkit-slider-thumb{
  transform:scale(1.12);
  box-shadow:0 0 0 1px var(--line-accent), 0 6px 20px rgba(52,211,153,.5);
}
.bona-qf-ctl input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.05); }
.bona-qf-ctl input[type=range]::-moz-range-track{
  height:12px; border-radius:8px; background:var(--ink-800);
  border:1px solid var(--line-strong);
}
.bona-qf-ctl input[type=range]::-moz-range-progress{
  height:12px; border-radius:8px; background:var(--emerald);
}
.bona-qf-ctl input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:8px; background:var(--emerald);
  border:3px solid #0B1015;
  box-shadow:0 0 0 1px var(--line-accent), 0 4px 14px rgba(52,211,153,.35);
}
.bona-qf-ctl input[type=range]:focus-visible{ outline:none; }
.bona-qf-ctl input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--emerald), 0 4px 14px rgba(52,211,153,.5);
}
.bona-qf-verdict{ margin-top:12px; font-size:13.5px; color:var(--faint); }
.bona-qf-verdict b{ color:var(--emerald); }

/* ---------- Escrow flowmap ---------- */
.bona-flowmap{ margin-top:44px; }
.bona-flowmap svg{ width:100%; height:auto; display:block; }
.bona-flowmap .bona-fm-line{
  stroke:var(--line-strong); stroke-width:2; fill:none;
  stroke-dasharray:6 7;
}
.bona-flowmap .bona-fm-live{ stroke:var(--emerald); }
.bona-flowmap .bona-fm-back{ stroke:var(--teal); }
.bona-flowmap .bona-fm-box{ fill:#0E141B; stroke:rgba(230,237,243,.14); }
.bona-flowmap .bona-fm-box.bona-hot{ stroke:rgba(52,211,153,.4); }
.bona-flowmap text{ font-family:var(--mono); font-size:12.5px; fill:#93A7B8; }
.bona-flowmap .bona-fm-t{ font-family:var(--display); font-weight:600; font-size:14px; fill:#E6EDF3; }
.bona-flowmap .bona-fm-s{ font-size:11px; fill:#5E7183; }
.bona-flowmap .bona-fm-pct{ fill:#34D399; font-weight:500; }
@media (prefers-reduced-motion:no-preference){
  .bona-flowmap .bona-fm-line{ stroke-dashoffset:400; }
  .bona-flowmap.bona-in .bona-fm-line{ animation:fmdraw 1.6s ease forwards; }
  .bona-flowmap.bona-in .bona-fm-line.bona-d2{ animation-delay:.5s; }
  .bona-flowmap.bona-in .bona-fm-line.bona-d3{ animation-delay:1s; }
}
@keyframes fmdraw{ to{ stroke-dashoffset:0; } }

/* ---------- Never board ---------- */
.bona-never{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-top:36px; }
.bona-never-item{
  position:relative; border:1px solid rgba(248,113,113,.22); border-radius:var(--r-sm);
  background:rgba(248,113,113,.045); padding:18px 20px 18px 52px;
  font-size:14px; color:var(--muted);
}
.bona-never-item strong{ color:var(--text); display:block; margin-bottom:3px; }
.bona-never-item::before{
  content:"\00d7"; position:absolute; left:18px; top:16px;
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:rgba(248,113,113,.16); color:var(--red);
  font-family:var(--mono); font-size:15px; line-height:1;
}

/* ---------- Member card ---------- */
.bona-member-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:44px; }
.bona-member-card{
  position:relative; aspect-ratio:1.586; border-radius:20px; padding:26px 28px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(52,211,153,.16), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(45,212,191,.13), transparent 55%),
    linear-gradient(150deg, #101821, #0B1015);
  border:1px solid var(--line-strong);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  transform-style:preserve-3d; will-change:transform;
  display:flex; flex-direction:column; justify-content:space-between;
}
.bona-member-card .bona-mc-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.bona-member-card .bona-mark{ width:40px; height:40px; }
.bona-member-card .bona-mc-chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--teal);
  border:1px solid rgba(45,212,191,.3); border-radius:999px; padding:5px 12px;
}
.bona-member-card .bona-mc-name{ font-family:var(--display); font-weight:700; font-size:19px; }
.bona-member-card .bona-mc-rows{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.bona-member-card .bona-mc-rows div span{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--faint); text-transform:uppercase; }
.bona-member-card .bona-mc-rows div b{ font-family:var(--mono); font-weight:500; font-size:13px; color:var(--text); }
.bona-member-copy h2{ font-size:clamp(26px,3.4vw,36px); margin:0 0 14px; }
.bona-member-copy p{ color:var(--muted); font-size:15.5px; }
.bona-member-copy strong{ color:var(--text); }

/* ---------- FAQ ledger ---------- */
.bona-faq-ledger{ counter-reset:q; margin-top:38px; }
.bona-faq-ledger details{ border:0; border-bottom:1px solid var(--line); padding:0; }
.bona-faq-ledger details:first-of-type{ border-top:1px solid var(--line); margin-top:0; }
.bona-faq-ledger summary{
  counter-increment:q;
  display:grid; grid-template-columns:64px 1fr 30px; align-items:center; gap:14px;
  padding:20px 0; font-size:16.5px;
}
.bona-faq-ledger summary::before{
  content:"Q." counter(q,decimal-leading-zero);
  font-family:var(--mono); font-weight:500; font-size:12.5px; color:var(--faint);
}
.bona-faq-ledger details[open] summary::before{ color:var(--emerald); }
.bona-faq-ledger summary::after{ position:static; transform:none; justify-self:end; }
.bona-faq-ledger details[open] summary::after{ transform:rotate(45deg); }
.bona-faq-ledger details p{ margin:0 0 22px 78px; }
.bona-faq-ledger details[open]{ background:linear-gradient(90deg, rgba(52,211,153,.05), transparent 40%); }

/* ---------- VP sum (governance) ---------- */
.bona-vp-sum{
  margin-top:40px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:13.5px; color:var(--muted);
}
.bona-vp-sum .bona-vp-b{
  display:grid; place-items:center; text-align:center; gap:2px;
  min-width:118px; padding:14px 16px;
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r-sm);
}
.bona-vp-sum .bona-vp-b b{ color:var(--text); font-size:15px; font-weight:500; }
.bona-vp-sum .bona-vp-b span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.bona-vp-sum .bona-op{ color:var(--faint); font-size:18px; }
.bona-vp-sum .bona-vp-b.bona-total{ border-color:var(--line-accent); }
.bona-vp-sum .bona-vp-b.bona-total b{ color:var(--emerald); font-family:var(--display); font-weight:700; font-size:19px; }

/* ---------- Evidence board ---------- */
.bona-evidence .bona-tbl th{ padding-left:0; }
.bona-evidence .bona-tbl td{ padding:16px 14px 16px 0; }
.bona-evidence .bona-tbl td:first-child{ font-family:var(--display); font-weight:600; color:var(--text); font-size:14.5px; }
.bona-evidence .bona-tbl td a{ font-family:var(--mono); font-size:13px; }

/* ---------- Responsive v4 ---------- */
@media (max-width:940px){
  .bona-plate{ grid-template-columns:1fr; gap:8px; padding:26px; }
  .bona-plate .bona-ghost{ font-size:56px; }
  .bona-manifesto-cols{ grid-template-columns:1fr; gap:22px; }
  .bona-zig::before{ left:23px; }
  .bona-zig li{ width:auto; margin-left:64px!important; margin-right:0!important; }
  .bona-zig .bona-zn{ left:-64px!important; right:auto!important; }
  .bona-rail{ grid-template-columns:1fr; gap:22px; }
  .bona-rail::before{ left:23px; right:auto; top:8px; bottom:8px; width:2px; height:auto; }
  .bona-rail-step{ text-align:left; padding-left:64px; }
  .bona-rail-step .bona-rn{ position:absolute; left:0; top:0; margin:0; }
  .bona-qf-body{ grid-template-columns:1fr; }
  .bona-qf-side + .bona-qf-side{ border-left:0; border-top:1px solid var(--line); }
  .bona-member-wrap{ grid-template-columns:1fr; gap:34px; }
  .bona-supply-grid{ grid-template-columns:repeat(10,1fr); }
  .bona-faq-ledger summary{ grid-template-columns:48px 1fr 24px; }
  .bona-faq-ledger details p{ margin-left:0; }
}

/* ============================================================
   The buy panel
   Hidden entirely unless BONA.saleOpen is true — see bona.buy.js.
   ============================================================ */
.bona-buy-card{
  margin-top:30px; padding:26px;
  background:var(--ink-900); border:1px solid var(--line-strong);
  border-radius:var(--r);
}
.bona-buy-card > .bona-btn{ width:100%; }

.bona-buy-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:14px;
}
.bona-buy-row span{ color:var(--muted); font-family:var(--body); }
.bona-buy-row b{ font-weight:500; letter-spacing:-.01em; }
.bona-buy-out b{ color:var(--emerald); font-size:19px; }

.bona-buy-field{
  display:flex; align-items:center; gap:12px; margin:20px 0 6px;
  padding:14px 16px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--ink-950);
}
.bona-buy-field:focus-within{ border-color:var(--line-accent); }
.bona-buy-field > span{ color:var(--muted); font-size:14px; white-space:nowrap; }
.bona-buy-field input{
  flex:1; min-width:0; border:0; background:none; color:var(--text);
  font:500 22px/1 var(--mono); letter-spacing:-.01em; text-align:right;
}
.bona-buy-field input:focus{ outline:none; }
.bona-buy-field em{ font-style:normal; color:var(--muted); font-size:14px; }

.bona-buy-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.bona-buy-actions .bona-btn{ width:100%; justify-content:center; }
/* Readable, but plainly not actionable. At .4 the accent button's dark label
   on dimmed emerald was as hard to read as the ghost one, and a step you
   cannot take yet still has to say which step it is. */
.bona-buy-actions .bona-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.bona-buy-actions .bona-btn:disabled:hover{ transform:none; }

.bona-buy-status{ margin:16px 0 0; font-size:14px; color:var(--muted); min-height:1.4em; }
.bona-buy-ok{ color:var(--emerald); }
.bona-buy-bad{ color:var(--red); }
.bona-buy-held{ margin:6px 0 0; font-size:13.5px; color:var(--faint); }

.bona-buy-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px; margin-top:22px;
}
.bona-buy-facts > div{
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-sm);
}
.bona-buy-facts b{
  display:block; font-family:var(--display); font-size:15px;
  font-weight:600; margin-bottom:6px;
}
.bona-buy-facts span{ font-size:13.5px; color:var(--muted); line-height:1.5; }

@media (max-width:560px){
  .bona-buy-actions{ grid-template-columns:1fr; }
  .bona-buy-field input{ font-size:19px; }
}

/* ============================================================
   Allocation colours, as classes rather than inline styles.
   209 style="--c:#…" attributes used to live in token.html. They are
   classes now so the Content-Security-Policy can refuse inline styles
   outright instead of allowing them for everyone, including an attacker
   who manages to inject one.
   ============================================================ */
.bona-a-sale{ --c:#2DD4BF; }
.bona-a-contrib{ --c:#34D399; }
.bona-a-liq{ --c:#A78BFA; }
.bona-a-team{ --c:#F87171; }

/* The legend dots take the same colour as a background. */
.bona-dot.bona-a-sale{ background:#2DD4BF; }
.bona-dot.bona-a-contrib{ background:#34D399; }
.bona-dot.bona-a-liq{ background:#A78BFA; }
.bona-dot.bona-a-team{ background:#F87171; }

/* Spacing that was inline, kept as named utilities rather than magic
   numbers scattered through the markup. */
.bona-mt-lg{ margin-top:72px; }
.bona-mt-sm{ margin-top:28px; }

/* ============================================================
   The live ledger. Numbers arrive from Base after load, so the
   placeholders must not look like data while they are still ellipses.
   ============================================================ */
.bona-l-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px; margin-top:30px;
}
.bona-l-box{
  padding:20px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--ink-900);
}
.bona-l-h{
  margin:0 0 12px; font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--emerald);
}
.bona-l-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.bona-l-row:last-of-type{ border-bottom:0; }
.bona-l-row span{ color:var(--muted); font-size:14px; }
.bona-l-row b{ font-family:var(--mono); font-weight:500; font-size:14.5px; }

/* While loading, the ellipsis is dimmed so it cannot be misread as a value. */
.bona-l-loading .bona-l-row b{ color:var(--faint); }

.bona-l-src{
  display:block; margin-top:12px; font-size:12.5px; color:var(--faint);
  line-height:1.5;
}
a.bona-l-src:hover{ color:var(--teal); }
.bona-l-stamp{
  margin-top:20px; font-family:var(--mono); font-size:12.5px; color:var(--faint);
}

/* A ledger figure that could not be read. Dimmed and dashed, so it reads
   as absent rather than as a value — a zero here would be a false claim. */
.bona-l-none{ color:var(--faint); }

/* Sign-up, sitting beside the buy panel. Two ways in, neither required for
   the other: the software needs no token and the token needs no account. */
.bona-signup{ margin-top:14px; }
.bona-signup-h{
  margin:0 0 8px; font-family:var(--display); font-size:16px; font-weight:600;
}
.bona-signup-p{ margin:0 0 16px; font-size:14.5px; color:var(--muted); }
.bona-signup-row{ display:flex; gap:10px; flex-wrap:wrap; }
.bona-signup-row input{
  flex:1; min-width:200px; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--ink-950);
  color:var(--text); font:400 15px/1 var(--body);
}
.bona-signup-row input:focus{ outline:none; border-color:var(--line-accent); }
.bona-signup-row .bona-btn{ margin-top:0; }
.bona-signup-note{ margin:14px 0 0; font-size:13px; color:var(--faint); }

/* The honeypot. Off-screen rather than display:none — some bots skip
   anything hidden, and the point is that they do fill this one. */
.bona-hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

/* Contact in the footer. A site that asks people to connect a wallet and
   send money, with no way to reach anyone behind it, is a site both URL
   classifiers and readers are right to distrust. */
.bona-foot-contact{
  display:flex; flex-direction:column; gap:4px;
  font-size:13.5px; color:var(--muted);
}
.bona-foot-contact strong{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:4px;
}
.bona-foot-contact a{ color:var(--muted); }
.bona-foot-contact a:hover{ color:var(--teal); }
.bona-foot-contact span{ color:var(--faint); font-size:12.5px; }

/* ============================================================
   Portal — the member area. Shares the site's tokens rather than
   introducing a second visual language for signed-in pages.
   ============================================================ */
.bona-portal main{ padding-top:40px; }
.bona-portal h1{
  font-family:var(--display); font-size:clamp(28px,4vw,40px);
  font-weight:700; letter-spacing:-.02em; margin:0 0 14px;
}

.bona-field{ display:block; margin-bottom:18px; }
.bona-field > span{
  display:block; margin-bottom:7px; font-size:14px; color:var(--muted);
}
.bona-field input{
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--ink-950);
  color:var(--text); font:400 15.5px/1.2 var(--body);
}
.bona-field input:focus{ outline:none; border-color:var(--line-accent); }
.bona-field > em{
  display:block; margin-top:7px; font-style:normal;
  font-size:13px; color:var(--faint);
}
.bona-portal form.bona-buy-card > .bona-btn{ width:100%; }

/* Published checksum on a download card. Long, monospaced, and allowed to
   break anywhere — a SHA-256 has no spaces to wrap at, so without this it
   pushes the card wider than the screen on a phone. */
.bona-hash code{
  display:block;
  margin-top:.35rem;
  font-family:var(--mono);
  font-size:.72rem;
  line-height:1.5;
  word-break:break-all;
  overflow-wrap:anywhere;
  color:var(--faint);
}

/* ---------- Wallet picker ---------- */
/* Built by bona.buy.js only when more than one wallet answers EIP-6963.
   With one wallet there is nothing to choose and no dialog appears. */
.bona-modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(4,7,10,.72);
  backdrop-filter:blur(3px);
}
.bona-modal-card{
  width:100%; max-width:340px;
  display:flex; flex-direction:column; gap:8px;
  padding:18px;
  background:var(--ink-900); border:1px solid var(--line-strong); border-radius:var(--r);
}
.bona-modal-h{
  font-family:var(--display); font-weight:600; font-size:15px;
  color:var(--text); margin:0 0 4px;
}
.bona-modal-item{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:11px 13px;
  appearance:none; -webkit-appearance:none;
  background:transparent; cursor:pointer; text-align:left;
  border:1px solid var(--line); border-radius:11px;
  font-family:var(--body); font-size:14.5px; color:var(--text);
  transition:border-color .15s ease, background .15s ease;
}
.bona-modal-item:hover{ border-color:var(--line-accent); background:rgba(52,211,153,.06); }
.bona-modal-item img{ border-radius:7px; flex:none; }
.bona-modal-cancel{ align-self:stretch; margin-top:4px; }

/* The address and its change control sit together on the right of the row. */
.bona-buy-wallet{ display:inline-flex; align-items:center; gap:10px; }

/* Result dialog after a purchase. Wider than the wallet picker because it
   carries a sentence rather than a list. */
.bona-result{ max-width:400px; gap:12px; text-align:left; }
.bona-result-ok{ color:var(--emerald); }
.bona-result-bad{ color:var(--red); }
.bona-result-body{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }
.bona-result-tx{ font-size:13.5px; color:var(--emerald); }
.bona-result .bona-btn{ width:100%; margin-top:4px; }

/* A linked address: long, exact, and never re-wrapped into something that
   looks like a different address. */
.bona-addr{ font-family:var(--mono); font-size:13px; word-break:break-all; }

/* ---------- What the buyer holds ---------- */
/* The first sale contract wrote purchases into the vesting contract, where a
   wallet reads zero for them. This panel is those early owners' account of
   it, and the place they claim; purchases since go straight to the wallet. */
.bona-hold{
  margin-top:18px; padding:20px;
  background:var(--ink-850); border:1px solid var(--line-strong);
  border-radius:var(--r);
}
.bona-hold-h{
  font-family:var(--display); font-weight:600; font-size:15px;
  color:var(--text); margin:0 0 12px;
}
.bona-hold .bona-buy-actions{ margin-top:14px; grid-template-columns:1fr; }
.bona-hold-note{
  margin:12px 0 0; font-size:13px; line-height:1.6; color:var(--faint);
}

/* ---------- Admin ---------- */
.bona-admin-tabs{ margin:22px 0 6px; flex-wrap:wrap; }
.bona-admin-h2{ font-family:var(--display); font-size:20px; margin:26px 0 4px; }
.bona-admin-h3{ font-family:var(--display); font-size:16px; margin:30px 0 8px; }

.bona-admin-search{
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin:18px 0 10px;
}
.bona-admin-search .bona-field{ flex:1 1 260px; margin:0; }

/* The table scrolls inside its own box. A wide record must never be the
   reason the whole page slides sideways on a phone. */
.bona-admin-table{
  overflow-x:auto;
  border:1px solid var(--line); border-radius:12px;
  background:var(--ink-900);
}
.bona-admin-table table{ width:100%; border-collapse:collapse; font-size:14px; }
.bona-admin-table th,
.bona-admin-table td{
  padding:10px 14px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.bona-admin-table th{
  font-family:var(--display); font-weight:600; font-size:12.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--faint);
}
.bona-admin-table tbody tr:last-child td{ border-bottom:0; }
.bona-admin-table tbody tr:hover{ background:rgba(52,211,153,.04); }
.bona-admin-empty{ color:var(--faint); text-align:center; padding:22px 14px; }
.bona-mono{ font-family:var(--mono); font-size:12.5px; color:var(--muted); }

/* State reads at a glance, in form as well as in word. */
.bona-state{
  display:inline-block; padding:2px 9px; border-radius:99px;
  font-size:12px; font-family:var(--mono);
  border:1px solid var(--line-strong); color:var(--muted);
}
.bona-state-active{ color:var(--emerald); border-color:var(--line-accent); }
.bona-state-pending{ color:var(--amber); border-color:rgba(251,191,36,.3); }
.bona-state-blocked{ color:var(--red); border-color:rgba(248,113,113,.3); }

.bona-tag{
  margin-left:7px; padding:1px 7px; border-radius:99px;
  font-size:11px; font-family:var(--mono);
  color:var(--teal); border:1px solid rgba(45,212,191,.3);
}
.bona-pager{ margin-top:14px; }