/* BlockFerret: design tokens, layout, components.
   Dark is the default; light follows the OS or the theme toggle.
   Charcoal and hard-hat amber; the mascot's glowing block is the only green. */

/* Arial resized to Plus Jakarta Sans's metrics, one face per weight used, so
   text keeps its size and line breaks when the web font swaps in. Measured
   in Chrome against this page's text: size-adjust = width ratio, overrides =
   Jakarta's 1.04/0.22 em ascent/descent ÷ size-adjust. */
@font-face { font-family: "Jakarta Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT");
  size-adjust: 105%; ascent-override: 99%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT");
  size-adjust: 105.7%; ascent-override: 98.4%; descent-override: 20.8%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.4%; ascent-override: 102.6%; descent-override: 21.7%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.3%; ascent-override: 102.7%; descent-override: 21.7%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta Fallback"; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 103.1%; ascent-override: 100.9%; descent-override: 21.3%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --bg: #141518;
  --glow-a: rgba(247, 185, 40, 0.11);
  --glow-b: rgba(243, 156, 29, 0.08);
  --surface: #1c1d21;
  --surface-2: #24262b;
  --surface-3: #2d3036;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f6f4ef;
  --text-2: #c5c2ba;
  --text-3: #938f87;
  --code-bg: #111214;
  --grid-line: rgba(255, 255, 255, 0.06);
  --axis-text: #938f87;
  /* Chart series (validated: lightness band, chroma, CVD, contrast on --surface). */
  --series-vanilla: #4f8fdc;
  --series-mev: #cf7d1c;
  /* Hard-hat amber is the brand; the mascot's glowing block is the only green. */
  --brand: #f7b928;
  --yellow: #f7b928;
  --accent: linear-gradient(120deg, #ffd34d 0%, #f7b928 45%, #f39c1d 100%);
  --accent-ink: #1d1508;
  --accent-glow: rgba(247, 165, 30, 0.55);
  --gradient-text: linear-gradient(110deg, #ffd34d 0%, #f7b928 40%, #f39c1d 100%);
  --hazard: repeating-linear-gradient(135deg, #f7b928 0 12px, #1d1508 12px 24px);
  --good: #3ccf91;
  --bad: #ff6b74;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.65);
  --radius: 16px;
  --radius-small: 10px;
  --font: "Plus Jakarta Sans", "Jakarta Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --scroll-thumb: #4a463d;
  --scroll-thumb-hover: #f7b928;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f6f5f1;
    --glow-a: rgba(247, 185, 40, 0.16);
    --glow-b: rgba(243, 156, 29, 0.10);
    --surface: #ffffff;
    --surface-2: #f0eee8;
    --surface-3: #e6e3db;
    --border: rgba(30, 28, 22, 0.10);
    --border-strong: rgba(30, 28, 22, 0.18);
    --text: #1b1a17;
    --text-2: #4d4a43;
    --text-3: #6f6b62;
    --code-bg: #f0eee8;
    --grid-line: rgba(30, 28, 22, 0.08);
    --axis-text: #6f6b62;
    --series-vanilla: #2f6fc0;
    --series-mev: #c46416;
    --brand: #b87a00;
    --accent-glow: rgba(247, 165, 30, 0.45);
    --gradient-text: linear-gradient(110deg, #b87a00 0%, #c46416 100%);
    --good: #12875a;
    --bad: #cf3341;
    --shadow: 0 24px 60px -32px rgba(40, 34, 20, 0.30);
    --scroll-thumb: #cdc8bc;
    --scroll-thumb-hover: #b87a00;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f1;
  --glow-a: rgba(247, 185, 40, 0.16);
  --glow-b: rgba(243, 156, 29, 0.10);
  --surface: #ffffff;
  --surface-2: #f0eee8;
  --surface-3: #e6e3db;
  --border: rgba(30, 28, 22, 0.10);
  --border-strong: rgba(30, 28, 22, 0.18);
  --text: #1b1a17;
  --text-2: #4d4a43;
  --text-3: #6f6b62;
  --code-bg: #f0eee8;
  --grid-line: rgba(30, 28, 22, 0.08);
  --axis-text: #6f6b62;
  --series-vanilla: #2f6fc0;
  --series-mev: #c46416;
  --brand: #b87a00;
  --accent-glow: rgba(247, 165, 30, 0.45);
  --gradient-text: linear-gradient(110deg, #b87a00 0%, #c46416 100%);
  --good: #12875a;
  --bad: #cf3341;
  --shadow: 0 24px 60px -32px rgba(40, 34, 20, 0.30);
  --scroll-thumb: #cdc8bc;
  --scroll-thumb-hover: #b87a00;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Scrollbars: a slim graphite pill that turns hard-hat amber under the pointer,
   on a track that blends into whatever it scrolls. Firefox takes the standard
   properties; Chrome 121+ ignores ::-webkit-scrollbar wherever those are set,
   so they only apply where the -webkit- rules are unsupported. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 44px; border: 4px solid transparent; border-radius: 999px;
  background: var(--scroll-thumb) padding-box;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--scroll-thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.025em; }
h1, h2 { text-wrap: balance; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(247, 185, 40, 0.35); }

.container { width: min(1160px, 100% - 32px); margin-inline: auto; }
.container.narrow { width: min(820px, 100% - 32px); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 10px 14px; border-radius: var(--radius-small);
  background: var(--surface-3); color: var(--text); text-decoration: none;
}
.skip-link:focus { top: 12px; }

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow::before {
  content: ""; width: 22px; height: 8px; border-radius: 2px; background: var(--hazard);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 700 15px/1 var(--font); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.button:hover { transform: translateY(-1px); }
.button-primary {
  color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 10px 30px -12px var(--accent-glow), inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}
.button-primary:hover { box-shadow: 0 14px 38px -10px var(--accent-glow), inset 0 -2px 0 rgba(0, 0, 0, 0.14); }
.button-ghost { color: var(--text); background: transparent; border-color: var(--border-strong); }
.button-ghost:hover { background: var(--surface-2); }
.button-small { min-height: 40px; padding: 0 18px; font-size: 14px; }

.icon-button {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer;
}
.icon-button:hover { color: var(--text); border-color: var(--border-strong); }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.text-button {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font: 600 13px/1 var(--font); padding: 9px 12px; border-radius: 999px; cursor: pointer;
}
.text-button:hover { color: var(--text); border-color: var(--border-strong); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 4px; margin: 0 auto; padding: 0; list-style: none; }
.nav-links a {
  display: block; padding: 8px 12px; border-radius: 999px;
  color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 600;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface-2); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; }

.icon-sun { display: none; }
:root[data-theme="light"] .icon-sun { display: block; }
:root[data-theme="light"] .icon-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-sun { display: block; }
  :root:not([data-theme="dark"]) .icon-moon { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 28px; isolation: isolate; overflow: hidden; }
.hero-glow {
  position: absolute; inset: -20% -10% auto; height: 820px; z-index: -1;
  background:
    radial-gradient(520px 400px at 20% 32%, var(--glow-a), transparent 70%),
    radial-gradient(460px 420px at 78% 36%, var(--glow-b), transparent 70%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  opacity: 0.7;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero h1 { margin: 18px 0 20px; font-size: clamp(40px, 5.6vw, 64px); font-weight: 800; letter-spacing: -0.035em; }
.lead { max-width: 600px; font-size: clamp(17px, 1.6vw, 19px); color: var(--text-2); }
.lead strong { color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero h1 .gradient-text { display: block; }
.hero-art { position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-art::before {
  content: ""; position: absolute; inset: 10% 4% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-a), transparent 75%);
  filter: blur(8px);
}
.mascot { width: min(470px, 100%); height: auto; }
.hero-card {
  position: relative; margin-top: 36px; max-width: 620px; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  padding: 26px 24px 20px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
}
.hero-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--hazard); }
.card-kicker { max-width: 190px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--text-2); }
/* Side by side only when the card has room: a narrow card (phones, and the
   two-column hero just above the tablet breakpoint) stacks the figure on top. */
.hero-copy { container-type: inline-size; }
@container (max-width: 600px) {
  .hero-card { grid-template-columns: 1fr; gap: 16px; }
  .card-kicker { max-width: none; }
}
/* The gradient is the element's background, clipped to its glyphs, so glyph ink
   past the box edge would lose its fill. The negative tracking pulls the last
   glyph's advance in, so pad the box to cover its full ink. The min-width holds
   a figure like "+20.9%" in any font, so the card's columns never move when the
   web font swaps in. */
.hero-figure {
  margin: 6px 0 0; padding: 0 0.12em 0 0.04em; min-width: 4.1em;
  font-size: 60px; font-weight: 800; line-height: 1.08;
  letter-spacing: -0.045em;
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-figure [data-stat] { display: inline-grid; white-space: nowrap; font-variant-numeric: tabular-nums; }
.count-ghost, .count-live { grid-area: 1 / 1; }
.count-ghost { visibility: hidden; }
.hero-figure-sub { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.hero-figure-sub strong { color: var(--text-2); font-weight: 700; }
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.hero-split div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.hero-split dt { font-size: 12px; color: var(--text-3); font-weight: 600; }
.hero-split dd { margin: 2px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.hero-split small, .kpi-value small, .eq-value small { font-size: 0.55em; font-weight: 700; color: var(--text-3); letter-spacing: 0; }

.paw-trail { display: flex; justify-content: center; gap: 26px; margin-top: 28px; color: var(--text-3); }
.paw-trail svg { width: 22px; height: 22px; fill: currentColor; opacity: 0; animation: paw-in 7s ease-in-out infinite; }
.paw-trail svg:nth-child(odd) { transform: translateY(8px) rotate(80deg); }
.paw-trail svg:nth-child(even) { transform: translateY(-6px) rotate(100deg); }
.paw-trail svg:nth-child(1) { animation-delay: 0s; }
.paw-trail svg:nth-child(2) { animation-delay: 0.35s; }
.paw-trail svg:nth-child(3) { animation-delay: 0.7s; }
.paw-trail svg:nth-child(4) { animation-delay: 1.05s; }
.paw-trail svg:nth-child(5) { animation-delay: 1.4s; }
.paw-trail svg:nth-child(6) { animation-delay: 1.75s; }
.paw-trail svg:nth-child(7) { animation-delay: 2.1s; }
@keyframes paw-in { 0% { opacity: 0; } 8%, 60% { opacity: 0.55; } 75%, 100% { opacity: 0; } }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-first { padding-top: 56px; }
.section-tinted { background: linear-gradient(180deg, transparent, var(--surface) 12%, var(--surface) 88%, transparent); }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head h2 { margin-top: 12px; font-size: clamp(30px, 4vw, 44px); font-weight: 800; }
.section-lead { margin-top: 16px; font-size: 17px; color: var(--text-2); }
.section-lead a, .method-body a, .faq a { color: var(--text); text-decoration-color: var(--brand); text-underline-offset: 3px; }

/* ---------- Stats ---------- */
.equation {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}
.eq-group { display: flex; align-items: center; gap: 14px; }
.eq-term {
  display: grid; gap: 4px; min-width: 170px; padding: 14px 18px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); text-align: center;
}
.eq-label { font-size: 12.5px; font-weight: 700; color: var(--text-3); }
.eq-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.eq-mev { box-shadow: inset 0 -3px 0 var(--series-mev); }
.eq-vanilla { box-shadow: inset 0 -3px 0 var(--series-vanilla); }
.eq-result { background: var(--accent); border-color: transparent; }
.eq-result .eq-label { color: rgba(29, 21, 8, 0.75); }
.eq-result .eq-value { color: var(--accent-ink); font-size: 28px; }
.eq-op, .eq-paren { font-size: 26px; font-weight: 300; color: var(--text-3); }
.eq-paren { font-size: 44px; line-height: 1; margin: 0 -6px; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.kpi { padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.kpi-label { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.kpi-value { margin-top: 6px; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.kpi-note { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.equation-note { flex-basis: 100%; margin-top: 2px; font-size: 13px; text-align: center; color: var(--text-3); }

/* Live stats: nothing is bundled with the page. Until the numbers arrive each
   value is a shimmering placeholder that keeps its place; if they can't be
   loaded the page says so (the script keeps retrying every minute). */
.stats-pending [data-stat] {
  display: inline-block; min-width: 3.2ch; height: 0.8em; vertical-align: middle;
  border-radius: 6px; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 300% 100%;
  animation: stat-shimmer 1.3s ease-in-out infinite;
}
.stats-pending .hero-figure [data-stat] { display: inline-grid; min-width: 3.4em; }
/* Placeholders roughly as wide as the values they stand for, so text doesn't rewrap. */
.stats-pending [data-stat="generated_at"] { min-width: 21ch; }
.stats-pending [data-stat="generated_time"] { min-width: 8ch; }
.stats-pending [data-stat="blocks_delivered"], .stats-pending [data-stat="blocks_with_mev"] { min-width: 4.5ch; }
.stats-pending [data-stat="typical_block_number"] { min-width: 9ch; }
@keyframes stat-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .stats-pending [data-stat] { animation: none; } }
.stats-note, .when-pending, .when-unavailable { display: none; }
.stats-pending .when-pending, .stats-unavailable .when-unavailable { display: inline; }
.stats-unavailable .hero-figure, .stats-unavailable .hero-card-detail, .stats-unavailable .stats-updated { display: none; }
.stats-unavailable .stats-note { display: block; }
.stats-note { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-2); }
.stats-note span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.stats-pending .chart-tools, .stats-unavailable .chart-tools, .stats-unavailable .equation-note { visibility: hidden; }
.chart-state { position: absolute; inset: 0; display: none; place-items: center; margin: 0; font-size: 14px; font-weight: 600; color: var(--text-3); }
.stats-pending .chart-state, .stats-unavailable .chart-state { display: grid; }

.live-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.live-status.is-live { color: var(--text-2); }
.live-status.is-live .live-dot { background: var(--good); box-shadow: 0 0 0 0 rgba(60, 207, 145, 0.55); animation: live-ping 2.4s ease-out infinite; }
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(60, 207, 145, 0.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(60, 207, 145, 0); } }

.segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.segmented button { border: 0; background: transparent; color: var(--text-2); font: 700 13px var(--font); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--border-strong), inset 0 -2px 0 var(--brand); }
.segmented button:disabled { opacity: 0.45; cursor: not-allowed; }

.chart-card { margin: 16px 0 0; padding: 22px 22px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-start; }
.chart-head h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.chart-sub { margin-top: 4px; font-size: 13.5px; color: var(--text-3); }
.chart-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.legend { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; }
.swatch-vanilla { background: var(--series-vanilla); }
.swatch-mev { background: var(--series-mev); }
.chart-body { position: relative; margin-top: 14px; }
.chart-svg { width: 100%; height: 320px; overflow: visible; }
.chart-svg:focus-visible { outline-offset: 6px; }
.chart-svg .grid { stroke: var(--grid-line); stroke-width: 1; shape-rendering: crispEdges; }
.chart-svg .axis-label { fill: var(--axis-text); font: 11.5px var(--font); font-variant-numeric: tabular-nums; }
.chart-svg .bar-vanilla { fill: var(--series-vanilla); }
.chart-svg .bar-mev { fill: var(--series-mev); }
.chart-svg .bar-break { fill: none; stroke: var(--surface); stroke-width: 2.5; }
.chart-svg .bar-overflow-label { fill: var(--text-2); font: 700 10.5px var(--font); font-variant-numeric: tabular-nums; }
.chart-svg .column { transition: opacity 0.15s ease; }
.chart-svg.has-active .column { opacity: 0.45; }
.chart-svg.has-active .column.active { opacity: 1; }
.chart-svg .hit { fill: transparent; cursor: crosshair; }

.chart-tooltip {
  position: absolute; top: 0; left: 0; z-index: 5; min-width: 190px; padding: 12px 14px;
  border-radius: 12px; background: var(--surface-3); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow); pointer-events: none; font-size: 13px;
}
.tt-title { font-size: 12px; color: var(--text-3); margin-bottom: 8px; font-weight: 600; }
.tt-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tt-row + .tt-row { margin-top: 4px; }
.tt-key { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.tt-line { width: 14px; height: 3px; border-radius: 2px; }
.tt-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.tt-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.chart-table-wrap { margin-top: 14px; max-height: 360px; overflow: auto; border-radius: 12px; border: 1px solid var(--border); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-2); font-weight: 700; }

.method { margin-top: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.method summary { cursor: pointer; padding: 16px 22px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.method summary::-webkit-details-marker { display: none; }
.method summary::after, .faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--text-3); transition: transform 0.2s ease; }
.method[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }
.method-body { display: grid; gap: 10px; padding: 0 22px 20px; color: var(--text-2); font-size: 14.5px; }
.method-body strong { color: var(--text); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: 24px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); counter-increment: step; }
.step::after {
  content: "0" counter(step); position: absolute; top: 20px; right: 22px;
  font: 600 13px var(--mono); color: var(--text-3);
}
.step h3 { margin-top: 18px; font-size: 19px; font-weight: 800; }
.step p { margin-top: 8px; font-size: 14.5px; color: var(--text-2); }
.step-icon, .hunt-icon {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  box-shadow: inset 0 -3px 0 var(--brand);
}
.step-icon svg, .hunt-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hunts ---------- */
.hunt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.hunt {
  position: relative; padding: 28px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease;
}
.hunt::before {
  content: ""; position: absolute; inset: auto -40% -60% auto; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a), transparent 70%); opacity: 0; transition: opacity 0.3s ease;
}
.hunt:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.hunt:hover::before { opacity: 1; }
.hunt h3 { margin-top: 18px; font-size: 20px; font-weight: 800; }
.hunt p { margin-top: 8px; color: var(--text-2); font-size: 15px; }
.fine-print { margin-top: 20px; font-size: 13.5px; color: var(--text-3); }

/* ---------- Laws ---------- */
.laws { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.law { display: flex; gap: 20px; padding: 26px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); }
.law-num {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  font: 800 18px/1 var(--font); letter-spacing: 0.02em; color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 10px 24px -12px var(--accent-glow), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}
.law h3 { font-size: 19px; font-weight: 800; }
.law p { margin-top: 6px; color: var(--text-2); font-size: 15px; }

.will-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.will-card { padding: 26px 28px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); }
.will-card h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; }
.will-card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.will-card li { position: relative; padding-left: 22px; color: var(--text-2); font-size: 15px; }
.will-card li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; }
.will-yes li::before { background: var(--good); }
.will-no li::before { background: var(--bad); }
.badge { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.badge svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.badge-yes { background: var(--good); }
.badge-no { background: var(--bad); }

/* ---------- Connect ---------- */
.relay-box {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; padding: 26px 24px 22px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
}
.relay-box::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--hazard); }
.relay-text { min-width: 0; flex: 1; }
.relay-label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.relay-url { display: block; margin-top: 6px; font-size: 14px; color: var(--text); word-break: break-all; line-height: 1.5; }
.connect-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.connect-step { min-width: 0; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.connect-step-head { display: flex; align-items: center; gap: 12px; }
.connect-step h3 { font-size: 17px; font-weight: 800; }
.connect-step > p { margin-top: 12px; font-size: 14.5px; color: var(--text-2); }
.connect-step code:not(pre code), .faq details code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font-size: 0.9em; color: var(--text); }
.connect-num { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 800 14px var(--mono); }
.code-block { position: relative; margin-top: 14px; }
.code-block pre {
  margin: 0; padding: 16px; padding-right: 64px; border-radius: 12px; background: var(--code-bg); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.7; color: var(--text-2); overflow-x: auto; white-space: pre;
}
.copy-mini {
  position: absolute; top: 10px; right: 10px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); font: 600 12px var(--font);
}
.copy-mini:hover { color: var(--text); }
.tabs { margin-top: 12px; }
.tab-list { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.tab { border: 0; background: transparent; color: var(--text-2); font: 700 13px var(--font); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--border-strong); }
.link-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.link-card {
  display: grid; gap: 4px; padding: 18px 22px; border-radius: var(--radius); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); transition: border-color 0.2s ease;
}
.link-card:hover { border-color: var(--brand); }
.link-title { font-weight: 800; }
.link-title::after { content: " ↗"; color: var(--text-3); }
.link-sub { font-size: 13.5px; color: var(--text-3); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details { border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 22px 20px; color: var(--text-2); font-size: 15px; }

/* ---------- CTA & footer ---------- */
.cta { padding: 40px 0 110px; }
.cta-inner {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 56px 56px 56px; border-radius: 28px;
  background: radial-gradient(600px 300px at 85% 40%, var(--glow-b), transparent 70%), radial-gradient(600px 300px at 10% 0%, var(--glow-a), transparent 70%), var(--surface);
  border: 1px solid var(--border);
}
.cta-inner::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--hazard); }
.cta-inner h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.cta-inner p { margin: 14px 0 28px; max-width: 520px; color: var(--text-2); font-size: 17px; }
.cta-mascot { width: 210px; height: auto; margin: -20px 0 -60px; }
.site-footer { border-top: 1px solid var(--border); padding: 32px 0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer-note { flex: 1 1 360px; font-size: 13.5px; color: var(--text-3); }
.footer-stats { display: block; margin-top: 4px; }
.footer-stats time { white-space: nowrap; }
.footer-links { display: flex; gap: 18px; font-size: 14px; }
.footer-links a { color: var(--text-2); text-decoration: none; }
.footer-note a { color: var(--text-2); text-decoration-color: var(--brand); text-underline-offset: 3px; }
.footer-links a:hover { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .mascot { width: min(340px, 72%); }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .connect-steps { grid-template-columns: 1fr; }
  .link-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .menu-toggle { display: inline-grid; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: 16px; right: 16px; margin: 0;
    flex-direction: column; padding: 10px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .nav-actions .button-small { display: none; }
  .nav-actions { margin-left: auto; }
  .laws, .will-grid, .hunt-grid, .link-row { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr; padding: 48px 28px; text-align: center; }
  .cta-inner p { margin-inline: auto; }
  .cta-mascot { display: none; }
}

@media (max-width: 640px) {
  .hero { padding-top: 48px; }
  .section { padding: 72px 0; }
  .section-first { padding-top: 40px; }
  .steps, .kpi-row { grid-template-columns: 1fr; }
  .equation { flex-direction: column; align-items: stretch; padding: 18px; gap: 8px; }
  .eq-group { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--border-strong); }
  .eq-term { min-width: 0; }
  .eq-op, .eq-paren { text-align: center; line-height: 1; }
  .eq-paren { display: none; }
  .mascot { width: min(260px, 70%); }
  .hero-card { grid-template-columns: 1fr; gap: 16px; }
  .card-kicker { max-width: none; }
  .relay-box { flex-direction: column; align-items: stretch; }
  .chart-svg { height: 260px; }
  .law { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .paw-trail svg { animation: none; opacity: 0.45; }
  .live-status.is-live .live-dot { animation: none; }
  .button, .hunt, .column { transition: none; }
}

@media (forced-colors: active) {
  .gradient-text, .hero-figure { color: CanvasText; background: none; }
  .chart-svg .bar-vanilla { fill: CanvasText; }
  .chart-svg .bar-mev { fill: Highlight; }
}