/* ============================================
   Cowlpane — Financial Markets & Crypto News
   ============================================ */

/* Screen-reader only — visually hidden but accessible to crawlers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CSS Custom Properties — Dark (default) */
:root {
  /* Surface */
  --color-bg: #0a0e1a;
  --color-bg-secondary: #0d1220;
  --color-card: #0f1725;
  --color-card-hover: #162035;
  --color-surface: var(--color-card);

  /* Text */
  --color-text: #e8edf5;
  --color-text-secondary: #8899b0;
  --color-text-muted: #7390a6; /* raised from #4d6070 — was 2.9:1, now 5.2:1 on #0a0e1a (WCAG AA) */
  --color-muted: var(--color-text-muted);

  /* Structure */
  --color-border: #1a2d42;
  --color-shadow: rgba(0, 0, 0, 0.45);
  --color-shadow-hover: rgba(0, 0, 0, 0.65);

  /* Brand accents */
  --color-accent: #00d4ff;
  --color-accent-orange: #d4642a;

  /* ── Canonical signal tokens — single source of truth ─────────────────
     --c-accent : electric cyan   #00d4ff  brand signature
     --c-up     : signal green    #00e09a  gains / positive moves
     --c-down   : signal rose-red #ff3860  losses / negative moves
     All financial direction colour in the sheet derives from these three.
     Never override with inline hex — extend via color-mix() if needed.   */
  --c-accent:    #00d4ff;
  --c-up:        #00e09a;
  --c-up-glow:   rgba(0, 224, 154, 0.40);
  --c-down:      #ff3860;
  --c-down-glow: rgba(255, 56, 96, 0.35);

  /* Legacy aliases — kept for backwards compat, point to canonical tokens */
  --color-price-up:      var(--c-up);
  --color-price-up-glow: var(--c-up-glow);
  --color-price-down:    var(--c-down);

  /* Ticker bar (stays dark in both themes) */
  --color-ticker-bg: #050b14;
  --color-ticker-border: #162030;
  --color-ticker-text: #b8cce0;

  /* Background dot texture */
  --color-dot: rgba(255, 255, 255, 0.028);

  --section-markets: #00c853;
  --section-crypto: #f7931a;
  --section-trading: #FF9500;
  --section-economy: #34C759;
  --section-tech: #6366f1;
  --section-stocks: #007AFF;

  --ticker-height: 36px;
  --header-height: 64px;
  --gutter: 1.25rem;

  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── Semantic typography tokens ───────────────────────────────────────────
     Use these in component rules — not --font-serif / --font-mono directly.
     Swapping a typeface means changing one line here, nothing else.
     --font-headline : editorial display  — hero titles, article h1/h2/h3, card titles
     --font-ui       : interface text     — nav, labels, badges, meta, body copy
     --font-data     : tabular data       — every price, delta, ticker, numeral     */
  --font-headline: var(--font-body);
  --font-ui:       var(--font-body);
  --font-data:     var(--font-mono);

  /* Radius scale */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-base: 8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* Spacing scale — 4px base unit */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shadows — compose over --color-shadow for theme adaptability */
  --shadow-xs:    0 1px 3px var(--color-shadow);
  --shadow-sm:    0 2px 8px var(--color-shadow);
  --shadow-md:    0 4px 16px var(--color-shadow);
  --shadow-lg:    0 8px 32px var(--color-shadow);
  --shadow-xl:    0 16px 48px var(--color-shadow-hover);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.45);

  /* Type scale — rem values, base 16px */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.125rem;   /* 18px */
  --text-2xl:  1.25rem;    /* 20px */
  --text-3xl:  1.5rem;     /* 24px */
  --text-4xl:  2rem;       /* 32px */
  --text-5xl:  2.5rem;     /* 40px */

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.75;

  /* Font weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Z-index scale */
  --z-base:      0;
  --z-raised:    1;
  --z-overlay:   100;
  --z-sticky:    101;
  --z-modal:     999;
  --z-drawer:    1100;
  --z-toast:     2000;
  --z-modal-top: 10000;
  --z-cmdbar:    10001;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  --max-width: 1200px;
  --content-width: 720px;
}

/* Light Mode — warm newsprint system */
html[data-theme="light"] {
  /* Surface */
  --color-bg: #fafaf8;
  --color-bg-secondary: #f0efe8;
  --color-card: #ffffff;
  --color-card-hover: #f7f6f0;

  /* Text — slate ink */
  --color-text: #1c1917;
  --color-text-secondary: #44403c;
  --color-text-muted: #78716c;

  /* Structure */
  --color-border: #e5e0d5;
  --color-shadow: rgba(28, 25, 23, 0.07);
  --color-shadow-hover: rgba(28, 25, 23, 0.14);

  /* Brand accents — gold */
  --color-accent: #d4a017;
  --color-accent-orange: #b83000;

  /* Signal tokens — tuned for legibility on cream background */
  --c-up:        #007a52;
  --c-up-glow:   transparent;
  --c-down:      #c8192e;
  --c-down-glow: transparent;

  /* Legacy aliases */
  --color-price-up:      var(--c-up);
  --color-price-up-glow: var(--c-up-glow);
  --color-price-down:    var(--c-down);

  /* Dot texture — subtle on cream */
  --color-dot: rgba(0, 0, 0, 0.033);
}

/* GPU-accelerated theme transition — active only during the 0.25s switch */
html.theme-transitioning,
html.theme-transitioning * {
  transition:
    background-color 0.25s ease,
    color            0.25s ease,
    border-color     0.25s ease !important;
}

/* ============================================
   Theme Switch
   ============================================ */
/* ── Theme toggle — icon button, sun/moon crossfade + spring rotation ───────── */
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--radius-base);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
  border-color: rgba(0, 0, 0, 0.07);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.theme-toggle:active {
  transform: scale(0.88) !important;
  transition-duration: 60ms !important;
}

.theme-icon {
  position: absolute;
  pointer-events: none;
  transition:
    opacity   0.22s ease,
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark mode (default): sun is visible — click to go light */
.theme-icon--sun  { opacity: 1; transform: rotate(0deg)   scale(1);   }
.theme-icon--moon { opacity: 0; transform: rotate(-60deg) scale(0.4); }

/* Light mode: moon is visible — click to go dark */
html[data-theme="light"] .theme-icon--sun  { opacity: 0; transform: rotate(60deg)  scale(0.4); }
html[data-theme="light"] .theme-icon--moon { opacity: 1; transform: rotate(0deg)   scale(1);   }

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--color-dot) 1px, transparent 1px);
  background-size: 28px 28px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease, color 0.3s ease;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Global keyboard-focus safety net — WCAG 2.4.7 Focus Visible (Level AA).
   Applies only on keyboard navigation; overridden by component-specific rules. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Tabular numerics — all price/delta/ticker/timestamp elements ────────────
   font-data (JetBrains Mono) guarantees equal-width glyphs; tabular-nums
   forces proportional fonts to align decimal points in data columns too.   */
.ticker-item,
.ticker-price,
.ticker-pct,
.ticker-item .change,
.tmodal-price,
.tmodal-chg,
.tmodal-stat-val,
.market-price,
.market-change,
.mc-price,
.mc-delta,
.fms-price,
.fms-chg,
.sdmc-rank,
.sdmc-price,
.sdmc-chg,
.sdmc-cap,
.sdmi-price,
.sdmi-chg,
.sdmi-sym,
.apm-price,
.apm-delta,
.cs-chg,
.cmdk-price-val,
.cmdk-delta,
.article-date,
.card-date,
.card-read-time,
.article-read-time,
.price-cell,
.delta-cell,
mark.data-hl {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Defensive: time elements are not links — no underline */
time { text-decoration: none; }

/* ============================================
   Price Ticker Strip
   ============================================ */
.price-ticker {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--ticker-height);
  background: var(--color-ticker-bg);
  border-bottom: 1px solid var(--color-ticker-border);
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.ticker-label {
  flex-shrink: 0;
  padding: 0 12px 0 14px;
  font-size: 10px;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.12em;
  color: var(--color-accent);
  text-transform: uppercase;
  border-right: 1px solid var(--color-ticker-border);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ticker-live-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-price-up);
  flex-shrink: 0;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  /* rgb() matches --c-up: #00e09a = rgb(0, 224, 154) */
  0%   { box-shadow: 0 0 0 0   rgba(0, 224, 154, 0.75); }
  65%  { box-shadow: 0 0 0 6px rgba(0, 224, 154, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(0, 224, 154, 0);    }
}

.ticker-inner {
  flex: 1;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker-scroll 45s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  font-family: var(--font-mono);
  color: var(--color-ticker-text);
  cursor: pointer;
  background: none;
  border: none;
  height: var(--ticker-height);
  border-radius: 0;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.ticker-item:hover { background: rgba(255,255,255,0.07); }
.ticker-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.ticker-sep {
  padding: 0 2px;
  color: var(--color-ticker-border);
  font-size: 14px;
  user-select: none;
  pointer-events: none;
}

.ticker-sym {
  color: #dde8f5;
  font-weight: var(--weight-bold);
  font-size: 11px;
  letter-spacing: 0.03em;
}
.ticker-price { color: #c8d8ea; display: inline-block; overflow: hidden; vertical-align: middle; min-width: 6ch; }
.ticker-pct   { display: inline-block; overflow: hidden; vertical-align: middle; min-width: 5.5ch; }
.ticker-chg { display: inline-flex; align-items: center; gap: 2px; }
.ticker-arrow { font-size: 9px; line-height: 1; }

.ticker-up .ticker-pct   { color: var(--color-price-up); text-shadow: 0 0 8px var(--color-price-up-glow); }
.ticker-down .ticker-pct { color: var(--color-price-down); }
.ticker-up .ticker-arrow   { color: var(--color-price-up); }
.ticker-down .ticker-arrow { color: var(--color-price-down); }

.tk-skel {
  color: transparent !important;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  animation: tk-pulse 1.5s ease-in-out infinite;
  min-width: 52px;
  display: inline-block;
}
@keyframes tk-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.ticker-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 18px;
  font-family: var(--font-ui);
  font-size: 10px;
  white-space: nowrap;
  text-decoration: none;
  color: #3a5070;
  transition: color 0.15s;
}
.ticker-sponsor-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
}
.ticker-sponsor strong { color: #507090; font-weight: var(--weight-bold); }
.ticker-sponsor:hover strong { color: #8aa8c0; }

.ticker-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 100%;
  border-left: 1px solid var(--color-ticker-border);
  font-size: 10px;
  white-space: nowrap;
}
.ticker-updated { color: #2e4560; }
.ticker-attribution {
  color: #3a5070;
  text-decoration: none;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.ticker-attribution:hover { color: #8aa0b8; }

@media (max-width: 520px) {
  .ticker-meta { display: none; }
}

/* ============================================
   Price Chart Modal
   ============================================ */
.ticker-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-top);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tmodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 20, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tmodal-card {
  position: relative;
  width: min(520px, 100%);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 72px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  animation: tmodal-in 0.26s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes tmodal-in {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.tmodal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
}
.tmodal-hgroup { display: flex; align-items: baseline; gap: 10px; }
.tmodal-sym {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.tmodal-name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}
.tmodal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.tmodal-close:hover { color: var(--color-text); background: var(--color-bg-secondary); }
.tmodal-prices {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0.875rem 1.25rem 0.75rem;
}
.tmodal-price {
  font-family: var(--font-mono);
  font-size: 1.875rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.tmodal-delta {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.tmodal-up   { color: var(--color-price-up);   background: color-mix(in srgb, var(--color-price-up)   14%, transparent); }
.tmodal-down { color: var(--color-price-down);  background: color-mix(in srgb, var(--color-price-down) 14%, transparent); }
.tmodal-chart-wrap {
  position: relative;
  height: 130px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.tmodal-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tmodal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.tmodal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-top: 1px solid var(--color-border);
}
.tmodal-stat {
  background: var(--color-card);
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tmodal-stat-label {
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.tmodal-stat-val {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.tmodal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1.25rem;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.tmodal-src {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.tmodal-markets-link {
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.tmodal-markets-link:hover { opacity: 0.8; }

/* ============================================
   Header
   ============================================ */
.site-header {
  position: sticky;
  top: var(--ticker-height);
  z-index: var(--z-overlay);
  background: rgba(10, 14, 26, 0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), background 0.4s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

html[data-theme="light"] .site-header {
  background: rgba(250, 250, 248, 0.93);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text);
  transition: opacity var(--transition-fast);
}
.site-logo:hover { opacity: 0.82; }

/* ── Inline SVG logo ── */
.site-logo-svg {
  height: 28px;
  width: auto;
  display: block;
  overflow: visible;
}

/* Motion logo — C-arc draws itself on page load */
.logo-arc {
  stroke-dasharray: 52;
  animation: logo-draw 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.logo-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-dot-in 0.35s ease 0.52s both;
}
.logo-wordmark-text {
  animation: logo-text-in 0.4s ease 0.25s both;
}
@keyframes logo-draw {
  from { stroke-dashoffset: 52; }
  to   { stroke-dashoffset: 0; }
}
@keyframes logo-dot-in {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes logo-text-in {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-arc         { animation: none; stroke-dashoffset: 0; }
  .logo-dot         { animation: none; opacity: 1; transform: none; }
  .logo-wordmark-text { animation: none; opacity: 1; transform: none; }
}

/* ── Footer wordmark SVG ── */
.footer-wm-svg {
  height: 30px;
  width: auto;
  display: block;
}

.site-nav { display: flex; flex: 1; justify-content: flex-end; }
.nav-list { display: flex; list-style: none; gap: 0.25rem; }

.nav-link {
  display: block;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  white-space: nowrap;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.nav-link:hover, .nav-link:focus {
  color: var(--color-text);
  border-bottom-color: var(--section-color, var(--color-border));
  background: rgba(255,255,255,0.04);
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link:focus {
  background: rgba(0,0,0,0.04);
}

/* ── Active nav link ──────────────────────────────────────────────────────── */
.nav-list .nav-link.is-active {
  color: var(--section-color, var(--color-accent));
  border-bottom-color: var(--section-color, var(--color-accent));
}

/* ── Nav dropdown ─────────────────────────────────────────────────────────── */
.has-drop { position: relative; }

.nav-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 155px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px var(--color-shadow);
  padding: 0.375rem 0;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 300;
}

.has-drop:hover .nav-drop,
.has-drop:focus-within .nav-drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-drop-link {
  display: block;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text-secondary);
  border-left: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.nav-drop-link:hover {
  color: var(--section-color, var(--color-accent));
  border-left-color: var(--section-color, var(--color-accent));
  background: rgba(255,255,255,0.04);
}
html[data-theme="light"] .nav-drop-link:hover { background: rgba(0,0,0,0.04); }

/* Chevron icon */
.nav-chevron {
  display: inline-block;
  margin-left: 2px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.has-drop:hover .nav-chevron,
.has-drop:focus-within .nav-chevron { transform: rotate(180deg); }

/* Race of the Bots — stacked label + subtitle */
.nav-link--bots {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.nav-bots-tag {
  font-size: 0.55rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(168,85,247,0.65);
  margin-top: 2px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.hamburger {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav-toggle[aria-expanded="true"] .hamburger:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   Main & Containers
   ============================================ */
main { flex: 1; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }

/* ============================================
   Scroll Animations
   ============================================ */
/* Generic reveal — section-page cards and other one-off elements */
.anim-entry {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.anim-entry.is-visible { opacity: 1; transform: translateY(0); }

/* Homepage section-blocks: block itself is always visible; stagger the grid children */
.section-block.anim-entry {
  opacity: 1;
  transform: none;
  transition: none;
}
.section-block .editorial-grid > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.section-block.is-visible .editorial-grid > *:nth-child(1) { opacity: 1; transform: none; }
.section-block.is-visible .editorial-grid > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.section-block.is-visible .editorial-grid > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .anim-entry { opacity: 1; transform: none; transition: none; }
  .section-block .editorial-grid > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   Carousel Hero
   ============================================ */
.carousel-hero {
  position: relative;
  width: 100%;
  height: clamp(480px, 72vh, 680px);
  overflow: hidden;
  background: #050d1a;
}
.carousel-hero:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}

/* Slow-moving mesh gradient — GPU composited, 5% opacity, no JS */
.carousel-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(0, 212, 255, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 85% 75%, rgba(99, 102, 241, 0.06) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 55% 10%, rgba(0, 224, 154, 0.04) 0%, transparent 60%);
  animation: mesh-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mesh-drift {
  from { transform: scale(1)    rotate(0deg); }
  to   { transform: scale(1.08) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-hero::before { animation: none; }
}

.ch-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.ch-slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.ch-title-link {
  color: inherit;
  text-decoration: none;
}
.ch-title-link:hover { opacity: 0.88; }

.ch-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ch-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Section-color editorial overlay on hero photos — same system as card-media */
.ch-bg:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--section-color, var(--c-accent)) 32%, transparent) 0%,
    color-mix(in srgb, var(--section-color, var(--c-accent)) 10%, transparent) 38%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}
/* Hero fallback shares the chart-art visual language from .card-placeholder */
.ch-bg-gradient {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--section-color, #f7931a) 52%, #030912) 0%,
    #030912 100%
  );
}
.ch-bg-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(20% - 0.5px),
      rgba(255, 255, 255, 0.035) calc(20% - 0.5px),
      rgba(255, 255, 255, 0.035) 20%
    ),
    radial-gradient(ellipse at 80% 25%,
      color-mix(in srgb, var(--section-color, #f7931a) 28%, transparent) 0%,
      transparent 50%
    );
}
.ch-bg-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--section-color, #f7931a) 20%, transparent) 0%,
    color-mix(in srgb, var(--section-color, #f7931a)  6%, transparent) 100%
  );
  clip-path: polygon(
    0%   78%,
    10%  58%,
    20%  66%,
    32%  42%,
    42%  55%,
    54%  30%,
    64%  42%,
    74%  22%,
    84%  34%,
    94%  18%,
    100% 24%,
    100% 100%,
    0%   100%
  );
}

/* Radial glow — follows mouse via JS, uses section-color */
.ch-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 680px;
  max-height: 680px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--section-color, var(--c-accent)) 30%, transparent) 0%,
    color-mix(in srgb, var(--section-color, var(--c-accent))  8%, transparent) 48%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  will-change: left, top;
  left: 28%;
  top: 65%;
}
@media (prefers-reduced-motion: reduce) {
  .ch-glow { display: none; }
}

.ch-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(5,13,26,0.93) 0%,
    rgba(5,13,26,0.58) 38%,
    rgba(5,13,26,0.12) 72%,
    transparent 100%
  );
}

.ch-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4rem);
  padding-left: max(clamp(1.25rem, 5vw, 4rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1.25rem, 5vw, 4rem), env(safe-area-inset-right, 0px));
  max-width: 860px;
  box-sizing: border-box;
  z-index: 2;
}

.ch-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--section-color, #f7931a);
  padding: 0.3rem 0.875rem;
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
}

.ch-title {
  font-family: var(--font-headline);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: var(--weight-extrabold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 0.875rem;
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

.ch-excerpt {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 58ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ch-cta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Shared CTA base */
.ch-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s, background 0.2s, border-color 0.2s;
}

/* Primary CTA — solid section-color */
.ch-cta--primary {
  color: #fff;
  background: var(--section-color, #f7931a);
  border: 1px solid transparent;
}
.ch-cta--primary:hover {
  opacity: 0.88;
  transform: translateX(3px);
  color: #fff;
}

/* Glass CTA — frosted / semi-transparent */
.ch-cta--glass {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ch-cta--glass:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.42);
  transform: translateX(3px);
  color: #fff;
}

/* Dot progress indicators */
.ch-dots {
  position: absolute;
  bottom: 1.625rem;
  right: clamp(1.25rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 3;
}
.ch-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, width 0.3s;
  position: relative;
  overflow: hidden;
}
.ch-dot--active {
  width: 28px;
  background: rgba(255,255,255,0.3);
}
.ch-dot--active::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: #fff;
  border-radius: var(--radius-full);
  animation: ch-dot-fill 8s linear forwards;
}
@keyframes ch-dot-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ============================================
   Partner Spotlight
   ============================================ */
.partner-spotlight {
  background-color: #060c18;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent, transparent 14px,
    rgba(255,255,255,0.013) 14px, rgba(255,255,255,0.013) 15px
  );
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 2rem 0 2.25rem;
}
html[data-theme="light"] .partner-spotlight {
  background-color: #edeae0;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent, transparent 14px,
    rgba(0,0,0,0.02) 14px, rgba(0,0,0,0.02) 15px
  );
}
.partner-spotlight-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.partner-spotlight-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.partner-section-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
html[data-theme="light"] .partner-section-label { color: var(--color-text-muted); }
.partner-section-sub {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  opacity: 0.65;
}
.partner-disclosure-notice {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  line-height: 1.5;
}
html[data-theme="light"] .partner-disclosure-notice {
  border-left-color: rgba(0, 0, 0, 0.1);
}

/* 4-column grid */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Card */
.partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.375rem 1.25rem 1.25rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1),
    box-shadow 0.28s ease,
    border-color 0.2s;
}
.partner-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pc, var(--color-accent));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.partner-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow:
    0 20px 48px -8px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--pc, var(--color-accent));
  border-color: var(--pc, var(--color-accent));
}

/* "Sponsored" chip */
.partner-sponsored-tag {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 0.5625rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  line-height: 1.6;
}

/* 80×80 logo mark */
.partner-logo {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.partner-card:hover .partner-logo { transform: scale(1.06); }
.partner-logo span {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: var(--weight-black);
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.partner-logo.abacus,  .sw-partner-logo.abacus   { background: linear-gradient(145deg, #a78bfa, #7c3aed); }
.partner-logo.rootseven, .sw-partner-logo.rootseven { background: linear-gradient(145deg, #2a5298, #1e3a5f); }

/* Text */
.partner-body { flex: 1; }
.partner-name {
  display: block;
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: 0.3125rem;
}
.partner-prop {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* CTA button */
.partner-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--pc, var(--color-accent)) 14%, transparent);
  color: var(--pc, var(--color-accent));
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  width: fit-content;
  transition: background 0.15s, color 0.15s;
}
.partner-card:hover .partner-cta {
  background: var(--pc, var(--color-accent));
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .partner-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.875rem;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
  .partner-card {
    scroll-snap-align: start;
    flex: 0 0 264px;
  }
}

/* Inline affiliate links in article body */
.affiliate-inline {
  border-bottom: 1px dashed var(--color-text-muted);
}
.affiliate-inline::after {
  content: "\00a0(Ad)";
  font-size: 0.7em;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  vertical-align: super;
  letter-spacing: 0;
}

/* ============================================
   Homepage Sections
   ============================================ */
.homepage-sections {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.section-block {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}

/* section-title styles defined below with eyebrow label system */

.section-link {
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}
.section-link:hover {
  color: var(--section-color, var(--color-text));
  transform: translateX(3px);
}

/* ============================================
   Article Cards — 4-column grid
   ============================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--color-border);
  border-radius: var(--radius-base);
  overflow: hidden;
}

@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
}

.article-card {
  background: var(--color-card);
  overflow: hidden;
  border-left: 3px solid transparent;
  display: flex;
  flex-direction: column;
  transition:
    border-left-color 0.18s ease,
    background       0.18s ease,
    transform        0.26s cubic-bezier(0.34, 1.2, 0.64, 1),
    box-shadow       0.26s ease,
    opacity          0.22s ease;
  will-change: transform;
  position: relative;
}
.article-card:hover {
  border-left-color: var(--section-color, #d4642a);
  background: var(--color-card-hover);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 30px -4px var(--color-shadow-hover);
}

.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
/* ── Card media ─────────────────────────────────────────────────────────────
   Visual language: photography as primary, section-color overlay creates
   editorial cohesion across varied Unsplash stock photos.                   */
.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--section-color, var(--color-accent)) 10%, var(--color-card));
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}
.article-card:hover .card-media img { transform: scale(1.05); }

/* Section-color editorial overlay — diagonal corner wash, photo shows through */
.card-media:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--section-color, var(--c-accent)) 28%, transparent) 0%,
    color-mix(in srgb, var(--section-color, var(--c-accent)) 8%, transparent)  42%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--transition-base);
}
.article-card:hover .card-media:has(img)::after {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--section-color, var(--c-accent)) 38%, transparent) 0%,
    color-mix(in srgb, var(--section-color, var(--c-accent)) 12%, transparent) 42%,
    transparent 65%
  );
}
html[data-theme="light"] .card-media:has(img)::after {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--section-color, var(--c-accent)) 18%, transparent) 0%,
    transparent 50%
  );
}

/* ── Card placeholder — abstract market-chart art ────────────────────────────
   Fallback for articles without photos. Generative sparkline shape via
   clip-path polygon references the site's data-viz visual language.         */
.card-placeholder {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--section-color, #f7931a) 48%, #030912) 0%,
    color-mix(in srgb, var(--section-color, #f7931a)  8%, #030912) 100%
  );
  transition: filter var(--transition-smooth);
}

/* Horizontal chart grid lines */
.card-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(25% - 0.5px),
      rgba(255, 255, 255, 0.045) calc(25% - 0.5px),
      rgba(255, 255, 255, 0.045) 25%
    ),
    radial-gradient(ellipse at 78% 28%,
      color-mix(in srgb, var(--section-color, #f7931a) 22%, transparent) 0%,
      transparent 52%
    );
}

/* Sparkline area fill — clip-path polygon draws a rising market chart */
.card-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--section-color, #f7931a) 28%, transparent) 0%,
    color-mix(in srgb, var(--section-color, #f7931a) 10%, transparent) 100%
  );
  clip-path: polygon(
    0%   84%,
    8%   68%,
    16%  75%,
    26%  50%,
    34%  62%,
    44%  36%,
    52%  47%,
    62%  28%,
    70%  40%,
    80%  20%,
    90%  30%,
    100% 16%,
    100% 100%,
    0%   100%
  );
}

.article-card:hover .card-placeholder { filter: brightness(1.1); }

html[data-theme="light"] .card-placeholder {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--section-color, #d4a017) 18%, #e8e6df) 0%,
    #e8e6df 100%
  );
}
html[data-theme="light"] .card-placeholder::before {
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(25% - 0.5px),
      rgba(0, 0, 0, 0.04) calc(25% - 0.5px),
      rgba(0, 0, 0, 0.04) 25%
    ),
    radial-gradient(ellipse at 78% 28%,
      color-mix(in srgb, var(--section-color, #d4a017) 20%, transparent) 0%,
      transparent 52%
    );
}

.card-body {
  padding: 1rem 1.125rem 1.125rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: color-mix(in srgb, var(--section-color, #d4642a) 16%, transparent);
  color: var(--section-color, #d4642a);
  margin-bottom: 0.5rem;
  width: fit-content;
  transition: background var(--transition-fast);
}
.article-card:hover .card-badge {
  background: color-mix(in srgb, var(--section-color, #d4642a) 24%, transparent);
}
.card-badge--analysis {
  background: color-mix(in srgb, #b45309 18%, transparent);
  color: #92400e;
  margin-left: 0.375rem;
}
@media (prefers-color-scheme: dark) {
  .card-badge--analysis {
    background: color-mix(in srgb, #fbbf24 18%, transparent);
    color: #fbbf24;
  }
}
.card-badge--cowls {
  background: color-mix(in srgb, #059669 18%, transparent);
  color: #065f46;
  margin-left: 0.375rem;
}
@media (prefers-color-scheme: dark) {
  .card-badge--cowls {
    background: color-mix(in srgb, #34d399 18%, transparent);
    color: #34d399;
  }
}

.card-title {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}
.article-card:hover .card-title { color: var(--section-color, var(--color-text)); }

.card-excerpt {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-border);
}
.card-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.card-author {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.card-author--human {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600;
}
.card-read-time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ============================================
   Editorial Grid
   ============================================ */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

/* Cards inside the editorial grid get their own framing */
.editorial-grid .article-card {
  border-left: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.editorial-grid .article-card:hover {
  border-color: color-mix(in srgb, var(--section-color, var(--color-border)) 60%, var(--color-border));
  box-shadow:
    0 16px 48px -8px color-mix(in srgb, var(--section-color, #000) 22%, var(--color-shadow-hover)),
    0 4px 16px var(--color-shadow);
  transform: scale(1.02);
}

/* Lead — 8 of 12 columns */
.ec-lead { grid-column: span 8; }
.ec-lead .card-media { aspect-ratio: 3 / 2; }
.ec-lead .card-title {
  font-size: 1.4375rem;
  -webkit-line-clamp: 3;
}
.ec-lead .card-excerpt { -webkit-line-clamp: 3; }
.ec-lead .card-body { padding: 1.25rem 1.5rem 1.375rem; }

/* Secondary pair — 4 of 12 columns, stacked */
.ec-secondary-pair {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ec-secondary { flex: 1; min-height: 0; }
.ec-secondary .card-media { aspect-ratio: 16 / 9; }
.ec-secondary .card-title { font-size: 0.9375rem; }

/* 3-up and 2-up sub-rows — always full width */
.ec-row-3up,
.ec-row-2up { grid-column: 1 / -1; }
.ec-row-3up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.ec-row-2up {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* Wide card — horizontal story bar, full width */
.ec-wide { grid-column: 1 / -1; }
.ec-wide .card-link {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 220px;
}
.ec-wide .card-media {
  aspect-ratio: unset;
  min-height: 220px;
}
.ec-wide .card-media img { height: 100%; object-fit: cover; }
.ec-wide .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 2.5rem;
}
.ec-wide .card-title {
  font-size: 1.375rem;
  -webkit-line-clamp: 2;
}
.ec-wide .card-excerpt { -webkit-line-clamp: 3; }
.ec-wide .card-body { gap: 0; }

/* Tablet — 2-col simplified */
@media (max-width: 900px) {
  .editorial-grid { grid-template-columns: repeat(2, 1fr); }
  .ec-lead { grid-column: 1 / -1; }
  .ec-secondary-pair { grid-column: 1 / -1; flex-direction: row; }
  .ec-row-3up { grid-template-columns: repeat(2, 1fr); }
  .ec-wide .card-link { grid-template-columns: 260px 1fr; }
  .ec-wide .card-media { min-height: 180px; }
}

/* Mobile — single column */
@media (max-width: 600px) {
  .editorial-grid { grid-template-columns: 1fr; gap: 0.875rem; }
  .ec-lead,
  .ec-secondary-pair { grid-column: 1 / -1; }
  .ec-secondary-pair { flex-direction: column; }
  .ec-row-3up { grid-template-columns: 1fr; }
  .ec-row-2up { grid-template-columns: 1fr; }
  .ec-wide .card-link { grid-template-columns: 1fr; min-height: unset; }
  .ec-wide .card-media { aspect-ratio: 16 / 9; min-height: unset; }
  .ec-wide .card-body { padding: 1rem 1.125rem 1.25rem; }
}

/* ============================================
   Ad Units
   ============================================ */
.ad-unit {
  display: block;
  margin: 2rem auto;
  text-align: center;
  min-height: 100px; /* reserve leaderboard height to prevent CLS */
  overflow: hidden;
  clear: both;
}
.ad-unit ins { display: block; }
.ad-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 4px;
  opacity: 0.6;
}
body.reading-mode .ad-unit { display: none !important; }
@media (max-width: 960px) { .ad-unit.ad-unit--sidebar { display: none; } }
.ad-display {
  margin: 1.5rem auto;
  max-width: 728px;
  padding: 0 1.25rem;
}

/* ============================================
   Footer
   ============================================ */
/* ============================================
   Footer — Brand Anchor
   ============================================ */

.site-footer {
  --ft-bg:         #0a0e1a;
  --ft-text:       rgba(255,255,255,0.5);
  --ft-text-hi:    rgba(255,255,255,0.82);
  --ft-border:     rgba(255,255,255,0.07);
  --ft-badge-bg:   rgba(255,255,255,0.06);
  background: var(--ft-bg);
  color: var(--ft-text);
  position: relative;
}

/* Rainbow accent border at top */
.site-footer::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    #f7931a 0%,
    #FF9500 22%,
    #00c853 55%,
    #34C759 78%,
    #f7931a 100%
  );
  background-size: 200% 100%;
  animation: footer-shimmer 8s linear infinite;
}
@keyframes footer-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* 4-column grid */
.footer-grid {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1.6fr;
  gap: 3rem;
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--ft-border);
}

.footer-col { display: flex; flex-direction: column; }

/* Brand column */
.footer-wordmark {
  text-decoration: none;
  display: block;
  margin-bottom: 1.125rem;
  line-height: 1;
  transition: opacity 0.15s;
}
.footer-wordmark:hover { opacity: 0.8; }

.footer-tagline {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ft-text);
  max-width: 34ch;
  margin-bottom: 1.25rem;
}

/* Social buttons */
.footer-socials {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
}
.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-base);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--ft-border);
  color: var(--ft-text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.footer-social-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}

/* Trust badges */
.footer-badges {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.5);
  background: var(--ft-badge-bg);
  border: 1px solid var(--ft-border);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  width: fit-content;
}
.footer-badge svg { flex-shrink: 0; opacity: 0.7; }
.footer-badge--fast {
  color: #f7931a;
  border-color: rgba(247,147,26,0.25);
  background: rgba(247,147,26,0.08);
}

/* Column headings */
.footer-col-title {
  font-size: 0.62rem;
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  margin: 0 0 0.875rem;
}

/* Nav links */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--ft-text);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.4;
}
.footer-nav-link:hover { color: var(--ft-text-hi); }

.footer-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  opacity: 0.8;
}

/* Live markets column */
.footer-col--markets {}

.footer-market-snap {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--ft-border);
  border-radius: var(--radius-base);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.fms-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ft-border);
  transition: background 0.15s;
}
.fms-row:last-child { border-bottom: none; }
.fms-row:hover { background: rgba(255,255,255,0.04); }

.fms-sym {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--weight-extrabold);
  color: #fff;
  letter-spacing: 0.04em;
  min-width: 2.8ch;
}
.fms-name {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fms-price {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  text-align: right;
  min-width: 7ch;
}
.fms-chg {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  min-width: 5ch;
  text-align: center;
}
.fms-up   { color: var(--color-price-up);   background: color-mix(in srgb, var(--color-price-up)   15%, transparent); }
.fms-down { color: var(--color-price-down); background: color-mix(in srgb, var(--color-price-down) 15%, transparent); }

.fms-source {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.2);
  margin-bottom: 0.875rem;
}

.footer-markets-cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.15s;
  margin-top: auto;
}
.footer-markets-cta:hover { opacity: 0.75; }

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0 2rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}

.footer-disclosure {
  flex: 1;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
  line-height: 1.55;
}
.footer-disclosure strong { color: rgba(255,255,255,0.4); font-weight: var(--weight-semibold); }
.footer-disclosure a { color: rgba(255,255,255,0.35); text-decoration: underline; text-underline-offset: 2px; }
.footer-disclosure a:hover { color: rgba(255,255,255,0.55); }

/* Back to top button in footer */
.footer-back-top {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--ft-border);
  border-radius: var(--radius-2xl);
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.footer-back-top:hover {
  background: rgba(255,255,255,0.13);
  color: #fff;
}

/* Floating #backToTop — redesigned */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: #0a0e1a;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s, color 0.15s, border-color 0.15s;
  z-index: var(--z-modal);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
#backToTop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#backToTop:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* Responsive */
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1.8fr 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-col--markets {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .footer-market-snap { flex: 1; min-width: 220px; }
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2.5rem 0 2rem;
  }
  .footer-col--brand {
    grid-column: 1 / -1;
  }
  .footer-col--markets {
    grid-column: 1 / -1;
    flex-direction: column;
  }
  .footer-market-snap { min-width: 0; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-col--brand { grid-column: 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .footer-copy { white-space: normal; }
  .footer-wm-svg { height: 26px; }
}

/* ============================================
   Mobile Navigation
   ============================================ */
@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: calc(var(--ticker-height) + var(--header-height));
    left: 0; right: 0;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(0.4,0,0.2,1);
  }
  .site-nav.is-open { max-height: 560px; }
  .nav-list { flex-direction: column; padding: 0.5rem 1.25rem 1rem; gap: 0; }
  .nav-link {
    padding: 0.75rem 0.25rem 0.75rem 0.75rem;
    min-height: 44px;
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
  }
  .nav-link:hover, .nav-link:focus {
    border-bottom-color: var(--color-border);
    border-left-color: var(--section-color, var(--color-accent));
    color: var(--section-color, var(--color-accent));
    background: transparent;
  }
  .nav-list .nav-link.is-active {
    border-left-color: var(--section-color, var(--color-accent));
    color: var(--section-color, var(--color-accent));
    border-bottom-color: var(--color-border);
  }
  .nav-drop { display: none; }
  .nav-chevron { display: none; }
  .nav-link--bots {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.25;
    gap: 2px;
  }
  .nav-bots-tag {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(168,85,247,0.65);
    font-weight: 600;
  }

  .carousel-hero { height: clamp(380px, 62vh, 520px); }
  .ch-excerpt { display: none; }
  .ch-dots { bottom: 1rem; }

}

/* ============================================
   Cookie Consent
   ============================================ */
.cookie-consent {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-modal-top);
  background: var(--color-card);
  border-bottom: 2px solid var(--color-border);
  box-shadow: 0 4px 24px var(--color-shadow);
  font-size: 0.9rem;
  transform: translateZ(0);   /* force GPU compositing layer */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.cookie-consent.cookie-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
body.cookie-active {
  /* padding-top set dynamically by JS to match actual banner height */
}
.cookie-consent-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}
/* ── Cookie header ── */
.cc-header { margin-bottom: 0.25rem; }
.cc-header strong { display: block; font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--color-text); }
.cc-header p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-secondary); }
.cookie-consent-link { color: #007AFF; text-decoration: underline; }

/* ── Category rows ── */
.cc-categories {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0.85rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.cc-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.cc-cat:last-child { border-bottom: none; }
.cc-cat-info { flex: 1; min-width: 0; }
.cc-cat-name {
  display: block;
  font-size: 0.83rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.cc-cat-desc {
  display: block;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
  line-height: 1.4;
}
.cc-always-on {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  padding: 2px 9px;
  white-space: nowrap;
}

/* ── Toggle switch ── */
.cc-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.cc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cc-slider {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 24px;
  transition: background 0.2s;
}
.cc-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.cc-toggle input:checked + .cc-slider { background: #34C759; }
.cc-toggle input:checked + .cc-slider::before { transform: translateX(18px); }
.cc-toggle input:focus-visible + .cc-slider {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Buttons ── */
.cookie-consent-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cookie-btn {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.cookie-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.cookie-btn-accept { background: #34C759; color: #fff; }
.cookie-btn-save { background: var(--color-accent); color: #000; }
.cookie-btn-reject { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
html[data-theme="light"] .cookie-btn-reject { color: #555; }

@media (max-width: 600px) {
  .cookie-consent-inner { padding: 1rem; }
  .cookie-consent-actions { flex-direction: column; }
  .cookie-btn { width: 100%; text-align: center; }
}

/* ============================================
   Pagination
   ============================================ */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 2.5rem 0 1rem;
}
.pagination-link {
  font-size: 0.875rem; font-weight: var(--weight-semibold);
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  background: var(--color-card); border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.pagination-link:hover { transform: translateY(-2px); border-color: var(--color-text-muted); }
.pagination-info { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .anim-entry { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}

/* ============================================
   Affiliate Product Cards
   ============================================ */
.affiliate-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.affiliate-heading {
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.875rem;
}

.affiliate-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.affiliate-card:hover {
  border-color: var(--section-color, #FF9900);
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.affiliate-card-img {
  background: #232F3E;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem 1rem;
  min-height: 72px;
}

.affiliate-card-body {
  padding: 0.75rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.625rem;
}

.affiliate-card-label {
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: 1.35;
  flex: 1;
}

.affiliate-card-cta {
  display: block;
  text-align: center;
  background: #FF9900;
  color: #111827;
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
  transition: background var(--transition-fast);
}

.affiliate-card:hover .affiliate-card-cta {
  background: #e88b00;
}

.affiliate-disclosure {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.affiliate-card--featured {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0 0.375rem;
  padding: 0.875rem 1.125rem;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--section-color, var(--color-accent)) 20%, transparent);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.affiliate-card--featured:hover {
  border-color: color-mix(in srgb, var(--section-color, var(--color-accent)) 50%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--section-color, var(--color-accent)) 10%, transparent);
}
.affiliate-card--featured .affiliate-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.affiliate-card--featured .affiliate-card-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0;
}
.affiliate-card--featured .affiliate-card-cta {
  font-size: 0.78rem;
  color: #FF9900;
  font-weight: 500;
}
.affiliate-disclosure--inline {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
  .affiliate-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   Print
   ============================================ */
@media print {
  .site-header, .site-footer, .nav-toggle, .price-ticker, .partner-spotlight { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================
   Scroll Progress Bar (#03)
   ============================================ */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  z-index: var(--z-cmdbar);
  width: 0%;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* ============================================
   Page Hero — Brand / Value Prop (#01)
   ============================================ */
.page-hero {
  min-height: 52vh;
  display: flex;
  align-items: center;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.25;
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.25rem;
}
.page-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #d4642a;
  margin-bottom: 1.5rem;
}
.page-hero-eyebrow::before {
  content: '';
  width: 40px;
  height: 1.5px;
  background: #d4642a;
  flex-shrink: 0;
}
.page-hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}
.page-hero-subline {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 52ch;
  font-weight: var(--weight-normal);
}

/* ============================================
   Section Eyebrow Labels (#05)
   ============================================ */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #d4642a;
  margin-bottom: 0.5rem;
}
.section-eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: #d4642a;
  flex-shrink: 0;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: var(--weight-normal);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.section-title strong {
  font-weight: var(--weight-extrabold);
}

/* ============================================
   Category Filter Pills (#11)
   ============================================ */
.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  position: relative;
  isolation: isolate;
}
/* Sliding ink indicator — injected by JS */
.fp-slide {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition:
    left   240ms cubic-bezier(0.34, 1.2, 0.64, 1),
    top    200ms cubic-bezier(0.34, 1.2, 0.64, 1),
    width  240ms cubic-bezier(0.34, 1.2, 0.64, 1),
    height 180ms ease;
}
.filter-pill {
  position: relative;
  z-index: 1;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.filter-pill:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text);
}
/* Without JS indicator: keep legacy background approach */
.filter-pill.active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
/* With JS indicator: pill becomes transparent, slide provides the background */
.filter-pills.fp-ready .filter-pill.active {
  background: transparent;
  border-color: transparent;
  color: var(--color-bg);
}
/* ============================================
   Back To Top Button (#12)
   ============================================ */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  z-index: var(--z-modal);
  pointer-events: none;
}
#backToTop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#backToTop:hover {
  background: #d4642a;
  color: #fff;
  border-color: #d4642a;
}

/* .ticker-badge styles removed — replaced by .ticker-pct inline coloring */

/* ============================================
   Article Page Reading Layout (#08)
   ============================================ */
/* ============================================
   Article Page — Reading Experience
   ============================================ */

/* Layout */
.article-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* Breadcrumb */
.article-breadcrumb {
  font-size: 11.5px;
  color: var(--color-muted);
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 16px 0 12px;
  flex-wrap: wrap;
}
.article-breadcrumb a {
  text-decoration: none;
  color: var(--color-muted);
  transition: color 0.15s;
}
.article-breadcrumb a:hover { color: var(--color-text); }
.article-breadcrumb .bc-sep { color: var(--color-border); }
.article-breadcrumb .bc-section { color: var(--section-color, var(--color-accent)); font-weight: var(--weight-semibold); }
.article-breadcrumb .bc-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

/* Header */
.article-header { margin-bottom: 2rem; }

.article-section-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--section-color, var(--color-accent));
  background: color-mix(in srgb, var(--section-color, var(--color-accent)) 12%, transparent);
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  margin-bottom: 1rem;
}
.article-cowls-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #065f46;
  background: color-mix(in srgb, #059669 14%, transparent);
  border: 1px solid color-mix(in srgb, #059669 30%, transparent);
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  .article-cowls-tag {
    color: #34d399;
    background: color-mix(in srgb, #34d399 14%, transparent);
    border-color: color-mix(in srgb, #34d399 30%, transparent);
  }
}
.article-analysis-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #92400e;
  background: color-mix(in srgb, #b45309 14%, transparent);
  border: 1px solid color-mix(in srgb, #b45309 30%, transparent);
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  .article-analysis-tag {
    color: #fbbf24;
    background: color-mix(in srgb, #fbbf24 14%, transparent);
    border-color: color-mix(in srgb, #fbbf24 30%, transparent);
  }
}
/* Analysis article body styles */
.analysis-hook {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  color: var(--color-text);
  border-left: 3px solid var(--section-color, #b45309);
  padding-left: 1.25rem;
  margin-bottom: 2rem;
}
.analysis-summary {
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  font-style: italic;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
  margin: 2rem 0 1rem;
}

.article-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.article-deck {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
  font-weight: var(--weight-normal);
}

/* Meta bar */
.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.25rem;
}
.article-meta-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.article-date {
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--color-muted);
}
.article-read-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--color-muted);
}
.article-read-time svg { flex-shrink: 0; opacity: 0.7; }
.article-meta-right { flex-shrink: 0; }

/* Reading mode toggle button */
.reading-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.reading-mode-btn:hover {
  border-color: var(--section-color, var(--color-accent));
  color: var(--color-text);
}
.reading-mode-btn.rm-active {
  background: color-mix(in srgb, var(--section-color, var(--color-accent)) 12%, var(--color-surface));
  border-color: var(--section-color, var(--color-accent));
  color: var(--section-color, var(--color-accent));
}

/* Hero image */
.article-hero-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 1.5rem 0 2.5rem;
  border-radius: var(--radius-md);
}

/* ── Author byline ── */
.article-byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 0;
  margin-top: var(--space-2);
}
.byline-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--section-color, var(--color-accent));
  color: #0a0e1a;
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.byline-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.byline-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.byline-role {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--section-color, var(--color-accent));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.byline-bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ── Article body typography ── */
.article-body {
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.8;
  color: var(--color-text);
  font-weight: var(--weight-normal);
}
.article-body p {
  margin: 0 0 1.6em;
}
.article-body h2 {
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-text);
  margin: 2.4em 0 0.6em;
  padding-top: 0.2em;
}
.article-body h3 {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--color-text);
  margin: 2em 0 0.5em;
}
.article-body h4 {
  font-size: 0.95rem;
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.8em 0 0.4em;
}

/* ── Key Numbers callout box ── */
.article-body .kn-box {
  background: color-mix(in srgb, var(--section-color, var(--color-accent)) 8%, var(--color-bg-secondary));
  border-left: 3px solid var(--section-color, var(--color-accent));
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
  padding: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-8);
}
.article-body .kn-box h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--section-color, var(--color-accent));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-3);
}
.article-body .kn-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-body .kn-box li {
  font-family: var(--font-data);
  font-size: var(--text-base);
  line-height: 1.6;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.article-body .kn-box li:last-child { border-bottom: none; }
.article-body ul,
.article-body ol {
  margin: 0 0 1.4em 1.25em;
  padding: 0;
}
.article-body li {
  margin-bottom: 0.45em;
  line-height: 1.7;
}
.article-body a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s;
}
.article-body a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: 0.75;
}
.article-body a.internal-link { text-decoration: none; }

/* ============================================
   Quick Briefing Rail
   ============================================ */
.quick-briefing {
  max-width: var(--max-width);
  margin: 0 auto var(--space-10);
  padding: 0 1.25rem;
}
.qb-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.qb-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
.qb-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.qb-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.qb-track::-webkit-scrollbar { display: none; }
.qb-card {
  flex: 0 0 270px;
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--section-color) 7%, var(--color-card));
  border: 1px solid color-mix(in srgb, var(--section-color) 22%, var(--color-border));
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.qb-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--section-color) 50%, var(--color-border));
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.qb-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.qb-img-wrap {
  width: 100%;
  height: 130px;
  overflow: hidden;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--section-color, var(--color-accent)) 10%, var(--color-card));
}
.qb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.qb-card:hover .qb-img-wrap img { transform: scale(1.05); }
.qb-body {
  flex: 1;
  padding: 0.875rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.qb-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--section-color);
  background: color-mix(in srgb, var(--section-color) 14%, transparent);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full, 999px);
  align-self: flex-start;
}
.qb-title {
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qb-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qb-read-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: 0.5rem;
}
/* Per-card reading progress bar */
.qb-progress-bar {
  height: 3px;
  background: var(--color-border);
  flex-shrink: 0;
}
.qb-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--section-color);
  transition: width 0.4s ease;
}

/* ── TL;DR lead paragraph ── */
.article-body .article-tldr {
  font-size: clamp(1.05rem, 2vw, 1.15rem);
  font-weight: var(--weight-medium);
  line-height: 1.65;
  color: var(--color-text);
  border-left: 3px solid var(--section-color, var(--color-accent));
  padding-left: var(--space-4);
  margin: 0 0 var(--space-8);
}

/* ── Why It Matters callout box ── */
.article-body .why-matters-box {
  background: color-mix(in srgb, var(--section-color, var(--color-accent)) 6%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--section-color, var(--color-accent)) 30%, transparent);
  border-radius: var(--radius-base);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-8);
}
.article-body .why-matters-box h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--section-color, var(--color-accent));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-2);
}
.article-body .why-matters-box p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

/* ── Bull / Bear verdict table ── */
.article-body .bull-bear-box {
  margin: 0 0 var(--space-8);
}
.article-body .bull-bear-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.article-body .bull-bear-table th {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 50%;
}
.article-body .bull-bear-table .bb-bull {
  background: color-mix(in srgb, var(--c-up) 12%, var(--color-bg-secondary));
  color: var(--c-up);
  border-radius: var(--radius-base) 0 0 0;
}
.article-body .bull-bear-table .bb-bear {
  background: color-mix(in srgb, var(--c-down) 12%, var(--color-bg-secondary));
  color: var(--c-down);
  border-radius: 0 var(--radius-base) 0 0;
}
.article-body .bull-bear-table td {
  padding: var(--space-3) var(--space-4);
  line-height: 1.6;
  vertical-align: top;
  border-top: 1px solid var(--color-border);
}
.article-body .bull-bear-table tr:last-child td:first-child {
  border-radius: 0 0 0 var(--radius-base);
  background: color-mix(in srgb, var(--c-up) 5%, var(--color-bg-secondary));
}
.article-body .bull-bear-table tr:last-child td:last-child {
  border-radius: 0 0 var(--radius-base) 0;
  background: color-mix(in srgb, var(--c-down) 5%, var(--color-bg-secondary));
}

/* ── Closing question ── */
.article-body .closing-question {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  margin: var(--space-8) 0 0;
}

/* ── Jargon buster (collapsible Key Terms) ── */
.article-body .jargon-buster {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-8) 0 0;
  font-size: var(--text-sm);
}
.article-body .jargon-buster summary {
  cursor: pointer;
  font-weight: var(--weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  user-select: none;
  list-style: none;
}
.article-body .jargon-buster summary::before {
  content: '▶ ';
  font-size: 0.65em;
  opacity: 0.6;
}
.article-body details[open].jargon-buster summary::before { content: '▼ '; }
.article-body .jargon-buster ul {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.article-body .jargon-buster li {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.article-body .jargon-buster li:last-child { border-bottom: none; }
.article-body .jargon-buster strong { color: var(--color-text); }

/* ── Read Next reason tag ── */
.read-next-reason {
  font-size: var(--text-sm);
  color: var(--section-color, var(--color-accent));
  font-weight: var(--weight-medium);
  margin: 0 0 var(--space-2);
  opacity: 0.85;
}
.article-body strong { font-weight: var(--weight-bold); color: var(--color-text); }
.article-body em { font-style: italic; }
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
}
.article-body pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 1.6em;
}
.article-body pre code { background: none; border: none; padding: 0; }
.article-body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2.5em 0;
}
.article-body img {
  max-width: 100%;
  border-radius: var(--radius-base);
  display: block;
  margin: 1.5em auto;
}

/* Pull-quotes — any blockquote in the body */
.article-body blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-style: italic;
  font-weight: var(--weight-bold);
  line-height: 1.45;
  color: var(--color-text);
  margin: 2.5em 0;
  padding: 0 0 0 1.5rem;
  border-left: 4px solid var(--section-color, var(--color-accent));
  position: relative;
}
.article-body blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.2em;
  left: -0.05em;
  font-size: 3.5em;
  line-height: 1;
  color: var(--section-color, var(--color-accent));
  opacity: 0.18;
  font-family: var(--font-serif);
  font-style: normal;
  pointer-events: none;
}
.article-body blockquote p { margin: 0; }
.article-body blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: var(--weight-semibold);
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Key data highlight */
mark.data-hl {
  background: transparent;
  color: var(--section-color, var(--color-accent));
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  border-bottom: 1.5px solid color-mix(in srgb, var(--section-color, var(--color-accent)) 50%, transparent);
  padding: 0 1px;
}

/* Article footer elements */
.article-disclaimer {
  margin: 2.5rem 0 1.5rem;
  padding: 1rem 1.125rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.55;
}
.article-disclaimer strong { color: var(--color-text); }
.article-disclaimer a { color: var(--section-color, var(--color-accent)); }

.article-keywords {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.article-keyword {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}
.article-keyword--link {
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.article-keyword--link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.topic-breadcrumb {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.75rem;
}
.topic-breadcrumb:hover { color: var(--color-accent); }

/* Topic page — section pills in hero */
.topic-section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 4px;
}
.topic-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  background: color-mix(in srgb, var(--sc) 12%, transparent);
  color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 25%, transparent);
  transition: background 150ms;
}
.topic-section-pill:hover { background: color-mix(in srgb, var(--sc) 20%, transparent); }
.tsp-count {
  font-size: 0.7rem;
  opacity: .75;
}

/* Topic page — multi-section grouped article blocks */
.topic-sec-group { margin-bottom: 2.5rem; }
.topic-sec-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--section-color);
}
.topic-sec-heading a {
  color: inherit;
  text-decoration: none;
}
.topic-sec-heading a:hover { color: var(--section-color); }
.topic-sec-count {
  font-size: 0.75rem;
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

.sw-topic--link {
  display: block;
  text-decoration: none;
  text-align: left;
}

/* ── Topics index page ──────────────────────────────────────────────────── */
.topics-page { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem 5rem; }

.topics-hero {
  padding: 3.5rem 0 2rem;
  text-align: center;
}
.topics-hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .75rem;
}
.topics-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: .75rem;
}
.topics-hero-title em { font-style: normal; color: var(--color-accent); }
.topics-hero-desc {
  font-size: .9375rem;
  color: var(--color-text-secondary);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.topics-az-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  margin: 0 -1.25rem;
  padding: 0 1.25rem;
}
.topics-az-inner {
  display: flex;
  gap: .15rem;
  overflow-x: auto;
  padding: .5rem 0;
  scrollbar-width: none;
}
.topics-az-inner::-webkit-scrollbar { display: none; }
.topics-az-btn {
  flex-shrink: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: .3rem .55rem;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.topics-az-btn:hover {
  background: var(--color-surface);
  color: var(--color-accent);
}

.topics-body { margin-top: 2rem; }

.topics-letter-section { margin-bottom: 2.5rem; scroll-margin-top: 48px; }
.topics-letter-heading {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}

.topics-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.topics-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: .35rem .75rem;
  transition: border-color .15s, background .15s;
}
.topics-chip:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}
.topics-chip-label {
  font-size: .8125rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.topics-chip:hover .topics-chip-label { color: var(--color-accent); }
.topics-chip-count {
  font-size: .7rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: var(--radius-2xl);
  padding: .1rem .4rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
}

.topics-footer-nudge {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.topics-footer-nudge p {
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.article-back {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.article-back-link {
  color: var(--section-color, var(--color-accent));
  font-weight: var(--weight-semibold);
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.15s;
}
.article-back-link:hover { opacity: 0.75; }

/* ── Focus / Reading mode ── */
body.reading-mode .price-ticker,
body.reading-mode .market-band,
body.reading-mode .partner-spotlight,
body.reading-mode #cookie-consent,
body.reading-mode .cmdk-fab,
body.reading-mode #backToTop,
body.reading-mode #article-related,
body.reading-mode ins.adsbygoogle { display: none !important; }

body.reading-mode .site-footer { display: none; }
body.reading-mode .site-header {
  background: var(--color-bg);
  box-shadow: none;
  border-bottom-color: transparent;
}
body.reading-mode .article-page {
  max-width: 620px;
  padding-top: 1rem;
}
body.reading-mode #scrollProgress {
  height: 2px;
}

/* Mobile */
@media (max-width: 700px) {
  .article-page { padding: 0 1rem 3rem; }
  .article-hero-img { margin: 1rem 0 1.75rem; border-radius: var(--radius-sm); }
  .article-body { font-size: 16.5px; line-height: 1.75; }
  .article-body blockquote { font-size: 1.1rem; margin: 1.75em 0; }
  .article-meta-bar { flex-wrap: wrap; gap: 8px; }
}

/* ============================================
   Inline Sparklines — Card + Article
   ============================================ */

/* Card sparkline (injected by JS before .card-meta) */
.card-sparkline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.6rem;
}
.card-sparkline.cs-up  { color: var(--color-price-up);   }
.card-sparkline.cs-down { color: var(--color-price-down); }
.cs-svg {
  flex: 1;
  height: 28px;
  min-width: 0;
  overflow: visible;
}
.cs-area { fill: currentColor; opacity: 0.13; }
.cs-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.cs-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}
.cs-sym {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.05em;
  color: var(--color-muted);
  text-transform: uppercase;
}
.cs-chg {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  color: currentColor;
  white-space: nowrap;
}

/* Article page price module */
.article-price-module {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1.25rem 0 1.75rem;
}
.article-price-module.apm-up   { border-left: 3px solid var(--color-price-up);   }
.article-price-module.apm-down { border-left: 3px solid var(--color-price-down); }

.apm-left {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.apm-label {
  font-size: 0.6rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.apm-instrument {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.apm-sym {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
  letter-spacing: 0.03em;
}
.apm-name {
  font-size: 0.78rem;
  color: var(--color-muted);
}
.apm-pricing {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.apm-price {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: -0.01em;
  min-width: 8ch;
}
.apm-delta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  padding: 2px 8px;
  border-radius: var(--radius-2xl);
}
.apm-delta.apm-up   { color: var(--color-price-up);   background: color-mix(in srgb, var(--color-price-up)   12%, transparent); }
.apm-delta.apm-down { color: var(--color-price-down); background: color-mix(in srgb, var(--color-price-down) 12%, transparent); }

.apm-chart {
  width: 160px;
  flex-shrink: 0;
  padding: 8px 12px 8px 4px;
  display: flex;
  align-items: center;
}
.apm-svg {
  width: 100%;
  height: 56px;
  overflow: visible;
}

@media (max-width: 480px) {
  .apm-chart { width: 110px; }
  .apm-price { font-size: 1rem; }
}

/* ============================================
   Market Dashboard Band
   ============================================ */
.market-band {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.market-band-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 1.25rem;
  cursor: default;
}
.market-band-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.market-band-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.market-band-link {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}
.market-band-link:hover { opacity: 1; }
.market-band-toggle {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  line-height: 1;
  transition: color var(--transition-fast);
}
.market-band-toggle:hover { color: var(--color-text); }
.market-band-toggle svg {
  transition: transform var(--transition-base);
}
.mb-collapsed .market-band-toggle svg {
  transform: rotate(-90deg);
}
.market-band-body {
  overflow: hidden;
  max-height: 120px;
  transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mb-collapsed .market-band-body {
  max-height: 0;
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--color-border);
}
.market-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: background var(--transition-fast);
  position: relative;
}
.market-card:last-child { border-right: none; }
.market-card:hover { background: var(--color-card-hover); }
.mc-info {
  flex: 0 0 auto;
  width: 46px;
}
.mc-sym {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.3;
}
.mc-name {
  display: block;
  font-size: 9px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.mc-spark {
  flex: 1;
  min-width: 0;
  height: 30px;
  display: block;
}
.mc-spark-path {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.mc-spark-up   { stroke: var(--color-price-up); }
.mc-spark-down { stroke: var(--color-price-down); }
.mc-data {
  flex: 0 0 auto;
  text-align: right;
  min-width: 64px;
}
.mc-price {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  line-height: 1.3;
}
.mc-delta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-bold);
  padding: 1px 5px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.6;
  margin-top: 2px;
}
.mc-delta-up {
  color: var(--color-price-up);
  background: color-mix(in srgb, var(--color-price-up) 13%, transparent);
}
.mc-delta-down {
  color: var(--color-price-down);
  background: color-mix(in srgb, var(--color-price-down) 13%, transparent);
}
.mc-skeleton {
  display: inline-block;
  background: var(--color-border);
  border-radius: 3px;
  color: transparent !important;
  animation: mc-pulse 1.6s ease-in-out infinite;
}
@keyframes mc-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@media (max-width: 960px) {
  .market-grid { grid-template-columns: repeat(3, 1fr); }
  .market-card:nth-child(3) { border-right: none; }
}
@media (max-width: 540px) {
  .market-grid { grid-template-columns: repeat(2, 1fr); }
  .market-card:nth-child(2),
  .market-card:nth-child(4) { border-right: none; }
  .market-card:nth-child(3) { border-right: 1px solid var(--color-border); }
  .mc-spark { display: none; }
  .mc-data { min-width: 52px; }
}

/* ============================================
   Responsive print fix
   ============================================ */
@media print {
  #scrollProgress, #backToTop { display: none !important; }
}

/* ============================================
   Micro-interaction Layer
   ============================================ */

/* 1. Page fade-in — 150 ms, slight upward drift */
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
body { animation: page-in 160ms ease-out both; }

/* 2. Number-flip — slot-machine price update */
@keyframes num-flip {
  0%   { transform: translateY(0);      opacity: 1; }
  35%  { transform: translateY(-110%);  opacity: 0; }
  36%  { transform: translateY(110%);   opacity: 0; }
  100% { transform: translateY(0);      opacity: 1; }
}
.num-flip { animation: num-flip 270ms cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Market-band card prices use the same flip */
.mc-price,
.mc-delta { display: inline-block; overflow: hidden; }

/* 3. Button :active spring — scale(0.97), 60 ms snap */
.filter-pill:active,
.cmdk-trigger:active,
.reading-mode-btn:active,
.footer-back-top:active,
.cookie-btn:active,
.nav-toggle:active,
.market-band-toggle:active,
.ch-dot:active,
.footer-social-btn:active,
.tmodal-close:active,
.cmdk-close-btn:active,
.cmdk-pill:active {
  transform: scale(0.96) !important;
  transition-duration: 60ms !important;
  transition-timing-function: ease !important;
}
.cmdk-fab:active         { transform: scale(0.92) !important; transition-duration: 60ms !important; }
.article-card:active     { transform: translateY(0) scale(0.99) !important; transition-duration: 70ms !important; }
.editorial-grid .article-card:active { transform: scale(0.99) !important; transition-duration: 70ms !important; }
.partner-card:active     { transform: translateY(-2px) scale(1.0) !important; transition-duration: 70ms !important; }

/* 4. Nav-link underline slide */
.nav-link::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: var(--section-color, var(--color-accent));
  border-radius: 2px;
  transition: width 200ms cubic-bezier(0.34, 1.2, 0.64, 1);
  margin-top: 2px;
}
.nav-link:hover::after,
.nav-link:focus::after { width: 100%; }

/* 5. Card image subtle zoom is already on .card-media img;
   make it spring-eased */
.card-media img {
  transition: transform 380ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* 6. cmdk-result hover lift */
.cmdk-result {
  transition: background 0.1s ease, transform 0.14s ease;
}
.cmdk-result:hover,
.cmdk-result.cmdk-active { transform: translateX(3px); }

/* 7. Scroll progress — section-colored (set by JS), thicker on article */
.article-page ~ * #scrollProgress,
body:has(#article-page) #scrollProgress { height: 3px; }

/* ============================================
   prefers-reduced-motion — respect user OS setting
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto  !important;
  }
  /* Ticker: keep scrolling but at a slower, instant-start pace */
  .ticker-track {
    animation-duration: 180s !important;
    animation-delay:    0s   !important;
  }
  body { animation: none !important; }
}

/* ============================================
   Command Bar (⌘K)
   ============================================ */

/* Header trigger button — desktop only */
.cmdk-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  color: var(--color-muted);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
}
.cmdk-trigger:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.cmdk-trigger svg { flex-shrink: 0; color: var(--color-accent); }
.cmdk-trigger kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 0.68rem;
  font-family: var(--font-data, monospace);
  line-height: 1.4;
  color: var(--color-muted);
  pointer-events: none;
}
@media (max-width: 680px) {
  .cmdk-trigger { display: none; }
}

/* Floating action button — mobile only */
.cmdk-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: var(--z-drawer);
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-card));
  color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px color-mix(in srgb, var(--color-accent) 15%, transparent);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.15s, background 0.15s;
}
.cmdk-fab:hover {
  transform: scale(1.06);
  background: color-mix(in srgb, var(--color-accent) 28%, var(--color-card));
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 16px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.cmdk-fab svg { pointer-events: none; }
@media (max-width: 680px) {
  .cmdk-fab { display: flex; }
}

/* Overlay — fullscreen fixed */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(40px, 7vh, 110px);
  padding-inline: 16px;
}
.cmdk-overlay[aria-hidden="true"] { display: none !important; }

/* Blurred backdrop */
.cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Panel card */
.cmdk-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 660px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-modal), 0 0 48px color-mix(in srgb, var(--color-accent) 10%, transparent);
  animation: cmdk-spring-in 0.2s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
html[data-theme="light"] .cmdk-panel {
  box-shadow: var(--shadow-modal), 0 0 0 1px var(--color-border);
}
@keyframes cmdk-spring-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.975); }
  to   { opacity: 1; transform: translateY(0)     scale(1);     }
}

/* Input row */
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 58px;
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.15s;
}
.cmdk-input-row:focus-within {
  border-bottom-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
}
.cmdk-search-icon {
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0.7;
}
.cmdk-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  caret-color: var(--color-accent);
}
.cmdk-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.cmdk-input::placeholder { color: var(--color-muted); opacity: 0.7; }
.cmdk-input-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cmdk-esc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-size: 0.68rem;
  font-family: var(--font-data, monospace);
  color: var(--color-muted);
  pointer-events: none;
  letter-spacing: 0.04em;
}
@media (max-width: 400px) {
  .cmdk-esc-badge { display: none; }
}
.cmdk-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.cmdk-close-btn:hover {
  color: var(--color-text);
  background: var(--color-card-hover);
  border-color: var(--color-border);
}

/* Scrollable results body */
.cmdk-body {
  max-height: min(62vh, 500px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.cmdk-body:empty { display: none; }

/* Section group */
.cmdk-section { padding: 0; }
.cmdk-section + .cmdk-section { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 4px; }
.cmdk-section-label {
  margin: 0;
  padding: 8px 16px 4px;
  font-size: 0.66rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-data, monospace);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-muted);
}

/* Result list */
.cmdk-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Individual result row */
.cmdk-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.cmdk-result:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}
.cmdk-result:hover,
.cmdk-result.cmdk-active {
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
}
.cmdk-result-icon {
  flex-shrink: 0;
  color: var(--color-muted);
  width: 15px;
  height: 15px;
}
.cmdk-result-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.cmdk-result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.cmdk-result-body .cmdk-result-title { white-space: nowrap; }
.cmdk-result-meta {
  font-size: 0.7rem;
  color: var(--color-muted);
  font-family: var(--font-data, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Remove button on recent items */
.cmdk-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.68rem;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  line-height: 1;
}
.cmdk-result:hover .cmdk-remove,
.cmdk-result.cmdk-active .cmdk-remove { opacity: 1; }
.cmdk-remove:hover {
  background: color-mix(in srgb, var(--c-down) 15%, transparent);
  color: var(--c-down);
}

/* Section color badge (article results) */
.cmdk-badge {
  flex-shrink: 0;
  font-size: 0.63rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-data, monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--radius-2xl);
  white-space: nowrap;
}

/* Arrow indicator on article results */
.cmdk-arrow {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.85rem;
  transition: transform 0.15s, color 0.15s;
}
.cmdk-result:hover .cmdk-arrow,
.cmdk-result.cmdk-active .cmdk-arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* Trending pills */
.cmdk-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 16px 10px;
}
.cmdk-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  font-size: 0.73rem;
  font-family: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cmdk-pill:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
  color: var(--color-accent);
}

/* Keyboard shortcut hint */
.cmdk-hint {
  margin: 0;
  padding: 8px 16px 6px;
  font-size: 0.66rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.cmdk-hint kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-family: var(--font-data, monospace);
  font-size: inherit;
  color: var(--color-text-secondary);
}

/* Ticker price card */
.cmdk-price-card {
  margin: 8px 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border-left: 3px solid;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cmdk-price-up   { border-color: var(--c-up); background: color-mix(in srgb, var(--c-up) 5%, var(--color-bg)); }
.cmdk-price-down { border-color: var(--c-down); background: color-mix(in srgb, var(--c-down) 5%, var(--color-bg)); }
.cmdk-price-sym {
  display: block;
  font-size: 0.95rem;
  font-weight: var(--weight-extrabold);
  font-family: var(--font-data, monospace);
  color: var(--color-text);
  letter-spacing: 0.03em;
}
.cmdk-price-name {
  display: block;
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: 2px;
}
.cmdk-price-nums {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cmdk-price-val {
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-data, monospace);
  color: var(--color-text);
  min-width: 7ch;
  text-align: right;
}
.cmdk-delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-2xl);
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-data, monospace);
}
.cmdk-up   { color: var(--c-up);   background: color-mix(in srgb, var(--c-up)   14%, transparent); }
.cmdk-down { color: var(--c-down); background: color-mix(in srgb, var(--c-down) 14%, transparent); }

/* Empty state */
.cmdk-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.cmdk-empty strong { color: var(--color-text); }


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION PAGE  —  /markets, /crypto, /trading, /economy
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section hero ──────────────────────────────────────────────────────────── */
.sec-hero {
  position: relative;
  background: var(--color-bg-secondary);
  overflow: hidden;
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--color-border);
}
.sec-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 90% at 75% 50%, color-mix(in srgb, var(--section-color) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.sec-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.sec-hero-left { flex: 1; min-width: 0; }
.sec-hero-right {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sec-hero-icon { width: 130px; height: 130px; color: var(--section-color); }
.sec-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}
.sec-hero-live {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--section-color);
}
.sec-hero-sep { opacity: .35; }
.sec-hero-title {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: var(--weight-extrabold);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 14px;
}
.sec-hero-title em {
  font-style: italic;
  color: var(--section-color);
  font-family: inherit;
}
.sec-hero-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 500px;
}
.sec-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sec-hero-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--radius-base);
  border: 1.5px solid var(--section-color);
  color: var(--section-color);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background 180ms, color 180ms;
}
.sec-hero-cta:hover { background: var(--section-color); color: #fff; }

/* ── Live data module ──────────────────────────────────────────────────────── */
.sec-data-module {
  background: var(--color-bg-secondary);
  border-top: 2px solid var(--section-color);
  border-bottom: 1px solid var(--color-border);
}
.secdm-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.secdm-title {
  flex: 1;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--section-color);
}
.secdm-updated {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.secdm-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.secdm-toggle:hover { background: var(--color-border); color: var(--color-text); }
.secdm-toggle svg { transition: transform 220ms ease; }
.secdm-toggle--open svg { transform: rotate(180deg); }
.secdm-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4px 24px 18px;
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition: max-height 300ms ease, opacity 220ms ease, padding 220ms ease;
}
.secdm-body.secdm-collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* Skeleton pulse */
@keyframes skel-pulse { 0%,100%{opacity:.4} 50%{opacity:.8} }

/* ── Crypto top-10 leaderboard ─────────────────────────────────────────────── */
.secdm-coins { width: 100%; }
.sdmc-head,
.sdmc-row {
  display: grid;
  grid-template-columns: 28px 1fr 110px 82px 68px;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
}
.sdmc-head {
  font-size: 0.68rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
}
.sdmc-row {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  border-radius: var(--radius-xs);
  transition: background var(--transition-fast);
}
.sdmc-row:last-child { border-bottom: none; }
.sdmc-row:hover { background: color-mix(in srgb, var(--section-color) 6%, transparent); }
.sdmc-rank { font-size: 0.7rem; color: var(--color-text-muted); font-family: var(--font-mono); }
.sdmc-asset { display: flex; flex-direction: column; gap: 1px; }
.sdmc-sym {
  font-size: 0.83rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text);
}
.sdmc-name { font-size: 0.7rem; color: var(--color-text-secondary); }
.sdmc-r { text-align: right; }
.sdmc-price {
  font-size: 0.83rem;
  font-weight: var(--weight-semibold);
  font-family: var(--font-mono);
  color: var(--color-text);
  text-align: right;
}
.sdmc-chg, .sdmc-cap {
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  font-family: var(--font-mono);
  text-align: right;
}
.sdmc-cap { color: var(--color-text-secondary); }
.sdmc-spark { display: flex; justify-content: flex-end; align-items: center; }
.sdmc-svg { width: 60px; height: 22px; display: block; }
.sdmc-spark-path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.sdmc-skel {
  color: transparent !important;
  background: var(--color-border);
  border-radius: 3px;
  animation: skel-pulse 1.5s ease infinite;
  min-width: 44px;
  display: inline-block;
}
@media (max-width: 900px) {
  .sdmc-hide-md { display: none; }
  .sdmc-head, .sdmc-row { grid-template-columns: 24px 1fr 96px 76px 60px; }
}
@media (max-width: 580px) {
  .sdmc-hide-sm { display: none; }
  .sdmc-head, .sdmc-row { grid-template-columns: 20px 1fr 84px 70px; }
}

/* ── Instrument cards (markets / trading / economy) ────────────────────────── */
.secdm-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.secdm-cards::-webkit-scrollbar { display: none; }
.sdmi-card {
  flex: 0 0 158px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--transition-fast);
  cursor: default;
}
.sdmi-card:hover { border-color: var(--section-color); }
.sdmi-info { display: flex; flex-direction: column; gap: 2px; }
.sdmi-sym { font-size: 0.8rem; font-weight: var(--weight-bold); font-family: var(--font-mono); color: var(--color-text); }
.sdmi-name { font-size: 0.68rem; color: var(--color-text-secondary); }
.sdmi-spark { width: 100%; height: 28px; display: block; }
.sdmi-spark-path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.sdmi-data {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.sdmi-price {
  font-size: 0.85rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text);
}
.sdmi-chg { font-size: 0.75rem; font-weight: var(--weight-bold); font-family: var(--font-mono); }
.sdmi-skel {
  color: transparent !important;
  background: var(--color-border);
  border-radius: 3px;
  animation: skel-pulse 1.5s ease infinite;
  min-width: 48px;
  display: inline-block;
}

/* price direction helpers (reused by section DM) */
.price-up   { color: var(--color-price-up) !important; }
.price-down { color: var(--color-price-down) !important; }

/* ── Sub-category tabs ─────────────────────────────────────────────────────── */
.sec-intro-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1.25rem 0;
}
.sec-intro-text {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  border-left: 2px solid var(--section-color, var(--color-accent));
  padding-left: 0.75rem;
  margin: 0;
}
.sec-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.sec-tabs {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tab {
  padding: 12px 15px;
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
  z-index: 1;
  border-radius: 0;
  flex-shrink: 0;
}
.sec-tab:hover { color: var(--color-text); }
.sec-tab.active { color: var(--section-color); font-weight: var(--weight-bold); }
/* Sliding bottom-border indicator */
.sec-tab-slide {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--section-color);
  border-radius: 2px 2px 0 0;
  transition: left 220ms cubic-bezier(.34,1.56,.64,1), width 180ms ease;
  pointer-events: none;
  z-index: 2;
}

/* ── Two-column layout ─────────────────────────────────────────────────────── */
.sec-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 960px) {
  .sec-layout { grid-template-columns: 1fr; }
}

/* ── Article grid ──────────────────────────────────────────────────────────── */
.sec-article-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sec-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

/* Entry fade-up animation for cards */
.anim-entry {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 360ms ease, transform 360ms ease;
}
.anim-entry.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anim-entry { opacity: 1; transform: none; transition: none; }
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sec-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 56px;
}
.sidebar-widget {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.sw-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text);
  margin: 0 0 14px;
}
.sw-title svg { color: var(--section-color); flex-shrink: 0; }

/* Trending topics */
.sw-trending {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.sw-topic {
  padding: 5px 12px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.sw-topic:hover {
  border-color: var(--section-color);
  color: var(--section-color);
  background: color-mix(in srgb, var(--section-color) 8%, transparent);
}

/* Newsletter widget */
.sidebar-newsletter {
  border-color: color-mix(in srgb, var(--section-color) 28%, var(--color-border));
}
.sw-nl-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--section-color) 12%, transparent);
  color: var(--section-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.sw-body {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
  line-height: 1.55;
}
.sw-form { display: flex; flex-direction: column; gap: 8px; }
.sw-input-wrap {
  display: flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-base);
  overflow: hidden;
  transition: border-color 200ms;
}
.sw-input-wrap:focus-within { border-color: var(--section-color); }
.sw-input {
  flex: 1;
  padding: 9px 11px;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 0.83rem;
  outline: none;
  min-width: 0;
}
.sw-input:focus-visible {
  outline: 2px solid var(--section-color, var(--color-accent));
  outline-offset: -2px;
  border-radius: 2px;
}
.sw-input::placeholder { color: var(--color-text-muted); }
.sw-btn {
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--section-color);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 150ms;
  flex-shrink: 0;
}
.sw-btn:hover { opacity: .82; }
.sw-disclaimer { font-size: 0.69rem; color: var(--color-text-muted); margin: 0; }
.sw-success {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-price-up);
  font-size: 0.87rem;
  font-weight: var(--weight-semibold);
  padding: 8px 0;
}

/* COWLS Corner homepage race card */
.cowls-race {
  max-width: var(--max-width);
  margin: 0 auto 28px;
  padding: 20px 24px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid #00d4ff;
  border-radius: var(--radius-lg);
}
.cowls-race-inner { display: flex; flex-direction: column; gap: 14px; }
.cowls-race-hd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cowls-race-title-wrap { display: flex; align-items: center; gap: 8px; }
.cowls-race-live {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00d4ff;
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(0.8); }
}
.cowls-race-title { font-size: 1rem; font-weight: var(--weight-semibold); margin: 0; }
.cowls-race-title a { color: var(--color-text); text-decoration: none; }
.cowls-race-title a:hover { color: #00d4ff; }
.cowls-race-sub { font-size: 0.75rem; color: var(--color-text-muted); }
.cowls-race-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cowls-bot-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cbc-header { display: flex; align-items: baseline; gap: 8px; }
.cbc-ticker { font-size: 1rem; font-weight: var(--weight-bold); color: var(--color-text); }
.cbc-name { font-size: 0.72rem; color: var(--color-text-muted); }
.cbc-leader { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cbc-strat { font-size: 0.8rem; color: var(--color-text-secondary); }
.cbc-pos {
  font-size: 0.68rem;
  font-weight: var(--weight-semibold);
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}
.cbc-pos[data-pos="LONG"]  { background: color-mix(in srgb, var(--color-price-up)  12%, transparent); color: var(--color-price-up); }
.cbc-pos[data-pos="SHORT"] { background: color-mix(in srgb, var(--color-price-down) 12%, transparent); color: var(--color-price-down); }
.cbc-pos[data-pos="FLAT"]  { background: color-mix(in srgb, var(--color-text-muted) 12%, transparent); color: var(--color-text-muted); }
.cbc-pnl { font-size: 1.1rem; font-weight: var(--weight-bold); color: var(--color-text); }
.cbc-pnl.up   { color: var(--color-price-up); }
.cbc-pnl.down { color: var(--color-price-down); }
.cbc-link { font-size: 0.75rem; color: var(--color-accent); text-decoration: none; margin-top: 4px; }
.cbc-link:hover { text-decoration: underline; }
.cbc-strat-table { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
.cbc-strat-row { display: flex; align-items: center; gap: 6px; font-size: 0.775rem; border-radius: 4px; padding: 2px 4px; margin: 0 -4px; }
.cbc-strat-row.cbc-loading { color: var(--color-text-muted); font-size: 0.72rem; }
.cbc-strat-rank { font-size: 0.65rem; color: var(--color-text-muted); width: 18px; flex-shrink: 0; text-align: right; }
.cbc-strat-name { flex: 1; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbc-strat-pct { font-weight: var(--weight-semibold); font-size: 0.8rem; white-space: nowrap; }
.cbc-strat-pct.up   { color: var(--color-price-up); }
.cbc-strat-pct.down { color: var(--color-price-down); }
.cbc-strat-row.cbc-rank-1 { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.cbc-strat-row.cbc-rank-1 .cbc-strat-name { color: var(--color-text); font-weight: var(--weight-semibold); }
.cbc-strat-row.cbc-rank-1 .cbc-strat-rank { color: var(--color-accent); font-weight: var(--weight-bold); }
.cbc-open-ts { display: block; font-size: 0.62rem; color: var(--color-text-muted); font-family: var(--font-data, monospace); margin-top: 1px; }
.cc-pos-ts { display: block; font-size: 0.68rem; color: var(--color-text-muted); font-family: var(--font-data, monospace); margin-top: 2px; }
.cbc-bench-rows { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--color-border); padding-top: 6px; margin-top: 2px; }
.cbc-bench-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.73rem; }
.cbc-bench-label { color: var(--color-text-muted); }
.cbc-bench-val { font-weight: var(--weight-semibold); }
.cbc-bench-val.up   { color: var(--color-price-up); }
.cbc-bench-val.down { color: var(--color-price-down); }
.cbc-msci-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 7px; border-radius: 5px; background: color-mix(in srgb, #fbbf24 8%, transparent); border: 1px solid color-mix(in srgb, #fbbf24 20%, transparent); }
.cbc-msci-label { font-size: 0.68rem; color: var(--color-text-muted); white-space: nowrap; }
.cbc-msci-val { font-size: 0.78rem; font-weight: var(--weight-semibold); white-space: nowrap; }
.cbc-msci-ahead { color: var(--color-price-up); }
.cbc-msci-behind { color: var(--color-price-down); }
.cowls-race-disc { font-size: 0.7rem; color: var(--color-text-muted); margin: 0; }
.cowls-race-disc a { color: var(--color-text-muted); }

/* Race of the Bots — Full-width band */
.race-band {
  position: relative;
  width: 100%;
  background: #0b0b18;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 44px 0 40px;
  overflow: hidden;
}
.race-dots-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.race-band-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.race-band-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.race-sc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.race-sc-hl {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--color-text);
}
.race-sc-hl em { font-style: normal; color: #00d4ff; }
.race-sc-sub-text { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }
.race-band-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: #00d4ff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding-bottom: 2px;
}
.race-band-cta:hover { text-decoration: underline; }
.race-band .cowls-race-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .race-band { padding: 32px 0 28px; }
  .race-band-hd { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Horizontal scroll rail — swipe between MU / SOL / GOOGL */
  .race-band .cowls-race-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-bottom: 12px;
  }
  .race-band .cowls-race-grid::-webkit-scrollbar { display: none; }
  .race-band .cowls-bot-card {
    flex: 0 0 min(82%, 300px);
    scroll-snap-align: start;
  }
}
@media (min-width: 769px) and (max-width: 960px) {
  .race-band .cowls-race-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Homepage newsletter strip */
.hp-newsletter {
  width: 100%;
  margin: 0 0 0;
  padding: 28px var(--gutter);
  background: color-mix(in srgb, var(--color-accent) 9%, var(--color-card));
  border-top: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
  border-radius: 0;
}
.hp-newsletter .hp-nl-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.hp-nl-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hp-nl-copy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 180px;
}
.hp-nl-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hp-nl-title {
  font-size: 0.9rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  display: block;
}
.hp-nl-sub { font-size: 0.78rem; color: var(--color-text-secondary); margin: 2px 0 0; }
.hp-nl-form { flex: 0 0 280px; }
.hp-newsletter .sw-btn { background: var(--color-accent); }
.hp-newsletter .sw-input-wrap:focus-within { border-color: var(--color-accent); }
@media (max-width: 768px) { .hp-newsletter { display: none; } }

/* Mid-page newsletter CTA strip */
.hp-nl-mid {
  width: 100%;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-card);
  padding: 14px var(--gutter);
  margin: 0;
}
.hp-nl-mid-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hp-nl-mid-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 0;
}
.hp-nl-mid-copy svg { flex-shrink: 0; color: var(--color-accent); }
.hp-nl-mid-form { flex: 0 0 260px; }
.hp-nl-mid .sw-btn { background: var(--color-accent); }
.hp-nl-mid .sw-input-wrap:focus-within { border-color: var(--color-accent); }
@media (max-width: 640px) {
  .hp-nl-mid-inner { flex-direction: column; align-items: stretch; }
  .hp-nl-mid-form { flex: none; width: 100%; }
}

/* ── Homepage FAQ ─────────────────────────────────────────────────────────── */
.hp-faq {
  max-width: var(--max-width);
  margin: 0 auto 48px;
  padding: 0 1.25rem;
}
.hp-faq-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0 0 20px;
}
.hp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hp-faq-item {
  border-bottom: 1px solid var(--color-border);
}
.hp-faq-item:last-child { border-bottom: none; }
.hp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  background: var(--color-card);
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.hp-faq-q::-webkit-details-marker { display: none; }
.hp-faq-q::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.hp-faq-item[open] > .hp-faq-q { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 5%, var(--color-card)); }
.hp-faq-item[open] > .hp-faq-q::after { content: '−'; }
.hp-faq-q:hover { background: color-mix(in srgb, var(--color-accent) 7%, var(--color-card)); color: var(--color-accent); }
.hp-faq-a {
  padding: 0 20px 16px;
  margin: 0;
  font-size: 0.855rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-accent) 3%, var(--color-card));
}
.hp-faq-link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.hp-faq-link:hover { opacity: 0.85; }
@media (max-width: 600px) {
  .hp-faq-q { padding: 13px 16px; font-size: 0.85rem; }
  .hp-faq-a  { padding: 0 16px 14px; }
}

/* More sections */
.sw-sections-nav { display: flex; flex-direction: column; gap: 3px; }
.sw-section-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-base);
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  transition: background var(--transition-fast);
}
.sw-section-link:hover { background: color-mix(in srgb, var(--sc, currentColor) 10%, transparent); }
.sw-section-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--sc, var(--color-text-muted));
  flex-shrink: 0;
}
.sw-section-arrow {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  transition: transform 150ms;
}
.sw-section-link:hover .sw-section-arrow { transform: translateX(3px); }

/* Sidebar partner cards */
.sw-partner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--pc, var(--color-accent)) 25%, transparent);
  background: color-mix(in srgb, var(--pc, var(--color-accent)) 6%, transparent);
  text-decoration: none;
  color: var(--color-text);
  transition: background 150ms, border-color 150ms, transform 150ms;
  margin-bottom: 8px;
}
.sw-partner-card:hover {
  background: color-mix(in srgb, var(--pc, var(--color-accent)) 12%, transparent);
  border-color: color-mix(in srgb, var(--pc, var(--color-accent)) 45%, transparent);
  transform: translateY(-1px);
}
.sw-partner-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: var(--weight-black);
  color: #fff;
  line-height: 1;
}
.sw-partner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sw-partner-body strong {
  font-size: 0.82rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-partner-body span {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-partner-cta {
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  color: var(--pc, var(--color-accent));
  white-space: nowrap;
  flex-shrink: 0;
}
.sw-partner-disc {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  opacity: 0.7;
  margin: 4px 0 0;
}

/* ── Responsive adjustments ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sec-hero { padding: 36px 0 28px; }
  .sec-hero-right { display: none; }
  .sec-hero-desc { margin-bottom: 20px; }
  .secdm-header, .secdm-body { padding-left: 16px; padding-right: 16px; }
  .sec-tabs { padding: 0 12px; }
  .sec-layout { padding: 24px 16px; gap: 28px; }
  .sec-sidebar { position: static; top: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BRAND IDENTITY — Pattern, colour signature, mark utilities
   ═══════════════════════════════════════════════════════════════════════════ */

/* Brand colour signature: deep navy + electric cyan + signal pair
   --color-brand-navy  : #0a0e1a  (= --color-bg)
   --color-brand-cyan  : aliases --c-accent (#00d4ff)
   --color-brand-glow  : rgba(0,212,255,.12)
   Canonical signal tokens defined in :root — see top of file.               */
:root {
  --color-brand-cyan: var(--c-accent);
  --color-brand-navy: #0a0e1a;
  --color-brand-glow: rgba(0, 212, 255, 0.12);
}

/* ── Data-grid brand pattern ───────────────────────────────────────────────── */
/* A repeating 20×20 dot lattice at low opacity — financial data / terminal   */
.cw-pattern,
.cw-pattern::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='0.75' fill='%2300d4ff' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

/* Applied to section hero as a layered ::after overlay */
.sec-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='0.75' fill='%2300d4ff' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  pointer-events: none;
}

/* Header gets an ultra-subtle pattern below the border */
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='0.6' fill='%2300d4ff' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}
.site-header .header-inner { position: relative; z-index: 1; }

/* Footer gets a darker, more visible dot grid for depth */
.site-footer {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='0.8' fill='%2300d4ff' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

/* ── Mark scale utility ────────────────────────────────────────────────────── */
/* Apply .cw-mark to any container to get the standalone C-arc icon via SVG   */
.cw-mark-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-base);
  background: var(--color-brand-navy);
  border: 1px solid rgba(0, 212, 255, 0.18);
  flex-shrink: 0;
}

/* ── HTML Sitemap ─────────────────────────────────────────────────────────── */
.sitemap-page { padding: 3rem 0 5rem; }
.sitemap-inner { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; }
.sitemap-heading { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 0.5rem; }
.sitemap-sub { color: var(--color-text-muted); margin-bottom: 3rem; }
.sitemap-group { margin-bottom: 2.5rem; border-left: 3px solid var(--section-color, var(--color-accent)); padding-left: 1.25rem; }
.sitemap-group-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; display: flex; align-items: baseline; gap: 0.75rem; }
.sitemap-section-link { color: var(--section-color, var(--color-accent)); text-decoration: none; }
.sitemap-section-link:hover { text-decoration: underline; }
.sitemap-count { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 400; }
.sitemap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sitemap-article-row { display: flex; align-items: baseline; gap: 1rem; }
.sitemap-link { color: var(--color-text); text-decoration: none; font-size: 0.9rem; line-height: 1.4; }
.sitemap-link:hover { color: var(--color-accent); text-decoration: underline; }
.sitemap-article-link { flex: 1; min-width: 0; }
.sitemap-date { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Disclaimer band ──────────────────────────────────────────────────────── */
.disclaimer-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 28px;
  padding: 0 1rem;
  background: rgba(255, 56, 96, 0.06);
  border-bottom: 1px solid rgba(255, 56, 96, 0.15);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  position: relative;
  z-index: var(--z-sticky);
}
html[data-theme="light"] .disclaimer-band {
  background: rgba(200, 25, 46, 0.04);
  border-bottom-color: rgba(200, 25, 46, 0.12);
}
.disclaimer-band-close {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 4px 6px;
  opacity: 0.6;
}
.disclaimer-band-close:hover { opacity: 1; }

/* ── Skip to content (keyboard accessibility) ─────────────────────────────── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--color-accent);
  color: #000;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-base);
  text-decoration: none;
  white-space: nowrap;
}
.skip-to-content:focus {
  left: 1rem;
}

/* ============================================
   Sprint B — Watchlist, Save, Missed Yesterday
   ============================================ */

/* Watchlist star button on market cards */
.mc-watch-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  z-index: 2;
}
.market-card:hover .mc-watch-btn,
.mc-watch-btn--active { opacity: 1; }
.mc-watch-btn--active { color: #f5c518; }
.mc-watch-btn:hover { color: #f5c518; }

/* Watchlisted article cards — accent left stripe */
.card--watchlisted {
  border-left-color: var(--color-accent) !important;
}

/* Save for later button */
.save-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(10, 14, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 5px 6px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html[data-theme="light"] .save-btn {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.1);
}
.article-card:hover .save-btn,
.save-btn--saved { opacity: 1; }
.save-btn--saved { color: var(--color-accent); }
.save-btn:hover { color: var(--color-accent); background: rgba(0, 212, 255, 0.1); }

/* Watchlist / Saved filter pills */
.filter-pill--watch {
  border-color: #f5c518;
  color: #f5c518;
}
.filter-pill--watch:hover,
.filter-pill--watch.active {
  background: rgba(245, 197, 24, 0.1);
}
.filter-pill--saved {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.filter-pill--saved:hover,
.filter-pill--saved.active {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Saved articles panel */
.saved-panel {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  animation: panel-slide-in 0.2s ease;
}
@keyframes panel-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.saved-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.saved-panel-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}
.saved-panel-clear {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  transition: color 0.1s;
}
.saved-panel-clear:hover { color: var(--c-down); }
.saved-panel-list { display: flex; flex-direction: column; }
.saved-panel-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border);
}
.saved-panel-item:first-child { border-top: none; }
.saved-panel-link {
  flex: 1;
  font-size: 0.83rem;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.45;
}
.saved-panel-link:hover { color: var(--color-accent); }
.saved-panel-section {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-right: 0.35rem;
}
.saved-panel-remove {
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: color 0.1s;
}
.saved-panel-remove:hover { color: var(--c-down); }

/* You Missed Yesterday module */
.missed-module {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 6%, var(--color-card)),
    color-mix(in srgb, #6366f1 5%, var(--color-card)));
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.missed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 1rem;
}
.missed-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
}
.missed-title-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.missed-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 0.85rem;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  transition: color 0.1s;
}
.missed-close:hover { color: var(--color-text); }
.missed-cards { display: flex; flex-direction: column; }
.missed-card {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  text-decoration: none;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
html[data-theme="light"] .missed-card { border-top-color: rgba(0, 0, 0, 0.05); }
.missed-card:first-child { border-top: none; }
.missed-card-section {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  flex-shrink: 0;
  width: 58px;
}
.missed-card-title {
  font-size: 0.83rem;
  color: var(--color-text);
  line-height: 1.4;
}
.missed-card:hover .missed-card-title { color: var(--color-accent); }

/* ============================================
   COWLS Corner — Paper Trading Dashboard (#40)
   ============================================ */

/* Live MU price bar in hero */
.cc-mu-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px 18px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.cc-mu-sym {
  font-family: var(--font-data);
  font-weight: var(--weight-bold);
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--section-color);
}
.cc-mu-sep {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  flex-shrink: 0;
  align-self: center;
}
.cc-mu-price {
  font-family: var(--font-data);
  font-weight: var(--weight-bold);
  font-size: 1.45rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.cc-mu-change {
  font-family: var(--font-data);
  font-size: .82rem;
  font-weight: var(--weight-semibold);
}
.cc-mu-label {
  font-size: .7rem;
  color: var(--color-text-muted);
}

/* Bot tabs */
.cc-bot-tabs {
  display: flex;
  gap: .5rem;
  padding: 1rem 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--color-surface);
}
html[data-theme="light"] .cc-bot-tabs { border-color: rgba(0,0,0,.08); }
.cc-bot-tab {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border-radius: 8px 8px 0 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
  transition: color .18s, background .18s;
  position: relative;
  bottom: -1px;
}
.cc-bot-tab:hover { color: var(--color-text); background: rgba(255,255,255,.04); }
.cc-bot-tab--active {
  color: var(--color-text);
  background: var(--color-bg);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="light"] .cc-bot-tab--active { border-color: rgba(0,0,0,.08); background: var(--color-bg); }
.cc-bot-tab-sym { font-size: .8rem; letter-spacing: .04em; opacity: .9; }
.cc-bot-tab-name { font-size: .78rem; }

/* Body wrapper */
.cc-body { padding: 2.5rem 0 3rem; }

/* Section groups */
.cc-group { margin-bottom: 3rem; }
.cc-group:last-child { margin-bottom: 0; }
.cc-group-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cc-group-title {
  font-family: var(--font-headline);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-top: .25rem;
}
.cc-group-updated {
  font-size: .7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Strategy leaderboard grid */
.cc-strategy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Strategy card */
.cc-strat-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--section-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.375rem 1.125rem;
  position: relative;
  transition: border-color 180ms ease, transform 160ms ease;
}
.cc-strat-card:hover {
  border-color: var(--section-color);
  transform: translateY(-2px);
}
.cc-strat-card.cc-leader::after {
  content: '#1';
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-family: var(--font-data);
  font-size: .65rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: .04em;
  color: var(--section-color);
  background: color-mix(in srgb, var(--section-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--section-color) 30%, transparent);
  border-radius: var(--radius-full);
  padding: .15rem .45rem;
  line-height: 1.4;
}
.cc-strat-name {
  font-size: .7rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--section-color);
  margin-bottom: .2rem;
}
.cc-strat-desc {
  font-size: .77rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin-bottom: 1rem;
}
.cc-strat-pnl {
  font-family: var(--font-data);
  font-size: 2rem;
  font-weight: var(--weight-extrabold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  margin-bottom: .2rem;
}
.cc-strat-pnl-abs {
  font-family: var(--font-data);
  font-size: .77rem;
  color: var(--color-text-muted);
  margin-bottom: .875rem;
}
.cc-strat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  font-size: .77rem;
  padding: .3rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.cc-strat-row-label { color: var(--color-text-muted); flex-shrink: 0; }
.cc-strat-row-val {
  font-family: var(--font-data);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: right;
}
.cc-pos-badge {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border-radius: var(--radius-full);
  margin-left: .3rem;
  vertical-align: middle;
}
.cc-pos-badge.long { background: color-mix(in srgb, var(--c-up) 15%, transparent); color: var(--c-up); }
.cc-pos-badge.cash { background: color-mix(in srgb, var(--color-text-muted) 12%, transparent); color: var(--color-text-muted); }
.cc-strat-reason {
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  font-size: .71rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  font-style: italic;
}

/* Benchmark bar */
.cc-benchmark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .625rem;
  padding: .7rem 1rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .78rem;
}
.cc-benchmark-label { color: var(--color-text-muted); }
.cc-benchmark-val {
  font-family: var(--font-data);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.cc-benchmark-meta {
  font-family: var(--font-data);
  font-size: .7rem;
  color: var(--color-text-muted);
}

/* Chart */
.cc-chart-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem 1rem;
  position: relative;
}
.cc-chart-wrap {
  position: relative;
  height: 320px;
}
.cc-chart-card canvas { display: block; width: 100% !important; }

/* Trade log */
.cc-table-wrap {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .79rem;
}
.cc-table th {
  text-align: left;
  padding: .65rem 1rem;
  font-size: .67rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}
.cc-table td {
  padding: .625rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  color: var(--color-text);
  vertical-align: middle;
}
.cc-table tr:last-child td { border-bottom: none; }
.cc-table tr:hover td { background: color-mix(in srgb, var(--section-color) 4%, transparent); }
.cc-trade-act {
  font-family: var(--font-data);
  font-size: .7rem;
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
}
.cc-trade-strat {
  display: inline-block;
  font-size: .67rem;
  font-weight: var(--weight-semibold);
  background: color-mix(in srgb, var(--section-color) 12%, transparent);
  color: var(--section-color);
  padding: .13rem .5rem;
  border-radius: var(--radius-full);
}
.cc-trade-price {
  font-family: var(--font-data);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.cc-table-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 2.5rem 1rem;
}
.cc-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
}

/* About section */
.cc-about {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--color-text);
}
.cc-about p {
  max-width: 780px;
  margin-bottom: 1rem;
}
.cc-about-strategies {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 1.25rem 0 1.25rem;
}
.cc-about-strat {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 2px solid color-mix(in srgb, var(--section-color) 50%, transparent);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.cc-about-strat p { margin-bottom: 0; }
.cc-about-strat-name {
  font-family: var(--font-data);
  font-weight: var(--weight-bold);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--section-color);
  margin-bottom: .45rem !important;
}

/* Disclaimer */
.cc-disclaimer {
  padding: 1.75rem 0 2.5rem;
  font-size: .73rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.7;
  border-top: 1px solid var(--color-border);
  margin-top: .5rem;
}

/* Responsive */
/* ── COWLS Corner — Equity Race additions ────────────────────────────────── */
.cc-race-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin-bottom: 1rem;
}
.cc-race-legend-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8125rem;
}
.cc-legend-name { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.cc-legend-equity { color: var(--color-text); font-family: var(--font-data); font-size: .8125rem; }
.cc-legend-pct { font-size: .75rem; font-family: var(--font-data); }
.cc-rank-1 {
  margin-left: .2rem;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--section-color, #a855f7);
  background: color-mix(in srgb, var(--section-color, #a855f7) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--section-color, #a855f7) 35%, transparent);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
}
.cc-pos-long {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: .75rem; font-weight: 700; font-family: var(--font-data);
  color: var(--c-up); white-space: nowrap;
  background: color-mix(in srgb, var(--c-up) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-up) 28%, transparent);
}
.cc-pos-short {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: .75rem; font-weight: 700; font-family: var(--font-data);
  color: var(--c-down); white-space: nowrap;
  background: color-mix(in srgb, var(--c-down) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-down) 28%, transparent);
}
.cc-pos-flat {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: .75rem; font-weight: 500; white-space: nowrap;
  color: var(--color-text-muted); border: 1px solid var(--color-border);
}
.cc-sig-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.cc-sig-buy  { color: var(--c-up);   background: color-mix(in srgb, var(--c-up)   12%, transparent); }
.cc-sig-sell { color: var(--c-down); background: color-mix(in srgb, var(--c-down) 12%, transparent); }
.cc-sig-neutral { color: var(--color-text-muted); background: var(--color-bg-card); border: 1px solid var(--color-border); }
.cc-equity-pct { display: block; font-size: .75rem; font-family: var(--font-data); margin-top: 1px; }
.cc-market-status { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--color-text-muted); }
.cc-market-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); flex-shrink: 0; }
.cc-market-dot.open { background: var(--c-up); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-up) 30%, transparent); }

/* ── Session 9: staggered panel entry ──────────────────────────────────────── */
@keyframes ccSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.cc-group {
  animation: ccSlideUp .5s ease-out both;
  animation-delay: calc(var(--panel-idx, 0) * 80ms);
}

/* ── Time range pills ───────────────────────────────────────────────────────── */
.cc-time-pills {
  display: flex;
  gap: .3rem;
  margin-bottom: 1rem;
}
.cc-pill {
  padding: .22rem .65rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: .7rem;
  font-family: var(--font-data, monospace);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.cc-pill:hover {
  border-color: var(--section-color);
  color: var(--section-color);
}
.cc-pill.active {
  background: color-mix(in srgb, var(--section-color) 14%, transparent);
  border-color: var(--section-color);
  color: var(--section-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--section-color) 28%, transparent);
}

/* ── Neon pulse terminal dots ───────────────────────────────────────────────── */
.cc-pulse-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
.cc-pulse-dot::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: ccPulseRing 2.4s ease-out infinite;
  opacity: 0;
}
@keyframes ccPulseRing {
  0%   { opacity: .75; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.8); }
}

/* ── External tooltip ───────────────────────────────────────────────────────── */
.cc-tooltip-ext {
  position: absolute;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--section-color);
  border-radius: var(--radius-lg);
  padding: .7rem 1rem;
  min-width: 250px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity .1s;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--section-color) 12%, transparent);
}
.cc-tt-head {
  font-family: var(--font-data, monospace);
  font-size: .7rem;
  color: var(--color-text-muted);
  margin-bottom: .45rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: .03em;
}
.cc-tt-row {
  display: grid;
  grid-template-columns: 10px 1fr 58px auto auto;
  align-items: center;
  gap: .4rem;
  padding: .18rem 0;
}
.cc-tt-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cc-tt-name {
  font-size: .74rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-tt-spark { display: block; }
.cc-tt-val {
  font-family: var(--font-data, monospace);
  font-size: .74rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: right;
  white-space: nowrap;
}
.cc-tt-delta {
  font-family: var(--font-data, monospace);
  font-size: .66rem;
  text-align: right;
  white-space: nowrap;
}

/* ── COWLS Corner — Advanced Features ──────────────────────────────────── */

/* Bento KPI row */
.cc-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cc-kpi-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.cc-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--section-color, #a855f7);
  opacity: .45;
}
.cc-kpi-card:hover { border-color: color-mix(in srgb, var(--section-color, #a855f7) 35%, var(--color-border)); }
.cc-kpi-label {
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}
.cc-kpi-value {
  font-family: var(--font-data, monospace);
  font-size: 1.2rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-kpi-sub {
  font-size: .72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Secondary grid: status | trades side-by-side */
.cc-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Minimap */
.cc-minimap-wrap {
  position: relative;
  height: 48px;
  margin-top: .6rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-card) 60%, transparent);
  border: 1px solid var(--color-border);
  overflow: visible;
  cursor: ew-resize;
  flex-shrink: 0;
}
#cc-minimap {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
.cc-minimap-viewport {
  position: absolute;
  top: 0;
  height: 100%;
  background: color-mix(in srgb, var(--section-color, #a855f7) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--section-color, #a855f7) 50%, transparent);
  border-radius: 2px;
  pointer-events: none;
  min-width: 12px;
  transition: left .05s linear, width .05s linear;
}

/* Floating action bar */
.cc-action-bar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  gap: .25rem;
  background: color-mix(in srgb, var(--color-card) 92%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .28rem .45rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cc-chart-card:hover .cc-action-bar,
.cc-chart-card:focus-within .cc-action-bar {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.cc-action-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  display: flex;
  align-items: center;
  gap: .22rem;
  transition: color .15s, background .15s;
  white-space: nowrap;
  line-height: 1;
}
.cc-action-btn:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.cc-action-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.cc-action-sep {
  width: 1px;
  background: var(--color-border);
  align-self: stretch;
  margin: .15rem 0;
}

/* Particle canvas overlay */
#cc-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}

/* Pulse/flash animations */
@keyframes ccPulseUp {
  0%   { background-color: color-mix(in srgb, #10b981 22%, transparent); }
  100% { background-color: transparent; }
}
@keyframes ccPulseDown {
  0%   { background-color: color-mix(in srgb, #ef4444 22%, transparent); }
  100% { background-color: transparent; }
}
.pulse-up   { animation: ccPulseUp .7s ease-out both; border-radius: 4px; }
.pulse-down { animation: ccPulseDown .7s ease-out both; border-radius: 4px; }

/* Responsive overrides for advanced features */
@media (max-width: 1000px) {
  .cc-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .cc-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cc-kpi-row { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .cc-kpi-value { font-size: 1rem; }
  .cc-action-bar { display: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  .cc-about-strategies { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .cc-about-strategies { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .cc-strategy-grid { grid-template-columns: 1fr; }
  .cc-race-legend { gap: .4rem 1rem; }
}
@media (max-width: 600px) {
  .cc-about-strategies { grid-template-columns: 1fr; }
  .cc-mu-label, .cc-mu-sep { display: none; }
  .cc-mu-price { font-size: 1.2rem; }
  .cc-race-legend-item { font-size: .75rem; }
  .cc-table thead { display: none; }
  .cc-table tr { display: block; border-bottom: 1px solid var(--color-border); }
  .cc-table tr:last-child { border-bottom: none; }
  .cc-table td { display: block; padding: .35rem 1rem; }
  .cc-table td::before {
    content: attr(data-label) ': ';
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
  }
}


/* ============================================
   Mobile UX — Swipeable Market Cards
   ============================================ */
@media (max-width: 540px) {
  .market-band-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .market-band-body::-webkit-scrollbar { display: none; }
  .market-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
  }
  .market-card {
    flex: 0 0 136px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-right: 1px solid var(--color-border);
    border-bottom: none;
    scroll-snap-align: start;
    padding: 10px 12px;
  }
  .market-card:last-child { border-right: none; }
  .market-card:nth-child(3) { border-right: 1px solid var(--color-border); }
  .mc-info { width: auto; }
  .mc-spark { display: block; width: 100%; height: 28px; margin: 2px 0; flex: none; }
  .mc-data { min-width: 0; text-align: left; }
}

/* ============================================
   Mobile UX — Dark Hero Cinematic Enhancement
   ============================================ */
[data-theme="dark"] .carousel-hero::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(0, 212, 255, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(0, 212, 255, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 85% 75%, rgba(99, 102, 241, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 55% 10%, rgba(0, 224, 154, 0.05) 0%, transparent 60%);
}
[data-theme="dark"] .carousel-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 59px,
    rgba(255,255,255,0.018) 60px
  );
}
[data-theme="dark"] .ch-cta--primary {
  box-shadow: 0 0 22px color-mix(in srgb, var(--section-color, #f7931a) 45%, transparent);
}
[data-theme="dark"] .ch-cta--glass {
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.15);
}

/* ============================================
   Mobile UX — Article Share FAB
   ============================================ */
.art-share-fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  z-index: var(--z-overlay);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.art-share-fab:active {
  transform: scale(0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.art-share-fab.copied {
  background: color-mix(in srgb, var(--color-price-up) 15%, var(--color-card));
  border-color: var(--color-price-up);
  color: var(--color-price-up);
}
@media (max-width: 768px) {
  .art-share-fab { display: flex; }
}

/* ============================================
   Education Page
   ============================================ */

/* Tab bar */
.edu-tabs-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 var(--side-pad);
  margin: 0 0 28px;
}
.edu-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.edu-tab:hover {
  border-color: #f59e0b;
  color: var(--color-text);
}
.edu-tab--active {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  font-weight: 600;
}
.edu-tab-count {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.75rem;
  font-weight: 600;
}
.edu-tab--active .edu-tab-count {
  background: rgba(245, 158, 11, 0.25);
  color: #f59e0b;
}

/* Grid wrapper */
.edu-grid-wrap {
  padding: 0 var(--side-pad) 48px;
}
.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

/* Course card */
.edu-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.edu-card:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 24px rgba(245, 158, 11, 0.1);
}

.edu-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.edu-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Badges */
.edu-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.edu-badge--topic {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.edu-badge--level-beginner  { background: rgba(34, 197, 94, 0.12);  color: #16a34a; border: 1px solid rgba(34, 197, 94, 0.25); }
.edu-badge--level-intermediate { background: rgba(245, 158, 11, 0.12); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.25); }
.edu-badge--level-advanced  { background: rgba(239, 68, 68, 0.12);  color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.25); }

.edu-free-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: #16a34a;
  white-space: nowrap;
  flex-shrink: 0;
}

.edu-card-title {
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
}
.edu-card-provider {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 500;
}
.edu-card-summary {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--color-text-secondary, var(--color-text-muted));
  margin: 0;
  flex: 1;
}

.edu-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.edu-duration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.edu-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.edu-cta:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #0a0e1a;
}

/* Meta / last updated */
.edu-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.edu-meta svg { vertical-align: middle; }

/* Empty state */
.edu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 0;
  color: var(--color-text-muted);
  text-align: center;
}

/* Light theme overrides */
[data-theme="light"] .edu-badge--topic  { color: #b45309; }
[data-theme="light"] .edu-tab--active   { color: #b45309; }
[data-theme="light"] .edu-tab-count     { color: #b45309; }
[data-theme="light"] .edu-tab--active .edu-tab-count { color: #d97706; }
[data-theme="light"] .edu-free-note     { color: #15803d; }
[data-theme="light"] .edu-card:hover    { box-shadow: 0 4px 24px rgba(245, 158, 11, 0.15); }

@media (max-width: 600px) {
  .edu-grid { grid-template-columns: 1fr; }
  .edu-card-header { flex-direction: column; align-items: flex-start; }
  .edu-free-note { font-size: 0.7rem; }
  .edu-meta { flex-direction: column; align-items: flex-start; }
}

/* ── Author bio card (in-article) ────────────────────────────────────────── */
.author-bio-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 2.5rem 0 1.5rem;
}
.author-bio-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--color-border);
}
.author-bio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-bio-info { flex: 1; min-width: 0; }
.author-bio-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 .3rem;
}
a.author-bio-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: .15rem;
}
a.author-bio-name:hover { color: var(--color-accent); }
.author-bio-role {
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin: 0 0 .55rem;
}
.author-bio-text {
  font-size: .875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 .75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.author-bio-cta {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
a.author-bio-cta:hover { text-decoration: underline; }
a.author-bio-cta--secondary { color: var(--color-text-muted); font-weight: 500; }
.author-bio-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .25rem;
  flex-wrap: wrap;
}
.author-social-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #0077b5;
  text-decoration: none;
}
.author-social-link:hover { text-decoration: underline; }
.author-social {
  margin-top: .75rem;
}
@media (max-width: 600px) {
  .author-bio-card { flex-direction: column; align-items: center; text-align: center; }
  .author-bio-text { -webkit-line-clamp: 4; }
  .author-bio-links { justify-content: center; }
}

/* ── Byline link (Thomas articles) ──────────────────────────────────────── */
a.byline-name--link {
  color: inherit;
  text-decoration: none;
}
a.byline-name--link:hover { color: var(--color-accent); }

/* ── Author page ─────────────────────────────────────────────────────────── */
.author-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.author-hero {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem 0 2.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2.5rem;
}
.author-avatar-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 3px solid var(--color-border);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.author-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-info { flex: 1; min-width: 0; }
.author-eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 .45rem;
}
.author-name {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .3rem;
  line-height: 1.2;
}
.author-tagline {
  font-size: .9375rem;
  color: var(--color-text-muted);
  margin: 0 0 .85rem;
}
.author-bio-body {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin: 0 0 1rem;
}
.author-stats {
  display: flex;
  gap: 1.5rem;
  font-size: .8125rem;
  color: var(--color-text-muted);
}
.author-stat-val {
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-data);
  margin-right: .2rem;
}
.author-articles-heading {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 1.5rem;
}
.author-no-articles {
  text-align: center;
  padding: 2rem 0;
  color: var(--color-text-muted);
}
.author-stat-sep {
  color: var(--color-text-muted);
  opacity: .4;
}
.author-bot-section {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}
.author-bot-count {
  font-size: .85em;
  font-weight: 400;
  color: var(--color-text-muted);
}
.author-bot-note {
  font-size: .875rem;
  color: var(--color-text-muted);
  margin: -.75rem 0 1.5rem;
}
.card-badge--bot {
  background: rgba(168,85,247,.15);
  color: #a855f7;
}
@media (max-width: 640px) {
  .author-hero { flex-direction: column; align-items: center; text-align: center; }
  .author-bio-body { max-width: none; }
  .author-stats { justify-content: center; }
  .author-name { font-size: 1.6rem; }
}
[data-theme="light"] .author-bio-card { background: var(--color-card); }

/* ── Team byline — Thomas & ResearchBot ─────────────────────────────────── */
.byline-team {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.byline-bot-badge {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: var(--radius-full, 9999px);
  padding: 1px 7px;
  white-space: nowrap;
  vertical-align: middle;
}
a.byline-bot-badge--link { text-decoration: none; }
a.byline-bot-badge--link:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.author-bio-card--team .author-bio-name {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: .15rem;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMISATIONS — Items 1-20
   All rules strictly inside @media (max-width: 768px).
   Desktop layout is 100% unchanged.
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile-only elements: hidden on desktop ──────────────── */
.toc-fab           { display: none; }
.toc-sheet         { display: none; }
.toc-sheet-overlay { display: none; }
.art-share-btn     { display: none; }

@media (max-width: 768px) {

  /* ── 1. Hero CTA: remove second button ───────────────── */
  .ch-cta--glass { display: none; }

  /* ── 3. Quick Briefing: snap carousel ───────────────── */
  .qb-track { padding: 0 16px 12px; }
  .qb-card  { flex: 0 0 85vw; min-width: 85vw; }

  /* ── 4. Market band: smooth collapse transition ─────── */
  /* Mobile default-collapsed state applied by JS on load  */
  .market-band-body { transition: max-height 0.3s ease; }

  /* ── 6. Hero banner: compress ────────────────────────── */
  /* height overrides the global clamp(480px,72vh,680px) cleanly */
  .carousel-hero { height: 240px; overflow: hidden; }
  .ch-excerpt    { display: none; }
  .ch-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ch-bg img { object-position: center top; }

  /* ── 7. Card meta: single inline line ────────────────── */
  .card-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .card-read-time::before { content: "·"; margin-right: 4px; }

  /* ── 8. Cookie banner: top sheet ────────────────────── */
  .cookie-consent {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 16px 16px !important;
    padding: 20px !important;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateZ(0) !important;
  }
  #cookie-consent .cookie-consent-actions { flex-direction: column; gap: 10px; }
  #cookie-consent .cookie-btn             { width: 100%; min-height: 48px; }
  #cookie-consent .cookie-btn-accept,
  #cookie-consent .cookie-btn-save,
  #cookie-consent .cookie-btn-reject      { font-size: 15px; font-weight: 600; }

  /* ── 9. Search: full-screen overlay, no ⌘K label ─────── */
  .cmdk-trigger-kbd { display: none; }
  .cmdk-overlay {
    padding-top:    0 !important;
    padding-inline: 0 !important;
    align-items: stretch !important;
    background: var(--color-bg);
  }
  .cmdk-backdrop { display: none !important; }
  .cmdk-panel {
    flex: 1;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
    border-top: 2px solid #00d4ff !important;
    animation: none !important;
    background: var(--color-bg) !important;
  }

  /* ── 10. Footer: block layout + accordion ────────────── */
  .footer-grid         { display: block; }
  .footer-col--markets { display: none; }
  .footer-col-details {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer-col-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    min-height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-col-details > summary::-webkit-details-marker { display: none; }
  .footer-col-details[open] > summary { color: #00d4ff; }
  .footer-col-details > summary::after {
    content: "+";
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }
  .footer-col-details[open] > summary::after { content: "−"; }
  .footer-col-details-body { padding: 8px 0 16px; }

  /* ── 12. Floating TOC button + bottom sheet ──────────── */
  .toc-fab {
    display: none; /* toggled to flex via .is-visible */
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #00d4ff;
    color: #0a0e1a;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.35);
    -webkit-tap-highlight-color: transparent;
  }
  .toc-fab.is-visible { display: flex; }
  .toc-fab:focus { outline: 2px solid #00d4ff; outline-offset: 3px; }
  .toc-sheet {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-card);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px 24px;
    max-height: 65vh;
    overflow-y: auto;
    z-index: 9998;
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .toc-sheet.is-open { transform: translateY(0); }
  .toc-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .toc-sheet-overlay.is-visible { opacity: 1; pointer-events: auto; }
  .toc-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .toc-sheet-title {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .toc-list { list-style: none; padding: 0; margin: 0; }
  .toc-list li { border-bottom: 1px solid var(--color-border); }
  .toc-list li:last-child { border-bottom: none; }
  .toc-list a {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    min-height: 44px;
  }
  .toc-list a:hover  { color: #00d4ff; }
  .toc-list a:focus  { outline: 2px solid #00d4ff; outline-offset: 2px; }

  /* ── 13. Share button under article title ────────────── */
  .art-share-btn {
    display: none; /* shown as inline-flex by JS when navigator.share available */
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.4);
    font-size: 13px;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    min-height: 44px;
    margin-top: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  .art-share-btn.is-visible { display: inline-flex; }
  .art-share-btn:focus { outline: 2px solid #00d4ff; outline-offset: 2px; }

  /* ── 14. Breadcrumb: show only parent section ────────── */
  .article-breadcrumb > a:first-child        { display: none; }
  .article-breadcrumb > .bc-sep              { display: none; }
  .article-breadcrumb > .bc-current          { display: none; }
  .article-breadcrumb > .bc-section::before  { content: "‹ "; }

  /* ── 15. Disclaimer: collapsible on mobile ───────────── */
  .article-disclaimer-details {
    border-left: 3px solid rgba(255, 255, 255, 0.1);
    padding-left: 12px;
    margin: 1.5rem 0;
  }
  .article-disclaimer-details > summary {
    list-style: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .article-disclaimer-details > summary::-webkit-details-marker { display: none; }
  .article-disclaimer-details > summary:focus { outline: 2px solid #00d4ff; outline-offset: 2px; }
  .article-disclaimer-details-body {
    padding-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
  }

  /* ── 16. Touch-optimized internal links ──────────────── */
  .article-body a[href*="cowlpane"] {
    display: inline-block;
    background: rgba(0, 212, 255, 0.08);
    border-radius: 4px;
    padding: 4px 6px;
  }

  /* ── 17. Article reading typography ──────────────────── */
  .article-body p,
  .article-body li { font-size: 16px; line-height: 1.75; }
  .article-body h2 { font-size: 20px; margin-top: 32px; }
  .article-body h3 { font-size: 17px; margin-top: 24px; }

  /* ── 18. Sponsored content: amber highlight ──────────── */
  .partner-card {
    border-color: rgba(255, 200, 0, 0.25) !important;
    background-color: rgba(255, 200, 0, 0.04) !important;
  }
  .partner-sponsored-tag {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 200, 0, 0.15);
    border-radius: 20px;
    padding: 2px 8px;
    letter-spacing: 0.05em;
    color: rgba(255, 200, 0, 0.9);
  }

  /* ── 19. Sticky filter chips on section pages ─────────── */
  .sec-tabs-wrap {
    position: sticky;
    top: 56px;
    z-index: 100;
    background: var(--color-bg);
    padding: 4px 0;
  }

}

/* ══════════════════════════════════════════════════════════
   P1 BUG FIXES (session 30)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Bug 2: homepage filter pills wrap into 2–3 rows; make them
     a single horizontally scrollable row like the chip nav       */
  .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pill { flex-shrink: 0; }

  /* Bug 3: art-share-fab, toc-fab, and backToTop all land at
     right: 16px / bottom ≈ 68–72px — three elements overlapping.
     Fix: move share FAB to the left rail; lift toc-fab above
     the backToTop zone; keep backToTop on the right at its
     existing position.                                            */
  .art-share-fab {
    right: auto;
    left: 16px;
  }
  .toc-fab.is-visible {
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  /* Bug 4: carousel-hero global height is clamp(480px,72vh,680px).
     max-height: 240px clips it but leaves the element's own height
     model at 480px, causing subtle layout artefacts.
     Setting height directly is cleaner (already patched above in
     the session-29 block — this rule is intentionally redundant
     as insurance against specificity races).                       */
  .carousel-hero { height: 240px !important; }
}

/* ── Reduced motion: disable all mobile transitions ────────── */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .qb-track,
  .market-band-body,
  .toc-sheet,
  .toc-sheet-overlay {
    transition: none !important;
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   P2 UX FIXES (session 30)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Item 5: Ticker slides out on scroll-down, back on scroll-up.
     JS toggles .ticker-hidden and updates --ticker-height to 0px
     so the sticky header shifts up automatically.               */
  .price-ticker { transition: height 250ms ease, border-bottom-width 250ms ease; }
  .price-ticker.ticker-hidden {
    height: 0 !important;
    border-bottom-width: 0 !important;
    overflow: hidden !important;
  }

  /* Item 6: Article hero 21:9 ≈ 133px at 375px vs 16:9 ≈ 210px */
  .article-hero-img { aspect-ratio: 16 / 9; }

  /* Item 7: Read Next converted to horizontal snap-scroll row     */
  #article-related .card-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
    background: transparent;
    border-radius: 0;
    margin: 0 -1.25rem;
    padding: 0 1.25rem 12px;
  }
  #article-related .card-grid::-webkit-scrollbar { display: none; }
  #article-related .card-grid.rn-scrolling .article-card { pointer-events: none; }
  #article-related .article-card {
    flex: 0 0 80vw;
    min-width: 280px;
    max-width: 320px;
    scroll-snap-align: start;
    border-radius: var(--radius-base);
  }

  /* Item 8: Newsletter first; trending/partner/more-sections hidden */
  .sec-sidebar { order: -1; }
  .sec-sidebar .sidebar-widget:not(.sidebar-newsletter) { display: none !important; }

  /* Item 9: article bottom-padding (body already pads for bottom nav) */
  .article-page { padding-bottom: 1.5rem; }
}

/* Ticker transition excluded from reduced-motion */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .price-ticker { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
   P3 POLISH FIXES (session 30)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Item 10: keyword pills — 44px WCAG 2.5.5 touch target        */
  .article-keyword {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Item 13: section hero — show only eyebrow (count) + title    */
  .sec-hero { padding: 20px 0 16px; }
  .sec-hero-desc,
  .sec-hero-actions { display: none !important; }

  /* Item 14: reading mode button — icon only (aria-label present) */
  .rm-label { display: none; }

  /* Item 17: top share button redundant with left-rail FAB        */
  #art-share-btn-top { display: none !important; }

  /* Item 15: market band toggle — 44×44 touch target             */
  .market-band-toggle {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
  }
}

/* ── 404 Not-Found Page ──────────────────────────────────────── */
.not-found-page {
  position: relative;
  min-height: calc(100vh - var(--header-height, 64px) - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  overflow: hidden;
}
.nf-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.07) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
}
.nf-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.nf-code {
  font-size: clamp(6rem, 20vw, 10rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--color-accent) 0%, rgba(0,212,255,0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  user-select: none;
}
.nf-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}
.nf-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 2.5rem;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
.nf-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.nf-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.15s;
  min-height: 44px;
}
.nf-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.nf-btn--primary {
  background: var(--color-accent);
  color: #000;
}
.nf-btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.nf-btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.nf-sections-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.875rem;
}
.nf-section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.nf-section-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--section-color, var(--color-accent));
  color: var(--section-color, var(--color-accent));
  transition: background 0.15s, color 0.15s;
  min-height: 36px;
}
.nf-section-pill:hover {
  background: var(--section-color, var(--color-accent));
  color: #000;
}
@media (max-width: 480px) {
  .nf-actions { flex-direction: column; align-items: center; }
  .nf-btn { width: 100%; max-width: 280px; justify-content: center; }
}

/* ── G1-1. Scroll-hide header (mobile) ──────────────────── */
@media (max-width: 768px) {
  .site-header.header-hidden {
    transform: translateY(-100%);
  }
}

/* ── G2-5. Toast notification ───────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── G2-9. Section-color card border (always-on, mobile) ── */
@media (max-width: 768px) {
  .article-card {
    border-left-color: color-mix(in srgb, var(--section-color, var(--color-accent)) 55%, transparent);
  }
}

/* ── G2-10. QB peek indicator (mobile) ──────────────────── */
@media (max-width: 768px) {
  .quick-briefing {
    position: relative;
  }
  .quick-briefing::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to left, var(--color-bg), transparent);
    pointer-events: none;
    z-index: 2;
  }
  .qb-card { flex: 0 0 79vw; min-width: 79vw; }
}

/* ── G3-11. Card skeleton shimmer ───────────────────────── */
@keyframes card-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: card-shimmer 1.6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.card-media.img-ready::before { display: none; }
.qb-img-wrap { position: relative; }
.qb-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: card-shimmer 1.6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.qb-img-wrap.img-ready::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .card-media::before, .qb-img-wrap::before { animation: none; }
}

/* ── G3-14. Read-progress continue pill ─────────────────── */
.rp-continue {
  display: block;
  margin: 0 auto 14px;
  padding: 7px 18px;
  background: color-mix(in srgb, var(--section-color, var(--color-accent)) 12%, var(--color-card));
  border: 1px solid color-mix(in srgb, var(--section-color, var(--color-accent)) 28%, transparent);
  border-radius: var(--radius-full);
  color: var(--section-color, var(--color-accent));
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

/* ── G3-15. Pinned badge ─────────────────────────────────── */
.card-badge--pinned {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}

/* ── G3-16. Long-press card preview ─────────────────────── */
.lp-preview {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  width: min(90vw, 360px);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lp-preview.is-visible { opacity: 1; transform: translateX(-50%) scale(1); }
.lp-img  { width: 100%; height: 110px; object-fit: cover; display: block; }
.lp-body { padding: 12px 16px 14px; }
.lp-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--section-color, var(--color-accent));
  background: color-mix(in srgb, var(--section-color, var(--color-accent)) 14%, transparent);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
  display: block;
}
.lp-title {
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-excerpt {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── G3-17. Mobile newsletter CTA ───────────────────────── */
.mobile-nl-cta {
  margin: 0 16px 24px;
  padding: 20px;
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-card));
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
  border-radius: 16px;
}
.mnl-heading { font-size: 1rem; font-weight: var(--weight-bold); color: var(--color-text); margin: 0 0 12px; }
.mnl-form    { display: flex; gap: 8px; }
.mnl-input {
  flex: 1; min-width: 0;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: 0.875rem;
  font-family: inherit;
}
.mnl-input:focus { outline: 2px solid var(--color-accent); border-color: transparent; }
.mnl-btn {
  padding: 10px 16px;
  background: var(--color-accent);
  color: #000;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mnl-sub     { font-size: 0.75rem; color: var(--color-text-muted); margin: 10px 0 0; text-align: center; }
.mnl-success { font-size: 1rem; font-weight: var(--weight-medium); color: var(--color-price-up); text-align: center; margin: 0; }

/* ── G3-18. TOC active section ───────────────────────────── */
.toc-list a.toc-active {
  color: #00d4ff;
  font-weight: var(--weight-semibold);
}

/* ── G3-20. 480px typography ─────────────────────────────── */
@media (max-width: 480px) {
  .article-title { font-size: clamp(22px, 6.5vw, 26px); line-height: 1.12; }
  .article-deck  { font-size: 0.9375rem; }
  .article-body p,
  .article-body li { font-size: 15.5px; line-height: 1.72; }
  .article-body h2 { font-size: 18px; margin-top: 28px; }
  .article-body h3 { font-size: 15.5px; margin-top: 20px; }
  .card-title      { font-size: 0.9375rem; }
  .card-excerpt    { font-size: 0.8rem; -webkit-line-clamp: 2; }
}

/* ============================================================
   REDESIGN 2026 — Financial Editorial
   Inspired by: lukebaffait.fr · matveyan.com · synapserstudio.com
   ============================================================ */

/* ── Design token overrides ──────────────────────────────────────────────────── */
:root {
  --ticker-height:        0px;    /* ticker removed — keeps calc() expressions valid */

  /* wonjyou.studio-inspired neutral dark palette */
  --color-bg:             #0c0c0c;
  --color-bg-secondary:   #141414;
  --color-card:           #161616;
  --color-card-hover:     #1e1e1e;
  --color-border:         rgba(255, 255, 255, 0.10);
  --color-shadow:         rgba(0, 0, 0, 0.55);
  --color-shadow-hover:   rgba(0, 0, 0, 0.72);
  --color-text:           #f0f0f0;
  --color-text-secondary: #888888;
  --color-text-muted:     #666666;
  --color-dot:            rgba(255, 255, 255, 0.018); /* subtler texture */

  /* Extended display type scale */
  --text-6xl: 3.5rem;
  --text-7xl: 5rem;
  --text-8xl: 6.5rem;
}

html[data-theme="light"] {
  --color-accent: #0060c8;
  --c-accent:     #0060c8;
}

/* ── Animations — more dramatic reveal ──────────────────────────────────────── */
.anim-entry {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-block .editorial-grid > * {
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-block.is-visible .editorial-grid > *:nth-child(1) { transition-delay:   0ms; }
.section-block.is-visible .editorial-grid > *:nth-child(2) { transition-delay: 100ms; }
.section-block.is-visible .editorial-grid > *:nth-child(3) { transition-delay: 200ms; }

/* ── Card hover — lift instead of scale ─────────────────────────────────────── */
.editorial-grid .article-card:hover {
  border-color: color-mix(in srgb, var(--section-color, var(--color-border)) 60%, var(--color-border));
  box-shadow:
    0 24px 64px -12px color-mix(in srgb, var(--section-color, #000) 30%, var(--color-shadow-hover)),
    0 8px 24px var(--color-shadow);
  transform: translateY(-5px) scale(1.005);
}

/* ── Lead card — bigger title ────────────────────────────────────────────────── */
.ec-lead .card-title {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  -webkit-line-clamp: 3;
  line-height: 1.2;
}

/* ── Editorial grid — more spacious ─────────────────────────────────────────── */
.editorial-grid { gap: 1.625rem; }
.ec-secondary-pair { gap: 1.625rem; }
.ec-row-3up,
.ec-row-2up       { gap: 1.625rem; }

/* ── Section spacing ─────────────────────────────────────────────────────────── */
.section-block { padding-bottom: 3.5rem; }

/* ── Nav link — refined ──────────────────────────────────────────────────────── */
.nav-link {
  letter-spacing: 0.01em;
  font-size: 0.8125rem;
}

/* ══════════════════════════════════════════════════════════
   EDITORIAL SPLIT HERO
   ══════════════════════════════════════════════════════════ */
.editorial-hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  background: var(--color-border);
  gap: 2px;
  max-width: 100%;
  margin: 0 0 2.5rem;
  overflow: hidden;
}

/* Lead */
.eh-lead {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-card);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.eh-lead-img {
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}
.eh-lead-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.eh-lead:hover .eh-lead-img img { transform: scale(1.04); }
.eh-lead-body {
  padding: 2rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.eh-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--section-color, var(--color-accent));
  width: fit-content;
}
.eh-lead-title {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3.2vw, 2.625rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-text);
  transition: color 0.22s ease;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eh-lead:hover .eh-lead-title { color: var(--section-color, var(--color-accent)); }
.eh-lead-excerpt {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eh-cta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--section-color, var(--color-accent));
}

/* Right stack */
.eh-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-border);
}
.eh-secondary {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-card);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.eh-secondary:hover { background: var(--color-card-hover); }
.eh-sec-img {
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}
.eh-sec-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.eh-secondary:hover .eh-sec-img img { transform: scale(1.06); }
.eh-sec-body {
  padding: 0.625rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.eh-sec-title {
  font-family: var(--font-headline);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}
.eh-secondary:hover .eh-sec-title { color: var(--section-color, var(--color-accent)); }

/* Light mode */
html[data-theme="light"] .eh-lead,
html[data-theme="light"] .eh-secondary { background: #ffffff; }
html[data-theme="light"] .eh-lead:hover,
html[data-theme="light"] .eh-secondary:hover { background: #f7f7f4; }
html[data-theme="light"] .editorial-hero { background: var(--color-border); }

/* Responsive */
@media (max-width: 960px) {
  .editorial-hero { grid-template-columns: 1fr; }
  .eh-stack { display: none; }
  .eh-lead-img img { aspect-ratio: 16 / 9; }
  .eh-lead-body { padding: 1.5rem 1.75rem 2rem; }
}
@media (max-width: 600px) {
  .eh-lead-body  { padding: 1.25rem 1.25rem 1.625rem; }
  .eh-lead-title { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
}

/* ══════════════════════════════════════════════════════════
   ARTICLE — Reading Experience Upgrade
   ══════════════════════════════════════════════════════════ */

/* Wider reading column */
.article-page { max-width: 760px; }

/* Larger headline */
.article-title {
  font-size: clamp(1.875rem, 5vw, 3.375rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}

/* Hero image — full bleed feel */
.article-hero-img {
  border-radius: var(--radius-sm);
  margin: 1.75rem 0 2.75rem;
}

/* Drop cap — lead paragraph only */
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-headline);
  font-size: 3.5em;
  font-weight: 800;
  float: left;
  line-height: 0.82;
  margin: 0.05em 0.13em -0.05em 0;
  color: var(--section-color, var(--color-accent));
  letter-spacing: -0.02em;
}

/* Bigger subheadings in body */
.article-body h2 {
  font-size: clamp(1.375rem, 2.8vw, 1.8125rem);
  margin-top: 2.75em;
}
.article-body h3 {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
}

/* ── Section hero — more dramatic ───────────────────────────────────────────── */
.sec-hero-title {
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  letter-spacing: -0.035em;
}

/* Keep drop-cap away from cowls/analysis articles (they have hook paragraphs) */
.article-page[data-asec="trading"] .article-body > p:first-of-type::first-letter,
.article-page[data-asec="crypto"]  .article-body > p:first-of-type::first-letter {
  font-size: 2.75em;
}

/* Disable drop cap on very small screens */
@media (max-width: 480px) {
  .article-body > p:first-of-type::first-letter { float: none; font-size: inherit; font-family: inherit; color: inherit; font-weight: inherit; line-height: inherit; margin: 0; }
  .article-title { font-size: clamp(1.5rem, 7vw, 1.875rem) !important; }
}

/* ══════════════════════════════════════════════════════════
   MINIMAL TRANSPARENT NAV — Phase B redesign
   aircenter.space inspired: transparent at top, appears on scroll
   ══════════════════════════════════════════════════════════ */

/* Shell — true overlay, no space taken from layout flow */
.site-header {
  top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  padding: 0 1.5rem;
}

/* Inner bar — always flat, no pill */
.header-inner {
  height: 60px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition:
    background     0.38s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.38s ease,
    box-shadow     0.38s ease;
}

/* On scroll: frosted dark surface appears */
.site-header.is-scrolled .header-inner {
  background: rgba(7, 7, 15, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Nav links — uppercase minimal, no backgrounds */
.nav-link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 240, 234, 0.65);
  padding: 0.4rem 0.7rem;
  border-bottom: none;
  border-radius: 0;
  transition: color 0.2s ease;
}
.nav-link:hover,
.nav-link:focus {
  color: #ffffff;
  background: transparent;
  border-bottom-color: transparent;
}

/* Search + theme toggle — ghost on transparent bg */
.cmdk-trigger,
.theme-toggle {
  color: rgba(240, 240, 234, 0.65);
  border-color: transparent;
  background: transparent;
}
.cmdk-trigger:hover,
.theme-toggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Logo — full opacity always */
.site-logo { opacity: 1; }
.site-logo:hover { opacity: 0.8; }

/* Hamburger button */
.nav-toggle {
  color: rgba(240, 240, 234, 0.65);
}
.nav-toggle:hover { color: #ffffff; }

/* Mobile — same transparent approach, slightly smaller */
@media (max-width: 960px) {
  .site-header { padding: 0 1rem; }
  .header-inner { height: 52px; }
}

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHIC HERO — mors.design inspired
   ══════════════════════════════════════════════════════════ */
.typo-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 52% 48%;
  overflow: hidden;
}

/* Left panel: shader canvas + headline */
.hero-hl-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--ticker-height) + 72px + 2rem) 2.5rem 3rem;
}
/* Vignette — fades shader rightward into the photo panel */
.hero-hl-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent 50%, var(--color-bg) 100%),
    radial-gradient(ellipse 100% 60% at 50% 50%, transparent 50%, rgba(7,7,15,0.45) 100%);
  z-index: 1;
}
/* Shader canvas — fills the left panel */
.hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}
/* Suppress ambient glow blobs — shader handles the background */
.typo-hero::before { display: none; }

.typo-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Label row */
.typo-hero-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2.25rem;
}
.th-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Headline */
.typo-hero-headline {
  display: flex;
  flex-direction: column;
  font-family: var(--font-headline);
  font-size: clamp(3.75rem, 11vw, 8.5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--color-text);
  margin: 0 0 2.25rem;
}
.th-line { display: block; }
.th-period { color: var(--color-accent); }

/* Subtitle */
.typo-hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin-bottom: 2.75rem;
}

/* CTAs */
.typo-hero-ctas {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.th-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #f0f0f0;
  background: transparent;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.th-cta::after {
  content: '↗';
  font-size: 0.875em;
  transition: transform 0.22s ease;
}
.th-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}
.th-cta:hover::after { transform: translate(2px, -2px); }

/* Remove old primary/secondary distinction — single ghost style */
.th-cta--primary  { border-color: rgba(255, 255, 255, 0.45); }
.th-cta--secondary { border-color: rgba(255, 255, 255, 0.18); color: #888888; }
.th-cta--secondary:hover { color: #f0f0f0; }

/* Scroll indicator */
.typo-hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  z-index: 1;
  animation: scroll-bob 2.4s ease-in-out infinite;
}
@keyframes scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* Light mode */
html[data-theme="light"] .typo-hero-headline { color: var(--color-text); }
html[data-theme="light"] .th-cta {
  border-color: rgba(0, 0, 0, 0.30);
  color: var(--color-text);
}
html[data-theme="light"] .th-cta:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.55);
}

/* Responsive */
@media (max-width: 768px) {
  .typo-hero-headline { font-size: clamp(3rem, 16vw, 5rem); }
  .typo-hero-sub { font-size: 1rem; }
  .typo-hero-scroll { display: none; }
}
@media (max-width: 480px) {
  .typo-hero-headline { font-size: clamp(2.75rem, 18vw, 4rem); letter-spacing: -0.03em; }
}

/* ══════════════════════════════════════════════════════════
   SCROLL-DRIVEN ARTICLE ANIMATIONS — "flying" effect
   ══════════════════════════════════════════════════════════ */

/* Base — bigger displacement, snappy spring easing */
.anim-entry {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  transition:
    opacity   0.88s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.88s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-entry.is-visible {
  opacity: 1;
  transform: none;
}

/* Editorial grid children — directional fly per slot */
.section-block .editorial-grid > * {
  opacity: 0;
  transition:
    opacity   0.88s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.88s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Lead (8 cols, left) — fly from bottom-left */
.section-block .ec-lead {
  transform: translateX(-40px) translateY(80px) scale(0.95);
}
/* Secondary pair (4 cols, right) — fly from right */
.section-block .ec-secondary-pair {
  transform: translateX(60px) translateY(40px) scale(0.97);
}
/* Wide bar — from bottom */
.section-block .ec-wide {
  transform: translateY(70px) scale(0.97);
}
/* Resolved states with stagger */
.section-block.is-visible .editorial-grid > *:nth-child(1) {
  opacity: 1; transform: none; transition-delay:   0ms;
}
.section-block.is-visible .editorial-grid > *:nth-child(2) {
  opacity: 1; transform: none; transition-delay: 150ms;
}
.section-block.is-visible .editorial-grid > *:nth-child(3) {
  opacity: 1; transform: none; transition-delay: 300ms;
}

/* Section page article grid — alternating sides */
.sec-article-grid .article-card:nth-child(3n + 1) {
  transform: translateX(-55px) translateY(45px) scale(0.96);
}
.sec-article-grid .article-card:nth-child(3n + 2) {
  transform: translateY(85px) scale(0.94);
}
.sec-article-grid .article-card:nth-child(3n + 3) {
  transform: translateX(55px) translateY(45px) scale(0.96);
}
/* Lead card on section page always from bottom */
.sec-article-grid .article-card.ec-lead {
  transform: translateY(80px) scale(0.95);
}

/* Reduced motion — disable all */
@media (prefers-reduced-motion: reduce) {
  .anim-entry,
  .section-block .editorial-grid > *,
  .sec-article-grid .article-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PHASE C — EDITORIAL CARD SYSTEM & MAGAZINE GRID
   Wired-inspired: flat cards, no borders, tight editorial grid
   ══════════════════════════════════════════════════════════ */

/* ── Flatten all article cards globally ──────────────────────────────────────
   Remove all decoration — let the image + typography do the work.             */
.article-card {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.article-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}
.card-media {
  border-radius: 0 !important;
}
.card-media:has(img)::after { display: none; } /* remove gradient overlay */

/* Image hover: subtle zoom only */
.article-card:hover .card-media img {
  transform: scale(1.04);
}

/* Card body — zero padding on sides (grid handles spacing) */
.card-body {
  padding: 0.75rem 0 0;
  background: transparent !important;
}

/* Category badge — flat uppercase text, no pill */
.card-badge {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--section-color, var(--color-accent));
  margin-bottom: 0.5rem;
}
.card-badge--analysis { color: #fbbf24; }
.card-badge--cowls    { color: #34d399; }
.card-badge--pinned   { color: var(--color-accent); }
.card-badge--bot      { color: #a855f7; }

/* Card title — sharp serif */
.card-title {
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  transition: color 0.18s ease;
}
.article-card:hover .card-title {
  color: var(--section-color, var(--color-text));
}

/* Card meta — no separator line */
.card-meta {
  border-top: none;
  padding-top: 0.375rem;
  margin-top: 0.375rem;
}

/* Section header — Wired editorial style */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.625rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--section-color, var(--color-accent));
}
.section-eyebrow { display: none; }
.section-title {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0;
}
.section-title strong { color: var(--section-color, var(--color-accent)); }

/* ── MAGAZINE GRID — homepage only ──────────────────────────────────────────
   1 lead (60%) + stack (40%) on top, then 3-col row below.
   Mobile-first: single column, stacked.                                        */

.mag-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Top row */
.mag-top {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Lead article */
.mag-lead {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.mag-lead .card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 0.875rem;
}
.mag-lead .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.mag-lead:hover .card-media img { transform: scale(1.04); }
.mag-lead .card-body { padding: 0; }
.mag-lead .card-title {
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.mag-lead:hover .card-title { color: var(--section-color, var(--color-accent)); }

/* Stack — right column */
.mag-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mag-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: inherit;
  align-items: start;
}
.mag-item:first-child { padding-top: 0; }
.mag-item:last-child  { border-bottom: none; padding-bottom: 0; }
.mag-item .card-media {
  width: 88px;
  aspect-ratio: 1;
  overflow: hidden;
  flex-shrink: 0;
}
.mag-item .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.mag-item:hover .card-media img { transform: scale(1.06); }
.mag-item .card-body { padding: 0; }
.mag-item .card-title {
  font-size: 0.875rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mag-item:hover .card-title { color: var(--section-color, var(--color-accent)); }

/* Bottom row — 3 equal columns */
.mag-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.mag-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.mag-card .card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.mag-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.mag-card:hover .card-media img { transform: scale(1.05); }
.mag-card .card-body { padding: 0; }
.mag-card .card-title {
  font-size: 0.9375rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mag-card:hover .card-title { color: var(--section-color, var(--color-accent)); }

/* Mobile magazine grid */
@media (max-width: 768px) {
  .mag-top {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .mag-stack { gap: 0; }
  .mag-item {
    grid-template-columns: 76px 1fr;
    padding: 0.875rem 0;
  }
  .mag-item .card-media { width: 76px; }
  .mag-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mag-card .card-body {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .mag-card:last-child .card-body { border-bottom: none; }
  .mag-card .card-media { margin-bottom: 0.625rem; }
}

@media (max-width: 480px) {
  .mag-item { grid-template-columns: 68px 1fr; }
  .mag-item .card-media { width: 68px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE OPTIMISATION — comprehensive
   ══════════════════════════════════════════════════════════ */

/* ── 1. Kill horizontal translateX on mobile — prevents overflow ─────────────
   Cards flying in from left/right look great on desktop but cause a horizontal
   flash on mobile. Override all directional X animations with pure translateY.  */
@media (max-width: 768px) {
  .sec-article-grid .article-card:nth-child(3n + 1),
  .sec-article-grid .article-card:nth-child(3n + 2),
  .sec-article-grid .article-card:nth-child(3n + 3),
  .sec-article-grid .article-card.ec-lead {
    transform: translateY(55px) scale(0.96);
  }
  .section-block .ec-lead,
  .section-block .ec-secondary-pair,
  .section-block .ec-wide {
    transform: translateY(50px) scale(0.97);
  }
}

/* ── 2. Hero — headline, subtitle, CTA on mobile ─────────────────────────────
   Smaller headline so all 3 lines + CTAs fit comfortably without scrolling.
   CTAs go full-width stacked so they're easy to tap.                           */
@media (max-width: 768px) {
  .typo-hero-label  { margin-bottom: 1rem; font-size: 0.625rem; }

  .typo-hero-headline {
    font-size: clamp(2.375rem, 12.5vw, 3.5rem);
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
  }

  .typo-hero-sub {
    font-size: 0.9375rem;
    margin-bottom: 1.75rem;
    max-width: 100%;
  }

  .typo-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .th-cta {
    justify-content: center;
    text-align: center;
    padding: 0.875rem 1.25rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .typo-hero-headline {
    font-size: clamp(2.125rem, 13vw, 2.875rem);
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
  }
  .typo-hero-sub { display: none; } /* too much content on smallest screens */
}

/* ── 3. Bot race — 2 columns between 601–768px, 1 below 600px ────────────────
   3 bot cards in 3 columns is too tight at tablet-portrait width.              */
@media (max-width: 768px) and (min-width: 601px) {
  .cowls-race-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 4. Section hero title on small screens ──────────────────────────────────
   clamp(2.25rem, 6vw, 4.25rem) → at 390px = 23px via vw, clamped to 2.25rem.
   Still feels oversized; reduce max.                                            */
@media (max-width: 640px) {
  .sec-hero-title {
    font-size: clamp(1.75rem, 10vw, 2.625rem) !important;
    letter-spacing: -0.025em;
  }
  .sec-hero-desc { font-size: 0.9375rem; }
}

/* ── 5. General spacing — tighten on ≤480px ─────────────────────────────────
   Reduces padding/gap across components that felt over-spaced on small phones. */
@media (max-width: 480px) {
  .section-block  { padding-bottom: 2rem; }
  .editorial-grid { gap: 0.875rem; }
  .ec-secondary-pair, .ec-row-3up, .ec-row-2up { gap: 0.875rem; }

  .cowls-race { padding: 14px; margin-bottom: 16px; }
  .cowls-race-grid { gap: 8px; }

  .market-band { margin-bottom: 10px; }

  .section-header { margin-bottom: 1rem; }
  .section-title  { font-size: 1.1875rem; }

  .card-body { padding: 0.875rem 1rem 1rem; }
  .card-title { font-size: 1rem; }
  .card-excerpt { display: none; } /* remove excerpt to reduce card height on tiny screens */
}

/* ── Bot race cards — compact on mobile ──────────────────────────────────────*/
@media (max-width: 480px) {
  .cowls-bot-card { padding: 10px 12px; }
  .cbc-pnl { font-size: 0.9375rem; }
}

/* ── Article page — tighter on mobile ───────────────────────────────────────*/
@media (max-width: 480px) {
  .article-page { padding: 0 1rem 3rem; }
  .article-hero-img { margin: 1rem 0 1.75rem; border-radius: var(--radius-xs); }
  .author-bio-card { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════
   PHASE D — CINEMATIC HERO
   Slide-in text animation + featured article overlay
   ══════════════════════════════════════════════════════════ */

/* ── Hero layout adjustment — featured article fills right panel ─────────────*/
.typo-hero-inner {
  flex-shrink: 0;
}

/* ── Slide-in animations for hero text ───────────────────────────────────────
   CSS-only: each element animates in on page load, no JS needed.               */
@keyframes th-slide-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.typo-hero-label {
  animation: th-slide-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.th-line:nth-child(1) { animation: th-slide-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.th-line:nth-child(2) { animation: th-slide-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; }
.th-line:nth-child(3) { animation: th-slide-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.41s both; }

/* Disable for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .typo-hero-label,
  .th-line { animation: none; opacity: 1; transform: none; }
}

/* ── Featured article inside hero ────────────────────────────────────────────*/
.hero-feature {
  display: block;
  position: relative;
  width: 100%;
  min-height: 0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  animation: th-slide-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
  z-index: 2;
}

.hf-img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
.hf-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.hf-img--placeholder {
  background: var(--color-card);
  min-height: 340px;
}
.hero-feature:hover .hf-img img { transform: scale(1.03); }

.hf-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5rem 2rem 2.5rem;
  background: linear-gradient(
    to top,
    rgba(7, 7, 15, 0.96) 0%,
    rgba(7, 7, 15, 0.7)  40%,
    transparent          100%
  );
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hf-badge {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--section-color, var(--color-accent));
}
.hf-title {
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 3.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 70ch;
}
.hf-read {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--section-color, var(--color-accent));
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.hero-feature:hover .hf-read {
  opacity: 1;
  transform: translateX(0);
}

/* Scroll indicator — sits at the bottom */
.typo-hero-scroll {
  position: absolute;
  bottom: 1.75rem;
  right: 2rem;
  left: auto;
  transform: none;
  flex-direction: row;
  gap: 6px;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
}
@keyframes scroll-bob {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* Mobile */
@media (max-width: 768px) {
  .typo-hero { grid-template-columns: 1fr; min-height: 100svh; }
  .hero-hl-panel { min-height: 52vh; justify-content: flex-end; padding: calc(var(--ticker-height) + 72px + 1rem) 1.5rem 2rem; }
  .hero-hl-panel::after { background: linear-gradient(to bottom, transparent 50%, var(--color-bg) 100%), radial-gradient(ellipse 100% 60% at 50% 50%, transparent 50%, rgba(7,7,15,0.45) 100%); }
  .hf-img { min-height: 220px; }
  .hf-overlay { padding: 3rem 1.25rem 1.5rem; }
  .hf-title { font-size: clamp(1.1rem, 5.5vw, 1.5rem); }
  .typo-hero-scroll { display: none; }
}

/* ══════════════════════════════════════════════════════════
   PHASE E — WIRED-STYLE ARTICLE PAGE
   Full-bleed image, editorial typography, pull quotes
   ══════════════════════════════════════════════════════════ */

/* ── Full-bleed hero image ───────────────────────────────────────────────────
   Breaks out of the 760px reading column to span the full viewport.
   Formula: margin-left = 50% (half of container) - 50vw (half of viewport)   */
.article-hero-img {
  width: 100vw !important;
  max-width: 100vw !important;
  /* (100% - 100vw) / 2: 100% = content-box width of article-page,
     auto-compensates for any padding without hardcoding values */
  margin-left: calc((100% - 100vw) / 2) !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 520px !important;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 3rem;
  object-fit: cover;
}

/* ── Article header typography ───────────────────────────────────────────────*/
.article-title {
  font-size: clamp(2rem, 6vw, 3.875rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

/* Deck — italic lead with left accent */
.article-deck {
  font-size: clamp(1rem, 1.9vw, 1.1875rem);
  line-height: 1.65;
  color: var(--color-text-secondary);
  font-style: italic;
  border-left: 3px solid var(--section-color, var(--color-accent));
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

/* Meta bar — thinner separator, no bottom border */
.article-meta-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
}

/* Byline — compact */
.article-byline { padding-top: 0.25rem; margin-top: 0; }
.byline-name    { font-size: 0.8125rem; }
.byline-name--link { color: var(--color-text-secondary); }
.byline-name--link:hover { color: var(--color-text); }

/* Section tag — flat uppercase label */
.article-section-tag {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 1.25rem;
  border-radius: 0;
}

/* ── Article body ────────────────────────────────────────────────────────────*/
.article-body {
  font-size: clamp(17px, 1.85vw, 20px);
  line-height: 1.88;
}

/* Pull quotes — blockquote styled as editorial aside */
.article-body blockquote {
  border-left: 3px solid var(--section-color, var(--color-accent));
  margin: 2.5rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-family: var(--font-headline);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text);
}
.article-body blockquote p { margin-bottom: 0; }

/* Image captions */
.article-body figcaption,
.article-body .caption {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* Images within body — can also be full-bleed */
.article-body figure {
  margin: 2rem 0;
}
.article-body figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Author bio card — minimal ───────────────────────────────────────────────*/
.author-bio-card {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  padding: 1.5rem 0 !important;
  margin-top: 2rem;
}

/* ── Article back link ───────────────────────────────────────────────────────*/
.article-back {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0;
}
.article-back-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.18s ease;
}
.article-back-link:hover { color: var(--section-color, var(--color-accent)); }

/* ── Keywords — flat tags ────────────────────────────────────────────────────*/
.article-keyword,
.article-keyword--link {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 !important;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  padding: 3px 8px !important;
  color: var(--color-text-muted);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.article-keyword--link:hover {
  border-color: var(--section-color, var(--color-accent)) !important;
  color: var(--section-color, var(--color-accent));
}

/* ── Disclaimer — minimal ────────────────────────────────────────────────────*/
.article-disclaimer {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-left: none;
  background: transparent;
  padding: 1.25rem 0;
  margin: 2rem 0 1.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .article-hero-img {
    aspect-ratio: 16 / 9 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 2rem !important;
  }
  .article-title { letter-spacing: -0.025em; }
  .article-deck  { font-size: 0.9375rem; padding-left: 0.75rem; }
  .article-body blockquote { font-size: 1.125rem; padding-left: 1rem; }
}

@media (max-width: 480px) {
  .article-hero-img { aspect-ratio: 4 / 3 !important; }
}

/* Desktop: keep hero within the reading column */
@media (min-width: 769px) {
  .article-hero-img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--radius-sm) !important;
  }
}

/* ── wonjyou-style ghost buttons — all secondary actions ────────────────────── */
.section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.375rem 0.75rem;
  border-radius: 0;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-link:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.05);
}

/* Remove old section-link style (was plain text) */

/* ── Bot Race — background image with overlay ───────────────────────────────── */
.cowls-race {
  background:
    linear-gradient(
      135deg,
      rgba(7, 7, 15, 0.91) 0%,
      rgba(0, 10, 30, 0.86) 100%
    ),
    url('https://images.unsplash.com/photo-1614028674026-a65e31bfd27c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixlib=rb-4.1.0&q=80&w=1080')
    center / cover no-repeat;
  border-left: 3px solid var(--color-accent);
  border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="light"] .cowls-race {
  background:
    linear-gradient(
      135deg,
      rgba(5, 20, 50, 0.88) 0%,
      rgba(0, 15, 40, 0.82) 100%
    ),
    url('https://images.unsplash.com/photo-1614028674026-a65e31bfd27c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixlib=rb-4.1.0&q=80&w=1080')
    center / cover no-repeat;
}
/* Keep text legible on the dark photo */
html[data-theme="light"] .cowls-race .cowls-race-title a,
html[data-theme="light"] .cowls-race .cowls-race-sub,
html[data-theme="light"] .cowls-race .cbc-ticker,
html[data-theme="light"] .cowls-race .cbc-name,
html[data-theme="light"] .cowls-race .cbc-strat,
html[data-theme="light"] .cowls-race .cbc-pnl,
html[data-theme="light"] .cowls-race .cbc-strat-name,
html[data-theme="light"] .cowls-race .cbc-strat-rank,
html[data-theme="light"] .cowls-race .cbc-bench-label,
html[data-theme="light"] .cowls-race .cowls-race-disc,
html[data-theme="light"] .cowls-race .cowls-race-disc a {
  color: rgba(240, 240, 234, 0.9);
}
html[data-theme="light"] .cowls-race .cowls-bot-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE — Hardcoded-dark component overrides
   ══════════════════════════════════════════════════════════ */

/* ── Footer ── */
html[data-theme="light"] .site-footer {
  --ft-bg:       var(--color-bg-secondary);
  --ft-text:     rgba(28, 25, 23, 0.58);
  --ft-text-hi:  rgba(28, 25, 23, 0.87);
  --ft-border:   rgba(28, 25, 23, 0.1);
  --ft-badge-bg: rgba(28, 25, 23, 0.06);
}

/* ── Carousel hero fallback background ── */
html[data-theme="light"] .carousel-hero {
  background: #dedad1;
}

/* ── Back to top ── */
html[data-theme="light"] #backToTop {
  background: var(--color-card);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  box-shadow: 0 2px 12px var(--color-shadow);
}

/* ── Price chart modal ── */
html[data-theme="light"] .tmodal-backdrop {
  background: rgba(220, 216, 208, 0.88);
}
html[data-theme="light"] .tmodal-card {
  box-shadow: 0 16px 48px rgba(28, 25, 23, 0.15), 0 0 0 1px rgba(28, 25, 23, 0.06);
}

/* ── Search command bar backdrop ── */
html[data-theme="light"] .cmdk-backdrop {
  background: rgba(210, 206, 198, 0.75);
}

/* ── Toast notification ── */
html[data-theme="light"] .toast {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px var(--color-shadow);
}

/* ── FAB search button ── */
html[data-theme="light"] .cmdk-fab {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-card));
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  box-shadow: 0 4px 16px rgba(28, 25, 23, 0.12);
}

/* ============================================
   3D Cube Hero
   ============================================ */

/* ===== Shader Hero ===== */
.shader-hero {
  position: relative;
  width: 100%;
  min-height: clamp(500px, 68vh, 740px);
  overflow: hidden;
  background: #07070f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shader-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.shader-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, var(--color-bg) 100%);
  pointer-events: none;
  z-index: 1;
}

.shader-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  padding: 5rem 1.5rem;
  text-align: center;
}

.shader-hero-content {
  text-align: center;
}

.shader-hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 1rem;
  font-family: var(--font-mono);
}

.shader-hero-hl {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 1.75rem;
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}

.shader-hero-hl em {
  font-style: normal;
  color: var(--color-accent);
}

.shader-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.shader-hero-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.shader-hero-tag:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(0,212,255,0.08);
}

/* Featured article card */
.shader-hero-feat {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,10,26,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.shader-hero-feat:hover {
  border-color: rgba(0,212,255,0.45);
  transform: translateY(-3px);
}
.shader-hero-feat-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.shader-hero-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.shader-hero-feat:hover .shader-hero-feat-img img { transform: scale(1.04); }
.shader-hero-feat-body {
  padding: 1.125rem 1.25rem 1.375rem;
}
.shader-hero-feat-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.shader-hero-feat-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shader-hero-feat-excerpt {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  margin: 0 0 0.875rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shader-hero-feat-cta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

.shader-hero-scroll {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}

/* Compact 4-card section grid */
.compact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.compact-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.compact-card .card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 0.75rem;
  border-radius: 6px;
}
.compact-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.compact-card:hover .card-media img { transform: scale(1.05); }
.compact-card .card-body { padding: 0; }
.compact-card .card-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compact-card:hover .card-title { color: var(--section-color, var(--color-accent)); }
.compact-card-excerpt {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0.3rem 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .compact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .compact-grid { grid-template-columns: 1fr; }
}

.shader-hero-teasers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  margin-top: 2.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.shader-hero-teaser {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: background 0.18s;
}
.shader-hero-teaser:last-child { border-right: none; }
.shader-hero-teaser:hover { background: rgba(255,255,255,0.04); }
.shader-hero-teaser-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--section-color, var(--color-accent));
}
.shader-hero-teaser-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
}

@media (max-width: 768px) {
  :root { --gutter: 1rem; }
  .shader-hero { min-height: 52vh; }
  .shader-hero-inner { padding: 3rem 1.25rem 2.5rem; }
  .shader-hero-br { display: none; }
  .shader-hero-teasers { display: none; }
  .shader-hero-tag { padding: 0.65rem 1.1rem; min-height: 44px; display: inline-flex; align-items: center; }
  .homepage-sections { gap: 1.75rem; padding-bottom: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .shader-hero-canvas { display: none; }
}