/* ════════════════════════════════════════════════════════════
   COMMUNITY BUYBACK 3 — World Mobile design system
   Black-dominant polarity · Aeonik · #FFF533 sole accent
   40px card radius · pill buttons · flat, 1px borders, no shadows
   ════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --black: #000000;
  --surface: #0C0C0C;
  --surface-2: #141414;
  --line: #222222;
  --line-2: #2A2A2A;
  --white: #FFFFFF;
  --txt: #F5F5F5;
  --n400: #A3A3A3;
  --n500: #737373;
  --accent: #FFF533;
  --accent-on: #171717;
  --radius-card: 40px;
  --radius-panel: 24px;
  --radius-pill: 1061px;
  --eyebrow-radius: 0 20px 0 20px;
  --maxw: 1120px;
  /* Aeonik covers Latin; CJK glyphs fall through to the platform CJK fonts so
     the zh-CN / ko / ja locales render cleanly without shipping CJK webfonts. */
  --font: 'Aeonik', "PingFang SC", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Meiryo", "Malgun Gothic", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans CJK JP",
    "Noto Sans CJK KR", "Noto Sans", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; } /* clip 100vw full-bleed helpers so a classic scrollbar can't create horizontal scroll */

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--txt);
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Black-breaking atmosphere: dashboard dot-grid + top accent glow ── */
.hexbg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* dot-grid texture only — no decorative accent glow (brand: flat surfaces) */
  background-image:
    radial-gradient(rgba(255,255,255,0.022) 1px, transparent 1.4px);
  background-size: 24px 24px;
  background-position: center;
}
body > *:not(.hexbg) { position: relative; z-index: 1; }

/* World Mobile Chain woven-mesh background (from worldmobile.io/the-chain),
   full-bleed behind the On-chain proof section, darkened so content stays legible */
.chain-bg { position: relative; }
.chain-bg::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50vw); width: 100vw; z-index: -2;
  background-image: url('img/chain-hero.avif');
  background-size: cover; background-position: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* flat readability scrim over the chain image — a solid rgba wash, not a gradient */
.chain-bg::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50vw); width: 100vw; z-index: -1;
  background: rgba(0, 0, 0, 0.8); pointer-events: none;
}

/* full-bleed tonal band (breaks the flat black into zones) */
.band { position: relative; }
.band::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50vw); width: 100vw; z-index: -1;
  background: #070707; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* horizontal padding only — must NOT use the `padding` shorthand, or it would
   zero out the vertical section padding below (class beats element selector) */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

section { padding-top: 84px; padding-bottom: 84px; }
@media (max-width: 767px) { section { padding-top: 52px; padding-bottom: 52px; } }

/* hero needs breathing room before the first section */
header.wrap { padding-bottom: 12px; }

/* ── Type scale ── */
h1 {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--white);
}
h2 {
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.64px;
  color: var(--white);
}
h3 {
  font-size: clamp(22px, 3.5vw, 30px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: var(--white);
}
.lead { font-size: 18px; line-height: 1.45; color: var(--n400); max-width: 720px; }
.small { font-size: 14px; color: var(--n500); }
.mono { font-variant-numeric: tabular-nums; }

/* ── Eyebrow pills ── */
.eyebrow-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.eyebrow {
  display: inline-block;
  padding: 8px 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  border-radius: var(--eyebrow-radius);
  background: var(--accent);
  color: var(--accent-on);
  border: 1px solid var(--accent);
}
.eyebrow.ghost { background: transparent; color: var(--accent); }
.eyebrow.neutral { background: transparent; color: var(--n400); border-color: var(--line-2); }

/* ── Illustrative tag — used everywhere projections appear ── */
.tag-illustrative {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--n500);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  padding: 4px 12px; vertical-align: middle;
}
.tag-real {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-on);
  background: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--radius-pill); padding: 4px 12px; vertical-align: middle;
}

/* flywheel node keyboard focus — visible yellow ring on dark */
.fly-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fly-hit:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════ DASHBOARD ════════ */
.nav-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.nav-jump { font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) { .nav-right .asof { font-size: 11px; } }
.dash-head { padding-top: 40px; padding-bottom: 8px; }
.dash-head h1 { font-size: clamp(30px, 4.5vw, 46px); }
.dash-head .lead { margin-top: 14px; }

.dashboard {
  display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 22px;
  padding-top: 34px; padding-bottom: 56px; align-items: start;
}
@media (max-width: 980px) { .dashboard { grid-template-columns: 1fr; } }

/* KPI board — 4 always-on primary tiles */
.kpi-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 26px; }
@media (max-width: 720px) { .kpi-board { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.mtile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel);
  padding: 18px 20px; transition: border-color 0.2s;
}
.mtile:hover { border-color: var(--line-2); }
.mtile.primary { background: var(--surface-2); border-top: 1px solid var(--accent); }
.mtile .mt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; min-width: 0; }
.mt-name { font-size: 12.5px; color: var(--n400); line-height: 1.25; min-width: 0; }
.mt-src { font-size: 11px; text-align: right; flex-shrink: 0; max-width: 48%; }
.mt-src .src-link { color: var(--n500); }
.mt-val { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.5px; color: var(--white); line-height: 1; }
.mtile.primary .mt-val { color: var(--white); }
.mtile.synth { border-color: var(--line-2); }
.mtile.synth .mt-val { color: var(--accent); }
.mt-period {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--n500); margin-top: 10px;
}
/* denser tiles inside the grouped grid (TT-like) */
.metric-grid .mtile { padding: 14px 16px; border-radius: 18px; }
.metric-grid .mt-top { margin-bottom: 8px; }
.metric-grid .mt-val { font-size: clamp(20px, 2.4vw, 26px); }
.metric-grid .mt-period { margin-top: 7px; }

/* ── Ecosystem metrics grid (World Mobile's own network figures) ── */
.eco-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
@media (max-width: 980px) { .eco-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px) { .eco-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.eco-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 18px; transition: border-color 0.2s;
}
.eco-tile:hover { border-color: var(--line-2); }
.eco-name { font-size: 12px; color: var(--n400); line-height: 1.3; min-height: 30px; }
.eco-sub { color: var(--n500); }
.eco-val { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.5px; color: var(--white); line-height: 1.05; margin-top: 10px; }

/* all metric groups visible — dense, nothing hidden */
.metric-groups { display: flex; flex-direction: column; gap: 20px; }
.mgroup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mgroup-name {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt);
}
.mgroup-pill {
  font-size: 12px; color: var(--accent); background: transparent; border: 1px solid var(--line-2);
  border-radius: 0 20px 0 20px; padding: 3px 12px; font-weight: 500;
}
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── Right rail: the buyback engine ── */
.dash-rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 20px; }
@media (max-width: 980px) { .dash-rail { position: static; } }
.rail-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 20px 22px;
}
.rail-kicker {
  font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--n500); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.rail-supply-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--n400); margin-bottom: 10px; }
.rail-meter { height: 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-pill); overflow: hidden; }
.rail-meter-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 1s cubic-bezier(0.2,0.7,0.2,1); }
.rail-supply-sub { font-size: 12.5px; color: var(--n500); line-height: 1.5; margin-top: 12px; }

/* ── Nav ── */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
nav .logo { color: var(--white); display: inline-flex; align-items: center; }
nav .logo svg { height: 26px; width: auto; display: block; }

/* system focus ring — 2px accent, every interactive element (never removed) */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
nav .nav-right { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--n500); }
nav .asof {
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: 13px; color: var(--n400); white-space: nowrap;
}

/* ── Cards & panels ── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 36px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 24px;
}
@media (max-width: 767px) { .card { padding: 26px 22px; border-radius: 28px; } }

/* ── Hero stat strip ── */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 44px;
}
@media (max-width: 900px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 22px 24px;
}
.stat .v {
  font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.5px;
  color: var(--white); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.stat .k { font-size: 14px; color: var(--n400); margin-top: 6px; }
.stat .src { font-size: 12px; color: var(--n500); margin-top: 10px; }
.stat .src a { color: var(--n500); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.stat .src a:hover { color: var(--accent); border-color: var(--accent); }

/* ── Source link chip ── */
.src-link {
  color: var(--n500); text-decoration: none;
  border-bottom: 1px solid var(--line-2); padding-bottom: 1px;
}
.src-link:hover { color: var(--accent); border-color: var(--accent); }

/* ── Section headers ── */
.sec-head { margin-bottom: 36px; }
.sec-head .kicker {
  font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--n500); margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.sec-head .kicker::before { content: ''; width: 22px; height: 1px; background: var(--accent); display: inline-block; }
.sec-head h2 { max-width: 820px; }
.sec-head .lead { margin-top: 16px; }

/* ── Teach cards (what a buyback is) ── */
.teach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .teach-grid { grid-template-columns: 1fr; } }
.teach-grid .card { padding: 30px; border-radius: var(--radius-card); }
.teach-grid .num {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 17px;
  border-radius: 20px 20px 0 0; margin-bottom: 20px;
}
.teach-grid h3 { font-size: 21px; margin-bottom: 10px; }
.teach-grid p { font-size: 15.5px; color: var(--n400); line-height: 1.5; }

/* ── Flywheel section ── */
#flywheel-panel { padding: 40px; overflow: hidden; }
@media (max-width: 767px) { #flywheel-panel { padding: 24px 14px; } }
#flywheel-svg-holder svg { width: 100%; height: auto; display: block; }
.fly-legend { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.fly-legend .li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--n500); }
.fly-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.fly-detail {
  margin-top: 18px; min-height: 52px; text-align: center;
  font-size: 14.5px; color: var(--n400); line-height: 1.5;
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
}
.fly-detail strong { color: var(--txt); font-weight: 500; }

/* ── Engines grid ── */
.engine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .engine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .engine-grid { grid-template-columns: 1fr; } }
.engine {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 26px;
  transition: border-color 0.25s;
}
.engine:hover { border-color: var(--accent); }
.engine .ico { width: 40px; height: 40px; margin-bottom: 16px; }
.engine .ico svg { width: 100%; height: 100%; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.engine h3 { font-size: 19px; margin-bottom: 8px; }
.engine p { font-size: 14.5px; color: var(--n400); line-height: 1.5; }
.engine .status { margin-top: 14px; font-size: 12px; color: var(--n500); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Usage-vs-float: compact comparison cards (dashboard style) ── */
.versus { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 860px) { .versus { grid-template-columns: 1fr; } }
.vs-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 22px 24px;
}
.vsc { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vsc b { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.6px; color: var(--white); line-height: 1.1; }
.vsc.hot b { color: var(--accent); }
.vsc span { font-size: 13px; color: var(--n400); }
.vsc em { font-size: 11px; font-style: normal; }
.vsc em .src-link { color: var(--n500); }
.vs-x { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n500); margin: 8px 0; }
.vs-note { font-size: 13.5px; color: var(--n500); line-height: 1.5; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.vs-note strong { color: var(--n400); font-weight: 500; }

/* ── Proof / on-chain section ── */
.proof-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-step { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.proof-step:last-child { border-bottom: none; }
.proof-step .n { color: var(--accent); font-weight: 700; font-size: 14px; min-width: 22px; font-variant-numeric: tabular-nums; }
.proof-step .amt { margin-left: auto; font-weight: 500; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.verify-links { list-style: none; padding: 0; margin: 0; }
.verify-links li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--n400); }
.verify-links li:last-child { border-bottom: none; }

/* ── Supply / token-field section ── */
#field-panel { padding: 40px; }
@media (max-width: 767px) { #field-panel { padding: 24px 16px; } }
#token-field { width: 100%; height: auto; display: block; border-radius: 16px; }
.field-caption { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; color: var(--n500); }
.field-caption .fc { display: flex; align-items: center; gap: 8px; }
.field-caption .sw { width: 10px; height: 10px; border-radius: 50%; }

/* ── Scenario explorer ── */
.preset-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.preset {
  font-family: var(--font);
  background: transparent; border: 1px solid var(--line-2); color: var(--txt);
  font-size: 15px; font-weight: 500; padding: 12px 26px;
  border-radius: var(--radius-pill); cursor: pointer; transition: all 0.2s;
}
.preset:hover { border-color: var(--accent); }
.preset.active { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }

.explorer-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; align-items: stretch; }
@media (max-width: 900px) { .explorer-grid { grid-template-columns: 1fr; } }

.sliders .slider-block { padding: 18px 0; border-bottom: 1px solid var(--line); }
.sliders .slider-block:last-of-type { border-bottom: none; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.slider-head .name { font-size: 15px; color: var(--n400); }
.slider-head .val { font-size: 19px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px;
  background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: var(--line-2); border-radius: var(--radius-pill);
}
/* hexagon thumb (flat-top) with a thin black border — WM Network Builder motif */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 22px; margin-top: -9px; background: transparent;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpolygon points='6,1 18,1 23,11 18,21 6,21 1,11' fill='%23FFF533' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
}
input[type="range"]::-moz-range-track { height: 4px; background: var(--line-2); border-radius: var(--radius-pill); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 22px; border: none; background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpolygon points='6,1 18,1 23,11 18,21 6,21 1,11' fill='%23FFF533' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
}

.scenario-tagline { font-size: 14.5px; color: var(--n500); line-height: 1.5; margin-top: 16px; min-height: 44px; }

.outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .outputs { grid-template-columns: 1fr; } }
.out {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 20px 22px;
}
.out .v {
  font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -0.5px;
  color: var(--white); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.out.hero-out { grid-column: 1 / -1; background: var(--surface-2); border-color: var(--accent); }
.out.hero-out .v { color: var(--accent); font-size: clamp(32px, 5vw, 48px); }
.out .k { font-size: 13.5px; color: var(--n400); margin-top: 6px; line-height: 1.4; }
.formula {
  margin-top: 14px; font-size: 13px; color: var(--n500);
  border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 16px; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.formula strong { color: var(--n400); font-weight: 500; }

/* ── Big-picture master panel ── */
.master-panel { padding: 34px 36px; margin-bottom: 14px; }
@media (max-width: 767px) { .master-panel { padding: 24px 20px; } }
.master-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
@media (max-width: 900px) { .master-grid { grid-template-columns: repeat(2, 1fr); } }
.master-cell .v {
  font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; letter-spacing: -0.5px;
  color: var(--white); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.master-cell .v.accent { color: var(--accent); font-size: clamp(30px, 4.4vw, 46px); }
.master-cell .k { font-size: 13.5px; color: var(--n400); margin-top: 6px; line-height: 1.4; }
.hero-cell { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); padding-left: 28px; }
@media (max-width: 900px) { .hero-cell { grid-row: auto; border-left: none; padding-left: 0; } }

/* contribution bar */
.contrib-wrap { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 22px; }
.contrib-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--n400); margin-bottom: 12px; }
.contrib-bar {
  display: flex; height: 22px; border-radius: var(--radius-pill);
  overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-2);
}
.contrib-bar .seg { height: 100%; transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); min-width: 0; }
.contrib-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.contrib-legend .cl { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--n500); font-variant-numeric: tabular-nums; }
.contrib-legend .sw { width: 10px; height: 10px; border-radius: 3px; }

/* ── Engine rows ── */
.engine-row {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 24px 28px; margin-bottom: 12px;
  transition: border-color 0.3s, opacity 0.3s;
}
.engine-row.off { opacity: 0.68; border-style: dashed; }
.engine-row.on { border-color: var(--line-2); }
@media (max-width: 767px) { .engine-row { padding: 20px 18px; } }
.engine-row .er-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.engine-row .er-name { font-size: 19px; font-weight: 500; color: var(--white); letter-spacing: -0.2px; }
.engine-row .er-status {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--n500); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 3px 10px;
}
.engine-row .er-status.live { color: var(--accent-on); background: var(--accent); border-color: var(--accent); }
.engine-row .er-desc { font-size: 14px; color: var(--n400); line-height: 1.5; margin-top: 10px; max-width: 760px; }
.engine-row .er-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; margin-top: 18px; align-items: end; }
@media (max-width: 820px) { .engine-row .er-body { grid-template-columns: 1fr; } }
.engine-row .er-outs {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.engine-row .er-out { font-size: 13px; color: var(--n500); }
.engine-row .er-out b { display: block; font-size: 17px; font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.engine-row.off .er-body, .engine-row.off .er-outs { display: none; }

/* toggle switch */
.toggle { margin-left: auto; position: relative; width: 54px; height: 30px; flex-shrink: 0; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle .track {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line-2); transition: all 0.25s;
}
.toggle .knob {
  position: absolute; top: 4px; left: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--n500); transition: all 0.25s;
}
.toggle input:checked + .track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .track + .knob { left: 27px; background: var(--accent-on); }
.toggle input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* unit stepper */
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button {
  font-family: var(--font);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2);
  background: transparent; color: var(--txt); font-size: 20px; font-weight: 500;
  cursor: pointer; transition: all 0.2s; line-height: 1;
}
.stepper button:hover { border-color: var(--accent); color: var(--accent); }
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper .count { font-size: 24px; font-weight: 700; color: var(--white); min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.stepper .unit-note { font-size: 12.5px; color: var(--n500); }

/* ── Simulator: controls left, sticky live result right ── */
.sim-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .sim-layout { grid-template-columns: 1fr; } }
.sim-viz {
  position: sticky; top: 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 22px;
}
@media (max-width: 980px) { .sim-viz { position: static; order: -1; margin-bottom: 8px; } }
.viz-hero { margin-bottom: 16px; }
.viz-hero .v { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.04; font-variant-numeric: tabular-nums; color: var(--white); }
.viz-hero .v.accent { color: var(--accent); }
.viz-hero .k { font-size: 13px; color: var(--n400); margin-top: 6px; line-height: 1.4; }
.viz-field { background: #060606; border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
#token-field { width: 100%; height: auto; display: block; }
.viz-field + .field-caption { margin-top: 12px; }
.viz-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.viz-stats .vs { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; }
.viz-stats .vs b { display: block; font-size: 19px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.viz-stats .vs span { font-size: 11px; color: var(--n500); }
.sim-viz .contrib-wrap { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }

/* ── Honesty box ── */
.honesty {
  border: 1px solid var(--line-2); border-radius: var(--radius-panel);
  padding: 22px 26px; margin-top: 26px; font-size: 14px; color: var(--n500); line-height: 1.6;
}
.honesty strong { color: var(--n400); font-weight: 500; }

/* ── Footer ── */
footer { border-top: 1px solid var(--line); padding: 44px 0 60px; margin-top: 40px; }
footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 767px) { footer .cols { grid-template-columns: 1fr; } }
footer h4 { font-size: 15px; font-weight: 500; color: var(--txt); margin-bottom: 14px; }
footer ul { list-style: none; }
footer li { font-size: 14px; color: var(--n500); padding: 5px 0; }
footer li a { color: var(--n500); text-decoration: none; border-bottom: 1px solid var(--line-2); }
footer li a:hover { color: var(--accent); border-color: var(--accent); }
footer .legal { font-size: 12.5px; color: var(--n500); line-height: 1.6; margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; }

/* ── Global price row (master panel) ── */
.price-row.card { padding: 22px 24px; }
.price-row .name { font-size: 15px; color: var(--n400); }
.price-row .val { font-size: 19px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }

/* ── Sticky mobile mini summary ── */
#mini-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--black); border-top: 1px solid var(--line-2);
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr); gap: 10px;
}
#mini-bar.show { display: grid; }
#mini-bar .mb-cell { text-align: center; }
#mini-bar .mb-cell b { display: block; font-size: 16px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
#mini-bar .mb-cell span { font-size: 10.5px; color: var(--n500); text-transform: uppercase; letter-spacing: 0.05em; }
@media (min-width: 821px) { #mini-bar.show { display: none; } }
/* on mobile/tablet the fixed mini-bar can overlap the last content while the
   simulator is still intersecting — pad the footer so legal text is never hidden */
@media (max-width: 820px) { footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ── Print alternatives (hidden on screen) ── */
.print-alt { display: none; }

/* ── Print stylesheet ── */
@media print {
  :root { --accent: #8a7d00; }
  body { background: #ffffff; color: #111111; }
  h1, h2, h3, .er-name, .stat .v, .master-cell .v, .out .v, .vs-cell .big { color: #000000; }
  .lead, p, .small, .er-desc, .stat .k, .master-cell .k, .vs-cell .lbl, footer li, footer .legal { color: #333333; }
  .card, .panel, .stat, .engine, .engine-row, .out { background: #ffffff; border-color: #bbbbbb; }
  .eyebrow { background: #eeeeee; color: #111111; border-color: #999999; }
  .eyebrow.ghost, .eyebrow.neutral { color: #333333; }
  .tag-real { background: #eeeeee; color: #111111; border-color: #999999; }
  nav .asof, .er-status, .tag-illustrative, .vs-mid { color: #555555; border-color: #999999; }
  .master-cell .v.accent { color: #000000; }
  #flywheel-svg-holder, #token-field, #mini-bar, .fly-legend, .fly-detail, input[type="range"], .toggle, .stepper button { display: none; }
  .print-alt { display: block; font-size: 13px; color: #333333; line-height: 1.5; }
  .reveal { opacity: 1; transform: none; }
  table.metrics th, table.metrics td { border-color: #cccccc; color: #111111; }
  a, .src-link { color: #114488; border-color: #114488; }
  .contrib-bar { border-color: #999999; }
  .honesty, .formula { border-color: #999999; color: #333333; }
}

/* ── Reveal on scroll ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Dashboard metric groups (stacked, each with a subtitle + spacing) ── */
.metric-groups { gap: 30px; }
.mgroup-name { font-size: 15px; letter-spacing: 0.02em; text-transform: none; color: var(--txt); }

/* ── Page-level view tabs (header eyebrows switch dashboard vs rewards) ── */
.eyebrow[data-viewtab] { cursor: pointer; font-family: inherit; }
.eyebrow[data-viewtab]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── i18n: CJK-safe fonts + language switcher ─────────────────────────────
   The flywheel SVG sets font-family inline as a presentation attribute; a CSS
   rule wins over it, so this applies the CJK-aware stack there too (Latin still
   renders in Aeonik). */
#flywheel-svg-holder text { font-family: var(--font); }

/* Visually-hidden label text (kept for assistive tech). */
.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;
}

/* Language switcher in the nav — a compact select styled to match the nav. */
.lang-switch { display: inline-flex; align-items: center; }
.lang-switch select {
  font-family: var(--font);
  font-size: 13px;
  color: var(--n400);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 26px 5px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23A3A3A3' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.lang-switch select:hover { color: var(--txt); border-color: var(--n500); }
.lang-switch select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-switch option { color: #111; background: #fff; }
/* Show only the active view's sections. Each rule hides every view-scoped
   element whose data-view differs from the active body view (via :not), never
   touching the active ones — so their own layout (e.g. the dashboard grid) is
   preserved. Scales to any number of views without new pairwise rules. */
body[data-view="dashboard"] [data-view]:not([data-view="dashboard"]),
body[data-view="telecom"] [data-view]:not([data-view="telecom"]),
body[data-view="buyback"] [data-view]:not([data-view="buyback"]),
body[data-view="rewards"] [data-view]:not([data-view="rewards"]),
body[data-view="depin"] [data-view]:not([data-view="depin"]),
body[data-view="wmc"] [data-view]:not([data-view="wmc"]),
body[data-view="staking"] [data-view]:not([data-view="staking"]),
body[data-view="bridges"] [data-view]:not([data-view="bridges"]),
body[data-view="pools"] [data-view]:not([data-view="pools"]) { display: none; }

/* ── DePIN comparison table ── */
.depin-status { color: var(--n500); margin-bottom: 12px; }
.depin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); }
.depin-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.depin-table thead th {
  text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--n500); padding: 12px 14px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.depin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--txt); vertical-align: middle; }
.depin-table tbody tr:last-child td { border-bottom: none; }
.depin-table tbody tr:hover { background: var(--surface); }
.depin-table .num { text-align: right; white-space: nowrap; }
.depin-table .rank { color: var(--n500); font-variant-numeric: tabular-nums; }
.depin-table .tok { min-width: 200px; }
.depin-table .tok b { font-weight: 700; }
.depin-table .tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.depin-table .tname { color: var(--n400); margin-left: 4px; }
.depin-table .tcat {
  color: var(--n500); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  margin-left: 8px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 1px 8px;
}
.depin-table .pos { color: #4ade80; }
.depin-table .neg { color: #f87171; }
.depin-table .score { font-weight: 700; color: var(--accent); }
.depin-table tr.self { background: rgba(255, 245, 51, 0.06); }
.depin-table tr.self td { border-bottom-color: var(--line-2); }
.depin-table tr.self .tok b { color: var(--accent); }

/* ── Holders / Chains rail cards (per-network tables) ── */
.rail-holders-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.rh-total-val { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--white); line-height: 1; }
.rh-total-lbl { font-size: 12px; color: var(--n500); }
.rh-note { margin-top: 12px; line-height: 1.45; color: var(--n500); }
.rail-count {
  font-size: 12px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 1px 8px; margin-left: 4px;
}
.wnet { width: 100%; border-collapse: collapse; font-size: 13px; }
.wnet thead th {
  text-align: left; font-size: 10.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--n500); padding: 0 0 8px; border-bottom: 1px solid var(--line);
}
.wnet thead th.wn-val { text-align: right; }
.wnet td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.wnet tbody tr:last-child td { border-bottom: none; }
.wn-name { color: var(--txt); }
.wn-val { text-align: right; color: var(--txt); white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.wn-src { text-align: right; white-space: nowrap; }
.wn-src .src-link { color: var(--n500); }
.wn-src .src-link:hover { color: var(--accent); }
.wn-none { color: var(--n500); }
.wn-tag { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 0 6px; margin-left: 6px; }

/* ── Native World Mobile Chain tab ── */
.wmc-explore { margin-top: 40px; }
.wmc-explore .verify-links { max-width: 720px; }

/* ── Bordered link button (e.g. explorer link on the WMC tab) ── */
.link-btn {
  display: inline-block; margin-top: 20px; padding: 11px 20px;
  font-size: 14px; font-weight: 500; color: var(--txt);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.link-btn:hover { color: var(--accent); border-color: var(--accent); }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Legal / compliance callouts (added for Howey-risk briefing) ───────── */
.callout-legal {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-panel);
  background: var(--surface-2);
  color: var(--txt);
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  margin: 18px 0 0;
}
.callout-legal strong { color: var(--white); }
.callout-legal--hero { margin-top: 20px; max-width: 720px; }
.callout-legal--sim { margin: 14px 0 0; font-size: 14px; }
.legal-notice {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: 22px 24px;
  margin-bottom: 32px;
}
.legal-notice h4 {
  color: var(--accent);
  font-size: 15px;
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}
.legal-notice p {
  color: var(--n400);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 10px;
}
.legal-notice p:last-child { margin-bottom: 0; }
@media print { .callout-legal, .legal-notice { border-color: #999; } }