/* ================================================================
   AIERPNav Global Restyle — 2026 Light Theme
   =================================================================
   Sibling to KCENAV.ai: shared DM Serif Display headings, matching
   spacing system, complementary palette. Own identity via emerald
   accent + light/luminous base instead of KCENAV's dark hero.

   Loaded AFTER inline <style> blocks to override via cascade order.
   Same selector specificity — last declaration wins.
   ================================================================ */

/* --- Load Instrument Sans to match KCENAV body font --- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ================================================================
   1. CSS CUSTOM PROPERTIES — LIGHT THEME TOKENS
   ================================================================ */
:root {
    /* Backgrounds */
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --bg-subtle: #f1f5f9;
    --bg-muted: #e8ecf1;

    /* Text on light — WCAG AA (4.5:1 min) on #f8fafc */
    --text-heading: #0f172a;       /* ~17:1 — headings */
    --text-primary: #1e293b;       /* ~13:1 — primary body */
    --text-secondary: #334155;     /* ~9.5:1 — standard body */
    --text-tertiary: #475569;      /* ~7.5:1 — secondary info, labels */
    --text-quaternary: #64748b;    /* ~5.4:1 — captions, meta, hints */

    /* Borders on light */
    --border-default: #e2e8f0;
    --border-subtle: #f1f5f9;
    --border-hover: #cbd5e1;
    --border-accent: rgba(5, 150, 105, 0.20);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.10);

    /* Glass effects */
    --glass-light: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(0, 0, 0, 0.05);
}


/* ================================================================
   2. BASE / BODY
   ================================================================ */
body {
    font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-body);
    color: var(--text-secondary);
}


/* ================================================================
   3. NAVIGATION — Light Frosted Glass
   ================================================================ */
nav {
    background: var(--glass-light);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-xs);
}

.logo-text {
    color: var(--text-heading);
}

/* Nav badge ("A KCENAV Company") */
.nav-badge {
    border-left-color: var(--border-default);
    color: var(--text-tertiary);
}
.nav-badge a {
    color: var(--text-tertiary);
}
.nav-badge a:hover {
    color: #059669;
}

/* Nav links (for pages using .nav-links) */
.nav-links a {
    color: var(--text-tertiary);
}
.nav-links a:hover {
    color: var(--text-heading);
}

/* Nav center dropdowns */
.nav-link-btn {
    color: var(--text-secondary);
}
.nav-link-btn:hover {
    color: var(--text-heading);
    background: rgba(0, 0, 0, 0.04);
}

.nav-link-simple {
    color: var(--text-secondary);
}
.nav-link-simple:hover {
    color: var(--text-heading);
    background: rgba(0, 0, 0, 0.04);
}

.nav-caret {
    opacity: 0.5;
    color: var(--text-tertiary);
}

/* Dropdown panels */
.nav-dropdown-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
}
.nav-dropdown-panel a {
    color: var(--text-secondary);
}
.nav-dropdown-panel a:hover {
    color: var(--text-heading);
    background: rgba(0, 0, 0, 0.04);
}
.nav-viewall {
    color: #059669 !important;
    border-top-color: var(--border-default);
}


/* ================================================================
   4. BUTTONS
   ================================================================ */
/* Primary stays emerald — no change needed */

/* Ghost button on light backgrounds */
.btn-ghost {
    color: var(--text-secondary);
    border-color: var(--border-default);
}
.btn-ghost:hover {
    color: var(--text-heading);
    border-color: var(--border-hover);
}

/* Secondary button */
.btn-secondary {
    background: rgba(5, 150, 105, 0.08);
    border-color: rgba(5, 150, 105, 0.18);
    color: #059669;
}
.btn-secondary:hover {
    background: rgba(5, 150, 105, 0.14);
    color: #047857;
}


/* ================================================================
   5. SECTION LABELS
   ================================================================ */
.section-label {
    color: #059669;
}
.section-label::before {
    background: #059669;
}
.section-label-light {
    color: #059669;
}
.section-label-light::before {
    background: #059669;
}


/* ================================================================
   6. HOMEPAGE SECTIONS — Dark-to-Light Conversion
   ================================================================ */

/* --- Hero: KEEP DARK (strategic) --- */
/* No override — hero stays dark navy gradient */

/* --- Proof Bar: Already light — no change --- */

/* --- What This Does Section: Convert to light --- */
.what-section {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
}
.what-section::before {
    background: radial-gradient(circle, rgba(5, 150, 105, 0.04) 0%, transparent 70%);
}
.what-section h2 {
    color: var(--text-heading);
}
.what-desc {
    color: var(--text-secondary);
}

/* Metric cards on light background */
.metric-card {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
    border-left: 3px solid #10b981;
}
.metric-card:hover {
    background: var(--bg-surface);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}
.metric-card h4 {
    color: var(--text-heading);
}
.metric-card p {
    color: var(--text-tertiary);
}
.metric-sample {
    background: rgba(0, 0, 0, 0.02);
}
.metric-value {
    color: var(--text-heading);
}
.metric-label {
    color: var(--text-tertiary);
}

/* Metric card icons — soften backgrounds */
.metric-card-icon.emerald { background: rgba(5, 150, 105, 0.08); color: #059669; }
.metric-card-icon.blue { background: rgba(59, 130, 246, 0.08); color: #3b82f6; }
.metric-card-icon.amber { background: rgba(245, 158, 11, 0.08); color: #d97706; }
.metric-card-icon.rose { background: rgba(244, 63, 94, 0.08); color: #e11d48; }


/* --- Stacks Section: Convert to cream --- */
.stacks {
    background: var(--bg-body);
    border-top: 1px solid var(--border-default);
}
.stacks h2 {
    color: var(--text-heading);
}
.stacks-desc {
    color: var(--text-secondary);
}

/* Stack cards on light background */
.stack-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.stack-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-lg);
}
.stack-card-label {
    color: var(--text-tertiary);
}
.stack-card h3 {
    color: var(--text-heading);
}
.stack-card p {
    color: var(--text-secondary);
}
.stack-card .stack-card-cta {
    color: #059669;
}

/* --- Premium Tools: Already light --- */
/* No major overrides */

/* --- Marketplace: Already light --- */
/* No major overrides */


/* --- Research Section: Convert to white --- */
.research {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
}
.research h2 {
    color: var(--text-heading);
}
.research-desc {
    color: var(--text-secondary);
}

/* Research cards */
.research-card {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
}
.research-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}
.research-card h4 {
    color: var(--text-heading);
}
.research-card p {
    color: var(--text-tertiary);
}


/* --- Newsletter: KEEP DARK (strategic CTA) --- */
/* Intentionally dark for visual contrast & conversion emphasis */


/* --- Final CTA sections: KEEP DARK --- */
/* .cta-section stays dark */


/* ================================================================
   7. CONTENT PAGE SECTIONS — Article Body Light Theme
   ================================================================ */

/* Page hero: KEEP DARK (strategic) */
/* .page-hero stays dark navy gradient */

/* Article body — override dark bg to light */
article {
    background: var(--bg-body);
}
article .section-title,
article h2,
article h3 {
    color: var(--text-heading);
}
article .section-intro,
article p {
    color: var(--text-secondary);
}
article li {
    color: var(--text-secondary);
}
article strong {
    color: var(--text-heading);
}

/* Section borders on light */
.section-border {
    border-top-color: var(--border-default);
}

/* AEO Answer box */
.aeo-answer {
    background: rgba(5, 150, 105, 0.04);
    border: 1px solid rgba(5, 150, 105, 0.12);
    border-left: 3px solid #10b981;
}
.aeo-answer p {
    color: var(--text-secondary);
}
.aeo-answer strong {
    color: #059669;
}

/* Formula boxes */
.formula-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}
.formula-text {
    color: #059669;
}
.formula-vars li {
    color: var(--text-tertiary);
}
.formula-vars li strong {
    color: var(--text-heading);
}

/* Example boxes */
.example-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}
.example-box h4 {
    color: #059669;
}
.example-box p {
    color: var(--text-secondary);
}
.example-highlight {
    color: #059669;
}

/* Benchmark tables */
.bench-table th {
    background: var(--bg-subtle);
    color: var(--text-heading);
    border-bottom: 2px solid var(--border-default);
}
.bench-table td {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default);
}
.bench-table tr:hover td {
    background: rgba(0, 0, 0, 0.015);
}
.bench-table td:first-child {
    color: var(--text-heading);
}

/* Mistakes list */
.mistake-content strong {
    color: var(--text-heading);
}
.mistake-content p {
    color: var(--text-secondary);
}

/* Valuation box */
.valuation-box {
    background: rgba(5, 150, 105, 0.03);
    border: 1px solid rgba(5, 150, 105, 0.12);
}
.valuation-box p {
    color: var(--text-secondary);
}
.valuation-box strong {
    color: #059669;
}

/* Related terms links */
.related-term-link {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.related-term-link:hover {
    border-color: #059669;
    color: #059669;
}

/* CTA section at bottom of articles: KEEP DARK */
.cta-section {
    /* stays dark — intentional visual contrast for conversions */
}

/* Related articles grid (bottom of content pages) */
.related-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.related-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}
.related-card h4 {
    color: var(--text-heading);
}
.related-card p {
    color: var(--text-secondary);
}

/* Related content section wrapper (if wrapped in a dark section) */
.related-section {
    background: var(--bg-body);
}


/* ================================================================
   8. COMPARISON / INSIGHTS PAGE OVERRIDES
   ================================================================ */

/* Comparison table styles */
.comparison-table {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}
.comparison-table th {
    background: var(--bg-subtle);
    color: var(--text-heading);
}
.comparison-table td {
    color: var(--text-secondary);
    border-color: var(--border-default);
}

/* Feature comparison cards */
.feature-card,
.compare-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.feature-card:hover,
.compare-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}
.feature-card h3,
.feature-card h4,
.compare-card h3,
.compare-card h4 {
    color: var(--text-heading);
}
.feature-card p,
.compare-card p {
    color: var(--text-secondary);
}

/* Best-for cards */
.best-for-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}

/* Gap analysis */
.gap-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}

/* Comparison hero has specific dark overrides in some pages */
.comparison-hero,
.insight-hero {
    /* These use page-hero pattern — already dark, keep it */
}


/* ================================================================
   9. VERTICAL PAGES
   ================================================================ */
.vertical-metrics-grid .metric-card,
.vertical-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.vertical-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-accent);
}

/* Systems section */
.systems-grid .system-card,
.system-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}

/* Benchmark cards in verticals */
.benchmark-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}


/* ================================================================
   10. ASSESSMENT PAGE
   ================================================================ */

/* Assessment container */
.assessment-container,
.assessment-wrapper {
    background: var(--bg-surface);
}

/* Question cards */
.question-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}

/* Option buttons in assessment */
.option-btn {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.option-btn:hover {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.04);
    color: var(--text-heading);
}
.option-btn.selected {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.08);
}

/* Progress bar */
.assessment-progress-bar {
    background: var(--bg-subtle);
}

/* Results section */
.results-container {
    background: var(--bg-surface);
}
.score-card {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
}
.dimension-card {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
}


/* ================================================================
   11. BENCHMARKING PAGE
   ================================================================ */
.benchmarking-form {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}
.benchmarking-form label {
    color: var(--text-heading);
}
.benchmarking-form select,
.benchmarking-form input {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.benchmarking-form select:focus,
.benchmarking-form input:focus {
    border-color: #059669;
}

/* Gauge cards */
.gauge-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}


/* ================================================================
   12. MARGIN DIAGNOSTIC & VALUATION PAGES
   ================================================================ */
.upload-zone {
    background: var(--bg-surface);
    border: 2px dashed var(--border-default);
}
.upload-zone:hover {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.02);
}

.report-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}


/* ================================================================
   13. GLOSSARY INDEX & VERTICAL INDEX
   ================================================================ */
.glossary-grid .glossary-card,
.glossary-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.glossary-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-accent);
}
.glossary-card h3,
.glossary-card h4 {
    color: var(--text-heading);
}
.glossary-card p {
    color: var(--text-secondary);
}

.vertical-grid .vertical-index-card,
.vertical-index-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.vertical-index-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-accent);
}


/* ================================================================
   14. TOOLS (Utilization Calculator etc.)
   ================================================================ */
.calculator-container,
.tool-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}
.calc-input,
.tool-input {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.calc-input:focus,
.tool-input:focus {
    border-color: #059669;
}
.calc-result,
.tool-result {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
}


/* ================================================================
   15. FORM INPUTS (Global)
   ================================================================ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
select,
textarea {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
input:focus,
select:focus,
textarea:focus {
    border-color: #059669;
    outline: none;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.08);
}
input::placeholder,
textarea::placeholder {
    color: var(--text-quaternary);
}

/* Newsletter form stays dark (inside dark newsletter section) */
.newsletter-form input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}
.newsletter-form input::placeholder {
    color: #64748b;
}
.newsletter-form input:focus {
    border-color: #10b981;
    box-shadow: none;
}


/* ================================================================
   16. FOOTER — KEEP DARK (Strategic Bookend)
   ================================================================ */
/* Footer intentionally stays dark. Overriding only what cascade might affect */
footer {
    background: #060e1c;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}
footer h5,
.footer-col h5 {
    color: #64748b;
}
footer a,
.footer-col a {
    color: #94a3b8;
}
footer a:hover,
.footer-col a:hover {
    color: #34d399;
}
.footer-brand-row {
    color: #ffffff;
}
.footer-tagline {
    color: #64748b;
}
.footer-parent-link {
    color: #64748b;
}
.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.06);
    color: #64748b;
}


/* ================================================================
   17. CHAT WIDGET — Light Theme
   ================================================================ */
#chat-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(5, 150, 105, 0.08);
}

.chat-header {
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-default);
}
.chat-header-text h4 {
    color: var(--text-heading);
}
.chat-header-text p {
    color: var(--text-tertiary);
}

#chat-close {
    color: var(--text-tertiary);
}
#chat-close:hover {
    color: var(--text-heading);
    background: rgba(0, 0, 0, 0.04);
}

#chat-messages {
    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}
#chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
}

.chat-msg.assistant .chat-msg-bubble {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.chat-msg.user .chat-msg-bubble {
    background: rgba(5, 150, 105, 0.10);
    border: 1px solid rgba(5, 150, 105, 0.18);
    color: var(--text-heading);
}

.chat-typing-bubble {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
}
.chat-typing-dot {
    background: var(--text-quaternary);
}

.chat-footer {
    background: var(--bg-body);
    border-top: 1px solid var(--border-default);
}

#chat-input {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
#chat-input::placeholder {
    color: var(--text-quaternary);
}
#chat-input:focus {
    border-color: rgba(5, 150, 105, 0.4);
}

#chat-send:disabled {
    background: var(--bg-muted);
}

.chat-footer-hint {
    color: var(--text-quaternary);
}
.chat-footer-hint a {
    color: var(--text-tertiary);
}
.chat-footer-hint a:hover {
    color: #059669;
}

/* Chat CTA cards */
.chat-cta-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-color: rgba(5, 150, 105, 0.20);
}
.chat-cta-card:hover {
    border-color: rgba(5, 150, 105, 0.50);
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08);
}
.chat-cta-desc {
    color: var(--text-secondary);
}

.chat-cta-card.color-blue {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.chat-cta-card.color-purple {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}
.chat-cta-card.color-navy {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

/* Chat FAB (floating action button) stays branded — just refine */
#chat-fab {
    box-shadow: var(--shadow-lg), 0 0 0 2px rgba(5, 150, 105, 0.12);
}


/* ================================================================
   18. SELECTION / HIGHLIGHT COLORS
   ================================================================ */
::selection {
    background: rgba(5, 150, 105, 0.15);
    color: var(--text-heading);
}
::-moz-selection {
    background: rgba(5, 150, 105, 0.15);
    color: var(--text-heading);
}


/* ================================================================
   19. SCROLLBAR STYLING (Light)
   ================================================================ */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.18);
}


/* ================================================================
   20. PAYMENT / SUCCESS PAGES
   ================================================================ */
.success-container,
.payment-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}
.success-icon {
    background: rgba(5, 150, 105, 0.08);
}


/* ================================================================
   21. TAG BADGES
   ================================================================ */
.tag-est {
    background: rgba(100, 116, 139, 0.08);
    color: var(--text-tertiary);
}
.coming-badge {
    background: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-tertiary);
}


/* ================================================================
   22. BREADCRUMBS (on dark hero — stays light-on-dark)
   ================================================================ */
/* Breadcrumbs live inside dark .page-hero, so keep light colors */


/* ================================================================
   23. COMPARISON TABLE SPECIFIC PATTERNS
   ================================================================ */
.comp-table {
    border: 1px solid var(--border-default);
    border-radius: 10px;
    overflow: hidden;
}
.comp-table th {
    background: var(--bg-subtle);
    color: var(--text-heading);
    border-bottom: 2px solid var(--border-default);
}
.comp-table td {
    border-bottom: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.comp-table tr:hover td {
    background: rgba(0, 0, 0, 0.01);
}

/* Winner/verdict cards */
.verdict-card,
.winner-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}


/* ================================================================
   24. MICRO-ANIMATIONS & HOVER ENHANCEMENTS
   (2026 AI-native feel: subtle, sophisticated)
   ================================================================ */
/* Luminous card hover glow */
.metric-card:hover,
.stack-card:hover,
.research-card:hover,
.glossary-card:hover,
.related-card:hover,
.marketplace-card:hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle emerald glow on focused inputs */
input:focus,
textarea:focus,
select:focus {
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Smooth section transitions for scroll */
.section,
section {
    transition: opacity 0.3s ease;
}


/* ================================================================
   25. PREMIUM CARD OVERRIDES (already light — just refine)
   ================================================================ */
.premium-card {
    box-shadow: var(--shadow-sm);
}
.premium-card:hover {
    box-shadow: var(--shadow-xl);
}

/* Proof bar items */
.proof-item h4 {
    color: var(--text-heading);
}
.proof-item p {
    color: var(--text-secondary);
}


/* ================================================================
   26. INDEX PAGES (Insights, Compare, Glossary, Verticals index)
   ================================================================ */
/* These pages often have grid sections on dark backgrounds */
.insights-grid,
.compare-grid,
.glossary-grid,
.verticals-grid {
    /* Grids now sit on light body */
}

/* Index page section headers */
.index-section,
.grid-section {
    background: var(--bg-body);
}
.index-section h2,
.grid-section h2 {
    color: var(--text-heading);
}
.index-section p,
.grid-section p {
    color: var(--text-secondary);
}

/* Hub cards */
.hub-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.hub-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-accent);
}
.hub-card h3,
.hub-card h4 {
    color: var(--text-heading);
}
.hub-card p {
    color: var(--text-secondary);
}
.hub-card-link {
    color: #059669;
}


/* ================================================================
   27. RESPONSIVE ADJUSTMENTS
   ================================================================ */
@media (max-width: 600px) {
    /* On mobile, the chat panel goes full-screen — keep its light theme */
    #chat-panel {
        border-radius: 0;
    }
}


/* ================================================================
   28. INDEX PAGE CARDS (Compare, Insights, Glossary, Verticals)
   These are navy-mid cards on dark backgrounds — convert to light
   ================================================================ */

/* Compare index cards */
.compare-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.compare-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.compare-card-label {
    color: #059669;
}
.compare-card h3 {
    color: var(--text-heading);
}
.compare-card p {
    color: var(--text-secondary);
}
.compare-card-link {
    color: #059669;
}

/* CTA banner on index pages */
.cta-banner {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, rgba(5, 150, 105, 0.02) 100%);
    border: 1px solid rgba(5, 150, 105, 0.15);
}
.cta-banner h3 {
    color: var(--text-heading);
}
.cta-banner p {
    color: var(--text-secondary);
}

/* Insights index cards */
.insight-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.insight-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-lg);
}
.insight-card-type {
    color: #059669;
}
.insight-card h3 {
    color: var(--text-heading);
}
.insight-card p {
    color: var(--text-secondary);
}
.insight-card-meta {
    color: var(--text-tertiary);
}
.insight-card-link {
    color: #059669;
}

/* Glossary index term cards */
.term-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.term-card:hover {
    border-color: #059669;
    box-shadow: var(--shadow-md);
}
.term-card h3,
.term-card h4 {
    color: var(--text-heading);
}
.term-card p {
    color: var(--text-secondary);
}

/* Related term cards (in glossary detail pages) */
.related-term-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-xs);
}
.related-term-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-sm);
}
.related-term-card .label {
    color: var(--text-tertiary);
}
.related-term-card h4 {
    color: var(--text-heading);
}
.related-term-card p {
    color: var(--text-secondary);
}

/* Verticals index — Why cards */
.why-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.why-card-label {
    color: #059669;
}
.why-card h3 {
    color: var(--text-heading);
}
.why-card p {
    color: var(--text-secondary);
}


/* ================================================================
   29. VERTICAL DETAIL PAGE COMPONENTS
   ================================================================ */

/* Stats strip */
.stats-strip {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}
.stat-item .stat-value,
.stat-value {
    color: var(--text-heading);
}
.stat-item .stat-label,
.stat-label {
    color: var(--text-tertiary);
}

/* Benchmark callout */
.benchmark-callout {
    background: rgba(5, 150, 105, 0.04);
    border: 1px solid rgba(5, 150, 105, 0.12);
    border-left: 3px solid #10b981;
}
.benchmark-callout p {
    color: var(--text-secondary);
}
.benchmark-callout strong {
    color: #059669;
}

/* Visibility box (vertical detail pages) */
.visibility-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}
.visibility-box p {
    color: var(--text-secondary);
}


/* ================================================================
   30. GAP BOX (Comparison pages)
   ================================================================ */
.gap-box {
    background: var(--bg-subtle);
    border: 1px solid rgba(5, 150, 105, 0.15);
}
.gap-box h3 {
    color: var(--text-heading);
}
.gap-box li {
    color: var(--text-secondary);
}


/* ================================================================
   31. ASSESSMENT PAGE COMPONENTS
   ================================================================ */
.intro-section {
    background: var(--bg-surface);
}
.intro-section h2 {
    color: var(--text-heading);
}
.intro-section p {
    color: var(--text-secondary);
}

.question-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
}
.question-card h2 {
    color: var(--text-heading);
}
.question-card p {
    color: var(--text-secondary);
}

.email-step {
    background: var(--bg-surface);
}
.email-step h2 {
    color: var(--text-heading);
}
.email-step p {
    color: var(--text-secondary);
}

.loading-state {
    background: var(--bg-surface);
}
.loading-state p {
    color: var(--text-secondary);
}


/* ================================================================
   32. BENCHMARKING & VALUATION — Step cards, Option cards
   ================================================================ */
.step-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
}

.option-card {
    background: var(--bg-body);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}
.option-card:hover {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.03);
}
.option-card.selected {
    border-color: #059669;
    background: rgba(5, 150, 105, 0.06);
}

.lock-section {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
}


/* ================================================================
   33. MARGIN DIAGNOSTIC REPORT COMPONENTS
   ================================================================ */
/* Report header stays dark — strategic accent */
.report-header {
    /* Keep dark navy gradient — it's the report's visual anchor */
}

/* Section cards in reports */
.section-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

/* Insight boxes (already light green — refine) */
.insight-box {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* Recommendation cards */
.rec-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}

/* Paywall banner — KEEP DARK (it's a conversion-critical element) */
.paywall-banner {
    /* Stays dark for emphasis */
}

/* Upsell strip — KEEP DARK (conversion CTA) */
.upsell-strip {
    /* Stays dark */
}

/* Gate card (paywall overlay) */
.gate-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-xl);
}


/* ================================================================
   34. COMPARISON PAGE — Comparison-specific cards
   ================================================================ */
/* .compare-card in insights pages (comparison examples) */
.compare-card-a,
.compare-card-b {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}


/* ================================================================
   35. PRINT STYLES
   ================================================================ */
@media print {
    body {
        background: #fff;
        color: #000;
    }
    nav, footer, #chat-container, .newsletter, .cta-section {
        display: none;
    }
}