/* theme.css — Sam Timlick site-wide visual system (loaded after site.css on every page)
   Palette: primary blue #1A4B8C, deep navy #17325F, white, light #F3F6FA, text #1F2937,
   secondary #475569, border #DDE5EF. No gold accents. Branded elements use the official
   NFM Lending logo, unaltered. */

/* ---------- 1. TOKENS ---------- */
/* NFM brand: navy #0B2343, blue #5B8AB7 (from the official logo). Text-weight accents use a deeper
   shade of NFM blue (#3A6894) so links and buttons meet WCAG AA on light backgrounds. */
:root {
  --nfm-navy: #0b2343;
  --nfm-blue: #5b8ab7;
  --accent: #3a6894;          /* NFM blue, deepened for text contrast */
  --accent-hover: #2e5781;
  --page: #ffffff;
  --white: #ffffff;           /* legacy name = page / card surface */
  --surface: #ffffff;         /* cards */
  --soft: #f4f6f9;            /* alternate sections, quiet panels */
  --soft-2: #eaeff5;          /* hero and footer bands */
  --green: #3a6894;           /* legacy name = accent */
  --green-dark: #0b2343;      /* legacy name = navy emphasis */
  --green-light: #f4f6f9;
  --gold: #5b8ab7;            /* legacy name = decorative NFM blue (borders, rules); no gold is used */
  --navy: #0b2343;
  --text: #1f2937;
  --text-dark: #1f2937;
  --text-muted: #475569;
  --border: #dce3ec;
  --heading: #0b2343;
  --max: 1160px;
  --read: 740px;
  --radius: 12px;
  --radius-sm: 10px;
  --btn-bg: #3a6894;
  --btn-bg-hover: #2e5781;
  --btn-fg: #ffffff;
  --link: #3a6894;
  --shadow: 0 1px 2px rgba(11, 35, 67, 0.05), 0 2px 10px rgba(11, 35, 67, 0.05);
  --focus: #3a6894;
  --tag-bg: #e3ebf5;
  --tag-fg: #0b2343;
  --section-y: 64px;
  --section-y-sm: 40px;
}
html[data-theme="dark"] {
  --accent: #9dc0e3;
  --accent-hover: #b9d3ec;
  --page: #232b36;            /* slate charcoal */
  --white: #232b36;
  --surface: #2b3542;
  --soft: #28313d;
  --soft-2: #2d3744;
  --green: #9dc0e3;
  --green-dark: #dbe7f4;
  --green-light: #2b3542;
  --gold: #7fa6cc;
  --navy: #1c232d;
  --text: #e7ecf3;
  --text-dark: #e7ecf3;
  --text-muted: #b6c2d1;
  --border: #3d4a5b;
  --heading: #f1f5fa;
  --btn-bg: #3e6e9e;
  --btn-bg-hover: #4a7dad;
  --btn-fg: #ffffff;
  --link: #9dc0e3;
  --focus: #9dc0e3;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.12);
  --tag-bg: #354559;
  --tag-fg: #e3edf8;
}

/* ---------- 2. BASE TYPE ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--page);
}
h1, h2, h3, h4 { color: var(--heading); text-wrap: balance; }
.prose h2, .section-title, .cta-strip h2 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.1rem); line-height: 1.2; }
.prose h2 { margin: 48px 0 16px; scroll-margin-top: 88px; }
.prose h3 { font-size: 1.25rem; margin: 32px 0 10px; color: var(--heading); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.65; color: var(--text); }
.prose p { margin-bottom: 18px; }
.prose a, .link, a.inline-link { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(26, 75, 140, 0.35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose .link-card, .prose .btn-primary, .prose .btn-secondary, .prose .btn-outline-green, .prose .btn-outline-gold, .prose .toc a, .prose .tile { text-decoration: none; font-weight: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}
.content { padding: var(--section-y) 24px; }
.content-inner { max-width: var(--read); margin: 0 auto; }
.content-wide, .section-inner, .page-hero-inner, .breadcrumb-inner { max-width: var(--max); }
.section-label, .eyebrow, .answer-box .q {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.section-label { color: var(--link); margin-bottom: 8px; }
@media (max-width: 700px) {
  .content { padding: var(--section-y-sm) 20px; }
  .prose h2 { margin-top: 36px; }
}

/* ---------- 3. SECTION SURFACES (solid, no big gradients) ---------- */
.page-hero { background: var(--soft-2); color: var(--text); padding: 52px 24px 48px; border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.12; color: var(--heading); max-width: 880px; }
.page-hero p { font-size: 1.125rem; color: var(--text); max-width: 680px; }
.page-hero .eyebrow { color: var(--accent); }
.breadcrumb { background: var(--page); border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.breadcrumb-inner a { color: var(--link); }
.cta-strip { background: var(--soft-2); padding: 56px 24px; border-top: 1px solid var(--border); }
.cta-strip p { color: var(--text); }
.cta-strip .disclaimer { color: var(--text-muted); }
.section-alt, .bg-soft { background: var(--soft); }

/* ---------- 4. BUTTONS (one system) ---------- */
.btn, .btn-primary, .btn-secondary, .btn-outline-green, .btn-outline-gold, .nav-cta, .mm-book, .hero-btn,
.cta-btn, .book-btn, .calc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 26px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; opacity: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
/* primary on light */
.btn-primary, .btn.primary, .mm-book, .nav-cta, .hero-btn, .cta-btn, .book-btn, .calc-btn {
  background: var(--btn-bg); color: var(--btn-fg) !important; border-color: var(--btn-bg);
}
.btn-primary:hover, .btn.primary:hover, .mm-book:hover, .nav-cta:hover, .hero-btn:hover, .cta-btn:hover, .book-btn:hover, .calc-btn:hover {
  background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); opacity: 1;
}
/* secondary (outline) on light */
.btn-secondary, .btn-outline-green, .btn-outline-gold, .btn.secondary {
  background: transparent; color: var(--link) !important; border-color: var(--green);
}
.btn-secondary:hover, .btn-outline-green:hover, .btn-outline-gold:hover, .btn.secondary:hover {
  background: var(--soft); color: var(--green-dark) !important; border-color: var(--green-dark);
}
html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-outline-green:hover, html[data-theme="dark"] .btn-outline-gold:hover { color: var(--heading) !important; background: rgba(157,192,227,.12); border-color: var(--accent); }
/* on navy: primary = white with navy text; secondary = white outline */
.on-navy .btn-primary, .navy-band .btn-primary {
  background: #fff; color: var(--navy) !important; border-color: #fff;
}
.on-navy .btn-primary:hover, .navy-band .btn-primary:hover {
  background: #e8eff9; border-color: #e8eff9;
}
.on-navy .btn-secondary, .on-navy .btn-outline-gold, .navy-band .btn-secondary, .navy-band .btn-outline-gold {
  background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, 0.85);
}
.on-navy .btn-secondary:hover, .on-navy .btn-outline-gold:hover, .navy-band .btn-secondary:hover, .navy-band .btn-outline-gold:hover {
  background: rgba(255, 255, 255, 0.14); color: #fff !important; border-color: #fff;
}
html[data-theme="dark"] .btn-primary { color: #fff !important; }
html[data-theme="dark"] .on-navy .btn-primary, html[data-theme="dark"] .navy-band .btn-primary { color: #17325f !important; }
.btn-primary[disabled], .btn-primary[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.hero-actions, .cta-options { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-sm { min-height: 44px; padding: 8px 18px; font-size: .9375rem; }
.btn-link, .text-link { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(58,104,148,.4); }
.btn-link:hover, .text-link:hover { text-decoration-color: currentColor; }
.navy-band .text-link { color: #dbe7f7; text-decoration-color: rgba(255,255,255,.4); }

/* ---------- 5. CARDS ---------- */
.link-card, .pc-card, .author-box, .calc-hub-card, .program-card, .tool, .review-box, .nl-issue-card, .pc, .tile, .facts, .faq-list,
.result-item, .coe-opt {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.link-card, .calc-hub-card, .program-card, .tile { padding: 24px; }
.link-card h3, .calc-hub-card h3, .program-card h3, .tile h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 8px; }
.link-card p, .calc-hub-card p, .program-card p, .tile p { font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
.link-card .arrow { color: var(--link); font-weight: 700; font-size: .9375rem; margin-top: 12px; }
.card-grid { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
@media (hover: hover) and (pointer: fine) {
  .link-card:hover, .calc-hub-card:hover, .program-card:hover, .tile:hover { border-color: var(--green); box-shadow: 0 6px 20px rgba(23, 50, 95, 0.1); transform: translateY(-2px); }
}
.answer-box { background: var(--soft); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: var(--radius-sm); padding: 22px 26px; }
.answer-box p { font-size: 1.0625rem; }
.facts { overflow: hidden; }
.facts-row { padding: 14px 20px; font-size: 1rem; }
.facts-row .k { color: var(--heading); }
.facts-row .v { color: var(--text); }
.tool { padding: 28px; background: var(--soft); }
.tool label { text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 600; }
.tool select, .tool input, input[type="text"], input[type="email"], input[type="number"], select, textarea {
  min-height: 48px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-size: 1rem;
}
.tool-result.likely { background: #eaf1fb; border-color: #b8cdea; }
.tool-result.maybe { background: var(--soft); border-color: var(--border); }
.area-tag { border-radius: 999px; font-size: .9375rem; padding: 7px 16px; }
.new-badge { background: var(--tag-bg); color: var(--tag-fg); }
.callout, .note-box { background: var(--soft); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: var(--radius-sm); padding: 18px 22px; margin: 24px 0; }
.va-card, .link-card.is-va, .program-card.is-va { border-top: 4px solid var(--green); }
.badge, .specialty-badge { display: inline-block; font-size: .8125rem; font-weight: 700; color: var(--green-dark); background: var(--tag-bg); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; letter-spacing: .02em; }
html[data-theme="dark"] .badge, html[data-theme="dark"] .specialty-badge { color: var(--tag-fg); }

/* tables */
table { font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
thead { background: var(--soft); }
.table-wrap { overflow-x: auto; margin: 20px 0; }
.table-wrap table { margin: 0; min-width: 520px; }

/* icons (line style) */
.ic { width: 28px; height: 28px; stroke: var(--green); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-wrap { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--soft); border: 1px solid var(--border); margin-bottom: 14px; }
.ic-wrap .ic { width: 26px; height: 26px; }

/* ---------- 6. TABLE OF CONTENTS ---------- */
.toc { background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 22px; margin: 0 0 32px; }
.toc-title { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.toc li { break-inside: avoid; margin: 0; }
.toc a { display: block; padding: 6px 0; font-size: 1rem; line-height: 1.35; color: var(--link); font-weight: 600; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* ---------- 7. HEADER ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--border); }
.site-header.scrolled { box-shadow: 0 2px 14px rgba(23, 50, 95, 0.08); }
.sh-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; min-height: 68px; display: flex; align-items: center; gap: 16px; }
.sh-brand { display: flex; flex-direction: column; line-height: 1.2; flex-shrink: 0; color: var(--heading); }
.sh-name { font-family: 'Libre Franklin', 'Inter', sans-serif; font-weight: 800; font-size: 1.0625rem; white-space: nowrap; letter-spacing: -0.01em; color: var(--heading); }
.sh-name .sh-sep { color: var(--text-muted); font-weight: 400; margin: 0 6px; }
.sh-name .sh-tag { font-weight: 600; color: var(--green); }
.sh-meta { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.sh-nfm { display: inline-flex; align-items: center; padding-left: 16px; margin-left: 2px; border-left: 1px solid var(--border); flex-shrink: 0; }
.sh-nfm img { height: 24px; width: auto; display: block; }
html[data-theme="dark"] .sh-nfm { padding: 5px 10px; margin-left: 8px; border: 0; background: #fff; border-radius: 8px; }
.sh-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; position: static; background: none; border: 0; padding: 0; height: auto; box-shadow: none; }
.sh-nav a.sh-link, .sh-dd-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px; border-radius: 8px;
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--text); background: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.sh-nav a.sh-link:hover, .sh-dd-btn:hover, .sh-dd.open > .sh-dd-btn, .sh-nav a.sh-link[aria-current="page"] { background: var(--soft); color: var(--green); }
.sh-nav a.sh-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--green); border-radius: 8px 8px 0 0; }
.sh-caret { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.sh-dd.open .sh-caret { transform: rotate(180deg); }
.sh-dd { position: relative; }
.sh-dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(23, 50, 95, 0.16); padding: 10px; display: none; z-index: 120;
}
.sh-dd-menu.wide { min-width: 560px; display: none; grid-template-columns: 1fr 1fr; gap: 4px 18px; padding: 14px 16px; }
html:not(.js) .sh-dd:hover > .sh-dd-menu, html:not(.js) .sh-dd:focus-within > .sh-dd-menu, .sh-dd.open > .sh-dd-menu { display: block; }
html:not(.js) .sh-dd:hover > .sh-dd-menu.wide, html:not(.js) .sh-dd:focus-within > .sh-dd-menu.wide, .sh-dd.open > .sh-dd-menu.wide { display: grid; }
.sh-dd-group { display: block; }
.sh-dd-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 4px; }
.sh-dd-menu a { display: block; padding: 8px 10px; border-radius: 8px; font-size: .9688rem; font-weight: 500; color: var(--text); text-decoration: none; line-height: 1.3; }
.sh-dd-menu a:hover, .sh-dd-menu a:focus-visible { background: var(--soft); color: var(--green); }
.sh-dd-menu a[aria-current="page"] { color: var(--green); font-weight: 700; }
.sh-dd-feature { grid-column: 1 / -1; background: var(--soft); border: 1px solid var(--border); font-weight: 700 !important; color: var(--green) !important; }
.sh-cta { margin-left: 6px; min-height: 46px; padding: 10px 18px; font-size: .9375rem; }
.sh-theme { margin-left: 4px; }
.theme-toggle { width: 44px; height: 44px; border-radius: 10px; background: none; border: 1px solid transparent; color: var(--heading); }
.theme-toggle:hover { background: var(--soft); border-color: var(--border); }
.nav-hamburger { display: none; width: 46px; height: 46px; }
.nav-hamburger span { background: var(--heading); }
@media (max-width: 1200px) {
  .sh-nav a.sh-link, .sh-dd { display: none !important; }
  .sh-nav { margin-left: auto; }
  .nav-hamburger { display: flex; }
  .sh-cta { margin-left: 0; }
}
@media (max-width: 700px) {
  .sh-inner { min-height: 60px; padding: 0 14px; gap: 12px; }
  .sh-cta, .sh-theme { display: none !important; }
  .sh-nfm { padding-left: 12px; }
  .sh-nfm img { height: 20px; }
  .sh-name { font-size: 1.0625rem; }
  .sh-name .sh-sep, .sh-name .sh-tag { display: none; }
  .sh-meta { font-size: .78rem; }
  .sh-meta .sh-tag-m { display: none; }
}
@media (min-width: 701px) { .sh-meta .sh-tag-m { display: none; } }
@media (max-width: 700px) { .sh-name .sh-sep, .sh-name .sh-tag { display: none; } }
@media (max-width: 400px) { .sh-nfm img { height: 17px; } .sh-nfm { padding-left: 10px; } .sh-inner { gap: 8px; } }

/* mobile menu */
.mobile-menu-panel { background: var(--white); }
.mobile-menu-head { padding: 14px 20px; }
.mm-brand-logo { height: 24px; width: auto; display: block; }
html[data-theme="dark"] .mm-logo-plate { background: #fff; padding: 4px 8px; border-radius: 6px; }
.mm-label { color: var(--green); font-size: .8125rem; letter-spacing: .05em; }
.mm-group a { font-size: 1.0625rem; min-height: 44px; align-items: center; }
.mm-sub { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 10px 0 0; }
.mm-book { width: 100%; }
.mm-call { color: var(--link); font-weight: 700; padding: 8px; }
.mobile-menu-foot .mm-theme { align-self: center; }
.mobile-sticky-cta { background: var(--white) !important; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(23,50,95,.08); gap: 10px; padding: 8px 12px !important; animation: none !important; }
.mobile-sticky-cta a { border-radius: var(--radius-sm); min-height: 48px; font-size: 1rem; border: 2px solid var(--green); }
.mobile-sticky-cta a.msc-call { background: transparent !important; color: var(--link) !important; }
.mobile-sticky-cta a.msc-book { background: var(--btn-bg) !important; color: #fff !important; border-color: var(--btn-bg); }
.mobile-sticky-cta a + a { border-left: 2px solid var(--btn-bg); }
.mobile-sticky-cta svg { stroke: currentColor; }
#scrollProgress { display: none; }
#backToTop { background: var(--btn-bg); }

/* ---------- 8. FOOTER ---------- */
.site-footer { background: var(--soft-2); color: var(--text); padding: 56px 24px 28px; font-size: 1rem; border-top: 1px solid var(--border); }
html[data-theme="dark"] .site-footer { background: #1f2630; }
.sf-inner { max-width: var(--max); margin: 0 auto; }
.sf-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.sf-id { display: flex; flex-direction: column; gap: 3px; }
.sf-name { font-family: 'Libre Franklin', 'Inter', sans-serif; font-size: 1.375rem; font-weight: 800; color: var(--heading); }
.sf-sub { color: var(--text-muted); font-size: 1rem; }
.sf-logo { display: inline-flex; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; }
.sf-logo img { height: 34px; width: auto; display: block; }
.sf-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px 0; }
.sf-h { font-family: 'Inter', sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); margin-bottom: 12px; }
.sf-col ul { list-style: none; margin: 0; padding: 0; }
.sf-col li { margin: 0; }
.sf-col a { display: inline-block; padding: 5px 0; color: var(--text); font-size: 1rem; line-height: 1.35; text-decoration: none; }
.sf-col a:hover, .sf-col a:focus-visible { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.sf-col a:focus-visible, .site-footer a:focus-visible { outline-color: var(--focus); }
.sf-legal { border-top: 1px solid var(--border); padding-top: 24px; font-size: .9063rem; line-height: 1.65; color: var(--text-muted); max-width: 980px; }
.sf-legal a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.sf-legal p + p { margin-top: 12px; }
.sf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; font-size: .875rem; color: var(--text-muted); }
.sf-eho { display: inline-flex; align-items: center; gap: 8px; color: var(--heading); font-weight: 600; }
.sf-eho svg { stroke: currentColor; }
@media (max-width: 900px) { .sf-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sf-cols { grid-template-columns: 1fr; gap: 24px; } .site-footer { padding: 40px 20px 24px; } .sf-top { flex-direction: column; align-items: flex-start; } }

/* ---------- 9. MOTION: no reveal animations, content always visible ---------- */
.reveal, html.js .reveal, html.js .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .link-card:hover, .calc-hub-card:hover, .program-card:hover, .tile:hover { transform: none !important; }
}

/* ---------- 10. DARK-MODE PATCHES ---------- */
html[data-theme="dark"] body { background: var(--page); }
html[data-theme="dark"] .site-header { background: var(--page); }
html[data-theme="dark"] .mobile-menu-panel { background: var(--surface); }
html[data-theme="dark"] .answer-box, html[data-theme="dark"] .callout { background: var(--surface); }
html[data-theme="dark"] .tool-result.likely { background: var(--soft-2); border-color: var(--border); }
html[data-theme="dark"] .prose a { text-decoration-color: rgba(141, 180, 230, .45); }

/* ---------- 11. neutralise legacy bare `nav` rule (sticky/white/padding) on non-header navs ---------- */
nav.toc, nav.sf-col, nav.sh-nav { position: static; top: auto; z-index: auto; }
nav.sf-col { background: transparent; border: 0; padding: 0; box-shadow: none; }
nav.toc { padding: 18px 22px; background: var(--soft); border: 1px solid var(--border); }
.nav-hamburger{flex-shrink:0}

/* ---------- 12. RATE NOTE (compact market context strip; replaces large rate callouts) ---------- */
.rate-note-wrap { background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 24px; }
.rate-note { max-width: var(--read); margin: 0 auto; }
.rate-note-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 1.0625rem; color: var(--text); }
.rate-note-label { font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.rate-note-val { font-family: 'Libre Franklin', 'Inter', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--heading); }
.rate-note-src { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: var(--text-muted); }
.rate-note-src a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 13. TILES / GRIDS (calculator hub, previews, resource groups) ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 8px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
a.tile { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.tile p { flex: 1; }
.tile-tag { display: inline-block; align-self: flex-start; font-size: .8125rem; font-weight: 700; color: var(--green-dark); background: var(--tag-bg); border-radius: 999px; padding: 3px 11px; margin-bottom: 10px; letter-spacing: .02em; }
html[data-theme="dark"] .tile-tag { background: var(--tag-bg); color: var(--tag-fg); }
.tile-action { margin-top: 14px; font-weight: 700; font-size: .9375rem; color: var(--link); }
.tile-feature { display: flex; gap: 24px; align-items: flex-start; padding: 32px; border-top: 4px solid var(--green); margin-bottom: 48px; }
.tile-feature h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin: 0 0 10px; line-height: 1.2; }
.tile-feature p { font-size: 1.0625rem; color: var(--text-muted); margin-bottom: 20px; max-width: 62ch; }
.tile-feature-icon .ic-wrap { width: 64px; height: 64px; margin: 0; }
.tile-feature-icon .ic-wrap .ic { width: 32px; height: 32px; }
@media (max-width: 620px) { .tile-feature { flex-direction: column; padding: 24px; gap: 8px; } }
.ic-inline { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub-h { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 6px; }
.hub-sub { color: var(--text-muted); margin-bottom: 20px; max-width: 70ch; }
.hub-note { margin-top: 40px; }
.hub-note p { margin: 6px 0 0; font-size: 1rem; }
.hub-note a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 14. HOMEPAGE + SHARED SECTION PATTERNS ---------- */
.section { padding: var(--section-y) 24px; }
.section.alt { background: var(--soft); }
.section-inner { max-width: var(--max); margin: 0 auto; }
.section-head { max-width: 760px; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.1rem); line-height: 1.2; margin-bottom: 10px; }
.section-head p { color: var(--text-muted); font-size: 1.0625rem; }
.section-more { margin-top: 28px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
@media (max-width: 700px) { .section { padding: var(--section-y-sm) 20px; } .section-head { margin-bottom: 24px; } }

/* hero */
.hero { background: var(--soft-2); color: var(--text); padding: 56px 24px 60px; border-bottom: 1px solid var(--border); }
.hero-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
.hero-eyebrow { font-size: .875rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); margin-bottom: 14px; }
.hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.12; color: var(--heading); margin-bottom: 18px; text-wrap: balance; }
.hero h1 .nb { white-space: nowrap; }
.hero-sub { font-size: 1.1875rem; line-height: 1.55; color: var(--text); max-width: 34em; margin-bottom: 26px; }
.hero-links-row { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: .9688rem; }
.hero-links-row a { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(58, 104, 148, .35); text-underline-offset: 3px; padding: 4px 0; }
.hero-links-row a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.hero-photo-wrap { justify-self: end; width: 100%; max-width: 300px; }
.hero-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
@media (max-width: 860px) {
  .hero { padding: 36px 20px 44px; }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo-wrap { order: -1; justify-self: start; max-width: 168px; }
  .hero-photo { aspect-ratio: 1 / 1; object-position: center 15%; }
  .hero-sub { font-size: 1.0625rem; }
  .hero-actions .btn-primary, .hero-actions .btn-outline-gold, .hero-actions .btn-secondary { flex: 1 1 100%; }
}

/* reviews */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .review-grid { grid-template-columns: 1fr; } }
.review-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; display: flex; flex-direction: column; margin: 0; }
.review-card blockquote { font-size: 1.125rem; line-height: 1.55; color: var(--text); margin: 0 0 18px; flex: 1; }
.review-card blockquote::before { content: ""; display: block; width: 28px; height: 3px; background: var(--green); border-radius: 2px; margin-bottom: 14px; }
.review-card figcaption { font-size: .9688rem; line-height: 1.45; color: var(--text-muted); }
.review-card .rc-name { display: block; font-weight: 700; color: var(--heading); font-size: 1.0625rem; }
.review-card .rc-link { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .9688rem; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.review-full { padding: 28px 0; border-bottom: 1px solid var(--border); }
.review-full:last-of-type { border-bottom: 0; }
.review-full blockquote { font-size: 1.125rem; line-height: 1.65; margin: 0 0 12px; color: var(--text); }
.review-full .rc-meta { font-size: .9688rem; color: var(--text-muted); }
.review-full .rc-name { font-weight: 700; color: var(--heading); }

/* program tiles */
.tile.is-va { border-top: 4px solid var(--green); background: var(--white); }
.tile.is-va .tile-tag { background: var(--green); color: #fff; }
html[data-theme="dark"] .tile.is-va .tile-tag { background: var(--btn-bg); color: #fff; }

/* veteran + local */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.panel h2, .panel h3 { font-size: clamp(1.5rem, 1.2rem + .9vw, 1.9rem); line-height: 1.2; margin-bottom: 12px; }
.panel p { color: var(--text); margin-bottom: 14px; font-size: 1.0625rem; }
.panel.is-va { border-top: 4px solid var(--green); }
.check-list { list-style: none; margin: 4px 0 16px; padding: 0; }
.check-list li { position: relative; padding: 5px 0 5px 28px; font-size: 1.0625rem; line-height: 1.5; color: var(--text); }
.check-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 14px; height: 8px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg) scale(.9); }
.fine-print { font-size: .875rem; line-height: 1.55; color: var(--text-muted); margin-top: 12px; }
.facts-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.facts-strip div { background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .9688rem; line-height: 1.35; color: var(--text-muted); }
.facts-strip strong { display: block; font-size: 1.1875rem; color: var(--heading); font-family: 'Libre Franklin', 'Inter', sans-serif; }
@media (max-width: 520px) { .facts-strip { grid-template-columns: 1fr; } }

/* process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps li { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: relative; }
.steps li::before { counter-increment: s; content: counter(s); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; margin-bottom: 12px; }
html[data-theme="dark"] .steps li::before { background: var(--btn-bg); }
.steps h3 { font-size: 1.125rem; line-height: 1.3; margin-bottom: 6px; }
.steps p { font-size: 1rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* market comparison cards */
.mkt-label { display: inline-block; font-size: .875rem; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.mkt-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.mkt-card h3 { font-size: 1.1875rem; margin-bottom: 12px; }
.mkt-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 1rem; color: var(--text-muted); }
.mkt-row strong { color: var(--heading); font-weight: 700; text-align: right; }
.mkt-note { font-size: .875rem; color: var(--text-muted); margin-top: 14px; line-height: 1.5; }

/* FAQ accordion (shared) */
.faq-list { border-radius: var(--radius); background: var(--white); }
.faq-question { font-size: 1.0625rem; font-weight: 600; padding: 18px 22px; color: var(--heading); min-height: 56px; font-family: inherit; line-height: 1.4; }
.faq-question:hover { background: var(--soft); }
.faq-answer { font-size: 1.0625rem; line-height: 1.65; color: var(--text); padding: 0 22px 20px; }
.faq-answer a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* final contact band */
.contact-band { background: var(--soft); color: var(--text); padding: 64px 24px; text-align: center; border-top: 1px solid var(--border); }
.contact-band h2 { color: var(--heading); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.1rem); margin-bottom: 12px; }
.contact-band p { color: var(--text); max-width: 40em; margin: 0 auto 26px; font-size: 1.125rem; }
.contact-band .hero-actions { justify-content: center; }
.contact-band .quiet { margin: 22px auto 0; font-size: .9688rem; color: var(--text-muted); }
.contact-band .quiet a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.area-line { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }

/* rate charts (light, high contrast) */
.chart-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin: 24px 0; }
.chart-card h2, .chart-card h3 { font-size: 1.25rem; margin-bottom: 4px; }
.chart-cap { font-size: .9688rem; color: var(--text-muted); margin-bottom: 14px; }
.chart-src { font-size: .875rem; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }
.chart-src a { color: var(--link); text-decoration: underline; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.seg button { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--green); background: var(--white); color: var(--link); font: inherit; font-size: .9688rem; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg text { fill: var(--text); font-family: 'Inter', sans-serif; }
.chart-svg .grid { stroke: var(--border); stroke-width: 1; }
.chart-svg .axis-label { font-size: 13px; fill: var(--text-muted); }
.chart-svg .avg-line { stroke: var(--text-muted); stroke-width: 1.75; stroke-dasharray: 6 4; }
.chart-svg .avg-label { font-size: 12.5px; font-weight: 600; fill: var(--text); }
.chart-svg .series { fill: none; stroke: var(--green); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .area { fill: var(--green); opacity: .1; }
.chart-svg .pt { fill: var(--green); stroke: var(--white); stroke-width: 2; }
.chart-svg .bar { fill: #9fb6d4; }
.chart-svg .bar.hl { fill: var(--green); }
.chart-svg .val-label { font-size: 12.5px; font-weight: 600; fill: var(--text); }
html[data-theme="dark"] .chart-svg .bar { fill: #4a6489; }
html[data-theme="dark"] .chart-svg .bar.hl { fill: #8db4e6; }
html[data-theme="dark"] .chart-svg .pt { stroke: var(--page); }
.data-table-details { margin-top: 12px; }
.data-table-details summary { cursor: pointer; font-weight: 600; color: var(--link); padding: 8px 0; }

/* ---------- 15. refinements after first render ---------- */
.hero-photo { height: auto; }
.sh-cta, .sh-nav a.sh-link, .sh-dd-btn { white-space: nowrap; }
.tile.is-va, .panel.is-va, .tile-feature { border-top-width: 1px; box-shadow: inset 0 4px 0 var(--green), var(--shadow); }
.review-card .rc-src { display: block; }
.site-footer { border-top: 1px solid var(--border); }

/* ---- agent page patterns ---- */
.event-card, .split-card { display: flex; align-items: center; gap: 20px; background: var(--green-light); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 12px; padding: 20px 24px; flex-wrap: wrap; }
.event-card .ev-body, .split-card .ev-body { flex: 1 1 320px; min-width: 0; }
.event-card h2, .split-card h2 { font-size: 1.3rem; margin: 0 0 6px; }
.event-card p, .split-card p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
.event-card .ev-ic, .split-card .ev-ic { flex: 0 0 auto; }
.review-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .review-grid-2 { grid-template-columns: 1fr; } }
.sub-h { font-size: 1.4rem; margin: 36px 0 12px; scroll-margin-top: 90px; }
.chart-note { font-size: .9375rem; color: var(--text-muted); margin: 0 0 12px; }
.group-h{font-size:1.4rem;margin:36px 0 14px}.group-h:first-child{margin-top:0}

.cta-strip h2, .cta-strip h3, .contact-band h2 { color: var(--heading); }
.on-navy h2 { color: #fff; }
.loop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: stretch; margin: 16px 0; }
.loop-grid .loop-arrow { display: none; }
.loop-step { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 18px 14px; text-align: center; }
.loop-step h4 { font-size: 1rem; margin: 8px 0 4px; }
.loop-step p { font-size: .9375rem; color: var(--text-muted); margin: 0; }
.loop-icon .ic { width: 28px; height: 28px; stroke: var(--green); fill: none; stroke-width: 1.7; }
@media (max-width: 900px) { .loop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .loop-grid { grid-template-columns: 1fr; } }

/* ---------- 16. Oct 12 refinements: Google rating label, jump links, compact footer, small-phone fixes ---------- */
/* Google rating label (visible content only, no rating schema) */
.g-rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 14px; min-height: 36px; border: 1px solid var(--border); border-radius: 999px; background: var(--soft); color: var(--heading); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.g-rating:hover, .g-rating:focus-visible { border-color: var(--green); color: var(--green); }
.g-rating-score { font-weight: 800; }
.g-rating-star { color: var(--green); font-size: 1.05em; line-height: 1; }

/* note under page-hero buttons */
.page-hero .hero-note { font-size: .9375rem; color: var(--text-muted); margin-top: 14px; max-width: 640px; }

/* jump links under the hero on long pages */
.jump-links { background: var(--soft); border-bottom: 1px solid var(--border); }
.jump-inner { max-width: var(--max); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 12px; }
.jump-title { flex-shrink: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.jump-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jump-links li { margin: 0; }
.jump-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--link); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.jump-links a:hover, .jump-links a:focus-visible { border-color: var(--green); }
section[id], h2[id] { scroll-margin-top: 84px; }
@media (max-width: 700px) {
  .jump-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0 12px 16px; }
  .jump-links ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 16px; -webkit-overflow-scrolling: touch; }
  .jump-links ul::-webkit-scrollbar { display: none; }
}

/* header: keep logo + menu button inside small phones */
@media (max-width: 700px) { .sh-nav { display: none; } }
@media (max-width: 440px) {
  .sh-inner { padding: 0 12px; gap: 8px; }
  .sh-brand { flex-shrink: 1; min-width: 0; }
  .sh-name, .sh-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sh-nfm { margin-left: auto; }
  html[data-theme="dark"] .sh-nfm { margin-left: auto; padding: 4px 8px; }
  .nav-hamburger { width: 44px; height: 44px; flex-shrink: 0; }
}

/* tighter cards on phones */
@media (max-width: 620px) {
  .review-card { padding: 20px; }
  .review-card blockquote { font-size: 1.0625rem; margin-bottom: 12px; }
  .review-card blockquote::before { margin-bottom: 10px; }
  .tile, .link-card, .program-card { padding: 18px; }
  .tile .ic-wrap { width: 40px; height: 40px; margin-bottom: 10px; }
  .tile .ic-wrap .ic { width: 22px; height: 22px; }
  .tile-tag { margin-bottom: 6px; }
  .tile-action { margin-top: 10px; }
  .grid-2, .grid-3, .grid-4 { gap: 12px; }
}

/* compact footer */
.site-footer { padding: 44px 24px 22px; }
.sf-top { padding-bottom: 20px; }
.sf-name { font-size: 1.25rem; }
.sf-sub { font-size: .9375rem; }
.sf-cols { gap: 24px; padding: 24px 0; }
.sf-h { margin-bottom: 8px; }
.sf-col a { padding: 3px 0; font-size: .9375rem; }
.sf-legal { padding-top: 18px; font-size: .8438rem; line-height: 1.55; }
.sf-legal p + p { margin-top: 8px; }
.sf-bottom { margin-top: 16px; }
@media (max-width: 520px) {
  .site-footer { padding: 32px 16px 20px; }
  .sf-top { gap: 14px; padding-bottom: 16px; }
  .sf-logo { padding: 8px 12px; }
  .sf-logo img { height: 28px; }
  .sf-cols { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding: 20px 0; }
  .sf-col a { font-size: .875rem; padding: 5px 0; overflow-wrap: anywhere; }
  .sf-legal { font-size: .8125rem; }
}
/* neutralise legacy bare `nav` rule for the jump bar and footer columns (incl. dark mode) */
nav.jump-links { position: static; top: auto; z-index: auto; padding: 0; box-shadow: none; }
html[data-theme="dark"] nav.jump-links { background: var(--soft); }
html[data-theme="dark"] nav.sf-col { background: transparent; }
@media (max-width: 520px) {
  .sf-col[aria-label="Connect"] { grid-column: 1 / -1; }
  .sf-col[aria-label="Connect"] ul { columns: 2; column-gap: 14px; }
  .sf-col[aria-label="Connect"] li { break-inside: avoid; }
  .sf-col[aria-label="Connect"] a { overflow-wrap: normal; white-space: nowrap; font-size: .8438rem; }
  .sf-col a { overflow-wrap: break-word; }
}
/* dark mode: legacy --gold token maps to light blue; hero headings stay white */
html[data-theme="dark"] .page-hero h1 { color: var(--heading); }
@media (max-width: 380px) { .sh-meta { font-size: .72rem; } .sh-name { font-size: 1rem; } }
.answer-box a[href^="tel:"], .hero-note a[href^="tel:"] { white-space: nowrap; }

/* ---------- 17. Lighter refresh (Oct 12): calm light surfaces, slate dark mode, NFM blue accents ---------- */
body { background: var(--page); }
.site-header { background: var(--page); }
.cta-strip { color: var(--text); }
.cta-strip h2 { color: var(--heading); }
/* quiet tinted panels sit on white; cards sit white on tinted sections */
.section.alt .tile, .section.alt .review-card, .section.alt .steps li, .section.alt .panel, .section.alt .faq-list, .section.alt .mkt-card { background: var(--surface); }
html[data-theme="dark"] .section.alt { background: var(--soft); }
html[data-theme="dark"] .tile, html[data-theme="dark"] .review-card, html[data-theme="dark"] .steps li, html[data-theme="dark"] .panel,
html[data-theme="dark"] .faq-list, html[data-theme="dark"] .mkt-card, html[data-theme="dark"] .chart-card, html[data-theme="dark"] .link-card,
html[data-theme="dark"] .tile.is-va { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .section.alt .tile, html[data-theme="dark"] .section.alt .review-card, html[data-theme="dark"] .section.alt .steps li,
html[data-theme="dark"] .section.alt .panel, html[data-theme="dark"] .section.alt .faq-list { background: #313c4a; }
.answer-box { background: var(--soft); border-left-color: var(--gold); }
.review-card blockquote::before { background: var(--gold); }
.tile:hover, .link-card:hover { border-color: var(--gold); }
/* inline table header rows that used the old accent as a fill */
html[data-theme="dark"] [style*="background:var(--green);color:#fff"], html[data-theme="dark"] [style*="background: var(--green); color: #fff"] { background: var(--btn-bg) !important; }
/* dark-mode small surfaces */
html[data-theme="dark"] .site-header { background: var(--page); border-bottom-color: var(--border); }
html[data-theme="dark"] .sh-dd-menu, html[data-theme="dark"] .mobile-menu-panel { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .sf-logo { border-color: transparent; }
html[data-theme="dark"] .site-footer { color: var(--text); }
html[data-theme="dark"] .hero-photo { border-color: var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .jump-links a { background: var(--surface); }
html[data-theme="dark"] .breadcrumb { background: var(--page); }
html[data-theme="dark"] .g-rating { background: var(--surface); }
html[data-theme="dark"] .contact-band, html[data-theme="dark"] .cta-strip, html[data-theme="dark"] .page-hero, html[data-theme="dark"] .hero { background: var(--soft-2); }

/* homepage hero: copy | Why-work-with-Sam card | photo */
.hero-inner { grid-template-columns: minmax(0, 1fr) 270px 250px; grid-template-areas: "copy why photo"; gap: 28px; align-items: center; }
.hero-copy { grid-area: copy; padding-right: 12px; }
.hero-photo-wrap { grid-area: photo; justify-self: stretch; max-width: none; }
.why-card { grid-area: why; align-self: center; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 20px 18px; }
.why-title { font-size: 1.125rem; line-height: 1.25; margin: 0 0 10px; color: var(--heading); }
.why-rating { margin: 0 0 12px; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.why-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 600; color: var(--text); }
.why-ic { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--tag-bg); stroke: var(--accent); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "copy photo" "copy why"; align-items: start; gap: 20px 32px; }
  .why-card { align-self: start; }
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 168px minmax(0, 1fr); grid-template-areas: "photo why" "copy copy"; gap: 20px; align-items: stretch; }
  .hero-photo-wrap { order: 0; justify-self: start; max-width: 168px; align-self: start; }
  .why-card { align-self: center; padding: 16px; }
  .hero-copy { padding-right: 0; }
}
@media (max-width: 480px) {
  .hero-inner { grid-template-columns: 1fr; grid-template-areas: "photo" "copy" "why"; }
  .why-card { padding: 16px 18px; }
}
/* bylines and inline-styled bits written for the old navy hero */
.page-hero .guide-byline, .page-hero [style*="rgba(255,255,255"], .page-hero [style*="rgba(255, 255, 255"], .page-hero [style*="color:#fff"], .page-hero [style*="color: #fff"] { color: var(--text-muted) !important; }
.page-hero .guide-byline strong { color: var(--heading); }
.page-hero .guide-byline a, .page-hero a:not([class*="btn"]) { color: var(--link) !important; }
/* table rows filled with the accent keep white text */
tr[style*="background:var(--green)"] > th, tr[style*="background:var(--green)"] > td,
tr[style*="background: var(--green)"] > th, tr[style*="background: var(--green)"] > td { color: #fff; }
/* dark: controls filled with the accent */
html[data-theme="dark"] .map-layer-btn.active, html[data-theme="dark"] .map-county-btn.active { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
html[data-theme="dark"] .nl-share a:hover { color: var(--page); }
/* tablet header: keep Book + menu button inside the viewport */
@media (max-width: 960px) and (min-width: 701px) {
  .sh-theme { display: none !important; }
  .sh-name .sh-sep, .sh-name .sh-tag { display: none; }
  .sh-inner { gap: 12px; padding: 0 18px; }
  .sh-cta { padding: 10px 14px; }
}