/* ============================================
   Chart Overrides for sub-pages
   Apply the chart aesthetic (cream + navy + brass)
   over legacy components in /routing, /calculator, /report
   ============================================ */

/* Re-define chart tokens here so this CSS file works standalone */
:root {
    --c-paper:        #F1E9D2;
    --c-paper-2:      #E5D9B6;
    --c-paper-3:      #D8C99A;
    --c-water:        #C4DCE6;
    --c-water-2:      #A8C8D8;
    --c-water-3:      #6E96AC;
    --c-ink:          #1B2D4D;
    --c-ink-2:        #243657;
    --c-deep:         #0F1D34;
    --c-graphite:     #4A5870;
    --c-fog:          #8B96A8;
    --c-rule:         #2A3850;
    --c-rule-light:   #B8A878;
    --c-brass:        #B8860B;
    --c-brass-dim:    #8E6608;
    --c-brass-light:  #D9A93E;
    --c-maritime-red: #B22222;
    --c-flag-yellow:  #C8A040;
    --c-magenta:      #FF1F8A;
    --c-phosphor:     var(--c-brass);
    --c-phosphor-dim: var(--c-brass-dim);
    --font-display:   'Fraunces', 'GT Sectra', Georgia, serif;
}

body {
    background: var(--c-paper) !important;
    color: var(--c-ink) !important;
    background-image:
        radial-gradient(circle at 25% 35%, rgba(184, 134, 11, 0.025) 0%, transparent 40%),
        radial-gradient(circle at 75% 65%, rgba(110, 150, 172, 0.03) 0%, transparent 35%) !important;
}

/* Chart-style headings — editorial serif */
h1, h2, h3, h4,
.section-title, .hero__title, .hero__title-highlight,
.final-cta__title, .pricing__price, .pricing__currency,
.testimonial__text, .stat__number {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    font-variation-settings: "opsz" 144, "SOFT" 30 !important;
}

/* --- Nav: paper bg, sharp, mono links --- */
.nav {
    background: var(--c-paper) !important;
    border-bottom: 1px solid var(--c-rule-light) !important;
    backdrop-filter: none !important;
    position: sticky !important;
    top: 0;
}
.nav__container { height: 64px; }
.nav__logo-img { height: 28px; width: auto; filter: none !important; }
.nav__link {
    color: var(--c-graphite) !important;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.nav__link:hover { color: var(--c-ink) !important; }
.nav__link--highlight { color: var(--c-phosphor-dim) !important; }
.nav__link--highlight::before {
    content: '● ';
    color: var(--c-phosphor);
    font-size: 8px;
    margin-right: 4px;
}
.nav__cta {
    background: var(--c-ink) !important;
    color: var(--c-paper) !important;
    border: 1px solid var(--c-ink) !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    padding: 8px 14px !important;
    text-transform: uppercase;
}
.nav__cta:hover {
    background: var(--c-phosphor) !important;
    color: var(--c-ink) !important;
    border-color: var(--c-phosphor) !important;
}
.nav__mobile-menu { background: var(--c-paper) !important; border-top: 1px solid var(--c-rule-light); }
.nav__mobile-toggle span { background: var(--c-ink) !important; }

/* --- Hero: deep bg + grid pattern --- */
.hero {
    background: var(--c-deep) !important;
    border-bottom: 1px solid var(--c-rule);
    min-height: 0 !important;
    padding: var(--space-20) 0 var(--space-16) !important;
    display: block !important;
}
.hero__bg-pattern {
    background-image:
        linear-gradient(rgba(184, 134, 11, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 134, 11, 0.06) 1px, transparent 1px) !important;
    background-size: 80px 80px !important;
}
.hero__title-highlight {
    color: var(--c-brass-light) !important;
    background: none !important;
    -webkit-text-fill-color: var(--c-brass-light) !important;
    background-clip: initial !important;
    font-style: italic !important;
}
.hero__badge {
    background: transparent !important;
    color: var(--c-brass-light) !important;
    border: 1px solid var(--c-brass) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    padding: 4px 10px !important;
}
.hero__title { font-weight: 800 !important; letter-spacing: -0.03em !important; }
.hero__subtitle { color: var(--c-paper-3) !important; }
.hero__value-prop { color: var(--c-paper-3) !important; }
.hero__icon { color: var(--c-phosphor) !important; }

/* --- Sharpen: every rounded thing --- */
.step__number,
.recognition-badge,
.logo-placeholder,
.problem-card,
.problem__card,
.deliverable,
.pricing__card,
.solution-card,
.why__item,
.faq__item,
.faq__question,
.calc-preview,
.calc-metric,
.calc-metric__value--grade,
.gate-card,
.report-form,
.route-form,
.form-group input,
.form-group select,
.form-group textarea,
.problem-card__icon,
.problem__card-icon,
.deliverable__icon,
.deliverable {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Step number: square instead of circle */
.step__number {
    border-radius: 0 !important;
    background: var(--c-ink) !important;
    color: var(--c-paper) !important;
    font-family: var(--font-mono);
    font-size: 16px;
}

/* Recognition badge: sharp border */
.recognition-badge {
    border-radius: 0 !important;
    border: 1px solid var(--c-rule) !important;
    background: transparent !important;
    color: var(--c-paper-3) !important;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* Logo placeholders: sharp */
.logo-placeholder {
    border-radius: 0 !important;
    border: 1px solid var(--c-rule-light) !important;
    color: var(--c-graphite) !important;
}

/* Section titles: bridge weight */
.section-title { letter-spacing: -0.025em; font-weight: 800; }

/* Form inputs: sharp */
.form-group input,
.form-group select,
.form-group textarea {
    border-radius: 0 !important;
    border: 1px solid var(--c-rule-light) !important;
    font-family: var(--font-family);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--c-ink) !important;
    box-shadow: 0 0 0 1px var(--c-ink) !important;
}

/* Pricing card: paper bg with sharp border */
.pricing__card {
    background: var(--c-paper) !important;
    border: 1px solid var(--c-ink) !important;
    border-radius: 0 !important;
}
.pricing__card-header {
    background: var(--c-deep) !important;
    color: var(--c-paper) !important;
    border-radius: 0 !important;
}
.pricing__price { color: var(--c-paper) !important; }
.pricing__currency { color: var(--c-fog) !important; }
.pricing__period { color: var(--c-paper-3) !important; }
.pricing__label { color: var(--c-phosphor) !important; font-family: var(--font-mono); letter-spacing: 0.16em; }
.pricing__check { color: var(--c-phosphor) !important; }

/* Calculator preview card: sharp + paper */
.calc-preview {
    border-radius: 0 !important;
    border: 1px solid var(--c-rule-light) !important;
    box-shadow: none !important;
}
.calc-preview__header {
    background: var(--c-deep) !important;
    border-radius: 0 !important;
}
.calc-preview__upsell {
    border-radius: 0 !important;
    background: var(--c-paper) !important;
    border: 1px solid var(--c-ink) !important;
}
.calc-metric {
    border-radius: 0 !important;
    border: 1px solid var(--c-rule-light) !important;
    background: var(--c-paper) !important;
}
.calc-metric--emission {
    background: var(--c-paper-2) !important;
    border-color: var(--c-rule-light) !important;
}
.calc-metric__value { color: var(--c-ink) !important; }
.calc-metric__value--grade { background: var(--c-phosphor) !important; color: var(--c-ink) !important; }

/* Gate card (calculator) */
.gate-card {
    border-radius: 0 !important;
    border: 1px solid var(--c-ink) !important;
    background: var(--c-paper) !important;
    box-shadow: none !important;
}
.gate-card__badge {
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--c-phosphor-dim) !important;
    border: 1px solid var(--c-phosphor-dim) !important;
    font-family: var(--font-mono);
    letter-spacing: 0.16em;
}

/* Final CTA */
.final-cta {
    background: var(--c-deep) !important;
}
.final-cta__title { color: var(--c-paper) !important; }
.final-cta__text { color: var(--c-paper-3) !important; }

/* Footer */
.footer { background: var(--c-deep) !important; color: var(--c-fog) !important; }
.footer__bottom { border-top: 1px solid var(--c-rule); padding-top: 24px; }
.footer__links a { color: var(--c-fog) !important; }
.footer__links a:hover { color: var(--c-phosphor) !important; }
.footer__links h4 { color: var(--c-paper) !important; font-family: var(--font-mono); letter-spacing: 0.16em; }
.footer__tagline { color: var(--c-fog) !important; font-family: var(--font-mono); }

/* Hide dev artifacts */
#pdf-export-bar { display: none !important; }

/* FAQ */
.faq__item { border-radius: 0 !important; }
.faq__item.active { border-color: var(--c-ink) !important; }

/* Stats / numbers in dark sections */
.stat__number {
    color: var(--c-brass-light) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-style: italic !important;
    letter-spacing: -0.025em !important;
    font-variation-settings: "opsz" 144, "SOFT" 50 !important;
}
.stat__label  { color: rgba(241, 233, 210, 0.5) !important; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }
.social-proof { background: var(--c-deep) !important; }

/* Hero CTA group buttons */
.hero__cta-group .btn--ghost {
    background: transparent !important;
    border-color: rgba(244, 240, 232, 0.4) !important;
    color: var(--c-paper) !important;
}
.hero__cta-group .btn--ghost:hover {
    border-color: var(--c-phosphor) !important;
    color: var(--c-phosphor) !important;
}

/* Generic icon in problem cards: square holder */
.problem-card__icon, .problem__card-icon {
    border-radius: 0 !important;
    background: transparent !important;
}

/* Trust row icons sharper */
.hero__trust-icon, .hero__icon { color: var(--c-phosphor) !important; }