/* ============================================================
   AAA — subpage layer (verticals, blog, legal)
   These pages were light-only. The shared sheet flips the design
   tokens for dark mode; this file fixes the blocks that used
   var(--black) as a BACKGROUND or var(--white) as a TEXT colour
   and would therefore invert into invisibility.
   Everything here is scoped — no blanket colour rules.
   ============================================================ */

#aaaNeural { display: none; }

/* ---------- 1. blocks that are dark BY DESIGN ---------- */
.hero,
.final-cta,
.cta-box {
  background:
    radial-gradient(62% 90% at 10% 0%, rgba(116,84,232,.38), transparent 60%),
    radial-gradient(52% 80% at 92% 100%, rgba(55,138,221,.26), transparent 62%),
    #191238 !important;
  color: #F2EFFF !important;
  position: relative;
  overflow: hidden;
}
.hero > *, .final-cta > *, .cta-box > * { position: relative; z-index: 1; }

.hero::after, .final-cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(174,150,251,.16) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 80%);
          mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 80%);
}

/* text inside those blocks — scoped, never global */
.hero h1, .hero h2, .final-cta h2, .cta-box h3 { color: #FFFFFF !important; }
.hero p, .final-cta p, .cta-box p { color: #BDB4DC !important; }
.hero .eyebrow, .final-cta .eyebrow { color: #CDBEFF !important; }
.hero .stat-num, .hero .stat-num span { color: #FFFFFF !important; }
.hero .stat-label { color: #9E95BE !important; }
.hero .btn-ghost, .final-cta .btn-ghost {
  color: #F2EFFF !important;
  border: 1px solid rgba(205,190,255,.32);
}
.hero .btn-ghost:hover, .final-cta .btn-ghost:hover {
  color: #fff !important; border-color: var(--v-400); background: rgba(139,109,245,.16);
}

/* `.hero-stats div { flex-direction: column }` also matched .stat-num, so the
   unit span dropped onto its own line ("48" over "h") */
.hero-stats .stat-num { display: block !important; }
.hero-stats .stat-num span { display: inline !important; }

.voice-widget {
  background: linear-gradient(160deg, #1C1640, #120E2C) !important;
  border: 1px solid rgba(174,150,251,.22);
  border-radius: 18px;
}
.voice-widget .call-sub, .voice-widget .call-play-hint { color: #A79EC6 !important; }

/* ---------- 2. ghost button OUTSIDE a dark block ----------
   base rule is `color: var(--white)`, i.e. white on a white section —
   this was already invisible on the live site */
.btn-ghost { border-radius: 12px; }
.demo-section .btn-ghost,
section:not(.hero):not(.final-cta) > .btn-ghost,
.inner > .btn-ghost,
.faq .btn-ghost { color: var(--v-700) !important; border-color: var(--v-300) !important; }

/* ---------- 3. section surfaces that were hardcoded light ---------- */
[data-theme="dark"] .demo-section { background: #120E2C !important; }
[data-theme="dark"] .chat-messages { background: #120E2C !important; }

/* ---------- 4. eyebrow / links / accents ---------- */
.eyebrow { letter-spacing: 1.8px; }
:not(.hero):not(.final-cta) > .eyebrow,
.inner > .eyebrow { color: var(--v-600); }
[data-theme="dark"] :not(.hero):not(.final-cta) > .eyebrow,
[data-theme="dark"] .inner > .eyebrow { color: #C3B2FF; }
.back-link:hover, .topbar a.back:hover { color: var(--v-400); }
.pull { border-left: 3px solid var(--v-500); }
.cta-btn { background: var(--grad-1) !important; color: #fff !important; border-radius: 12px; }

/* ---------- 5. components that follow the theme ---------- */
.demo-tab { background: var(--white); border-color: var(--border); color: var(--mid); border-radius: 999px; }
.demo-tab:hover { border-color: var(--v-400); color: var(--v-600); }
.demo-tab.active { background: var(--grad-1); border-color: transparent; color: #fff !important; }
.email-mock {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 56px -28px rgba(36,24,84,.45);
}
.faq-item { border-bottom: 1px solid var(--border); }
.chat-name { color: #fff !important; }

/* footer is dark in both themes */
footer { background: #0A0719 !important; }
.footer-copy, .footer-legal a { color: #A79EC6 !important; }
.footer-legal a:hover { color: #F2EFFF !important; }

/* ---------- 6. dark-mode reading surface ---------- */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .article p,
[data-theme="dark"] .article li,
[data-theme="dark"] .article ol { color: #BDB4DC; }
[data-theme="dark"] .article li strong,
[data-theme="dark"] .article h2,
[data-theme="dark"] .article h1,
[data-theme="dark"] .pull { color: #F2EFFF; }
[data-theme="dark"] .topbar { border-bottom-color: var(--border); }
[data-theme="dark"] .demo-tab { background: #1C1640; border-color: #2E2752; color: #A79EC6; }
[data-theme="dark"] .email-mock { background: #171233; border-color: #2E2752; }
[data-theme="dark"] .email-toolbar, [data-theme="dark"] .email-head { border-color: #2E2752; }
[data-theme="dark"] .demo-panel-features li { color: #BDB4DC; }

/* low-contrast greys that were chosen for a light page */

/* the PNG wordmark is #333 — swap to the light variant on dark backgrounds */
.nav-logo img, img[src="aaa-logo.png"] { content: url("aaa-logo-light.png"); }
[data-theme="light"] .nav-logo img,
[data-theme="light"] img[src="aaa-logo.png"] { content: url("aaa-logo.png"); }