/* ==========================================================================
   pages.css — primitives the ported inner pages need.

   deadguy's v3 base was written for the homepage, which contains no <code>,
   <pre> or <table>. The ported pages do: x402 carries 42-char contract
   addresses and benchmark carries preformatted blocks. With no rule to wrap
   them, a bare <code> blew the document to 1895px wide and scrolled the whole
   page sideways. These are the missing base styles, not page-specific ones.
   ========================================================================== */

main code {
  font-family: var(--font-mono);
  font-size: .8125em;
  color: var(--gold-bright, #d4b872);
  background: rgba(196, 168, 98, .07);
  border: 1px solid rgba(196, 168, 98, .16);
  border-radius: 3px;
  padding: .1em .4em;
  /* a contract address has no break opportunities of its own */
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

main pre {
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.7;
  color: var(--text-secondary, #b9c0cc);
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border, rgba(244, 239, 226, .10));
  border-radius: 4px;
  padding: 1rem 1.15rem;
  margin: 1.25rem 0;
  /* wide blocks scroll inside themselves; the page never scrolls sideways */
  overflow-x: auto;
  max-width: 100%;
}
main pre code {
  background: none; border: 0; padding: 0;
  color: inherit; font-size: inherit;
  overflow-wrap: normal; word-break: normal;   /* keep alignment inside a pre */
  white-space: pre;
}

/* grid and flex children default to min-width:auto, which refuses to shrink
   below their content and is the other half of the overflow above */
main .wrap > *, main .split__col, main .cell { min-width: 0; }

main table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
main th, main td {
  text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--border, rgba(244, 239, 226, .10));
}
main th { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--text-muted, #7d8794); }

/* The base fixes .stats at three columns, which was right for the homepage's
   three-stat block. Ported pages carry 4, 5 and 8, and a fixed 3-track grid
   orphans the remainder on a short final row. Match the track count to the
   item count instead. */
/* The base declares `repeat(3, 1fr)`. A bare 1fr has an AUTO minimum, so a
   track refuses to shrink below its content's min-content width and the grid
   pushes past its container — tokenomics overflowed 845px into a 768px
   viewport on "1,000,000,000". Re-declare the default with minmax(0,1fr). */
main .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
main .stats > * { min-width: 0; }
main .stats:has(> :nth-child(4):last-child),
main .stats:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
main .stats:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
main .stats:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 768px still holds three stats comfortably; dropping to two columns there
   orphaned the third. Step down at 700 instead, and send an odd three
   straight to a single column rather than 2+1. */
/* five and seven-up stat rows are too cramped on a tablet; step them down
   before the generic mobile rule. */
@media (max-width: 1000px) {
  main .stats:has(> :nth-child(5):last-child),
  main .stats:has(> :nth-child(7):last-child),
  main .stats:has(> :nth-child(8):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  main .stats,
  main .stats:has(> :nth-child(4):last-child),
  main .stats:has(> :nth-child(5):last-child),
  main .stats:has(> :nth-child(7):last-child),
  main .stats:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main .stats:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  main .stats,
  main .stats:has(> :nth-child(4):last-child),
  main .stats:has(> :nth-child(5):last-child),
  main .stats:has(> :nth-child(7):last-child),
  main .stats:has(> :nth-child(8):last-child) { grid-template-columns: minmax(0, 1fr); }
}

/* .bento is a four-track grid built for the homepage's five cells (one 2x2
   plus four small). A ported section with two cells filled two of four tracks
   and left half the row empty. Match tracks to item count, as with .stats. */
main .bento:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
main .bento:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
main .bento:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A three-up card at 900px is only ~250px wide, which is narrower than the
   42-character address it has to carry. Step down a column before that. */
@media (max-width: 1100px) {
  main .bento:has(> :nth-child(3):last-child),
  main .bento:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  main .bento:has(> :nth-child(2):last-child),
  main .bento:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Page hero + spec panel.

   Inner pages had no hero pattern: /about opened with a label, a heading and
   a one-line lede inside a 1112px wrap, so the copy filled 674px and left a
   void to the right AND below before the next section. The homepage solves
   this with a 14rem wordmark and a video plate; an inner page needs
   something quieter that still carries weight. A two-column hero with a
   fact panel fills the space with information rather than decoration.
   ========================================================================== */
.section--phero {
  /* The nav is fixed, so the hero must clear it. This was calc(4rem + ...)
     against a 64px bar; the HUD took the bar to ~90px and the eyebrow slid
     underneath it again. Track --nav-h instead of restating a height. */
  padding-block: calc(var(--nav-h, 92px) + clamp(1.25rem, 3vw, 2.5rem)) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
}
.phero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.phero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.phero .lede { max-width: 34ch; }
@media (max-width: 900px) {
  .phero { grid-template-columns: 1fr; gap: 2.25rem; }
  .phero .lede { max-width: none; }
}

/* the fact panel: a spec sheet, not a card of claims */
.spec {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, .015);
  padding: .25rem 1.15rem;
}
.spec__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.25rem; padding: .9rem 0;
  border-bottom: 1px solid var(--border);
}
.spec__row:last-child { border-bottom: 0; }
.spec__k {
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); flex: none;
}
.spec__v {
  font-family: var(--font-mono); font-size: .8125rem;
  color: var(--text-secondary); text-align: right;
  overflow-wrap: anywhere;
}
.spec__v b { color: var(--gold-bright, #d4b872); font-weight: 600; }
.spec a.spec__v { color: var(--btn-teal, #36d8ca); text-decoration: none; }
.spec a.spec__v:hover { text-decoration: underline; }

/* ==========================================================================
   Address row — full 42-char address, a copy button and a Basescan link.

   The card used to BE the Basescan link, which meant a copy button could not
   live inside it (nesting a button in an anchor is invalid and the click
   would be swallowed by the link). The card is now a plain container and the
   two actions sit in this row.
   ========================================================================== */
.addr {
  display: flex; align-items: stretch; gap: .35rem;
  margin-top: 1rem;
}
.addr__v {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  font-family: var(--font-mono);
  /* the full address is 42 characters; at this size it holds one line inside
     a half-width card, which is the whole point of showing it in full */
  font-size: .625rem;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .45rem .6rem;
  overflow-wrap: anywhere;
}
.addr__btn {
  flex: none;
  display: inline-grid; place-items: center;
  width: 44px; min-height: 44px;   /* kit floor: all controls >= 44px. With the
                                      address on its own row these had only a
                                      width and collapsed to 18px. */
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, .022);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.addr__btn svg { width: 14px; height: 14px; }
.addr__btn:hover,
.addr__btn:focus-visible {
  color: var(--gold-bright, #d4b872);
  border-color: rgba(196, 168, 98, .45);
  background: rgba(196, 168, 98, .10);
}
/* per-button confirmation: a shared toast cannot say WHICH address copied */
.addr__btn.is-copied {
  color: var(--btn-teal, #36d8ca);
  border-color: rgba(54, 216, 202, .5);
  background: rgba(54, 216, 202, .12);
}

/* Below ~460px the card's inner width cannot hold 42 characters AND two
   34px buttons on one line, so the address wrapped to two lines while the
   buttons sat beside it. Give the address its own full-width row instead —
   at 10px it then fits on a single line down to 360px. */
@media (max-width: 460px) {
  .addr { flex-wrap: wrap; }
  .addr__v { flex-basis: 100%; }
}

/* Inside a bento cell the row is narrower than the viewport breakpoint above
   can detect: at three-up the card is ~359px, and 42 characters plus two
   34px buttons do not fit on one line. Give the address its own row in any
   card, so it always reads as one unbroken string. */
.cell .addr { flex-wrap: wrap; }
.cell .addr__v { flex-basis: 100%; }

/* "token utility" was marked up as .label (an 11px eyebrow) and vanished
   beside the contract cards. It is a real subdivision of the token section,
   so it gets h3 weight and the space to act as a divider. */
.utility__h {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--border);
}
.utility__h + .lede { margin-top: .85rem; }

/* ==========================================================================
   Vertical rhythm for ported sections.

   The base ships every block element at margin:0 — the homepage can do that
   because each of its sections carries bespoke spacing. The ported pages
   emit plain sequences (label, h2, lede, p, ul, button row) with nothing
   between them, so a spacing audit showed 0px between almost every element
   on the page, and the button rows sat flush against the paragraph above.
   This is the missing scale. Scoped to `main .wrap >` so it only touches
   ported page content, never the chrome.
   ========================================================================== */
main .wrap > * + *            { margin-top: 1.15rem; }
main .wrap > .label + *       { margin-top: 0; }          /* .label already has 36px below */
main .wrap > .h2 + *,
main .wrap > .h3 + *          { margin-top: 1.05rem; }
main .wrap > .lede + *        { margin-top: 1.7rem; }
main .wrap > p + p            { margin-top: 1.1rem; }

main .wrap > ul,
main .wrap > ol               { margin-top: 1.4rem; padding-left: 1.1rem; }
main .wrap > ul > li + li,
main .wrap > ol > li + li     { margin-top: .55rem; }

/* structural blocks get a wider gutter than running text */
main .wrap > .bento,
main .wrap > .stats,
main .wrap > .split,
main .wrap > .board,
/* the ports wrap card and stat groups in an unclassed <div>, so target by
   what they CONTAIN rather than by a class they do not carry */
main .wrap > div:has(> .cell),
main .wrap > div:has(> .stat)  { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* any row of buttons — this is what was sitting flush against the text */
main .wrap > div:has(> .btn)  {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

/* the utility heading sets its own, larger divider spacing; keep it winning
   over the generic `* + *` above, which is equally specific */
main .wrap > .utility__h {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
}
main .wrap > .utility__h + .lede { margin-top: .9rem; }

/* A stat value with a long unbroken string (tokenomics carries several) was
   355px of content in a 218px track. overflow is visible, so it did not clip
   — it spilled and inflated the DOCUMENT scroll width to 867px inside a
   768px viewport, scrolling the whole page sideways with no visibly
   offending element. Let the value wrap. */
main .stat__k,
main .stat__v {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* .stat__v is a 44-80px display style built for short figures like "95.6%".
   The ported pages put prose, dates and addresses in it (up to 80 characters
   on framework), which wrapped to two and three lines at that size and, on
   tokenomics, spilled far enough to scroll the whole page sideways.

   So: a modest default, and the big display size only where the value is an
   animated counter — which is exactly the "one short figure" case. */
/* NOT scoped to `.stats` — framework's stat pairs sit loose in the wrap, and
   there an 80-character value rendered at 80px and 560px tall. */
main .stat__v {
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -.01em;
}
/* v3.js REPLACES a .count node with a .count3 once it has animated, so a
   selector matching only .count silently stops applying after entry. */
main .stat__v:has(.count),
main .stat__v:has(.count3) {
  font-size: clamp(2.75rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -.038em;
}

/* The first section on a ported page sits directly under the fixed nav. The
   base .section padding cleared the old 62px bar, but the HUD took it to
   ~90px and left only 4-10px of air above the eyebrow. Track --nav-h. */
main > section:first-child,
main > .section--phero {
  padding-top: calc(var(--nav-h, 92px) + clamp(1.75rem, 3.5vw, 3rem));
}

/* A contract address inside a bare <a> has no break opportunity, so at 360px
   it ran 30px past the viewport and scrolled the whole page sideways
   (/tokenomics, vesting contract link). Anchors sitting in running text wrap
   like the text around them. `anywhere` only breaks when it has to, so
   ordinary word links are unaffected. */
main p a,
main li a,
main .section__note a,
main .stat__v a { overflow-wrap: anywhere; }