/* ─────────────────────────────────────────────────────────────────────────────
   Static explainer pages: /track-record, /telegram-price-alerts, /mcp-server.

   Server-rendered so a crawler or an answer engine reads the whole page from
   the first response (src/routes/seo-pages.ts). Tokens follow DESIGN.md: one
   acid accent spent on the primary action and the focus ring, --up/--down only
   for meaning, mono tabular numbers, 44px tap targets, one column on a phone.
   Loaded as /seo-pages.css?v=<fingerprint>, stamped by the route.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #0a0b0d; --surface: #101215; --surface-2: #16191d; --surface-3: #1d2126;
  --line: #24282e; --line-strong: #333941;
  --text: #eef1f4; --text-muted: #9aa3ad; --text-faint: #6b747e; --text-inverse: #0a0b0d;
  --accent: #c8ff00; --accent-dim: #9ec400; --accent-text: #d7ff4f;
  --up: #3fd07d; --down: #ff5c5c; --warn: #f0a53d;
  --warn-wash: rgba(240,165,61,0.12);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 180ms;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;
  --font-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --content-max: 880px;
}
:root[data-theme="light"] {
  --bg: #f4f5f6; --surface: #ffffff; --surface-2: #f0f1f3; --surface-3: #e7e9ec;
  --line: #dfe2e6; --line-strong: #c8ccd2;
  --text: #14171a; --text-muted: #545c65; --text-faint: #838c95; --text-inverse: #ffffff;
  --accent: #5b7a00; --accent-dim: #4a6400; --accent-text: #3f5600;
  --up: #12844b; --down: #cc2f2f; --warn: #a56412;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans); background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
a { color: var(--accent-text); text-underline-offset: 2px; }
a:hover { color: var(--text); }
.num, code, pre { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--text-muted); }

main { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--sp-4) calc(var(--sp-7) + 64px); }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
h1 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15;
  letter-spacing: -0.015em; margin: var(--sp-2) 0 var(--sp-3); }
.lede { color: var(--text-muted); max-width: 68ch; font-size: 16px; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25;
  letter-spacing: -0.01em; margin-bottom: var(--sp-3); }
h3 { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: var(--sp-2); }
section { margin-top: var(--sp-6); }
p + p { margin-top: var(--sp-3); }
p, li { max-width: 68ch; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); }
.card + .card { margin-top: var(--sp-3); }
.asof { margin-top: var(--sp-2); font-size: 13px; color: var(--text-muted); }
.asof time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* A plain statement the numbers support: not an alert, so no red. */
.honest { border-left: 3px solid var(--warn); background: var(--warn-wash); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.honest p { font-size: 15px; }

/* ── Tables: scroll inside themselves, never the page ─────────────────────── */
/* The fade on a clipped edge: two covers that scroll with the content hide two
   shadows that do not, so a shadow shows only where columns are cut off. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right / 32px 100% no-repeat local,
    linear-gradient(to right, var(--bg), transparent) left / 16px 100% no-repeat scroll,
    linear-gradient(to left, var(--bg), transparent) right / 16px 100% no-repeat scroll,
    var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: var(--sp-2) var(--sp-3); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; padding-left: var(--sp-4); }
th:last-child, td:last-child { padding-right: var(--sp-4); }
thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); border-bottom-color: var(--line-strong); }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }
.verdict { margin-top: var(--sp-2); font-size: 13px; color: var(--text-muted); }
.window + .window { margin-top: var(--sp-5); }
.window h3 { font-size: 15px; margin-bottom: 0; }
.sub { font-size: 13px; color: var(--text-muted); margin-bottom: var(--sp-2); }

/* ── Definition lists (method) ────────────────────────────────────────────── */
dl.method { display: grid; grid-template-columns: 1fr; gap: var(--sp-1) var(--sp-4); font-size: 14px; }
dl.method dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-top: var(--sp-3); }
dl.method dt:first-child { margin-top: 0; }

/* ── Steps ────────────────────────────────────────────────────────────────── */
ol.steps { list-style: none; display: grid; gap: var(--sp-3); counter-reset: s; }
ol.steps > li { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-3); align-items: start; }
ol.steps > li::before {
  counter-increment: s; content: counter(s);
  width: 32px; height: 32px; border-radius: var(--r-full); border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted);
}
ul.plain { padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
details.faq { border-bottom: 1px solid var(--line); }
details.faq > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-3); font-weight: 500; padding: var(--sp-2) 0; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-muted); }
details.faq[open] > summary::after { content: "\2212"; }
details.faq > p { padding-bottom: var(--sp-3); color: var(--text-muted); }

/* ── Code blocks ──────────────────────────────────────────────────────────── */
pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); overflow-x: auto; font-size: 13px; line-height: 1.5; }
code { font-size: 13px; }
p code, li code, td code { background: var(--surface-2); border-radius: var(--r-sm); padding: 1px 5px; }
.tools { list-style: none; display: grid; gap: var(--sp-2); }
.tools li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.tools li:last-child { border-bottom: 0; }
.tools .name { font-family: var(--font-mono); font-size: 14px; }
.tools .price { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tools .what { font-size: 14px; color: var(--text-muted); }

/* ── Actions ──────────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.btn, .btn2 {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding: 0 var(--sp-5); border-radius: var(--r-md); font: inherit; font-weight: 600; font-size: 15px;
  text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn { background: var(--accent); color: var(--text-inverse); }
.btn:hover { background: var(--accent-dim); color: var(--text-inverse); }
.btn2 { border: 1px solid var(--line-strong); color: var(--text); background: var(--surface); }
.btn2:hover { border-color: var(--text-muted); color: var(--text); }
.links { display: grid; gap: var(--sp-1); }
.links a { display: inline-flex; align-items: center; min-height: 44px; }
.fine { margin-top: var(--sp-6); font-size: 13px; color: var(--text-muted); }
.mt { margin-top: var(--sp-3); }

@media (min-width: 720px) {
  main { padding-top: var(--sp-6); }
  h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; }
  dl.method { grid-template-columns: 180px 1fr; }
  dl.method dt { margin-top: 0; }
  .tools li { grid-template-columns: 240px 1fr; column-gap: var(--sp-4); }
  .tools .price { grid-column: 1; }
  .tools .what { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}