/* KEKBULL - kekbull.com
   Hand-written. No framework, no build step, no external fonts.
   CSP: default-src 'self'; img-src 'self'; style-src 'self'; script-src 'self'
   Nothing here loads a remote asset. Bar widths are utility classes because
   inline style="" is not allowed on this page. */

:root {
  --void: #0A0F0A;
  --stone: #1A1D1A;
  --panel: #0C110C;
  --panel-2: #12160F;
  --panel-ichor: #100C18;
  --panel-kek: #0B120C;
  --bone: #F5F2E9;
  --ink: #C8C4B4;
  --ink-dim: rgba(200, 196, 180, .75);
  --green: #00FF64;
  --gold: #C6A04D;
  --violet: #A472E8;
  --violet-lt: #C0A0F0;
  --red: #D63A3A;
  --rule: rgba(198, 160, 77, .28);
  --rule-strong: rgba(198, 160, 77, .35);
  --disp: "Arial Narrow", "Helvetica Neue Condensed", Impact, "Franklin Gothic Condensed", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --pad: clamp(20px, 5vw, 64px);
  --vpad: clamp(56px, 7vw, 104px);
  --max: 1240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  /* clip, NOT hidden. overflow-x:hidden turns this into a scroll container,
     and a sticky child then sticks to that container rather than the viewport,
     which silently disables the sticky header. clip contains the same overflow
     without creating a scroll box. */
  overflow-x: clip;
}

body {
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: #7CFFB0; }
::selection { background: var(--green); color: var(--void); }

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--disp);
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
  line-height: 1.02;
  letter-spacing: -.003em;
}

code { font-family: var(--mono); overflow-wrap: anywhere; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--void);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- reading level ---------- */

html[data-level="plain"] [data-when="tech"] { display: none !important; }
html[data-level="tech"] [data-when="plain"] { display: none !important; }

.level {
  display: flex;
  gap: 2px;
  border: 1px solid rgba(198, 160, 77, .4);
  padding: 2px;
  flex: 0 0 auto;
}
.level button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.level button[aria-selected="true"] { background: var(--gold); color: var(--void); }

/* ---------- nav ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(16px, 3vw, 32px);
  height: 62px;
  background: rgba(10, 15, 10, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bone);
  flex: 0 0 auto;
}
.brand img { display: block; border-radius: 3px; }
.brand span {
  font-family: var(--disp);
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.navlinks {
  display: flex;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: 12.5px;
  letter-spacing: .04em;
}
.navlinks::-webkit-scrollbar { display: none; }
.navlinks a { color: var(--ink); }
.navlinks a:hover { color: var(--bone); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(245, 242, 233, .34);
  color: var(--bone);
  font-size: 14.5px;
  letter-spacing: .04em;
}
.btn:hover { border-color: var(--bone); color: var(--bone); }
.btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--void);
  font-weight: 700;
}
.btn-primary:hover { background: #7CFFB0; border-color: #7CFFB0; color: var(--void); }
.btn-nav {
  min-height: 38px;
  padding: 0 18px;
  font-size: 13.5px;
  flex: 0 0 auto;
}
.btn.dead,
.btn.dead:hover {
  background: repeating-linear-gradient(45deg, rgba(198, 160, 77, .09) 0 6px, transparent 6px 12px);
  border: 1px dashed rgba(198, 160, 77, .5);
  color: rgba(200, 196, 180, .65);
  cursor: not-allowed;
}

.copy {
  min-height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(0, 255, 100, .6);
  color: var(--green);
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.copy:hover { background: rgba(0, 255, 100, .08); }
.ca-panel.ichor .copy { border-color: rgba(164, 114, 232, .7); color: var(--violet-lt); }
.ca-panel.ichor .copy:hover { background: rgba(164, 114, 232, .1); }

/* ---------- hero ---------- */

.hero {
  display: block;
  border-bottom: 1px solid var(--rule);
}
.hero-art {
  position: relative;
  min-height: min(48vh, 480px);
  background: #070A07;
  overflow: hidden;
}
.hero-art img,
.hero-art picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 20%;
}
.veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 10, 0) 52%, rgba(10, 15, 10, .82) 100%);
}
.scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0, 255, 100, .05) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}
.bracket {
  position: absolute;
  width: 22px;
  height: 22px;
}
.bracket.tl { left: 16px; top: 16px; border-left: 1px solid var(--gold); border-top: 1px solid var(--gold); }
.bracket.bl { left: 16px; bottom: 16px; border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.bracket.tr { right: 16px; top: 16px; border-right: 1px solid var(--gold); border-top: 1px solid var(--gold); }
.bracket.br { right: 16px; bottom: 16px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.plate-label {
  position: absolute;
  left: 20px;
  bottom: 48px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(198, 160, 77, .85);
}

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  column-gap: clamp(32px, 4vw, 72px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--pad);
}
.hero-read { min-width: 0; }
.hero-buy {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 18px;
  padding: 18px;
  min-width: 0;
  background: var(--panel-kek);
  border: 1px solid rgba(0, 255, 100, .22);
}
.hero-buy .ca-panel { margin: 0; padding: 0; border: 0; background: transparent; }
.hero-buy .ca-head {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px 10px;
  align-items: center;
}
.hero-buy .ca-head img { grid-row: 1 / 3; }
.hero-buy .ca-head .state { margin-left: 0; }
.hero-buy .ca-row {
  display: grid;
  gap: 10px;
}
.hero-buy .ca-row code {
  flex: none;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-all;
}
.hero-buy .copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
}
.hero-buy .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.hero-buy .actions .btn {
  width: 100%;
  justify-content: center;
  padding: 0 10px;
  font-size: 13.5px;
}
.hero-buy #link-pump-hero,
.hero-buy #link-dao-hero {
  grid-column: 1 / -1;
}
.hero-buy .risk {
  max-width: none;
  padding-left: 12px;
  margin: 0;
}
.hero-buy .risk p { font-size: 13.5px; }
.hud {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 16px;
}
.hud .sep { color: rgba(198, 160, 77, .4); }
.hud .live { color: var(--green); }
.hero-copy h1 {
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.08;
  margin-bottom: 22px;
}
.pitch {
  margin: 0 0 26px;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.6;
  max-width: 56ch;
}
.pitch.mono { font-family: var(--mono); font-size: 14px; max-width: 62ch; }
.pitch strong { color: var(--bone); font-weight: 600; }
.story {
  margin: 0;
  max-width: 62ch;
  display: grid;
  gap: 16px;
}
.story p {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
}
.story strong { color: var(--bone); font-weight: 600; }
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.risk {
  border-left: 2px solid var(--gold);
  padding-left: 14px;
  display: grid;
  gap: 8px;
  max-width: 60ch;
}
.risk p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.risk strong { color: var(--bone); }
.nfa {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--gold);
}

/* ---------- contract address panels ---------- */

.ca-panel {
  border: 1px solid rgba(0, 255, 100, .34);
  background: var(--panel-kek);
  padding: 18px;
  margin-bottom: 18px;
}
.ca-panel.ichor {
  border-color: rgba(164, 114, 232, .42);
  background: var(--panel-ichor);
  margin-top: 18px;
}
.ca-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
}
.ca-head img { display: block; flex: 0 0 auto; }
.ca-panel .ca-head img { border-radius: 50%; }
.ca-panel.ichor .ca-head img { border-radius: 0; }
.ca-head .name { color: var(--green); }
.ca-panel.ichor .ca-head .name { color: var(--violet-lt); }
.ca-head .state {
  margin-left: auto;
  letter-spacing: .14em;
  color: var(--green);
}
.ca-panel.ichor .ca-head .state { color: var(--violet-lt); }
.ca-head .state.pending { color: var(--ink-dim); }
.ca-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ca-row code {
  font-size: 14px;
  line-height: 1.45;
  color: var(--bone);
  word-break: break-all;
  flex: 1 1 220px;
}
.ca-note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(200, 196, 180, .8);
}

/* ---------- live price band ----------
   Two gauges mirrored around one hairline, the ratio riding on it as a chip, the
   offer under them, a two-line legend under that, and the two controls last. The
   band sits directly under the hero art and above the instrument strips, and it
   is built from .strip's own anatomy - a keyed cell, a 10px gold key, a 1px
   gold-dim divider - so it reads as another instrument strip rather than a
   widget bolted onto the page.

   Type discipline is the point of the redesign: three sizes (10 / 12.5 / 19px)
   and two families. Every reading is mono with tabular figures so a digit
   changing between polls cannot move anything sideways; only the two controls
   are --body.

   KEKBULL is green and ICHOR is violet everywhere else on this page
   (.strip.tech .v.ichor, .card.ichor, .flow .step.ichor); the two prices keep
   those colours so the pair reads without a legend.

   Mobile-first. This is the phone band; the one-row desktop form is the
   @media (min-width: 1040px) block at the end, which is the same parts unfolded
   rather than a second design. The hairline colour is written out rather than
   tokenised because it is the same rgba(198, 160, 77, .18) .strip .cell already
   uses for its dividers. */

.pxband {
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #0C110C 0%, #0A0F0A 100%);
}
/* Full bleed, like the .strip below it. This band is another instrument strip
   and reads as one; boxing it to --max would make it the only inset element
   here. The clamp is the design's two measured gutters - 16px on a phone,
   32px on the wide row - in one declaration. */
.pxband-in {
  padding: 11px clamp(16px, 3vw, 32px);
}

/* The pair. Two keyed cells mirrored about a 62px centre column; the divider is
   drawn by .px-mid so the ratio chip can sit on it. */
.px-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  align-items: stretch;
}
.px {
  display: grid;
  gap: 1px;
  min-width: 0;
  align-content: center;
}
.px.ichor { text-align: right; }
.px-k {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .18em;
  color: var(--gold);
}
.px-usd {
  font-family: var(--mono);
  font-size: 19px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.px.kek .px-usd { color: var(--green); }
.px.ichor .px-usd { color: var(--violet-lt); }
/* A dollar figure needs an oracle, a SOL figure does not. When the SOL/USD feed
   is the only thing missing the dollar cells go to a muted em-dash and the SOL
   readings stay - never a zero, never the last number dressed as live. Both
   token selectors are spelled out because .px.kek .px-usd would otherwise
   out-specify a bare .px-usd.mute and leave the em-dash brand green. */
.px.kek .px-usd.mute,
.px.ichor .px-usd.mute { color: rgba(200, 196, 180, .45); }
.px-sol {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: rgba(200, 196, 180, .66);
  font-variant-numeric: tabular-nums;
}
.px-mid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.px-mid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(198, 160, 77, .18);
}
/* Riding the hairline: the chip is a caliper across the pair, so it costs no
   row of its own. Opaque ground because it crosses the rule it sits on. */
.px-ratio {
  position: relative;
  padding: 3px 5px;
  background: var(--void);
  border: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* The offer. One line, never two - it is the sentence the whole band exists to
   put on screen, and a wrap turns it into two half-claims. */
.px-line {
  margin: 9px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: .02em;
  color: rgba(200, 196, 180, .78);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.px-line .ar { color: rgba(198, 160, 77, .7); }
/* Positive is the only state that gets the brand green. Zero or negative stays
   the line's own ink - the band never dresses a bad trade as a good one. */
.px-line .up { color: var(--green); }
/* Something is blocking the burn, or there is nothing to quote. Gold, because
   this line is then a warning rather than an offer. */
.px-line.out { color: var(--gold); }
.px-line .pause { color: var(--gold); }

/* Fine print as a legend plate, not a paragraph: two set lines, no rag, the age
   right-aligned on the second so it cannot collide with the copy.

   The 360px cap is what keeps that true off the phone. It is a no-op at 390px,
   where the plate has 358px to work in; above it the plate stops widening, so
   the age stays beside the legend instead of drifting to a tablet's right edge
   with 400px of nothing between them. Measured: 344px is the widest the two
   lines get (the outage state's "last try Ns ago" beside its shortened second
   line), so nothing wraps under the cap. */
.px-fine {
  margin: 6px 0 0;
  max-width: 360px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .04em;
  color: rgba(200, 196, 180, .64);
}
.px-fine p { margin: 0; }
.px-fine .l2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.px-fine .age {
  color: rgba(200, 196, 180, .5);
  white-space: nowrap;
}
/* Not fresh: the helper is serving its last good reading, or nothing read at
   all. Gold rather than more words, because the second legend line has no room
   for a reason and a wrap here is what pushes the age into the copy. */
.px-fine .age.stale { color: var(--gold); }

/* The wide row's own age cell. Off-breakpoint here, so display:none keeps it
   out of the accessibility tree rather than duplicating the reading. */
.px-age { display: none; }

/* Two controls, both 44px. The CTA takes the room; the disclosure is the width
   of its own label. Same 360px cap and same reason as the legend above: on a
   phone the pair fills the line, and off it the CTA stops growing rather than
   becoming a 600px slab of green across a tablet. */
.px-act {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  max-width: 360px;
}
.btn-px {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 12.5px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.px-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--body);
  font-size: 12.5px;
  letter-spacing: .04em;
  cursor: pointer;
}
.px-more:hover { border-color: var(--gold); color: var(--bone); }
.px-more:focus-visible { outline: 1px solid var(--green); outline-offset: 1px; }
.px-more svg { flex: 0 0 auto; transition: transform .12s ease; }
.px-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .px-more svg { transition: none; }
}

/* The divider between the pair and the readout. Wide row only. */
.vrule { display: none; }

/* ---------- "Try a burn": the disclosure ----------
   The shipped band put the input and its answer on two lines that read as two
   unrelated statements. Here the answer hangs off the input on a gold hairline
   elbow - the same bracket the hero corners are drawn with - so it can only be
   read as a consequence of the number above it. Class names are scoped to
   .px-calc: .k, .fine, .unit and .res are all generic enough to collide with
   the strips and the footer otherwise. */
.px-calc {
  padding: 11px clamp(16px, 3vw, 32px);
  background: #0A0F0A;
  border-top: 1px solid var(--rule);
}
.px-calc .k {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .18em;
  color: var(--gold);
}
.px-calc .in-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.px-calc input {
  width: 118px;
  min-height: 44px;
  padding: 0 10px;
  background: #0A0F0A;
  border: 1px solid var(--rule-strong);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.px-calc input:focus-visible { outline: 1px solid var(--green); outline-offset: 1px; }
.px-calc .unit {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: rgba(200, 196, 180, .55);
}
.px-calc .res {
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.px-calc .elbow {
  flex: 0 0 auto;
  width: 10px;
  height: 13px;
  margin-left: 14px;
  border-left: 1px solid rgba(198, 160, 77, .5);
  border-bottom: 1px solid rgba(198, 160, 77, .5);
}
.px-calc .res-lines {
  min-width: 0;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.px-calc .res-lines p { margin: 0; }
.px-calc .r1 { color: rgba(200, 196, 180, .78); }
.px-calc .r1 .ich { color: var(--violet-lt); }
.px-calc .r2 { color: var(--bone); }
.px-calc .r2 output { color: inherit; }
.px-calc .r2 .dim { color: rgba(200, 196, 180, .6); }
/* Not a quote: a reason, in the muted voice, so it cannot be mistaken for one. */
.px-calc .r2 output.bad { color: rgba(200, 196, 180, .55); }
.px-calc .fine {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .04em;
  color: rgba(200, 196, 180, .5);
}

/* ---------- the wide row ----------
   The same parts laid end to end in one ~75px row - gauge, hairline with the
   ratio riding it, gauge, rule, the offer over its two-line legend, age,
   disclosure, CTA. Nothing new is invented for the wide breakpoint; the phone
   band is this row folded, which is why they share these rules.

   1200px, and it is measured, not chosen. The row's parts are 1118px of content
   plus 64px of gutter, and the binding one is the legend's first line: at 1040
   the readout is squeezed to 167px, the nowrap offer line overhangs it by 97px
   and the legend lands on top of the disclosure button. The last width where
   the offer overflows at all is 1160 and the last where the legend does is
   1180, so the fold holds until 1200. Below it, the folded band - which is what
   a 1024px tablet gets, deliberately: a band that overlaps itself is worse than
   a band that is 190px tall below the art. */
@media (min-width: 1200px) {
  .pxband-in {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .px-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
  }
  .px { flex: 0 0 auto; }
  /* Nothing to mirror in a row: both gauges read left. */
  .px.ichor { text-align: left; }
  .px-mid {
    flex: 0 0 auto;
    align-self: stretch;
    width: 62px;
  }
  .vrule {
    display: block;
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    background: rgba(198, 160, 77, .18);
  }
  .px-read {
    flex: 1 1 auto;
    min-width: 0;
  }
  .px-line { margin: 0; }
  .px-fine {
    margin: 3px 0 0;
    color: rgba(200, 196, 180, .5);
    white-space: nowrap;
  }
  /* The legend is two set lines again; the age has its own cell in the row. */
  .px-fine .l2 { display: block; }
  .px-fine .age { display: none; }
  .px-age {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .04em;
    color: rgba(200, 196, 180, .4);
    white-space: nowrap;
  }
  .px-age.stale { color: var(--gold); }
  .px-act {
    margin-top: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: 20px;
  }
  /* The row reads left to right towards the action, so the disclosure comes
     before the CTA here. The DOM keeps the CTA first: it is the primary action
     and it should be the first of the two in the tab order on a phone. */
  .px-more { order: -1; }
  .btn-px {
    flex: 0 0 auto;
    padding: 0 16px;
  }

  /* The calculator is one row too: key, input, the consequence, and the note on
     when the fee bites pushed to the far end. The elbow becomes the same 1px
     gold-dim hairline the band divides itself with, because there is no "below"
     for a corner bracket to point at in a row. */
  .px-calc-in {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .px-calc .k { margin: 0; }
  .px-calc .res { margin-top: 0; align-items: center; }
  .px-calc .res-lines { margin-top: 0; }
  .px-calc .elbow {
    width: 1px;
    height: 30px;
    margin-left: 0;
    border: 0;
    background: rgba(198, 160, 77, .5);
  }
  .px-calc .fine { margin: 0 0 0 auto; }
}

/* ---------- instrument strips ---------- */

.strip,
.legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.legend { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.strip .cell,
.legend .item {
  padding: 18px clamp(16px, 2.4vw, 28px);
  border-right: 1px solid rgba(198, 160, 77, .18);
}
.strip .cell:last-child,
.legend .item:last-child { border-right: 0; }
.strip .k,
.legend .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 8px;
}
.strip .v {
  font-family: var(--disp);
  font-size: 26px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bone);
}
.strip .v.good { color: var(--green); }
.strip.tech .v {
  font-family: var(--mono);
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
}
.strip.tech .v.good { color: var(--green); }
.strip.tech .v.ichor { color: var(--violet-lt); }

.legend .item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.legend img { display: block; flex: 0 0 auto; }
.legend .kek img { border-radius: 50%; }
.legend .k { margin-bottom: 5px; }
.legend .kek .k { color: var(--green); }
.legend .ichor .k { color: var(--violet); }
.legend .burn .k,
.legend .treasury .k { color: var(--gold); }
.legend p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.legend .marks {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.legend .marks img { display: block; }
.legend .marks img:first-child { border-radius: 50%; }
.legend .arrow { color: var(--gold); font-size: 16px; line-height: 1; }
.legend .treasury-mark {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 160, 77, .55);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--gold);
}

/* ---------- section furniture ---------- */

.pad { padding: var(--vpad) var(--pad); }
.stone {
  background: var(--stone);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.wrap { max-width: var(--max); margin: 0 auto; }

.sechead {
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 14px;
  margin-bottom: 34px;
}
.sechead img { display: block; flex: 0 0 auto; border-radius: 50%; }
.sechead .num {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(200, 196, 180, .5);
}
.sechead .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
}

.h-sec { font-size: clamp(30px, 4.4vw, 56px); }
.lead {
  font-size: 18px;
  line-height: 1.58;
  color: #DCD8CB;
  margin: 0 0 40px;
}
.leads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 28px;
  margin-bottom: 44px;
}
.leads p { margin: 0; font-size: 17px; line-height: 1.62; }
.leads.mono { font-family: var(--mono); }
.leads.mono p { font-size: 14px; }

.note-gold {
  margin: 24px 0 0;
  padding: 18px 20px;
  background: rgba(198, 160, 77, .08);
  border-left: 2px solid var(--gold);
  font-size: 16px;
  line-height: 1.6;
}
.note-gold strong { color: var(--bone); }

/* ---------- glossary terms ---------- */

.term {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--bone);
  border-bottom: 1px dotted rgba(198, 160, 77, .7);
  cursor: help;
}
.term::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 90;
  width: max-content;
  max-width: min(340px, 78vw);
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid rgba(198, 160, 77, .55);
  color: var(--bone);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.term:hover::after,
.term:focus::after,
.term:focus-visible::after { opacity: 1; }

/* ---------- comparison ---------- */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  border: 1px solid rgba(198, 160, 77, .3);
}
.compare .col { padding: 28px clamp(20px, 2.4vw, 32px); }
.compare .them {
  background: var(--panel);
  border-right: 1px solid rgba(198, 160, 77, .3);
}
.compare .us { background: #12180F; }
.compare h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  margin-bottom: 18px;
  color: rgba(200, 196, 180, .7);
}
.compare .us h3 { color: var(--green); }
.compare ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.compare li {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.compare .them li { color: rgba(200, 196, 180, .75); }
.compare .us li { color: #DCD8CB; }
.compare li::before {
  position: absolute;
  left: 0;
}
.compare .them li::before { content: "\00d7"; color: rgba(200, 196, 180, .4); }
.compare .us li::before { content: "\2192"; color: var(--green); }
.compare strong { color: var(--bone); font-weight: 600; }

/* ---------- value cards ---------- */

.cards {
  padding: 0 var(--pad) var(--vpad);
}
.cards .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.card {
  border: 1px solid rgba(198, 160, 77, .3);
  background: var(--panel);
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
}
.card.ichor { border-color: rgba(164, 114, 232, .35); background: #0C0A12; }
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(198, 160, 77, .14);
  border-bottom: 1px solid rgba(198, 160, 77, .3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.card.ichor .card-head {
  background: rgba(164, 114, 232, .13);
  border-bottom-color: rgba(164, 114, 232, .35);
  color: var(--violet-lt);
}
.card-head img { display: block; flex: 0 0 auto; }
.card-head img.kek { border-radius: 50%; }
.card-head .arrow { color: rgba(198, 160, 77, .6); }
.card-head .gate { margin-left: auto; }
.card-body { padding: 24px 24px 0; flex: 1 1 auto; }
.card-body h2 { font-size: 28px; line-height: 1.05; margin-bottom: 14px; }
.card-body p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.card-body p.mono { font-family: var(--mono); font-size: 13.5px; line-height: 1.62; }
.card-body strong { color: var(--bone); }
.more {
  margin: 20px 24px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
}

/* ---------- burn ---------- */

.burn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.burn-lead { margin: 0 0 18px; font-size: 18px; line-height: 1.58; color: #DCD8CB; }
.burn-copy p { font-size: 16.5px; line-height: 1.62; }
.burn-copy strong { color: var(--bone); }
.burn-copy h3 { font-size: 26px; line-height: 1.1; margin-bottom: 12px; }
.example {
  border: 1px solid rgba(198, 160, 77, .32);
  background: var(--panel-2);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.example.mono { font-family: var(--mono); }
.example .k {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.example p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.example.mono p { font-size: 13.5px; line-height: 1.62; }
.example p:last-child { margin-bottom: 0; }
.example .aside { font-size: 15px; color: rgba(200, 196, 180, .8); }
.limits { border-top: 1px solid var(--rule-strong); padding-top: 22px; }

.viz {
  margin: 0;
  position: sticky;
  top: 88px;
  border: 1px solid rgba(198, 160, 77, .32);
  background: var(--panel);
  padding: 24px;
}
.viz .rows { display: grid; gap: 18px; }
.viz .row-k {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: rgba(200, 196, 180, .7);
  margin-bottom: 7px;
}
.viz .row-k b { color: var(--bone); font-weight: 400; }
.viz .bar { height: 14px; background: rgba(245, 242, 233, .07); }
.viz .bar i { display: block; height: 100%; background: var(--green); }
.viz .never .row-k { color: rgba(200, 196, 180, .55); }
.viz .never .row-k b { text-decoration: line-through; }
.viz .hatch {
  height: 14px;
  border: 1px solid rgba(214, 58, 58, .55);
  background: repeating-linear-gradient(45deg, rgba(214, 58, 58, .5) 0 5px, transparent 5px 10px);
}
.viz figcaption {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(200, 196, 180, .6);
}

.f100 { width: 100%; }
.f80 { width: 80%; opacity: .82; }
.f62 { width: 62%; opacity: .64; }
.f25 { width: 25%; }
.f50 { width: 50%; }
.f75 { width: 75%; }

/* ---------- fees ---------- */

.ledger { border-top: 1px solid rgba(198, 160, 77, .3); }
.ledger .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 48px);
  padding: 28px 0;
  border-bottom: 1px solid rgba(198, 160, 77, .3);
}
.ledger .title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ledger .title img { display: block; flex: 0 0 auto; }
.ledger .title img.kek { border-radius: 50%; }
.ledger h3 { font-size: 27px; line-height: 1.08; }
.ledger p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.ledger p:last-child { margin-bottom: 0; }
.ledger p.mono { font-family: var(--mono); font-size: 13.5px; line-height: 1.62; }
.ledger .sub { font-size: 14.5px; color: var(--ink-dim); }
.split { display: grid; gap: 12px; align-content: start; }
.split .pair { display: grid; gap: 6px; }
.split .bar { height: 10px; background: rgba(245, 242, 233, .07); }
.split .bar i { display: block; height: 100%; background: var(--gold); }
.split .bar.alt i { background: var(--green); }
.split span { font-size: 14px; }
.split strong { color: var(--bone); }

.cant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  margin-top: 32px;
}
.cant {
  border: 1px solid rgba(0, 255, 100, .3);
  background: rgba(0, 255, 100, .04);
  padding: 24px;
}
.council { border: 1px solid rgba(198, 160, 77, .32); padding: 24px; }
.cant h3, .council h3 { font-size: 24px; line-height: 1.1; margin-bottom: 14px; }
.cant ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cant li {
  font-size: 15.5px;
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}
.cant li::before { content: "\00b7"; position: absolute; left: 0; color: var(--green); }
.cant strong, .council strong { color: var(--bone); }
.council p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; }
.council p:last-child { margin-bottom: 0; font-size: 14.5px; color: var(--ink-dim); }

/* ---------- who ---------- */

.who-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-bottom: 36px;
}
.who-top p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: #DCD8CB; }
.who-top p:last-child { margin-bottom: 0; }
.record {
  border: 1px solid rgba(198, 160, 77, .32);
  background: var(--panel-2);
  padding: clamp(22px, 3vw, 32px);
  margin-bottom: 24px;
}
.record h3 { font-size: 28px; line-height: 1.08; margin-bottom: 14px; }
.record p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.62; }
.record strong { color: var(--bone); }
.record .stamp {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: rgba(198, 160, 77, .9);
}
.who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  background: rgba(198, 160, 77, .3);
  border: 1px solid rgba(198, 160, 77, .3);
  margin-bottom: 24px;
}
.who-card { background: var(--panel); padding: 22px; }
.who-card h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 10px;
}
.who-card p { margin: 0; font-size: 15px; line-height: 1.58; }
.team {
  border-left: 2px solid var(--gold);
  padding-left: 20px;
  margin-bottom: 20px;
}
.team h3 { font-size: 26px; line-height: 1.1; margin-bottom: 12px; }
.team p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.62; }
.team p:last-child { margin-bottom: 0; font-size: 14.5px; color: var(--ink-dim); }
.team strong { color: var(--bone); }
.who-note { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(200, 196, 180, .7); }

/* ---------- how to buy ---------- */

.steps,
.steps-tech {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: rgba(198, 160, 77, .3);
  border: 1px solid rgba(198, 160, 77, .3);
}
.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.steps li { background: var(--panel); padding: 24px; }
.steps .n {
  font-family: var(--disp);
  font-size: 46px;
  line-height: 1;
  color: rgba(198, 160, 77, .55);
  margin-bottom: 12px;
}
.steps h3 { font-size: 24px; line-height: 1.1; margin-bottom: 10px; }
.steps p { margin: 0; font-size: 15px; line-height: 1.58; }
.steps strong { color: var(--bone); }
.steps-tech { font-family: var(--mono); }
.steps-tech li {
  background: var(--panel);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: baseline;
}
.steps-tech .n { font-size: 13px; color: rgba(198, 160, 77, .85); }
.steps-tech p { margin: 0; font-size: 13.5px; line-height: 1.62; }
.steps-tech strong { color: var(--bone); font-weight: 400; }
.warn-red {
  margin: 0;
  padding: 18px 20px;
  background: rgba(214, 58, 58, .08);
  border-left: 2px solid var(--red);
  font-size: 16px;
  line-height: 1.6;
}
.warn-red strong { color: var(--bone); }

/* ---------- about / meme ---------- */

.split-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  border-top: 1px solid var(--rule);
  background: var(--panel);
}
.split-band.meme { border-bottom: 1px solid var(--rule); background: transparent; }
.plate {
  margin: 0;
  position: relative;
  min-height: 380px;
  background: #070A07;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.plate img { max-width: min(340px, 72%); height: auto; display: block; }
.plate figcaption {
  position: absolute;
  left: 20px;
  bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(198, 160, 77, .8);
}
.shot {
  margin: 0;
  position: relative;
  min-height: 340px;
  background: #070A07;
  overflow: hidden;
}
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-copy { padding: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 56px); }
.band-copy .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--gold);
}
.band-copy h1, .band-copy h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: .98; margin: 14px 0 12px; }
.band-copy.meme h2 { font-size: clamp(38px, 5vw, 68px); line-height: .96; margin-bottom: 16px; }
.thesis {
  margin: 0 0 20px;
  font-family: var(--disp);
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--green);
}
.thesis .term { color: var(--green); border-bottom-color: rgba(0, 255, 100, .6); }
.band-copy p.body { margin: 0 0 14px; font-size: 16.5px; line-height: 1.62; max-width: 62ch; }
.call {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- contract ---------- */

.contract-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.contract-grid h2 { font-size: clamp(30px, 4.4vw, 56px); margin-bottom: 14px; }
.contract-grid .intro { margin: 0 0 20px; font-size: 16px; line-height: 1.6; max-width: 52ch; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.verify {
  border: 1px solid rgba(0, 255, 100, .32);
  background: rgba(0, 255, 100, .04);
  padding: 24px;
}
.verify .k {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
}
.verify dl {
  margin: 0;
  display: grid;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
}
.verify .pair {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(198, 160, 77, .2);
  padding-bottom: 10px;
}
.verify .pair:last-child { border-bottom: 0; padding-bottom: 0; }
.verify dt { color: var(--ink); }
.verify dd { margin: 0; color: var(--bone); text-align: right; }
.verify .foot { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: rgba(200, 196, 180, .7); }

/* ---------- roadmap ---------- */

.ichor-intro {
  border: 1px solid rgba(164, 114, 232, .38);
  background: var(--panel-ichor);
  padding: clamp(22px, 3vw, 30px);
  margin-bottom: 32px;
}
.ichor-intro .head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ichor-intro img { display: block; flex: 0 0 auto; }
.ichor-intro .k {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet-lt);
}
.ichor-intro p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.62; }
.ichor-intro p:last-child { margin-bottom: 0; }
.ichor-intro strong { color: var(--bone); }

.flow-k {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.flow-intro { margin: 0 0 20px; font-size: 16px; line-height: 1.6; }
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.flow .step { border: 1px solid rgba(245, 242, 233, .22); padding: 18px; }
.flow .step.now { border-color: rgba(0, 255, 100, .45); background: rgba(0, 255, 100, .05); }
.flow .step.gate { border-color: rgba(198, 160, 77, .5); background: rgba(198, 160, 77, .07); }
.flow .step.ichor { border-color: rgba(164, 114, 232, .4); background: rgba(164, 114, 232, .06); }
.flow .step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.flow .step-head img { display: block; flex: 0 0 auto; width: 22px; height: 22px; }
.flow .step-head img.kek { border-radius: 50%; }
.flow .step-head .arrow { color: rgba(200, 196, 180, .5); font-size: 12px; }
.flow .step-head span.k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200, 196, 180, .75);
}
.flow .step.now .step-head span.k { color: var(--green); }
.flow .step.gate .step-head span.k { color: var(--gold); }
.flow .step.ichor .step-head span.k { color: var(--violet-lt); }
.flow .step-head span.k.push { margin-left: auto; }
.flow strong {
  display: block;
  margin: 0 0 8px;
  font-family: var(--disp);
  font-size: 21px;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 400;
}
.flow small { font-size: 13.5px; line-height: 1.5; }

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.notes .note { border-left: 2px solid var(--violet); padding-left: 18px; }
.notes .k {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet-lt);
}
.notes p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; }
.notes p:last-child { margin-bottom: 0; }
.notes strong { color: var(--bone); }
.flow-note { margin: 0 0 40px; font-size: 15.5px; line-height: 1.6; color: rgba(200, 196, 180, .8); }
.flow-note strong { color: var(--bone); }

.level-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-strong);
  padding-top: 22px;
  margin-bottom: 28px;
}
.level-row .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.level-row .hint { font-size: 14px; color: var(--ink-dim); }

.stages {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: rgba(198, 160, 77, .28);
  border: 1px solid rgba(198, 160, 77, .28);
}
.stages li { background: var(--panel-2); padding: clamp(22px, 3vw, 32px); }
.stage-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.stage-head img { display: block; flex: 0 0 auto; width: 24px; height: 24px; align-self: center; }
.stage-head img.kek { border-radius: 50%; }
.stage-head .epoch { font-family: var(--mono); font-size: 12px; color: rgba(198, 160, 77, .85); }
.stage-head .epoch.ichor { color: rgba(164, 114, 232, .9); }
.stage-head h3 { flex: 1 1 auto; font-size: 30px; line-height: 1.05; }
.gate-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid rgba(245, 242, 233, .3);
  color: rgba(200, 196, 180, .85);
}
.gate-tag.now { border-color: rgba(0, 255, 100, .5); color: var(--green); }
.gate-tag.market { border-color: rgba(198, 160, 77, .55); color: var(--gold); }
.why {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(200, 196, 180, .85);
}
.why b { color: var(--gold); font-weight: 600; }
.stage-body { display: grid; gap: 12px; }
.stage-body p { margin: 0; font-size: 16px; line-height: 1.62; }
.stage-body strong { color: var(--bone); }
.stage-body.mono { font-family: var(--mono); }
.stage-body.mono p { font-size: 13.5px; line-height: 1.62; }
.stage-body.mono code { color: var(--green); }

/* ---------- disclosure + footer ---------- */

.disclosure {
  border-top: 1px solid var(--rule);
  background: var(--panel);
  padding: clamp(36px, 5vw, 64px) var(--pad);
}
.disclosure .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.disclosure .k {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.disclosure p { margin: 0 0 12px; font-size: 16px; line-height: 1.62; }
.disclosure p:last-child { margin-bottom: 0; }

footer {
  border-top: 1px solid var(--rule);
  padding: clamp(40px, 6vw, 80px) var(--pad);
  text-align: center;
}
footer .k {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--gold);
}
footer .mantra {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(44px, 8vw, 110px);
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bone);
}

/* ---------- reveals ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- collapsible sections ---------- */

.sec { margin: 0; }
summary.sechead { cursor: pointer; list-style: none; align-items: center; }
summary.sechead::-webkit-details-marker { display: none; }
summary.sechead .sign {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  color: rgba(198, 160, 77, .85);
}
summary.sechead .sign::after { content: "+"; }
.sec[open] > summary.sechead .sign::after { content: "\2212"; }
summary.sechead:hover .sign { color: var(--bone); }
summary.sechead:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.short { display: none; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 10px;
  }
  .navlinks { order: 3; flex-basis: 100%; }
  .hero-copy { grid-template-columns: 1fr; }
  .hero-buy { position: static; }
}

@media (max-width: 760px) {
  .topbar { gap: 12px; }
  .topbar .wordmark { display: none; }
  .topbar .long { display: none; }
  .topbar .short { display: inline; }
  .navlinks { font-size: 12px; gap: 14px; }
  .hero-copy {
    grid-template-columns: 1fr;
    padding-top: 28px;
  }
  .hero-buy { position: static; order: -1; }
  .hero-art { min-height: min(70vh, 620px); }
  .hero-art img { object-position: 50% 18%; }
  .viz { position: static; }
  .term::after { left: auto; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   Mobile menu. Below 760px the seven section links were a 12px
   horizontally scrolling row, which is unreadable and easy to miss
   entirely. They now live in a panel behind an explicit Menu button.
   --------------------------------------------------------------- */
.navtoggle { display: none; }

@media (max-width: 760px) {
  .topbar { position: sticky; top: 0; z-index: 60; flex-wrap: nowrap; gap: 10px; }

  .navtoggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .navtoggle-bars { display: grid; gap: 3px; width: 16px; }
  .navtoggle-bars i {
    display: block; height: 2px; width: 100%;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .topbar.nav-open .navtoggle { background: var(--gold); color: var(--void); }
  .topbar.nav-open .navtoggle-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .topbar.nav-open .navtoggle-bars i:nth-child(2) { opacity: 0; }
  .topbar.nav-open .navtoggle-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* The panel, not a cramped strip. Full width, real tap targets. */
  .navlinks {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 6px 0 10px;
    margin: 0;
    background: var(--void);
    border-bottom: 1px solid var(--gold);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    font-size: 15px;
  }
  .topbar.nav-open .navlinks { display: flex; }

  .navlinks a {
    display: block;
    padding: 14px 18px;
    color: var(--bone);
    text-decoration: none;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .navlinks a:last-child { border-bottom: 0; }
  .navlinks a:active { background: rgba(198, 160, 77, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  .navtoggle-bars i { transition: none; }
}

/* A sticky header hides whatever an in-page link jumps to: the browser aligns
   the target with the top of the viewport, which is behind the bar. Every
   anchor target keeps a margin so its heading clears it. Set with scroll-padding
   on the root as well, so it also applies to keyboard and find-in-page jumps. */
:root { scroll-padding-top: 84px; }

[id] { scroll-margin-top: 84px; }

@media (max-width: 760px) {
  /* The mobile bar wraps to two rows, so it is taller. */
  :root { scroll-padding-top: 104px; }
  [id] { scroll-margin-top: 104px; }
}

/* ---------------------------------------------------------------
   Collapsed sections read as empty.
   Under 760px the seven sections close, and the only cue was a 16px
   "+" in muted gold at the far right. A closed section has to look
   like something you press, not a heading with nothing under it.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  .sec[data-collapse] > summary.sechead {
    padding: 13px 14px;
    gap: 10px;
    border: 1px solid rgba(198, 160, 77, 0.4);
    background: rgba(198, 160, 77, 0.05);
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  /* Open sections drop the affordance so it does not shout once used. */
  .sec[data-collapse][open] > summary.sechead {
    background: transparent;
    border-color: rgba(198, 160, 77, 0.18);
  }

  .sec[data-collapse] > summary.sechead:active {
    background: rgba(198, 160, 77, 0.14);
    border-color: var(--gold);
  }

  /* The glyph becomes a boxed control with a word next to it. A symbol alone
     is ambiguous; "Read" says what pressing it does. */
  summary.sechead .sign {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--gold);
  }

  .sec[data-collapse]:not([open]) > summary.sechead .sign::before {
    content: "Read";
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  summary.sechead .sign::after {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gold);
    line-height: 1;
  }

  /* A closed section is a heading floating over nothing, so give the row
     below it a hairline to sit on and make the block read as one unit. */
  .sec[data-collapse]:not([open]) { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sec[data-collapse] > summary.sechead { transition: none; }
}