/* =========================================================
   AstroCapitalX - Financial Astrology Portal
   Design System + Component Library
   ========================================================= */

/* ---------- 1. Design tokens --------------------------------- */
:root {
  /* Cosmic palette - warmer dawn tones with sun-lit centre */
  --void:         #0F1036;
  --midnight:     #1A1A50;
  --deep:         #23235E;
  --panel:        #1E1E5B;
  --panel-2:      #28286E;
  --elev:         #303085;
  --hairline:     rgba(255, 255, 255, 0.10);
  --hairline-2:   rgba(255, 255, 255, 0.18);

  /* Brand accents */
  --gold:         #E5B437;
  --gold-soft:    #F4D06F;
  --gold-deep:    #B8860B;
  --saffron:      #FF8C42;
  --violet:       #8B5CF6;
  --violet-soft:  #A78BFA;
  --starlight:    #E7E7FF;

  /* AI accent - gold (brand) */
  --ai:           #E5B437;
  --ai-soft:      #F4D06F;
  --ai-glow:      rgba(229, 180, 55, 0.15);
  --ai-border:    rgba(229, 180, 55, 0.35);

  /* Market semantics */
  --bull:         #22C55E;
  --bull-soft:    #86EFAC;
  --bear:         #EF4444;
  --bear-soft:    #FCA5A5;
  --neutral:      #94A3B8;

  /* Info / blue accents - for non-financial signals (links, info banners) */
  --info:         #60A5FA;
  --info-soft:    #93C5FD;

  /* Extended accents - for planet/zodiac colour maps that have no semantic token.
     Dark = the saturated value used across the JS colour maps (so dark is unchanged). */
  --orange:       #F97316;  /* Ketu, Scorpio, Udveg */
  --pink:         #F472B6;  /* Libra */
  --yellow:       #FACC15;  /* Sagittarius, Labh */
  --sky:          #38BDF8;  /* Aquarius */
  --lilac:        #C084FC;  /* Pisces */
  /* "ink" variants - coloured TEXT that can sit on a faint tint of its OWN hue
     (Navtara cells, choghadiya cards, red-zone banners). Dark = bright (reads on the
     dark tint); the light override deepens them for AA on the pale tint. */
  --bull-ink:     #22C55E;
  --bear-ink:     #EF4444;
  --gold-ink:     #E5B437;
  --violet-ink:   #A78BFA;

  /* Text - raised contrast floor for readability */
  --text:         #F9F3E8;
  --text-muted:   #D4CBB6;  /* was #C8BFA8 - raised for AAA contrast */
  --text-dim:     #BEB2A6;  /* was #A39487 - raised for AAA contrast (~7:1 on --void) */

  /* Radius & shadow */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 10px 40px rgba(229, 180, 55, 0.25);

  /* Gradients - lit from above AND below, mid-tone belly */
  --grad-cosmic: radial-gradient(ellipse 1200px 800px at 50% -5%, rgba(244, 208, 111, 0.35) 0%, rgba(229, 180, 55, 0.18) 22%, rgba(139, 92, 246, 0.14) 48%, transparent 72%),
                 radial-gradient(ellipse 1600px 700px at 50% 108%, rgba(244, 208, 111, 0.22) 0%, rgba(139, 92, 246, 0.15) 35%, transparent 65%),
                 linear-gradient(180deg, #2A1F65 0%, #251D64 25%, #211B60 50%, #25205E 75%, #2B245E 100%);
  --grad-gold:   linear-gradient(135deg, #FFE49A 0%, #F4D06F 40%, #E5B437 70%, #B8860B 100%);
  --grad-violet: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
  --grad-panel:  linear-gradient(180deg, rgba(50,46,110,0.75) 0%, rgba(30,26,80,0.88) 100%);

  /* Typography */
  --ff-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ─── Editorial-Sanctum scoped tokens (Phase 2 redesign) ───────
   Pages opt-in via body class="editorial". Untouched pages
   keep cosmic-indigo defaults above. ─────────────────────────── */
body.editorial,
body.admin-editorial {  /* 2026-07-30: sadmin gets the same warm espresso tokens as the site (was cosmic-indigo) */
  --grad-panel:  linear-gradient(180deg, rgba(58, 36, 25, 0.75) 0%, rgba(33, 19, 12, 0.88) 100%);
  --void:        #1a0e08;
  --midnight:    #14080a;
  --deep:        #21130c;
  --panel:       #2a1b12;
  --panel-2:     #3a2419;
  --elev:        #4a2e1f;
  --hairline:    rgba(229, 180, 55, 0.18);
  --hairline-2:  rgba(229, 180, 55, 0.35);

  --grad-cosmic: radial-gradient(ellipse 1100px 700px at 50% -5%, rgba(244, 208, 111, 0.18) 0%, rgba(229, 180, 55, 0.08) 30%, transparent 65%),
                 radial-gradient(ellipse 1400px 600px at 50% 108%, rgba(244, 208, 111, 0.14) 0%, transparent 60%),
                 linear-gradient(180deg, #1a0e08 0%, #21130c 50%, #1a0e08 100%);
}
body.editorial .cosmic-bg::before,
body.editorial .cosmic-bg::after { opacity: 0.4; }
body.editorial .cosmic-bg .stars { opacity: 0.2; }

/* Editorial-scoped nav + footer retints (Phase 2) - only apply
   on pages that opted in via body.editorial. Untouched pages
   keep the original cosmic-indigo header/footer. */
body.editorial .nav,
body.shop-page .nav {
  background: rgba(26, 14, 8, 0.82);
  border-bottom-color: rgba(229, 180, 55, 0.18);
}
body.editorial .brand-mark,
body.shop-page .brand-mark {
  background: rgba(20, 8, 10, 0.95);
  border-color: rgba(229, 180, 55, 0.4);
}
body.editorial #acx-footer,
body.shop-page #acx-footer {
  background: rgba(20, 8, 10, 0.98);
  border-top-color: rgba(229, 180, 55, 0.22);
}
body.editorial #acx-footer .acx-sec,
body.editorial #acx-footer .acx-social a,
body.shop-page #acx-footer .acx-sec,
body.shop-page #acx-footer .acx-social a {
  border-color: rgba(229, 180, 55, 0.10);
  background: rgba(229, 180, 55, 0.05);
}
body.editorial #acx-footer .acx-social a:hover,
body.shop-page #acx-footer .acx-social a:hover {
  background: rgba(229, 180, 55, 0.12);
  border-color: rgba(229, 180, 55, 0.28);
}
body.editorial #acx-footer .acx-fp,
body.shop-page #acx-footer .acx-fp {
  border-color: rgba(229, 180, 55, 0.18);
}
body.editorial #acx-footer .acx-fp:hover,
body.shop-page #acx-footer .acx-fp:hover {
  border-color: rgba(229, 180, 55, 0.40);
}
/* Editorial footer typography - gold-tinted links match the umber palette.
   Selector specificity (body.X + #acx-footer + .acx-fc + a) beats the inline
   default rule in footer.ejs without needing !important. Geo-pills (.acx-fp)
   keep their own colour treatment above. */
body.editorial #acx-footer .acx-fc a,
body.shop-page #acx-footer .acx-fc a {
  color: var(--gold-soft);
}
body.editorial #acx-footer .acx-fc a:hover,
body.shop-page #acx-footer .acx-fc a:hover {
  color: var(--gold);
}
body.editorial #acx-footer .acx-fh,
body.shop-page #acx-footer .acx-fh {
  color: rgba(244, 208, 111, 0.6);
}
/* Regulatory disclaimer: gold-emphasis on the bold callouts.
   !important is required because the <strong> tags have inline
   color:rgba(255,255,255,.42) attributes set in footer.ejs. */
body.editorial #acx-footer .acx-sec p strong,
body.shop-page #acx-footer .acx-sec p strong {
  color: var(--gold) !important;
}

/* ---------- 2. Reset ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  font-family: var(--ff-body);
  background: var(--void);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- 3. Cosmic background with sun-ray ---------------- */
.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--grad-cosmic);
  overflow: hidden;
}

/* Sun-ray layer - thin rays emanating from top-centre */
.cosmic-bg::before {
  content: '';
  position: absolute;
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 180vw;
  height: 160vh;
  background: repeating-conic-gradient(
    from 185deg at 50% 12.5%,
    transparent 0deg 2.8deg,
    rgba(255, 228, 154, 0.08) 2.8deg 3.6deg,
    transparent 3.6deg 6deg,
    rgba(244, 208, 111, 0.05) 6deg 6.8deg,
    transparent 6.8deg 10.5deg,
    rgba(255, 228, 154, 0.09) 10.5deg 11deg,
    transparent 11deg 14deg
  );
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 10%, black 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 10%, black 10%, transparent 75%);
  opacity: 0.9;
  pointer-events: none;
}

/* Warm halo at top-centre - the "sun" itself */
.cosmic-bg::after {
  content: '';
  position: absolute;
  top: -350px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle,
    rgba(255, 228, 154, 0.45) 0%,
    rgba(244, 208, 111, 0.22) 25%,
    rgba(229, 180, 55, 0.1) 50%,
    transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.cosmic-bg .stars, .cosmic .stars {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 35% 15%, rgba(255,228,154,0.8), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 90%, rgba(255,255,255,0.7), transparent);
  background-size: 800px 800px;
  opacity: 0.35;
  animation: drift 240s linear infinite;
}
@keyframes drift {
  from { background-position: 0 0; }
  to   { background-position: 800px 800px; }
}

/* ---------- 4. Layout ---------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}

/* ---------- 5. Typography ------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.h-display { font-size: clamp(40px, 6vw, 72px); font-weight: 500; }
.h-xl      { font-size: clamp(32px, 4vw, 48px); }
.h-lg      { font-size: clamp(26px, 3vw, 36px); }
.h-md      { font-size: 22px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--gold);
}
.text-muted { color: var(--text-muted); }
.text-dim   { color: var(--text-dim); }
.text-gold  { color: var(--gold); }
.text-bull  { color: var(--bull); }
.text-bear  { color: var(--bear); }
.text-mono  { font-family: var(--ff-mono); }

.gradient-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { font-size: 18px; color: var(--text-muted); max-width: 60ch; }

/* ---------- 6. Buttons --------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: all .2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-gold {
  background: var(--grad-gold);
  color: #1A1200;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 46px rgba(229,180,55,.38); }
.btn-ghost {
  border: 1px solid var(--hairline-2);
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--gold); }
.btn-violet {
  background: var(--grad-violet);
  color: #fff;
}
.btn-lg { padding: 16px 32px; font-size: 15px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ---------- 7. Cards ----------------------------------------- */
.card {
  background: var(--grad-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(20px);
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover { border-color: var(--hairline-2); }
.card-accent {
  background: linear-gradient(180deg, rgba(229,180,55,0.08) 0%, rgba(16,16,58,0.9) 100%);
  border-color: rgba(229,180,55,0.25);
}
.card-tight { padding: 20px; }
.card-title { font-family: var(--ff-display); font-size: 24px; margin-bottom: 8px; }

/* ---------- 8. Top ticker ------------------------------------ */
.ticker-bar {
  background: rgba(13, 11, 46, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  height: 38px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ticker-track {
  display: flex;
  gap: 48px;
  animation: ticker 28s linear infinite;
  white-space: nowrap;
  padding-left: 48px;
}
.ticker-item { /* raised from 12.5px → 14px for financial readability */
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono);
  font-size: 13.5px;
  color: var(--text-muted);
}
.ticker-item strong { color: var(--text); font-weight: 600; }
.ticker-item .up   { color: var(--bull); }
.ticker-item .down { color: var(--bear); }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 9. Navigation ------------------------------------ */
.nav {
  position: sticky; top: 0;
  z-index: 1000;
  overflow: visible;
  background: rgba(23, 20, 69, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
  overflow: visible;
  padding: 0 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand > span:not(.brand-mark) {
  background: linear-gradient(135deg, #F5CF6B, #E5B437);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10,11,46,0.9);
  border: 1px solid rgba(229,180,55,0.4);
  box-shadow: 0 0 0 1px rgba(229,180,55,0.12), 0 0 18px rgba(229,180,55,0.25);
  flex-shrink: 0;
  overflow: hidden;
}
.brand-mark svg { display: block; }
.nav-menu {
  display: flex; align-items: center; gap: 2px;
}
/* white-space:nowrap (2026-07-09): with 9 top-level items + the Free Tools trigger, the row
   is wider than its flex container at any real desktop width once .nav-inner hits its
   1280px max-width. Without nowrap, flex shrinks each <a> below its content width and the
   browser wraps multi-word labels ("Free Tools", "Talk to Astrologer") onto a second line -
   they stay vertically centered by align-items:center, so they render several px lower/
   taller than the single-line items beside them (the reported "menu not aligned" bug).
   Trimmed horizontal padding + gap buys back enough width that the row fits on one line
   down to the raised 1300px breakpoint below; nowrap makes any future overflow spill
   past the row instead of silently wrapping into this same misaligned state. */
.nav-menu a, .nav-ft-trigger {
  padding: 10px 9px;
  font-size: 14px;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: color .2s ease;
  position: relative;
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--text); }
.nav-menu a.active { color: var(--gold); }
.dd-arrow { display:inline-flex;align-items:center;margin-left:3px;transition:transform .25s ease; }
.has-dropdown:hover .dd-arrow { transform:rotate(180deg); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* Nav breakpoint raised 960→1300 (2026-07-09): at the old 960px cutoff, the desktop nav
   showed from 960px all the way up - but even at full HD (1920px) width .nav-inner's
   1280px max-width plus the 60px theme-toggle gutter (below) left only ~1196px for
   brand+menu+cta, ~90-140px short of what 9 items + Free Tools + the CTA pill need on
   one line. Verified live (Playwright, logged-in + simulated logged-out) that the
   trimmed padding above fits with margin to spare starting at 1301px; below that the
   existing, already-working mobile hamburger drawer takes over instead of a half-wrapped
   desktop row. This is scoped to the nav only - do NOT change the sitewide 960px
   breakpoint used by unrelated components (hero-grid, tiers, footer-grid, etc.). */
@media (max-width: 1300px) {
  .nav-menu { display: none; }
}

/* ---------- 10. Hero ----------------------------------------- */
.hero {
  padding: 96px 0 64px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
.hero h1 { margin: 20px 0 24px; }
.hero .lead { margin-bottom: 32px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust {
  display: flex; gap: 32px; margin-top: 48px;
  padding-top: 32px; border-top: 1px solid var(--hairline);
}
.hero-trust .stat strong {
  display: block;
  font-family: var(--ff-display);
  font-size: 32px;
  color: var(--gold);
}
.hero-trust .stat span {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ---------- 11. Zodiac wheel --------------------------------- */
.zodiac-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin: 0 auto;
}
.zodiac-wheel {
  width: 100%; height: 100%;
  animation: spin 120s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.zodiac-center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 52%; aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(22,22,70,0.95), rgba(11,11,46,0.95));
  border: 1px solid rgba(229,180,55,0.3);
  display: grid; place-items: center;
  text-align: center;
  padding: 24px;
  box-shadow: 0 0 80px rgba(229,180,55,0.12), inset 0 0 40px rgba(139,92,246,0.12);
}
.zodiac-center .label {
  font-size: 12px; letter-spacing: 0.2em;
  color: var(--gold); text-transform: uppercase;
}
.zodiac-center .value {
  font-family: var(--ff-display);
  font-size: 36px; color: var(--text);
  margin: 8px 0 4px;
}
.zodiac-center .sub {
  font-size: 12px; color: var(--text-muted);
}

/* ---------- 12. Forecast preview card ------------------------ */
.forecast-card {
  background: var(--grad-panel);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xl);
  padding: 28px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
}
.forecast-head {
  display: flex; justify-content: space-between; align-items: start;
  margin-bottom: 20px;
}
.forecast-head .tag {
  font-size: 12px; padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(34,197,94,0.12);
  color: var(--bull);
  border: 1px solid rgba(34,197,94,0.3);
  font-weight: 600; letter-spacing: 0.08em;
}
.forecast-price {
  font-family: var(--ff-mono);
  font-size: 32px; font-weight: 600;
}
.forecast-change { color: var(--bull); font-size: 14px; margin-top: 4px; }
.forecast-chart { height: 140px; margin: 20px 0; }
.forecast-planets {
  display: flex; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--hairline);
}
.forecast-planets .p {
  text-align: center; font-size: 12px; color: var(--text-muted);
}
.forecast-planets .p .glyph {
  font-size: 22px; color: var(--gold); display: block; margin-bottom: 4px;
}

/* ---------- 13. Feature tiles -------------------------------- */
.feature {
  background: var(--grad-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.feature:hover { border-color: rgba(229,180,55,0.35); transform: translateY(-4px); }
.feature::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(400px at 100% 0, rgba(229,180,55,0.08), transparent 50%);
  pointer-events: none;
}
.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(229,180,55,0.15), rgba(139,92,246,0.12));
  border: 1px solid rgba(229,180,55,0.25);
  margin-bottom: 20px;
}
.feature h3 {
  font-family: var(--ff-display);
  font-size: 24px;
  margin-bottom: 8px;
}
.feature p { color: var(--text-muted); font-size: 14.5px; }

/* ---------- 14. Process steps -------------------------------- */
.process {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  position: relative;
}
.process::before {
  content: ''; position: absolute;
  top: 40px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
}
.step { text-align: center; padding: 0 16px; }
.step-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ff-display);
  font-size: 28px;
  margin: 0 auto 20px;
  background: var(--midnight);
  border: 1px solid var(--hairline-2);
  color: var(--gold);
  position: relative; z-index: 1;
}
.step h4 { font-size: 22px; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 14.5px; }

@media (max-width: 960px) {
  .process { grid-template-columns: 1fr; }
  .process::before { display: none; }
}

/* ---------- 15. Pricing tiers -------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; } }

.tier {
  background: var(--grad-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 36px 28px;
  position: relative;
  display: flex; flex-direction: column;
}
.tier-popular {
  border-color: rgba(229,180,55,0.5);
  background: linear-gradient(180deg, rgba(229,180,55,0.08), rgba(22,22,70,0.95));
  box-shadow: 0 20px 60px rgba(229,180,55,0.1);
  transform: scale(1.02);
}
.tier-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--grad-gold);
  color: #1A1200;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.15em;
}
.tier h3 {
  font-family: var(--ff-display);
  font-size: 28px; margin-bottom: 8px;
}
.tier .tier-desc { color: var(--text-muted); font-size: 14px; min-height: 44px; }
.tier-price {
  margin: 24px 0; padding: 24px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.tier-price .amount {
  font-family: var(--ff-display);
  font-size: 48px; font-weight: 500;
}
.tier-price .unit { color: var(--text-muted); font-size: 14px; }
.tier-features { margin-bottom: 28px; flex: 1; }
.tier-features li {
  padding: 10px 0;
  display: flex; gap: 10px;
  font-size: 14px; color: var(--text);
  border-bottom: 1px dashed var(--hairline);
}
.tier-features li:last-child { border: 0; }
.tier-features .check {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(34,197,94,0.15); color: var(--bull);
  display: grid; place-items: center;
  font-size: 12px;
}
.tier-features .cross {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.05); color: var(--text-dim);
  display: grid; place-items: center;
  font-size: 12px;
}
.tier-features li.off { color: var(--text-dim); }

/* ---------- 16. Testimonials --------------------------------- */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .testimonials { grid-template-columns: 1fr; } }
.quote {
  background: var(--grad-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
}
.quote-mark {
  font-family: var(--ff-display); font-size: 80px; line-height: 0.6;
  color: var(--gold); opacity: 0.35;
  position: absolute; top: 20px; right: 20px;
}
.quote p {
  font-size: 15.5px; line-height: 1.65;
  margin-bottom: 20px;
  color: var(--text);
}
.quote-who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--hairline);
}
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-violet);
  display: grid; place-items: center;
  font-weight: 600; color: #fff;
}
.quote-who strong { display: block; font-size: 14px; }
.quote-who span { font-size: 12px; color: var(--text-muted); }

/* ---------- 17. FAQ ------------------------------------------ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--hairline);
}
.faq-q {
  width: 100%;
  text-align: left;
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
}
.faq-q .plus {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hairline-2);
  display: grid; place-items: center;
  transition: all .3s ease;
  color: var(--gold);
  flex-shrink: 0;
}
.faq-item.open .plus { transform: rotate(45deg); background: rgba(229,180,55,0.1); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
  color: var(--text-muted);
  font-size: 15px;
  padding: 0 0;
}
.faq-item.open .faq-a { max-height: 300px; padding: 0 0 22px; }

/* ---------- 18. Contact form --------------------------------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px;
  align-items: start;
}
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info .contact-row {
  display: flex; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.contact-info .contact-row:last-child { border: 0; }
.contact-info .icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(229,180,55,0.1);
  color: var(--gold);
}
.contact-info strong { display: block; font-size: 13px; color: var(--text-muted); }
.contact-info p { font-size: 15px; }

.contact-form {
  background: var(--grad-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px;
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted); margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(5,6,28,0.6);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold);
}
.field textarea { resize: vertical; min-height: 110px; }

/* ---------- 19. Footer --------------------------------------- */
footer {
  padding: 72px 0 32px;
  margin-top: 48px;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, transparent 0%, rgba(43,36,94,0.4) 40%, rgba(51,43,108,0.6) 100%);
  position: relative;
}
footer::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 900px 400px at 50% 100%, rgba(229,180,55,0.12) 0%, transparent 70%);
  pointer-events: none;
}
footer > * { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.footer-col h5 {
  font-family: var(--ff-body);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--gold); margin-bottom: 20px;
}
.footer-col li { padding: 6px 0; }
.footer-col a { color: var(--text-muted); font-size: 14px; }
.footer-col a:hover { color: var(--text); }

.footer-about p { color: var(--text-muted); font-size: 14px; margin: 16px 0 20px; }
.social { display: flex; gap: 10px; }
.social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hairline-2);
  color: var(--text-muted);
  transition: all .2s ease;
}
.social a:hover { color: var(--gold); border-color: var(--gold); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 13px; color: var(--text-dim);
}
.footer-bottom .links { display: flex; gap: 20px; }


/* ─── Editorial enhancements (gold/serif treatment, global) ─────
   Applied site-wide so internal pages match the homepage's
   editorial sanctum styling. Use the utility classes below. */

/* Italic gold-soft accent inside any heading: <h2>Yours <em>truly</em></h2> */
h1 em, h2 em, h3 em, .h-italic-em {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--gold-soft);
  font-weight: 500;
}

/* Gold eyebrow strip - small uppercase letterspaced gold above a section */
.editorial-eyebrow {
  font-family: var(--ff-body);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.editorial-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.editorial-eyebrow.center {
  display: flex;
  justify-content: center;
}
.editorial-eyebrow.center::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* Editorial display headline - Cormorant italic, larger */
.editorial-h {
  font-family: var(--ff-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 12px;
}

/* Widget head - promote h3 title to serif when card has .editorial-card */
.editorial-card .widget-head h3,
.widget.editorial-card h3 {
  font-family: var(--ff-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}

/* Gold-bordered glow card variant for highlighted CTAs */
.editorial-card {
  border: 1px solid var(--hairline-2);
  background: linear-gradient(180deg, rgba(229,180,55,0.04), var(--panel));
  box-shadow: 0 10px 40px rgba(229, 180, 55, 0.08);
}

/* Quote block (editorial pull-quote) */
.editorial-quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text);
  padding: 24px 28px;
  border-left: 2px solid var(--gold);
  background: rgba(229,180,55,0.04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.editorial-quote::before {
  content: '“';
  font-family: var(--ff-display);
  font-size: 56px;
  line-height: 0;
  color: var(--gold-soft);
  opacity: 0.5;
  margin-right: 6px;
  vertical-align: -16px;
}

/* Page hero pattern - eyebrow + display headline + lead */
.page-hero {
  padding: 28px 0 36px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 28px;
}
.page-hero .lead {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 64ch;
  line-height: 1.6;
  margin: 4px 0 0;
}

/* ─── Editorial app shell - when body has .editorial class, the
   dashboard sidebar/search/icons/cards swap to warm gold-on-brown
   so internal pages match the homepage palette. ─────────────── */
body.editorial .sidebar {
  background: rgba(42, 27, 18, 0.75);
  border-right-color: rgba(229, 180, 55, 0.22);
}
body.editorial .search-box,
body.editorial .icon-btn {
  background: rgba(42, 27, 18, 0.5);
  border-color: rgba(229, 180, 55, 0.22);
}
body.editorial .widget,
body.editorial .card {
  background: linear-gradient(180deg, rgba(229, 180, 55, 0.05), rgba(26, 14, 8, 0.7));
  border-color: rgba(229, 180, 55, 0.18);
}
body.editorial .welcome-card {
  background: linear-gradient(135deg, rgba(229,180,55,0.10), rgba(26,14,8,0.85));
  border-color: rgba(229, 180, 55, 0.28);
}
body.editorial .natal-chip {
  background: rgba(229, 180, 55, 0.06);
  border: 1px solid rgba(229, 180, 55, 0.18);
  color: var(--gold-soft);
}
body.editorial .natal-chip strong { color: var(--gold); }
/* Sidebar menu hover/active under editorial */
body.editorial .sidebar-menu a:hover {
  background: rgba(229, 180, 55, 0.08);
  color: var(--gold-soft);
}
body.editorial .sidebar-menu a.active {
  background: linear-gradient(90deg, rgba(229,180,55,0.20), transparent);
}
/* Section labels (sidebar) - gold under editorial */
body.editorial .sidebar-menu .section-label {
  color: rgba(244, 208, 111, 0.55);
}
/* Brand mark in dashboard sidebar */
body.editorial .sidebar .brand {
  border-bottom: 1px solid rgba(229, 180, 55, 0.15);
}
/* Top app-header tweaks */
body.editorial .app-header {
  border-bottom: 1px solid rgba(229, 180, 55, 0.12);
}

/* ─── AI Analyst shared widget - highlighted with green outline ──
   The shared partial (dashboard + birth-chart) gets a vivid bull-green
   border + soft green glow so the AI feature stands out as a hero.
   Targeted by .widget.ai-card.editorial-card to avoid bleeding onto
   the persona Mercury/Jupiter cards which also use .ai-card. ────── */
.widget.ai-card.editorial-card {
  border: 1.5px solid var(--bull) !important;
  background: linear-gradient(180deg, rgba(34,197,94,0.06), rgba(229,180,55,0.03)) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.10), 0 12px 40px rgba(34,197,94,0.10);
  border-radius: var(--r-lg);
  position: relative;
}
.widget.ai-card.editorial-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 600px 200px at 50% 0%, rgba(34,197,94,0.10), transparent 60%);
}
.widget.ai-card.editorial-card > * { position: relative; z-index: 1; }
/* Green Ask AI button (inside the AI Analyst widget only) */
.widget.ai-card.editorial-card .btn-ai {
  background: linear-gradient(135deg, #34D399, #22C55E) !important;
  border: 1px solid rgba(34,197,94,0.5) !important;
  color: var(--void) !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  box-shadow: 0 6px 20px rgba(34,197,94,0.25);
}
.widget.ai-card.editorial-card .btn-ai:hover {
  background: linear-gradient(135deg, #4ADE80, #22C55E) !important;
  box-shadow: 0 8px 28px rgba(34,197,94,0.40);
}

/* ─── Mercury / Jupiter persona cards - distinct accent colours ──
   Mercury (markets) → bull green outline + glow.
   Jupiter (personal/family/life) → violet outline + glow.
   Applied on both /chat-with-astrologer and /talk-to-astrologer
   where the cards carry data-persona. ─────────────────────────── */
.ai-card[data-persona="mercury"] {
  border: 1.5px solid var(--bull) !important;
  background: linear-gradient(180deg, rgba(34,197,94,0.08), rgba(22,22,70,0.85)) !important;
  box-shadow: 0 8px 32px rgba(34,197,94,0.18);
}
.ai-card[data-persona="mercury"]::before {
  background: radial-gradient(circle, rgba(34,197,94,0.18), transparent 60%) !important;
}
.ai-card[data-persona="mercury"]:hover {
  border-color: #4ADE80 !important;
  box-shadow: 0 14px 44px rgba(34,197,94,0.30);
}
.ai-card[data-persona="mercury"] .btn-gold {
  background: linear-gradient(135deg, #34D399, #22C55E) !important;
  color: var(--void) !important;
}
.ai-card[data-persona="mercury"] .btn-gold:hover {
  background: linear-gradient(135deg, #4ADE80, #22C55E) !important;
}

.ai-card[data-persona="jupiter"] {
  border: 1.5px solid var(--violet) !important;
  background: linear-gradient(180deg, rgba(139,92,246,0.10), rgba(22,22,70,0.85)) !important;
  box-shadow: 0 8px 32px rgba(139,92,246,0.20);
}
.ai-card[data-persona="jupiter"]::before {
  background: radial-gradient(circle, rgba(139,92,246,0.18), transparent 60%) !important;
}
.ai-card[data-persona="jupiter"]:hover {
  border-color: var(--violet-soft) !important;
  box-shadow: 0 14px 44px rgba(139,92,246,0.32);
}
.ai-card[data-persona="jupiter"] .btn-gold {
  background: linear-gradient(135deg, var(--violet-soft), var(--violet)) !important;
  color: var(--text) !important;
}
.ai-card[data-persona="jupiter"] .btn-gold:hover {
  background: linear-gradient(135deg, #C4B5FD, var(--violet)) !important;
}

/* ── Mobile: prevent iOS Safari auto-zoom on input focus - form controls must be ≥16px (added 2026-05-27) ── */
@media (max-width: 960px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea { font-size: 16px !important; }
}

/* ============================================================
   LIGHT MODE - html[data-theme="light"]; mirrors mobile "Almanac".
   Scoped to body:not(.admin-editorial): beats body.editorial (0,2,2 > 0,1,1)
   AND leaves sadmin dark. Auto-detect + remembered toggle. (2026-06-07)
   ============================================================ */
html[data-theme="light"] body:not(.admin-editorial) {
  --void:        #FBF6EA;
  --midnight:    #F1E7D2;
  --deep:        #EFE3C6;
  --panel:       #FFFFFF;
  --panel-2:     #FBF3DF;
  --elev:        #F4ECD8;
  --hairline:    #E7D9B5;
  --hairline-2:  #D9C79A;

  --gold:        #7A5C12;   /* text/links - 5.8:1 on parchment */
  --gold-soft:   #7A5C12;   /* used as TEXT across the site → must be readable */
  --gold-deep:   #5E4710;
  --saffron:     #B5530F;
  --violet:      #5D4BC0;
  --violet-soft: #5D4BC0;  /* used as TEXT site-wide (tag-pro, PRO chips, order tracking) → AA on parchment AND faint violet tints (deepened 2026-06-26) */
  --starlight:   #5A4410;

  --ai:          #7A5C12;
  --ai-soft:     #C9A227;
  --ai-glow:     rgba(201,162,39,0.12);
  --ai-border:   rgba(122,92,18,0.30);

  --bull:        #176B30;
  --bull-soft:   #176B30;  /* used as TEXT site-wide → AA on parchment AND faint green tints (deepened 2026-06-26) */
  --bear:        #A8380A;
  --bear-soft:   #A8380A;
  --neutral:     #6E5C28;
  --info:        #1E54C9;
  --info-soft:   #1E54C9;  /* used as TEXT (connecting banner, moon labels) → AA on parchment + faint blue tints (deepened 2026-06-26) */

  /* Extended accents - deepened so planet/zodiac symbols stay AA on white/cream cards */
  --orange:      #AB4E0C;  /* 5.5:1 on white, 4.8:1 on a faint red/orange tint */
  --pink:        #A8174E;  /* 7.3:1 on white */
  --yellow:      #8A6800;  /* 5.2:1 on white, 4.7:1 on gold tint */
  --sky:         #1F6FB2;  /* 5.3:1 on white */
  --lilac:       #7A3FB0;  /* 6.6:1 on white */
  /* "ink" variants - aliases of the (deepened) base accents; coloured TEXT on a faint tint of its own hue */
  --bull-ink:    #176B30;
  --bear-ink:    #A8380A;
  --gold-ink:    #7A5C12;
  --violet-ink:  #5D4BC0;

  --text:        #2A2417;   /* 14.3:1 */
  --text-muted:  #5A4410;   /* 8.6:1 */
  --text-dim:    #6E5C28;   /* verified >=4.5:1 */

  --shadow-sm:   0 4px 16px rgba(150,120,40,0.10);
  --shadow-md:   0 10px 40px rgba(150,120,40,0.14);
  --shadow-gold: 0 10px 40px rgba(229,180,55,0.22);

  --grad-cosmic: radial-gradient(ellipse 1100px 700px at 50% -5%, rgba(201,162,39,0.10) 0%, transparent 60%),
                 linear-gradient(180deg, #FBF6EA 0%, #F4ECD8 100%);
  --grad-gold:   linear-gradient(135deg, #E7C66A 0%, #C9A227 55%, #7A5C12 100%);
  --grad-violet: linear-gradient(135deg, #8B7BE0 0%, #6D5BD0 100%);
  --grad-panel:  linear-gradient(180deg, #FFFFFF 0%, #FBF3DF 100%);

  background: var(--void);
  color: var(--text);
}

/* Light-mode "daytime sky" (2026-07-08): the dark theme gets warmth + depth from the
   global sun-ray background; light mode used to flatten it to plain parchment. Re-light it
   as a DAY version - a warm gradient wash + soft amber sun-rays + a gentle sun halo, all in
   deepened gold so they read on cream yet stay faint enough to preserve the light theme's
   AA/AAA text contrast (rays are mask-concentrated at the top, behind dark headline ink).
   Stars stay hidden - a day sky has none. Global (matches dark's global background). */
html[data-theme="light"] body:not(.admin-editorial) .cosmic-bg {
  background:
    radial-gradient(ellipse 1200px 760px at 50% -6%, rgba(201,162,39,0.16) 0%, rgba(229,180,55,0.07) 26%, transparent 62%),
    radial-gradient(ellipse 1500px 620px at 50% 110%, rgba(201,162,39,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #FDF9F0 0%, #F6EFDD 55%, #F1E8D0 100%);
}
html[data-theme="light"] body:not(.admin-editorial) .cosmic-bg::before {
  opacity: 0.6;
  background: repeating-conic-gradient(
    from 185deg at 50% 12.5%,
    transparent 0deg 2.8deg,
    rgba(201, 162, 39, 0.12) 2.8deg 3.6deg,
    transparent 3.6deg 6deg,
    rgba(184, 137, 26, 0.08) 6deg 6.8deg,
    transparent 6.8deg 10.5deg,
    rgba(201, 162, 39, 0.13) 10.5deg 11deg,
    transparent 11deg 14deg
  );
}
html[data-theme="light"] body:not(.admin-editorial) .cosmic-bg::after {
  opacity: 0.75;
  background: radial-gradient(circle,
    rgba(244, 208, 111, 0.38) 0%,
    rgba(229, 180, 55, 0.18) 28%,
    rgba(201, 162, 39, 0.07) 52%,
    transparent 72%);
}
html[data-theme="light"] body:not(.admin-editorial) .cosmic-bg .stars { display: none; }
html[data-theme="light"] body:not(.admin-editorial) .sun-ray { opacity: 0.25; }

/* Theme toggle button (injected by the head script) */
.theme-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 1200;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--gold);
  border: 1px solid var(--hairline-2); cursor: pointer;
  box-shadow: var(--shadow-sm); font-size: 18px; line-height: 1;
  transition: transform .15s, background .2s;
}
.theme-toggle:hover { transform: scale(1.06); }
@media (max-width: 640px) { .theme-toggle { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 16px; } }

/* Light-mode: relight dark-hardcoded chrome so foreground stays readable (2026-06-07) */
/* Market ticker ribbon (2026-07-08): the old flat --panel-2 fill was within ~3 values of the
   parchment page, so the scrolling strip vanished into the nav. Give it a warm, slightly
   deeper gradient band + a defined bottom edge so it reads as a distinct data ribbon above
   the nav. Mono text stays dark ink / bull-green / bear-rust - all AA on the deeper cream. */
html[data-theme="light"] body:not(.admin-editorial) .ticker-bar {
  background: linear-gradient(180deg, #F5ECD5 0%, #EFE3C4 100%);
  border-bottom: 1px solid var(--hairline-2);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5);
}
html[data-theme="light"] body:not(.admin-editorial) .ticker-item { color: var(--neutral); }
html[data-theme="light"] body:not(.admin-editorial) .nav { background: rgba(251,246,234,0.88); border-bottom-color: var(--hairline); }
html[data-theme="light"] body:not(.admin-editorial) .brand > span:not(.brand-mark) { -webkit-text-fill-color: var(--gold-deep); background: none; }
html[data-theme="light"] body:not(.admin-editorial) .zodiac-center { background: radial-gradient(ellipse at 50% 35%, #FBF3DF 0%, #EFE3C6 65%); }

/* ── Light-mode contrast fixes (2026-06-10, founder accessibility report) ── */
/* Mobile nav DRAWER: the dark gradient (in styles.css inline block) is the dark-mode default;
   in light mode flip it to a light surface so the (dark) menu text is readable. */
html[data-theme="light"] body:not(.admin-editorial) .nav-menu.open {
  background: #FFFDF7 !important;
  border-left-color: var(--hairline);
  box-shadow: -16px 0 50px rgba(40,30,10,0.18);
}
/* FOOTER is a designed DARK surface (it never flips its bg). The 2026-06-07 work var-ized its
   text, so in light mode the text went dark → unreadable on the dark footer. Re-point the
   footer's LOCAL vars back to the dark-theme (light) palette so its text is light again. */
html[data-theme="light"] body:not(.admin-editorial) footer {
  --text: #F9F3E8; --text-muted: #D4CBB6; --text-dim: #BEB2A6;
  --gold: #E5B437; --gold-soft: #F4D06F; --gold-deep: #B8860B;
  --hairline: rgba(255,255,255,0.10);
}
html[data-theme="light"] body:not(.admin-editorial) footer a { color: #F4D06F; }
html[data-theme="light"] body:not(.admin-editorial) footer a:hover { color: #FFFFFF; }
/* Homepage red emphasis hardcodes the dark-mode --bear-soft (#FCA5A5) → washed out on the
   light page; use the light-mode --bear (#C2410C, AA) instead. */
html[data-theme="light"] body:not(.admin-editorial) .h-emotional .h-section-eyebrow,
html[data-theme="light"] body:not(.admin-editorial) .h-sebi strong { color: var(--bear); }
/* Badge/status chips (2026-06-10 sweep). Class-based, so a base.css light-mode rule outranks the
   page-inline definitions by specificity. The astrologer TIER badge (.dir-card-badge:not(.ai))
   sits on a hardcoded-dark badge over the dark card image → keep its gold LIGHT (var flipped it
   to dark gold #7A5C12 → 3.08:1). The .ai variants already carry their own light green/purple. */
html[data-theme="light"] body:not(.admin-editorial) .dir-card-badge:not(.ai) { color: #F4D06F; }
/* Homepage astrologer-card tier badge ("Senior") - same dark-image chip; keep its gold LIGHT.
   Deliberately LOW specificity (0,2,1) so the persona variants (.h-astro[data-persona] …, (0,3,0))
   keep their own green/purple. */
html[data-theme="light"] .h-astro-badge { color: #F4D06F; }
/* "Online" count chip + per-card status labels flipped wrong on light surfaces.
   (.card-status.offline already uses var(--text-dim) - theme-aware.) */
html[data-theme="light"] body:not(.admin-editorial) .online-count { color: var(--bull); }
html[data-theme="light"] body:not(.admin-editorial) .card-status.online { color: var(--bull); }
html[data-theme="light"] body:not(.admin-editorial) .card-status.busy { color: var(--gold); }
/* NOTE: the "Ask AI Astrologer / Mercury or Jupiter · 24×7" audit flags are the FAB hover
   tooltip (#acx-ai-fab-tip, chat-widget.js) - its own bubble is intentionally dark with light
   text, and FABs only render for logged-out visitors. Not a bug; do NOT restyle .sub globally. */

/* ── DARK-by-design surfaces that need the LIGHT (dark-theme) palette in light mode (2026-06-26).
   Same footer pattern: the surface bg stays dark (a hardcoded dark gradient), so the variable-
   driven text would flip to dark ink and vanish. Re-point each surface's LOCAL text vars to the
   light palette so gold/coloured text reads on the dark surface. ── */
/* Tool-page hero BANDS render mid-tan in light mode (body.tool-editorial forces a
   gold→#1a0e08 gradient !important), too dark for the dark-gold heading text (2.6:1) yet too
   light for light text. RELIGHT the band bg to light cream so the dark-gold/ink text reads. */
html[data-theme="light"] body:not(.admin-editorial) .num-hero,
html[data-theme="light"] body:not(.admin-editorial) .rashi-hero,
html[data-theme="light"] body:not(.admin-editorial) .rk-hero,
html[data-theme="light"] body:not(.admin-editorial) .tool-hero {
  background: linear-gradient(135deg, rgba(229,180,55,0.10), var(--panel-2)) !important;
}
/* Avatar circles (chat/consultation) are a dark radial (#4a3526→#2a1b12); keep initials light. */
html[data-theme="light"] body:not(.admin-editorial) .card-avatar {
  --gold: #E5B437; --gold-soft: #F4D06F;
}

/* ── Light-mode relight for the editorial APP SHELL - sidebar + dashboard cards (2026-06-08).
   The app-shell (sidebar, search, widgets, cards) uses hardcoded DARK surfaces under
   body.editorial / in pages.css, which the variable-based light theme cannot flip. In light
   mode that left a dark sidebar + dark cards while the variable-driven text turned dark too
   => the left menu and dashboard cards rendered invisible (dark-on-dark). These overrides flip
   those surfaces to light; the already-dark text then reads correctly. Same scope as the
   variable block (body:not(.admin-editorial)), so sadmin (admin-editorial) stays dark. */
html[data-theme="light"] body:not(.admin-editorial) .sidebar {
  /* !important needed to beat responsive.css's mobile off-canvas `.sidebar{background:#0a0b2e!important}`
 - otherwise the mobile sidebar drawer stays dark navy in light mode (nav text unreadable). */
  background: var(--elev) !important;
  border-right-color: var(--hairline-2);
}
html[data-theme="light"] body:not(.admin-editorial) .sidebar .brand { border-bottom-color: var(--hairline); }
html[data-theme="light"] body:not(.admin-editorial) .sidebar-footer { border-top-color: var(--hairline); }
html[data-theme="light"] body:not(.admin-editorial) .sidebar-menu a:hover {
  background: rgba(201,162,39,0.12);
  color: var(--gold-deep);
}
html[data-theme="light"] body:not(.admin-editorial) .sidebar-menu a.active {
  background: linear-gradient(90deg, rgba(201,162,39,0.20), transparent);
  color: var(--gold-deep);
}
html[data-theme="light"] body:not(.admin-editorial) .sidebar-menu .section-label { color: var(--text-dim); }
html[data-theme="light"] body:not(.admin-editorial) .search-box,
html[data-theme="light"] body:not(.admin-editorial) .icon-btn {
  background: var(--panel);
  border-color: var(--hairline-2);
}
html[data-theme="light"] body:not(.admin-editorial) .app-header { border-bottom-color: var(--hairline); }
html[data-theme="light"] body:not(.admin-editorial) .widget,
html[data-theme="light"] body:not(.admin-editorial) .card {
  background: var(--grad-panel);
  border-color: var(--hairline);
}
html[data-theme="light"] body:not(.admin-editorial) .welcome-card {
  background: linear-gradient(135deg, rgba(109,91,208,0.10), rgba(201,162,39,0.12));
  border-color: var(--hairline-2);
}
html[data-theme="light"] body:not(.admin-editorial) .natal-chip {
  background: rgba(201,162,39,0.10);
  border-color: rgba(122,92,18,0.20);
}
html[data-theme="light"] body:not(.admin-editorial) .sector {
  background: var(--panel);
  border-color: var(--hairline);
}
/* dashboard inner-surfaces (dark navy literals) → light inset panels */
html[data-theme="light"] body:not(.admin-editorial) .transit,
html[data-theme="light"] body:not(.admin-editorial) .alert,
html[data-theme="light"] body:not(.admin-editorial) .kv,
html[data-theme="light"] body:not(.admin-editorial) .yoga-row {
  background: var(--panel-2);
  border-color: var(--hairline);
}
/* astrologer online/busy/offline toggle rail (was dark navy) */
html[data-theme="light"] body:not(.admin-editorial) .status-toggle {
  background: var(--panel-2);
  border-color: var(--hairline-2);
}
/* Dashboard forecast mini-chart SVG had hardcoded fills (#9F9FC5 axis, #E5B437 planets)
   that turn low-contrast once its card goes light → relight them. (2026-06-08) */
html[data-theme="light"] body:not(.admin-editorial) #forecastChart text { fill: var(--text-dim); }
html[data-theme="light"] body:not(.admin-editorial) #forecastChart #fc-planets text { fill: var(--gold-deep); }

/* ============================================================
   Round-3 dark-section relights (2026-06-26)
   A few surfaces still carried a hardcoded dark / semi-transparent-over-dark
   background that the variable-driven light theme never relit. In light mode
   that left a DARK or MID-grey surface behind dark text => the text failed WCAG AA
   regardless of its colour. Each rule below relights one such surface to a LIGHT
   value (so the existing dark text reads) or, for genuinely dark-by-design accents
   (white-on-violet avatars/badge), deepens the saturated bg so white text reads.
   All scoped to html[data-theme="light"] body:not(.admin-editorial) - dark mode
   and sadmin (admin-editorial) are untouched. Each fix measured on the live site
   with a real-pixel sampler (before -> after contrast noted).
   ============================================================ */

/* --- /pricing : billing-toggle pill --------------------------------------
   .billing-toggle .inner had background:rgba(20,8,10,0.6) (dark pill). The
   inactive "Annual"/"Monthly" gold text and the green .save-badge composited
   onto that dark band. Relight the pill to cream so both read.
   save-badge green #176B30: 1.45 -> ~6.0 ; inactive Annual gold: ~1.7 -> ~7.0 */
html[data-theme="light"] body:not(.admin-editorial) .billing-toggle .inner {
  background: var(--elev) !important;
}

/* --- /pricing : "White Glove" tier badge ---------------------------------
   .tier-badge-elite is white text on linear-gradient(135deg,#A78BFA,#7C3AED);
   the light #A78BFA stop gave white only 4.00. Deepen the gradient so the
   lightest stop has enough contrast. white on #6D5BD0/#5D4BC0 -> ~6.5 */
html[data-theme="light"] body:not(.admin-editorial) .tier-badge-elite {
  background: linear-gradient(135deg, #6D5BD0, #5D4BC0) !important;
}

/* --- /astrologers : filter bar behind the 35 chips + count ----------------
   .ax-filter-bar had background:rgba(20,8,10,0.4) (dark) over the cream section
   => an ~rgb(159,151,144) mid-grey behind every chip. The chips are transparent,
   so their gold text + the italic .ax-count sampled that grey.
   chip gold #7A5C12: 2.17 -> 5.64 ; .ax-count #6E5C28: 2.27 -> 5.89 (all 35 fixed at once) */
html[data-theme="light"] body:not(.admin-editorial) .ax-filter-bar {
  background: var(--panel-2) !important;
}

/* --- /chat-with-astrologer : AI persona cards ----------------------------
   .ai-card[data-persona="mercury"|"jupiter"] used a gradient whose BOTTOM stop
   is rgba(22,22,70,0.85) (dark navy). The lower half of each card rendered dark,
   so the green status line / gold desc / violet text there were invisible.
   Relight each card's gradient bottom to --panel, keeping a faint hue tint up top.
   mercury green status "● Always online": 1.64 -> ~6.0 ; jupiter text similar. */
html[data-theme="light"] body:not(.admin-editorial) .ai-card[data-persona="mercury"] {
  background: linear-gradient(180deg, rgba(34,197,94,0.10), var(--panel)) !important;
}
html[data-theme="light"] body:not(.admin-editorial) .ai-card[data-persona="jupiter"] {
  background: linear-gradient(180deg, rgba(139,92,246,0.12), var(--panel)) !important;
}

/* --- /birth-chart : #birthDataCard bottom band ---------------------------
   The card's 2nd child carries an inline background:rgba(0,0,0,0.15) overlay that
   darkened the lower rows (Sun Sign/Moon/Mahadasha/Active Yoga) to ~rgb(208,201,192).
   The coloured labels (gold/blue/green/violet) there measured 3.80–4.04. Replace the
   black overlay with a faint violet tint (keeps the card's two-tone, but light).
   labels: 3.80–4.04 -> 5.25–5.59 */
html[data-theme="light"] body:not(.admin-editorial) #birthDataCard > div:nth-child(2) {
  background: rgba(139,92,246,0.06) !important;
}

/* --- /dashboard : white-text violet avatars ------------------------------
   #hdr-avatar ("AS") and the dash-reports "JUN" square use --grad-violet
   (#8B7BE0 -> #6D5BD0); the "D1+" square uses #8B5CF6 -> #7C3AED. White text on
   the LIGHT stops gave 3.50 / 4.23. Deepen these gradients (scoped to the dashboard
   avatars only - global --grad-violet untouched). white: 3.50 -> ~5.2 ; 4.23 -> ~4.7 */
html[data-theme="light"] body:not(.admin-editorial) #hdr-avatar {
  background: linear-gradient(135deg, #6D5BD0, #5D4BC0) !important;
}
html[data-theme="light"] body:not(.admin-editorial) #dash-reports a > div[style*="grad-violet"] {
  background: linear-gradient(135deg, #6D5BD0, #5D4BC0) !important;
}
html[data-theme="light"] body:not(.admin-editorial) #dash-reports a > div[style*="8B5CF6"] {
  background: linear-gradient(135deg, #6D4BD0, #5D2BB8) !important;
}

/* --- /calendar : "Currently retrograde" pills ----------------------------
   The retro pills (inline background:rgba(239,68,68,.1)) inside #retroBanner
   (inline rgba(239,68,68,.08)) composited to a pink ~rgb(249,216,206) on which the
   orange Ketu glyph ☋ (#AB4E0C) measured 4.08. Lighten the banner + pill red tints
   so every planet glyph clears AA. Ketu orange: 4.08 -> 4.58 */
html[data-theme="light"] body:not(.admin-editorial) #retroBanner {
  background: rgba(239,68,68,0.05) !important;
}
html[data-theme="light"] body:not(.admin-editorial) #retroList > span {
  background: rgba(239,68,68,0.04) !important;
}

/* ============================================================
   Round-4 (2026-06-26)
   Close-out pass on cssVer v20260626c. Two residual classes remained:
   (A) saturated CTA buttons whose label was illegible on the button fill, and
   (B) violet/lavender-tinted chip/card surfaces where deepened text sat just under
   AA. Every item below was measured on the LIVE site with a real rendered-pixel
   sampler (median patch, glyphs excluded) - only genuine sub-4.5 cases were changed.
   NOTE: several audited items did NOT reproduce against real pixels and were left
   as-is after verification - pricing .tier-elite checks/unit/Get-Elite (5.5–6.4),
   the dashboard #birthChartWidget .natal-chips (4.95–5.37), #consultWidget eyebrow
   (5.27) / wallet (5.12) and #forecastBadge (5.15) all already clear AA on v...c
   (the audit's 3.86–4.44 figures came from gradient-averaging, not the real pixel).
   Scoped html[data-theme="light"] body:not(.admin-editorial); dark mode untouched.
   ============================================================ */

/* --- Class A : /pricing savings-strip CTA --------------------------------
   .pr-savings-strip .btn-gold "Get Pro Trader" has an inline background:#22C55E;
   color:#fff => white on bright green = 2.28. Darken the fill to the light-theme
   --bull green so the white label reads (keeps the green "savings" identity,
   matching the strip's green accent). white on #176B30 = 6.60. */
html[data-theme="light"] body:not(.admin-editorial) .pr-savings-strip .btn-gold {
  background: #176B30 !important;
  color: #FFFFFF !important;
}

/* --- Class A : /chat-with-astrologer persona CTAs ------------------------
   .ai-card[data-persona] .btn-gold rendered illegible: Mercury cream #FBF6EA on a
   light-green gradient (#34D399 stop) = 1.94; Jupiter dark #2A2417 on #5D4BC0 = 2.37.
   Give both a consistent treatment - solid DEEP persona colour + white text.
   Mercury white on #176B30 = 6.60 ; Jupiter white on #5D4BC0 = 6.50. */
html[data-theme="light"] body:not(.admin-editorial) .ai-card[data-persona="mercury"] .btn-gold {
  background: #176B30 !important;
  color: #FFFFFF !important;
}
html[data-theme="light"] body:not(.admin-editorial) .ai-card[data-persona="jupiter"] .btn-gold {
  background: #5D4BC0 !important;
  color: #FFFFFF !important;
}
/* .badge-ai "AI ASTROLOGER": gold #7A5C12 on its own rgba(229,180,55,0.18) gold chip,
   sitting over the green Mercury card tint + the card's gold ::before glow, composited
   to ~rgb(216,210,168) => 4.07. Relight the chip to opaque cream so the gold reads on
   every persona. gold on --panel-2 (real render ~rgb(231,220,192)) = 4.57. */
html[data-theme="light"] body:not(.admin-editorial) .ai-card .badge-ai {
  background: var(--panel-2) !important;
}

/* --- Class B : /birth-chart #birthDataCard + cnav PRO chip ----------------
   The card's inline 135deg gradient (violet 0.10 -> cream) plus the Round-3 bottom-band
   overlay (0.06) left the left-column labels tight: Sun Sign gold = 4.63, Mahadasha
   green = 4.98. Pale the card down (violet 0.10 -> 0.06, band 0.06 -> 0.04) for margin.
   Sun Sign 4.63 -> 4.94 ; Moon 5.60 ; Mahadasha 5.23 ; Active Yoga 5.53. */
html[data-theme="light"] body:not(.admin-editorial) #birthDataCard {
  background: linear-gradient(135deg, rgba(139,92,246,0.06), var(--panel-2)) !important;
}
html[data-theme="light"] body:not(.admin-editorial) #birthDataCard > div:nth-child(2) {
  background: rgba(139,92,246,0.04) !important;
}
/* #cnav-ashtak / .cnav-pro "PRO" chip: violet #5D4BC0 text on its inline
   rgba(139,92,246,0.25) chip = 4.33. Pale the chip so the violet label reads.
   violet on rgba(139,92,246,0.10) over the cream nav button = 5.18. */
html[data-theme="light"] body:not(.admin-editorial) #cnav-ashtak span,
html[data-theme="light"] body:not(.admin-editorial) .cnav-pro span {
  background: rgba(139,92,246,0.10) !important;
}

/* --- Class B (cont.): pale the remaining violet-tinted CARDS so the deepened
   gold/green/violet/blue labels clear AA (were 3.87–4.26 on the lavender tint;
   real-pixel verified, not gradient-averaged). Lowering the violet tint 0.08–0.10→0.04. */
html[data-theme="light"] body:not(.admin-editorial) .tier-elite {
  background: linear-gradient(180deg, rgba(139,92,246,0.04), var(--panel)) !important;
}
html[data-theme="light"] body:not(.admin-editorial) #consultWidget {
  background: linear-gradient(135deg, rgba(139,92,246,0.04), var(--panel-2)) !important;
}
html[data-theme="light"] body:not(.admin-editorial) #birthChartWidget .widget {
  background: linear-gradient(135deg, rgba(139,92,246,0.04), var(--panel-2)) !important;
}

/* ============================================================
   SHOP light theme (2026-06-26) - the shop (body.shop-page, css/shop.css) was built
   dark-only on an --umber-* palette with `background:var(--umber-0)!important` and NO
   light rules, so the light toggle never affected it. Flip the umber palette to the
   light "Almanac" surfaces; the shop's var(--text)/var(--gold)/var(--bull) text already
   flips via the global light block (body.shop-page matches :not(.admin-editorial)). The
   product-image showcase areas (.shop-product-img / .shop-pdp-overlay) use RAW umber
   hexes so they stay a deliberate dark backdrop (clean dark-product-on-light-page) and
   their light tags/badges still read.
   ============================================================ */
html[data-theme="light"] body.shop-page:not(.admin-editorial) {
  --umber-0: #FBF6EA;  /* page bg - parchment */
  --umber-1: #F4ECD8;  /* elev / accent */
  --umber-2: #FBF3DF;  /* cream panel */
  --umber-3: #FFFFFF;  /* cards - white */
  background: var(--umber-0) !important;
}
/* Product-image badges/tags sit on their OWN dark glass (rgba(20,8,10,.85)) over the
   dark product showcase - keep their gold/cream text LIGHT (the var flipped it dark). */
html[data-theme="light"] body.shop-page:not(.admin-editorial) .shop-product-badge,
html[data-theme="light"] body.shop-page:not(.admin-editorial) .shop-pdp-overlay .tag {
  --gold-soft: #F4D06F; --gold: #E5B437; --text: #F9F3E8; --text-muted: #D4CBB6;
}

/* Astrologer-profile portrait (.pf-portrait) is a dark radial-gradient showcase; its
   status/tier badges (.pf-port-live online/offline, "Senior", on their own dark glass)
   had their var(--bull)/--gold/--text-muted text flip dark → unreadable. Re-point the
   portrait's text vars to the LIGHT (dark-theme) palette so the badges read. (2026-06-26) */
html[data-theme="light"] body:not(.admin-editorial) .pf-portrait {
  --bull: #22C55E; --bear: #EF4444; --gold: #E5B437; --gold-soft: #F4D06F;
  --text: #F9F3E8; --text-muted: #D4CBB6; --text-dim: #BEB2A6;
}

/* ── Light-mode fixes for remaining dark-hardcoded chrome (2026-07-08 design audit). ──
   Same failure pattern as footer/portrait/product-badge above: the surface is a hardcoded
   dark background, but the text uses theme vars → in light mode the vars flip dark → text
   goes invisible/muddy on the dark surface. Re-point the LOCAL vars back to the light
   palette so the text stays legible.
   Client complaint 2026-07-08: Free Tools dropdown headers, "Verified" and "Offline"
   pills on the homepage astrologer cards, blog category chips on post cards. */
/* .nav-ft-menu specifically: only remap vars on desktop (where the dropdown is dark). On
   mobile the dropdown becomes a light-transparent drawer submenu and needs the normal
   light-mode text color. */
@media (min-width: 1301px) {
  html[data-theme="light"] body:not(.admin-editorial) .nav-ft-menu {
    --gold: #E5B437; --gold-soft: #F4D06F; --gold-deep: #B8860B;
    --text: #F9F3E8; --text-muted: #D4CBB6; --text-dim: #BEB2A6;
    --hairline: rgba(255,255,255,0.10); --hairline-2: rgba(255,255,255,0.18);
  }
}
/* Homepage astrologer/blog card badges: always dark hardcoded backgrounds regardless of
   viewport, so keep the var remap unconditional. */
html[data-theme="light"] body:not(.admin-editorial) .h-astro-img,
html[data-theme="light"] body:not(.admin-editorial) .h-post-img,
html[data-theme="light"] body:not(.admin-editorial) .h-astro-status,
html[data-theme="light"] body:not(.admin-editorial) .h-astro-badge,
html[data-theme="light"] body:not(.admin-editorial) .h-post-cat {
  --gold: #E5B437; --gold-soft: #F4D06F; --gold-deep: #B8860B;
  --text: #F9F3E8; --text-muted: #D4CBB6; --text-dim: #BEB2A6;
  --hairline: rgba(255,255,255,0.10); --hairline-2: rgba(255,255,255,0.18);
}
/* Nav dropdown link overrides - .nav-ft-menu a's rules use hardcoded rgba white, which is
   correct for the DESKTOP dark panel but WRONG for the MOBILE drawer variant (which uses
   a transparent light background - white text becomes invisible). Fix both cases.
   Desktop: keep white text on the dark panel, only re-force the gold header/all-link.
   Mobile drawer (≤1300px, transparent bg): flip link text to the dark editorial ink. */
html[data-theme="light"] body:not(.admin-editorial) .nav-ft-h,
html[data-theme="light"] body:not(.admin-editorial) .nav-ft-all { color: #E5B437 !important; }
@media (max-width: 1300px) {
  html[data-theme="light"] body:not(.admin-editorial) .nav-ft-menu {
    background: transparent;
  }
  html[data-theme="light"] body:not(.admin-editorial) .nav-ft-menu a {
    color: var(--text);
  }
  html[data-theme="light"] body:not(.admin-editorial) .nav-ft-menu a:hover {
    background: rgba(201,162,39,0.10);
    color: var(--gold-deep);
  }
  html[data-theme="light"] body:not(.admin-editorial) .nav-ft-h {
    color: var(--gold-deep) !important;
  }
  html[data-theme="light"] body:not(.admin-editorial) .nav-ft-all {
    color: var(--gold-deep) !important;
  }
}

/* Active nav link - CSS rule already exists in base.css ("nav-menu a.active { color:
   var(--gold) }"), but nav.ejs never added the .active class. It's now injected server-
   side in nav.ejs based on `currentPath`. This rule tightens it in light theme so the
   active link uses the deep gold (5.8:1 on parchment) instead of the too-light gold-soft
   the base rule would apply. */
html[data-theme="light"] body:not(.admin-editorial) .nav-menu a.active {
  color: var(--gold-deep);
  font-weight: 600;
}
.nav-ft-trigger.active { color: var(--gold); font-weight: 600; }
html[data-theme="light"] body:not(.admin-editorial) .nav-ft-trigger.active {
  color: var(--gold-deep);
  font-weight: 600;
}

/* /services icon tiles (2026-07-08): all 15 tile icons hardcode stroke="#F4D06F" directly
   in the inline SVG markup (not a CSS var at all - never adapted for theme). On the
   near-white light-theme badge (rgba(229,180,55,0.08) tint) that's 1.36:1 contrast,
   effectively invisible. Force the readable deep-gold in light mode; dark theme is
   untouched since #F4D06F is correct there. */
html[data-theme="light"] body:not(.admin-editorial) .tile-ic svg {
  stroke: #B8860B !important;
}

/* Homepage testimonials (2026-07-08, client-flagged with screenshot): the decorative 56px
   quote-glyph (.h-test .quote, position:absolute top:24px/left:24px) visually overlaps the
   first line of .h-test .body by design. In dark theme that's a bright gold glyph over
   near-white text - reads as a nice accent. In light theme both the glyph (var(--gold-soft)
   flips to a dark muted #7A5C12) and the body text (var(--text-muted) #5A4410) become
   similarly dark/muted colors, and the 40%-opacity overlap muddies exactly the first few
   words of every quote. Verified live (Playwright): opacity 0.12 still visibly faded the
   overlapped words; opacity 0 fully resolves it with no other visual regression. Dark theme
   untouched. */
html[data-theme="light"] body:not(.admin-editorial) .h-test .quote {
  opacity: 0;
}

/* Theme-toggle: was fixed top:14px right:14px, floating awkwardly over the ticker OUTSIDE
   the nav row. It's DOM-appended to <body> by head-public.ejs so we can't easily reparent
   it into the nav - but we CAN reposition its fixed placement to visually sit inside the
   nav row's right edge, aligned with the Log In button. On mobile the layout is tighter
   so nudge it up slightly to clear the hamburger toggle. */
/* Sit it in the top-right corner of the nav row, past the Log In button, so it doesn't
   overlap any nav link. Original was top:14px (above the sticky ticker, over ticker text
 - the actual complaint), we just push it down to the nav-row centre-line. */
.theme-toggle {
  top: 60px !important; right: 14px !important;
  width: 36px; height: 36px; font-size: 15px;
  box-shadow: 0 2px 8px rgba(40,30,10,0.10);
  z-index: 1050;
}
/* Desktop-only: add right-padding to the nav-inner container so the fixed toggle at
   right:14px doesn't visually crash into the Log In button. Kept in sync with the
   .nav-cta hide breakpoint in public/styles.css's appended block (raised 960→1300
   2026-07-09 - see base.css §9 nav comment): nav-cta is only visible, and only needs
   this gutter, at the same width the hamburger switches off. */
@media (min-width: 1301px) {
  .nav-inner { padding-right: 60px; }
}
/* Mobile: no Log In button visible (nav-cta hidden), the hamburger sits at right:14px,
   so the toggle needs to move LEFT of the hamburger to stay clickable. */
@media (max-width: 1300px) {
  .theme-toggle { top: 20px !important; right: 68px !important; }
}
@media (max-width: 640px) {
  .theme-toggle { top: 18px !important; right: 62px !important; width: 34px; height: 34px; font-size: 14px; }
}

/* Lead-gate OTP modal (public/lead-gate.js) inputs - replace the browser's default
   blue focus ring with the site's gold accent (2026-07-07). */
.acx-lg-otp:focus,
#acx-lg-name:focus,
#acx-lg-email:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(229, 180, 55, .18);
}

/* ── 2026-07-30: warm retint of the two hardcoded-indigo chrome elements on ADMIN pages
   (public non-editorial pages keep cosmic-indigo by design; specificity beats file order) ── */
body.admin-editorial .brand-mark { background: rgba(20, 8, 10, 0.95); }
body.admin-editorial .mobile-nav-toggle { background: rgba(26, 14, 8, 0.95); }

/* ── 2026-07-30: admin pages get the SAME app-shell retints as body.editorial
   (sidebar/search/widgets were still cosmic-indigo on /sadmin/*) ── */
body.admin-editorial .sidebar { background: rgba(42, 27, 18, 0.75); border-right-color: rgba(229, 180, 55, 0.22); }
body.admin-editorial .search-box,
body.admin-editorial .icon-btn { background: rgba(42, 27, 18, 0.5); border-color: rgba(229, 180, 55, 0.22); }
body.admin-editorial .widget,
body.admin-editorial .card { background: linear-gradient(180deg, rgba(229, 180, 55, 0.05), rgba(26, 14, 8, 0.7)); border-color: rgba(229, 180, 55, 0.18); }
body.admin-editorial .welcome-card { background: linear-gradient(135deg, rgba(229, 180, 55, 0.10), rgba(26, 14, 8, 0.85)); border-color: rgba(229, 180, 55, 0.28); }
body.admin-editorial .natal-chip { background: rgba(229, 180, 55, 0.06); border: 1px solid rgba(229, 180, 55, 0.18); color: var(--gold-soft); }
body.admin-editorial .natal-chip strong { color: var(--gold); }
body.admin-editorial .sidebar-menu a:hover { background: rgba(229, 180, 55, 0.08); color: var(--gold-soft); }
body.admin-editorial .sidebar-menu a.active { background: linear-gradient(90deg, rgba(229, 180, 55, 0.20), transparent); }
body.admin-editorial .sidebar-menu .section-label { color: rgba(244, 208, 111, 0.55); }
body.admin-editorial .sidebar .brand { border-bottom: 1px solid rgba(229, 180, 55, 0.15); }
body.admin-editorial .app-header { border-bottom: 1px solid rgba(229, 180, 55, 0.12); }

/* ── Article artwork: fit, never crop ──────────────────────────────────────
   Featured images arrive in six different aspect ratios (1.50, 1.75, 1.78,
   1.90, 2.00 and 2.50 : 1) because some are uploaded banners and some come out
   of scripts/generate-blog-images.js. The card boxes were 4/3 and 16/10 with
   background-size:cover, so a 2.00:1 banner in the 1.33:1 featured box lost a
   THIRD of its width - and on these banners the left third is the headline.

   Fix: one 16/9 box everywhere, and `contain` so the whole artwork is always
   visible. The gap around an off-ratio image is filled with a blurred, dimmed
   copy of itself (::before) rather than a flat bar, so it reads as a deliberate
   backdrop. `background: inherit` picks up the inline background-image that the
   templates set per post, so nothing has to be threaded through in markup.
   New uploads of any shape are handled automatically - no image is rewritten.  */
.bl-featured-img,
.bl-card-img,
.bp-related-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--panel);
}

.bl-featured-img::before,
.bl-card-img::before,
.bp-related-img::before {
    content: '';
    position: absolute;
    inset: -12%;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(26px) brightness(0.5) saturate(0.85);
    /* Opaque on purpose: it has to hide the element's own un-blurred background,
       which paints underneath this layer. */
    opacity: 1;
}

.bl-featured-img::after,
.bl-card-img::after,
.bp-related-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* The placeholder variants carry their own artwork, so they must not get the
   blurred/contained treatment layered on top of an empty background. */
.bl-card-img-placeholder::before,
.bl-card-img-placeholder::after { content: none; }

/* The featured card is a 2-column grid, so its image cell stretches to whatever
   height the text column needs. Pinning it to the top keeps the 16/9 shape
   instead of letting the row dictate a random ratio. */
.bl-featured-img { align-self: stretch; min-height: 0; }

/* Homepage journal rail + the article hero use a real <img>, so they get the
   same treatment through object-fit plus a duplicate blurred backdrop layer. */
.h-post-img img,
.bp-featured-img {
    object-fit: contain;
    background-color: var(--panel);
}

.h-post-img { isolation: isolate; }

.h-post-img .h-post-img-bg {
    position: absolute;
    inset: -12%;
    width: auto;
    height: auto;
    min-width: 124%;
    min-height: 124%;
    object-fit: cover;
    filter: blur(24px) brightness(0.5) saturate(0.85);
    z-index: 0;
}

.h-post-img img:not(.h-post-img-bg) {
    position: relative;
    z-index: 1;
}

.bp-featured-img {
    aspect-ratio: 16 / 9;
    max-height: none;
    height: auto;
}