/* White theme, shared by every public page (approved 2026-10-19).
   Loaded after each page's own <style>. Every rule is scoped to
   [data-theme="light"], so the dark theme is untouched.
   The homepage keeps its dark video hero; closing calls to action are solid purple bands.
   2026-10-20: one purple and one yellow, the same as the dark version (#8B7FC7, #E8A023). */

html[data-theme="light"] {
  --bg: #FFFFFF;
  --bg2: #FFFFFF;
  --bg3: #FFFFFF;
  --card: #FFFFFF;
  --card2: #F8F7FC;
  /* the dark version's purple; --violet-l matches it so purple text never goes paler on white */
  --violet: #8B7FC7;
  --violet-l: #8B7FC7;
  --violet-d: #6B5FAA;
  --ink: #1A1A2E;
  --line: #ECEAF3;
  --band: #8B7FC7;
}
html[data-theme="light"] body { background: #fff; }

/* ---------- Text and buttons ---------- */
html[data-theme="light"] .accent,
html[data-theme="light"] .gold { color: var(--amber); }
html[data-theme="light"] .btn-amber,
html[data-theme="light"] .demo-submit { color: var(--ink); }
/* Several pages hard-code the old pale purple on this button */
html[data-theme="light"] .btn-violet-sm { background: var(--violet); }
html[data-theme="light"] .btn-violet-sm:hover { background: var(--violet-d); }

/* The hexagon shapes read as grey slabs on a white page */
html[data-theme="light"] .decor-bg,
html[data-theme="light"] .statement-shape-l,
html[data-theme="light"] .statement-shape-r { display: none; }

/* White sections are separated by a hairline instead of grey fills */
html[data-theme="light"] .section,
html[data-theme="light"] .testi-section,
html[data-theme="light"] .battle-cards-section { border-top: 1px solid var(--line); }
html[data-theme="light"] .footer { background: #fff; border-top: 1px solid var(--line); }

/* ---------- Homepage ---------- */
/* Headings that were white on grey */
html[data-theme="light"] .hiw-heading-area h3,
html[data-theme="light"] .testi-section .section-header h2 { color: var(--ink); }
/* The hero stays dark: its client names keep the dark version's light purple */
html[data-theme="light"] .hero .hero-proof strong { color: #A99FDB; }

/* Purple bars on boxes, as in the dark version: the white theme's border-color rule wiped them */
html[data-theme="light"] .feature-card,
html[data-theme="light"] .demo-form-card { border-top-color: var(--violet); }
html[data-theme="light"] .testi-card { border-left-color: var(--violet); }

/* ---------- Purple bands ---------- */
html[data-theme="light"] .statement-section,
html[data-theme="light"] .final-cta,
html[data-theme="light"] .closing,
html[data-theme="light"] .bottom-cta,
html[data-theme="light"] .band-purple {
  background: var(--band);
  border-color: transparent;
}
html[data-theme="light"] :is(.statement-section, .final-cta, .closing, .bottom-cta, .band-purple) :is(h1, h2, h3, .statement-h, .section-heading) { color: #fff; }
html[data-theme="light"] :is(.final-cta, .closing, .bottom-cta, .band-purple) :is(p, .section-sub),
html[data-theme="light"] .statement-section .statement-sub { color: #fff; }
html[data-theme="light"] :is(.statement-section, .final-cta, .closing, .bottom-cta, .band-purple) :is(.accent, .gold) { color: var(--amber); }
html[data-theme="light"] :is(.final-cta, .closing) :is(.section-label, .closing-eyebrow) { color: rgba(255,255,255,0.9); }
html[data-theme="light"] .final-cta .section-label-line { background: rgba(255,255,255,0.6); }
html[data-theme="light"] :is(.final-secondary, .closing-fine) { color: rgba(255,255,255,0.9); }
html[data-theme="light"] .final-secondary:hover { color: #fff; }
html[data-theme="light"] .final-cta-dots { background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px); }
html[data-theme="light"] .final-cta-glow,
html[data-theme="light"] .statement-glow { background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%); }
/* Buttons on purple: amber stays; the purple and outline buttons turn white */
html[data-theme="light"] :is(.final-cta, .closing, .bottom-cta, .band-purple, .dual-cta-grid) .btn-violet-sm { background: #fff; color: var(--band); }
html[data-theme="light"] :is(.final-cta, .closing, .bottom-cta, .band-purple, .dual-cta-grid) .btn-violet-sm:hover { background: #EDEAFB; }
html[data-theme="light"] :is(.closing, .bottom-cta, .band-purple) .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); background: transparent; }
html[data-theme="light"] :is(.closing, .bottom-cta, .band-purple) .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Pricing + contact: the two-card closing block becomes one purple panel */
html[data-theme="light"] .dual-cta-section { background: #fff; }
html[data-theme="light"] .dual-cta-grid { background: var(--band); border-color: transparent; }
html[data-theme="light"] .dual-cta-card-right { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.2); }
html[data-theme="light"] .dual-cta-heading { color: #fff; }
html[data-theme="light"] .dual-cta-kicker { color: rgba(255,255,255,0.9); }
html[data-theme="light"] .dual-cta-sub,
html[data-theme="light"] .dual-cta-sub-lg,
html[data-theme="light"] .dual-cta-list li { color: #fff; }
html[data-theme="light"] .dual-cta-list li::before { color: var(--amber); }