/* ---------------------------------------------------------------
   Whitespace — dark theme
   Loaded AFTER each page's inline <style>, so it overrides.
   Remove the <link> tag from a page to revert that page to light.

   Contrast (WCAG AA, verified against --ink #0E0F12):
     #FFFFFF        19.17   body text
     #6E8BFF         6.21   links, accents, small text   <- use for TEXT
     #0033FF         2.66   FAILS as text. buttons only, with white on top (7.20)
     #FF6B6B         6.91   errors
   --------------------------------------------------------------- */

:root {
  --ink:        #0E0F12;
  --ink-2:      #15171C;
  --ink-3:      #1B1E25;
  --blue-lift:  #6E8BFF;
  --err:        #FF6B6B;
  --hair:       rgba(255,255,255,.10);
  --hair-2:     rgba(255,255,255,.16);
  --txt:        #FFFFFF;
  --txt-muted:  rgba(255,255,255,.62);
  --txt-faint:  rgba(255,255,255,.56);
}

/* ---------- page ---------- */
html, body { background: var(--ink) !important; color: var(--txt) !important; }

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(60,90,255,.15), transparent 62%),
    radial-gradient(900px 700px at 92% 108%, rgba(60,90,255,.07), transparent 60%);
}

/* ---------- header / nav ---------- */
header { background: var(--ink) !important; border-bottom-color: var(--hair) !important; }
.logo, .logo span { color: var(--blue-lift) !important; }
.logo-tagline { color: var(--txt-muted) !important; border-left-color: var(--hair-2) !important; }
.nav-text-link { color: var(--txt-muted) !important; opacity: 1 !important; }
.nav-text-link:hover, .nav-text-link.is-current { color: var(--blue-lift) !important; }
.nav-link { background: #0033FF !important; color: #fff !important; }
.nav-link:hover { background: #1a4bff !important; }

/* ---------- hero ---------- */
.hero h1, h1 { color: var(--txt) !important; }
.hero-subtitle, .subtitle { color: var(--txt-muted) !important; opacity: 1 !important; }

/* ---------- generic type ---------- */
h2, h3, .feature-title { color: var(--txt) !important; }
p, .feature-text, .step-time, .card-excerpt { color: var(--txt-muted) !important; }
a { color: var(--blue-lift); }

/* ---------- stats / labels ---------- */
.stat-label, .stat-value, .divider-text, .enter-hint,
.timeline-step, .step-number, .process-num { color: var(--blue-lift) !important; opacity: 1 !important; }
.divider-line { background: var(--hair) !important; }

/* ---------- wizard / form ---------- */
.wizard-container, .form-section { background: transparent !important; }
.wizard-question { color: var(--txt) !important; }
.wizard-subtitle { color: var(--txt-muted) !important; opacity: 1 !important; }

.wizard-input,
textarea.wizard-input,
select.wizard-input {
  background: var(--ink-2) !important;
  color: var(--txt) !important;
  border-bottom: 2px solid var(--hair-2) !important;
  caret-color: var(--blue-lift);
}
.wizard-input:focus, textarea.wizard-input:focus { border-bottom-color: var(--blue-lift) !important; }
.wizard-input::placeholder, textarea.wizard-input::placeholder { color: var(--txt-faint) !important; }
.wizard-input option { background: var(--ink-2); color: var(--txt); }
.wizard-input:-webkit-autofill,
.wizard-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--txt) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ink-2) inset !important;
}

.wizard-input.error { border-bottom-color: var(--err) !important; }
.wizard-error { color: var(--err) !important; }

.dollar-prefix { color: var(--txt-muted) !important; opacity: 1 !important; }

.progress-bar { background: var(--hair) !important; }
.progress-fill { background: var(--blue-lift) !important; }
.progress-label { color: var(--txt-muted) !important; }

.wizard-continue, .cta-btn, .subscribe-btn {
  background: #0033FF !important; color: #fff !important; border-color: #0033FF !important;
}
.wizard-continue:hover, .cta-btn:hover, .subscribe-btn:hover { background: #1a4bff !important; }
.wizard-continue:disabled { background: var(--ink-3) !important; color: var(--txt-faint) !important; }
.wizard-back, .cta-btn-secondary {
  color: var(--txt-muted) !important; background: transparent !important;
  border-color: var(--hair-2) !important; opacity: 1 !important;
}
.wizard-back:hover, .cta-btn-secondary:hover { color: var(--blue-lift) !important; border-color: var(--blue-lift) !important; }

/* ---------- upload zone ---------- */
.upload-zone { background: var(--ink-2) !important; border: 2px dashed var(--hair-2) !important; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--blue-lift) !important; background: var(--ink-3) !important; }
.upload-zone.has-file { border-color: var(--blue-lift) !important; border-style: solid !important; }
.upload-icon { color: var(--blue-lift) !important; stroke: var(--blue-lift) !important; }
.upload-text { color: var(--txt) !important; }
.upload-hint { color: var(--txt-faint) !important; opacity: 1 !important; }
.upload-filename { color: var(--blue-lift) !important; }

/* ---------- success ---------- */
.success-message { background: var(--ink-2) !important; border-color: var(--blue-lift) !important; }
.success-message h3 { color: var(--txt) !important; }
.success-subtitle, .timeline-text { color: var(--txt-muted) !important; }
.success-icon svg { stroke: var(--blue-lift) !important; }

/* ---------- cards / panels / features ---------- */
.feature, .card, .article-card, .timeline-item {
  background: var(--ink-2) !important; border-color: var(--hair) !important;
}
.feature { border-top-color: var(--hair) !important; }

/* sitelink pages + newsletter: .feature there is a plain top-divided
   list row, not a card -- the generic rule above wrongly boxes it in */
.features .feature { background: transparent !important; }

/* thank-you: .timeline-item is plain centered text, not a card.
   (root's wizard success panel uses .success-timeline, untouched here) */
.timeline .timeline-item { background: transparent !important; }

/* ---------- footer ---------- */
footer { background: var(--ink) !important; border-top-color: var(--hair) !important; }
.footer-text, .footer-content { color: var(--txt-faint) !important; }
.footer-links a { color: var(--txt-muted) !important; }
.footer-links a:hover { color: var(--blue-lift) !important; }

/* ---------- legal pages ---------- */
.legal-content, .legal-content p, .legal-content li { color: var(--txt-muted) !important; }
.legal-content h1, .legal-content h2, .legal-content h3 { color: var(--txt) !important; }
/* terms/privacy have no particle canvas, just a plain dotted body::before --
   the generic solid header background (needed to cover the homepage's
   canvas) paints a visible box over that dot texture here. Keep it transparent. */
.legal-header { background: transparent !important; }

/* ---------- hairlines that were tinted blue on white ---------- */
[style*="rgba(0, 51, 255, 0.1)"], [style*="rgba(0,51,255,0.1)"] { border-color: var(--hair) !important; }

/* ===============================================================
   Homepage-specific corrections
   The homepage predates this theme and carries light-mode
   assumptions that generic selectors don't reach.
   =============================================================== */

/* 1. readability backdrops added for the particle canvas -> kill them */
.hero-subtitle,
.wizard-container { background: transparent !important; }

/* 2. the real class names for the value-prop row */
.value-prop-title { color: var(--blue-lift) !important; opacity: 1 !important; }
.value-prop-sub   { color: var(--txt-muted) !important; opacity: 1 !important; }

/* 2b. how-it-works row — was unclassed inline styles caught by the
   [style*="..."] hack below; now real classes, so needs its own rule */
.how-it-works-number { color: var(--blue-lift) !important; opacity: 1 !important; }
.how-it-works-text   { color: var(--txt) !important; }

/* 3. unclassed divs styled inline. external !important beats inline non-important */
[style*="var(--charcoal)"]      { color: var(--txt) !important; }
[style*="var(--electric-blue)"] { color: var(--blue-lift) !important; }
[style*="linear-gradient(270deg"] { background: linear-gradient(270deg, var(--blue-lift), transparent) !important; opacity:.5; }

/* 4. the logo PNG has a white square baked in. swap for the transparent cut-out */
.logo-icon { content: url('/hippo-dark.png') !important; }
.logo-icon-red, .logo-icon-wrapper .logo-icon-red { display: none !important; }

/* 5. divider + timeline accents */
.timeline-step { color: var(--blue-lift) !important; }
.divider-text  { color: var(--blue-lift) !important; background: var(--ink) !important; }

/* 6. anything still painting itself white behind text */
.container, .hero, .form-section, .value-props { background: transparent !important; }

/* ===============================================================
   Page-specific: research article
   =============================================================== */
.citable-summary, .methodology { background: var(--ink-2) !important; }
.citable-summary { border-left-color: var(--blue-lift) !important; }
.citable-summary p, .methodology { color: var(--txt-muted) !important; }
caption, th { color: var(--blue-lift) !important; }
th { border-bottom-color: var(--hair-2) !important; }
td { border-bottom-color: var(--hair) !important; color: var(--txt-muted) !important; }
article p, .pbody, .sources-list li { color: var(--txt-muted) !important; }
article a { color: var(--blue-lift) !important; }
.faq-item h3, .ptitle, article h2 { color: var(--txt) !important; }
.faq-item, .negotiate-list li { border-color: var(--hair) !important; }
.byline-row, .meta-line { color: var(--txt-muted) !important; border-top-color: var(--hair) !important; }
.negotiate-list strong { color: var(--txt) !important; }

/* ===============================================================
   Page-specific: newsletter watermark hippo
   multiply-blend vanishes on dark; swap art and blend mode
   =============================================================== */
.hippo-bg {
  content: url('/hippo-dark.png');
  mix-blend-mode: normal !important;
  opacity: .08 !important;
}

/* ===============================================================
   Page-specific: thank-you
   =============================================================== */
.back-link { color: var(--blue-lift) !important; }
.timeline-item { background: transparent !important; }

/* ===============================================================
   Page-specific: GDPR consent banner (de/ch/fr)
   already charcoal-on-white; on dark it needs a separating edge
   =============================================================== */
.consent-banner { background: var(--ink-3) !important; border-top: 1px solid var(--hair-2); }
.consent-btn { border-color: var(--txt-muted) !important; color: var(--txt) !important; }
.consent-btn-primary { background: #0033FF !important; border-color: #0033FF !important; color: #fff !important; }
.consent-btn-secondary:hover { background: var(--txt) !important; color: var(--ink) !important; }

/* legal pages: decorative separator was raw brand blue */
.separator { color: var(--blue-lift) !important; }