/* Chris-approved 2026-09-17 — emerald green surfaces, real gold typography. Never gold page/card fills. */
:root {
  --emerald-bg: #021a10;
  --emerald-bg-soft: #032818;
  --emerald-card: #043d24;
  --gold-real: #c5a028;
  --gold-light: #d4af37;
  --gold-pale: #e8c547;
  --bg: var(--emerald-bg) !important;
  --bg-soft: var(--emerald-bg-soft) !important;
  --bg-card: var(--emerald-card) !important;
  --bg-dark: #011408 !important;
  --bg-1: var(--emerald-bg) !important;
  --bg-2: var(--emerald-bg-soft) !important;
  --bg-3: var(--emerald-card) !important;
  --accent: var(--gold-real) !important;
  --accent-deep: var(--gold-light) !important;
  --brand: var(--gold-real) !important;
  --ink: #f5f0e8 !important;
  --ink-soft: rgba(245, 240, 232, 0.82) !important;
  --line: rgba(197, 160, 40, 0.16) !important;
}
body {
  background: var(--emerald-bg) !important;
  background-image: linear-gradient(165deg, #011408 0%, var(--emerald-bg) 40%, var(--emerald-bg-soft) 100%) !important;
  color: #f5f0e8 !important;
}
body::before {
  background:
    radial-gradient(ellipse 900px 500px at 15% 8%, rgba(5, 150, 105, 0.24) 0, transparent 55%),
    radial-gradient(ellipse 700px 450px at 85% 15%, rgba(4, 106, 56, 0.18) 0, transparent 50%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0, 0, 0, 0.5) 0, transparent 65%) !important;
}
h1, h2, h3, h4, .brand, .brand span {
  color: var(--gold-light) !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
  background-clip: unset !important;
}
p, li, td, .comp-row .body {
  color: rgba(245, 240, 232, 0.82) !important;
}
a {
  color: var(--gold-pale) !important;
}
.card,
.brain-card,
.price-card,
.vs-grid,
.compare-wrap,
.pool,
.vs-side.left .vs-pill,
.brain-card .pill,
.brain-card.thinker .pill,
.brain-card.doer .pill {
  background: rgba(4, 61, 36, 0.72) !important;
  color: #f5f0e8 !important;
  border: 1px solid rgba(197, 160, 40, 0.38) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}
.hero .eyebrow,
.section-head .eyebrow,
.tier-divider .eyebrow {
  background: rgba(2, 26, 16, 0.65) !important;
  color: var(--gold-real) !important;
  border: 1px solid rgba(197, 160, 40, 0.45) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}
.btn-primary,
.cta-final .btn-primary,
.nav-links a.btn-primary {
  background: linear-gradient(180deg, #046a38 0%, #032818 100%) !important;
  color: var(--gold-light) !important;
  border: 1px solid var(--gold-real) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  text-shadow: none !important;
}
.btn-ghost {
  background: rgba(5, 150, 105, 0.08) !important;
  border-color: rgba(197, 160, 40, 0.35) !important;
  color: var(--gold-pale) !important;
}
nav,
nav.combined-nav,
footer {
  background: rgba(2, 20, 12, 0.94) !important;
  border-color: rgba(197, 160, 40, 0.18) !important;
}
section.alt {
  background: var(--emerald-bg-soft) !important;
}
section.dark,
section.darkpanel {
  background: linear-gradient(180deg, #011408 0%, var(--emerald-bg) 100%) !important;
  border-color: rgba(197, 160, 40, 0.12) !important;
}
table.cmp thead th,
table.compare thead th {
  background: rgba(4, 106, 56, 0.35) !important;
  color: var(--gold-light) !important;
}