/* Homepage monochrome experiment: every color -> white / off-white / light grey on the dark background.
   Scoped to body.mono (index.html only). To revert: remove the mono.css <link> and the "mono" body class (or revert this commit).
   Contrast on #050508: #e2e2e2 headings 15.7:1, #c8c8c8 12.4:1, #9a9a9a 7.4:1 (all AA/AAA). */
body.mono {
    --mono-head: #e2e2e2;
    --mono-body: #c8c8c8;
    --mono-muted: #9a9a9a;
    --mono-line: rgba(255, 255, 255, 0.12);
    --mono-line-strong: rgba(255, 255, 255, 0.28);
    --ink-body: var(--mono-body);
    --ink-muted: var(--mono-muted);
    --ink-faint: #8a8a8a;
    --ink-accent: var(--mono-head);
    --ink: var(--mono-body);
    --brand: #d6d6d6;
    --brand-deep: #bdbdbd;
    --brand-glow: rgba(255, 255, 255, 0.18);
    --brand-soft: rgba(255, 255, 255, 0.06);
    --brand-line: rgba(255, 255, 255, 0.16);
    --aura: #d6d6d6; --aura-accent: #bdbdbd;
    --castle: #d9d9d9; --castle-warm: #bdbdbd;
    --vectorizer: #cfcfcf; --vectorizer-accent: #bdbdbd;
    --line: var(--mono-line);
    --cta-bg: transparent;                    /* ghost CTA, same as theme.css */
    --cta-bg-hover: rgba(255, 255, 255, 0.06);
    --cta-border: #d6d6d6;
    --cta-ink: #e2e2e2;
    --cta-accent: #e2e2e2;
    --cta-glow-hover: none;
    color: var(--mono-body);
}
body.mono h1, body.mono h2, body.mono h3, body.mono h4 {
    color: var(--mono-head) !important; -webkit-text-fill-color: var(--mono-head) !important;
    background-image: none !important; text-shadow: none !important;
}
body.mono :is(h1, h2) .tag-creatively, body.mono .tag-creatively {
    background: none !important; color: var(--mono-head) !important; -webkit-text-fill-color: var(--mono-head) !important;
    text-shadow: none !important; filter: none !important;
}
/* Media / decorative canvas / icons -> greyscale */
body.mono .hero-video, body.mono #canvas-background, body.mono img, body.mono svg:not(.cta-block-arrow) { filter: grayscale(1) !important; }
/* CTA: solid off-white, near-black text + arrow, no glow; hover slightly brighter + lift */
body.mono :is(.cta-block, .sv-cta-block, .sv-btn--primary, .qf-btn--primary, .method-cta .btn.method-cta-btn) { background: var(--cta-bg) !important; border-color: var(--cta-border) !important; text-shadow: none !important; }
body.mono :is(.cta-block, .sv-cta-block, .sv-btn--primary, .qf-btn--primary, .method-cta .btn.method-cta-btn):hover { background: var(--cta-bg-hover) !important; border-color: var(--cta-border) !important; box-shadow: none !important; }
/* Decorative grid / scrim / sparks -> neutral white */
body.mono .fx-grid { background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) !important; }
body.mono .page-scrim { filter: grayscale(1); }
body.mono :is(.fx-sparks, .hero-orbit-sparks) i { background: #d6d6d6 !important; box-shadow: none !important; }
/* "Building" tag */
body.mono .tag-creating, body.mono .tag-creating::after { color: #d6d6d6 !important; -webkit-text-fill-color: #d6d6d6 !important; text-shadow: none !important; background: none !important; }
/* Steps / facts / pills */
body.mono .method-summary-pill { background: rgba(255,255,255,0.06) !important; }
body.mono dt { color: var(--mono-head) !important; -webkit-text-fill-color: var(--mono-head) !important; }
/* Compare table */
body.mono .compare :is(th, td, span, small, .mt-price, .mt-pick, .mt-yes) { color: inherit; }
body.mono .compare th, body.mono .compare .mt-price, body.mono .compare .mt-pick { color: var(--mono-head) !important; -webkit-text-fill-color: var(--mono-head) !important; }
body.mono .compare th span:not(.mt-price):not(.mt-pick) { color: var(--mono-head) !important; -webkit-text-fill-color: var(--mono-head) !important; }
body.mono .compare small { color: var(--mono-muted) !important; -webkit-text-fill-color: var(--mono-muted) !important; }
body.mono .compare .mt-yes { color: #d6d6d6 !important; -webkit-text-fill-color: #d6d6d6 !important; }
body.mono .compare th { border-bottom-color: var(--mono-line-strong) !important; }
body.mono .compare .mt-head { background: rgba(255,255,255,0.06) !important; border-color: var(--mono-line-strong) !important; }
body.mono .compare .mt-head--gold { border-color: rgba(255,255,255,0.55) !important; }
/* Any remaining colored glows/shadows on this page -> neutral */
body.mono :is(.method-choice, .method-step, .mt-head, .nav-links a, .logo, .btn, .btn-primary, .btn-ghost) { text-shadow: none !important; }
/* Hover states */
body.mono .method-track-btn:hover { background: rgba(255,255,255,0.1) !important; }
body.mono .mt-exp:hover { color: var(--mono-head) !important; }
body.mono .nav-cta:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
/* Compare column headers are links to the quote builder */
body.mono .compare a.mt-head:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.75) !important; }
body.mono .compare a.mt-head:hover .mt-pick { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
body.mono .compare a.mt-head:focus-visible { outline-color: #f2f2f2 !important; }
/* Quote flow on the homepage -> white shades */
body.mono .home-quote .sv-eyebrow, body.mono .qf-group-label { color: var(--mono-muted) !important; }
body.mono .qf-progress-bar { background: #d6d6d6 !important; }
body.mono .qf-card:hover { border-color: rgba(255,255,255,0.45) !important; }
body.mono .qf-card:has(input:checked) { border-color: #d6d6d6 !important; background: rgba(255,255,255,0.08) !important; }
body.mono .qf-card:has(input:checked)::after { background: #e2e2e2 !important; border-color: #e2e2e2 !important; color: #050508 !important; }
body.mono .qf-card:has(input:focus-visible), body.mono .qf-btn:focus-visible, body.mono .qf-field :is(input, textarea):focus-visible { outline-color: #e2e2e2 !important; }
body.mono :is(.qf-card-price, .qf-price-inline, .qf-monthly) { color: #d6d6d6 !important; }
body.mono .qf-summary li { border-color: var(--mono-line-strong) !important; background: rgba(255,255,255,0.05) !important; }
body.mono :is(.qf-error, .qf-error a) { color: #e2e2e2 !important; }
body.mono .qf-btn--primary:disabled { opacity: 0.6; }
/* Quote live preview: mono */
body.mono .qf-layout { --qfp-accent: #d6d6d6; }
body.mono .qf-exp:focus-visible { outline-color: #e2e2e2 !important; }