/* ==========================================================================
   HOMEWISE — "Patriot Premium" design system (plain CSS, no build step)
   Brand refresh 2026-07-29 (Brian-approved pilot): Navy #0D2137 · Green #00B24C
   · Blue #1877E0 · Nunito throughout. Red #C0392B is reserved for warnings/errors.
   ========================================================================== */

:root {
  --navy: #0D2137;
  --navy-dark: #081422;
  --navy-light: #1a3352;
  --red: #C0392B;        /* warnings + error text ONLY */
  --red-dark: #a5301f;
  --green: #00B24C;      /* primary action accent */
  --green-d: #009a41;
  --blue: #1877E0;       /* informational / highlight accent */
  --blue-light: #62a4f1; /* blue that stays readable on navy */
  --ink: #1f2937;
  --muted: #5b6573;
  --line: #e5e7eb;
  --bg: #ffffff;
  --bg-alt: #F6FAFF;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(13, 33, 55, .08), 0 1px 2px rgba(13, 33, 55, .06);
  --shadow-md: 0 10px 25px -10px rgba(13, 33, 55, .25);
  --shadow-lg: 0 25px 50px -12px rgba(13, 33, 55, .28);
  --maxw: 1180px;
  --font-head: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy);
  line-height: 1.12;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.center { text-align: center; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: .6rem 1rem;
  font-family: var(--font-head); text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  letter-spacing: .01em;
  padding: .85rem 1.6rem; border-radius: 10px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s, color .15s;
  text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-d); color: #fff; }
.btn-gold { background: var(--green); color: #fff; }
.btn-gold:hover { background: var(--green-d); color: #fff; }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-sm { padding: .55rem 1rem; font-size: .85rem; }

.icon { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; }

/* ---------- Header / Nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 6px -1px rgba(0,0,0,.25); }
/* ---------- Rate ticker (top of every page) ---------- */
.rate-ticker {
  display: flex; align-items: stretch; height: 34px; overflow: hidden;
  background: var(--navy-dark); border-bottom: 1px solid rgba(24,119,224,.18);
}
.ticker-tag {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .42rem;
  padding: 0 .9rem; white-space: nowrap;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: var(--navy); font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .66rem;
}
.ticker-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--navy);
  animation: ticker-pulse 1.8s ease-out infinite;
}
@keyframes ticker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(13,33,55,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(13,33,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,33,55,0); }
}
.ticker-viewport { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.ticker-track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: ticker-scroll 42s linear infinite;
}
.rate-ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {            /* items are rendered twice -> seamless loop */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item { display: inline-flex; align-items: baseline; gap: .42rem; padding: 0 1.5rem; position: relative; }
.ticker-item::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 11px; width: 1px; background: rgba(255,255,255,.15);
}
.ticker-label { color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; font-family: var(--font-head); }
.ticker-val { color: var(--green); font-weight: 700; font-size: .82rem; font-family: var(--font-head); letter-spacing: .02em; }
.ticker-chg { font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .01em; }
.ticker-chg.up { color: #3ddc84; }
.ticker-chg.up::before { content: "\25B2 "; font-size: .6em; }
.ticker-chg.down { color: #ff6b6b; }
.ticker-chg.down::before { content: "\25BC "; font-size: .6em; }
.ticker-val.ticker-updated { animation: ticker-flash 1.4s ease; }
@keyframes ticker-flash { 0% { color: #fff; } 100% { color: var(--green); } }
/* Per-city local ticker in the hero (Brian 2026-08-19): same mechanics as the
   market ticker, presented as a contained rounded bar at the top of the city
   hero (weather + local facts instead of markets). */
.city-ticker {
  height: 36px;
  margin: 0 0 1.25rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(8,20,34,.55);
}
.city-ticker .ticker-tag { border-radius: 9px 0 0 9px; }
.city-ticker .ticker-val[data-wx="summary"] { color: #fff; }
@media (max-width: 560px) {
  .ticker-tag { font-size: .58rem; padding: 0 .6rem; }
  .ticker-label { font-size: .6rem; }
  .ticker-val { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-dot { animation: none; }
}

/* Sticky header: pin the nav while the rate ticker (34px) scrolls away. */
.site-header { position: sticky; top: -34px; z-index: 60; }
.nav { background: var(--navy); position: relative; }
.nav .container { display: flex; align-items: center; justify-content: space-between; padding-top: .7rem; padding-bottom: .7rem; gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; }
.logo:hover { text-decoration: none; }
/* HomeWise wordmark — wider-than-tall lockup, navy bg color-matched to site
   --navy so it sits flush with header/footer with no visible rectangle. */
.logo-mark { display: inline-flex; align-items: center; }
.emblem-wordmark { display: block; height: 92px; width: auto; max-width: 100%; }
.nav .container { padding-top: .6rem; padding-bottom: .6rem; }
.logo-text { display: inline-flex; flex-direction: column; justify-content: center; gap: .14rem; }
.logo-name { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: #fff; font-size: 1.55rem; line-height: 1; letter-spacing: .01em; }
.logo-name .lt-home { color: #fff; }
.logo-name .lt-wise { color: var(--green); }
.logo-slogan {
  font-family: var(--font-head); text-transform: uppercase; white-space: nowrap;
  letter-spacing: .12em; font-size: .52rem; font-weight: 600; line-height: 1;
  color: rgba(24,119,224,.82);
}
@media (max-width: 700px) { .logo-slogan { display: none; } .emblem-wordmark { height: 64px; } }

/* Honeypot anti-spam field — hidden from humans, bots tend to fill it. */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------- Educational category tab bar (home + guides) ---------- */
.edu-tabs { background: #fff; border-bottom: 1px solid #e8ecf1; box-shadow: 0 1px 3px rgba(8,20,34,.05); position: sticky; top: 101px; z-index: 50; }
.edu-tabs .container { padding-top: .85rem; padding-bottom: .85rem; }
.edu-tabs-toggle { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.edu-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  letter-spacing: .01em; padding: .5rem .95rem; border-radius: 10px;
  border: 1px solid transparent; white-space: nowrap;
}
.edu-toggle.is-active { background: var(--navy); color: #fff; }
.edu-toggle.is-active .icon { color: var(--green); }
.edu-toggle-alt { color: var(--muted); background: transparent; }
.edu-toggle-alt .icon { color: var(--green); }
.edu-toggle-alt:hover { color: var(--navy); background: var(--bg-alt); text-decoration: none; }
.edu-toggle .icon { width: 16px; height: 16px; }
/* Mortgage Calculator tab centered (Brian 2026-08-03). The bar scrolls; the
   inner row uses margin:auto so it CENTERS when everything fits and simply
   scrolls from the start (no clipping, all tabs reachable) when it doesn't. The
   calc tab is the middle item (4 tabs each side), so the centered row lands it
   dead-center. */
.edu-tab-row {
  display: flex; overflow-x: auto; padding-bottom: .25rem;
  scrollbar-width: none; -ms-overflow-style: none;
}
.edu-tab-row::-webkit-scrollbar { display: none; }
.edu-tab-inner { display: flex; gap: .55rem; align-items: center; margin: 0 auto; }
.edu-tab {
  flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  color: #46566b; background: #eef1f5; border: 1px solid #dde3ea;
  padding: .5rem 1rem; border-radius: 999px;
  transition: border-color .15s, color .15s, box-shadow .15s, background .15s;
}
.edu-tab:hover { color: var(--navy); background: #e4e9ef; border-color: #b9c4d2; box-shadow: 0 2px 6px rgba(8,20,34,.08); text-decoration: none; }
/* The current-page tab looks the SAME heather gray as the others (Brian
   2026-08-03) — no navy/blue highlight; aria-current still marks it for screen
   readers. The Mortgage Calculator keeps its brand-green in every state below. */
.edu-tab.is-active { background: #eef1f5; border-color: #dde3ea; color: #46566b; box-shadow: none; }
.edu-tab.is-active:hover { color: var(--navy); background: #e4e9ef; border-color: #b9c4d2; }

/* Brand-green highlight for the Mortgage Calculator tab (refresh 2026-07-29;
   the other tabs sit in light heather gray per Brian). Stays green even when it
   is the active/current tab (equal specificity to .edu-tab.is-active + later
   in source, so it wins). */
.edu-tab-calc,
.edu-tab-calc.is-active {
  color: #fff; font-weight: 700;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
  border-color: var(--green-d);
  box-shadow: 0 4px 14px rgba(0,178,76,.35);
}
.edu-tab-calc:hover {
  color: #fff; border-color: var(--green-d);
  background: linear-gradient(135deg, #0cc45c 0%, var(--green) 100%);
  box-shadow: 0 6px 18px rgba(0,178,76,.45);
}
.edu-tab-calc.is-active {
  background: linear-gradient(135deg, #0cc45c 0%, var(--green-d) 100%);
  border-color: var(--green-d);
  box-shadow: 0 6px 18px rgba(0,178,76,.5);
}
.edu-tab-calc.is-active:hover { color: #fff; }

/* TRUE page-center (Brian 2026-07-29 screenshot: links must sit on the page's
   center line, not centered-in-leftover-space). Absolute + translate centers on
   the bar itself; vertical translate centers against the logo. Links clear the
   logo down to the 1024px collapse point, where the mobile menu takes over. */
.nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav-link { color: rgba(255,255,255,.82); font-weight: 700; font-size: .92rem; transition: color 150ms ease-out; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--green); text-decoration: none; }
.nav-cta { margin-left: .5rem; }

.menu-toggle { display: none; background: none; border: 0; color: #fff; padding: .25rem; cursor: pointer; }
.menu-toggle .icon { width: 28px; height: 28px; }
.mobile-menu { display: none; background: var(--navy-light); border-top: 1px solid rgba(255,255,255,.12); }
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: .75rem 0; }
.mobile-menu a { display: block; color: rgba(255,255,255,.9); font-weight: 700; padding: .7rem 1.25rem; }
.mobile-menu a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
/* Plexus animated background layer (header nav + footer) — behind content, never clips dropdowns */
.js-plexus { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.nav > .container, .nav > .mobile-menu { position: relative; z-index: 1; }
.site-footer > .container { position: relative; z-index: 1; }
.mobile-group-label {
  padding: .85rem 1.25rem .2rem; list-style: none;
  color: var(--green); font-family: var(--font-head);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .18em;
}
.mobile-sub-link { padding-left: 2.25rem !important; font-weight: 400 !important; }

/* ---------- Dropdown nav ---------- */
.has-dropdown { position: relative; }
.nav-dropdown-btn {
  background: none; border: 0; cursor: pointer; padding: 0; margin: 0;
  color: rgba(255,255,255,.82); font-weight: 700; font-size: .92rem;
  font-family: var(--font-body); line-height: 1;
  display: inline-flex; align-items: center; gap: .28rem;
}
.nav-dropdown-btn:hover, .nav-dropdown-btn[aria-expanded="true"] { color: var(--green); }
.dropdown-arrow {
  width: .82em; height: .82em; flex: 0 0 auto;
  transition: transform .18s ease;
  vertical-align: -.1em;
}
.nav-dropdown-btn[aria-expanded="true"] .dropdown-arrow { transform: rotate(180deg); }

.dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border-top: 3px solid var(--green);
  list-style: none; margin: 0; padding: .45rem 0;
  min-width: 210px; white-space: nowrap; z-index: 200;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  display: block; color: var(--navy); padding: .52rem 1.1rem;
  font-size: .88rem; font-weight: 600;
  transition: background .1s, color .1s;
}
.dropdown-item:hover { background: var(--bg-alt); color: var(--blue); text-decoration: none; }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: var(--navy); z-index: 0; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(24,119,224,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0,178,76,.20), transparent 60%),
    linear-gradient(135deg, var(--navy-dark), var(--navy) 55%, var(--navy-light));
}
/* Photographic hero (home): show the image instead of the flat gradient. */
.hero--photo .hero-bg { background-size: cover; background-position: center 28%; background-repeat: no-repeat; }
.hero--photo .hero-bg::after { display: none; }
.hero .container { position: relative; z-index: 1; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(0,178,76,.22); border: 1px solid rgba(0,178,76,.45);
  color: #fff; padding: .4rem .9rem; border-radius: 999px;
  font-family: var(--font-head); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 1.25rem;
}
.badge .icon { color: var(--green); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero h1 .accent { display: block; color: var(--green); }
.hero-lead { color: rgba(255,255,255,.85); font-size: 1.2rem; max-width: 46ch; margin-bottom: 1.5rem; }
.hero-points { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; max-width: 520px; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.hero-points li { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.92); font-size: .95rem; }
.hero-points .icon { color: var(--green); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7); font-size: .8rem; align-items: center; }
.stars { color: #D4AF37; letter-spacing: .1em; }

/* "About HomeWise" hero block — warm mission card that fills the open hero space */
.hero-about { margin-top: 2.25rem; max-width: 560px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px -26px rgba(0,0,0,.65); }
.hero-about-media { aspect-ratio: 16 / 10; min-height: 200px; background-size: cover; background-position: center 42%; }
.hero-about-body { padding: 1.2rem 1.4rem 1.4rem; text-align: center; }
.hero-about-eyebrow { display: inline-block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--green); margin-bottom: .5rem; }
.hero-about-title { font-family: var(--font-head); color: #fff; font-size: 1.3rem; line-height: 1.25; margin: 0 0 .55rem; }
.hero-about-body p { color: rgba(255,255,255,.84); font-size: .95rem; line-height: 1.6; margin: 0 0 .85rem; }
.hero-about-link { color: var(--green); font-weight: 700; font-size: .9rem; text-decoration: none; }
.hero-about-link:hover { text-decoration: underline; }
/* Why HomeWise — benefit grid in the hero */
.hero-why { margin-top: 2.4rem; max-width: 560px; text-align: center; }
.hw-benefits { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
.hw-benefit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; }
.hw-benefit-ic { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(24,119,224,.14); border: 1px solid rgba(24,119,224,.32); color: var(--blue); }
.hw-benefit-ic svg { width: 20px; height: 20px; }
.hw-benefit-txt strong { display: block; color: #fff; font-size: 1rem; margin-bottom: .15rem; font-family: var(--font-head); }
.hw-benefit-txt span { display: block; color: rgba(255,255,255,.78); font-size: .9rem; line-height: 1.5; }
/* Second hero photo + caption */
.hero-photo2 { margin: 2.4rem 0 0; max-width: 560px; }
.hero-photo2-img { aspect-ratio: 16 / 10; min-height: 220px; border-radius: 16px; background-size: cover; background-position: center 45%; border: 1px solid rgba(255,255,255,.13); box-shadow: 0 18px 44px -26px rgba(0,0,0,.65); }
.hero-photo2 figcaption { margin-top: .85rem; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.55; font-style: italic; text-align: center; }
/* Closing values strip */
.hero-values { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; max-width: 560px; }
.hero-values span { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.92); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .4rem .85rem; }

/* ---------- Light hero (brand refresh 2026-07-29, Brian-approved pilot) ----------
   The pilot Brian signed off on uses a bright, airy hero: soft light-blue -> white
   gradient with faint green/blue glows, navy headline, generous white space. The
   homepage carries .hero--light; city pages keep their dark local-photo hero. */
.hero--light { color: var(--ink); }
.hero--light .hero-bg { background: linear-gradient(180deg, #F6FAFF 0%, #fff 100%); }
.hero--light .hero-bg::after {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(24,119,224,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0,178,76,.10), transparent 60%);
}
.hero--light h1 { color: var(--navy); }
.hero--light .hero-lead { color: var(--muted); }
.hero--light .hero-points li { color: var(--ink); }
.hero--light .badge { background: rgba(0,178,76,.10); border-color: rgba(0,178,76,.35); color: var(--navy); }
.hero--light .btn-outline-light { border-color: var(--blue); color: var(--blue); }
.hero--light .btn-outline-light:hover { background: rgba(24,119,224,.08); color: var(--blue); }
.hero--light .hero-about { background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 44px -30px rgba(13,33,55,.35); }
.hero--light .hero-about-title { color: var(--navy); }
.hero--light .hero-about-body p { color: var(--muted); }
.hero--light .hw-benefit-txt strong { color: var(--navy); }
.hero--light .hw-benefit-txt span { color: var(--muted); }
.hero--light .hero-photo2 figcaption { color: var(--muted); }
.hero--light .hero-photo2-img { border-color: var(--line); box-shadow: 0 18px 44px -30px rgba(13,33,55,.3); }
.hero--light .hero-values span { color: var(--navy); background: rgba(13,33,55,.05); border-color: rgba(13,33,55,.14); }
.hero--light .calc-panel { border: 1px solid var(--line); box-shadow: 0 24px 60px -32px rgba(13,33,55,.35); }
.hero--light .hero-picker-row .hero-line-badge,
.hero--light .hero-picker-row .hero-edu-btn,
.hero--light .hero-picker-row .hero-refi-btn { box-shadow: 0 8px 22px -16px rgba(13,33,55,.45); }
/* Homepage/city hero as a single CENTERED column (no picker column -> no blank right) */
.hero-solo { max-width: 900px; margin: 0 auto; }
.hero-solo .hero-copy { text-align: center; }
.hero-solo .hero-copy h1, .hero-solo .hero-lead { margin-left: auto; margin-right: auto; }
.hero-solo .hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.9rem; max-width: none; margin-left: auto; margin-right: auto; text-align: left; }
.hero-solo .hero-actions { justify-content: center; }
.hero-solo .hero-about, .hero-solo .hero-why, .hero-solo .hero-photo2, .hero-solo .hero-values { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Homepage "Two ways to start" band: real calculator + educational lead form,
   side by side. Balanced, no dead space; stacks on mobile. */
/* HARD RULE (Brian 2026-07-04): balance + integrity on every page — the two
   band columns must END at the same height, never leaving a dark gap. Grid
   children stretch; each column is a flex column whose last card absorbs any
   height difference (charts pin to the bottom, edu card grows). */
.getstarted-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: stretch; margin-top: 2rem; text-align: left; }
.getstarted-duo > * { display: flex; flex-direction: column; }
.gs-lead .goal-card, .gs-lead form.lead-form { margin-bottom: 1.25rem; }
.gs-edu { display: flex; flex-direction: column; }
.gs-edu .card-link { margin-top: auto; }
@media (min-width: 901px) {
  .gs-edu { flex: 1 1 auto; }
  .gs-lead .trend-card { margin-top: auto; }
  .gs-calc #calc-root { flex: 1 1 auto; }
}
.gs-col { background: #fff; border: 1px solid var(--border, #e6e9ef); border-radius: 18px; padding: 1.6rem 1.6rem 1.75rem; box-shadow: 0 20px 48px -32px rgba(13,33,55,.5); }
.gs-col-head { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.25rem; }
.gs-col-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--navy, #0d2137); color: #fff; }
.gs-col-icon .icon { width: 22px; height: 22px; }
.gs-col-text h3 { margin: 0; font-size: 1.12rem; }
.gs-col-text p { margin: .2rem 0 0; color: var(--muted, #5a6572); font-size: .9rem; line-height: 1.45; }
.gs-lead .lead-form { margin: 0; }
.gs-calc #calc-root { margin: 0; }
/* When the header "Your State" picker jumps to the calculator, land on the
   "See your numbers" heading just below the sticky header (~132px) — not the
   middle of the inputs (Brian 2026-07-17). */
.gs-calc { scroll-margin-top: 148px; }
/* Homepage calculator (Brian 2026-07-23): ONE card, TWO panes — inputs on the
   left, the live estimate on the right — so it reads as a single tool and the
   answer sits beside the fields you filled. The educational cards go in a
   balanced wrap-row BELOW, and the guidance card is full-width under that. No
   column is ever left blank, and nothing gets stretched into an empty box. */
.hero .calc-panel { color: var(--ink, #16232f); }
.calc-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  background: #fff;
  border: 1px solid var(--border, #e6e9ef);
  border-radius: 18px;
  box-shadow: 0 30px 70px -38px rgba(0,0,0,.75);
  overflow: hidden;
}
.calc-pane { padding: 1.6rem; min-width: 0; }
.calc-pane-results { background: #f6f9fc; border-left: 1px solid var(--border, #e6e9ef); }
/* Gold arrow chip on the results header = "your answer is right here". */
.calc-results-icon { background: var(--green) !important; color: #fff !important; }
/* Educational cards below: even columns that wrap, and EQUAL height so no dark
   hero background shows below a shorter card (Brian 2026-07-23). Footer notes pin
   to the bottom so each card fills its height instead of leaving a blank gap. */
.gs-below-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1.5rem; margin-top: 1.6rem; align-items: stretch;
}
.gs-below-row > .gs-col { display: flex; flex-direction: column; }
.gs-chart .trend-card { margin-top: auto; }
.gs-chart .trend-canvas { height: 178px; }
.gs-piti .piti-total, .gs-limits .gs-limits-fine { margin-top: auto; padding-top: .6rem; }
.gs-lead-full { margin-top: 1.6rem; }
@media (max-width: 860px) {
  .calc-panel { grid-template-columns: 1fr; }
  .calc-pane-results { border-left: 0; border-top: 1px solid var(--border, #e6e9ef); }
}
/* PITI breakdown graphic (illustrative, labeled) */
.piti-bar { width: 100%; height: 18px; border-radius: 9px; display: block; }
.piti-legend { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.piti-legend li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; }
.piti-legend li strong { margin-left: auto; }
.piti-dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.piti-total { margin: .9rem 0 0; font-size: .82rem; color: var(--muted, #5a6572); line-height: 1.5; }
/* 2026 loan-limits facts card */
.gs-limits .snap-facts { list-style: none; margin: 0; padding: 0; }
.gs-limits .snap-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border, #e6e9ef); font-size: .95rem; }
.gs-limits .snap-facts li:last-child { border-bottom: 0; }
.gs-limits-fine { margin: .7rem 0 0; font-size: .82rem; color: var(--muted, #5a6572); line-height: 1.5; }

/* Topic-aware goal card — the Better-style "first box" that gates the
   educational form. Icon row + label + checkbox; Next disabled until a pick. */
.goal-card h3 { text-align: center; margin: 0 0 .3rem; font-size: 1.3rem; }
.goal-sub { text-align: center; color: var(--muted, #5a6572); font-size: .9rem; margin: 0 0 1.15rem; }
.goal-opt { display: flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid #d9dee6; border-radius: 12px; padding: .9rem 1rem; margin-bottom: .7rem; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.goal-opt:hover { border-color: var(--navy, #0d2137); }
.goal-opt.is-checked { border-color: var(--navy, #0d2137); box-shadow: 0 0 0 2px rgba(13,33,55,.14); }
.goal-opt-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: rgba(13,33,55,.06); color: var(--navy, #0d2137); display: grid; place-items: center; }
.goal-opt-icon .icon { width: 20px; height: 20px; }
.goal-opt-text { flex: 1 1 auto; }
/* Explicit ink color: inside the dark hero the label would otherwise inherit
   the hero's white text and vanish on the white card. */
.goal-opt-text strong { display: block; font-size: .98rem; color: var(--ink, #16232f); }
.goal-opt-text span { display: block; color: var(--muted, #5a6572); font-size: .8rem; line-height: 1.35; }
.goal-opt input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--navy, #0d2137); margin-left: .35rem; }
.goal-continue { display: block; width: 100%; margin-top: .9rem; padding: .95rem 1rem; border: 0; border-radius: 12px; background: var(--navy, #0d2137); color: #fff; font-family: var(--font-head); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: filter .15s ease; }
.goal-continue:disabled { opacity: .45; cursor: not-allowed; }
.goal-continue:not(:disabled):hover { filter: brightness(1.25); }

/* City goal band: local snapshot beside the goal flow (balanced, no rails) */
/* Equal columns (Brian 2026-08-19, "balanced layout" hard rule): the city
   snapshot card and the quiz card must be the SAME size, not 1fr / 1.1fr. */
.goalband-duo { grid-template-columns: 1fr 1fr; }
/* Zero the edu card's 20px top margin inside the goal band so its top aligns
   with the quiz card and both fill to the SAME height (Brian 2026-08-19). */
.goalband-duo .gs-edu { margin-top: 0; }
.goalband-duo .rail-snapshot { max-width: none; margin: 0; flex: 0 0 auto; }
@media (max-width: 900px) { .goalband-duo { grid-template-columns: 1fr; } }

/* Navy "About HomeWise" panel — the hero_about block relocated BELOW the
   goal band (2026-07-04: cards + city data moved close to the top). Reuses
   .hero dark styling; slimmer padding than a full hero. */
.hero--panel .container { padding-top: 2.5rem; padding-bottom: 3rem; }

/* Slim city trust strip (replaces the full About block on city pages) */
.city-trust { justify-content: center; max-width: none; margin: 0 auto; }
.city-trust-link { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--green); border: 1px solid rgba(0,178,76,.5); border-radius: 999px; padding: .4rem .85rem; text-decoration: none; }
.city-trust-link:hover { background: rgba(0,178,76,.12); color: var(--green); }

/* Dark gunmetal trend charts (approved 2026-07-02 design, professionalized) */
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 0 auto 1.9rem; text-align: left; }
@media (max-width: 900px) { .trend-grid { grid-template-columns: 1fr; } }
.trend-card { background: linear-gradient(160deg, #152f52 0%, #0d2039 58%, #0a192e 100%); border-radius: 18px; padding: 1.4rem 1.5rem 1.15rem; box-shadow: 0 30px 70px -46px rgba(0,0,0,.65); text-align: left; }
.trend-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .3rem; }
.trend-head h3 { color: #fff; margin: 0; font-size: 1.05rem; }
.trend-rng { margin-left: auto; color: rgba(255,255,255,.55); font-size: .78rem; }
.trend-card .ranges { display: flex; gap: 6px; margin: .4rem 0 .5rem; }
.trend-card .ranges button { font: inherit; font-size: .75rem; font-weight: 700; padding: .24rem .6rem; border-radius: 7px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); cursor: pointer; }
.trend-card .ranges button[aria-pressed="true"] { background: #fff; color: var(--navy, #0d2137); border-color: #fff; }
.trend-wrap { position: relative; }
.trend-canvas { width: 100%; height: 230px; display: block; }
.trend-tip { position: absolute; background: #fff; color: var(--navy, #0d2137); font-size: .75rem; font-weight: 700; padding: .3rem .55rem; border-radius: 8px; pointer-events: none; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); white-space: nowrap; z-index: 2; }
.graph-note { display: flex; gap: 10px; align-items: flex-start; margin-top: .85rem; color: rgba(255,255,255,.6); font-size: .78rem; line-height: 1.45; }
.graph-note-i { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .8rem; color: rgba(255,255,255,.82); }

/* Goal band INSIDE the dark city hero — cards at the very top for fast
   visibility + interaction. White cards on navy; compact headline above. */
/* Thin single-line city headline so the cards clear the fold (Brian 2026-07-04) */
.hero--city .container { padding-top: 2.5rem; padding-bottom: 3rem; }
.hero--city .badge { margin-bottom: .8rem; }
.hero--city h1 { max-width: none; font-size: clamp(1.5rem, 3vw, 2.35rem); margin-bottom: .3rem; }
.hero--city h1 .accent { display: inline; }
/* Two-column city hero (Brian 2026-07-21): headline/intro left, Local Snapshot
   card right. Flag + county + median + tax rate level with the H1 is the page's
   strongest trust signal, and it balances the hero instead of a lone centred
   column. 1.35fr/1fr keeps the copy dominant so the card reads as support, not
   as the headline. Stacks below 900px, matching .getstarted-duo's breakpoint. */
.city-hero-duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; align-items: start; text-align: left; }
.city-hero-duo .city-hero-main { text-align: left; }
/* Undo the centred .hero-solo defaults now that the copy is a real column. */
.city-hero-duo .city-hero-main h1,
.city-hero-duo .city-hero-main .hero-lead { margin-left: 0; margin-right: 0; max-width: 34ch; }
.city-hero-duo .hero-actions { justify-content: flex-start; }
.city-hero-aside { min-width: 0; }
/* The snapshot card is a rail component elsewhere; unconstrain it here so it
   fills its hero column rather than staying at its narrow rail width. */
.city-hero-aside .rail-snapshot { max-width: none; margin: 0; width: 100%; }
/* The hero sets color:#fff for copy on the navy background. The snapshot card is
   WHITE, so anything inheriting that turns invisible — the Population / Median
   home value / Property tax rows rendered white-on-white when this card moved
   into the hero. Same class of fix as the existing `.hero .gs-col` rule, which
   only covered .gs-col cards. Force ink on the card and its data rows. */
.hero .rail-snapshot,
.hero .rail-snapshot dt,
.hero .rail-snapshot dd,
.hero .rail-snapshot li,
.hero .rail-snapshot p { color: var(--ink, #16232f); }
.hero .rail-snapshot .snap-label,
.hero .rail-snapshot .snap-county,
.hero .rail-snapshot .snap-note { color: var(--muted, #5b6573); }
@media (max-width: 900px) {
  .city-hero-duo { grid-template-columns: 1fr; gap: 1.5rem; }
  .city-hero-duo .city-hero-main h1,
  .city-hero-duo .city-hero-main .hero-lead { max-width: none; }
}

.getstarted--hero { margin-top: 1.5rem; text-align: left; }
/* Cards inside the dark hero: default to ink so form/calc labels never
   inherit the hero's white text on a white card. */
.hero .gs-col { color: var(--ink, #16232f); }
/* Compact rate chart tucked under the goal card — spacing comes from the
   goal card/form margin-bottom; desktop pins the chart to the card bottom
   (margin-top:auto in the 901px block above) so columns end flush. */

/* Picture/data/edu card under the city snapshot (left-column fill, no gap) */
.gs-edu { margin-top: 1.25rem; }
.gs-edu-photo { height: 120px; border-radius: 12px; background-size: cover; background-position: center; position: relative; overflow: hidden; margin-bottom: 1rem; }
.gs-edu-photo span { position: absolute; left: .75rem; bottom: .5rem; color: #fff; font-family: var(--font-head); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.75); }
.gs-edu h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.gs-edu-facts { margin: 0 0 .7rem; }
.gs-edu-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--border, #e6e9ef); }
.gs-edu-facts dt { color: var(--muted, #5a6572); font-size: .85rem; }
.gs-edu-facts dd { margin: 0; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.gs-edu-note { color: var(--muted, #5a6572); font-size: .8rem; line-height: 1.5; margin: 0 0 .8rem; }
.gs-edu-local { color: var(--ink, #1f2937); font-size: .85rem; line-height: 1.55; margin: 0 0 .6rem; }
.gs-edu-local strong { color: var(--navy, #0D2137); }
.getstarted--hero .gs-col { box-shadow: 0 30px 70px -38px rgba(0,0,0,.75); }
.getstarted--hero .rail-snapshot { box-shadow: 0 30px 70px -38px rgba(0,0,0,.75); }
.hero .getstarted--hero + .hero-solo .hero-copy { margin-top: 2.5rem; }
/* Tighten the city hero headline block so the cards clear the fold */
.hero-copy .byline { margin-bottom: 0; }
@media (max-width: 820px) {
  .hero-about, .hero-why, .hero-photo2, .hero-values { max-width: none; }
  .hero-about { margin-top: 1.5rem; }
  .hero-about-media { height: 175px; }
  .hero-photo2-img { height: 190px; }
  .hw-benefits { grid-template-columns: 1fr; }
}

/* ---------- Calculator CTA band (home) ---------- */
.calc-cta-band { padding: 2.25rem 0; background: var(--bg-alt); }
.calc-cta-hero {
  position: relative; z-index: 1; margin: 0 0 2rem;
  background:
    radial-gradient(700px 220px at 88% -40%, rgba(24,119,224,.22), transparent 60%),
    linear-gradient(135deg, rgba(26,51,82,.92), rgba(13,33,55,.92));
  backdrop-filter: blur(2px);
}
.calc-cta {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.6rem 1.9rem; border-radius: 18px;
  background:
    radial-gradient(700px 220px at 88% -40%, rgba(24,119,224,.18), transparent 60%),
    linear-gradient(135deg, var(--navy-dark), var(--navy) 58%, var(--navy-light));
  border: 1px solid rgba(24,119,224,.28);
  box-shadow: 0 18px 44px rgba(8,20,34,.22);
  color: #fff; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.calc-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 56px rgba(8,20,34,.32);
  border-color: rgba(24,119,224,.55);
  color: #fff; text-decoration: none;
}
.calc-cta-icon {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(24,119,224,.14); border: 1px solid rgba(24,119,224,.4);
  color: var(--blue);
}
.calc-cta-icon .icon { width: 28px; height: 28px; }
.calc-cta-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.calc-cta-eyebrow {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .15em;
  font-size: .72rem; color: var(--blue); font-weight: 700;
}
.calc-cta-title {
  font-family: var(--font-head); font-weight: 700; font-size: 1.35rem;
  line-height: 1.2; color: #fff;
}
.calc-cta-sub { color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.45; }
.calc-cta-action {
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  background: var(--green); color: #fff; font-weight: 700;
  font-family: var(--font-head); letter-spacing: .02em;
  padding: .8rem 1.4rem; border-radius: 999px;
  transition: background .18s ease;
}
.calc-cta:hover .calc-cta-action { background: var(--green-d); }
@media (max-width: 760px) {
  .calc-cta { flex-direction: column; align-items: flex-start; text-align: left; gap: 1.1rem; padding: 1.5rem; }
  .calc-cta-action { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
.section-alt { background: var(--bg-alt); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy h2 { color: #fff; }
.section-head { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .15em; font-size: .8rem; color: var(--green);
  background: rgba(0,178,76,.1); padding: .35rem .85rem; border-radius: 999px; margin-bottom: .9rem;
}
.section-navy .eyebrow { color: var(--green); background: rgba(0,178,76,.15); }
.section-sub { color: var(--muted); font-size: 1.1rem; }
.section-navy .section-sub { color: rgba(255,255,255,.75); }

/* ---------- Grid + Cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-top { padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.card-top .icon { width: 26px; height: 26px; color: #fff; }
.card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.card-title { color: var(--navy); margin-bottom: .4rem; }
.card-text { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
.card-link { margin-top: auto; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--blue); display: inline-flex; align-items: center; gap: .35rem; }
.card-link:hover { gap: .6rem; text-decoration: none; }

/* feature with icon circle */
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature-icon { width: 48px; height: 48px; border-radius: 999px; background: var(--navy); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.feature-icon .icon { width: 22px; height: 22px; }
.feature h3 { margin-bottom: .15rem; }
.feature p { color: var(--muted); font-size: .95rem; margin: 0; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat-number { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; color: var(--green); line-height: 1; }
.stat-label { color: rgba(255,255,255,.75); font-size: .85rem; margin-top: .35rem; }

/* ---------- Article / guide pages ---------- */
.breadcrumb { font-size: .85rem; color: var(--muted); padding: 1rem 0 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.page-hero { background: var(--navy); color: #fff; padding: 3rem 0; }
.page-hero h1 { color: #fff; margin: 0; }
.page-hero .eyebrow { color: var(--blue); background: rgba(24,119,224,.15); }
.article { max-width: 760px; margin: 0 auto; }
.article h2 { margin-top: 2.25rem; font-size: 1.6rem; }
.article h3 { margin-top: 1.5rem; color: var(--navy); }
.article p, .article li { font-size: 1.05rem; }
.article ul { padding-left: 1.25rem; }
.article li { margin-bottom: .4rem; }
.callout {
  background: rgba(0,178,76,.07); border-left: 4px solid var(--green);
  padding: 1rem 1.25rem; border-radius: 6px; margin: 1.5rem 0; font-size: .95rem; color: var(--muted);
}
.toc { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.toc h2 { font-size: 1rem; margin: 0 0 .6rem; }
.toc ul { margin: 0; padding-left: 1.1rem; }
.toc a { color: var(--navy); }

/* related guides */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.related-card strong { color: var(--navy); font-family: var(--font-head); display: block; margin-bottom: .25rem; }
.related-card span { color: var(--muted); font-size: .85rem; }

/* ---------- Free-booklet picker (checkbox-style links to each booklet page) ---------- */
.booklet-picker { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); border-top: 4px solid var(--green); padding: 1.75rem; color: var(--ink); }
.booklet-picker .lead-form-title { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.4rem; line-height: 1.1; margin: 0 0 .25rem; }
.booklet-picker .muted { font-size: .92rem; margin-bottom: 1rem; }
.booklet-pick-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.booklet-pick { display: flex; align-items: center; gap: .75rem; border: 2px solid var(--line); border-radius: 8px; padding: .7rem .85rem; color: var(--navy); transition: border-color .15s, background .15s, transform .15s; }
.booklet-pick:hover { border-color: var(--green); background: rgba(0,178,76,.05); text-decoration: none; transform: translateX(2px); }
.booklet-pick:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.booklet-pick-box { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 5px; position: relative; transition: background .15s, border-color .15s; }
.booklet-pick-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .15s; }
.booklet-pick:hover .booklet-pick-box, .booklet-pick:focus-visible .booklet-pick-box { background: var(--green); border-color: var(--green); }
.booklet-pick:hover .booklet-pick-box::after, .booklet-pick:focus-visible .booklet-pick-box::after { transform: rotate(45deg) scale(1); }
.booklet-pick-text { flex: 1 1 auto; min-width: 0; }
.booklet-pick-title { display: block; font-family: var(--font-head); font-weight: 600; font-size: .98rem; color: var(--navy); }
.booklet-pick-blurb { display: block; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.booklet-pick-arrow { flex: 0 0 auto; color: var(--green); display: inline-flex; }
.booklet-pick-arrow .icon { width: 18px; height: 18px; }
.booklet-picker-wrap { max-width: 640px; margin: 0 auto; }
.booklet-picker-compact { box-shadow: var(--shadow-md); }
.booklet-picker-compact .booklet-pick-blurb { display: none; }

/* booklet page "what's inside" check list */
.check-list { list-style: none; padding-left: 0; margin: .5rem 0 0; display: grid; gap: .55rem; }
.check-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: 1.05rem; }
.check-list .icon { color: var(--green); width: 20px; height: 20px; flex: 0 0 auto; margin-top: .2rem; }

/* ---------- Booklet page: balanced 2-col layout (kills dead whitespace) ---------- */
.booklet-layout { grid-template-columns: 1.5fr 1fr; gap: 2.5rem; }
.booklet-sidebar { position: sticky; top: 120px; align-self: start; display: grid; gap: 1rem; }
.hero-calc-btn { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.15rem;
  background: var(--green); color: #fff; font-family: var(--font-head); font-weight: 700;
  padding: .7rem 1.2rem; border-radius: .55rem; }
.hero-calc-btn:hover { background: var(--green-d); color: #fff; text-decoration: none; }
.card-link-navy { color: var(--navy); }
.loan-facts { border: 1px solid var(--line); border-radius: .7rem; padding: 1.15rem 1.25rem; background: #fff; box-shadow: var(--shadow-sm); }
.loan-facts h3 { margin: 0 0 .7rem; color: var(--navy); font-size: 1rem; }
.loan-facts ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.loan-facts li { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; color: var(--ink); line-height: 1.4; }
.loan-facts li .icon { color: var(--blue); width: 18px; height: 18px; flex: 0 0 auto; margin-top: .12rem; }
.loan-facts-note { margin: .85rem 0 0; font-size: .8rem; color: var(--muted); }
@media (max-width: 860px) { .booklet-layout { grid-template-columns: 1fr; } .booklet-sidebar { position: static; } }

/* Booklet calculator: balance inputs|results columns; form as full-width side-by-side band below */
#booklet-calc .calc-grid { align-items: start; }
.calc-form-below { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; margin-top: 2rem; }
.calc-form-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; min-height: 440px; background-color: var(--navy); background-size: cover; background-position: center; color: #fff; border-radius: .8rem; padding: 2.35rem 2.2rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.calc-aside-eyebrow { display: inline-block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--blue); margin-bottom: .55rem; }
.calc-form-aside h3 { color: #fff; margin: 0 0 1.15rem; font-size: 1.45rem; line-height: 1.22; }
.calc-aside-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.calc-aside-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .97rem; line-height: 1.45; color: #fff; }
.calc-aside-list li .icon { color: var(--blue); width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; }
.calc-aside-promise { margin: 0; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.9); border-top: 1px solid rgba(255,255,255,.22); padding-top: 1.15rem; }
.calc-form-below .calc-lead { margin: 0; }
@media (max-width: 780px) { .calc-form-below { grid-template-columns: 1fr; } }

/* ---------- City-topic pilot: balanced image+content bands (competitor-tier, no dead space) ---------- */
.ct-band { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; }
.ct-band.ct-band-text-first { grid-template-columns: 1fr 1fr; }
.ct-photo { margin: 0; border-radius: .8rem; min-height: 340px; background-size: cover; background-position: center; background-color: var(--bg-alt); box-shadow: var(--shadow-sm); }
.ct-band-body { display: flex; flex-direction: column; justify-content: center; }
.ct-band-body .eyebrow { margin-bottom: .4rem; }
.ct-band-body h2 { margin: 0 0 .8rem; }
.ct-band-body p { margin: 0 0 .8rem; }
.program-compare-wrap { margin-top: 2rem; }
@media (max-width: 820px) { .ct-band { grid-template-columns: 1fr; } .ct-photo { min-height: 220px; order: -1; } }

/* Booklet topic section: real sourced content + a FIXED-ASPECT topic image (never stretched) */
.booklet-topic .bt-band { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-bottom: 2rem; }
.bt-media { margin: 0; aspect-ratio: 4 / 3; border-radius: .8rem; background-size: cover; background-position: center; box-shadow: var(--shadow-sm); background-color: var(--bg-alt); }
.bt-intro { font-size: 1.12rem; line-height: 1.65; color: var(--ink); margin: 0; }
.bt-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; margin-bottom: 1.4rem; }
.bt-point h3 { margin: 0 0 .35rem; color: var(--navy); font-size: 1.06rem; }
.bt-point p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.bt-sources { font-size: .82rem; color: var(--muted); margin: 0; }
.bt-sources a { color: var(--navy); text-decoration: underline; }
@media (max-width: 820px) { .booklet-topic .bt-band { grid-template-columns: 1fr; } .bt-points { grid-template-columns: 1fr; } .bt-media { aspect-ratio: 16 / 9; } }

/* Center page-hero content so there's no empty side (Brian's center-everything rule) */
.page-hero .container { text-align: center; }
.page-hero .breadcrumb, .page-hero .byline, .page-hero .cti-hero-cta, .page-hero .hero-actions { justify-content: center; }
.page-hero.page-hero--tight { padding-top: 1.75rem; padding-bottom: 2rem; }
.hero-cta-solid { color: #fff; font-size: 1.05rem; padding: .95rem 1.75rem; text-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 12px 28px -10px rgba(0,0,0,.55); }
.hero-cta-solid:hover { color: #fff; }

/* Two balanced hero buttons (same size): VA Calculator + Free VA Booklet */
.hero-btn-row { display: inline-flex; gap: 1rem; margin-top: 1.35rem; flex-wrap: wrap; justify-content: center; }
.hero-btn2 { display: inline-flex; align-items: center; justify-content: center; min-width: 205px; padding: .95rem 1.5rem;
  border-radius: .6rem; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: .95rem; transition: background .15s, color .15s, border-color .15s; }
.hero-btn2-gold { background: var(--green); color: #fff; box-shadow: 0 12px 26px -12px rgba(0,0,0,.55); }
.hero-btn2-gold:hover { background: var(--green-d); color: #fff; text-decoration: none; }
.hero-btn2-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); }
.hero-btn2-outline:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
@media (max-width: 480px) { .hero-btn2 { min-width: 0; width: 100%; } }

/* Booklet: tighten the gap between the article block and the calculator (Brian) */
.booklet-article-sec { padding-bottom: 1.4rem; }
.booklet-calc-sec { padding-top: 1.6rem; }

/* ---------- Brand slogan under logo (fintech) + focus-header ticker parity ---------- */
.focus-brand { display: inline-flex; flex-direction: column; gap: .32rem; align-items: center; text-align: center; }
.brand-slogan { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; line-height: 1; color: rgba(255,255,255,.74); margin-top: -26px; }
@media (max-width: 700px) { .brand-slogan { margin-top: -18px; } }
.brand-slogan .bs-word { white-space: nowrap; }
.brand-slogan .bs-sep { color: var(--green); font-size: .7rem; }
.site-header--focus .rate-ticker { border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-brand { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; }

@media (max-width: 700px) { .nav-brand .brand-slogan { display: none; } }

/* ---------- FAQ ---------- */
.faq details { border: 1px solid var(--line); border-radius: 8px; margin-bottom: .75rem; background: #fff; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; padding: 1rem 1.25rem; font-family: var(--font-head); color: var(--navy); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding: 0 1.25rem 1.1rem; color: var(--muted); }

/* ---------- Rate table ---------- */
.rate-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.rate-table th, .rate-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.rate-table thead th { background: var(--navy); color: #fff; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }
.rate-table tbody tr:hover { background: var(--bg-alt); }
.rate-table td:last-child { font-weight: 700; color: var(--navy); }

/* ---------- Calculator ---------- */
/* RESULTS UNDERNEATH THE INPUTS (Brian 2026-07-30 stacked rule, reaffirmed
   2026-08-01: "the results go underneath the input data" — never side by side).
   One column: the visitor fills the inputs on top, the estimate flows below.
   Guard: test_calc_results_below.py. (The 2026-07-29 sticky results column was
   a side-by-side artifact and is retired with the layout.) */
.calc-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.calc-out-summary { position: static; }
.result-card--primary { border-top: 4px solid var(--green); box-shadow: 0 18px 44px -22px rgba(0,178,76,.5), var(--shadow-md); }
.result-card--primary .result-row.total .val { font-size: 2.2rem; color: #33d17a; }
@media (max-width: 1024px) { .calc-out-summary { position: static; } }
/* HARD RULE — same layout as the approved homepage calc (locked 2026-07-30,
   reaffirmed 2026-08-01): inputs live in an EVEN 4-column grid, not stretched
   full-width. Wrapper divs (#calc-purchase-fields, #calc-refi-fields,
   #calc-cashout-fields) use display:contents so their fields flow into the
   same grid; #calc-cashout-fields's hidden attribute keeps winning because
   [hidden] is an explicit override. Wide button rows span 2 columns; the VA
   options box + cash-out toggle + summary/note span the whole row.
   Guard: test_calc_controls_grid.py. */
.calc-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem 14px;
  align-items: stretch;
}
.calc-controls .field { margin-bottom: 0; }
.calc-controls .field--span2 { grid-column: span 2; }
.calc-controls .field--full,
.calc-controls .cashout-summary,
.calc-controls .cashout-note { grid-column: 1 / -1; }
.calc-controls #calc-purchase-fields,
.calc-controls #calc-refi-fields,
.calc-controls #calc-cashout-fields { display: contents; }
.calc-controls #calc-cashout-fields[hidden] { display: none; }
/* Subgrid row alignment (same technique as the homepage locked calc): each
   .field becomes a 3-row subgrid (label / control / hint), so every field
   in the same grid row lines up regardless of sublabel-hint length.
   Excludes .field--full (VA options / cash-out toggle box — different
   internal structure). Anything that isn't a label or a .range-hint is
   treated as the control and drops into row 2. */
@supports (grid-template-rows: subgrid) {
  /* Descendant selector, not child: fields inside the display:contents
     wrappers (#calc-purchase-fields / #calc-refi-fields / #calc-cashout-fields)
     are grid items too and must align identically. */
  .calc-controls .field:not(.field--full):not(#calc-va-options) {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    grid-row: span 3;
    row-gap: 0;
  }
  .calc-controls .field:not(.field--full):not(#calc-va-options) > * { grid-row: 2; align-self: stretch; margin-top: 0; }
  .calc-controls .field:not(.field--full):not(#calc-va-options) > label { grid-row: 1; align-self: end; margin: 0 0 .35rem; }
  .calc-controls .field:not(.field--full):not(#calc-va-options) > .range-hint { grid-row: 3; align-self: start; margin-top: .35rem; }
  /* VA options is a boxed multi-control group — block layout inside, but it
     spans the same 3 subgrid rows so its row stays in step with neighbors. */
  .calc-controls #calc-va-options { grid-row: span 3; }
}
/* Narrow embed contexts (blog + booklet pages) get 2 columns instead of 4. */
.blog-article .calc-controls,
#booklet-calc .calc-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* City calc pages — balanced rail+main layout (Brian 2026-08-01, HARD RULE
   11ah). LEFT: the local snapshot as a sticky rail. RIGHT (main): intro,
   calculator (4-col inputs, results below), the live amortization snapshot,
   and the local example — a tall column that fills the width so there is NO
   dead space beside short content and everything reads centered/balanced.
   Guard: test_city_calc_layout.py. */
.calc-city-layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 2.25rem; align-items: start; max-width: 1180px; margin: 0 auto; }
.calc-city-rail { position: sticky; top: 96px; align-self: start; }
.calc-city-main { min-width: 0; }
.calc-city-intro { max-width: none; margin: 0 0 1.5rem; }
.word-flourish { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 1.75em; line-height: 1; color: var(--green); padding-right: .06em; }
.calc-amort { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: var(--radius); padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); margin-top: 1.75rem; }
.calc-amort-title { font-family: var(--font-head); color: var(--navy); margin: 0 0 .35rem; }
/* Button rows stretch across their 2-column span so a short row never reads
   as a large empty gap (Brian 2026-08-01). */
.calc-controls .field--span2 > .seg { display: flex; flex-wrap: nowrap; }
.calc-controls .field--span2 > .seg > button { flex: 1 1 0; }
/* "Did You Know?" educational chip fills the trailing grid cell. */
.calc-fact .calc-fact-body { display: flex; align-items: center; background: var(--bg-alt); border: 1px dashed var(--line); font-size: .84rem; color: var(--muted); line-height: 1.4; min-height: 2.85rem; padding: .5rem .7rem; border-radius: 8px; }
/* Down Payment Assistance CTA under the results (Brian 2026-08-01). */
.calc-dpa { margin-top: 1rem; padding: 1rem 1.25rem; background: #eefaf1; border-left: 4px solid var(--green); border-radius: 6px; text-align: center; }
.calc-dpa .calc-dpa-btn { display: inline-block; text-decoration: none; }
.calc-dpa .calc-dpa-sub { margin: .6rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.4; }
.amort-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: .6rem 0; }
.amort-table th, .amort-table td { padding: .35rem .3rem; text-align: right; border-bottom: 1px solid var(--line); }
.amort-table th:first-child, .amort-table td:first-child { text-align: left; }
.amort-table th { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--navy); }
/* Rail collapses under the main column on narrower screens (snapshot on top). */
@media (max-width: 900px) {
  .calc-city-layout { grid-template-columns: 1fr; }
  .calc-city-rail { position: static; }
}
@media (max-width: 980px) { .calc-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .calc-controls { grid-template-columns: 1fr; } }
.calc-controls label { display: block; font-family: var(--font-head); color: var(--navy); text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; margin-bottom: .35rem; }
.calc-value { font-family: var(--font-head); color: var(--navy); font-size: 1.4rem; }
.calc-controls input[type="range"] { width: 100%; height: 6px; border-radius: 999px; -webkit-appearance: none; appearance: none; background: var(--line); outline-offset: 4px; margin-top: .5rem; }
.calc-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.calc-controls input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 3px solid #fff; cursor: pointer; }
.range-hint { font-size: .8rem; color: var(--muted); margin-top: .35rem; }
.seg { display: flex; gap: .5rem; flex-wrap: wrap; }
.seg button { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; padding: .55rem 1rem; border-radius: 8px; border: 0; background: #eef1f5; color: var(--navy); cursor: pointer; transition: background .15s, color .15s; }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.seg.seg-red button[aria-pressed="true"] { background: var(--green); color: #fff; }

/* VA-specific calculator options */
#calc-va-options { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.va-sub { margin-top: .85rem; }
.va-exempt-label {
  display: flex !important; align-items: flex-start; gap: .55rem; margin: .85rem 0 0;
  font-family: var(--font-body) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-weight: 400 !important;
  font-size: .85rem !important; color: var(--muted) !important; cursor: pointer; line-height: 1.4;
}
.va-exempt-label input { width: auto; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--green); }

/* State select */
.calc-select {
  width: 100%; margin-top: .35rem; padding: .6rem .7rem; font: inherit;
  border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.calc-select:focus { border-color: var(--navy); outline: none; }

/* Calculator lead capture (personalized breakdown booklet) */
.calc-lead { margin-top: 1.25rem; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--radius); background: #fff; padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.calc-lead-toggle { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; font-size: .9rem; color: var(--ink); line-height: 1.45; }
.calc-lead-toggle input { width: auto; margin-top: .2rem; flex: 0 0 auto; accent-color: var(--green); }
.calc-lead-toggle strong { color: var(--navy); }
.calc-lead-form { margin-top: 1rem; }
/* Keep the multi-step capture form a comfortable, CENTERED column — never stretched
   full-width across the (now full-width) results panel, so the email/phone fields
   aren't elongated (Brian 2026-07-30). */
.calc-lead-steps { max-width: 480px; margin-left: auto; margin-right: auto; position: relative; }
.calc-lead-form label { display: block; font-size: .82rem; font-weight: 700; color: var(--navy); margin-bottom: .75rem; }
.calc-lead-form input { display: block; width: 100%; margin-top: .3rem; padding: .6rem .8rem; font: inherit; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.calc-lead-form input:focus { border-color: var(--navy); outline: none; }
.calc-lead-submit { display: block; width: fit-content; margin: 1.2rem auto .25rem; }
.calc-lead-thanks { margin-top: 1rem; text-align: center; }
.calc-lead-thanks p { margin: 0; font-size: .92rem; }

/* Calculator disclaimer */
.calc-disclaimer { margin-top: 1.1rem; font-size: .78rem; color: var(--muted); line-height: 1.6; border-top: 1px solid var(--line); padding-top: .9rem; }

/* Cash-out refinance fields */
.calc-cashout-toggle { background: rgba(24,119,224,.07); border: 1px solid rgba(24,119,224,.32); border-radius: 10px; padding: .9rem 1rem; margin-top: .3rem !important; }
.calc-cashout-label { display: flex !important; align-items: flex-start; gap: .7rem; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-size: .92rem !important; color: var(--ink) !important; font-family: var(--font-body) !important; line-height: 1.5; }
.calc-cashout-label input[type="checkbox"] { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; flex: 0 0 auto; }
.calc-cashout-label strong { color: var(--navy); }
#calc-cashout-fields { padding: 1rem 1.1rem 1.1rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px; margin-top: -.4rem; }
#calc-cashout-fields .field:last-of-type { margin-bottom: .8rem; }
.cashout-summary { display: flex; justify-content: space-between; align-items: center; background: var(--navy); color: #fff; border-radius: 8px; padding: .75rem 1rem; margin-top: .2rem; }
.cashout-summary .label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: rgba(255,255,255,.85); }
.cashout-summary .val { font-family: var(--font-head); font-weight: 700; color: var(--green); font-size: 1.25rem; }
.cashout-note { display: none; margin: .65rem 0 0; font-size: .8rem; color: var(--red); line-height: 1.5; }

.result-card { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-md); margin-bottom: 1rem; }
.result-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 1rem; }
.result-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.result-row:last-child { border-bottom: 0; }
.result-row .label { color: rgba(255,255,255,.8); font-size: .92rem; }
.result-row .val { font-family: var(--font-head); font-size: 1.2rem; }
.result-row.total .val { color: var(--green); font-size: 1.9rem; }
.result-card.light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.result-card.light h3 { color: var(--navy); }
.result-card.light .result-row { border-color: var(--line); }
.result-card.light .label { color: var(--muted); }
.result-card.light .val { color: var(--navy); }

/* ---------- City directory ---------- */
.state-block { margin-bottom: 2rem; }
.state-block h2 { font-size: 1.3rem; border-bottom: 2px solid var(--blue); padding-bottom: .4rem; margin-bottom: 1rem; }
.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem 1.25rem; }
/* /cities/ rich data cards (2-col: 10 cities = 5 even rows, no lone card) */
.cities-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 820px) { .cities-card-grid { grid-template-columns: 1fr; } }
.city-card { display: block; background: #fff; border: 1px solid var(--border, #e6e9ef); border-radius: 16px; padding: 1.35rem 1.4rem 1.25rem; box-shadow: 0 18px 40px -30px rgba(13,33,55,.45); color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.city-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 24px 48px -26px rgba(13,33,55,.55); }
.city-card-head { display: flex; gap: .85rem; align-items: center; margin-bottom: .7rem; }
.city-card-head img { height: 34px; width: auto; border-radius: 4px; flex: 0 0 auto; }
.city-card-head strong { display: block; font-size: 1.15rem; color: var(--navy, #0d2137); }
.city-card-head span { color: var(--muted, #5a6572); font-size: .84rem; }
.city-card .snap-facts { margin: 0; }
.city-card-hoods { color: var(--muted, #5a6572); font-size: .8rem; margin: .65rem 0 .7rem; }
.city-card .card-link { font-size: .85rem; }
.city-grid a { color: var(--navy); font-size: .95rem; padding: .2rem 0; display: inline-flex; align-items: center; gap: .35rem; }
.city-grid a:hover { color: var(--blue); text-decoration: none; }
.search-box { width: 100%; max-width: 460px; margin: 0 auto 2rem; display: block; padding: .85rem 1.1rem; border: 2px solid var(--line); border-radius: 8px; font-size: 1rem; font-family: var(--font-body); }
.search-box:focus { border-color: var(--navy); outline: none; }

/* nearby cities chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem; font-size: .88rem; color: var(--navy); box-shadow: var(--shadow-sm); }
.chip:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,.7); padding: 3.5rem 0 0; font-size: .92rem; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer-col h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; font-family: var(--font-head); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a { color: rgba(255,255,255,.7); }
.footer-col a:hover { color: var(--green); text-decoration: none; }
.footer-logo { display: inline-flex; align-items: center; gap: .55rem; }
.footer-logo:hover { text-decoration: none; }
.footer-emblem { display: inline-flex; align-items: center; }
.footer-emblem .emblem-wordmark { height: 56px; width: auto; }
.footer-brand .logo-name { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.5rem; line-height: 1; }
.footer-brand .logo-name .lt-home { color: #fff; }
.footer-brand .logo-name .lt-wise { color: var(--green); }
.footer-slogan { color: var(--green); font-family: var(--font-head); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; margin: 1rem 0 0 !important; }
.footer-about { margin-top: .8rem; max-width: 40ch; line-height: 1.6; }
.footer-contact { margin-top: .9rem; }
.footer-contact a { color: var(--green); font-weight: 600; }

/* Structured legal disclaimers */
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.75rem; padding-top: 1.75rem; }
.footer-legal-head {
  color: rgba(255,255,255,.92); font-family: var(--font-head); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.4rem;
}
.footer-disclaimers {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem;
}
.footer-colophon {
  margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .72rem; color: rgba(255,255,255,.42); line-height: 1.65;
}
.footer-disc-label {
  display: inline-flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.92); font-family: var(--font-head); font-weight: 700;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem;
}
.footer-disc p { font-size: .76rem; color: rgba(255,255,255,.5); line-height: 1.65; margin: 0; }
.footer-eho-icon { color: var(--green); display: inline-grid; place-items: center; }
.footer-eho-icon .icon { width: 15px; height: 15px; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 1.75rem; padding: 1.25rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-size: .8rem; color: rgba(255,255,255,.55); }
.footer-bottom a { color: rgba(255,255,255,.7); }
.footer-bottom a:hover { color: var(--green); text-decoration: none; }
@media (max-width: 760px) {
  .footer-disclaimers { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Lead / booklet form ---------- */
.lead-form { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); border-top: 4px solid var(--green); padding: 1.75rem; color: var(--ink); }
.lead-form h3, .lead-form-title { font-size: 1.4rem; margin-bottom: .25rem; }
.lead-form-title { font-family: var(--font-head); font-weight: 600; color: var(--navy); line-height: 1.1; }
.lead-form .muted { font-size: .92rem; margin-bottom: 1rem; }
.loan-options { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.loan-card { display: block; cursor: pointer; }
.loan-card input { position: absolute; opacity: 0; pointer-events: none; }
.loan-card-inner { display: block; border: 2px solid var(--line); border-radius: 8px; padding: .65rem .85rem; transition: border-color .15s, background .15s; }
.loan-card:hover .loan-card-inner { border-color: var(--blue); }
.loan-card input:checked + .loan-card-inner { border-color: var(--green); background: rgba(0,178,76,.05); }
.loan-card input:focus-visible + .loan-card-inner { outline: 3px solid var(--blue); outline-offset: 2px; }
.loan-card-title { display: block; font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: .98rem; }
.loan-card-blurb { display: block; font-size: .82rem; color: var(--muted); }
.lead-form label { display: block; font-size: .82rem; font-weight: 700; color: var(--navy); margin-bottom: .75rem; }
.lead-form input[type=text], .lead-form input[type=email], .lead-form input[type=tel] {
  display: block; width: 100%; margin-top: .3rem; padding: .65rem .8rem; font: inherit;
  border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.lead-form input:focus { border-color: var(--navy); outline: none; }
.lead-form input:focus-visible, .calc-lead-form input:focus-visible, .calc-select:focus-visible, .search-box:focus-visible, .calc-controls input[type="range"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-status { min-height: 1.2em; font-size: .85rem; margin-bottom: .5rem; }
.form-status.err { color: var(--red); font-weight: 700; }
.form-status.ok { color: #1a7f37; font-weight: 700; }
.form-fineprint { font-size: .72rem; color: var(--muted); margin: .75rem 0 0; }
.optin-label {
  display: flex !important; align-items: flex-start; gap: .55rem; cursor: pointer;
  font-size: .76rem !important; font-weight: 400 !important; color: var(--muted) !important;
  line-height: 1.45; margin: .25rem 0 .9rem !important;
}
.optin-label input { width: auto !important; margin: .15rem 0 0 !important; flex: 0 0 auto; accent-color: var(--green); }
.optin-label span { display: block; }

/* Phone "upgrade to full guide" box — bright maroon accent. */
.phone-upgrade {
  margin: .25rem 0 1rem; padding: .9rem 1rem .8rem;
  border: 1px solid #e4b9c4; border-left: 4px solid #a01b3a;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdf4f6 0%, #faeef1 100%);
}
.phone-upgrade .phone-upgrade-q {
  display: block; color: #7b1530 !important; font-weight: 700;
  font-size: .9rem; margin-bottom: .6rem;
}
.phone-upgrade label { margin-bottom: .4rem; }
.phone-upgrade-note {
  font-size: .76rem; color: var(--muted); margin: .4rem 0 0; line-height: 1.45;
}
.phone-upgrade-note strong { color: #7b1530; }
.booklet-thanks { text-align: center; padding: 1rem .5rem; }
.thanks-check { width: 56px; height: 56px; border-radius: 999px; background: #e8f5ec; color: #1a7f37; font-size: 1.8rem; display: grid; place-items: center; margin: 0 auto 1rem; }

/* ---------- Animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.reveal { animation: fadeUp .6s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Header state/city picker (Brian 2026-07-17) ----------
   The site stays neutral until the visitor picks their state + city for
   locally-accurate numbers. Pulses (gold glow) until first used. */
.city-picker { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .55rem; border: 1px solid rgba(24,119,224,.45); border-radius: 8px; background: rgba(255,255,255,.06); }
.cp-label { display: inline-flex; align-items: center; gap: .3rem; color: var(--green); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.cp-pin { font-size: .9rem; line-height: 1; }
.cp-select { background: #102a45; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; font-size: .8rem; padding: .3rem .4rem; max-width: 9.5rem; cursor: pointer; }
.cp-select:disabled { opacity: .55; cursor: default; }
.cp-pulse { animation: cp-glow 1.6s ease-in-out infinite; }
@keyframes cp-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24,119,224,0); border-color: rgba(24,119,224,.45); }
  50% { box-shadow: 0 0 14px 3px rgba(24,119,224,.55); border-color: var(--blue, #1877E0); }
}
.mobile-menu .city-picker { display: flex; flex-wrap: wrap; width: 100%; margin: .8rem 0 .4rem; padding: .6rem .7rem; }
.mobile-menu .cp-select { flex: 1 1 100%; max-width: none; font-size: .95rem; padding: .5rem .5rem; }
.mobile-menu .cp-label { flex: 1 1 100%; margin-bottom: .35rem; }
/* Hero placement (Brian 2026-07-17 sketch): top-left of the homepage hero,
   brand colors — deep navy card, 2px gold frame, white selects — professional
   standout on the dark hero photo. */
.hero-picker-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .9rem 1rem; margin: 0 0 1.4rem; }
.hero-picker-row .hero-line-badge, .hero--city .hero-picker-row .badge { margin: 0; }

/* Three matching hero-line chips — Free Homebuyer Education badge, Educational
   Materials, and Refinance Guides. Navy "glass" (translucent, blurred) with a
   gold hairline + white text, so the whole top line matches the gold-framed
   picker as one cohesive dark, gold-accented band instead of a wall of white
   (Brian 2026-07-17: three solid-white pills read "too white" beside the white
   content cards below). Only the two real links get a hover lift; the badge is
   a static label. */
.hero-picker-row .hero-line-badge,
.hero-picker-row .hero-edu-btn,
.hero-picker-row .hero-refi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  box-sizing: border-box; height: 46px; padding: 0 1.3rem; margin: 0;
  background: rgba(13,33,55,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  letter-spacing: .02em; text-transform: none; line-height: 1;
  border: 1px solid rgba(24,119,224,.55); border-radius: 999px;
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.6);
  text-decoration: none; white-space: nowrap;
}
.hero-picker-row .hero-line-badge .icon,
.hero-picker-row .hero-edu-btn .icon,
.hero-picker-row .hero-refi-btn .icon { width: 16px; height: 16px; color: var(--blue, #1877E0); }
.hero-picker-row .hero-edu-btn:hover,
.hero-picker-row .hero-refi-btn:hover {
  background: rgba(13,33,55,.8); border-color: var(--blue, #1877E0); color: #fff;
  box-shadow: 0 10px 26px -12px rgba(24,119,224,.5); transform: translateY(-1px);
}

/* Location picker — a matching rounded lozenge (same 46px height + gold frame
   Brian asked to keep) holding two SYMMETRICAL white select "pills" of equal
   width. The disabled City select stays white with muted text instead of
   greying out, so State + City read as a matched pair (Brian 2026-07-17). */
.hero-picker-row .city-picker { box-sizing: border-box; height: 46px; padding: 0 .85rem; gap: .55rem; border: 2px solid var(--blue, #1877E0); background: rgba(13,33,55,.92); border-radius: 999px; box-shadow: 0 10px 28px -14px rgba(0,0,0,.6); }
.hero-picker-row .cp-label { font-size: .78rem; }
.hero-picker-row .cp-select { width: 9rem; max-width: 9rem; height: 30px; background: #fff; color: var(--navy, #0D2137); font-weight: 600; border: 1px solid #cfd6df; border-radius: 999px; padding: 0 .7rem; cursor: pointer; }
.hero-picker-row .cp-select:disabled { opacity: 1; background: #fff; color: #9aa4b1; cursor: default; }
@media (max-width: 900px) {
  .hero-picker-row { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .hero-picker-row .city-picker { flex-wrap: wrap; width: 100%; height: auto; padding: .6rem .7rem; border-radius: 16px; }
  .hero-picker-row .cp-label { flex: 1 1 100%; }
  .hero-picker-row .cp-select { flex: 1 1 100%; width: auto; max-width: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav > .container > .city-picker { display: none; }
}
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .city-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .city-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-points { grid-template-columns: 1fr; }
  .topbar-meta .hide-sm { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  body { font-size: 16px; }
  .city-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Booklet page — "Want the complete guide?" CTA gate
   Lives above the (hidden) multi-step form. The visitor reads the 1-page
   sample and bullets, then opts in here to reveal the form.
   ========================================================================== */
.booklet-cta {
  background: linear-gradient(160deg, #fffaf0 0%, #fdf6e3 100%);
  border: 1px solid #f0e6d2;
  border-radius: 14px;
  padding: 26px 24px 22px;
  text-align: center;
  box-shadow: 0 6px 24px -12px rgba(13, 33, 55, .18);
}
.booklet-cta-heading {
  margin: 0 0 8px;
  font: 700 22px/1.25 var(--font-head);
  color: var(--navy);
  letter-spacing: .2px;
}
.booklet-cta-sub {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}
.booklet-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  background: linear-gradient(135deg, var(--green) 0%, #009a41 100%);
  color: var(--navy);
  font: 700 16px var(--font-body);
  letter-spacing: .3px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(212, 175, 55, .55);
  transition: transform 120ms, box-shadow 180ms, background 180ms;
}
.booklet-cta-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #33c777 0%, var(--green) 100%);
  box-shadow: 0 10px 22px -8px rgba(212, 175, 55, .7);
}
.booklet-cta-btn:active { transform: translateY(0); }
.booklet-cta-fineprint {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ==========================================================================
   Multi-step booklet form
   Progressive disclosure: one question per screen, gold progress bar, warm
   cream card, slide-left transitions, trust reassurance at high-friction
   steps. Designed for thumb-first mobile use; scales gracefully to desktop.
   ========================================================================== */
.lead-form.multi-step {
  background: #fffaf0;                    /* warm cream, not stark white */
  border: 1px solid #f0e6d2;
  border-radius: 14px;
  box-shadow: 0 6px 24px -12px rgba(13, 33, 55, .18);
  padding: 0;
  overflow: hidden;
  /* HARD RULE (Brian 2026-08-01): input content is NEVER elongated full-width.
     The stepped capture form is capped to a tidy centered column so name/email/
     phone boxes stay readable, not stretched across the page. Guard:
     test_input_width_cap.py. */
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.ms-progress {
  height: 6px;
  background: #efe4cd;
  position: relative;
  overflow: hidden;
}
.ms-progress-bar {
  position: absolute;
  inset: 0 100% 0 0;                      /* width controlled via right */
  background: linear-gradient(90deg, #00B24C 0%, #33c777 100%);
  transition: right 350ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 8px rgba(212, 175, 55, .5);
}
.ms-step-count {
  font: 600 11px var(--font-body);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 16px 22px 0;
}
.ms-stage {
  position: relative;
  padding: 14px 22px 26px;
  min-height: 280px;                      /* steady height; reduces jank */
}
.ms-step {
  position: absolute;
  inset: 14px 22px 26px;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 280ms cubic-bezier(.2,.8,.2,1), transform 280ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.ms-step.is-current {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.ms-step.is-leaving {
  transform: translateX(-28px);
  opacity: 0;
}
.ms-author {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #fdf6e3;
  border: 1px solid #f0e6d2;
  border-radius: 10px;
}
.ms-author-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, #009a41 100%);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 14px var(--font-body);
  letter-spacing: .5px;
  box-shadow: 0 2px 8px -2px rgba(212, 175, 55, .45);
}
.ms-author-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy);
}
.ms-author-text strong { display: inline; color: var(--navy); }
.ms-author-text span   { display: block; margin-top: 2px; color: #3a4a5c; }
.ms-step h3 {
  font: 700 24px/1.25 var(--font-head);
  color: var(--navy);
  margin: 6px 0 8px;
  letter-spacing: .2px;
}
.ms-step .ms-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.55;
}
.ms-step label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 6px;
}
.ms-step input[type=text],
.ms-step input[type=email],
.ms-step input[type=tel],
.ms-step select {
  width: 100%;
  font: 16px/1.4 var(--font-body);        /* 16px prevents iOS auto-zoom */
  padding: 14px 16px;
  border: 1px solid #d8cfb8;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color 180ms, box-shadow 180ms;
  min-height: 52px;                       /* thumb-friendly */
}
.ms-step input:focus,
.ms-step select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .18);
}
.ms-trust {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: #fdf6e3;
  border: 1px solid #f0e6d2;
  border-radius: 10px;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.5;
}
.ms-trust-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.ms-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 10px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  cursor: pointer;
}
.ms-consent input[type=checkbox] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 18px; height: 18px;
  accent-color: var(--blue);
}
.ms-disclaimer {
  margin: 12px 0 18px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  padding: 12px 14px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 3px solid var(--blue);
}
.ms-disclaimer strong { color: var(--navy); }
/* Educational-consultation opt-in (the "want a free consult?" box) and the
   phone + TCPA fields it reveals. Phone is optional site-wide (Brian 2026-08-19):
   it appears only when this box is checked. */
.ms-pro-toggle {
  margin: 8px 0 6px;
  padding: 12px 14px;
  background: #f5f8ff;
  border: 1px solid rgba(13,33,55,.12);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
}
.ms-pro-toggle em { color: var(--muted); font-style: italic; }
.ms-pro-fields { margin: 4px 0 0; }
.ms-pro-fields[hidden] { display: none; }
.ms-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.ms-back {
  background: none;
  border: none;
  color: var(--muted);
  font: 600 14px var(--font-body);
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 6px;
  transition: color 150ms, background 150ms;
}
.ms-back:hover { color: var(--navy); background: rgba(13,33,55,.04); }
.ms-back[hidden] { display: none; }
.ms-next, .ms-submit {
  flex: 1;
  min-height: 52px;
  font: 700 15px var(--font-body);
  letter-spacing: .3px;
  border: none;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition: background 180ms, transform 100ms;
  padding: 0 18px;
}
.ms-next:hover, .ms-submit:hover { background: var(--navy-light); }
.ms-next:active, .ms-submit:active { transform: scale(.98); }
.ms-next[disabled], .ms-submit[disabled] {
  background: #94a3b8; cursor: not-allowed; transform: none;
}
.ms-submit {
  background: linear-gradient(135deg, var(--green) 0%, #009a41 100%);
  color: var(--navy);
  box-shadow: 0 4px 16px -4px rgba(212, 175, 55, .55);
}
.ms-submit:hover {
  background: linear-gradient(135deg, #62a4f1 0%, #1877E0 100%);
}
.ms-error {
  margin-top: 12px;
  font-size: 14px;
  color: #b91c1c;
  min-height: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.ms-error.is-active {
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
}
.ms-error.is-shake {
  animation: ms-shake 380ms cubic-bezier(.36,.07,.19,.97);
}
@keyframes ms-shake {
  10%, 90%   { transform: translateX(-1px); }
  20%, 80%   { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60%   { transform: translateX(4px); }
}
.ms-thanks {
  padding: 32px 22px 30px;
  text-align: center;
}
.ms-thanks-check {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--green), #33c777);
  color: var(--navy);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(212, 175, 55, .6);
}
.ms-thanks h3 {
  font: 700 24px/1.3 var(--font-head);
  color: var(--navy);
  margin: 6px 0 12px;
}
.ms-thanks-lead {
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 6px;
}
.ms-thanks-lead strong {
  color: var(--navy);
  word-break: break-all;       /* long emails wrap cleanly on mobile */
}
.ms-thanks-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 16px;
  line-height: 1.55;
}
.ms-thanks-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--green) 0%, #009a41 100%);
  color: var(--navy);
  font: 700 15px var(--font-body);
  letter-spacing: .3px;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 6px 18px -6px rgba(212, 175, 55, .55);
  transition: transform 120ms, box-shadow 180ms;
}
.ms-thanks-download:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(212, 175, 55, .7);
}
.ms-thanks-download:active { transform: translateY(0); }
.ms-thanks-download svg { flex-shrink: 0; }
.ms-thanks-foot {
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
/* "Change my answers" on the thanks panel — a way back from the terminal
   success screen so a mistyped email/name/state/phone can be corrected and
   re-sent (Brian 2026-08-19). Link-styled, matching .ms-back. */
.ms-thanks-back {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font: 600 14px var(--font-body);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 6px;
  transition: color 150ms, background 150ms;
}
.ms-thanks-back:hover { color: var(--navy); background: rgba(13,33,55,.04); }
.hp-field { position: absolute; left: -9999px; }

@media (max-width: 520px) {
  .ms-stage { padding: 12px 16px 22px; min-height: 320px; }
  .ms-step h3 { font-size: 22px; }
  .ms-actions { flex-direction: column-reverse; align-items: stretch; }
  .ms-back { text-align: left; }
}

/* ============================================================
   City × home-improvement-topic landing pages
   ============================================================ */

/* Hero CTA pair */
.cti-hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 22px;
}
.cti-hero-cta .btn { font-weight: 600; }

/* The "fold" calculator section */
.equity-calc-section {
  background: linear-gradient(180deg, rgba(13,33,55,.04) 0%, transparent 100%);
  padding: 56px 0;
  border-bottom: 1px solid rgba(13,33,55,.08);
}
.equity-calc {
  max-width: 920px; margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(13,33,55,.12);
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 8px 30px -14px rgba(13,33,55,.18);
}
.equity-calc h2 { margin: 0 0 6px; font-size: 22px; }
.equity-calc .ec-sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }
.ec-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ec-grid label {
  display: flex; flex-direction: column;
  font-size: 13px; color: #344; font-weight: 600;
}
.ec-grid input, .ec-grid select {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(13,33,55,.18);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}
.ec-grid input:focus, .ec-grid select:focus {
  outline: 2px solid var(--blue); outline-offset: 1px;
}
/* Full-width field inside the even 2-col grid (Credit Range sits alone on top). */
.ec-grid .ec-field-full { grid-column: 1 / -1; }

.ec-results {
  margin-top: 20px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(13,33,55,.08);
  padding-top: 18px;
}
.ec-results > div {
  background: rgba(13,33,55,.04);
  padding: 14px 16px;
  border-radius: 10px;
}
.ec-results dt {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; margin: 0 0 4px;
}
.ec-results dd {
  font-size: 22px; font-weight: 700; margin: 0;
  font-variant-numeric: tabular-nums;
}
.ec-notes {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(24,119,224,.08);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  font-size: 13px; line-height: 1.55; color: #344;
}
.ec-warn {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fdecea;
  border-left: 3px solid #c0392b;
  border-radius: 4px;
  font-size: 13px; line-height: 1.5; color: #5a1d15;
  display: none;
}
.ec-disclaim {
  margin-top: 14px;
  font-size: 12px; color: var(--muted); line-height: 1.5;
}

@media (max-width: 640px) {
  .ec-grid, .ec-results { grid-template-columns: 1fr; }
  .equity-calc { padding: 22px 18px 18px; }
}

/* Detailed HELOC/HELOAN cost breakdown card (below the compare summary). Shares
   the .ec-grid even-row grid so inputs stay right-sized (Gate #10). */
.equity-breakdown {
  max-width: 920px; margin: 22px auto 0;
  background: #fff;
  border: 1px solid rgba(13,33,55,.12);
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 8px 30px -14px rgba(13,33,55,.18);
}
.ebd-head h3 { margin: 0 0 6px; font-size: 20px; color: var(--navy); }
.ebd-sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; line-height: 1.55; }
.ebd-tabs {
  display: inline-flex; gap: 4px; margin: 0 0 18px;
  background: rgba(13,33,55,.06); padding: 4px; border-radius: 10px;
}
.ebd-tab {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-weight: 700; font-size: 14px; color: var(--muted);
  padding: 8px 22px; border-radius: 7px;
}
.ebd-tab.is-active {
  background: #fff; color: var(--navy);
  box-shadow: 0 2px 8px -3px rgba(13,33,55,.28);
}
.ebd-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.ebd-avail { margin: 16px 0 0; font-size: 14px; color: #344; }
.ebd-avail strong { font-variant-numeric: tabular-nums; color: var(--navy); }
.ebd-avail-note { color: var(--muted); font-size: 13px; }
.ebd-results {
  margin-top: 16px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ebd-tile { background: rgba(13,33,55,.04); padding: 14px 16px; border-radius: 10px; }
.ebd-tile-k {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; margin: 0 0 4px;
}
.ebd-tile-v {
  display: block; font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--navy);
}
.ebd-tile-sub { display: block; margin: 6px 0 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.ebd-empty { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .ebd-results { grid-template-columns: 1fr; }
  .equity-breakdown { padding: 22px 18px 18px; }
}

/* Extra-payment mini-tool inside the breakdown card */
.ebd-extra { margin-top: 18px; }
.ebd-extra-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: #344; max-width: 320px;
}
.ebd-extra-label input {
  padding: 10px 12px; border: 1px solid rgba(13,33,55,.18); border-radius: 8px;
  font-size: 15px; font-family: inherit; background: #fff;
}
.ebd-extra-label input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.ebd-extra-out { margin: 10px 0 0; font-size: 14px; color: #234; line-height: 1.5; }
.ebd-extra-out strong { color: var(--navy); font-variant-numeric: tabular-nums; }

/* Collapsible month-by-month amortization schedule + CSV download */
.ebd-schedule { margin-top: 18px; border-top: 1px solid rgba(13,33,55,.08); padding-top: 14px; }
.ebd-schedule > summary {
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--blue);
  list-style: none; padding: 4px 0;
}
.ebd-schedule > summary::-webkit-details-marker { display: none; }
.ebd-schedule > summary::before {
  content: "\25B8"; margin-right: 8px; display: inline-block; transition: transform .15s;
}
.ebd-schedule[open] > summary::before { transform: rotate(90deg); }
.ebd-schedule-tools { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.ebd-csv-btn {
  border: 1px solid var(--blue); background: #fff; color: var(--blue);
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  padding: 7px 14px; border-radius: 8px;
}
.ebd-csv-btn:hover { background: var(--blue); color: #fff; }
.ebd-csv-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.ebd-schedule-hint { font-size: 12px; color: var(--muted); }
.ebd-schedule-wrap {
  max-height: 320px; overflow: auto;
  border: 1px solid rgba(13,33,55,.10); border-radius: 8px;
}
.ebd-schedule-table {
  width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums;
}
.ebd-schedule-table th, .ebd-schedule-table td { padding: 6px 10px; text-align: right; white-space: nowrap; }
.ebd-schedule-table th:first-child, .ebd-schedule-table td:first-child { text-align: left; }
.ebd-schedule-table thead th {
  position: sticky; top: 0; background: var(--navy); color: #fff;
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
.ebd-schedule-table tbody tr:nth-child(even) { background: rgba(13,33,55,.03); }

/* Illustrative HELOC vs HELOAN rate-trend graph (self-contained SVG) */
.ebd-trend {
  max-width: 920px; margin: 22px auto 0;
  background: #fff; border: 1px solid rgba(13,33,55,.12); border-radius: 14px;
  padding: 24px 28px; box-shadow: 0 8px 30px -14px rgba(13,33,55,.18);
}
.ebd-trend-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ebd-trend-head h3 { margin: 0 0 4px; font-size: 18px; color: var(--navy); }
.ebd-trend-legend { display: flex; gap: 16px; }
.ebd-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #344; font-weight: 600; }
.ebd-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.ebd-trend-svg { width: 100%; height: auto; margin: 10px 0 4px; display: block; }
.ebd-trend-svg .ebd-axis { fill: var(--muted); font-size: 11px; }
@media (max-width: 640px) { .ebd-trend { padding: 20px 16px; } }

/* Calculator band: colorful "Local market" panel beside the calc (fills the bland gutters) */
.equity-calc-section { background: linear-gradient(165deg, #eaf1fa 0%, #f5f1e8 100%); }
.ec-layout { display: grid; grid-template-columns: minmax(280px, 350px) 1fr; gap: 2rem; align-items: stretch; }
.ec-layout .equity-calc { max-width: none; margin: 0; }
.ec-layout #calculator.calc-grid { max-width: 100%; margin: 0; }
.ec-layout .hw-calc-card { max-width: none; margin: 0; }
.ec-layout .hw-newsletter, .ec-layout .hw-newsletter-card { max-width: none; margin: 0; height: 100%; }
/* Full-width colorful "Local market" strip above a calculator (blog/topic calcs) */
.calc-market-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; background: linear-gradient(120deg, var(--navy) 0%, #16375c 100%); color: #fff; border-radius: 12px; padding: 1.15rem 1.6rem; margin: 0 0 1.6rem; }
.calc-market-strip .cms-lead { display: flex; flex-direction: column; gap: .12rem; }
.calc-market-strip .cms-lead strong { font-family: var(--font-head); font-size: 1.12rem; color: #fff; line-height: 1.15; }
.cms-facts { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; margin: 0; padding: 0; }
.cms-facts > div { display: flex; flex-direction: column; gap: .1rem; }
.cms-facts dt { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.68); }
.cms-facts dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #fff; line-height: 1.15; }
/* Blog H1: title + smaller subtitle line (kills the oversized em dash) */
.blog-article h1 .h1-sub { display: block; font-size: .46em; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--muted); margin-top: .55rem; line-height: 1.25; }
/* Mobile-friendly headings + calc/strip stacking */
@media (max-width: 640px) {
  .blog-article h1 { font-size: 1.9rem; line-height: 1.15; }
  .blog-article h1 .h1-sub { font-size: .62em; }
  .page-hero h1 { font-size: 1.95rem; line-height: 1.15; }
  .calc-market-strip { flex-direction: column; align-items: flex-start; }
  .cms-facts { gap: .7rem 1.4rem; }
}

/* ---------- Step-by-step "give and go" calculator wizard ---------- */
.calc-wizard-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 2rem 2rem 1.75rem; box-shadow: 0 10px 34px -16px rgba(13,33,55,.22); max-width: 640px; margin: 0 auto; }
.calc-wizard-card .calc-wizard { max-width: none; margin: 0; }
.cw-card-header { text-align: center; color: var(--muted); font-size: 1rem; line-height: 1.55; margin: 0 0 1.35rem; }
.cw-card-footer { text-align: center; color: var(--muted); font-size: .8rem; line-height: 1.5; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.cw-card-footer strong { color: var(--navy); }
.cw-progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.cw-bar { height: 100%; background: var(--green); border-radius: 999px; transition: width .25s ease; }
.cw-count { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted); margin: 0 0 .5rem; }
.cw-q { font-size: 1.4rem; color: var(--navy); margin: 0 0 1.25rem; line-height: 1.25; }
.cw-choices { display: grid; gap: .6rem; }
.cw-choice { text-align: left; padding: .95rem 1.15rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-family: var(--font-body); font-size: 1rem; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.cw-choice:hover { border-color: var(--blue); background: var(--bg-alt); box-shadow: var(--shadow-sm); }
.cw-numwrap { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 10px; padding: .3rem 1rem; }
.cw-numwrap:focus-within { border-color: var(--blue); }
.cw-aff { font-family: var(--font-head); font-size: 1.25rem; color: var(--muted); }
.cw-num { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 1.5rem; font-family: var(--font-head); color: var(--navy); padding: .5rem 0; background: transparent; }
.cw-hint { font-size: .85rem; color: var(--muted); margin: .65rem 0 0; }
.cw-select { width: 100%; padding: .8rem 1rem; font: inherit; font-size: 1.05rem; color: var(--navy); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cw-select:focus { border-color: var(--blue); outline: none; }
.cw-err { color: #b3261e; font-size: .85rem; margin: .65rem 0 0; }
.cw-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; gap: 1rem; }
.cw-back, .cw-restart { background: none; border: 0; color: var(--muted); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; cursor: pointer; padding: .5rem 0; }
.cw-back:hover, .cw-restart:hover { color: var(--navy); }
.cw-next { background: var(--navy); color: #fff; border: 0; border-radius: 8px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .9rem; padding: .85rem 1.5rem; cursor: pointer; }
.cw-next:hover { background: #08182a; }
.cw-total { text-align: center; background: linear-gradient(168deg, var(--navy), #16375c); color: #fff; border-radius: 12px; padding: 1.6rem; margin: .4rem 0 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.cw-total > span { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.75); }
.cw-total strong { font-family: var(--font-head); font-size: 2.7rem; line-height: 1; color: #fff; }
.cw-total em { font-style: normal; font-size: .82rem; color: var(--green); }
.cw-breakdown { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.cw-breakdown li { display: flex; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink); }
.cw-breakdown li span:last-child { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.cw-actions { display: flex; flex-direction: column; gap: .85rem; align-items: center; }
.cw-actions .btn { width: 100%; text-align: center; }
.cw-disclaim { font-size: .78rem; color: var(--muted); line-height: 1.5; margin: 1.15rem 0 0; }
@media (max-width: 560px) { .calc-wizard-card { padding: 1.4rem 1.15rem; } .cw-total strong { font-size: 2.2rem; } }
.ec-aside { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: linear-gradient(168deg, var(--navy) 0%, #16375c 100%); color: #fff;
  box-shadow: 0 8px 30px -14px rgba(13,33,55,.4); }
.ec-aside-photo { margin: 0; min-height: 172px; background-size: cover; background-position: center; }
.ec-aside-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 1.05rem; flex: 1; }
/* 24-mo rate chart fills the aside's slack (no empty navy void); note pins bottom */
.ec-aside-body .trend-card { padding: 1rem 1.1rem .9rem; box-shadow: none; border: 1px solid rgba(255,255,255,.12); }
.ec-aside-body .trend-card .trend-canvas { height: 170px; }
.ec-aside-note { margin-top: auto; }
.ec-aside-eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: var(--blue); }
/* Any heading in the navy aside is WHITE — the markup uses <h2>, but the rule
   only covered <h3>, so the global dark-navy heading color made "Keep learning —
   free updates in your inbox" invisible on the navy card (Brian 2026-07-23).
   Cover every heading level so a level change can't reintroduce the dark-on-dark. */
.ec-aside h2, .ec-aside h3, .ec-aside h4 { color: #fff; margin: -.5rem 0 .1rem; font-size: 1.35rem; line-height: 1.2; }
.ec-aside-body, .ec-aside-body p { color: rgba(255,255,255,.9); }
.ec-aside-facts { margin: 0; display: grid; gap: .9rem; }
.ec-aside-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: .75rem; }
.ec-aside-facts dt { margin: 0; font-size: .85rem; color: rgba(255,255,255,.75); }
.ec-aside-facts dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: #fff; white-space: nowrap; }
.ec-aside-note { margin: auto 0 0; font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.72); }
@media (max-width: 860px) { .ec-layout { grid-template-columns: 1fr; } .ec-aside-photo { min-height: 150px; } }

/* Topic image strips */
.cti-imagestrip {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  margin: 28px 0;
}
.cti-imagestrip figure {
  margin: 0; border-radius: 12px; overflow: hidden;
  background: rgba(13,33,55,.06);
  aspect-ratio: 4 / 3;
}
.cti-imagestrip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .cti-imagestrip { grid-template-columns: 1fr; }
  .cti-imagestrip figure { aspect-ratio: 16 / 9; }
}

/* Lead-magnet (booklet gate) banner that breaks up the page */
.cti-gate {
  margin: 36px 0;
  padding: 28px;
  background: linear-gradient(135deg, #0d2137 0%, #0a1a2c 100%);
  color: #fff;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 12px 32px -14px rgba(13,33,55,.4);
}
.cti-gate h3 { color: #fff; margin: 0 0 8px; font-size: 22px; }
.cti-gate p { color: rgba(255,255,255,.82); margin: 0 0 18px; font-size: 15px; line-height: 1.55; }
.cti-gate .btn { background: var(--green); color: #fff; }
.cti-gate .btn:hover { background: #009a41; transform: translateY(-1px); }

/* Local-snapshot key/value grid (moved further down the page) */
.kv-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: rgba(13,33,55,.04);
  padding: 18px;
  border-radius: 10px;
}
.kv-grid > div dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; margin: 0 0 2px;
}
.kv-grid > div dd { margin: 0; font-size: 15px; line-height: 1.45; }
@media (max-width: 600px) { .kv-grid { grid-template-columns: 1fr; } }

/* Compact program table near the top */
.program-compare {
  width: 100%; border-collapse: collapse; margin: 16px 0;
}
.program-compare th, .program-compare td {
  text-align: left; padding: 10px 12px; vertical-align: top;
  border-bottom: 1px solid rgba(13,33,55,.08); font-size: 14px;
}
.program-compare thead th {
  background: rgba(13,33,55,.06); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em; color: #344;
}
@media (max-width: 600px) {
  .program-compare, .program-compare thead, .program-compare tbody,
  .program-compare th, .program-compare td, .program-compare tr { display: block; }
  .program-compare thead { display: none; }
  .program-compare tr { border: 1px solid rgba(13,33,55,.1); border-radius: 8px; margin-bottom: 10px; padding: 8px; }
  .program-compare td { border: none; padding: 4px 6px; }
  .program-compare td::before {
    content: attr(data-label); display: block; font-weight: 700;
    font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
  }
}

/* ============================================================
   Focus-mode header (lead-capture landing pages)
   Strips the nav so no nav link can pull the visitor away
   ============================================================ */
/* Focus header sits on the page-hero navy background.
   Wordmark = single horizontal lockup: white "Home" + gold "Wise".
   Use a dedicated .focus-wordmark class so we don't inherit any of the
   existing .logo flex/stacking rules elsewhere in the stylesheet. */
.site-header--focus { border-bottom: none; }
.site-header--focus .nav { padding: 22px 0; }
.site-header--focus .nav .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Real wordmark image. Display at fixed height with default smooth scaling
   so the downscale is anti-aliased correctly (no pixelated edges). */
.focus-wordmark-img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
  cursor: default;
}

.site-header--focus .focus-trust {
  color: rgba(255,255,255,.7); font-size: 13px; text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,.3); padding-bottom: 1px;
}
.site-header--focus .focus-trust:hover {
  color: var(--blue); border-bottom-color: var(--blue);
}

@media (max-width: 520px) {
  .focus-wordmark-img { height: 36px; }
  .site-header--focus .focus-trust { font-size: 12px; }
}

/* Larger, more prominent gold CTA used in the hero on city-topic pages */
.btn-large {
  font-size: 16px;
  padding: 14px 22px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 8px 22px -10px rgba(24,119,224,.7);
}
.btn-large:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px rgba(24,119,224,.85);
}

/* ============================================================
   Calc-suite calculator (calc-ui.js -> #calc-root). Previously
   UNSTYLED (browser default = the plain stacked form). First real
   styling pass: two-column layout (form left | results right), a
   prominent right-aligned Calculate button, and a soft local
   backdrop via the --calc-bg hook (set per-city in page_calc_tool).
   ============================================================ */
.calc-article #calc-root {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  position: relative;
  padding: 26px;
  border-radius: 14px;
  background: var(--calc-bg, linear-gradient(135deg, rgba(13,33,55,.12), rgba(13,33,55,.03)));
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px -16px rgba(13,33,55,.35);
  border: 2px solid rgba(13,33,55,.16);
}
@media (max-width: 820px) {
  .calc-article #calc-root { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
}
.calc-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Full-opacity backdrop: the form sits on its own solid card (like the results
   panel) so text stays crisp over the now-unveiled city image. */
.calc-article #calc-root .calc-form { background: rgba(228,239,251,.97); border: 2px solid rgba(13,33,55,.18); border-radius: 10px; padding: 20px; }
.calc-article #calc-root .calc-results { background: rgba(228,239,251,.97); }
/* Compact 2-col field grid (Brian 2026-07-13: "no need to scroll so far —
   more precise"). Credit Rating spans the full row to keep its prominence
   (locked first-field rule); helper notes span too. Stacks on mobile. */
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
/* Credit Rating spans both columns. Keyed to an explicit class (was :first-child)
   so it stays full-width even on the homepage, where the State + ZIP row leads
   ABOVE it (Brian 2026-07-22). State + ZIP each take one column = one shared row. */
.calc-fields > .calc-field--full { grid-column: 1 / -1; }
.calc-fields > .calc-mindown-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) { .calc-fields { grid-template-columns: 1fr; } }
/* Keep each field's label + help text + control together as ONE group and
   bottom-align the whole group (justify-content: flex-end). Side-by-side fields
   (Your state | ZIP, Current rate | Loan term) still line their controls up when
   one field's help text wraps — but the label now stays right above its box
   instead of floating at the top of a taller neighbour's cell (Brian 2026-07-23,
   replacing the old margin-top:auto that dropped only the control and left the
   label stranded). Labels centered per Brian's center-by-default preference. */
.calc-field { display: flex; flex-direction: column; gap: 3px; justify-content: flex-end; }
/* Centered labels + help text, tightened right up against the input box so it's
   obvious which control the writing describes (Brian 2026-07-23). Zeroing the
   <p> help-text margin removes the ~20px float that used to sit between the help
   line and its box. */
.calc-field-label, .calc-field-sub { text-align: center; margin: 0; }
/* Clicked Calculate with fields still empty: flag the ones that need a value in
   red so the visitor sees exactly where to look (paired with the named list in
   the results area). Cleared automatically as each field is completed. */
.calc-field--needed > input, .calc-field--needed > select {
  border-color: #d9534f; background-color: #fdf1f0;
}
.calc-field--needed .calc-field-label { color: #c0392b; }
.calc-needed .calc-needed-head { font-weight: 600; margin: 0 0 6px; }
.calc-needed-list { margin: 0 0 8px; padding-left: 1.1rem; text-align: left; }
.calc-needed-foot { margin: 0; font-size: .88rem; color: var(--muted); }
/* "Completed" state: a required field turns light green once it holds a valid
   value, so the visitor sees which inputs are ready (Brian 2026-07-17). */
.calc-field.is-complete > input, .calc-field.is-complete > select {
  background-color: #e9f8ef; border-color: #2e9e5b;
}
.calc-field.is-complete > input:focus, .calc-field.is-complete > select:focus {
  border-color: #2e9e5b; box-shadow: 0 0 0 3px rgba(46,158,91,.18);
}
.calc-field-label { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: .95rem; }
.calc-field-sub, .calc-mindown-note { font-size: .8rem; color: var(--muted); }
.calc-input {
  padding: .6rem .75rem; border: 1px solid #c4cdd8; border-radius: 6px;
  font-size: 1rem; background: #fff; color: var(--navy); width: 100%;
}
.calc-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(24,119,224,.3); }
/* "Your estimate is over here" cue (Brian 2026-07-23): a soft gold pulse ring on
   the results card the first time results replace the guide panel, and on every
   explicit Calculate click — competitor-standard, no blinking arrows/flashes.
   Paired with a smooth scroll-into-view in flashResults() when off-screen. */
@keyframes calcResultsPulse {
  0%   { background-color: #f6f9fc; }
  22%  { background-color: #fbf1d4; }   /* soft gold tint sweeps the estimate pane */
  100% { background-color: #f6f9fc; }
}
.calc-results-flash { animation: calcResultsPulse 1.4s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .calc-results-flash { animation: none; } }
.calc-actions { display: flex; justify-content: center; margin-top: 0; }
.calc-lead-card { text-align: center; margin-top: -4px; }
.calc-lead-form-wrap { text-align: left; }
.calc-submit {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 1rem; line-height: 1;
  padding: .85rem 2.2rem; border: 2px solid transparent; border-radius: 4px;
  background: var(--navy); color: #fff; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.calc-submit:hover { background: #14304f; transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(13,33,55,.6); }
.calc-results {
  background: rgba(255,255,255,.97); border: 2px solid rgba(13,33,55,.18);
  border-radius: 10px; padding: 20px; min-width: 0;
}
.calc-loading { color: var(--muted); font-style: italic; }

/* "Your estimate appears here" empty state — fills the results panel before a
   state is picked with a neat 3-step preview + the promise (Brian 2026-07-17:
   never leave that area blank). */
.calc-empty { text-align: left; }
.calc-empty-head { font-family: var(--font-head); font-weight: 700; color: var(--navy, #0D2137); font-size: 1.05rem; margin: 0 0 1rem; }
.calc-empty-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.calc-empty-steps li { display: flex; align-items: flex-start; gap: .7rem; }
.calc-empty-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.calc-empty-txt { color: #33465c; font-size: .92rem; line-height: 1.45; }
.calc-empty-trust { font-size: .82rem; color: #5a6b7d; margin: 0; padding-top: .75rem; border-top: 1px solid #eef1f5; }

@media (max-width: 820px) {
  .calc-actions { justify-content: stretch; }
  .calc-submit { width: 100%; }
}

/* Homepage STACKED calculator (Brian 2026-07-30): full-width horizontal inputs on
   top; the Calculate button reveals the estimate full-width BELOW (auto-scrolled).
   Scoped to .calc-panel--stacked (the homepage getstarted card) so the other 163
   calculator pages keep their two-pane/inline layout untouched. */
.calc-panel--stacked { grid-template-columns: 1fr; }
.calc-panel--stacked .calc-pane-results {
  border-left: 0; border-top: 1px solid var(--border, #e6e9ef); background: #f6f9fc;
}
/* Wider inputs area -> lay the fields out in EVEN, aligned columns (4 across on
   desktop) so every input is the SAME width in neat rows, packed tight and high
   (Brian 2026-07-30 review: nothing elongated full-width). align-items:start keeps
   the columns lined up vertically even when help text makes some fields taller. */
.calc-panel--stacked .calc-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 1.1rem;
}
/* Toggle-group wrappers (e.g. #calcui-va-cash-fields — the VA cash-out amounts shown
   when "cash-out" is picked) are made TRANSPARENT so their fields flow into the SAME
   4-column grid as everything else instead of stacking in one cell (Brian 2026-07-30).
   When the group is hidden its inline display:none still wins, so the toggle works. */
.calc-panel--stacked .calc-fields > div:not(.calc-field) { display: contents; }
/* Un-elongate the dropdowns that span full-width elsewhere (Credit Range, the
   loan-type picker, VA refinance type) — on the homepage they sit in one column. */
.calc-panel--stacked .calc-fields > .calc-field--full { grid-column: auto; }
.calc-panel--stacked .calc-fields > .calc-mindown-note { grid-column: 1 / -1; }
/* Inputs FILL their column so the boxes line up left-to-right. Descendant selector so
   fields inside a toggle-group wrapper are covered identically. */
.calc-panel--stacked .calc-fields .calc-field > .calc-input {
  width: 100%; box-sizing: border-box;
}
/* Each field is a 2-row SUBGRID (label / input): every input box snaps to the SAME
   line horizontally and the columns line up vertically, regardless of label length
   (Brian 2026-07-30). Descendant selector covers toggle-group fields too. */
@supports (grid-template-rows: subgrid) {
  .calc-panel--stacked .calc-fields .calc-field {
    display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
    grid-row: span 2; row-gap: 0;
  }
  .calc-panel--stacked .calc-fields .calc-field > .calc-field-head { grid-row: 1; align-self: end; margin: 0 0 .35rem; }
  .calc-panel--stacked .calc-fields .calc-field > .calc-input { grid-row: 2; align-self: start; }
}
@media (max-width: 980px) { .calc-panel--stacked .calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .calc-panel--stacked .calc-fields { grid-template-columns: 1fr; } }

/* "?" help tooltip (homepage): a compact info dot next to the label; the explanation
   appears on hover / keyboard-focus / tap. Saves the vertical space the inline help
   used (Brian 2026-07-30). */
.calc-field-head { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; }
.calc-info {
  position: relative; flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 1.5px solid var(--blue, #1877E0); border-radius: 50%; background: #fff;
  color: var(--blue, #1877E0); font-family: var(--font-head, sans-serif); font-weight: 700;
  font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.calc-info:hover, .calc-info:focus-visible { background: var(--blue, #1877E0); color: #fff; outline: none; }
.calc-tip {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 230px; padding: .55rem .7rem; z-index: 40;
  background: var(--navy, #0D2137); color: #fff; text-align: left;
  font-family: var(--font-body, sans-serif); font-weight: 400; font-size: .8rem; line-height: 1.4;
  border-radius: 8px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transition: opacity .15s ease; pointer-events: none;
}
.calc-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--navy, #0D2137);
}
.calc-info:hover .calc-tip, .calc-info:focus .calc-tip, .calc-info:focus-within .calc-tip {
  opacity: 1; visibility: visible;
}
@media (prefers-reduced-motion: reduce) { .calc-tip { transition: none; } }
.calc-panel--stacked .calc-actions { margin-top: 1.5rem; }
.calc-panel--stacked .calc-submit { padding: .95rem 2.9rem; font-size: 1.05rem; }
/* Button-driven "Recalculate" state: after a result is shown, editing a field dims
   the estimate and turns the button gold, so the number is never silently stale. */
.calc-submit--recalc { background: #C9A24B; color: #0D2137; }
.calc-submit--recalc:hover { background: #b8923f; }
.calc-results--stale { opacity: .5; transition: opacity .2s ease; }

/* Calc page 3-zone layout: Resources rail | calculator | next-step rail */
.calc-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 310px;
  gap: 34px;
  align-items: start;
  margin-top: 1.25rem;
}
.calc-rail { position: sticky; top: 116px; }
.rail-card {
  background: rgba(255,255,255,.98); border: 2px solid rgba(13,33,55,.2);
  border-radius: 11px; padding: 18px 20px;
}
.rail-card-accent { border-top: 3px solid var(--blue); }
.rail-title { font-family: var(--font-head); font-size: 1rem; color: var(--navy); margin: 0 0 .6rem; }
.rail-sub { font-size: .85rem; color: var(--muted); margin: 0 0 .7rem; }
.rail-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.rail-links a { color: var(--navy); text-decoration: none; font-size: .9rem; border-bottom: 1px solid transparent; }
.rail-links a:hover { color: #b8932f; border-bottom-color: currentColor; }
.rail-step {
  display: block; padding: .55rem .7rem; margin-bottom: .55rem;
  border: 1px solid rgba(13,33,55,.12); border-radius: 8px;
  text-decoration: none; color: var(--navy);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rail-step:hover { border-color: var(--blue); transform: translateX(2px); box-shadow: 0 4px 12px -8px rgba(13,33,55,.4); }
.rail-step strong { display: block; font-size: .9rem; }
.rail-step span { font-size: .8rem; color: var(--muted); }
.rail-fine { font-size: .72rem; color: var(--muted); margin: .6rem 0 0; text-align: center; }

/* Local Snapshot trust card (calculator left rail): flag + local facts + a
   small illustrative cost-mix bar. Educational/factual data only. */
.rail-snapshot { overflow: hidden; border-top: 3px solid var(--blue); }
.snap-photo { height: 92px; margin: -16px -18px 12px; background-size: cover; background-position: center; }
.snap-head { display: flex; align-items: center; gap: 12px; margin-bottom: .95rem; }
.snap-flag { flex: 0 0 auto; width: 66px; height: auto; border: 1px solid rgba(13,33,55,.15); border-radius: 3px; box-shadow: 0 1px 3px rgba(13,33,55,.2); }
.snap-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.snap-city { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.18rem; }
.snap-county { font-size: .82rem; color: var(--muted); }
.snap-facts { list-style: none; padding: 0; margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .42rem; }
.snap-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .82rem; border-bottom: 1px dotted rgba(13,33,55,.12); padding-bottom: .42rem; }
.snap-facts li:last-child { border-bottom: none; padding-bottom: 0; }
.snap-facts li span { color: var(--muted); }
.snap-facts li strong { color: var(--navy); font-weight: 700; }
.snap-facts li a { color: #b8932f; text-decoration: none; font-weight: 700; text-align: right; }
.snap-facts li a:hover { text-decoration: underline; }
.snap-section { margin-top: .8rem; padding-top: .7rem; border-top: 1px dotted rgba(13,33,55,.14); }
.snap-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: .45rem; }
.snap-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.snap-links a { color: #b8932f; text-decoration: none; font-size: .82rem; font-weight: 700; }
.snap-links a:hover { text-decoration: underline; }
.snap-hoods { margin: 0; font-size: .8rem; color: var(--navy); line-height: 1.55; }
.snap-faq { display: block; font-size: .82rem; color: var(--navy); text-decoration: none; font-weight: 600; line-height: 1.4; }
.snap-faq:hover { color: #b8932f; }
.snap-bar { width: 100%; height: 12px; border-radius: 6px; overflow: hidden; display: block; }
.snap-legend { display: flex; flex-wrap: wrap; gap: 9px; margin-top: .45rem; }
.snap-key { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); }
.snap-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.snap-fine { display: block; font-size: .68rem; color: var(--muted); margin-top: .5rem; line-height: 1.4; }
@media (max-width: 1080px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr) 310px; }
  .calc-rail-left { display: none; }
}
@media (max-width: 820px) {
  .calc-layout { grid-template-columns: 1fr; gap: 20px; }
  .calc-rail { position: static; }
  /* Single-column on phones: re-show the Local Snapshot card (hidden only in the
     820-1080px tablet range where 3 columns don't fit), and put the calculator
     first so the tool leads, with the trust card + next-step stacked below. */
  .calc-rail-left { display: block; }
  .calc-main { order: -1; }
}

/* Guide-page booklet CTA — sits under the byline, links the guide to its
   matching free booklet so visitors don't have to hunt through the Booklets
   index after reading. */
.guide-cta-row { margin-top: 1.25rem; }
.guide-cta-row .btn { display: inline-block; }

/* ZIP code field — sits inline with other calculator inputs */
.ec-opt {
  font-weight: 400; font-size: 11px; color: var(--muted);
  text-transform: none; letter-spacing: 0;
  margin-left: 4px;
}
.ec-zip-line {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(13,33,55,.04);
  border-left: 3px solid var(--navy);
  border-radius: 4px;
  font-size: 13px; line-height: 1.5; color: #344;
  display: none;
}
.ec-zip-line strong { color: var(--navy); }

/* ============================================================
   /disclaimer/ page — color-coded blocks matching brand mockup
   ============================================================ */
.disc-card {
  max-width: 880px; margin: 0 auto;
  background: #fff; border: 1px solid rgba(13,33,55,.08);
  border-radius: 14px; padding: 32px 36px;
  box-shadow: 0 4px 18px -10px rgba(13,33,55,.08);
}
.disc-block {
  border-left: 4px solid #cdd5de;
  padding: 4px 0 4px 22px;
  margin: 26px 0;
}
.disc-block:first-of-type { margin-top: 8px; }
.disc-h {
  margin: 0 0 8px; font-size: 18px; font-weight: 700;
  letter-spacing: .01em;
}
.disc-block p { margin: 0 0 10px; color: #344; line-height: 1.6; }
.disc-block ul { margin: 8px 0 14px 22px; color: #344; line-height: 1.6; }
.disc-block ul li { margin-bottom: 4px; }
.disc-block a { color: inherit; text-decoration: underline; }

.disc-orange { border-left-color: #E07B1A; }
.disc-orange .disc-h { color: #B85F00; }
.disc-blue   { border-left-color: #2563EB; }
.disc-blue   .disc-h { color: #1D4ED8; }
.disc-purple { border-left-color: #8B5CF6; }
.disc-purple .disc-h { color: #6D28D9; }
.disc-indigo { border-left-color: #4F46E5; }
.disc-indigo .disc-h { color: #3730A3; }
.disc-teal   { border-left-color: #0D9488; }
.disc-teal   .disc-h { color: #0F766E; }

.disc-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(13,33,55,.08);
  font-size: 13px; color: #6b7585; line-height: 1.55;
}
@media (max-width: 600px) {
  .disc-card { padding: 22px 18px; }
  .disc-block { padding-left: 16px; }
}

/* ============================================================
   Solar Pathway Calculator (4-stage widget)
   ============================================================ */
.sc-section {
  background: linear-gradient(180deg, rgba(13,33,55,.04) 0%, transparent 100%);
  padding: 56px 0;
  border-bottom: 1px solid rgba(13,33,55,.08);
}
.sc-card {
  max-width: 980px; margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(13,33,55,.12);
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 8px 30px -14px rgba(13,33,55,.18);
}
.sc-card > h2 { margin: 0 0 6px; font-size: 24px; color: var(--navy); }
.sc-card > .sc-sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; }

.sc-stage {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(13,33,55,.08);
}
.sc-stage:first-of-type { border-top: none; padding-top: 4px; }
.sc-stage-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
}
.sc-stage-body h3 { margin: 4px 0 12px; font-size: 17px; color: var(--navy); }

.sc-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 14px;
}
.sc-grid label {
  display: flex; flex-direction: column;
  font-size: 12px; color: #344; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.sc-grid input, .sc-grid select {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(13,33,55,.18);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  text-transform: none; letter-spacing: 0;
}
.sc-grid input:focus, .sc-grid select:focus {
  outline: 2px solid var(--blue); outline-offset: 1px;
}

.sc-results {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: rgba(13,33,55,.04);
  padding: 14px 16px;
  border-radius: 10px;
}
.sc-results > div dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; margin: 0 0 4px;
}
.sc-results > div dd {
  font-size: 18px; font-weight: 700; margin: 0;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.sc-compare-wrap { overflow-x: auto; margin-top: 4px; }
.sc-compare {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.sc-compare th, .sc-compare td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid rgba(13,33,55,.08);
  vertical-align: top;
}
.sc-compare thead th {
  background: rgba(13,33,55,.06);
  font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: #344; font-weight: 700;
}
.sc-compare .sc-note {
  color: var(--muted); font-size: 12px; line-height: 1.45; max-width: 260px;
}
.sc-compare .ec-good { color: #1f7a3d; font-weight: 700; }
.sc-compare .ec-meh  { color: #8a6a00; font-weight: 700; }

.sc-disclaim {
  margin-top: 16px;
  font-size: 12px; color: var(--muted); line-height: 1.5;
}

@media (max-width: 640px) {
  .sc-stage { grid-template-columns: 32px 1fr; gap: 10px; }
  .sc-stage-num { width: 28px; height: 28px; font-size: 14px; }
  .sc-card { padding: 22px 18px 18px; }
  .sc-results > div dd { font-size: 16px; }
}

/* ============================================================
   ROI / Resale recovery panel (home-improvement topic pages)
   ============================================================ */
.roi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 4px;
}
.roi-tile {
  background: rgba(13,33,55,.04);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 18px 20px;
}
.roi-tile .roi-pct,
.roi-tile .roi-amt {
  font-size: 34px; font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px;
}
.roi-tile .roi-lbl {
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
@media (max-width: 640px) {
  .roi-grid { grid-template-columns: 1fr; }
  .roi-tile .roi-pct, .roi-tile .roi-amt { font-size: 28px; }
}

/* Side-by-side equity-calc comparison panel */
.ec-compare-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(13,33,55,.08);
}
.ec-compare-block h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--navy);
  font-weight: 700;
}
.ec-compare-wrap { overflow-x: auto; }
table.ec-compare tbody tr.ec-sel td {
  background: rgba(24,119,224,.10);
  font-weight: 600;
}
.ec-sel-badge {
  display: inline-block;
  padding: 1px 6px;
  background: var(--blue);
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 4px;
  margin-left: 6px;
}

/* ============================================================
   HVAC energy savings calculator (HVAC topic pages only)
   ============================================================ */
#hvac-energy-calc .hv-card {
  max-width: 880px; margin: 0 auto;
  background: #fff; border: 1px solid rgba(13,33,55,.12);
  border-radius: 14px; padding: 24px 24px 20px;
  box-shadow: 0 6px 22px -12px rgba(13,33,55,.18);
}
.hv-sub { color: var(--muted); font-size: 14px; margin: 0 0 16px; line-height: 1.5; }
.hv-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.hv-grid label {
  display: flex; flex-direction: column;
  font-size: 12px; color: #344; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.hv-grid input {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(13,33,55,.18);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  text-transform: none; letter-spacing: 0;
}
.hv-grid input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

.hv-results {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: rgba(13,33,55,.04);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 16px;
}
.hv-results > div dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; margin: 0 0 4px;
}
.hv-results > div dd {
  font-size: 18px; font-weight: 700; margin: 0;
  font-variant-numeric: tabular-nums; color: var(--navy);
}
.hv-results .hv-good { color: #206b3a; }
.hv-notes {
  margin-top: 14px;
  padding: 11px 14px;
  background: rgba(24,119,224,.08);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  font-size: 13px; line-height: 1.55; color: #344;
}
.hv-disclaim {
  margin-top: 14px;
  font-size: 12px; color: var(--muted); line-height: 1.5;
}

/* ========================================================================
 * TOPIC CALCULATOR + LEAD CAPTURE (assets/js/topic-calculator.js)
 * Newsletter signup            (assets/js/newsletter-form.js)
 * ======================================================================== */

.hw-calc-card {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  padding: 28px 28px 22px;
  margin: 28px 0;
  box-shadow: 0 1px 3px rgba(13,33,55,.06), 0 6px 18px rgba(13,33,55,.04);
  font-family: inherit;
  color: var(--navy);
}
.hw-calc-header {
  border-bottom: 1px solid #eef1f5;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.hw-calc-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  color: var(--navy);
}
.hw-calc-sub {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.hw-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .hw-calc-grid { grid-template-columns: 1fr; }
  .hw-calc-card { padding: 20px 18px; }
}

.hw-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hw-calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hw-calc-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .01em;
}
.hw-calc-field input,
.hw-calc-field select,
.hw-calc-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #cdd2d8;
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
  background: #fbfcfd;
  color: var(--navy);
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.hw-calc-field input:focus,
.hw-calc-field select:focus,
.hw-calc-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24,119,224,.18);
}

.hw-calc-outputs {
  background: #f6f8fb;
  border: 1px solid #e8ecf2;
  border-radius: 8px;
  padding: 18px 20px;
}
.hw-calc-output-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hw-calc-output-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hw-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed #e0e5eb;
}
.hw-calc-row:last-of-type { border-bottom: none; }
.hw-calc-row-label { display: flex; flex-direction: column; min-width: 0; }
.hw-calc-row-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.hw-calc-row-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}
.hw-calc-row-val {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  white-space: nowrap;
}
.hw-calc-row-total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 2px solid var(--navy);
  border-bottom: none !important;
}
.hw-calc-row-total .hw-calc-row-main { font-size: 14px; }
.hw-calc-row-total .hw-calc-row-val {
  font-size: 19px;
  color: #7B1530;
}
.hw-calc-credit-note {
  background: rgba(24,119,224,.10);
  border-left: 3px solid var(--blue);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--navy);
  margin-top: 6px;
  line-height: 1.5;
}
.hw-calc-disclaimer {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Lead capture form below the calculator */
.hw-calc-lead {
  background: linear-gradient(180deg, #fcfdfe 0%, #f6f8fb 100%);
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  padding: 20px 22px;
  margin-top: 18px;
}
.hw-calc-lead-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--navy);
}
.hw-calc-lead-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.hw-calc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hw-calc-form textarea {
  min-height: 60px;
  resize: vertical;
}
/* Even 2-column row (Name | Email) so input boxes are right-sized, not stretched
   full-width for the data (Gate #10, HARD-RULES). Collapses to 1 column on mobile. */
.hw-calc-lead-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) { .hw-calc-lead-row { grid-template-columns: 1fr; } }
.hw-calc-submit {
  background: var(--blue);
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: .01em;
  transition: background .15s, transform .05s;
  margin-top: 4px;
}
.hw-calc-submit:hover:not(:disabled) {
  background: #c39d2e;
}
.hw-calc-submit:active:not(:disabled) { transform: translateY(1px); }
.hw-calc-submit:disabled {
  background: #cdd2d8;
  cursor: not-allowed;
}
.hw-calc-msg {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}
.hw-calc-promise {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(0,182,122,.06);
  border-left: 3px solid #00B67A;
  border-radius: 4px;
  font-size: 12px;
  color: var(--navy);
  line-height: 1.55;
}

/* ----------------------------------------------------------------------
 * Newsletter signup card
 * ---------------------------------------------------------------------- */
.hw-newsletter-card {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3050 100%);
  color: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 28px 0;
  box-shadow: 0 4px 12px rgba(13,33,55,.15);
}
.hw-newsletter-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: -.005em;
}
.hw-newsletter-sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: #cdd6e3;
  line-height: 1.55;
}
.hw-newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 10px;
  align-items: stretch;
}
/* Optional consult opt-in on the newsletter band (Brian 2026-08-20): name + email
   stay on the top row; the opt-in, its revealed phone/TCPA fields, and the submit
   button span full width below. */
.hw-newsletter-form .hw-news-pro,
.hw-newsletter-form .hw-news-pro-fields,
.hw-newsletter-form button { grid-column: 1 / -1; }
.hw-news-pro, .hw-news-tcpa {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.85); cursor: pointer;
}
.hw-news-pro input, .hw-news-tcpa input {
  flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--blue);
}
.hw-news-pro strong, .hw-news-tcpa strong { color: #fff; }
.hw-news-pro em { color: rgba(255,255,255,.6); font-style: italic; }
.hw-news-pro-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.hw-news-pro-fields[hidden] { display: none; }
@media (max-width: 600px) {
  .hw-newsletter-form { grid-template-columns: 1fr; }
}
.hw-newsletter-form input {
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: rgba(255,255,255,.95);
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  box-sizing: border-box;
}
.hw-newsletter-form input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24,119,224,.4);
}
.hw-newsletter-form button {
  background: var(--blue);
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 22px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .05s;
}
.hw-newsletter-form button:hover:not(:disabled) {
  background: #c39d2e;
}
.hw-newsletter-form button:active:not(:disabled) { transform: translateY(1px); }
.hw-newsletter-form button:disabled {
  background: #888;
  color: #ddd;
  cursor: not-allowed;
}
.hw-newsletter-msg {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}
.hw-newsletter-promise {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: #c8d2e0;
  line-height: 1.55;
}
.hw-newsletter-promise strong { color: var(--green); }

/* ------------------------------------------------------------------
   Calc lite lead form — used on blog/funnel pages where the calc
   borrows the main CALC_TPL but the lead capture stays email-only.
   ------------------------------------------------------------------ */
.calc-lead-lite { padding: 1.25rem 1.4rem 1.4rem; }
.calc-lead-lite-title { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--navy); font-weight: 800; line-height: 1.3; }
.calc-lead-lite-sub { margin: 0 0 1rem; font-size: .9rem; color: #46505c; line-height: 1.45; }
.calc-lead-lite .lead-form-lite label { display: block; font-size: .82rem; font-weight: 700; color: var(--navy); margin: .85rem 0 .3rem; }
.calc-lead-lite .lead-form-lite input,
.calc-lead-lite .lead-form-lite textarea {
  display: block; width: 100%; padding: .65rem .8rem; font: inherit;
  border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  box-sizing: border-box;
}
.calc-lead-lite .lead-form-lite textarea { resize: vertical; min-height: 70px; font-family: inherit; }
.calc-lead-lite .lead-form-lite input:focus,
.calc-lead-lite .lead-form-lite textarea:focus { border-color: var(--navy); outline: none; }
.calc-lead-lite-optional { font-weight: 400; color: var(--muted); font-size: .85rem; }
/* Even 2-col grid for the lite capture fields (name/email, state/city) so inputs
   are right-sized in matched rows instead of stretched full-width (Brian 2026-07-31). */
.calc-lead-lite-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: .25rem;
}
.calc-lead-lite .lead-form-lite .calc-lead-lite-grid label {
  display: flex; flex-direction: column; gap: .3rem; margin: 0;
}
@media (max-width: 640px) { .calc-lead-lite-grid { grid-template-columns: 1fr; } }
.calc-lead-lite-submit {
  display: inline-block; margin-top: 1.1rem; padding: .8rem 1.4rem;
  background: var(--green); color: #fff; border: 0; border-radius: 8px;
  font-weight: 800; font-size: 1rem; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em;
}
.calc-lead-lite-submit:hover:not(:disabled) { background: #a02e22; }
.calc-lead-lite-submit:disabled { opacity: .65; cursor: default; }
.calc-lead-lite-msg { margin: .75rem 0 0; font-size: .9rem; font-weight: 600; min-height: 1.2em; }
.calc-lead-lite-promise {
  margin: 1rem 0 0; padding: .8rem 1rem;
  background: #f3f6fa; border-left: 3px solid var(--blue); border-radius: 6px;
  font-size: .82rem; line-height: 1.5; color: var(--muted);
}
.calc-lead-lite-promise strong { color: var(--navy); }

/* Ensure the main calc fits inside the .blog-article container.
   The article max-width is narrow; let the calc occupy full available width. */
.blog-article #calculator.calc-grid { max-width: 100%; margin: 1rem 0 1.5rem; }

/* ------------------------------------------------------------------
   Credit-band note rendered inside the calculator program-insights
   panel. Updates live as the visitor changes loan type or credit
   band. Color-coded against the navy/gold brand palette.
   ------------------------------------------------------------------ */
.calc-credit-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #eef5ff;
  border-left: 4px solid var(--blue);
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.calc-credit-note strong { color: var(--navy); }

/* ------------------------------------------------------------------
   Pro-contact opt-in toggle on the lite lead form (calc-lead-lite).
   Default = hidden phone+TCPA. When the user opts in, the .pro-fields
   block reveals with a subtle background to signal "you're now opting
   into being contacted by phone."
   ------------------------------------------------------------------ */
.calc-lead-lite-pro-toggle {
  display: flex; align-items: flex-start; gap: .65rem;
  margin: 1.1rem 0 .35rem;
  padding: .85rem 1rem;
  background: #f0f7ff;
  border: 1px solid #b7d4f5;
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink);
}
.calc-lead-lite-pro-toggle input { width: auto; margin-top: .25rem; flex: 0 0 auto; accent-color: var(--green); }
.calc-lead-lite-pro-toggle strong { color: var(--navy); }
.calc-lead-lite-pro-toggle em { color: var(--muted); font-style: italic; }

.calc-lead-lite-pro-fields {
  margin: .2rem 0 .25rem;
  padding: 1rem 1.1rem;
  background: #eef5ff;
  border-left: 3px solid var(--blue);
  border-radius: 6px;
}
.calc-lead-lite-pro-fields[hidden] { display: none; }

.calc-lead-lite-tcpa {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-top: .9rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}
.calc-lead-lite-tcpa input { width: auto; margin-top: .25rem; flex: 0 0 auto; accent-color: var(--green); }
.calc-lead-lite-tcpa strong { color: var(--navy); }
.calc-lead-lite-tcpa a { color: var(--navy); text-decoration: underline; }

/* ----- Quiz UI (added 2026-06-22, Task 10) ----- */
.quiz-article { max-width: 760px; }
/* Center the quiz headline + lede (center-by-default rule); wizard card below
   keeps its approved Better-style centered-column layout. */
.quiz-article > h1, .quiz-article .quiz-lede { text-align: center; }
.quiz-article .quiz-lede { max-width: 640px; margin-left: auto; margin-right: auto; }
.quiz-article .quiz-progress { justify-content: center; }
.quiz-lede { font-size: 1.05rem; color: #46505c; margin-bottom: 1.5rem; line-height: 1.55; }
.quiz-progress { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; }
.quiz-progress-bar { height: 6px; background: linear-gradient(90deg, #0D2137, #1a3352); border-radius: 99px; transition: width 0.3s ease; min-width: 6px; flex: 0 0 auto; }
.quiz-step-count { margin: 0; color: #7a8693; font-size: 0.9rem; }
.quiz-card { background: #fff; border: 1px solid #e0e6ec; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
.quiz-question { font-size: 1.35rem; color: #0D2137; margin: 0 0 0.4rem; }
.quiz-sublabel { color: #46505c; font-size: 0.95rem; margin: 0 0 1.25rem; line-height: 1.5; }
.quiz-input { display: block; width: 100%; padding: 0.7rem; font-size: 1rem; border: 2px solid #cdd5de; border-radius: 6px; box-sizing: border-box; }
.quiz-input:focus { border-color: #0D2137; outline: none; }
/* ZIP box right-sized for 5 digits, not stretched full-width (Brian 2026-08-19,
   Gate #10). Letter-spacing so the digits read clearly. */
.quiz-input-zip { max-width: 9rem; letter-spacing: 0.15em; }
.quiz-range-wrap { display: flex; align-items: center; gap: 1rem; }
.quiz-range { flex: 1; }
.quiz-range-val { font-weight: 700; font-size: 1.1rem; color: #0D2137; min-width: 100px; text-align: right; }
.quiz-error { color: #a33; min-height: 1.2em; margin: 0.5rem 0; font-size: 0.9rem; }
.quiz-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.quiz-back, .quiz-next { padding: 0.7rem 1.5rem; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 0; }
.quiz-back { background: #eef2f6; color: #46505c; }
.quiz-back:disabled { opacity: 0.5; cursor: not-allowed; }
.quiz-next { background: #0D2137; color: #fff; }
.quiz-next:hover:not(:disabled) { background: #1a3352; }

/* Results */
.quiz-disclaimer { background: #f0f7ff; border-left: 4px solid #1877E0; padding: 1rem 1.25rem; border-radius: 6px; margin: 1rem 0; font-size: 0.95rem; }
.quiz-disclaimer p { margin: 0 0 0.4rem; color: #0D2137; line-height: 1.5; }
.quiz-disclaimer p:last-child { margin-bottom: 0; }
.quiz-disclaimer-text { font-weight: 600; }
.quiz-disclaimer-aside { font-size: 0.88rem; color: #46505c; }
.quiz-lead-card { background: #eef5ff; border: 1px solid #b7d4f5; border-left: 4px solid #1877E0; border-radius: 6px; padding: 1.25rem 1.5rem; margin: 1rem 0 1.5rem; }
.quiz-lead-card h3 { margin: 0 0 0.4rem; color: #0D2137; }
.quiz-lead-card p { margin: 0 0 1rem; color: #46505c; font-size: 0.95rem; }
.quiz-lead-form { display: flex; flex-direction: column; gap: 0.6rem; }
.quiz-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 700; color: #0D2137; }
.quiz-field input { padding: 0.5rem; border: 2px solid #cdd5de; border-radius: 6px; font-size: 1rem; font-weight: 400; }
.quiz-pro-toggle, .quiz-tcpa { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; line-height: 1.5; color: #46505c; cursor: pointer; }
.quiz-pro-toggle input, .quiz-tcpa input { width: auto; margin-top: 0.25rem; flex: 0 0 auto; }
.quiz-pro-fields { padding: 0.85rem; background: #fff; border: 1px solid #e0e6ec; border-radius: 6px; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.quiz-pro-fields[hidden] { display: none; }
.quiz-lead-submit { padding: 0.8rem 1.4rem; background: #00B24C; color: #fff; border: 0; border-radius: 6px; font-weight: 800; font-size: 1rem; cursor: pointer; align-self: flex-start; }
.quiz-lead-submit:hover:not(:disabled) { background: #a02e22; }
.quiz-lead-submit:disabled { opacity: 0.65; cursor: default; }
.quiz-lead-msg { margin: 0; font-size: 0.9rem; min-height: 1.2em; font-weight: 600; }

.quiz-card-result { background: #fff; border: 1px solid #e0e6ec; border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1rem 0; }
.quiz-card-result h3 { margin: 0 0 0.75rem; color: #0D2137; }
.quiz-card-sub { color: #46505c; font-size: 0.95rem; margin-bottom: 1rem; }
.quiz-result-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.quiz-result-table td { padding: 0.5rem; border-bottom: 1px solid #eef2f6; }
.quiz-result-table td.num { text-align: right; font-weight: 700; color: #0D2137; font-variant-numeric: tabular-nums; }
.quiz-result-table tr.total td { border-top: 2px solid #0D2137; border-bottom: 0; font-weight: 700; font-size: 1.1rem; padding-top: 0.7rem; }
.quiz-result-table tr.total td.num { color: #00B24C; font-size: 1.2rem; }
.quiz-disclaim-sm { margin: 0.75rem 0 0; font-size: 0.8rem; color: #7a8693; font-style: italic; }
/* Educational down-payment-adequacy note (Brian 2026-08-19): shown when the entered
   down payment is below the program minimum. An info box, not an error. */
.quiz-down-note { margin: 0.9rem 0 0; padding: 0.8rem 1rem; background: rgba(24,119,224,.08);
  border-left: 3px solid #1877E0; border-radius: 4px; font-size: 0.9rem; line-height: 1.5;
  color: #24405a; }
/* Inline "go back" control in dead-end states so a person can return to correct
   an earlier step (Brian 2026-08-19). Styled as an inline link, not a big button. */
.quiz-inline-back { background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: #1877E0; text-decoration: underline; cursor: pointer; }
.quiz-inline-back:hover { color: #0d2137; }
.quiz-results-back { margin: 0 0 0.75rem; }
/* Left-arrow cue via CSS escape (keeps the JS label ASCII-only). */
.quiz-results-back .quiz-inline-back::before { content: "\2190\00a0"; text-decoration: none; }
.quiz-programs, .quiz-reality, .quiz-guides { padding-left: 1.2rem; }
.quiz-programs li, .quiz-reality li { margin: 0 0 0.85rem; line-height: 1.5; }
.quiz-guides li { margin: 0 0 1rem; }
.quiz-guides a { color: #0D2137; }
.quiz-guide-why { margin: 0.2rem 0 0; font-size: 0.9rem; color: #46505c; }

/* ==========================================================================
   Standalone USDA calculator (Brian 2026-08-05)
   Scoped to .usda-calc-root so it CANNOT affect the frozen/locked calculators
   (they never use these classes). Isolated look-and-feel for usda-calc.js.
   ========================================================================== */
.usda-calc-wrap { width: 100%; }
.usda-calc-root .calc-form { width: 100%; }
.usda-calc-root .calc-fields {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px;
}
.usda-calc-root .calc-field { display: flex; flex-direction: column; }
.usda-calc-root .calc-field-label { font-weight: 600; margin: 0 0 .35rem; }
.usda-calc-root .calc-field-sub { font-size: .78rem; color: var(--muted); margin: 0 0 .4rem; }
.usda-calc-root .calc-input { width: 100%; box-sizing: border-box; }
.usda-calc-root .usda-calc-results { margin-top: 1.75rem; }
.usda-calc-root .usda-calc-results h3 { margin: 0 0 .25rem; }
.usda-calc-root .calc-result-sub { color: var(--muted); margin: 0 0 1rem; }
.usda-calc-root .calc-result-table { width: 100%; border-collapse: collapse; margin: .4rem 0 1.25rem; }
.usda-calc-root .calc-result-table td { padding: .55rem .3rem; border-bottom: 1px solid #e6ebf1; }
.usda-calc-root .calc-result-table td:last-child { text-align: right; white-space: nowrap; }
.usda-calc-root .calc-result-table tfoot td {
  border-top: 2px solid #c9d3de; border-bottom: none; font-size: 1.08rem; padding-top: .7rem;
}
.usda-calc-root .calc-assume { font-size: .82rem; color: var(--muted); margin: .4rem 0 1rem; padding-left: 1.15rem; }
.usda-calc-root .calc-assume li { margin: .2rem 0; }
.usda-calc-root .calc-note,
.usda-calc-root .calc-disclaimer { font-size: .82rem; color: var(--muted); margin: .6rem 0; }
.usda-calc-root .calc-empty { color: var(--muted); padding: 1.25rem; background: #f6f8fb; border-radius: 10px; }
.usda-calc-root .usda-lead { margin-top: 1.5rem; }
.usda-calc-root .usda-lead-form:not([hidden]) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: .85rem;
}
.usda-calc-root .usda-lead-form .btn,
.usda-calc-root .usda-tcpa,
.usda-calc-root .usda-lead-msg { grid-column: 1 / -1; }
.usda-calc-root .usda-tcpa { font-size: .8rem; display: flex; gap: .5rem; align-items: flex-start; color: var(--muted); }
.usda-calc-root .usda-lead-msg { font-size: .85rem; margin: .25rem 0 0; }
@media (max-width: 760px) {
  .usda-calc-root .calc-fields { grid-template-columns: 1fr; }
  .usda-calc-root .usda-lead-form:not([hidden]) { grid-template-columns: 1fr; }
}

/* Calc-tool pages (/calculators/va/, home-purchase, jumbo, refinance): center the
   hero heading + intro, matching the site's "center by default" rule (Brian
   2026-08-05: "VA Loan Calculator" H1 was left-aligned). Scoped to the calc-page
   hero only — the calculator widget below keeps its own layout. */
.calc-main-solo > h1,
.calc-main-solo > .lede { text-align: center; }