/* ==========================================================================
   HoodBank — onchain terminal
   Palette sampled from the Robinhood Chain site: lime #CCFF00 on near-black.
   ========================================================================== */

:root {
  --bg:        #010101;
  --surface:   #0b0b09;
  --surface-2: #121210;
  --surface-3: #1a1a15;
  --line:      #24241c;
  --line-soft: #17170f;
  --ink:       #110e08;
  --accent:    #ccff00;   /* Robinhood Chain lime — actions, data, focus */
  --accent-dim:#b2df00;
  --brand:     #7df45f;   /* sampled from the crown + wordmark on the mascot's hoodie */
  --text:      #f4f4ef;
  --muted:     #9a9a8f;
  --danger:    #ff8a8a;
  --ok:        #ccff00;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --gut:  clamp(16px, 4vw, 28px);
}

* { box-sizing: border-box; }

/* author display rules (flex/grid) beat the UA's [hidden] rule, so enforce it */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 560px at 84% -14%, rgba(204, 255, 0, .11), transparent 62%),
    radial-gradient(760px 420px at -6% 108%, rgba(204, 255, 0, .06), transparent 66%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* fine grain so large black areas have texture rather than flat fill */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }

h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; margin: 0; }

.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--gut); position: relative; z-index: 2; }

/* ---------- notice bar ---------- */
.notice {
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  padding: 11px 16px;
  text-align: center;
}
.notice code {
  font-family: var(--mono);
  background: rgba(0, 0, 0, .16);
  padding: 2px 6px;
  border-radius: 4px;
}
.notice[hidden] { display: none; }


/* ---------- header ---------- */
.hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
  position: relative;          /* anchors the mobile menu panel */
}

/* hamburger: mobile only, hidden above the breakpoint */
.navToggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.navToggle:hover { border-color: var(--accent); color: var(--accent); }
.navToggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navToggle svg { width: 18px; height: 18px; display: block; }
.navToggle .ico-close { display: none; }
.navToggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.navToggle[aria-expanded="true"] .ico-open { display: none; }
.navToggle[aria-expanded="true"] .ico-close { display: block; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.brand b {
  font-size: 19px;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
/* matches the hoodie print: "Hood" in white, "Bank" in the mascot's green */
.brand b span { color: var(--brand); }

/* ---------- primary nav ---------- */
.nav { display: flex; gap: 22px; align-items: center; }
.nav a {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- academy ---------- */
.acad-hero { padding-block: clamp(26px, 5vw, 46px) 8px; max-width: 70ch; }
.acad-hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; }
.acad-hero h1 em { font-style: normal; color: var(--accent); }
.acad-lede { margin-top: 16px; }

.acad-prog { margin-top: 26px; max-width: 420px; }
.acad-prog__bar { height: 5px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.acad-prog__bar span {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
}
.acad-prog__meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted);
}
.acad-prog__meta .is-done { color: var(--accent); }
.lnk { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.lnk:hover { color: var(--accent); }

.acad { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; padding-block: 34px 10px; }

.acad-toc { position: sticky; top: 24px; align-self: start; }
.acad-toc h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.acad-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.acad-toc li { counter-increment: toc; margin-bottom: 2px; }
.acad-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: 10.5px; color: #5f5f57; margin-right: 10px;
}
.acad-toc li.is-read::before { content: "✓"; color: var(--accent); }
.acad-toc a { font-size: 13.5px; color: var(--muted); line-height: 2.1; }
.acad-toc a:hover { color: var(--text); }
.acad-toc a.is-current { color: var(--accent); }

.lesson {
  border-top: 1px solid var(--line-soft);
  padding-block: 30px 34px;
  scroll-margin-top: 24px;
}
.lesson:first-child { border-top: 0; padding-top: 6px; }
.lesson__hd { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.lesson__n { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.lesson h2 { font-size: clamp(21px, 3vw, 27px); letter-spacing: -.02em; }
.lesson .prose + .prose { margin-top: 14px; }
.lesson--key .lesson__n { color: var(--ink); background: var(--accent); padding: 3px 8px; border-radius: 5px; }

.lesson__ft { margin-top: 20px; }
.lesson__mark {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); padding: 8px 16px; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.lesson__mark:hover { color: var(--accent); border-color: var(--accent); }
.lesson.is-read .lesson__mark {
  color: var(--ink); background: var(--accent); border-color: var(--accent);
}
.lesson.is-read .lesson__mark::before { content: "✓ "; }

.callout {
  margin-top: 18px; padding: 15px 17px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); background: var(--surface-2);
  font-size: 13.5px; line-height: 1.72; color: var(--muted);
}
.callout b { color: var(--text); }
.callout--warn { border-left-color: var(--danger); }
.callout--warn b { color: var(--danger); }

.tbl { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13.5px; }
.tbl th, .tbl td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); }
.tbl th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tbl td { color: var(--muted); }
.tbl td:last-child { font-family: var(--mono); color: var(--text); text-align: right; }
.tbl td b { color: var(--accent); }

.cycle { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.cycle__d {
  flex: 1 1 62px; text-align: center; padding: 11px 4px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2);
}
.cycle__d b { display: block; font-family: var(--mono); font-size: 10.5px; color: #5f5f57; }
.cycle__d span { display: block; margin-top: 5px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.cycle__d.is-free { border-color: var(--accent); background: rgba(204, 255, 0, .1); }
.cycle__d.is-free b, .cycle__d.is-free span { color: var(--accent); }
.cycle__d.is-reset { border-style: dashed; }
.cycle__d.is-reset span { color: var(--danger); }

.risks { padding-left: 20px; }
.risks li { margin-bottom: 11px; }
.risks b { color: var(--text); }

.acad-end { border-top: 1px solid var(--line-soft); padding-top: 24px; margin-top: 8px; }

@media (max-width: 860px) {
  .acad { grid-template-columns: 1fr; gap: 26px; }
  .acad-toc { position: static; }
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--r);
  padding: 11px 18px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent-dim); box-shadow: 0 6px 24px rgba(204, 255, 0, .2); }
/* neutral disabled state — dimming the lime fill produced a muddy, low-contrast olive */
.btn:disabled {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover:not(:disabled) { background: rgba(204, 255, 0, .07); border-color: var(--accent); color: var(--accent); box-shadow: none; }

.btn--block { width: 100%; }

/* the header CTA sits beside the uppercase mono nav, so it matches it */
.hdr .btn { text-transform: uppercase; letter-spacing: .06em; }

/* the one day in ten when withdrawing is free - has to be unmissable */
.btn--free, .btn--ghost.btn--free {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.btn--free:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(30px, 6vw, 56px) 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.hero h1 {
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.04;
  max-width: 26ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }

/* slogan, set above the headline as a kicker */
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}

.hero__mascot { display: block; line-height: 0; }
.hero__mascot img {
  width: clamp(190px, 27vw, 330px);
  height: auto;
  display: block;
  /* lifts the mascot off the black field without a hard edge */
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, .75))
          drop-shadow(0 0 40px rgba(125, 244, 95, .14));
}
.hero p { color: var(--muted); max-width: 62ch; margin: 16px 0 0; }

.reserves { margin-top: 30px; display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.reserves .num {
  font-family: var(--mono);
  font-size: clamp(34px, 7vw, 60px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}
.reserves .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
}

/* ---------- layout ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;   /* the two columns end level */
  gap: 16px;
  padding-bottom: 26px;
}
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* left-hand column: Vault above Referrals, matching the height of Your Account.
   Referrals absorbs any slack so the two columns end level. */
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack > .panel:last-child { flex: 1; }

/* Your Account is the shorter panel, so let its rows share out the slack
   instead of leaving dead space under them. */
.panel.col-7 { display: flex; flex-direction: column; }
.panel.col-7 .rows { flex: 1; }
.panel.col-7 .rows .row { flex: 1; }

.panel {
  background: linear-gradient(162deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204, 255, 0, .32), transparent);
}
.panel h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

/* ---------- stat rows ---------- */
.rows { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border-radius: var(--r); overflow: hidden; }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
}
.row dt { color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 8px; margin: 0; }
.row dd { margin: 0; font-family: var(--mono); font-weight: 600; font-size: 15px; text-align: right; }
.row dd u { text-decoration: none; color: var(--muted); font-size: 11px; margin-left: 5px; letter-spacing: .06em; }
.row--hi dd { color: var(--accent); }

/* the one day in ten when withdrawing is free - has to be unmissable */
.row--free { background: rgba(204, 255, 0, .08); }
.row--free dt { color: var(--text); }
.row--free dd { color: var(--accent); }
.row--free dd u { color: var(--accent); opacity: .75; }

.ico { width: 15px; height: 15px; flex: none; color: var(--accent); }

/* ---------- amount input ---------- */
.field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 6px 6px 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(204, 255, 0, .14); }
.field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 600;
  padding: 10px 0;
}
.field input::placeholder { color: #5f5f57; }
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input[type=number] { -moz-appearance: textfield; }
.tick {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  letter-spacing: .04em;
}

.limits {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .05em;
  margin: 9px 2px 18px;
  flex-wrap: nowrap;
  gap: 12px;
}

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* ---------- referral ---------- */
.copyrow { display: flex; gap: 8px; }
.copyrow input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 11px 13px;
  outline: none;
  text-overflow: ellipsis;
}
.copyrow input:focus { border-color: var(--accent); color: var(--text); }

/* ---------- details / prose ---------- */
.prose { color: var(--muted); font-size: 14.5px; line-height: 1.72; }
.prose strong { color: var(--text); font-weight: 600; }

/* plain-language disclosure — must read as a caution, not as body copy */
.prose.note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 13.5px;
}

.meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.meta span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  color: var(--muted);
}
.meta span b { color: var(--accent); font-weight: 600; }
/* the treasury figure links to the explorer: a checkable fact, not a claim */
.meta span a { border-bottom: 1px dotted rgba(204, 255, 0, .45); }
.meta span a:hover b { color: #fff; }
.meta span a:hover { border-bottom-color: #fff; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line-soft); margin-top: 8px; padding-block: 30px 44px; }
.ftr__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: center;
  justify-content: space-between;
}

.ftr__brand { display: flex; align-items: center; gap: 12px; }
.ftr__brand img { display: block; border-radius: 10px; border: 1px solid var(--line); }
.ftr__brand b {
  display: block;
  font-size: 16px;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.ftr__brand b span { color: var(--brand); }
.ftr__brand p {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.ftr__links { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.ftr__links a, .ftr__links .lnk {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ftr__links a:hover, .ftr__links .lnk:hover { color: var(--accent); }
.ftr__links .lnk:focus-visible, .ftr__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ftr__chain {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}
.ftr__chain i { font-style: normal; color: var(--accent); }
.ftr__chain .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(204, 255, 0, .85);
}

.ftr__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.ftr__contract {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--muted);
}
.ftr__contract:hover { color: var(--accent); }

.ftr__social { display: flex; align-items: center; gap: 8px; }
.ftr__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.ftr__social a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(204, 255, 0, .07);
}
.ftr__social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ftr__social svg { width: 15px; height: 15px; display: block; }

.ftr__risk {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #5f5f57;
}

/* ---------- wallet picker ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal .box {
  width: min(390px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.modal .box--wide { width: min(660px, 100%); }
.modal h3 { font-size: 17px; margin-bottom: 4px; }
.modal .prose { margin: 14px 0 0; }
.modal p { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.wlist { display: flex; flex-direction: column; gap: 8px; }
.wlist button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.wlist button:hover { border-color: var(--accent); background: rgba(204, 255, 0, .06); }
.wlist img { width: 24px; height: 24px; border-radius: 6px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(520px, calc(100vw - 32px));
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 13px 17px;
  font-size: 13.5px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.toast[hidden] { display: none; }
.toast.bad { border-left-color: var(--danger); color: var(--danger); }

/* ---------- misc ---------- */
.mono { font-family: var(--mono); }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(17, 14, 8, .3); border-top-color: var(--ink); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* staggered entrance */
.rise { opacity: 0; transform: translateY(12px); animation: rise .5s cubic-bezier(.2, .7, .3, 1) forwards; }
.rise:nth-child(2) { animation-delay: .06s; }
.rise:nth-child(3) { animation-delay: .12s; }
.rise:nth-child(4) { animation-delay: .18s; }
.rise:nth-child(5) { animation-delay: .24s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
/* Desktop only: close the 26px gap exactly, so the mascot's base meets the top
   edge of the account panel and rests ON it rather than covering it. The image
   has no transparent padding at the bottom, so its visual base is its box edge,
   and the drop-shadow falls onto the panel as a contact shadow.
   Mobile stacks, so there is nothing to sit on. */
@media (min-width: 901px) {
  .hero__mascot img { margin-bottom: -26px; position: relative; z-index: 3; }
}

@media (max-width: 900px) {
  .col-5, .col-7, .col-4, .col-8 { grid-column: span 12; }
  .hero { grid-template-columns: 1fr; }
  .hero__mascot { order: -1; }
  .hero__mascot img { width: clamp(150px, 42vw, 230px); margin-inline: auto; }
  /* stacked hero reads as one centred column: slogan, headline, figures, stats */
  .hero__copy { text-align: center; }
  .hero h1 { margin-inline: auto; }
  .reserves { justify-content: center; }
  .meta { justify-content: center; }
}
@media (max-width: 560px) {
  body { background-attachment: scroll; }
  /* one row: brand, hamburger, CTA. The nav lifts out of the flow into a
     slide-down panel, so it costs no header height. */
  .hdr { gap: 10px; flex-wrap: nowrap; }
  .navToggle { display: inline-flex; flex: none; }
  .hdr .btn { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  .cta-word { display: none; }              /* 'Connect Wallet' -> 'Connect' */

  .nav {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .65);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .nav a {
    padding: 13px 14px;
    border-bottom: 0;
    border-radius: 10px;
    font-size: 13px;
  }
  .nav a[aria-current="page"],
  .nav a:hover { background: rgba(204, 255, 0, .08); color: var(--accent); }
  .actions { grid-template-columns: 1fr; }
}
/* at 320px the row is 15px over, so trim the wordmark rather than the CTA */
@media (max-width: 360px) {
  .brand b { font-size: 16px; }
  .brand { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rise { opacity: 1; transform: none; }
}