/* ═══════════════════════════════════════════════════════════════
   RupeeCase Learn — Shared Dark Theme + Component Styles
   Applied to all learn HTML pages via <link> tag.
   ═══════════════════════════════════════════════════════════════ */

/* ── DARK THEME: OS preference + Explicit toggle ──
   BOTH selectors required:
   - @media query handles system preference (respects OS dark mode)
   - [data-theme="dark"] handles manual toggle (user override)
   Properties are consolidated to avoid duplication. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0f1a;
    --white: #111d30;
    --text: #f8fafc;
    --text-2: #e2e8f0;
    --text-3: #a8b8cb;
    --text-4: #7a8da3;
    --rule: rgba(255,255,255,0.12);
    --navy: #93C5FD;
    --navy-mid: #60A5FA;
    --blue: #60A5FA;
    --blue-soft: #93bbfd;
    --ice: rgba(96,165,250,0.1);
    --ice-dark: rgba(96,165,250,0.15);
    --gold: #FBBF24;
    --gold-light: rgba(217,119,6,0.15);
    --green: #34D399;
    --green-bg: rgba(5,150,105,0.12);
    --green-dark: #6EE7B7;
    --red: #F87171;
    --red-bg: rgba(220,38,38,0.12);
    --teal: #22D3EE;
    --teal-bg: rgba(8,145,178,0.12);
    --purple: #A78BFA;
    --purple-bg: rgba(124,58,237,0.12);
    --amber: #FBBF24;
    --amber-bg: rgba(217,119,6,0.12);
    --nav-bg: rgba(10,15,26,0.95);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0a0f1a;
  --white: #111d30;
  --text: #f8fafc;
  --text-2: #e2e8f0;
  --text-3: #a8b8cb;
  --text-4: #7a8da3;
  --rule: rgba(255,255,255,0.12);
  --navy: #93C5FD;
  --navy-mid: #60A5FA;
  --blue: #60A5FA;
  --blue-soft: #93bbfd;
  --ice: rgba(96,165,250,0.1);
  --ice-dark: rgba(96,165,250,0.15);
  --gold: #FBBF24;
  --gold-light: rgba(217,119,6,0.15);
  --green: #34D399;
  --green-bg: rgba(5,150,105,0.12);
  --green-dark: #6EE7B7;
  --red: #F87171;
  --red-bg: rgba(220,38,38,0.12);
  --teal: #22D3EE;
  --teal-bg: rgba(8,145,178,0.12);
  --purple: #A78BFA;
  --purple-bg: rgba(124,58,237,0.12);
  --amber: #FBBF24;
  --amber-bg: rgba(217,119,6,0.12);
  --nav-bg: rgba(10,15,26,0.95);
  color-scheme: dark;
}

/* ── DARK: Topnav ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topnav,
  :root:not([data-theme="light"]) .nav {
    background: rgba(6,9,18,0.95) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
  }
}
:root[data-theme="dark"] .topnav,
:root[data-theme="dark"] .nav {
  background: rgba(6,9,18,0.95) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* ── DARK: Brand name in nav ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topnav-brand .brand-name,
  :root:not([data-theme="light"]) .nav-name { color: var(--text) !important; }
  :root:not([data-theme="light"]) .topnav-brand .logo,
  :root:not([data-theme="light"]) .nav-logo { background: #3B82F6 !important; }
  :root:not([data-theme="light"]) .topnav-right .cta-btn,
  :root:not([data-theme="light"]) .nav-cta { background: #3B82F6 !important; }
}
:root[data-theme="dark"] .topnav-brand .brand-name,
:root[data-theme="dark"] .nav-name { color: var(--text) !important; }
:root[data-theme="dark"] .topnav-brand .logo,
:root[data-theme="dark"] .nav-logo { background: #3B82F6 !important; }
:root[data-theme="dark"] .topnav-right .cta-btn,
:root[data-theme="dark"] .nav-cta { background: #3B82F6 !important; }

/* ── DARK: Callout gold ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout-gold p { color: #FDE68A !important; }
  :root:not([data-theme="light"]) .callout-gold strong { color: #FCD34D !important; }
}
:root[data-theme="dark"] .callout-gold p { color: #FDE68A !important; }
:root[data-theme="dark"] .callout-gold strong { color: #FCD34D !important; }

/* ── DARK: Quiz option states ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .q-option.correct { color: #6EE7B7 !important; }
  :root:not([data-theme="light"]) .q-option.wrong { color: #FCA5A5 !important; }
  :root:not([data-theme="light"]) .q-option.correct .q-radio::after { color: #6EE7B7 !important; }
  :root:not([data-theme="light"]) .q-option.wrong .q-radio::after { color: #FCA5A5 !important; }
  :root:not([data-theme="light"]) .q-feedback.correct-fb { color: #6EE7B7 !important; }
  :root:not([data-theme="light"]) .q-feedback.wrong-fb { color: #FCA5A5 !important; }
  :root:not([data-theme="light"]) .pass-sub { color: #6EE7B7 !important; }
}
:root[data-theme="dark"] .q-option.correct { color: #6EE7B7 !important; }
:root[data-theme="dark"] .q-option.wrong { color: #FCA5A5 !important; }
:root[data-theme="dark"] .q-option.correct .q-radio::after { color: #6EE7B7 !important; }
:root[data-theme="dark"] .q-option.wrong .q-radio::after { color: #FCA5A5 !important; }
:root[data-theme="dark"] .q-feedback.correct-fb { color: #6EE7B7 !important; }
:root[data-theme="dark"] .q-feedback.wrong-fb { color: #FCA5A5 !important; }
:root[data-theme="dark"] .pass-sub { color: #6EE7B7 !important; }

/* ── DARK: Glossary ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glossary-header { background: #1e293b !important; }
  :root:not([data-theme="light"]) .glossary-term { background: rgba(96,165,250,0.08) !important; }
  :root:not([data-theme="light"]) .quiz-header { background: #1e293b !important; }
}
:root[data-theme="dark"] .glossary-header { background: #1e293b !important; }
:root[data-theme="dark"] .glossary-term { background: rgba(96,165,250,0.08) !important; }
:root[data-theme="dark"] .quiz-header { background: #1e293b !important; }

/* ── DARK: Insight block (already dark bg — keep as-is but adjust for dark theme navy) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .insight { background: #1e293b !important; }
  :root:not([data-theme="light"]) .insight-box { background: #1e293b !important; }
}
:root[data-theme="dark"] .insight { background: #1e293b !important; }
:root[data-theme="dark"] .insight-box { background: #1e293b !important; }

/* ── DARK: Tables ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) thead tr { background: #1e293b !important; }
  :root:not([data-theme="light"]) tbody tr:nth-child(even) { background: rgba(255,255,255,0.03) !important; }
}
:root[data-theme="dark"] thead tr { background: #1e293b !important; }
:root[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255,255,255,0.03) !important; }

/* ── DARK: Next-module block ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .next-module { background: #1e293b !important; }
  :root:not([data-theme="light"]) .next-btn { background: #60A5FA !important; color: #0c1220 !important; }
}
:root[data-theme="dark"] .next-module { background: #1e293b !important; }
:root[data-theme="dark"] .next-btn { background: #60A5FA !important; color: #0c1220 !important; }

/* ── DARK: Entity chips & co-logos ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entity-chip { background: var(--white) !important; border-color: var(--rule) !important; color: var(--text) !important; }
  :root:not([data-theme="light"]) .entity-chip.nse-chip { border-color: #60A5FA !important; color: #60A5FA !important; }
  :root:not([data-theme="light"]) .entity-chip.bse-chip { border-color: #F87171 !important; color: #F87171 !important; }
  :root:not([data-theme="light"]) .entity-chip.sebi-chip { border-color: #60A5FA !important; color: #60A5FA !important; }
  :root:not([data-theme="light"]) .entity-chip.nsdl-chip { border-color: #60A5FA !important; color: #60A5FA !important; }
  :root:not([data-theme="light"]) .entity-chip.cdsl-chip { border-color: #A78BFA !important; color: #A78BFA !important; }
  :root:not([data-theme="light"]) .co-logo-img { background: var(--white) !important; border-color: var(--rule) !important; }
}
:root[data-theme="dark"] .entity-chip { background: var(--white) !important; border-color: var(--rule) !important; color: var(--text) !important; }
:root[data-theme="dark"] .entity-chip.nse-chip { border-color: #60A5FA !important; color: #60A5FA !important; }
:root[data-theme="dark"] .entity-chip.bse-chip { border-color: #F87171 !important; color: #F87171 !important; }
:root[data-theme="dark"] .entity-chip.sebi-chip { border-color: #60A5FA !important; color: #60A5FA !important; }
:root[data-theme="dark"] .entity-chip.nsdl-chip { border-color: #60A5FA !important; color: #60A5FA !important; }
:root[data-theme="dark"] .entity-chip.cdsl-chip { border-color: #A78BFA !important; color: #A78BFA !important; }
:root[data-theme="dark"] .co-logo-img { background: var(--white) !important; border-color: var(--rule) !important; }

/* ── DARK: Author note ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .author-note-avatar { background: #3B82F6 !important; }
  :root:not([data-theme="light"]) .author-note { background: var(--white) !important; border-color: var(--rule) !important; }
}
:root[data-theme="dark"] .author-note-avatar { background: #3B82F6 !important; }
:root[data-theme="dark"] .author-note { background: var(--white) !important; border-color: var(--rule) !important; }

/* ── DARK: Exchange compare ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .exc-card:first-child { border-right-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .flow-node { background: var(--white) !important; border-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .flow-node.hl { background: #1e293b !important; border-color: #1e293b !important; }
}
:root[data-theme="dark"] .exc-card:first-child { border-right-color: var(--rule) !important; }
:root[data-theme="dark"] .flow-node { background: var(--white) !important; border-color: var(--rule) !important; }
:root[data-theme="dark"] .flow-node.hl { background: #1e293b !important; border-color: #1e293b !important; }

/* ── DARK: Share CTA & waitlist ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .share-cta { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; }
  :root:not([data-theme="light"]) .waitlist-section { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; }
}
:root[data-theme="dark"] .share-cta { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; }
:root[data-theme="dark"] .waitlist-section { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; }

/* ── DARK: RC subtle strip ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rc-subtle-strip { background: rgba(96,165,250,0.08) !important; }
  :root:not([data-theme="light"]) .rc-strip-logo2 { background: #3B82F6 !important; }
}
:root[data-theme="dark"] .rc-subtle-strip { background: rgba(96,165,250,0.08) !important; }
:root[data-theme="dark"] .rc-strip-logo2 { background: #3B82F6 !important; }

/* ── DARK: Lab strip ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lab-icon { background: #3B82F6 !important; }
  :root:not([data-theme="light"]) .lab-dot.done { background: var(--green) !important; }
  :root:not([data-theme="light"]) .lab-dot.current { background: #60A5FA !important; }
}
:root[data-theme="dark"] .lab-icon { background: #3B82F6 !important; }
:root[data-theme="dark"] .lab-dot.done { background: var(--green) !important; }
:root[data-theme="dark"] .lab-dot.current { background: #60A5FA !important; }

/* ── DARK: Cert modal ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cert-box { background: #0c1220 !important; }
  :root:not([data-theme="light"]) .cert-header { background: #1e293b !important; }
  :root:not([data-theme="light"]) .cert-body { background: #0c1220 !important; }
}
:root[data-theme="dark"] .cert-box { background: #0c1220 !important; }
:root[data-theme="dark"] .cert-header { background: #1e293b !important; }
:root[data-theme="dark"] .cert-body { background: #0c1220 !important; }

/* ── DARK: ilogo inline links ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ilogo { background: var(--white) !important; border-color: var(--rule) !important; color: var(--text) !important; }
}
:root[data-theme="dark"] .ilogo { background: var(--white) !important; border-color: var(--rule) !important; color: var(--text) !important; }

/* ── DARK: Progress track pills ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pt-step.current { background: #3B82F6 !important; color: white !important; }
  :root:not([data-theme="light"]) .pt-step.upcoming { background: rgba(255,255,255,0.06) !important; }
}
:root[data-theme="dark"] .pt-step.current { background: #3B82F6 !important; color: white !important; }
:root[data-theme="dark"] .pt-step.upcoming { background: rgba(255,255,255,0.06) !important; }

/* ── DARK: Path cards (learn index) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .path-card { background: var(--white) !important; border-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .path-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.3) !important; }
  :root:not([data-theme="light"]) .coming-card { background: var(--white) !important; border-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .btn-primary { background: #3B82F6 !important; border-color: #3B82F6 !important; }
  :root:not([data-theme="light"]) .btn-secondary { color: #60A5FA !important; border-color: #60A5FA !important; }
  :root:not([data-theme="light"]) .btn-secondary:hover { background: #60A5FA !important; color: #0c1220 !important; }
}
:root[data-theme="dark"] .path-card { background: var(--white) !important; border-color: var(--rule) !important; }
:root[data-theme="dark"] .path-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.3) !important; }
:root[data-theme="dark"] .coming-card { background: var(--white) !important; border-color: var(--rule) !important; }
:root[data-theme="dark"] .btn-primary { background: #3B82F6 !important; border-color: #3B82F6 !important; }
:root[data-theme="dark"] .btn-secondary { color: #60A5FA !important; border-color: #60A5FA !important; }
:root[data-theme="dark"] .btn-secondary:hover { background: #60A5FA !important; color: #0c1220 !important; }

/* ── DARK: Hook strip & about (learn index) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hook-strip { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; }
  :root:not([data-theme="light"]) .about-row { background: #1e293b !important; }
  :root:not([data-theme="light"]) .principle { background: rgba(255,255,255,0.05) !important; }
  :root:not([data-theme="light"]) .hero-card { background: #1e293b !important; }
  :root:not([data-theme="light"]) .faq-q { color: var(--text) !important; }
  :root:not([data-theme="light"]) .faq-q:hover { color: var(--blue) !important; }
}
:root[data-theme="dark"] .hook-strip { background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; }
:root[data-theme="dark"] .about-row { background: #1e293b !important; }
:root[data-theme="dark"] .principle { background: rgba(255,255,255,0.05) !important; }
:root[data-theme="dark"] .hero-card { background: #1e293b !important; }
:root[data-theme="dark"] .faq-q { color: var(--text) !important; }
:root[data-theme="dark"] .faq-q:hover { color: var(--blue) !important; }

/* ── DARK: Copyright notice ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .copyright-notice { background: var(--white) !important; border-color: var(--rule) !important; }
}
:root[data-theme="dark"] .copyright-notice { background: var(--white) !important; border-color: var(--rule) !important; }

/* ── DARK: Infographic ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .infographic { background: var(--white) !important; border-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .infographic-header { border-bottom-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .factor-bar-wrap { background: rgba(255,255,255,0.06) !important; }
}
:root[data-theme="dark"] .infographic { background: var(--white) !important; border-color: var(--rule) !important; }
:root[data-theme="dark"] .infographic-header { border-bottom-color: var(--rule) !important; }
:root[data-theme="dark"] .factor-bar-wrap { background: rgba(255,255,255,0.06) !important; }

/* ── DARK: Image block ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .img-block { border-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .img-caption { background: var(--white) !important; }
}
:root[data-theme="dark"] .img-block { border-color: var(--rule) !important; }
:root[data-theme="dark"] .img-caption { background: var(--white) !important; }

/* ── DARK: Source link pills ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .source-link { background: var(--white) !important; border-color: var(--rule) !important; color: var(--text-3) !important; }
}
:root[data-theme="dark"] .source-link { background: var(--white) !important; border-color: var(--rule) !important; color: var(--text-3) !important; }

/* ── DARK: Steps ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .step-num { background: #3B82F6 !important; }
}
:root[data-theme="dark"] .step-num { background: #3B82F6 !important; }

/* ── DARK: Action cards ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .action-card { background: var(--white) !important; border-color: var(--rule) !important; border-top-color: var(--teal) !important; }
  :root:not([data-theme="light"]) .stat-card { background: var(--white) !important; border-color: var(--rule) !important; }
}
:root[data-theme="dark"] .action-card { background: var(--white) !important; border-color: var(--rule) !important; border-top-color: var(--teal) !important; }
:root[data-theme="dark"] .stat-card { background: var(--white) !important; border-color: var(--rule) !important; }

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
.theme-toggle {
  background: none !important;
  border: 1.5px solid var(--rule) !important;
  border-radius: 8px !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color 0.15s, background 0.15s !important;
  flex-shrink: 0 !important;
}
.theme-toggle:hover {
  border-color: var(--blue) !important;
  background: var(--ice) !important;
}
.theme-toggle svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: var(--text-3) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
/* Show moon in light, sun in dark */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block !important; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none !important; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block !important; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none !important; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ══════════════════════════════════════════════════════════════
   TERMINAL CTA (replacement for waitlist)
   ══════════════════════════════════════════════════════════════ */
.terminal-cta {
  margin: 40px 0 !important;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.terminal-cta-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 8px !important;
}
.terminal-cta-title {
  font-family: var(--sans, 'Inter', sans-serif) !important; font-weight: 600;
  font-size: 22px !important;
  color: white !important;
  margin-bottom: 6px !important;
}
.terminal-cta-sub {
  font-size: 14px !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.6 !important;
}
.terminal-cta-btn {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: white !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: opacity 0.15s !important;
}
.terminal-cta-btn:hover { opacity: 0.9; }

@media (max-width: 600px) {
  .terminal-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   CALCULATOR CTA
   ══════════════════════════════════════════════════════════════ */
.calc-cta {
  margin: 36px 0 !important;
  background: var(--ice) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
.calc-cta-icon {
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(135deg, #0D1F3C 0%, #10b981 100%) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.calc-cta-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: white !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.calc-cta-body { flex: 1; min-width: 200px; }
.calc-cta-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 4px !important;
}
.calc-cta-sub {
  font-size: 13px !important;
  color: var(--text-3) !important;
  line-height: 1.6 !important;
}
.calc-cta-btn {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--text) !important;
  color: var(--bg) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: opacity 0.15s !important;
}
.calc-cta-btn:hover { opacity: 0.85; }

@media (max-width: 600px) {
  .calc-cta { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE BREAKPOINTS — MODULE ELEMENTS (<640px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ── Comparison rows (140px|1fr|72px grid) ── */
  .comp-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .comp-row > *:first-child {
    font-weight: 600 !important;
  }

  /* ── Data-tree nodes ── */
  .dt-node {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Author note ── */
  .author-note {
    grid-template-columns: 1fr !important;
    padding: 20px 16px !important;
    gap: 12px !important;
  }
  .author-note img,
  .author-note .author-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  /* ── Flow charts (horizontal scrollable) ── */
  .flow-chart {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }
  .flow-inner {
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .flow-step {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Grid layouts that need stacking ── */
  .index-compare,
  .ratio-grid,
  .statements-visual,
  .infl-grid,
  .indicator-grid,
  .regime-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Tables — horizontal scroll ── */
  .table-wrap,
  .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Section containers — reduce padding ── */
  .page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .section,
  .content-section {
    padding: 20px 14px !important;
  }

  /* ── Inline min-width overrides (momentum factor infographics etc.) ── */
  [style*="min-width:400px"],
  [style*="min-width: 400px"],
  [style*="min-width:520px"],
  [style*="min-width: 520px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── OHLCV grid (5-col → 2-col) ── */
  .ohlcv-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Next-module card ── */
  .next-module {
    flex-direction: column !important;
    text-align: center !important;
    padding: 16px !important;
  }

  /* ── Quiz & certificate containers ── */
  .quiz-container,
  .cert-container {
    padding: 16px !important;
  }
}

/* ── DARK: LinkedIn share hint ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .li-post-hint { background: rgba(10,102,194,0.12) !important; }
}
:root[data-theme="dark"] .li-post-hint { background: rgba(10,102,194,0.12) !important; }

/* ── DARK: Email gate (certificate form) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .email-gate { background: var(--white) !important; border-color: var(--rule) !important; }
}
:root[data-theme="dark"] .email-gate { background: var(--white) !important; border-color: var(--rule) !important; }

/* ── DARK: Factor bar chart ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .factor-bar-val { color: var(--text) !important; }
}
:root[data-theme="dark"] .factor-bar-val { color: var(--text) !important; }

/* ── DARK: Steps component ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .steps { border-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .step { border-bottom-color: var(--rule) !important; }
}
:root[data-theme="dark"] .steps { border-color: var(--rule) !important; }
:root[data-theme="dark"] .step { border-bottom-color: var(--rule) !important; }

/* ── DARK: Participants chart ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .participants-chart { background: var(--white) !important; border-color: var(--rule) !important; }
}
:root[data-theme="dark"] .participants-chart { background: var(--white) !important; border-color: var(--rule) !important; }

/* ── DARK: Exchange compare ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .exchange-compare { border-color: var(--rule) !important; }
}
:root[data-theme="dark"] .exchange-compare { border-color: var(--rule) !important; }

/* ── DARK: Read progress bar ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .read-progress { background: #60A5FA !important; }
}
:root[data-theme="dark"] .read-progress { background: #60A5FA !important; }

/* ── DARK: Hook strip buttons (learn index) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hook-btn-primary { background: #3B82F6 !important; color: white !important; }
  :root:not([data-theme="light"]) .about-link-white { background: #3B82F6 !important; color: white !important; }
  :root:not([data-theme="light"]) .badge-navy { background: #334155 !important; }
  :root:not([data-theme="light"]) .btn-disabled { background: rgba(255,255,255,0.05) !important; color: var(--text-4) !important; border-color: var(--rule) !important; }
}
:root[data-theme="dark"] .hook-btn-primary { background: #3B82F6 !important; color: white !important; }
:root[data-theme="dark"] .about-link-white { background: #3B82F6 !important; color: white !important; }
:root[data-theme="dark"] .badge-navy { background: #334155 !important; }
:root[data-theme="dark"] .btn-disabled { background: rgba(255,255,255,0.05) !important; color: var(--text-4) !important; border-color: var(--rule) !important; }

/* ── DARK: Path card button variants (learn index) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-tertiary { color: var(--purple) !important; border-color: var(--purple) !important; }
  :root:not([data-theme="light"]) .btn-tertiary:hover { background: var(--purple) !important; color: #0c1220 !important; }
  :root:not([data-theme="light"]) .btn-quaternary { color: var(--blue) !important; border-color: var(--blue) !important; }
  :root:not([data-theme="light"]) .btn-quaternary:hover { background: var(--blue) !important; color: #0c1220 !important; }
  :root:not([data-theme="light"]) .btn-quinary { color: var(--red) !important; border-color: var(--red) !important; }
  :root:not([data-theme="light"]) .btn-quinary:hover { background: var(--red) !important; color: #0c1220 !important; }
  :root:not([data-theme="light"]) .btn-teal { color: var(--teal) !important; border-color: var(--teal) !important; }
  :root:not([data-theme="light"]) .btn-teal:hover { background: var(--teal) !important; color: #0c1220 !important; }
  :root:not([data-theme="light"]) .btn-amber { color: var(--amber) !important; border-color: var(--amber) !important; }
  :root:not([data-theme="light"]) .btn-amber:hover { background: var(--amber) !important; color: #0c1220 !important; }
  :root:not([data-theme="light"]) .btn-green2 { color: var(--green) !important; border-color: var(--green) !important; }
  :root:not([data-theme="light"]) .btn-green2:hover { background: var(--green) !important; color: #0c1220 !important; }
}
:root[data-theme="dark"] .btn-tertiary { color: var(--purple) !important; border-color: var(--purple) !important; }
:root[data-theme="dark"] .btn-tertiary:hover { background: var(--purple) !important; color: #0c1220 !important; }
:root[data-theme="dark"] .btn-quaternary { color: var(--blue) !important; border-color: var(--blue) !important; }
:root[data-theme="dark"] .btn-quaternary:hover { background: var(--blue) !important; color: #0c1220 !important; }
:root[data-theme="dark"] .btn-quinary { color: var(--red) !important; border-color: var(--red) !important; }
:root[data-theme="dark"] .btn-quinary:hover { background: var(--red) !important; color: #0c1220 !important; }
:root[data-theme="dark"] .btn-teal { color: var(--teal) !important; border-color: var(--teal) !important; }
:root[data-theme="dark"] .btn-teal:hover { background: var(--teal) !important; color: #0c1220 !important; }
:root[data-theme="dark"] .btn-amber { color: var(--amber) !important; border-color: var(--amber) !important; }
:root[data-theme="dark"] .btn-amber:hover { background: var(--amber) !important; color: #0c1220 !important; }
:root[data-theme="dark"] .btn-green2 { color: var(--green) !important; border-color: var(--green) !important; }
:root[data-theme="dark"] .btn-green2:hover { background: var(--green) !important; color: #0c1220 !important; }

/* ── DARK: Financial Tools Section ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-body { background: var(--white) !important; border-color: var(--rule) !important; }
  :root:not([data-theme="light"]) .tool-tab { background: var(--white) !important; border-color: var(--rule) !important; color: var(--text-3) !important; }
  :root:not([data-theme="light"]) .tool-tab:hover { border-color: var(--blue) !important; color: var(--blue) !important; }
  :root:not([data-theme="light"]) .tool-tab.active { background: #3B82F6 !important; border-color: #3B82F6 !important; color: white !important; }
  :root:not([data-theme="light"]) .ti-val { background: rgba(96,165,250,0.1) !important; color: var(--blue) !important; }
  :root:not([data-theme="light"]) .ti-slider { background: rgba(255,255,255,0.08) !important; }
  :root:not([data-theme="light"]) .ti-slider::-webkit-slider-thumb { border-color: var(--white) !important; }
  :root:not([data-theme="light"]) .tr-card { background: rgba(96,165,250,0.08) !important; }
  :root:not([data-theme="light"]) .tr-card.green { background: rgba(5,150,105,0.1) !important; }
  :root:not([data-theme="light"]) .tr-card.red { background: rgba(220,38,38,0.1) !important; }
  :root:not([data-theme="light"]) .tr-card.amber { background: rgba(217,119,6,0.1) !important; }
  :root:not([data-theme="light"]) .tr-card.purple { background: rgba(124,58,237,0.1) !important; }
  :root:not([data-theme="light"]) .tr-card.teal { background: rgba(8,145,178,0.1) !important; }
  :root:not([data-theme="light"]) .bar-track { background: rgba(255,255,255,0.06) !important; }
  :root:not([data-theme="light"]) .scenario-card { background: rgba(96,165,250,0.06) !important; }
  :root:not([data-theme="light"]) .progress-bar { background: rgba(255,255,255,0.06) !important; }
}
:root[data-theme="dark"] .tool-body { background: var(--white) !important; border-color: var(--rule) !important; }
:root[data-theme="dark"] .tool-tab { background: var(--white) !important; border-color: var(--rule) !important; color: var(--text-3) !important; }
:root[data-theme="dark"] .tool-tab:hover { border-color: var(--blue) !important; color: var(--blue) !important; }
:root[data-theme="dark"] .tool-tab.active { background: #3B82F6 !important; border-color: #3B82F6 !important; color: white !important; }
:root[data-theme="dark"] .ti-val { background: rgba(96,165,250,0.1) !important; color: var(--blue) !important; }
:root[data-theme="dark"] .ti-slider { background: rgba(255,255,255,0.08) !important; }
:root[data-theme="dark"] .ti-slider::-webkit-slider-thumb { border-color: var(--white) !important; }
:root[data-theme="dark"] .tr-card { background: rgba(96,165,250,0.08) !important; }
:root[data-theme="dark"] .tr-card.green { background: rgba(5,150,105,0.1) !important; }
:root[data-theme="dark"] .tr-card.red { background: rgba(220,38,38,0.1) !important; }
:root[data-theme="dark"] .tr-card.amber { background: rgba(217,119,6,0.1) !important; }
:root[data-theme="dark"] .tr-card.purple { background: rgba(124,58,237,0.1) !important; }
:root[data-theme="dark"] .tr-card.teal { background: rgba(8,145,178,0.1) !important; }
:root[data-theme="dark"] .bar-track { background: rgba(255,255,255,0.06) !important; }
:root[data-theme="dark"] .scenario-card { background: rgba(96,165,250,0.06) !important; }
:root[data-theme="dark"] .progress-bar { background: rgba(255,255,255,0.06) !important; }

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: Skip-to-content + focus-visible
   Added 20 Apr 2026. WCAG 2.1 AA compliance (2.4.1, 2.4.7).
   ═══════════════════════════════════════════════════════════════ */
.rc-skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 9999;
  background: var(--navy, #0D1F3C);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--sans, "Inter", sans-serif);
  transition: top 0.15s;
}
.rc-skip-link:focus {
  top: 0;
  outline: 3px solid var(--blue, #2463EB);
  outline-offset: 2px;
}

/* Global :focus-visible — keyboard users get a clear ring, mouse users don't */
:focus-visible {
  outline: 2px solid var(--blue, #2463EB);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue, #2463EB);
  outline-offset: 3px;
}
html[data-theme="dark"] :focus-visible { outline-color: #60A5FA; }

/* Reduced motion: respect user preference */
@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;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RELATED CROSS-LINKS (P0-6): Podcast / Daily / Strategies
   ═══════════════════════════════════════════════════════════════ */
.rc-related {
  margin: 48px 0 24px;
  padding: 28px 28px 24px;
  background: var(--white, #fff);
  border: 1px solid var(--rule, #E5E7EB);
  border-radius: 14px;
}
.rc-related-label {
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, #6B7280);
  margin-bottom: 14px;
}
.rc-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.rc-related-card {
  display: block;
  padding: 14px 16px;
  background: var(--bg, #FAFAFA);
  border: 1px solid var(--rule, #E5E7EB);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.rc-related-card:hover {
  border-color: var(--blue, #2463EB);
  transform: translateY(-2px);
}
.rc-related-kind {
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue, #2463EB);
  margin-bottom: 4px;
}
.rc-related-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy, #0D1F3C);
  line-height: 1.4;
  margin-bottom: 4px;
}
html[data-theme="dark"] .rc-related-title { color: var(--text, #f8fafc); }
.rc-related-sub {
  font-size: 12px;
  color: var(--text-3, #6B7280);
  line-height: 1.4;
}

/* META PILL fallback styles | pill-updated added phase 14E */
.meta-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
.pill-time{background:var(--rule);color:var(--text-2)}
.pill-level{background:var(--ice);color:var(--blue)}
.pill-updated{background:var(--rule);color:var(--text-3);opacity:0.85}