/* ============================================================
   Finder · shared styles
   ============================================================ */

/* Self-hosted Inter (WOFF2 subset built by ``scripts/subset_inter.py``,
   ~62 KB each, Latin + Cyrillic + currency + punctuation). Replaces
   the previous Google Fonts CSS round-trip (fonts.googleapis.com
   + fonts.gstatic.com — two extra DNS/TLS hops on first paint).
   Same-origin fetch through ``/assets/fonts/`` cuts ~150-300 ms off
   first-visit LCP on cold connections.

   ``font-display: swap`` keeps the system-fallback render strategy
   (text shows immediately in the system stack, swaps in Inter the
   moment it's ready). Only Regular (400) and Bold (700) are subset;
   intermediate weights (500/600) are synthesised by the browser —
   acceptable for landing density (no display headings rely on a
   non-subset weight alone). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
}

:root {
  --bg-0: #0a0d12;
  --bg-1: #0e1218;
  --bg-2: #131822;
  --surface: #161c27;
  --surface-hi: #1a2230;
  --border: #1f2733;
  --border-hi: #2a3445;
  --text-1: #ecf0f5;
  --text-2: #aab4c2;
  /* ``text-3`` lifted from #6b7686 (~4.4:1 on --bg-0) → #828c9d
     (~5.3:1) so secondary copy on the SEO landing meets WCAG AA
     for small text (≥4.5:1 required at <18 px). Bulk of usage is
     metric labels, coin-card volume/markets meta, breadcrumbs —
     all small mono text. ``text-4`` lifted from #4a5466 → #5e6878
     (~3.5:1) — still below body-text AA but its role is dividers
     / disabled / decorative where AA doesn't apply, and the lift
     helps ``.ed-coin-rank``, network-table dashes, etc. read on
     surface backgrounds. */
  --text-3: #828c9d;
  --text-4: #5e6878;
  --mint: #72d5ba;
  --mint-dim: #4eb39a;
  --mint-glow: rgba(114, 213, 186, 0.15);
  --amber: #e0a956;
  --rose: #e57373;
  --green: #5fb978;
  --tg-blue: #5eaeff;
  --tg-link: #6cb6ff;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --max: 1140px;
  --max-narrow: 880px;
  --gutter: 24px;
  --section: 88px;
}
@media (max-width: 768px) { :root { --section: 56px; --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg-0); color: var(--text-1);
  line-height: 1.55; font-size: 15px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--gutter); }

.ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(800px circle at 15% 12%, rgba(114, 213, 186, 0.07), transparent 50%),
    radial-gradient(600px circle at 85% 30%, rgba(78, 179, 154, 0.04), transparent 50%);
}

/* ─── HEADER ─────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 13, 18, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.brand-mark {
  width: 22px; height: 22px; background: var(--mint); border-radius: 5px;
  display: grid; place-items: center; color: var(--bg-0);
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px;
}
.nav-links { display: flex; gap: 24px; align-items: center; font-size: 14px; color: var(--text-2); flex: 1; }
.nav-links > a { padding: 8px 0; }
.nav-links a:hover { color: var(--text-1); }
.nav-links a.active { color: var(--mint); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
@media (max-width: 900px) { .nav-links { display: none; } }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; color: var(--text-2); cursor: pointer; }
.nav-dropdown-trigger:hover { color: var(--text-1); }
/* Active state — mint colour to match ``.nav-links a.active``. Set
   on the trigger by ``partials/header.html`` when ``active_nav``
   matches the dropdown's section (``"tools"``, ``"arbitrage"``).
   Pre-2026-05-06 only the trigger TEXT got the class but no CSS
   rule existed, so the active dropdown looked identical to inactive
   ones (``/tools/exchanges/{slug}`` should highlight Tools). */
.nav-dropdown-trigger.active { color: var(--mint); }
.nav-dropdown-trigger svg { transition: transform 200ms ease; }
.nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: -16px;
  min-width: 280px;
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-menu a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--text-2);
}
.nav-dropdown-menu a:hover { background: var(--surface-hi); color: var(--text-1); }
.nav-dropdown-menu a.active { color: var(--mint); }
.nav-dropdown-menu .nav-pro {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  padding: 2px 5px;
  background: rgba(114, 213, 186, 0.15);
  color: var(--mint);
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.lang-switch { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.lang-switch a { padding: 4px 10px; border-radius: var(--radius-pill); color: var(--text-3); }
.lang-switch a.active { background: var(--mint); color: var(--bg-0); font-weight: 600; }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius);
  font-weight: 500; font-size: 14px;
  border: 1px solid transparent;
  transition: all 120ms ease; white-space: nowrap;
}
.btn-primary { background: var(--mint); color: var(--bg-0); box-shadow: 0 0 0 1px var(--mint), 0 8px 24px -8px var(--mint-glow); }
.btn-primary:hover { background: #82e2c8; transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--text-1); border: 1px solid var(--border-hi); }
.btn-secondary:hover { background: var(--surface-hi); border-color: #36425a; }
.btn-ghost { background: transparent; color: var(--text-2); padding: 8px 14px; }
.btn-ghost:hover { color: var(--text-1); }
.btn-arrow { transition: transform 200ms ease; }
.btn:hover .btn-arrow { transform: translateX(2px); }
.btn-lg { padding: 14px 22px; font-size: 15px; }

/* ─── HERO ───────────────────────────────────────────────── */
.hero { position: relative; z-index: 1; padding: calc(var(--section) - 16px) 0 var(--section); text-align: center; }
.hero.left { text-align: left; }
.hero.left .hero-cta { display: inline-flex; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border-hi);
  font-size: 12px; color: var(--text-2);
  font-family: 'JetBrains Mono', monospace; margin-bottom: 24px;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 2s ease-in-out infinite; }
.pill.amber .pill-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.pill.rose .pill-dot { background: var(--rose); box-shadow: 0 0 10px var(--rose); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

h1.hero-title {
  font-size: clamp(38px, 6.5vw, 64px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 22px;
  background: linear-gradient(180deg, var(--text-1) 0%, var(--text-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
h1 .accent { color: var(--mint); -webkit-text-fill-color: var(--mint); }
h1 .accent-amber { color: var(--amber); -webkit-text-fill-color: var(--amber); }
h1 .accent-rose { color: var(--rose); -webkit-text-fill-color: var(--rose); }

.hero-sub { max-width: 660px; margin: 0 auto 32px; font-size: clamp(15px, 1.5vw, 17px); color: var(--text-2); line-height: 1.6; }
.hero.left .hero-sub { margin-left: 0; }
.hero-sub strong { color: var(--text-1); font-weight: 600; }
.hero-cta { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hero-trust { margin-top: 22px; font-size: 12px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }

/* hero-metrics row (just under hero) */
.hero-metrics {
  display: inline-flex; gap: 32px;
  padding: 14px 28px;
  margin-top: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--text-2);
}
.hero-metrics .metric { display: flex; align-items: center; gap: 6px; }
.hero-metrics .metric .v { color: var(--text-1); font-weight: 600; }
@media (max-width: 600px) {
  .hero-metrics { flex-wrap: wrap; gap: 14px; padding: 12px 16px; border-radius: var(--radius-lg); }
}

/* ─── TICKER ─────────────────────────────────────────────── */
.ticker-wrap { position: relative; z-index: 1; margin: 0 auto var(--section); max-width: var(--max); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-1); overflow: hidden; }
.ticker-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.ticker-head-left { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.ticker-head-right { display: flex; gap: 18px; }
@media (max-width: 600px) { .ticker-head-right { display: none; } }
.ticker { display: flex; animation: scroll 60s linear infinite; gap: 0; }
.ticker:hover { animation-play-state: paused; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-item { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-right: 1px solid var(--border); flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.ticker-pair { color: var(--text-3); font-size: 11px; }
.ticker-buy { color: var(--text-2); }
.ticker-arrow { color: var(--text-4); }
.ticker-sell { color: var(--text-1); }
.ticker-spread { color: var(--mint); font-weight: 600; }
.ticker-spread.high { color: var(--amber); }
.ticker-spread.veryhigh { color: var(--rose); }
.ticker-profit { color: var(--text-3); font-size: 11px; }

/* ─── SECTIONS ───────────────────────────────────────────── */
section { position: relative; z-index: 1; padding: var(--section) 0; }
section + section { padding-top: 0; }
.eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--mint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.eyebrow.amber { color: var(--amber); }
.eyebrow.rose { color: var(--rose); }
h2.section-title { font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; max-width: 740px; margin-bottom: 14px; }
.section-sub { font-size: 16px; color: var(--text-2); max-width: 600px; margin-bottom: 40px; line-height: 1.65; }
.section-head { margin-bottom: 48px; }
.section-head.center { text-align: center; }
.section-head.center h2, .section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* ─── REVEAL ON SCROLL ──────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal-stagger.in-view > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.reveal-stagger.in-view > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.reveal-stagger.in-view > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.reveal-stagger.in-view > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { transition: none; opacity: 1; transform: none; }
}

/* ─── ARB-TYPE GRID (homepage hub) ──────────────────────── */
.arb-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.arb-type-card {
  display: block;
  padding: 24px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 200ms ease, transform 200ms ease;
  position: relative;
}
.arb-type-card:hover { border-color: var(--mint); transform: translateY(-2px); }
.arb-type-card .head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.arb-type-card .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mint);
  padding: 3px 8px;
  background: rgba(114, 213, 186, 0.08);
  border: 1px solid rgba(114, 213, 186, 0.2);
  border-radius: 4px;
}
.arb-type-card .tag.amber { color: var(--amber); background: rgba(224, 169, 86, 0.08); border-color: rgba(224, 169, 86, 0.2); }
.arb-type-card .tag.rose { color: var(--rose); background: rgba(229, 115, 115, 0.08); border-color: rgba(229, 115, 115, 0.2); }
.arb-type-card .pro {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  padding: 2px 6px;
  background: rgba(108, 182, 255, 0.12);
  color: var(--tg-link);
  border-radius: 3px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.arb-type-card h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 8px; color: var(--text-1);
}
.arb-type-card p {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
  margin-bottom: 16px;
}
.arb-type-card .meta {
  display: flex; gap: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-3);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.arb-type-card .meta .v { color: var(--text-1); font-weight: 600; }
.arb-type-card .arrow { position: absolute; top: 24px; right: 24px; color: var(--text-3); transition: color 200ms, transform 200ms; }
.arb-type-card:hover .arrow { color: var(--mint); transform: translate(2px, -2px); }
@media (max-width: 900px) { .arb-types { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .arb-types { grid-template-columns: 1fr; } }

/* ─── HOW-IT-WORKS (4 steps row) ─────────────────────────── */
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step-card {
  padding: 22px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
}
.step-card .step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--mint);
  margin-bottom: 14px; letter-spacing: 0.1em;
}
.step-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.step-card p { font-size: 13px; color: var(--text-2); line-height: 1.55; }
@media (max-width: 900px) { .steps-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .steps-row { grid-template-columns: 1fr; } }

/* ─── METRIC ROW (key numbers under hero) ───────────────── */
.metric-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.metric-cell { padding: 28px 20px; text-align: center; border-right: 1px solid var(--border); }
.metric-cell:last-child { border-right: none; }
.metric-cell .v { font-family: 'JetBrains Mono', monospace; font-size: clamp(24px, 3vw, 32px); font-weight: 600; color: var(--text-1); letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
.metric-cell .v .unit { color: var(--mint); margin-left: 2px; }
.metric-cell .l { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 600px) {
  .metric-row { grid-template-columns: 1fr; }
  .metric-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .metric-cell:last-child { border-bottom: none; }
}

/* ─── EXCHANGE LIST ──────────────────────────────────────── */
.exchanges {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 20px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.exchange-chip {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--text-2);
}
.exchange-chip:hover { color: var(--text-1); border-color: var(--mint); }

/* ─── 2-COL SHOWCASE ────────────────────────────────────── */
.showcase { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.showcase.flip { grid-template-columns: 1.1fr 1fr; }
.showcase.flip .showcase-text { order: 2; }
.showcase-text h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px; }
.showcase-text p { font-size: 15px; color: var(--text-2); line-height: 1.65; margin-bottom: 12px; }
.showcase-text strong { color: var(--text-1); font-weight: 600; }
.showcase-text ul { list-style: none; margin-top: 6px; }
.showcase-text ul li { padding: 6px 0 6px 20px; font-size: 14px; color: var(--text-2); position: relative; line-height: 1.55; }
.showcase-text ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 8px; height: 1px; background: var(--mint); }
@media (max-width: 900px) {
  .showcase, .showcase.flip { grid-template-columns: 1fr; gap: 32px; }
  .showcase.flip .showcase-text { order: 0; }
}

/* ─── TG WINDOW + MESSAGE ────────────────────────────────── */
.tg-window {
  background: linear-gradient(180deg, #0d1320 0%, #0a0f1a 100%);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(114,213,186,0.04);
}
.tg-window-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border); }
.tg-channel-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--mint), var(--mint-dim)); display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--bg-0); flex-shrink: 0; }
.tg-channel-avatar.dump { background: linear-gradient(135deg, var(--rose), #c95757); }
.tg-channel-avatar.amber { background: linear-gradient(135deg, var(--amber), #b88841); }
.tg-channel-info { flex: 1; min-width: 0; }
.tg-channel-name { font-size: 14px; font-weight: 600; color: var(--text-1); }
.tg-channel-meta { font-size: 11px; color: var(--text-3); }
.tg-body { padding: 16px; }

.tg-msg {
  max-width: 100%;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px;
  font-size: 14px; line-height: 1.6;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.6);
  color: var(--text-1);
}
.tg-msg + .tg-msg { margin-top: 12px; }
.tg-msg code { font-family: 'JetBrains Mono', monospace; background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.tg-msg .tg-link { color: var(--tg-link); text-decoration: underline; text-decoration-color: rgba(108,182,255,0.4); text-underline-offset: 2px; }
.tg-msg b { font-weight: 700; color: var(--text-1); }
.tg-msg .pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; line-height: 1.5;
  background: rgba(0,0,0,0.25);
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-1);
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre;
}
.tg-msg .pre .head { color: var(--text-3); }
.tg-msg .pre .anchor { color: var(--text-3); }
.tg-msg .pre .green { color: var(--mint); }
.tg-msg .pre .amber { color: var(--amber); }
.tg-msg .pre .red { color: var(--rose); }
.tg-msg .row-buy, .tg-msg .row-sell { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7; }
.tg-msg .ts { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); margin-top: 8px; }
.tg-msg .head-line { line-height: 1.6; margin-bottom: 6px; }
.tg-msg .net-block { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-2); margin-top: 8px; line-height: 1.7; }
.tg-msg .net-block .net-name { color: var(--tg-link); font-weight: 600; }
.tg-msg .meta-bottom { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; font-size: 10px; color: var(--text-4); font-family: 'JetBrains Mono', monospace; }
.tg-msg .tick { color: var(--tg-link); }
.tg-msg .dump-changes { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: rgba(0,0,0,0.25); padding: 6px 10px; border-radius: 6px; margin: 6px 0; color: var(--text-2); }
.tg-msg .dump-changes .red { color: var(--rose); font-weight: 600; }
.tg-msg .dump-target { font-size: 13px; color: var(--mint); margin-top: 8px; padding: 6px 10px; background: rgba(114,213,186,0.06); border-radius: 6px; border: 1px solid rgba(114,213,186,0.15); }

/* ─── DASHBOARD MOCK ─────────────────────────────────────── */
.dash-window {
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(114,213,186,0.04);
}
.dash-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-3);
}
.dash-dots { display: flex; gap: 6px; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-hi); }
.dash-tabs { display: flex; gap: 4px; margin-left: 12px; }
.dash-tab { padding: 4px 10px; border-radius: 4px; color: var(--text-3); }
.dash-tab.active { background: var(--surface); color: var(--mint); }
.dash-search { margin-left: auto; padding: 4px 10px; background: var(--bg-0); border: 1px solid var(--border); border-radius: 4px; color: var(--text-4); }

.dash-table { width: 100%; }
.dash-thead, .dash-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.9fr 0.8fr 0.8fr 0.7fr 0.5fr;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
}
.dash-thead {
  padding: 10px 16px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.dash-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  transition: background 200ms ease;
}
.dash-row:hover { background: rgba(114, 213, 186, 0.03); }
.dash-row:last-child { border-bottom: none; }
.dash-row.flash { animation: dashFlash 1.2s ease-out; }
@keyframes dashFlash {
  0% { background: rgba(114, 213, 186, 0.18); }
  100% { background: transparent; }
}
.dash-token { display: flex; align-items: center; gap: 8px; }
.dash-token-mark { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #4a5466, #2a3445); flex-shrink: 0; font-size: 9px; display: grid; place-items: center; color: var(--text-1); font-weight: 700; }
.dash-token-sym { color: var(--text-1); font-weight: 600; }
.dash-token-pair { color: var(--text-3); font-size: 10px; }
.dash-leg { color: var(--text-2); font-size: 11px; line-height: 1.3; }
.dash-leg-ex { color: var(--text-3); font-size: 10px; margin-bottom: 2px; }
.dash-spread { font-weight: 700; }
.dash-spread.med { color: var(--mint); }
.dash-spread.high { color: var(--amber); }
.dash-spread.veryhigh { color: var(--rose); }
.dash-net { color: var(--mint); font-weight: 600; }
.dash-net.amber { color: var(--amber); }
.dash-age { color: var(--text-4); font-size: 10px; }
.dash-nets { font-size: 10px; color: var(--text-3); }
@media (max-width: 800px) {
  .dash-thead, .dash-row { grid-template-columns: 1.2fr 0.8fr 0.6fr 0.5fr; }
  .dash-thead .col-sell, .dash-row .col-sell,
  .dash-thead .col-net, .dash-row .col-net,
  .dash-thead .col-nets, .dash-row .col-nets { display: none; }
}

/* ─── PRICING ────────────────────────────────────────────── */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.price-card { padding: 32px 28px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); position: relative; display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--mint); background: linear-gradient(180deg, rgba(114, 213, 186, 0.05), transparent 30%), var(--bg-1); transform: translateY(-4px); }
.price-badge { position: absolute; top: -10px; right: 24px; background: var(--mint); color: var(--bg-0); padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.price-name { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.price-tagline { font-size: 13px; color: var(--text-2); margin-bottom: 18px; line-height: 1.5; min-height: 40px; }
.price-amount { font-family: 'JetBrains Mono', monospace; font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; }
.price-amount .small { font-size: 15px; color: var(--text-3); font-weight: 400; }
.price-period { font-size: 12px; color: var(--text-3); margin-bottom: 22px; min-height: 18px; }
.price-period.save { color: var(--mint); }
.price-features { list-style: none; margin-bottom: 24px; flex: 1; }
.price-features li { padding: 8px 0; font-size: 13px; color: var(--text-2); display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px dashed var(--border); line-height: 1.5; }
.price-features li:last-child { border-bottom: none; }
.price-features svg { flex-shrink: 0; color: var(--mint); margin-top: 4px; }
.price-features li.dim { color: var(--text-4); }
.price-features li.dim svg { color: var(--text-4); }
.price-card .btn { width: 100%; justify-content: center; }
.save-banner {
  max-width: 1080px; margin: 0 auto 24px;
  padding: 10px 16px;
  background: rgba(114, 213, 186, 0.08);
  border: 1px solid rgba(114, 213, 186, 0.2);
  border-radius: var(--radius);
  font-size: 13px; color: var(--mint-dim);
  text-align: center;
}
.save-banner b { color: var(--mint); font-weight: 600; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 480px; } .price-card.featured { transform: none; } }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq { max-width: 720px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--border); padding: 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; text-align: left; font-size: 16px; font-weight: 500; color: var(--text-1); gap: 16px; }
.faq-q:hover { color: var(--mint); }
.faq-icon { transition: transform 200ms ease; color: var(--text-3); flex-shrink: 0; }
.faq-item[open] .faq-icon { transform: rotate(45deg); color: var(--mint); }
.faq-a { padding: 0 0 22px 0; font-size: 14px; color: var(--text-2); line-height: 1.7; max-width: 620px; }
summary { list-style: none; cursor: pointer; }
.faq-q::-webkit-details-marker { display: none; }

/* ─── RELATED-TYPES (cross-link bar) ─────────────────────── */
.related-types {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 32px;
}
.related-types a {
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-2);
  display: flex; justify-content: space-between; align-items: center;
  transition: border-color 150ms ease, color 150ms ease;
}
.related-types a:hover { border-color: var(--mint); color: var(--text-1); }
.related-types a .arrow { color: var(--text-4); }
.related-types a:hover .arrow { color: var(--mint); }
@media (max-width: 800px) { .related-types { grid-template-columns: 1fr; } }

/* ─── CTA ────────────────────────────────────────────────── */
.cta-strip { text-align: center; padding: 72px 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(600px circle at 50% 0%, rgba(114, 213, 186, 0.06), transparent 70%), var(--bg-1); }
.cta-strip h2 { margin: 0 auto 12px; max-width: 540px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.cta-strip p { color: var(--text-2); margin-bottom: 24px; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ─── FOOTER ─────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--border); padding: 48px 0 32px; margin-top: var(--section); position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
.foot-col h4 { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; font-weight: 600; }
.foot-col a { display: block; padding: 5px 0; font-size: 13px; color: var(--text-2); }
.foot-col a:hover { color: var(--text-1); }
.foot-brand { max-width: 320px; }
.foot-brand-text { font-size: 13px; color: var(--text-3); line-height: 1.6; margin-top: 12px; }
.foot-disclaimer { border-top: 1px solid var(--border); padding-top: 20px; font-size: 12px; color: var(--text-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
@media (max-width: 768px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ─── HERO BACKGROUND IMAGE ──────────────────────────────── */
/* assets/hero-bg.webp — 1448×1086 WebP @ q=80, ≈ 90 KB.
 * Original PNG was 1.5 MB; WebP gives 17× reduction with no visible
 * difference because the gradient overlay below covers 55–100 % of
 * the image. Browsers without WebP support (≈3.5 % globally — IE 11,
 * very old Android) fall back to the gradient over the surface
 * background, which still reads correctly thanks to ``var(--bg)`` on
 * ``body``. */
.hero {
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(
      180deg,
      rgba(10, 13, 18, 0.55) 0%,
      rgba(10, 13, 18, 0.65) 40%,
      rgba(10, 13, 18, 0.85) 80%,
      rgba(10, 13, 18, 1) 100%
    ),
    url('hero-bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Heavier overlay on data-dense hero variants where the page packs
   breadcrumb + h1 + multi-line blurb + summary + multiple buttons +
   a wide statbar into the hero. With the default 0.55 → 0.85 alpha
   the dashboard screenshot's "ARBITRAGE OPPORTUNITIES" / "SPREAD
   MONITOR" / "Bybit OPERATIONAL" text bled through and competed
   with the page's own copy (visible "Bybit OPERATIONAL" green tag
   landing right of the h1 "Binance" on /tools/exchanges/binance).
   Bumping the overlay to 0.92 → 1.0 keeps the texture as a faint
   atmospheric band without it acting as a competing data surface.
   Templates that need this opt in by adding ``hero-detail`` to the
   hero section's class list — used by ``tools/exchange_detail.html``.
   The marketing index hero keeps the lighter feel by NOT having the
   class. (Earlier version used ``:has(.ed-head)`` but that fails in
   browsers without ``:has()`` support and broke silently.) */
.hero.hero-detail::before {
  /* Compromise band: ~25% bg visibility at top fading to fully
     opaque by the statbar. Keeps the dashboard screenshot as a
     visible atmospheric texture (the page reads as a Finder
     product page, not a generic dark landing) without it
     competing with the h1 / blurb. The earlier 0.92 → 1.0 band
     killed the texture entirely and the hero felt sterile.
     Description card (``.ed-summary``, mid-hero) provides its
     own surface so it stays readable regardless of the band. */
  background-image:
    linear-gradient(
      180deg,
      rgba(10, 13, 18, 0.75) 0%,
      rgba(10, 13, 18, 0.85) 40%,
      rgba(10, 13, 18, 0.95) 80%,
      rgba(10, 13, 18, 1) 100%
    ),
    url('hero-bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Backdrop card behind the h1 + tagline so they stay readable when
   the bg image runs at higher opacity. A subtle radial fade centered
   on the title — no hard rectangle, just a soft "spotlight" so the
   text owns its area without an obvious panel border. The fade
   sits on the same z-layer as the gradient overlay (between bg
   image and content) so it adds to the dim without changing the
   stacking context of the breadcrumbs / blurb / summary card. */
.hero.hero-detail .ed-head {
  position: relative;
  /* New stacking context — keeps the radial fade ::before pseudo
     contained to ed-head's own z-layer instead of bubbling up and
     fighting with ``.hero::after`` (the vignette). */
  isolation: isolate;
}
.hero.hero-detail .ed-head::before {
  content: '';
  position: absolute;
  inset: -32px -64px;
  z-index: -1;
  background: radial-gradient(
    ellipse 70% 80% at 50% 45%,
    rgba(10, 13, 18, 0.75) 0%,
    rgba(10, 13, 18, 0.45) 50%,
    rgba(10, 13, 18, 0) 80%
  );
  pointer-events: none;
}
/* Subtle vignette to keep edges dark and centre readable */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 60% 50% at 50% 30%,
    transparent 0%,
    rgba(10, 13, 18, 0.4) 100%
  );
  pointer-events: none;
}

/* ─── EDUCATIONAL 2-COL ──────────────────────────────────── */
.edu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .edu-grid { grid-template-columns: 1fr; gap: 32px; } }
.edu-card {
  padding: 24px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.edu-card .head {
  font-size: 11px; color: var(--mint); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; margin-bottom: 16px;
}
.edu-card ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.edu-card ul li { display: flex; gap: 12px; align-items: flex-start; }
.edu-card ul li::before {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%; background: var(--mint);
  margin-top: 6px; flex-shrink: 0;
}
.edu-card .title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.edu-card .desc { font-size: 13px; color: var(--text-2); line-height: 1.55; }

/* ─── CASE STUDY ─────────────────────────────────────────── */
.case-compact {
  padding: 24px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 720px;
  margin: 0 auto;
}
.case-compact .head { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-start; }
.case-compact .icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(229,115,115,0.15), rgba(201,87,87,0.05));
  border: 1px solid rgba(229,115,115,0.3);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.case-compact .label { font-size: 11px; color: var(--rose); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 4px; }
.case-compact .title { font-size: 16px; font-weight: 600; color: var(--text-1); }
.case-compact .pnl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px; font-weight: 700;
  margin-bottom: 10px;
}
.case-compact .pnl .from { color: var(--text-3); }
.case-compact .pnl .arrow { color: var(--text-4); margin: 0 8px; }
.case-compact .pnl .to { color: var(--mint); }
.case-compact .desc { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-bottom: 14px; }
.case-compact .more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--mint);
}
.case-compact .more:hover { text-decoration: underline; }

.case-full {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start;
}
@media (max-width: 900px) { .case-full { grid-template-columns: 1fr; gap: 32px; } }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 24px; }
.case-stat { padding: 18px 8px; text-align: center; border-right: 1px solid var(--border); }
.case-stat:last-child { border-right: none; }
.case-stat .v { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600; line-height: 1; margin-bottom: 6px; }
.case-stat .v.rose { color: var(--rose); }
.case-stat .v.mint { color: var(--mint); }
.case-stat .l { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.case-pnl-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(114, 213, 186, 0.08), rgba(78, 179, 154, 0.04));
  border: 1px solid rgba(114, 213, 186, 0.3);
}
.case-pnl-card .label { font-size: 11px; color: var(--mint-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 8px; }
.case-pnl-card .big {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(28px, 4.5vw, 44px); line-height: 1;
  margin: 16px 0;
}
.case-pnl-card .big .from { color: var(--text-3); }
.case-pnl-card .big .arrow { color: var(--text-4); margin: 0 12px; }
.case-pnl-card .big .to { color: var(--mint); }
.case-pnl-card .desc { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.case-pnl-card .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--border); }
.case-pnl-card .meta .l { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.case-pnl-card .meta .v { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; }
.case-pnl-card .meta .v.mint { color: var(--mint); }
.case-disclaimer { margin-top: 16px; font-size: 12px; color: var(--text-4); line-height: 1.55; }

/* ─── TESTIMONIALS ───────────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card {
  padding: 20px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}
.testimonial-card .result {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--mint);
  margin-bottom: 12px;
}
.testimonial-card .text { font-size: 14px; color: var(--text-2); line-height: 1.6; flex: 1; }
.testimonial-card .link {
  margin-top: 16px;
  font-size: 12px;
  color: var(--tg-link);
  display: inline-flex; align-items: center; gap: 4px;
}
.testimonial-card .link:hover { color: var(--text-1); }

/* per-day price hint */
.price-perday {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  margin-top: -6px;
  margin-bottom: 16px;
}

/* ─── MISC HELPERS ───────────────────────────────────────── */
.text-center { text-align: center; }
.text-mute { color: var(--text-3); }

/* ─────────────────────────────────────────────────────────────────────
   /tools/exchanges/{slug} — extended detail page styles.
   Adds: comparison sparkline-bar, summary paragraph, real-time CTA,
   coin search input, live-price coin cards, compare-rivals cards,
   FAQ block, network-table scroll, mobile pass.
   ───────────────────────────────────────────────────────────────────── */

.ed-head { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; }
.ed-head h1 { margin: 0; font-size: clamp(28px, 4vw, 36px); letter-spacing: -0.01em; }
.ed-blurb {
  color: var(--text-1);
  font-size: 16px;
  line-height: 1.5;
  max-width: 720px;
  margin-top: 10px;
  font-weight: 500;
}

/* Auto-summary — concrete-numbers paragraph under the blurb. Solid
   surface card (not just a left-border) so the long sentence doesn't
   visually merge with the dimmed hero background — pre-2026-05-06 the
   right edge of the paragraph was over the still-visible dashboard
   screenshot decoration and the text washed out at the right margin. */
.ed-summary {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--mint);
  border-radius: 4px;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 760px;
}

.ed-meta-grid {
  display: grid;
  /* 4 fixed columns on desktop (coins / spot / perp / 24h vol). Mobile
     breakpoint below collapses to 2 cols. ``minmax(0, 1fr)`` lets the
     comparison sparkline-bar inside the first cell shrink without
     pushing the other 3 cells out of width. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 24px;
}
@media (max-width: 720px) {
  .ed-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ed-meta-cell { background: var(--surface); padding: 14px 16px; }
.ed-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ed-meta-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.ed-meta-value.muted { color: var(--text-3); font-weight: 500; }

/* Comparison sparkline-bar — sits inside the coins-tracked metric
   cell, shows ratio to the leader (e.g. MEXC's 2184 = 100% bar). */
.ed-comp-bar {
  position: relative;
  height: 14px;
  margin-top: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
  /* Native browser tooltip on the ``title`` attribute is the only
     hover hint by default — readers don't always discover it. The
     ``help`` cursor + dotted underline on the label below signal
     "hover for more" without needing a separate tooltip widget. */
  cursor: help;
}
.ed-comp-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--mint-dim), var(--mint));
  opacity: 0.5;
}
.ed-comp-bar-label {
  position: relative;
  display: block;
  padding: 1px 6px;
  font-size: 9px;
  color: var(--text-2);
  letter-spacing: 0.04em;
  z-index: 1;
  line-height: 12px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.20);
  width: fit-content;
}
.ed-comp-bar-leader { background: rgba(114,213,186,0.12); }

/* Metadata strip — tight inline row of non-market facts (network
   count, founding year, HQ). Visually subordinate to the stat grid
   above: no panel background, no border, just dimmed mono text on
   the page surface. Pre-2026-05-06 first iteration this had its own
   surface card which made it read as a separate widget — looked like
   a leftover ribbon detached from anything. The dot ``·`` separators
   come from rendered ``.ed-ms-sep`` spans (not CSS pseudo-elements)
   so the value is selectable and copies as plain text. */
.ed-meta-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-top: 10px;
  padding: 0 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
}
.ed-ms-item { display: inline-flex; align-items: baseline; gap: 6px; }
.ed-ms-label {
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9.5px;
}
.ed-ms-value {
  color: var(--text-2);
  font-weight: 600;
}
.ed-ms-value.muted { color: var(--text-3); font-weight: 500; }
.ed-ms-sep { color: var(--text-5, rgba(255,255,255,0.10)); user-select: none; }

/* Section heads — small h2 + count + optional CTA on the right */
.ed-section-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 40px 0 12px;
}
.ed-section-head h2 { font-size: 14px; font-weight: 600; color: var(--text-2); margin: 0; }
.ed-section-head .count {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-3);
}
/* Inline legend / hint that lives next to the count. Same mono
   font but lighter colour so it reads as a parenthetical, not as
   data. ``cursor: help`` + dotted underline signal the title-tooltip
   carries the longer explanation. */
.ed-section-hint {
  font-size: 10.5px;
  color: var(--text-4);
  border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
  cursor: help;
  margin-left: 4px;
}
.ed-realtime-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  background: rgba(114, 213, 186, 0.06);
  border: 1px solid rgba(114, 213, 186, 0.30);
  border-radius: 12px;
  color: var(--mint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 80ms, border-color 80ms;
}
.ed-realtime-cta:hover {
  background: rgba(114, 213, 186, 0.14);
  border-color: rgba(114, 213, 186, 0.55);
  color: var(--mint);
}
.ed-realtime-cta .ed-rc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(114,213,186,0.55);
  animation: ed-rc-pulse 2s infinite;
}
.ed-realtime-cta .ed-rc-text { color: var(--text-2); }
.ed-realtime-cta:hover .ed-rc-text { color: var(--text-1); }
@keyframes ed-rc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(114,213,186,0.50); }
  70%  { box-shadow: 0 0 0 6px rgba(114,213,186,0); }
  100% { box-shadow: 0 0 0 0 rgba(114,213,186,0); }
}

/* Snapshot indicator — ghost variant for new sections (top arb routes,
   etc) so it reads as a status chip, not a CTA. Pre-2026-05-06 we
   reused ``.ed-realtime-cta`` — its mint fill + pulsing dot competed
   with the header "Start trial" and hero "Official site" buttons as
   a third primary action in the hero zone. Same content (status dot
   + label + dashboard link), but quieter visual weight. The link
   inside still gets a subtle hover transition so the affordance is
   discoverable. */
.ed-snapshot-indicator {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 80ms, color 80ms;
}
.ed-snapshot-indicator:hover {
  border-color: var(--border-hi);
  color: var(--text-2);
}
.ed-snapshot-indicator .ed-si-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-4);
  /* Static — no pulse animation. The block updates every 5 min, not
     every tick, so a pulsing dot would mislead readers into thinking
     it's live-streaming. */
}
.ed-snapshot-indicator .ed-si-link {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.15);
  text-underline-offset: 2px;
  transition: color 80ms, text-decoration-color 80ms;
}
.ed-snapshot-indicator:hover .ed-si-link {
  color: var(--mint);
  text-decoration-color: var(--mint-dim);
}
.ed-snapshot-indicator svg { color: var(--text-4); }
.ed-snapshot-indicator:hover svg { color: var(--mint); }

/* Coin search input — narrowed to ~440 px max so it doesn't claim
   the full row width on desktop (visually weak signal that the
   filter applies to the grid below; pre-2026-05-06 the input
   stretched to 100 % which made it read as a primary action). The
   counter previously here moved into the ``.ed-section-head``
   above for a single source of truth (live-updated by the JS
   filter via ``#edCoinCount``). */
.ed-coin-search {
  margin-bottom: 14px;
}
/* Inline wrapper so the clear-button (×) can sit absolutely-positioned
   inside the input bounds. ``data-has-value`` is toggled by JS on
   each input event; CSS uses it to show/hide the button without an
   extra class flip. */
.ed-coin-search-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: block;
}
.ed-coin-search input {
  width: 100%;
  padding: 8px 36px 8px 12px;       /* right padding leaves room for × */
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
}
.ed-coin-search input:focus { border-color: var(--text-3); }
.ed-coin-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: none;                    /* shown only via data-has-value below */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  transition: background 80ms, color 80ms;
}
.ed-coin-search-clear:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-1);
}
.ed-coin-search-wrap[data-has-value] .ed-coin-search-clear { display: inline-flex; }

/* Coin grid — top-100 visible by default, .ed-coin-extra hidden via
   CSS until the search filter activates (then JS adds .is-search-active
   to the grid). Live-priced cards get a subtle mint glyph. */
.ed-coins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.ed-coins .ed-coin-extra { display: none; }
.ed-coins.is-search-active .ed-coin-extra { display: block; }
.ed-coin {
  display: block;
  position: relative;
  padding: 10px 14px;
  background: var(--surface);
  text-decoration: none;
  transition: background 80ms, box-shadow 80ms;
}
/* Hover: bump background slightly and add an inset mint border so the
   reader can see the cursor lock on a card. ``box-shadow inset`` is
   used over a real border so the card width doesn't shift by 1 px on
   hover (which would jiggle the rest of the grid). */
.ed-coin:hover {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(114, 213, 186, 0.35);
}
.ed-coin[hidden] { display: none; }

/* Rank chip — top-left corner, mono digits. Hidden while the search
   filter is active (the grid is no longer in volume order during a
   query, so a rank number would be misleading). */
.ed-coin-rank {
  position: absolute;
  top: 6px; left: 8px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.ed-coin:hover .ed-coin-rank { color: var(--text-3); }
.ed-coins.is-search-active .ed-coin-rank { display: none; }
/* Make room for the rank chip so the symbol text doesn't overlap it. */
.ed-coin .ed-coin-top { padding-left: 26px; }
.ed-coin .ed-coin-name { padding-left: 26px; }
.ed-coin .ed-coin-meta { padding-left: 26px; }
.ed-coins.is-search-active .ed-coin-top,
.ed-coins.is-search-active .ed-coin-name,
.ed-coins.is-search-active .ed-coin-meta { padding-left: 0; }
.ed-coin-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.ed-coin-sym { font-size: 12px; font-weight: 700; color: var(--text-1); letter-spacing: 0.3px; }
.ed-coin-price { font-size: 11.5px; font-weight: 600; color: var(--mint); }
.ed-coin-name {
  font-size: 11px; color: var(--text-3); margin: 2px 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ed-coin-meta {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 10px;
}
.ed-coin-vol { color: var(--text-2); font-weight: 600; }
.ed-coin-mkts { color: var(--text-4); }

.ed-coins-empty {
  padding: 20px; color: var(--text-3); font-size: 12px; text-align: center;
  border: 1px dashed var(--border); border-radius: 4px; margin-top: 8px;
}

/* Networks table — scroll wrapper for narrow viewports.
   Collapsible mode: rows past the 12th get class ``.ed-net-extra``
   and stay hidden until the user opts in via ``.ed-net-toggle``
   (which sets ``.is-expanded`` on the wrapper). Keeps the page
   from being a wall of 30-140 rows on major venues. */
.ed-net-scroll { overflow-x: auto; }
.ed-net-collapsible .ed-net-extra { display: none; }
.ed-net-collapsible.is-expanded .ed-net-extra { display: table-row; }
.ed-net-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 80ms, border-color 80ms, color 80ms;
}
.ed-net-toggle:hover {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--border-hi);
  color: var(--text-1);
}
.ed-net-toggle svg { transition: transform 200ms ease; }
.ed-net-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ed-net-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 360px; }
.ed-net-table th, .ed-net-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.ed-net-table th {
  color: var(--text-3); font-weight: 500; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ed-net-table td.net { color: var(--text-1); }
.ed-net-table td.frac { color: var(--text-2); }
.ed-frac-num { color: var(--mint); font-weight: 600; }

/* Compare table — side-by-side stats vs adjacent-rank rivals.
   Replaced the pre-2026-05-06 ``.ed-compare-grid`` card layout
   (showed only "{name}: N coins · $V 24h") with a 5-column table
   surfacing spot/perp split — denser and more useful when picking
   between similar venues.

   ``.cmp-current`` row carries the page's own exchange and gets a
   left mint border + slightly elevated background so the reader
   anchors to "where am I" before comparing rivals. */
.ed-compare-scroll { overflow-x: auto; }
.ed-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.ed-compare-table th,
.ed-compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.ed-compare-table th {
  color: var(--text-3);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', monospace;
}
.ed-compare-table tbody tr:last-child td { border-bottom: none; }
.ed-compare-table .cmp-num { text-align: right; color: var(--text-1); font-weight: 600; }
.ed-compare-table .cmp-num.muted { color: var(--text-4); font-weight: 500; }
.ed-compare-table .cmp-name { color: var(--text-1); }
.ed-compare-table .cmp-link {
  color: var(--text-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 80ms, border-color 80ms;
}
.ed-compare-table .cmp-link:hover {
  color: var(--mint);
  border-bottom-color: var(--mint-dim);
}
.ed-compare-table .cmp-current {
  background: rgba(114, 213, 186, 0.04);
  box-shadow: inset 3px 0 0 var(--mint);
}
.ed-compare-table .cmp-current strong { color: var(--text-1); }
.cmp-self-tag {
  margin-left: 8px;
  padding: 1px 6px;
  background: rgba(114, 213, 186, 0.10);
  color: var(--mint);
  border: 1px solid rgba(114, 213, 186, 0.30);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Top arbitrage routes — table form (similar density to networks
   table). Highlights "self" leg with a mint underline so a reader
   sees instantly which side this exchange sits on for each route. */
.ed-arb-scroll { overflow-x: auto; }
.ed-arb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 540px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.ed-arb-table th,
.ed-arb-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.ed-arb-table th {
  color: var(--text-3);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', monospace;
}
.ed-arb-table tbody tr:last-child td { border-bottom: none; }
.ed-arb-table .ar-num { text-align: right; color: var(--text-1); font-weight: 600; }
.ed-arb-table .ar-spread { color: var(--mint); }
.ed-arb-table .ar-asset-link {
  color: var(--text-1);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 80ms, border-color 80ms;
}
.ed-arb-table .ar-asset-link:hover {
  color: var(--mint);
  border-bottom-color: var(--mint-dim);
}
.ar-route { color: var(--text-2); white-space: nowrap; }
.ar-leg { color: var(--text-2); }
.ar-leg-self {
  color: var(--mint);
  border-bottom: 1px dotted rgba(114, 213, 186, 0.50);
}
.ar-arrow { color: var(--text-4); margin: 0 6px; }
.ed-arb-footnote {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.018);
  border-left: 2px solid var(--border-hi);
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
  font-family: 'JetBrains Mono', monospace;
}
.ed-arb-footnote strong {
  color: var(--text-1);
  font-weight: 700;
}
.ed-arb-footnote a {
  color: var(--mint);
  text-decoration: underline;
  text-decoration-color: var(--mint-dim);
  text-underline-offset: 2px;
}
.ed-arb-footnote a:hover { color: var(--mint); text-decoration-color: var(--mint); }
.ed-arb-table .tag-fut {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(168, 144, 208, 0.10);
  color: var(--purple, #a890d0);
  border: 1px solid rgba(168, 144, 208, 0.30);
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
  vertical-align: 1px;
}

/* Recent listings — small grid of new-ticker events on this venue.
   Same visual rhythm as ``.ed-coins`` (border-collapse via 1 px
   gap on a border-coloured grid background) so the page reads as
   a single cohesive set of card grids rather than a mix of grid +
   table styles.

   Column count adapts to the actual event count via ``data-count``:
   pre-2026-05-06 ``auto-fill, minmax(220px, 1fr)`` left trailing
   empty grid cells when we had only 3 events on a desktop viewport
   (5 columns → 2 empty). The CSS attribute selectors below cap the
   grid at ``data-count`` columns so 3 events fill 3 columns (no
   empty trailing cells), and 8+ events fall through to the default
   auto-fill layout. */
.ed-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.ed-listings[data-count="1"] { grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); justify-content: start; }
.ed-listings[data-count="2"] { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.ed-listings[data-count="3"] { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.ed-listings[data-count="4"] { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
.ed-listing {
  display: block;
  padding: 12px 14px;
  background: var(--surface);
  text-decoration: none;
  transition: background 80ms, box-shadow 80ms;
}
.ed-listing:hover {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(114, 213, 186, 0.35);
}
.ed-listing-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.ed-listing-sym {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.3px;
}
.ed-listing-upcoming {
  margin-left: auto;
  padding: 1px 6px;
  background: rgba(224, 169, 86, 0.10);
  color: var(--amber, #e0a956);
  border: 1px solid rgba(224, 169, 86, 0.30);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ed-listing-name {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-listing-meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10px;
}
.ed-listing-ticker { color: var(--text-2); }
.ed-listing-when { color: var(--text-4); }

/* External-link row. ``Official site`` gets the primary mint chip,
   the rest (Fees / X-Twitter / CoinGecko) are secondary outline.
   Pre-2026-05-06 all four buttons used the same ghost outline so the
   primary outbound (the exchange's own homepage) had no visual lead —
   readers had to scan all 4 to find it. */
.ed-links { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.ed-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-3);
  font-size: 12px;
  text-decoration: none;
  transition: background 80ms, border-color 80ms, color 80ms;
}
.ed-link:hover {
  background: rgba(255,255,255,0.025);
  color: var(--text-1);
  border-color: var(--border-hi);
}
.ed-link-primary {
  background: rgba(114, 213, 186, 0.10);
  border-color: rgba(114, 213, 186, 0.40);
  color: var(--mint);
  font-weight: 600;
  padding: 7px 14px;
  font-size: 12.5px;
}
.ed-link-primary:hover {
  background: rgba(114, 213, 186, 0.18);
  border-color: rgba(114, 213, 186, 0.65);
  color: var(--mint);
}

/* FAQ — same compact look as token-page faq */
.ed-faq { display: flex; flex-direction: column; gap: 1px; background: var(--border);
          border: 1px solid var(--border); border-radius: 4px; }
.ed-faq-item { background: var(--surface); }
.ed-faq-item summary {
  cursor: pointer; padding: 12px 16px;
  font-size: 13px; font-weight: 600; color: var(--text-1);
  list-style: none;
  position: relative;
}
.ed-faq-item summary::after {
  content: '+'; position: absolute; right: 16px; top: 12px;
  color: var(--text-3); font-size: 16px; line-height: 1;
  transition: transform 120ms ease;
}
.ed-faq-item[open] summary::after { content: '−'; }
.ed-faq-item summary:hover { color: var(--mint); }
.ed-faq-item summary::-webkit-details-marker { display: none; }
.ed-faq-a { padding: 0 16px 14px; color: var(--text-2); font-size: 13px; line-height: 1.55; }

/* Utility colour — used inline in compare stats */
.t-3 { color: var(--text-3); }

/* ── Mobile responsive ────────────────────────────────────────
   Pre-2026-05-06 the page had only ``.ed-meta-grid`` and
   ``.ed-coins`` mobile rules. Phase 4 extends coverage to the new
   sections (top arb table, recent listings grid, compare table,
   metadata strip, hero links) and tightens the 480 px band so a
   phone-portrait viewport (≤412 px) doesn't feel cramped. */
@media (max-width: 720px) {
  .ed-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-coins { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ed-section-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .ed-realtime-cta {
    margin-left: 0; align-self: stretch;
    justify-content: center;
  }
  .ed-coin-search input { max-width: none; }
  .ed-compare-grid { grid-template-columns: 1fr; }

  /* Hero copy + summary card collapse to full width with tighter
     padding so a 360-px phone screen doesn't waste 32 px of side
     gutter on the description card. */
  .ed-blurb { font-size: 14.5px; max-width: 100%; }
  .ed-summary { padding: 12px 14px; font-size: 13px; }

  /* External-link row wraps with smaller buttons. The primary
     "Official site" stays slightly larger so it remains the
     visual lead even on narrow widths. */
  .ed-link { padding: 5px 10px; font-size: 11.5px; }
  .ed-link-primary { padding: 6px 12px; font-size: 12px; }

  /* Metadata strip — stacks vertically with separator dots becoming
     less prominent (they read as decoration, not as content
     boundaries, on a single-column layout). */
  .ed-meta-strip { gap: 6px 12px; padding: 8px 12px; font-size: 10.5px; }

  /* Recent listings grid — 2 cols on tablet, 1 col on phone (≤480 px
     band below). Compare table + arb table fall through to their
     intrinsic ``min-width`` and trigger horizontal scroll inside
     ``.ed-arb-scroll`` / ``.ed-compare-scroll``. */
  .ed-listings { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  /* Tighten table cell padding on narrow viewports so the horizontal
     scroll feels less wasteful. */
  .ed-arb-table th, .ed-arb-table td,
  .ed-compare-table th, .ed-compare-table td {
    padding: 8px 10px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .ed-meta-grid { grid-template-columns: 1fr 1fr; }
  .ed-coins { grid-template-columns: 1fr 1fr; }
  .ed-coin { padding: 8px 10px; }
  .ed-coin-sym { font-size: 11px; }
  .ed-coin-name { font-size: 10px; }
  .ed-coin .ed-coin-top,
  .ed-coin .ed-coin-name,
  .ed-coin .ed-coin-meta { padding-left: 22px; }
  .ed-coin-rank { font-size: 8.5px; top: 5px; left: 6px; }

  /* Listings — single column at phone-portrait so each row is full
     width (the auto-fill 180-min would force 2 cols at ≤412 px and
     the symbol + market chip + upcoming pill don't fit cleanly). */
  .ed-listings { grid-template-columns: 1fr; }

  /* Hero link row — primary stretches to 100 % so the main CTA is
     unambiguous at thumb-tap target sizes. Secondary links wrap
     beneath. */
  .ed-link-primary { width: 100%; justify-content: center; }
}