/* =====================================================
   House Flip Tools — Theme Override
   "Finance Trust" — white / deep navy / emerald
   Layered ON TOP of each page's original layout CSS.
   Only re-themes color, typography, radius, shadows.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ── REDEFINE THE EXISTING CSS VARIABLES ────────────
   Every original page declares :root with its own palette.
   We override at higher specificity to repaint everything. */

:root,
html:root,
html body {
  /* Surfaces */
  --bg:           #fafbfc !important;
  --bg2:          #f4f6f9 !important;
  --surf:         #ffffff !important;
  --surf-alt:     #f8fafc !important;
  --card:         #ffffff !important;
  --card2:        #f8fafc !important;

  /* Borders */
  --border:       #e6eaf0 !important;
  --border2:      #d4dae3 !important;
  --b1:           #e6eaf0 !important;
  --b2:           #d4dae3 !important;

  /* Brand: deep navy + emerald accent */
  --dark:         #0f1b3d !important;
  --dark2:        #1a2a52 !important;

  /* Replace the gold accent with emerald — used as "primary action" everywhere */
  --gold:         #0d7a5f !important;
  --gold2:        #10b981 !important;
  --gold3:        #34d399 !important;
  --gl:           rgba(13,122,95,.08) !important;
  --gb:           rgba(13,122,95,.22) !important;
  --gd:           rgba(13,122,95,.10) !important;

  /* Status — green/red/amber/blue */
  --grn:          #0d7a5f !important;
  --grn2:         #10b981 !important;
  --grnl:         rgba(13,122,95,.10) !important;
  --g:            #0d7a5f !important;
  --g2:           #10b981 !important;
  --gd2:          rgba(13,122,95,.10) !important;

  --red:          #b42318 !important;
  --redl:         rgba(180,35,24,.08) !important;
  --r2:           6px !important;       /* careful: --r2 is also radius, see below */
  --rd:           rgba(180,35,24,.10) !important;

  --o:            #b45309 !important;
  --o2:           #d97706 !important;
  --od:           rgba(180,83,9,.10) !important;

  --bl:           #1e50a0 !important;
  --bl2:          #3b82f6 !important;
  --bld:          rgba(30,80,160,.10) !important;
  --blue:         #1e50a0 !important;
  --bluel:        rgba(30,80,160,.08) !important;

  /* Misc accents (kept tasteful) */
  --pu2:          #6366f1 !important;
  --pk2:          #0d7a5f !important;
  --cy2:          #0891b2 !important;

  /* Text — high-contrast on light bg */
  --tx:           #0b1220 !important;
  --tx2:          #475467 !important;
  --tx3:          #7a869a !important;
  --tx4:          #9aa6b8 !important;

  /* Typography swap */
  --ff:  'Sora', -apple-system, 'Segoe UI', sans-serif !important;
  --fb:  'Manrope', -apple-system, 'Segoe UI', sans-serif !important;
  --fd:  'Sora', Georgia, serif !important;
  --fm:  'JetBrains Mono', ui-monospace, monospace !important;

  /* Radius — slightly tighter, more pro */
  --r:   12px !important;
  --r8:  8px !important;
  --r12: 12px !important;
}

/* Note: --r2 is overloaded in different pages (radius vs red color).
   Force it to the radius meaning since it appears more often as radius. */
:root { --r2: 8px !important; }

/* ── BASE TYPOGRAPHY ──────────────────────────────── */
html, body {
  background: #fafbfc !important;
  color: #0b1220 !important;
  font-family: 'Manrope', -apple-system, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","cv01","cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', -apple-system, sans-serif !important;
  letter-spacing: -.022em !important;
  font-weight: 700 !important;
  color: #0b1220 !important;
}

/* Italic display accents (used in hero headings) — keep upright in Sora */
h1 em, h2 em, .hero h1 em, .hero em {
  font-style: normal !important;
  color: #0d7a5f !important;
  font-weight: 700 !important;
}

/* Tabular numerals everywhere */
.num, .numeric, .money, .v, .hst-v, .hwri .v,
[class*="metric"], [class*="value"] {
  font-feature-settings: "tnum" !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.01em !important;
}

/* ── TOPBAR ───────────────────────────────────────── */
.topbar {
  background: #0f1b3d !important;
  color: rgba(255,255,255,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.topbar strong { color: #ffffff !important; font-weight: 600 !important; }

/* ── NAV ──────────────────────────────────────────── */
nav, header > .w, header {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: none !important;
}
nav { border-bottom: 1px solid #e6eaf0 !important; }

.nlogo { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
.nlogo em { color: #0d7a5f !important; font-style: normal !important; }
.nlm,
.lm {
  background: #0f1b3d !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
}
.nl { color: #475467 !important; font-weight: 500 !important; }
.nl:hover { background: #f4f6f9 !important; color: #0b1220 !important; }

.ncta,
a.ncta {
  background: #0f1b3d !important;
  color: #ffffff !important;
  border: 1px solid #0f1b3d !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.ncta:hover { background: #0d7a5f !important; border-color: #0d7a5f !important; color: #fff !important; }

/* ── HERO (homepage) ─────────────────────────────── */
.hero {
  background: #fafbfc !important;
  border-bottom: 1px solid #e6eaf0 !important;
  color: #0b1220 !important;
}
.hero::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(13,122,95,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 30%, rgba(15,27,61,.05) 0%, transparent 60%) !important;
}
.hero h1 { color: #0b1220 !important; font-weight: 700 !important; }
.hsub { color: #475467 !important; }
.hey {
  background: rgba(13,122,95,.08) !important;
  border: 1px solid rgba(13,122,95,.22) !important;
  color: #0d7a5f !important;
  font-weight: 600 !important;
}

.hb {
  background: #ffffff !important;
  border: 1px solid #e6eaf0 !important;
  color: #475467 !important;
}
.hb1 { background: rgba(13,122,95,.10) !important; color: #0d7a5f !important; border-color: rgba(13,122,95,.22) !important; }
.hb2 { background: #ffffff !important; color: #475467 !important; border-color: #e6eaf0 !important; }

.hstats {
  background: #ffffff !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(15,27,61,.04), 0 1px 3px rgba(15,27,61,.03) !important;
  overflow: hidden;
}
.hst {
  background: #ffffff !important;
  border-right: 1px solid #eef1f5 !important;
}
.hst:last-child { border-right: none !important; }
.hst-v { color: #0f1b3d !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; }
.hst-l { color: #7a869a !important; font-weight: 600 !important; }

/* ── HERO WIDGET (Quick Deal Check card) ─────────── */
.hwidget {
  background: #ffffff !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(15,27,61,.10), 0 4px 8px rgba(15,27,61,.05) !important;
  animation: float 5.5s ease-in-out infinite;
}
.hwt { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
.hwt a { color: #7a869a !important; }
.hwt a:hover { color: #0d7a5f !important; }
.hwlabel { color: #7a869a !important; font-weight: 600 !important; }
.hwlabel strong { color: #0f1b3d !important; font-family: 'Sora', sans-serif !important; }

input[type=range] {
  background: #eef1f5 !important;
  height: 4px !important;
}
input[type=range]::-webkit-slider-thumb {
  background: #ffffff !important;
  border: 2px solid #0d7a5f !important;
  box-shadow: 0 1px 4px rgba(13,122,95,.3) !important;
  width: 18px !important; height: 18px !important;
}
input[type=range]::-moz-range-thumb {
  background: #ffffff !important;
  border: 2px solid #0d7a5f !important;
}

.hwresult {
  background: #f4f6f9 !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 12px !important;
}
.hwri .l { color: #7a869a !important; font-weight: 600 !important; }
.hwri .v { font-family: 'Sora', sans-serif !important; font-weight: 700 !important; }
.cp, .text-success { color: #0d7a5f !important; }
.cn, .text-danger { color: #b42318 !important; }
.cw, .text-warn { color: #b45309 !important; }

.rpass { background: rgba(13,122,95,.10) !important; color: #0d7a5f !important; border: 1px solid rgba(13,122,95,.22) !important; }
.rfail { background: rgba(180,35,24,.10) !important; color: #b42318 !important; border: 1px solid rgba(180,35,24,.18) !important; }

.hwcta,
a.hwcta {
  background: #0f1b3d !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.hwcta:hover { background: #0d7a5f !important; color: #fff !important; }

/* ── CARDS / TOOL CARDS ──────────────────────────── */
.card, .tcard, .cell, .box,
[class*="-card"], section .card {
  background: #ffffff !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(15,27,61,.04), 0 1px 3px rgba(15,27,61,.03) !important;
  color: #0b1220 !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover, .tcard:hover, [class*="-card"]:hover {
  border-color: #d4dae3 !important;
  box-shadow: 0 4px 12px rgba(15,27,61,.06), 0 2px 4px rgba(15,27,61,.04) !important;
  transform: translateY(-1px);
}

.tcard h3, .tcard .tt { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
.tcard p, .tcard .td { color: #475467 !important; }
.tcard .ic, .tcard .icon {
  background: rgba(13,122,95,.08) !important;
  color: #0d7a5f !important;
  border: 1px solid rgba(13,122,95,.18) !important;
  border-radius: 10px !important;
}
.tcard a, .tcard .tlink { color: #0d7a5f !important; font-weight: 600 !important; }

/* ── BUTTONS ─────────────────────────────────────── */
.btn, .button, button.cta, a.cta,
.tbtn, .pbtn, [class*="-btn"], button.primary {
  background: #0f1b3d !important;
  color: #ffffff !important;
  border: 1px solid #0f1b3d !important;
  border-radius: 10px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  transition: all .18s ease;
}
.btn:hover, .button:hover, .tbtn:hover, button.primary:hover {
  background: #0d7a5f !important;
  border-color: #0d7a5f !important;
  color: #fff !important;
}
.btn-ghost, .btn-outline, .secondary {
  background: transparent !important;
  color: #0f1b3d !important;
  border: 1px solid #d4dae3 !important;
}
.btn-ghost:hover, .btn-outline:hover {
  background: #0f1b3d !important;
  color: #fff !important;
  border-color: #0f1b3d !important;
}

/* ── FORMS / INPUTS ──────────────────────────────── */
input[type=text], input[type=number], input[type=email], input[type=tel],
select, textarea {
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 1px solid #d4dae3 !important;
  border-radius: 9px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: #0d7a5f !important;
  box-shadow: 0 0 0 3px rgba(13,122,95,.12) !important;
  outline: none !important;
}
label { color: #475467 !important; font-weight: 600 !important; }

/* ── CALCULATOR PAGE HEADER ──────────────────────── */
header,
header.tool-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e6eaf0 !important;
  color: #0b1220 !important;
}
header::before { display: none !important; }
header .lt h1, header .logo h1 { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
header .lt .sub, header .logo .sub { color: #7a869a !important; }
header a { color: #475467 !important; }
header a:hover { color: #0d7a5f !important; }

/* Calculator page title hero block (often called .ph or .pagehead) */
.ph, .pagehead, .tool-hero {
  background: #fafbfc !important;
  border-bottom: 1px solid #e6eaf0 !important;
  color: #0b1220 !important;
}
.ph h1, .pagehead h1, .tool-hero h1 { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
.ph p, .pagehead p, .tool-hero p { color: #475467 !important; }
.ph .ey, .pagehead .ey, .pageeyebrow {
  background: rgba(13,122,95,.08) !important;
  color: #0d7a5f !important;
  border: 1px solid rgba(13,122,95,.22) !important;
}

/* Calculator page hero — override dark navy inline gradient */
section#calculator {
  background: #ffffff !important;
  border-bottom: 1px solid #e6eaf0 !important;
}
section#calculator h1 { color: #0b1220 !important; }
section#calculator p { color: #475467 !important; }
section#calculator .ey,
section#calculator [class*="eyebrow"] {
  background: rgba(13,122,95,.08) !important;
  color: #0d7a5f !important;
  border: 1px solid rgba(13,122,95,.22) !important;
}
/* Pills like "Free Forever", "No Signup", "Instant Results" */
section#calculator .pill,
section#calculator .chip,
section#calculator .tag {
  background: #ffffff !important;
  color: #0d7a5f !important;
  border: 1px solid rgba(13,122,95,.22) !important;
}

/* Tab/Pills row inside tools */
.tabs, .toolnav, .ptabs {
  background: #ffffff !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 12px !important;
}
.tabs a, .toolnav a, .ptabs a { color: #475467 !important; }
.tabs a.active, .toolnav a.active, .ptabs a.active,
.tab.active, .pill.active {
  background: #0f1b3d !important;
  color: #ffffff !important;
}

/* Share row */
.share, .sharebar {
  background: #f4f6f9 !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 12px !important;
  color: #475467 !important;
}
.share button, .sharebar button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ── BACKGROUNDS THAT WERE DARK ORIGINALLY ───────── */
/* Some pages use very dark page bg like #070c16. Force light. */
body { background: #fafbfc !important; }
[style*="background:#070c16"], [style*="background:#0d1117"], [style*="background:#161c27"],
[style*="background-color:#070c16"], [style*="background-color:#0d1117"] {
  background: #fafbfc !important;
}

/* Calculator main panels */
.panel, .toolpanel, .results, .resultcard,
section.tool, .tsection {
  background: #ffffff !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 14px !important;
  color: #0b1220 !important;
}

/* ── TABLES ──────────────────────────────────────── */
table {
  border: 1px solid #e6eaf0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: #ffffff !important;
}
th {
  background: #f4f6f9 !important;
  color: #7a869a !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11.5px !important;
  letter-spacing: .06em !important;
  border-bottom: 1px solid #e6eaf0 !important;
}
td {
  color: #0b1220 !important;
  border-bottom: 1px solid #eef1f5 !important;
}
tr:last-child td { border-bottom: none !important; }
tr:hover td { background: #f8fafc !important; }

/* ── BADGES / PILLS ──────────────────────────────── */
.badge, .pill, .tag, .chip {
  border-radius: 100px !important;
  font-weight: 600 !important;
}

/* ── FOOTER ──────────────────────────────────────── */
footer {
  background: #0f1b3d !important;
  color: rgba(255,255,255,.72) !important;
  border-top: none !important;
}
footer h4 {
  color: #ffffff !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 13px !important;
}
footer a, footer p { color: rgba(255,255,255,.72) !important; }
footer a:hover { color: #ffffff !important; }
footer .legal, footer .small, footer .copyright { color: rgba(255,255,255,.50) !important; }
footer hr, footer .divider { border-color: rgba(255,255,255,.08) !important; }

/* ── BLOG / PROSE ────────────────────────────────── */
article, .prose, .post, .blog-content {
  color: #0b1220 !important;
  background: transparent !important;
}
article h1, .prose h1, .post h1 { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
article h2, .prose h2, .post h2 { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
article h3, .prose h3, .post h3 { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
article p, .prose p, .post p { color: #475467 !important; }
article a, .prose a, .post a { color: #0d7a5f !important; }
article blockquote, .prose blockquote, .post blockquote {
  border-left: 3px solid #0d7a5f !important;
  color: #475467 !important;
  background: #f8fafc !important;
  border-radius: 0 8px 8px 0 !important;
}
article code, .prose code, .post code {
  font-family: 'JetBrains Mono', monospace !important;
  background: #f4f6f9 !important;
  color: #0f1b3d !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: .9em !important;
}

/* ── SCROLLBAR & SELECTION ───────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #fafbfc; }
::-webkit-scrollbar-thumb { background: #d4dae3; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9aa6b8; }
::selection { background: rgba(13,122,95,.18); color: #0f1b3d; }

/* ── CHART.JS LEGEND TEXT ────────────────────────── */
canvas + ul li, .chartjs-legend li { color: #475467 !important; }

/* Section headers + eyebrows used inconsistently across pages */
.eyebrow, .ey, .section-eyebrow {
  background: rgba(13,122,95,.08) !important;
  color: #0d7a5f !important;
  border: 1px solid rgba(13,122,95,.22) !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* Generic dark sections (CTAs / banners) — keep dark, just rebrand */
.cta-banner, .dark-banner, [class*="dark-section"],
section[class*="dark"], .promo-dark {
  background: #0f1b3d !important;
  color: #ffffff !important;
  border-radius: 18px !important;
}
.cta-banner h2, .dark-banner h2 { color: #ffffff !important; }
.cta-banner p, .dark-banner p { color: rgba(255,255,255,.72) !important; }

/* ── FINAL OVERRIDES ─────────────────────────────── */
/* Force fade-up animations to end-state immediately so SSR/screenshot/SEO see real colors */
.fu, .fu.d1, .fu.d2, .fu.d3, .fu.d4 {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Calculator page: header used dark gradient. Force light. */
header, header.tool-header, header[class] {
  background: #ffffff !important;
}
header::before, header::after { display: none !important; }

/* Inline-styled H1s on calculator pages (color:#dde6f0 for old dark theme) */
header h1[style], .ph h1[style], .phero h1[style], h1[style*="color:#dde6f0"], h1[style*="color:#fff"] {
  color: #0b1220 !important;
  font-family: 'Sora', sans-serif !important;
}
[style*="color:#fff"]:not(.ncta):not(.hwcta):not(.btn):not(footer *):not(.topbar *):not(.dark-banner *) {
  color: #0b1220 !important;
}
[style*="color:#3d5168"], [style*="color:#7a94b0"], [style*="color:rgba(255,255,255,.3)"], [style*="color:rgba(255,255,255,.6)"] {
  color: #475467 !important;
}

/* Calc page hero/breadcrumb section (.phero or whatever wraps the H1) — force light bg */
.phero, .ph, .pagehero, .pagehead, header > .w {
  background: #fafbfc !important;
  color: #0b1220 !important;
}
.phero *, .ph *, .pagehero * { color: inherit; }
.phero h1, .ph h1, .pagehero h1 { color: #0b1220 !important; }
.phero p, .ph p, .pagehero p, .phero .lead { color: #475467 !important; }

/* Breadcrumb row */
[style*="background:#070c16"], [style*="background:#0d1117"], [style*="background:#040810"],
[style*="background:linear-gradient(180deg,#040810"] {
  background: #fafbfc !important;
}

/* Calculator share bar — was dark navy, keep dark but rebrand */
.share, .sharebar, [class*="share"] { background: #f4f6f9 !important; color: #475467 !important; }
.share button, .sharebar button { color: #ffffff !important; }

/* Topbar text — original wraps content, force visible color */
.topbar, .topbar *, .topbar > * {
  color: rgba(255,255,255,.78) !important;
}
.topbar strong { color: #ffffff !important; }

/* Tool tabs row: many pages use .ctabs with dark bg */
.ctabs, .ttabs {
  background: #ffffff !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 12px !important;
  padding: 6px !important;
}
.ctabs a, .ttabs a, .ctab {
  color: #475467 !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
.ctabs a.active, .ttabs a.active, .ctab.active {
  background: #0f1b3d !important;
  color: #ffffff !important;
}

/* Verdict cards (.vrd) */
.vrd { border-radius: 12px !important; }
.vrd.hot { background: rgba(13,122,95,.06) !important; border-color: rgba(13,122,95,.22) !important; }
.vrd.hot .vtl { color: #0d7a5f !important; }
.vrd.good { background: rgba(13,122,95,.08) !important; border-color: rgba(13,122,95,.22) !important; }
.vrd.good .vtl { color: #0d7a5f !important; }
.vrd.warn { background: rgba(180,83,9,.08) !important; border-color: rgba(180,83,9,.22) !important; }
.vrd.warn .vtl { color: #b45309 !important; }
.vrd.bad { background: rgba(180,35,24,.08) !important; border-color: rgba(180,35,24,.22) !important; }
.vrd.bad .vtl { color: #b42318 !important; }
.ini { background: #f4f6f9 !important; color: #475467 !important; border-radius: 8px !important; }

/* Big metric tiles */
.mbig, .ms { background: #ffffff !important; border-color: #e6eaf0 !important; box-shadow: 0 1px 2px rgba(15,27,61,.04) !important; }
.mbig .val { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }
.mbig .lbl, .ms .lbl { color: #7a869a !important; }
.ms .val { color: #0b1220 !important; font-family: 'Sora', sans-serif !important; }

/* Fix segment toggle */
.tog { background: #f4f6f9 !important; border: 1px solid #e6eaf0 !important; }
.togb { color: #475467 !important; background: transparent !important; }
.togb.active { background: #0f1b3d !important; color: #ffffff !important; }

/* Cost rows */
.cr { color: #475467 !important; border-bottom-color: #eef1f5 !important; }
.crt { border-top-color: #d4dae3 !important; color: #0b1220 !important; }
.crl { color: #475467 !important; }
.il-l { color: #7a869a !important; font-weight: 600 !important; }
.il-v { color: #0d7a5f !important; font-family: 'Sora', sans-serif !important; }

/* Inputs ni */
.ni { background: #ffffff !important; border-color: #d4dae3 !important; color: #0b1220 !important; border-radius: 8px !important; }
.ni:focus { border-color: #0d7a5f !important; box-shadow: 0 0 0 3px rgba(13,122,95,.12) !important; }

/* Donut/chart legend dots — recolor via CSS classes */
.cd { /* color set inline by JS, can't override */ }

/* Calculator page top section: original <header> uses inline gradient.
   Force the entire top region (header + breadcrumb + page-hero) to light. */
body > header,
body > header > *,
header[style*="background"],
header [style*="background:#070c16"],
header [style*="background:#0d1117"],
header [style*="background:#161c27"] {
  background: #fafbfc !important;
  background-image: none !important;
  color: #0b1220 !important;
}
header h1, header .ph h1, header h1[style] {
  color: #0b1220 !important;
  background: transparent !important;
}
header p, header .lead, header [style*="color"] {
  color: #475467 !important;
}
header .ey, header [class*="eyebrow"], header [style*="background:rgba(201,150,58"] {
  background: rgba(13,122,95,.08) !important;
  color: #0d7a5f !important;
  border: 1px solid rgba(13,122,95,.22) !important;
}
header [style*="color:#dde6f0"], [style*="color:#dde6f0"] { color: #0b1220 !important; }
header [style*="color:rgba(255,255,255"], header a[style] { color: #475467 !important; }

/* Free Forever / No Signup / Instant Results pills on calc page */
header [style*="background:rgba(34,197,94"], [style*="background:rgba(34,197,94"] {
  background: rgba(13,122,95,.10) !important; color: #0d7a5f !important;
  border: 1px solid rgba(13,122,95,.22) !important;
}
header [style*="background:rgba(201,150"], [style*="background:rgba(201,150"] {
  background: rgba(13,122,95,.08) !important; color: #0d7a5f !important;
  border: 1px solid rgba(13,122,95,.22) !important;
}

/* HARD OVERRIDE: any <header> directly under body uses light bg.
   Bumps specificity past the original `header{...}` rule. */
html body > header,
html body header {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #e6eaf0 !important;
  padding: 0 !important;
}
html body > header > .w {
  background: transparent !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
/* The page-hero block on calc pages — usually the second .w inside header */
html body > header .w + .w,
html body > header > div:not(.ht) {
  background: #fafbfc !important;
  padding: 40px 28px !important;
}

/* ── Calculator/blog page HERO sections (inline gradient backgrounds) ──
   Targets the dark navy gradient hero used on every static sub-page,
   the breadcrumb strip above it, and the bridge bar below. */
section[style*="linear-gradient(135deg,#040810"],
section[style*="linear-gradient(135deg, #040810"],
section[style*="linear-gradient(135deg,#0d1525"],
section[style*="background:#0d1525"],
div[style*="background:#0d1525"] {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #e6eaf0 !important;
  color: #0b1220 !important;
}
/* Kill the gold radial glow overlay inside the hero */
section[style*="linear-gradient(135deg,#040810"] > div[style*="radial-gradient"],
section[style*="linear-gradient(135deg,#0d1525"] > div[style*="radial-gradient"] {
  display: none !important;
}
/* Hero typography */
section[style*="linear-gradient(135deg,#040810"] h1,
section[style*="linear-gradient(135deg,#0d1525"] h1 {
  color: #0b1220 !important;
  font-family: 'Sora', sans-serif !important;
  background: transparent !important;
  -webkit-text-fill-color: #0b1220 !important;
}
section[style*="linear-gradient(135deg,#040810"] p,
section[style*="linear-gradient(135deg,#0d1525"] p {
  color: #475467 !important;
}
section[style*="linear-gradient(135deg,#040810"] a,
div[style*="background:#0d1525"] a {
  color: #475467 !important;
}
/* Breadcrumb strip + bridge bar */
div[style*="background:#0d1525"] {
  background: #f4f6f9 !important;
  border-color: #e6eaf0 !important;
}
div[style*="background:#0d1525"] p { color: #475467 !important; }