/* sma200.trade — minimal modern styles, no framework deps */

:root {
  --bg: #0b0e16;
  --bg-elev: #131725;
  --bg-card: #1a1f30;
  --ink: #e9ecf3;
  --ink-dim: #9aa3b8;
  --ink-very-dim: #5d6479;
  --green: #4ade80;
  --green-bg: #14532d;
  --red: #f87171;
  --red-bg: #4c1d24;
  /* Brand orange — sampled from logo source (#FD8B2D).
     RESTRICTED to: primary CTA buttons (Check, Notify me, Open an account,
     Try TradingView), the .trade dot in the logo wordmark, and emphasis
     text in the disclaimer banner. Was previously over-applied to links,
     numbered badges, arrow links — those all moved to neutral ink tones
     so the orange retains signal value when it appears. */
  --accent: #fd8b2d;
  --accent-hover: #ffa15a;
  --border: #232940;
  --radius: 10px;

  /* Type stack (surgical typographic refresh, May 15 2026):
     - sans for body, nav, buttons, status pills, h3+
     - serif (Roboto Slab) for h1/h2 page hierarchy
     - mono (JetBrains Mono) for quantitative content (prices, %, dates,
       tickers in tiles, deltas, the watermark). NEVER for prose.
     Mono is the loudest signal that this is a precision instrument.
     Fallbacks chosen to minimize CLS during font swap. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-serif: "Roboto Slab", Georgia, "Times New Roman", ui-serif, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Slab serif reserved for top-level page hierarchy only (h1, h2).
   h3/h4 stay sans so deep section subdivisions don't get visually loud. */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Mono utility — apply directly to elements showing quantitative data.
   Uses tabular-nums so columns of numbers align cleanly even at variable
   weight (the JetBrains Mono glyphs are already fixed-width but this
   forces consistent alignment across browsers and OS fallback renderers). */
.numeric, .font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Links: orange retired as default link color. Body-prose links now use
   ink with underline as the affordance cue; orange returns on hover as
   the interaction signal. Nav links override below. */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-very-dim); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }

/* topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: block;
  height: 32px;
  width: 32px;
  /* Mark is already on dark bg in source PNG; no recoloring needed */
}
.brand-tld { color: var(--accent); }
/* Nav links override the global underline+orange-hover pattern — they're
   navigation utilities, not body-prose calls-to-action, so they stay quiet. */
.topbar nav a {
  color: var(--ink-dim);
  margin-left: 24px;
  text-decoration: none;
}
.topbar nav a:hover { color: var(--ink); text-decoration: none; }

/* disclaimer banner — orange-emphasis text is one of the three approved
   uses of brand orange (per the May 15 typographic discipline pass) */
.disclaimer-banner {
  background: #2a1f0a;
  color: #d4c0a0;
  font-size: 13px;
  padding: 10px 28px;
  border-bottom: 1px solid #3a2a14;
  text-align: center;
}
.disclaimer-banner strong { color: var(--accent); }
.disclaimer-banner a {
  color: #f2c879;
  margin-left: 8px;
  text-decoration: none;
}
.disclaimer-banner a:hover { color: var(--accent-hover); text-decoration: underline; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 28px 80px;
}

/* hero / search */
.hero { text-align: center; padding: 24px 0 40px; }
.hero h1 {
  /* font-family slab inherited from global h1 rule */
  font-size: 44px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hero .lede {
  font-size: 18px;
  color: var(--ink-dim);
  max-width: 720px;
  margin: 0 auto 32px;
}
.hl { color: var(--green); }
.hl-red { color: var(--red); }

.search {
  display: flex; gap: 8px; justify-content: center;
  max-width: 560px; margin: 0 auto;
}
.search input {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 14px 18px;
  font-size: 18px;
  border-radius: var(--radius);
  outline: none;
  text-transform: uppercase;
}
.search input:focus { border-color: var(--accent); }
.search button {
  background: var(--accent);
  color: var(--bg);
  border: 0;
  font-weight: 700;
  font-size: 16px;
  padding: 0 24px;
  border-radius: var(--radius);
  cursor: pointer;
}
.search button:hover { filter: brightness(1.1); }
.search-hint { text-align: center; color: var(--ink-very-dim); margin-top: 16px; font-size: 14px; }
/* Example ticker links — formerly orange (overloaded the accent). Now neutral
   with mono treatment since they're ticker symbols (data), with underline
   as the affordance. Orange returns on hover as the interaction signal. */
.search-hint a {
  margin: 0 4px;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-very-dim);
  text-underline-offset: 2px;
}
.search-hint a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }

/* explainer block — educational section between hero and top-list */
.explainer-block {
  margin-top: 56px;
  padding: 32px 28px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.explainer-block h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  text-align: center;
  letter-spacing: -0.01em;
}
.explainer-intro {
  text-align: center;
  margin: 0 0 28px !important;
  font-size: 14px;
}
.explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.explainer-card {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid var(--border);
}
/* Numbered "1/2/3" badges on the homepage explainer cards. Demoted from
   orange to neutral as part of the May 15 orange-discipline pass — color
   was carrying too many jobs and losing signal value. Now a quiet
   inverted-ink chip; the number itself does the work. */
.explainer-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
.explainer-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 8px;
  color: var(--ink);
}
.explainer-card p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0;
}
.explainer-card p strong { color: var(--ink); }
.explainer-card .hl { color: var(--green); }
.explainer-card .hl-red { color: var(--red); }
.explainer-cta {
  text-align: center;
  margin: 0;
  color: var(--ink-dim);
  font-size: 14px;
}
.explainer-cta a {
  color: var(--accent);
  font-weight: 600;
  margin-left: 6px;
  white-space: nowrap;
}

/* top-list grid */
.top-list { margin-top: 56px; }
.top-list h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px;
}
.muted { color: var(--ink-dim); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.card {
  display: flex;
  flex-direction: column;
  position: relative;          /* containing block for absolute .card-mark */
  overflow: hidden;            /* clip the big watermark to card edges */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.card:hover { border-color: #3a4262; transform: translateY(-1px); text-decoration: none; }
.card.long { border-left: 4px solid var(--green); }
.card.flat { border-left: 4px solid var(--ink-very-dim); }
.card.unavailable { opacity: 0.5; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; position: relative; z-index: 1; }
/* Ticker symbol on home grid card — treated as quantitative content, so mono. */
.card-sym {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
}
.card-status { font-size: 13px; color: var(--ink-dim); font-weight: 600; }
.card-label { color: var(--ink-dim); font-size: 13px; margin-top: 2px; position: relative; z-index: 1; }
.card-stats {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
/* "Close" / "vs SMA200" labels inside .card-stats are descriptive, not data — stay sans. */
.card-stats span.muted { font-size: 12px; display: block; font-family: var(--font-sans); font-weight: 400; }
/* Big semi-transparent wordmark watermark anchored bottom-right of each card.
   Purpose: organic attribution that survives screenshot crops. Sits behind
   data via z-index so it never competes with readability. Tunable knobs:
     font-size: 28px (bigger = more visible in screenshots)
     opacity: 0.08 (lower = subtler, higher = more obvious)
   Add 'transform: rotate(-8deg)' for a slanted watermark vibe. */
.card-mark {
  position: absolute;
  bottom: 6px;
  right: 12px;
  margin: 0;
  padding: 0;
  z-index: 0;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--ink);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

/* per-ticker detail */
.ticker-detail {
  position: relative;          /* containing block for absolute .ticker-mark */
  overflow: hidden;            /* clip the big watermark to card edges */
  isolation: isolate;          /* new stacking context so z-index:-1 watermark stays inside */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
}
.ticker-detail.is-long { border-top: 4px solid var(--green); }
.ticker-detail.is-flat { border-top: 4px solid var(--red); }
.ticker-head { margin-bottom: 16px; }
/* Big watermark anchored in the airy top zone of the card — behind the SPY title
   and pill, NOT behind the dense stat tiles below. That's the only region on the
   ticker card with enough negative space for a watermark to read. */
.ticker-mark {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  z-index: -1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(44px, 10vw, 120px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--ink);
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}
/* Small always-legible corner mark — guaranteed attribution even if the big
   watermark gets cropped out of a screenshot. Top-right, subtle but readable. */
.ticker-mark-corner {
  position: absolute;
  top: 16px;
  right: 22px;
  margin: 0;
  padding: 0;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-very-dim);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
@media (max-width: 600px) {
  .ticker-mark { top: 80px; }
  .ticker-mark-corner { top: 12px; right: 14px; font-size: 18px; }
}
/* Ticker page h1 — per the typographic refresh this is a heading, so slab
   serif (inherited from the global h1 rule above). Local override to bump
   the font weight to the available Roboto Slab 700 and tune sizing. */
.symbol { font-size: 64px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.long-name { color: var(--ink-dim); margin-top: 6px; font-size: 16px; }
.status-pill {
  display: inline-block;
  font-weight: 800;
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 999px;
  margin: 16px 0 28px;
}
.is-long .status-pill { background: var(--green-bg); color: var(--green); }
.is-flat .status-pill { background: var(--red-bg); color: var(--red); }
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.stat { background: var(--bg-elev); padding: 16px; border-radius: var(--radius); }
.stat-label { color: var(--ink-very-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
/* Stat values are the largest quantitative content on a ticker page — mono treatment
   makes them feel like instrument readouts rather than display copy. */
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  margin-top: 4px;
}
.stat-value.pos { color: var(--green); }
.stat-value.neg { color: var(--red); }
.close-explainer {
  background: var(--bg-elev);
  border-left: 3px solid var(--ink-very-dim);
  padding: 14px 18px;
  margin: 20px 0 0;
  border-radius: 4px;
  font-size: 14px;
  text-align: left;
}
.close-explainer p { color: var(--ink-dim); margin: 0 0 8px; }
.close-explainer p:last-child { margin-bottom: 0; }
.close-explainer strong { color: var(--ink); }
.close-explainer em { color: var(--ink); font-style: normal; font-weight: 600; }
/* close-explainer link inherits the global underlined-ink treatment now */
.close-explainer a { /* inherits from global a rule */ }

.explanation { text-align: left; margin-top: 24px; }
.explanation h3 { font-size: 18px; margin: 0 0 8px; }

/* Related-ticker blocks (LETF underlying / leveraged siblings).
   Used to build a fully bidirectional link graph between underlyings and
   their 2x/3x bull-leveraged counterparts — both for user navigation AND
   for SEO via internal linking depth. */
.related-block {
  text-align: left;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.related-block h3 { font-size: 18px; margin: 0 0 8px; }
.related-block p.muted { color: var(--ink-dim); margin: 0 0 16px; font-size: 14px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.related-card {
  display: block;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.related-card:hover { border-color: #3a4262; transform: translateY(-1px); text-decoration: none; }
.related-card.long { border-left: 3px solid var(--green); }
.related-card.flat { border-left: 3px solid var(--red); }
.related-card.unavailable { opacity: 0.55; }
.related-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.related-sym {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.related-status { font-size: 12px; color: var(--ink-dim); font-weight: 600; }
.related-status-mini { font-size: 11px; color: var(--ink-dim); font-weight: 600; }
.related-leverage {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-very-dim);
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.related-name { color: var(--ink-dim); font-size: 12px; margin-bottom: 8px; }
.related-stats {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
}
/* Labels inside the stats row ("vs SMA200") are descriptive — stay sans. */
.related-stats .muted { font-family: var(--font-sans); font-weight: 400; }
.related-stats .pos { color: var(--green); }
.related-stats .neg { color: var(--red); }
/* Arrow-style "View page →" links — formerly orange, now neutral.
   Arrow + label is the affordance; color demotion clears the orange
   for actual CTAs. */
.related-go { color: var(--ink-dim); font-size: 12px; margin-top: 8px; }
.related-card:hover .related-go { color: var(--accent-hover); }

.actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn, .btn-secondary {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}
.btn { background: var(--accent); color: var(--bg); }
.btn-secondary { background: var(--bg-elev); color: var(--ink); border: 1px solid var(--border); }
.btn:hover, .btn-secondary:hover { text-decoration: none; filter: brightness(1.08); }

.big-disclaimer {
  background: var(--bg-elev);
  border-left: 3px solid var(--ink-very-dim);
  padding: 16px 20px;
  margin-top: 32px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--ink-dim);
}
.big-disclaimer strong { color: var(--ink); }

/* prose pages */
.prose { max-width: 720px; margin: 0 auto; }
.prose h1 { font-size: 36px; margin: 0 0 24px; }
.prose h2 { font-size: 22px; margin: 32px 0 10px; }
.prose p, .prose ul { color: var(--ink); font-size: 16px; }
.prose ul { padding-left: 20px; }
.prose .strong { background: var(--bg-elev); padding: 16px 20px; border-left: 3px solid var(--accent); border-radius: 4px; }
.muted-small { color: var(--ink-very-dim); font-size: 13px; line-height: 1.5; }
.lede { color: var(--ink); font-size: 17px; line-height: 1.55; }

/* /brokers page — affiliate partner cards. Designed to read like a comparison
   written by a practitioner, not an affiliate farm. Honest framing, breathing
   room, clear CTA per entry. */
.brokers-page { max-width: 760px; }
.broker-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0 40px;
}
.broker-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.broker-card-head { margin-bottom: 14px; }
.broker-card-head h2 { font-size: 24px; margin: 0 0 4px; letter-spacing: -0.01em; }
.broker-best-for {
  margin: 0;
  color: var(--ink-dim);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.broker-cat {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-very-dim);
  background: var(--bg-elev);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 700;
}
.broker-best-for-text { color: var(--ink-dim); }
.broker-best-for-text strong { color: var(--ink); }
.broker-strengths {
  margin: 14px 0;
  padding-left: 20px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
.broker-strengths li { margin-bottom: 8px; }
.broker-strengths li:last-child { margin-bottom: 0; }
.broker-tradeoff {
  color: var(--ink-dim);
  font-size: 14px;
  margin: 14px 0 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--ink-very-dim);
  background: var(--bg-elev);
  border-radius: 4px;
}
.broker-tradeoff strong { color: var(--ink); }
.broker-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.broker-bonus {
  margin: 0;
  color: var(--ink-dim);
  font-size: 13px;
  flex: 1 1 240px;
  min-width: 0;
}

/* Affiliate banner partial. Used at end of /learn articles + footer of long
   pages. Bounded sizing, lazy-loaded, labeled as sponsored. NOT decorative —
   it's an honest paid placement and we mark it as such for visitor trust. */
.affiliate-banner {
  margin: 40px auto 24px;
  text-align: center;
}
.affiliate-banner-link {
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 100%;
  border: 1px solid var(--border);
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.affiliate-banner-link:hover { transform: translateY(-1px); border-color: #3a4262; }
.affiliate-banner-link img { display: block; max-width: 100%; height: auto; }
.affiliate-banner-label {
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--ink-very-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* FTC disclosure block — rendered at end of /learn articles when the article
   contains affiliate links. Visually distinct (small, dim, italic) so readers
   immediately register "this is a disclosure," not body content. */
.affiliate-disclosure {
  margin: 24px 0 0;
  padding: 12px 14px;
  background: var(--bg-elev);
  border-radius: var(--radius);
  border-left: 2px solid var(--ink-very-dim);
}

/* subscribe strip (footer-adjacent) */
.subscribe-strip {
  margin-top: 64px;
  /* Subtle warmth tint hinting at brand orange without screaming it */
  background: linear-gradient(180deg, rgba(253,139,45,0.03), rgba(253,139,45,0.06));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 28px;
}
.subscribe-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.subscribe-pitch { flex: 1 1 320px; }
.subscribe-pitch strong { display: block; font-size: 16px; }
.subscribe-pitch .muted { font-size: 13px; }
.subscribe-form {
  display: flex; gap: 8px; min-width: 320px; flex: 1 1 320px;
}
.subscribe-form input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 14px;
  font-size: 15px;
  border-radius: var(--radius);
  outline: none;
}
.subscribe-form input:focus { border-color: var(--accent); }
.subscribe-form button {
  background: var(--accent); color: var(--bg);
  border: 0; font-weight: 700; padding: 0 18px;
  border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.subscribe-form button:hover { filter: brightness(1.1); }
.subscribe-result {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--ink-dim);
  min-height: 18px;
}
.subscribe-result[data-state="success"] { color: var(--green); }
.subscribe-result[data-state="error"] { color: var(--red); }

/* ko-fi embed page */
.kofi-embed {
  margin: 24px 0;
  border-radius: var(--radius);
  overflow: hidden;
}

/* /learn — article index + single article styles */
.learn-header { text-align: center; margin: 16px 0 40px; }
.learn-header h1 { font-size: 44px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.02em; }
.learn-header .lede { color: var(--ink-dim); font-size: 17px; max-width: 640px; margin: 0 auto; }

.learn-list { display: grid; gap: 16px; max-width: 800px; margin: 0 auto; }
.learn-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.08s ease;
}
.learn-card:hover { border-color: #3a4262; transform: translateY(-1px); text-decoration: none; }
.learn-card h2 { font-size: 22px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.learn-meta { color: var(--ink-very-dim); font-size: 13px; margin: 0 0 12px; }
.learn-summary { color: var(--ink-dim); margin: 0 0 12px; line-height: 1.55; font-size: 15px; }
/* "Read article →" affordance — arrow does the work, color stays neutral.
   Hover bumps to accent-hover (orange) as the interaction signal. */
.learn-link { color: var(--ink-dim); font-weight: 600; font-size: 14px; text-decoration: none; }
.learn-card:hover .learn-link { color: var(--accent-hover); }

.learn-article { max-width: 720px; margin: 0 auto; }
.learn-breadcrumb { margin-bottom: 24px; }
.learn-breadcrumb a { color: var(--ink-dim); font-size: 14px; }
.learn-article-head { margin-bottom: 36px; }
.learn-article-head h1 {
  font-size: 36px; font-weight: 700; margin: 0 0 12px;
  letter-spacing: -0.02em; line-height: 1.2;
}
.learn-prose { color: var(--ink); font-size: 16px; line-height: 1.7; }
.learn-prose h2 {
  font-size: 24px; font-weight: 700; margin: 40px 0 12px;
  letter-spacing: -0.01em; line-height: 1.3;
}
/* h3+ stays on the body sans per the typographic refresh — only h1/h2 go slab. */
.learn-prose h3 { font-family: var(--font-sans); font-size: 19px; font-weight: 700; margin: 28px 0 10px; }
.learn-prose p { margin: 0 0 18px; }
.learn-prose ul, .learn-prose ol { margin: 0 0 18px; padding-left: 22px; }
.learn-prose li { margin: 0 0 6px; }
.learn-prose strong { color: var(--ink); font-weight: 700; }
.learn-prose em { font-style: italic; }
.learn-prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.learn-prose hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }
.learn-prose blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  color: var(--ink-dim);
  font-style: italic;
}
.learn-prose table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; margin: 24px 0;
  background: var(--bg-elev);
  border-radius: var(--radius);
  overflow: hidden;
}
.learn-prose thead { background: var(--bg-card); }
.learn-prose th, .learn-prose td {
  /* Article tables are inherently numeric (price comparisons, backtest stats,
     year-by-year deltas). Mono treatment with tabular-nums makes columns
     align cleanly and reads as instrument output, not display copy. */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.learn-prose th { font-weight: 600; color: var(--ink); }
.learn-prose td:not(:first-child), .learn-prose th:not(:first-child) { text-align: right; }
.learn-prose tr:last-child td { border-bottom: 0; }
.learn-prose code {
  background: var(--bg-elev); color: var(--ink);
  padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}
.learn-prose pre {
  background: var(--bg-elev);
  padding: 16px; border-radius: var(--radius);
  overflow-x: auto; margin: 24px 0;
}
.learn-prose pre code { background: none; padding: 0; font-size: 13px; }

.learn-article-foot { margin-top: 48px; }
.learn-article-foot .big-disclaimer { font-size: 13px; padding: 14px 18px; }
.learn-article-foot .actions { margin-top: 28px; }

/* footer */
footer {
  margin-top: 0;
  border-top: 1px solid var(--border);
  padding: 24px 28px;
}
.foot-row {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between;
  color: var(--ink-very-dim); font-size: 13px;
}
.foot-row a { color: var(--ink-dim); }

@media (max-width: 600px) {
  .hero h1 { font-size: 32px; }
  .symbol { font-size: 48px; }
  main { padding: 32px 16px 60px; }
  .topbar { padding: 14px 16px; }
}