/* ──────────────────────────────────────────────────────────────────
   No Utility Token ($NUT) — landing.

   Design DNA is progy's: light theme, Outfit display, JetBrains Mono for
   anything numeric, a fixed viewport shell with an internally-scrolling
   hero, hairline-bordered card grids, staggered rise-on-load.

   What changes here is the palette and the joke. progy is monochrome
   graphite on white; NUT is warm peanut on cream, sampled straight off
   the shell in the logo. The register stays deadpan-institutional on
   purpose — a prospectus typeset for a peanut is funnier than a page
   that announces it is being funny, and it means the live market data
   has to look genuinely trustworthy, because it is.
   ────────────────────────────────────────────────────────────────── */

:root {
  /* Ground + ink */
  --cream:      #FCF9F4;
  --cream-2:    #F6F0E6;
  --ink:        #241C14;
  --ink-2:      #4A3D2F;
  /* --muted carries every small uppercase label and must clear 4.5:1 on the
     cream ground; --faint is decorative ONLY (separators, dots, rules) and is
     deliberately below text contrast, so never put words in it. */
  --muted:      #685A47;
  --faint:      #BFAE96;

  /* Hairlines. Two weights: --hair for interior dividers inside a card
     grid, --hair-2 for the outline of a block that has to hold its own
     against the canvas tableau behind it. */
  --hair:       #EDE3D3;
  --hair-2:     #E3D5BF;

  /* Shell — sampled from the logo. --shell is the accent that carries
     the brand; --skin is the reddish tip of the pod, which doubles as
     the "down" colour because it is already in the palette. */
  --shell:      #C89B6A;
  --shell-deep: #A9713E;
  --shell-lite: #E8C9A0;
  /* Shell, dark enough to be set as small text on cream (5.5:1). The lighter
     --shell tops out at 2.4:1, which is fine behind a fill and not fine under
     a sentence. */
  --shell-text: #7E4E26;
  --skin:       #B4472F;
  /* --skin is only ever read against a card fill. The feed-down note sits
     directly on the tableau, so it gets a darker cut of the same hue. */
  --skin-deep:  #9C3A25;
  --moss:       #3F7D52;

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--shell-lite); color: var(--ink); }

.page {
  position: fixed;
  inset: 0;
  width: 100vw;
  /* Small-viewport-height units so a mobile browser collapsing its URL bar
     doesn't crop the foot off the layout. */
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  /* The page itself never scrolls. That lets the brand and ticker (absolute,
     top corners) and the foot (flex-pinned) stay welded to the viewport
     while the hero takes the middle slot and scrolls internally. */
  overflow: hidden;
}

/* ─── Brand (top-left) ─── */
.brand {
  position: absolute;
  top: 0; left: 0;
  padding: 26px 38px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 11px;
  user-select: none;
}
.brand-mark {
  width: 30px; height: 30px;
  display: block;
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 4px rgba(90, 62, 32, 0.18));
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.brand-ticker {
  margin-top: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* ─── Live ticker pill (top-right) ───
   The price is chrome, not content: it stays pinned to the viewport corner
   so the number is on screen no matter how far the hero has scrolled. */
.ticker {
  position: absolute;
  top: 0; right: 0;
  padding: 26px 38px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 9px;
  user-select: none;
}
.ticker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  position: relative;
  flex: 0 0 auto;
  transition: background 0.4s ease;
}
.ticker-dot[data-state="live"] { background: var(--moss); }
.ticker-dot[data-state="live"]::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--moss);
  opacity: 0.32;
  animation: pulse 2.4s var(--ease) infinite;
}
.ticker-dot[data-state="stale"] { background: var(--shell-deep); }
.ticker-dot[data-state="down"]  { background: var(--skin); }
.ticker-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker-price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@keyframes pulse {
  0%   { transform: scale(0.6); opacity: 0.45; }
  100% { transform: scale(2.3); opacity: 0;    }
}

/* ─── Canvas tableau ─── */
.canvas-wrap { position: absolute; inset: 0; z-index: 1; }
canvas { display: block; width: 100%; height: 100%; }

/* ─── Top scroll shade ───
   Fades hero content to cream before it reaches the absolutely-positioned
   chrome in the top corners. Above the hero (z:5), below the chrome (z:10),
   pointer-events off so it never swallows a click. */
.page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 84px;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--cream) 0%,
    rgba(252, 249, 244, 0.94) 32%,
    rgba(252, 249, 244, 0.55) 66%,
    rgba(252, 249, 244, 0) 100%
  );
}

/* ─── Vignette ───
   Pushes the tableau's detail out to the edges so it never argues with the
   hero copy sitting in the middle of the frame. */
.vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* Eased at the centre (0.95 -> 0.84) so the wireframe peanut behind the hero
     is actually legible as a peanut. The outer stop is untouched: it is what
     keeps the particle fields from crowding the edges of the frame. */
  background: radial-gradient(
    ellipse 78% 68% at 50% 46%,
    rgba(252, 249, 244, 0.84) 0%,
    rgba(252, 249, 244, 0.62) 26%,
    rgba(252, 249, 244, 0) 56%,
    rgba(252, 249, 244, 0.9) 100%
  );
}

/* ─── Hero ─── */
.hero {
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  /* min-height:0 lets this flex child shrink below its content height, which
     is what makes the nested overflow-y actually scroll instead of shoving
     the foot off-screen. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center` degrades to start-alignment once content overflows, so the
     top stays reachable. Plain `center` centres the overflow on both sides
     and makes the first screen unscrollable-to. */
  justify-content: safe center;
  text-align: center;
  padding: 92px 24px 52px;
  scroll-behavior: smooth;
}
.hero-inner {
  width: 100%;
  max-width: 790px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── The peanut ───
   The only photographic element on the page, and the whole mascot. It gets a
   long soft shadow so it sits *on* the cream rather than being pasted over
   it, and an idle float so the page has a pulse even before any data lands. */
.pod {
  width: clamp(112px, 15vw, 152px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 26px rgba(120, 82, 42, 0.2));
  animation:
    rise 1.1s var(--ease) 0.1s backwards,
    bob 7s ease-in-out 1.2s infinite;
  will-change: transform;
}
@keyframes bob {
  0%, 100% { transform: translateY(0)    rotate(0deg);    }
  50%      { transform: translateY(-11px) rotate(-1.6deg); }
}

.eyebrow {
  margin-top: 26px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0; transform: translateY(12px);
  animation: rise 1s var(--ease) 0.28s forwards;
}
.eyebrow .sep { color: var(--faint); padding: 0 9px; }

.hero-title {
  margin-top: 24px;
  /* Capped at 58px rather than the 70px the two-line version could take: the
     longest line ("The asset is a peanut.") has to fit the 790px hero on one
     line, because a wrap here would break the three-beat cadence. */
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.036em;
  line-height: 1.06;
}
.hero-title .line1,
.hero-title .line2,
.hero-title .line3 {
  display: block;
  opacity: 0; transform: translateY(24px);
}
/* Three beats, evenly spaced, the peanut landing last. */
.hero-title .line1 { animation: rise 1s var(--ease) 0.42s forwards; }
.hero-title .line2 { animation: rise 1s var(--ease) 0.54s forwards; }
.hero-title .line3 { animation: rise 1s var(--ease) 0.68s forwards; }
/* The second line carries the shell gradient — the one place on the page
   where the brand colour is allowed to be loud. */
.hero-title .accent {
  background: linear-gradient(112deg, var(--shell-text) 0%, var(--shell-deep) 46%, var(--shell-text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.042em;
}

.hero-sub {
  margin-top: 26px;
  max-width: 600px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-2);
  opacity: 0; transform: translateY(16px);
  animation: rise 1s var(--ease) 0.72s forwards;
}
.hero-tagline {
  margin-top: 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0; transform: translateY(16px);
  animation: rise 1s var(--ease) 0.86s forwards;
}
.hero-tagline .dot { color: var(--faint); padding: 0 8px; }

/* ─── Live market band ───
   Above the fold by contract. Four primary figures in a hairline grid, then
   a secondary definition list of the slower-moving numbers. */
.market {
  margin-top: 34px;
  width: 100%;
  opacity: 0; transform: translateY(18px);
  animation: rise 1s var(--ease) 1s forwards;
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 1px of background bleeding through the gaps IS the divider — cheaper and
     crisper than per-cell borders that double up at the seams. */
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(36, 28, 20, 0.02), 0 14px 40px -22px rgba(120, 82, 42, 0.3);
}
.market-cell {
  background: rgba(255, 253, 250, 0.86);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 17px 14px 19px;
  text-align: center;
  transition: background 0.35s ease;
}
.market-cell:hover { background: rgba(255, 253, 250, 0.98); }
.market-label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.market-value {
  margin-top: 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.12;
  color: var(--ink);
  /* Tabular figures stop the count-up animation from jittering the layout as
     glyph widths change mid-tween. */
  font-variant-numeric: tabular-nums;
  transition: color 0.5s ease;
}
.market-value.is-up   { color: var(--moss); }
.market-value.is-down { color: var(--skin); }
/* A refresh that actually moved a number gets a one-shot tint, so the band
   visibly has a pulse without anything as garish as a flashing background. */
.market-value.is-flash { animation: flash 0.7s ease; }
@keyframes flash {
  0%   { color: var(--shell-deep); }
  100% { color: inherit; }
}

.market-meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}
.market-meta div { display: flex; flex-direction: column; gap: 3px; }
.market-meta dt {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.market-meta dd {
  color: var(--ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.market-note {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--muted);
  min-height: 15px;
}
/* No opacity: dimming text composites it against the ground and voids the
   measured contrast. --skin at full strength is 5.15:1 on cream. */
.market.is-down .market-note { color: var(--skin-deep); }
.market.is-stale .market-note { color: var(--shell-text); }

/* ─── Contract address ─── */
.ca {
  margin-top: 26px;
  width: 100%;
  max-width: 540px;
  opacity: 0; transform: translateY(16px);
  animation: rise 1s var(--ease) 1.12s forwards;
}
.ca-label {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.ca-row {
  margin-top: 9px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--hair-2);
  border-radius: 9px;
  background: rgba(255, 253, 250, 0.82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
}
.ca-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 13px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: left;
  /* The mint is 44 characters of base58 with no natural break points, so it
     has to be told it may wrap or it will blow the card out on a phone. */
  overflow-wrap: anywhere;
  word-break: break-all;
}
.ca-copy {
  flex: 0 0 auto;
  border: none;
  border-left: 1px solid var(--hair-2);
  background: var(--cream-2);
  color: var(--ink);
  padding: 0 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.ca-copy:hover { background: var(--shell-lite); }
/* Class name must match what the market module actually toggles (is-copied). */
.ca-copy.is-copied { background: var(--moss); color: #fff; }

/* ─── CTAs ─── */
.ctas {
  margin-top: 30px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0; transform: translateY(16px);
  animation: rise 1s var(--ease) 1.24s forwards;
}
.cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.cta:hover { border-bottom-color: var(--ink); }
.cta .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.3s var(--ease);
}
.cta:hover .arrow { transform: translateX(3px); }

/* The one action the page actually wants. Promoted from a text link into a
   filled shell-coloured pill so it carries weight against an otherwise very
   quiet layout. */
.cta.primary {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(160deg, #9A6435 0%, #7A4B24 100%);
  padding: 13px 26px;
  border-bottom: none;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(120, 82, 42, 0.2), 0 10px 26px -6px rgba(169, 113, 62, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, filter 0.3s ease;
}
.cta.primary:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 2px 4px rgba(120, 82, 42, 0.24), 0 16px 36px -8px rgba(169, 113, 62, 0.55);
}
.cta.secondary { color: var(--muted); }
.cta.secondary:hover { color: var(--ink); border-bottom-color: var(--muted); }

.ctas-hint {
  margin-top: 14px;
  max-width: 440px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--muted);
  opacity: 0; transform: translateY(12px);
  animation: rise 1s var(--ease) 1.36s forwards;
}

/* ─── Terminal block (the utility audit) ─── */
.terminal {
  margin-top: 40px;
  width: 100%;
  max-width: 580px;
  border: 1px solid var(--hair-2);
  border-radius: 11px;
  background: rgba(255, 253, 250, 0.92);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  text-align: left;
  box-shadow: 0 1px 0 rgba(36, 28, 20, 0.02), 0 14px 44px -18px rgba(120, 82, 42, 0.28);
  opacity: 0; transform: translateY(20px);
  animation: rise 1s var(--ease) 1.5s forwards;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair);
}
.terminal-bar .tdot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--hair-2);
}
.terminal-bar .tlabel {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.terminal pre {
  margin: 0;
  padding: 16px 18px 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
}
.terminal pre .prompt { color: var(--muted); user-select: none; }
.terminal pre .cmd    { color: var(--ink); font-weight: 500; }
.terminal pre .cmt    { color: var(--muted); }
.terminal pre .out    { color: var(--ink-2); }
.terminal pre .tree   { color: var(--ink-2); }
.terminal pre .nil    { color: var(--shell-text); }
.terminal pre .ok     { color: var(--moss); font-weight: 500; }
.terminal pre .cursor {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--ink);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ─── Shared section scaffolding ───
   Everything below the terminal is a band: hairline rule on top, generous
   breathing room, centred heading, left-aligned body. */
.band {
  margin-top: 78px;
  padding-top: 56px;
  width: 100%;
  border-top: 1px solid var(--hair);
  text-align: left;
}
.band-title {
  font-size: clamp(23px, 3.1vw, 31px);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.16;
  text-align: center;
}
.band-lede {
  margin: 18px auto 0;
  max-width: 630px;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-2);
}

/* Reveal-on-scroll. The hero's staggered load animation can't reach content
   this far down — by the time anyone scrolls here the delays have long since
   fired — so these bands wait for the IntersectionObserver in scripts.js and
   fall back to visible if it never runs. */
/* Inverted on purpose: a .reveal band is VISIBLE by default and the script
   arms the hidden state (.is-armed) before it starts observing. Two reasons.
   The hidden-by-default version needed an inline <noscript><style> to undo
   itself, which the page's Content-Security-Policy blocks (no 'unsafe-inline'
   in style-src) — so with JS off the content stayed invisible with the fix
   itself blocked. And if scripts.js ever fails to load, content that defaults
   to visible degrades to a static page instead of a blank one. Arming happens
   below the fold, so nobody sees the transition to hidden. */
.reveal {
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.is-armed { opacity: 0; transform: translateY(22px); }
.reveal.is-armed.is-in { opacity: 1; transform: translateY(0); }

/* ─── Case grid (six things it does not do) ─── */
.cases {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.case {
  background: rgba(255, 253, 250, 0.94);
  padding: 22px 22px 24px;
  transition: background 0.3s ease;
}
.case:hover { background: var(--cream-2); }
.case-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--shell-text);
}
.case h3 {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.case p {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ─── Roadmap ───
   Four quarters, each shipping nothing, each complete. The tick marks are
   real ticks: the work genuinely is done. */
.roadmap {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.quarter {
  background: rgba(255, 253, 250, 0.94);
  padding: 22px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quarter-q {
  /* Inside the <h3> so the accessible name is "Q1 Nothing" rather than four
     identical "Nothing" headings; display:block keeps the visual stacking. */
  display: block;
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--shell-text);
}
.quarter-item {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.34;
}
.quarter-status {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  /* flex-start, not center: a two-line status would otherwise centre its tick
     against both lines and break the row of ticks across the four cards. */
  align-items: flex-start;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss);
}
.quarter-status::before {
  content: '';
  width: 13px; height: 13px;
  flex: 0 0 auto;
  /* Optically centre the tick on the cap height of the first line. */
  margin-top: 0.5px;
  border-radius: 50%;
  background: var(--moss);
  /* A tick drawn as a masked shape rather than a glyph, so it can't be
     swapped out by a font fallback on a platform without the character. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ─── Static counters ───
   This band's heading is .sr-only, so it does not need the vertical runway a
   titled band does. .band-tight pulls the rule closer to the grid. */
.band-tight { margin-top: 58px; padding-top: 38px; }
.stats {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.stat {
  background: rgba(255, 253, 250, 0.94);
  padding: 26px 16px;
  text-align: center;
}
.stat-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--shell-text);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── FAQ ───
   <details> so it works with zero JavaScript and stays keyboard-navigable
   and screen-reader-sane for free. */
.faq { margin-top: 34px; border-top: 1px solid var(--hair); }
.faq details {
  border-bottom: 1px solid var(--hair);
}
.faq summary {
  padding: 17px 34px 17px 2px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.008em;
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: color 0.25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--shell-text); }
/* A plus that becomes a minus. Two spans would need markup; two pseudo
   elements on the summary are already spoken for, so the bar and the stem
   are drawn with a single element's background gradients. */
.faq summary::after {
  content: '';
  position: absolute;
  top: 50%; right: 4px;
  width: 11px; height: 11px;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--shell-deep) 0 0) center / 11px 1.5px no-repeat,
    linear-gradient(var(--shell-deep) 0 0) center / 1.5px 11px no-repeat;
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
}
.faq details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
  background:
    linear-gradient(var(--shell-deep) 0 0) center / 11px 1.5px no-repeat;
}
.faq-answer {
  padding: 0 34px 18px 2px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.64;
  color: var(--ink-2);
}

/* ─── Disclaimer ─── */
.disclaimer {
  margin-top: 60px;
  padding: 20px 22px;
  border: 1px solid var(--hair-2);
  border-radius: 11px;
  background: var(--cream-2);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.66;
  color: var(--ink-2);
  text-align: left;
}
.disclaimer strong {
  display: block;
  margin-bottom: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── Foot ─── */
.foot {
  /* In flex flow rather than absolute, so it always sits below the hero's
     scroll region instead of overlapping the last band. */
  flex: 0 0 auto;
  position: relative;
  z-index: 10;
  padding: 20px 38px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  user-select: none;
  background: linear-gradient(to top, var(--cream) 62%, rgba(252, 249, 244, 0));
}
.foot .sep { color: var(--hair-2); padding: 0 8px; }
.foot a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.foot a:hover { color: var(--ink); }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* The skip link: visually hidden at rest, and genuinely visible on focus.
   It cannot reuse .sr-only, which must stay hidden in every state (it also
   carries the counters band's heading). position:fixed rather than absolute
   because .page sets overflow:hidden and would clip it away. */
.skip {
  position: fixed;
  top: 0; left: 0;
  z-index: 20;
  transform: translateY(-130%);
  background: var(--cream);
  color: var(--ink);
  padding: 11px 18px;
  border: 1px solid var(--hair-2);
  border-radius: 0 0 9px 0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: translateY(0); }

/* Visible only to screen readers. Never revealed, in any state. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus. Everything interactive gets the same shell-coloured ring;
   :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--shell-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
/* The copy button sits inside .ca-row's overflow:hidden (which rounds the
   group's corners), so an outset ring would be clipped off. Draw it inside. */
.ca-copy:focus-visible { outline-offset: -4px; }

/* ─── Responsive ───
   Three axes, tuned independently:
     ≤ 860px  → tablet / large phone (grids halve)
     ≤ 560px  → phone (chrome shrinks, grids stack, type steps down)
     ≤ 400px  → very narrow (foldables, 320-360px)
     short    → landscape phones and split windows */
@media (max-width: 860px) {
  .market-grid  { grid-template-columns: repeat(2, 1fr); }
  .market-meta  { grid-template-columns: repeat(2, 1fr); }
  .roadmap      { grid-template-columns: repeat(2, 1fr); }
  .cases        { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page::before { height: 70px; }
  .brand, .ticker { padding: 18px 20px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 15px; }
  .ticker-label { display: none; }
  .hero { padding: 70px 20px 40px; }
  .pod { width: clamp(88px, 22vw, 108px); }
  .eyebrow { margin-top: 20px; }
  .hero-title { font-size: clamp(28px, 7.6vw, 38px); letter-spacing: -0.03em; margin-top: 18px; }
  .hero-sub { font-size: 14px; margin-top: 18px; }
  .hero-tagline { margin-top: 11px; }
  .market { margin-top: 24px; }
  .market-meta { margin-top: 10px; gap: 8px 14px; }
  .market-cell { padding: 14px 10px 16px; }
  .market-value { font-size: 17px; }
  .terminal pre { font-size: 11px; padding: 14px 14px 16px; }
  .ctas { flex-direction: column; gap: 15px; margin-top: 26px; }
  .cta.primary { width: 100%; text-align: center; }
  .band { margin-top: 62px; padding-top: 46px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 22px 12px; }
  .foot { padding: 15px 20px; font-size: 9px; letter-spacing: 0.16em; }
}

@media (max-width: 400px) {
  .brand, .ticker { padding: 15px 15px; }
  .hero { padding: 66px 15px 32px; }
  .hero-title { font-size: clamp(24px, 8.4vw, 31px); }
  .eyebrow { letter-spacing: 0.18em; font-size: 9.5px; }
  .ca-row { flex-direction: column; }
  .ca-copy { border-left: none; border-top: 1px solid var(--hair-2); padding: 11px 0; }
  .terminal pre { font-size: 10px; line-height: 1.66; }
}

@media (max-width: 340px) {
  /* Genuinely narrow (older SE, foldable covers). Only here is a single
     column actually necessary. */
  .market-grid  { grid-template-columns: 1fr; }
  .market-meta  { grid-template-columns: 1fr; }
  .roadmap      { grid-template-columns: 1fr; }
}

@media (max-height: 680px) {
  /* Short viewport. The chrome is already small, so claw space back out of
     the hero's vertical rhythm instead. */
  .page::before { height: 56px; }
  .hero { padding: 60px 24px 30px; }
  .pod { width: clamp(84px, 11vw, 108px); }
  .eyebrow { margin-top: 18px; }
  .hero-title { margin-top: 18px; }
  .hero-sub { margin-top: 18px; }
  .market { margin-top: 24px; }
  .ca { margin-top: 20px; }
  .ctas { margin-top: 22px; }
  .foot { padding: 13px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero { scroll-behavior: auto; }
  .pod { animation: none; }
  .ticker-dot::after { display: none; }
  .terminal pre .cursor { animation: none; opacity: 1; }
  /* Never hide a band at all when motion is reduced. */
  .reveal.is-armed { opacity: 1; transform: none; }
}