/* Layout concept: a "policy illustration" page — confident serif headlines on a cool paper ground,
   numbers set in mono like a carrier illustration, one brass accent for actions. */
:root {
  --bg: #F4F6F8;
  --surface: #FFFFFF;
  --ink: #0F2236;
  --fg: #1B2B3C;
  --muted: #586A7D;
  --line: #D8DFE6;
  --brass: #9C6B1E;
  --brass-soft: #F3E7D2;
  --navy: #0F2236;
  --on-navy: #EEF2F6;
  --on-navy-muted: #A9B8C7;
  --teal: #1D6B66;
  --focus: #2F6FD6;
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 6px;
  --max: 1140px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1722; --surface: #142131; --ink: #F1F4F7; --fg: #DCE3EA; --muted: #9AABBC;
    --line: #253649; --brass: #D7AA5C; --brass-soft: #2B2516; --navy: #0A121C;
    --on-navy: #EEF2F6; --on-navy-muted: #9AABBC; --teal: #5FB3AC; --focus: #7AA7F0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1722; --surface: #142131; --ink: #F1F4F7; --fg: #DCE3EA; --muted: #9AABBC;
  --line: #253649; --brass: #D7AA5C; --brass-soft: #2B2516; --navy: #0A121C;
  --on-navy: #EEF2F6; --on-navy-muted: #9AABBC; --teal: #5FB3AC; --focus: #7AA7F0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.65 var(--f-body); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 3px; }
a:hover { color: var(--brass); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--f-display); color: var(--ink); line-height: 1.15; text-wrap: balance; margin: 0; font-weight: 500; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.prose { max-width: 68ch; display: grid; gap: 1rem; }
.prose h2 { margin-top: 1.5rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.eyebrow { font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.lede { font-size: 1.18rem; color: var(--muted); max-width: 58ch; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--surface); padding: 8px 12px; }

/* Header */
.topbar { background: var(--navy); color: var(--on-navy-muted); font-size: .85rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.5rem; padding-block: .45rem; }
.topbar a { color: var(--on-navy); text-decoration: none; }
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; }
.brand { display: flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--ink); }
.brand b { font: 600 1.45rem/1 var(--f-display); letter-spacing: -.01em; }
.brand b i { font-style: normal; color: var(--brass); }
.brand span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
nav.main { display: flex; align-items: center; gap: 1.3rem; }
nav.main a { text-decoration: none; font-weight: 500; font-size: .96rem; color: var(--fg); }
nav.main a[aria-current="page"] { color: var(--brass); }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .7rem; font: inherit; color: var(--fg); }
@media (max-width: 920px) {
  .menu-btn { display: block; }
  nav.main { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem max(16px, env(safe-area-inset-right, 0px)) 1rem max(16px, env(safe-area-inset-left, 0px)); }
  nav.main.open { display: flex; }
  nav.main a { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  nav.main .btn { margin-top: .8rem; text-align: center; }
}

/* Buttons */
.btn { display: inline-block; background: var(--brass); color: #fff; padding: .8rem 1.3rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font-size: 1rem; }
nav.main a.btn { color: #fff; }
.btn:hover { color: #fff; filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { color: var(--brass); border-color: var(--brass); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Sections */
section { padding-block: clamp(3rem, 7vw, 5.5rem); }
section.tight { padding-block: 2.5rem; }
.band { background: var(--surface); border-block: 1px solid var(--line); }
.dark { background: var(--navy); color: var(--on-navy); }
.dark h2, .dark h3 { color: var(--on-navy); }
.dark .lede, .dark p.muted { color: var(--on-navy-muted); }
.head { display: grid; gap: .8rem; margin-bottom: 2.4rem; max-width: 62ch; }

/* Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.hero .copy { display: grid; gap: 1.3rem; min-width: 0; }
.hero h1 em { font-style: italic; color: var(--brass); }
.trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .9rem; color: var(--muted); padding-top: .4rem; }
.trust span::before { content: "✓ "; color: var(--teal); font-weight: 700; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Calculator */
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -24px rgba(15,34,54,.35); overflow: hidden; min-width: 0; }
.calc header { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); display: grid; gap: .2rem; }
.calc header h2 { font-size: 1.3rem; }
.calc header p { font-size: .88rem; color: var(--muted); }
.calc form { padding: 1.1rem 1.3rem; display: grid; gap: .75rem; }
.field { display: grid; grid-template-columns: 1fr 9.5rem; align-items: center; gap: .8rem; }
.field label { font-size: .9rem; }
.field label small { display: block; color: var(--muted); font-size: .76rem; }
.field input { width: 100%; font: 500 .98rem var(--f-mono); padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); text-align: right; }
.calc .result { background: var(--navy); color: var(--on-navy); padding: 1.1rem 1.3rem; display: grid; gap: .3rem; }
.calc .result .lbl { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-muted); }
.calc .result output { font: 500 2.1rem/1.1 var(--f-mono); color: var(--on-navy); }
.calc .result p { font-size: .82rem; color: var(--on-navy-muted); }
@media (max-width: 420px) { .field { grid-template-columns: 1fr 8rem; } }

/* Product grid */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.6rem; display: grid; gap: .9rem; align-content: start; }
.product .tag { font: 500 .78rem var(--f-mono); color: var(--muted); }
.product ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .95rem; display: grid; gap: .3rem; }
.product a.more { font-weight: 600; }
@media (max-width: 860px) { .products { grid-template-columns: 1fr; } }

/* Compare table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .95rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-family: var(--f-display); font-size: 1.05rem; color: var(--ink); font-weight: 600; background: var(--bg); }
tbody th { font-weight: 600; color: var(--ink); width: 22%; }
tr:last-child td, tr:last-child th { border-bottom: 0; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { display: grid; gap: .5rem; border-top: 2px solid var(--brass); padding-top: 1rem; }
.steps li::before { counter-increment: s; content: "Step " counter(s); font: 500 .8rem var(--f-mono); color: var(--brass); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; color: var(--ink); }
.facts dd { margin: 0; color: var(--muted); }
@media (max-width: 520px) { .facts div { grid-template-columns: 1fr; gap: .1rem; } }

/* States */
.states { display: flex; flex-wrap: wrap; gap: .6rem; }
.states span { font: 500 .95rem var(--f-mono); border: 1px solid var(--line); background: var(--surface); padding: .45rem .8rem; border-radius: 4px; }
.dark .states span { background: transparent; border-color: #34465c; color: var(--on-navy); }
.cities { columns: 4 12rem; gap: 1.5rem; padding: 0; list-style: none; margin: 0; color: var(--muted); }
.cities li { break-inside: avoid; padding: .2rem 0; }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; font: 500 1.15rem/1.35 var(--f-display); color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); color: var(--brass); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: .7rem; color: var(--fg); max-width: 70ch; }

/* Page header */
.pagehead { padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.pagehead .wrap { display: grid; gap: 1rem; }
.crumbs { font-size: .85rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.answer { border-left: 3px solid var(--brass); background: var(--brass-soft); padding: 1rem 1.2rem; border-radius: 0 6px 6px 0; max-width: 68ch; }
.answer b { color: var(--ink); }

/* CTA */
.cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta .btn.ghost { color: var(--on-navy); border-color: var(--on-navy); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; }
.contact-grid > * { min-width: 0; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.person { display: grid; gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.person b { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); font-weight: 600; }
.form { display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; }
.form label { display: grid; gap: .3rem; font-weight: 500; font-size: .95rem; }
.form input, .form select, .form textarea { font: inherit; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); width: 100%; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .form .row { grid-template-columns: 1fr; } }
.note { font-size: .85rem; color: var(--muted); }
.status { font-weight: 600; color: var(--teal); }

/* Footer */
footer.site { background: var(--navy); color: var(--on-navy-muted); font-size: .9rem; }
footer.site .wrap { padding-block: 3rem 2rem; display: grid; gap: 2rem; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.site .cols { grid-template-columns: 1fr; } }
footer.site h4 { margin: 0 0 .7rem; color: var(--on-navy); font: 600 .78rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
footer.site a { color: var(--on-navy); text-decoration: none; display: block; padding: .15rem 0; }
footer.site a:hover { color: var(--brass); }
footer.site .brand b { color: var(--on-navy); }
.disclosure { border-top: 1px solid #2A3B50; padding-top: 1.4rem; font-size: .78rem; line-height: 1.6; color: var(--on-navy-muted); }

/* Illustrations */
.ico { width: 56px; height: 56px; color: var(--brass); }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico .soft { stroke: var(--line); }
figure.ill { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; display: grid; gap: .5rem; }
figure.ill svg { width: 100%; height: auto; display: block; }
figure.ill figcaption { font-size: .8rem; color: var(--muted); }
.ill text { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); }
.ill .t-ink { fill: var(--ink); font-family: var(--f-body); font-weight: 600; font-size: 12px; }
.ill .f-brass { fill: var(--brass); } .ill .f-soft { fill: var(--brass-soft); } .ill .f-line { fill: var(--line); } .ill .f-teal { fill: var(--teal); }
.ill .s-brass { stroke: var(--brass); fill: none; } .ill .s-ink { stroke: var(--ink); fill: none; } .ill .s-muted { stroke: var(--muted); fill: none; }
.dark .product { background: transparent; border-color: #2E4157; }
.dark .product h3 { color: var(--on-navy); }
.dark .product ul { color: var(--on-navy-muted); }
.dark .ico { color: #D7AA5C; }
.dark .head h2 { max-width: 30ch; }

/* Guide-page trust features */
.byline { font-size: .88rem; color: var(--muted); }
.byline a { color: var(--ink); }
.toc { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: .9rem; }
.toc b { width: 100%; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prose h2[id] { scroll-margin-top: 90px; }
.tip { border: 1px dashed var(--brass); border-radius: 6px; padding: .9rem 1rem; background: var(--surface); }
.tip b { color: var(--brass); }
.sources { border-top: 1px solid var(--line); padding-top: 1.5rem; display: grid; gap: .8rem; }
.sources h2 { font-size: 1.2rem; }
.sources ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; display: grid; gap: .3rem; }
/* Quiz */
.quiz { display: grid; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.4rem; }
.quiz fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.quiz legend { font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.quiz label { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.quiz label:has(input:checked) { border-color: var(--brass); background: var(--brass-soft); }
.quiz input { accent-color: var(--brass); }
.quiz-result { background: var(--navy); color: var(--on-navy); border-radius: 6px; padding: 1rem 1.1rem; display: grid; gap: .3rem; }
.quiz-result b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; }
.quiz-result a { color: #D7AA5C; font-weight: 600; }
.quiz-result span { color: var(--on-navy-muted); font-size: .9rem; }
/* Mobile call bar */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--navy); padding: .5rem max(12px, env(safe-area-inset-right, 0px)) calc(.5rem + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); gap: .5rem; border-top: 1px solid #2A3B50; }
  .callbar a { text-align: center; padding: .7rem; border-radius: 6px; font-weight: 600; text-decoration: none; color: #fff; background: var(--brass); }
  .callbar a + a { background: transparent; border: 1px solid #5A6B7D; }
  body { padding-bottom: 72px; }
}

/* Long-form guides */
.split.guide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); padding-top: .4rem; }
.prose .table-wrap table { min-width: 520px; }
aside.sticky { display: grid; gap: 1.2rem; align-content: start; }
@media (min-width: 821px) { aside.sticky { position: sticky; top: 96px; } }
@media (max-width: 820px) { .split.guide { grid-template-columns: 1fr; } }

/* Urgency list + blog cards */
.why-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.why-list li { padding-left: 1.4rem; position: relative; }
.why-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--brass); }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.post { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--fg); }
.post:hover { border-color: var(--brass); color: var(--fg); }
.post-art { background: var(--brass-soft); height: 130px; display: flex; align-items: center; justify-content: center; color: var(--brass); }
.post-art svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post-body { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .4rem; align-content: start; }
.post-body h3 { font-size: 1.2rem; }
.post-body p { color: var(--muted); font-size: .95rem; }

/* ===== Direction A: Marketplace ===== */
:root {
  --bg: #FFFFFF; --surface: #FFFFFF; --ink: #14213D; --fg: #1F2937; --muted: #57534E; --line: #E7E5E4;
  --brass: #C2410C; --brass-soft: #FFEDD5; --navy: #14213D; --on-navy: #F5F5F4; --on-navy-muted: #CBD2DC;
  --teal: #0F766E; --focus: #1D4ED8; --peach: #FFF7ED; --band: #FAFAF9;
  --f-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-accent: "Instrument Serif", Georgia, serif;
  --radius: 999px; --card: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1726; --surface: #172235; --ink: #F5F5F4; --fg: #E7E5E4; --muted: #A8A29E; --line: #2A3547;
    --brass: #FB923C; --brass-soft: #3A2416; --navy: #0B1220; --on-navy: #F5F5F4; --on-navy-muted: #A8B3C2;
    --teal: #5EEAD4; --focus: #93C5FD; --peach: #1E1812; --band: #131D2E; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1726; --surface: #172235; --ink: #F5F5F4; --fg: #E7E5E4; --muted: #A8A29E; --line: #2A3547;
  --brass: #FB923C; --brass-soft: #3A2416; --navy: #0B1220; --on-navy: #F5F5F4; --on-navy-muted: #A8B3C2;
  --teal: #5EEAD4; --focus: #93C5FD; --peach: #1E1812; --band: #131D2E; color-scheme: dark;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.05; }
h3 { font-weight: 700; letter-spacing: -.01em; }
h1 em, h2 em { font-family: var(--f-accent); font-style: italic; font-weight: 400; color: var(--brass); letter-spacing: 0; }
.eyebrow { color: var(--brass); }
.sr { position: absolute; left: -9999px; }
.btn { border-radius: var(--radius); padding: .8rem 1.4rem; }
.btn, nav.main a.btn, .btn:hover { color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color: #1A0F08; } }
:root[data-theme="dark"] .btn { color: #1A0F08; }
.btn.ghost { color: var(--ink); }
.brand b { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; color: var(--ink); }
.brand b i { font-style: normal; color: var(--brass); }
footer.site .brand b { color: var(--on-navy); }
footer.site .brand b i { color: #FDBA74; }
.hero { background: var(--peach); }
.pagehead { background: var(--peach); border-bottom: 0; }
.band { background: var(--band); border-block: 0; }
.product, .calc, .quiz, .table-wrap, figure.ill, .form, .post, .toc, .tip { border-radius: var(--card); }
.product { padding: 1.8rem; transition: border-color .15s, transform .15s; }
.product:hover { border-color: var(--brass); }
.post-art { background: var(--peach); }
.calc .result { border-radius: 0; }
.picker { display: flex; flex-wrap: wrap; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: .5rem; max-width: 540px; }
.picker select { flex: 1 1 240px; min-width: 0; font: inherit; font-weight: 600; color: var(--ink); background: transparent; border: 0; padding: .7rem .6rem; }
.picker .btn { border-radius: 12px; }
.trust span::before { content: "✓ "; color: var(--brass); }
.steps li { border-top: 0; padding-top: 0; }
.steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; background: var(--brass-soft); color: var(--brass); font: 800 1.1rem var(--f-display); display: flex; align-items: center; justify-content: center; }
.stats { background: var(--navy); color: var(--on-navy-muted); padding-block: 3.5rem; }
.stats .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.stats b { display: block; font: 800 2.6rem/1.1 var(--f-display); color: var(--on-navy); }
@media (max-width: 760px) { .stats .wrap { grid-template-columns: 1fr 1fr; } }
.dark.cta { background: var(--brass); }
.dark.cta h2 { color: #FFFFFF; }
.dark.cta .lede, .dark.cta p.muted { color: #FFF1E6; }
.cta .btn { background: #FFFFFF; color: var(--navy); }
.cta .btn.ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dark.cta h2, :root:not([data-theme="light"]) .dark.cta p.muted { color: #1A0F08; } :root:not([data-theme="light"]) .cta .btn.ghost { color: #1A0F08; border-color: #1A0F08; } }
:root[data-theme="dark"] .dark.cta h2, :root[data-theme="dark"] .dark.cta p.muted { color: #1A0F08; }
:root[data-theme="dark"] .cta .btn.ghost { color: #1A0F08; border-color: #1A0F08; }
.dark:not(.cta) .ico { color: #FDBA74; }
.quiz label:has(input:checked) { border-color: var(--brass); background: var(--brass-soft); }
.answer { border-left: 0; border-radius: 16px; background: var(--peach); border: 1px solid var(--brass-soft); }
.callbar a { border-radius: 999px; }

/* ===== Soft palette: easy on the eyes, no blue ===== */
:root {
  --bg: #FBFAF7; --surface: #FFFFFF; --ink: #2F3B36; --fg: #3A4440; --muted: #6B736E; --line: #E6E3DC;
  --brass: #B5654A; --brass-soft: #F4E6DE; --navy: #3C4A44; --on-navy: #F3F1EC; --on-navy-muted: #D3D8D3;
  --teal: #5E7F6E; --focus: #7A9A88; --peach: #F5F1EA; --band: #F3F5F1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1F1D; --surface: #242926; --ink: #ECEAE4; --fg: #DAD7D0; --muted: #A3A69F; --line: #353B37;
    --brass: #D99A7E; --brass-soft: #3A2C25; --navy: #2A302C; --on-navy: #ECEAE4; --on-navy-muted: #B6BAB3;
    --teal: #9DBBA9; --focus: #9DBBA9; --peach: #222622; --band: #202421; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1C1F1D; --surface: #242926; --ink: #ECEAE4; --fg: #DAD7D0; --muted: #A3A69F; --line: #353B37;
  --brass: #D99A7E; --brass-soft: #3A2C25; --navy: #2A302C; --on-navy: #ECEAE4; --on-navy-muted: #B6BAB3;
  --teal: #9DBBA9; --focus: #9DBBA9; --peach: #222622; --band: #202421; color-scheme: dark;
}
footer.site .brand b i, .dark:not(.cta) .ico { color: #E2B7A4; }
.dark .product, .disclosure { border-color: #56635C; }
.dark .states span { border-color: #56635C; }
.quiz-result a { color: #E2B7A4; }

/* ===== Black & white ===== */
:root {
  --bg: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --fg: #111111; --muted: #555555; --line: #E2E2E2;
  --brass: #000000; --brass-soft: #F2F2F2; --navy: #000000; --on-navy: #FFFFFF; --on-navy-muted: #BDBDBD;
  --teal: #444444; --focus: #000000; --peach: #F7F7F7; --band: #F7F7F7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #111111; --ink: #FFFFFF; --fg: #EEEEEE; --muted: #A8A8A8; --line: #2C2C2C;
    --brass: #FFFFFF; --brass-soft: #1C1C1C; --navy: #111111; --on-navy: #FFFFFF; --on-navy-muted: #A8A8A8;
    --teal: #BBBBBB; --focus: #FFFFFF; --peach: #0C0C0C; --band: #0C0C0C; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #111111; --ink: #FFFFFF; --fg: #EEEEEE; --muted: #A8A8A8; --line: #2C2C2C;
  --brass: #FFFFFF; --brass-soft: #1C1C1C; --navy: #111111; --on-navy: #FFFFFF; --on-navy-muted: #A8A8A8;
  --teal: #BBBBBB; --focus: #FFFFFF; --peach: #0C0C0C; --band: #0C0C0C; color-scheme: dark;
}
footer.site .brand b i, .dark:not(.cta) .ico, .quiz-result a { color: #FFFFFF; }
.dark .product, .disclosure, .dark .states span { border-color: #333333; }
.cta .btn { background: #FFFFFF; color: #000000; }
.dark.cta h2 { color: #FFFFFF; }
.dark.cta p.muted { color: #CCCCCC; }
.cta .btn.ghost { color: #FFFFFF; border-color: #FFFFFF; background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dark.cta { background: #FFFFFF; } :root:not([data-theme="light"]) .cta .btn { background: #000000; color: #FFFFFF; } }
:root[data-theme="dark"] .dark.cta { background: #FFFFFF; }
:root[data-theme="dark"] .cta .btn { background: #000000; color: #FFFFFF; }
.ill .t-ink[style*="#fff"] { fill: #FFFFFF; }

/* ===== MassMutual-style: deep navy + white, always light ===== */
:root, :root[data-theme="dark"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --ink: #0B2A5B; --fg: #1E2A3A; --muted: #4F5D70; --line: #DCE2EA;
  --brass: #0B2A5B; --brass-soft: #EAF0F8; --navy: #0B2A5B; --on-navy: #FFFFFF; --on-navy-muted: #C5D2E5;
  --teal: #2C5AA0; --focus: #2C5AA0; --peach: #F3F6FA; --band: #F3F6FA;
  --f-display: "Figtree", "Segoe UI", system-ui, sans-serif; --f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Figtree", "Segoe UI", system-ui, sans-serif; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #FFFFFF; --surface: #FFFFFF; --ink: #0B2A5B; --fg: #1E2A3A; --muted: #4F5D70; --line: #DCE2EA;
    --brass: #0B2A5B; --brass-soft: #EAF0F8; --navy: #0B2A5B; --on-navy: #FFFFFF; --on-navy-muted: #C5D2E5;
    --teal: #2C5AA0; --focus: #2C5AA0; --peach: #F3F6FA; --band: #F3F6FA; color-scheme: light;
  }
  :root:not([data-theme="light"]) .btn { color: #FFFFFF; }
  :root:not([data-theme="light"]) .dark.cta { background: var(--navy); }
  :root:not([data-theme="light"]) .dark.cta h2, :root:not([data-theme="light"]) .dark.cta p.muted { color: #FFFFFF; }
  :root:not([data-theme="light"]) .cta .btn { background: #FFFFFF; color: var(--navy); }
  :root:not([data-theme="light"]) .cta .btn.ghost { color: #FFFFFF; border-color: #FFFFFF; background: transparent; }
}
:root[data-theme="dark"] .btn { color: #FFFFFF; }
:root[data-theme="dark"] .dark.cta { background: var(--navy); }
:root[data-theme="dark"] .dark.cta h2, :root[data-theme="dark"] .dark.cta p.muted { color: #FFFFFF; }
:root[data-theme="dark"] .cta .btn { background: #FFFFFF; color: var(--navy); }
:root[data-theme="dark"] .cta .btn.ghost { color: #FFFFFF; border-color: #FFFFFF; background: transparent; }
body { font-weight: 400; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
h1 em, h2 em { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; }
.eyebrow { color: var(--teal); letter-spacing: .06em; text-transform: none; font-weight: 600; font-size: .95rem; }
.center { text-align: center; }
.btn { background: var(--navy); }
.dark.cta { background: var(--navy); }
.cta .btn { background: #FFFFFF; color: var(--navy); }
footer.site { background: #071E43; }
footer.site .brand b { color: #FFFFFF; }
.stats, .dark { background: var(--navy); }
.dark:not(.cta) .ico, .quiz-result a, footer.site .brand b i { color: #C5D2E5; }
.dark .product, .disclosure, .dark .states span { border-color: #2A4A7E; }
.answer { background: var(--band); border-color: var(--line); }
.post-art { background: var(--band); }

/* Utility bar + header */
.topbar { display: none; }
.util { background: var(--navy); color: var(--on-navy-muted); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.util .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: .5rem; }
.util nav, .util-r { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; }
.util a { color: #FFFFFF; text-decoration: none; }
.util a:hover { color: #C5D2E5; }
header.site { background: var(--navy); border-bottom: 1px solid #1C3D72; }
header.site .wrap { padding-block: .6rem; }
.brand { color: #FFFFFF; align-items: baseline; }
.brand b { color: #FFFFFF; font: 700 1.5rem var(--f-display); letter-spacing: -.01em; }
.brand span { color: #C5D2E5; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
nav.main { gap: .2rem; }
nav.main > a, .dd-btn { color: #FFFFFF; font: 500 .98rem var(--f-body); text-decoration: none; padding: .55rem .75rem; border-radius: 6px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
nav.main > a:hover, .dd-btn:hover { background: #163B75; color: #FFFFFF; }
nav.main a[aria-current="page"] { color: #FFFFFF; box-shadow: inset 0 -2px 0 #FFFFFF; }
.dd { position: relative; }
.dd-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ddm { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: #FFFFFF; border-radius: 10px; box-shadow: 0 14px 32px -12px rgba(5,20,45,.35); padding: .5rem; z-index: 80; }
.ddm a { display: block; padding: .55rem .8rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.ddm a:hover { background: var(--band); color: var(--ink); }
.dd:hover .ddm, .dd:focus-within .ddm, .dd-btn[aria-expanded="true"] + .ddm { display: block; }
.menu-btn { color: #FFFFFF; border-color: #3A5A8E; }
@media (max-width: 920px) {
  nav.main { background: var(--navy); border-bottom: 1px solid #1C3D72; }
  nav.main > a, .dd-btn { width: 100%; justify-content: space-between; border-bottom: 1px solid #1C3D72; border-radius: 0; padding: .8rem 0; }
  .ddm { position: static; box-shadow: none; background: transparent; padding: 0 0 .4rem 1rem; }
  .ddm a { color: #C5D2E5; }
  .dd:hover .ddm { display: none; }
  .dd-btn[aria-expanded="true"] + .ddm { display: block; }
}

/* Pills */
.pill-w, .pill-o { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 600; text-decoration: none; }
.pill-w { background: #FFFFFF; color: var(--navy); }
.pill-w:hover { background: #E6EDF7; color: var(--navy); }
.pill-o { border: 1.5px solid currentColor; color: #FFFFFF; }
.pill-o:hover { background: rgba(255,255,255,.1); color: #FFFFFF; }
.util .pill-w { padding: .35rem .9rem; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--navy); }

/* Hero */
.hero { background: var(--navy); color: #FFFFFF; padding-block: clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero .wrap { grid-template-columns: 1.05fr .95fr; align-items: center; }
.hero .eyebrow { color: #C5D2E5; }
.hero h1 { color: #FFFFFF; font-weight: 300; font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.08; letter-spacing: -.02em; }
.hero .lede { color: #DCE5F2; }
.hero-art { position: relative; min-height: 380px; }
.burst { position: absolute; inset: -10% -20% -10% 0; width: 120%; height: 120%; }
.burst line { stroke: #2C5AA0; stroke-width: 1; opacity: .6; }
.circ { position: absolute; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px rgba(255,255,255,.06); }
.circ svg { width: 100%; height: 100%; display: block; }
.circ.big { width: 66%; aspect-ratio: 1; right: 4%; top: 0; }
.circ.small { width: 40%; aspect-ratio: 1; left: 6%; bottom: 0; }
.c-bg { fill: #E9EFF7; } .c-bg2 { fill: #C5D2E5; } .c-fg { fill: #0B2A5B; } .c-acc { fill: #2C5AA0; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero-art { min-height: 300px; } }

/* How we help */
.help { padding-block: clamp(3rem, 6vw, 4.5rem); }
.help h2 { margin-bottom: 2rem; }
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.help-card { background: var(--navy); color: #FFFFFF; border-radius: 14px; padding: 2rem; display: grid; gap: .8rem; justify-items: center; text-align: center; }
.help-card svg { width: 44px; height: 44px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.help-card h3 { color: #FFFFFF; font-size: 1.45rem; }
.help-card p { color: #DCE5F2; }
@media (max-width: 860px) { .help-grid { grid-template-columns: 1fr; } }

/* Goals / calculator card */
.goals { background: var(--band); }
.goals h2 { margin-bottom: 2rem; }
.calc.wide { max-width: 860px; margin: 0 auto; border-radius: 14px; }
.calc.wide form { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
@media (max-width: 760px) { .calc.wide form { grid-template-columns: 1fr; } }
.stepper { list-style: none; margin: 0; padding: 1.2rem 1.3rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; border-bottom: 1px solid var(--line); counter-reset: st; }
.stepper li { display: grid; justify-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); text-align: center; }
.stepper li::before { counter-increment: st; content: counter(st); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.stepper li.on { color: var(--ink); font-weight: 600; }
.stepper li.on::before { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.calc .result output { font-family: var(--f-display); font-weight: 600; }

/* Inner page headers in navy */
.pagehead { background: var(--navy); }
.pagehead h1 { color: #FFFFFF; font-weight: 400; }
.pagehead .lede, .pagehead .byline, .pagehead .crumbs, .pagehead .crumbs a, .pagehead .byline a { color: #DCE5F2; }
.pagehead .eyebrow { color: #C5D2E5; }

/* ===== Trusted Advisor (Northwestern Mutual style): navy + gold, serif ===== */
:root, :root[data-theme="dark"] {
  --bg: #F5F3EE; --surface: #FFFFFF; --ink: #0E2A47; --fg: #22303F; --muted: #5A6675; --line: #E2DED4;
  --brass: #8A6420; --brass-soft: #F1E9D8; --gold: #D9B26A; --navy: #0E2A47; --on-navy: #FFFFFF; --on-navy-muted: #C9D3DE;
  --teal: #3A5573; --focus: #8A6420; --peach: #F5F3EE; --band: #EDE9E0;
  --f-display: "Libre Caslon Text", Georgia, serif; --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Source Sans 3", "Segoe UI", system-ui, sans-serif; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #F5F3EE; --surface: #FFFFFF; --ink: #0E2A47; --fg: #22303F; --muted: #5A6675; --line: #E2DED4;
    --brass: #8A6420; --brass-soft: #F1E9D8; --gold: #D9B26A; --navy: #0E2A47; --on-navy: #FFFFFF; --on-navy-muted: #C9D3DE;
    --teal: #3A5573; --focus: #8A6420; --peach: #F5F3EE; --band: #EDE9E0; color-scheme: light;
  }
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: 0; }
h3 { font-weight: 700; }
h1 em, h2 em { font-style: italic; }
.eyebrow { color: var(--brass); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 700; }
.btn { border-radius: 4px; background: var(--navy); color: #FFFFFF; }
.btn.gold { background: var(--gold); color: var(--navy); }
.btn.gold:hover { color: var(--navy); filter: brightness(1.05); }
.btn.line { background: transparent; border: 1px solid #5E7590; color: #FFFFFF; }
.btn.ghost { border-radius: 4px; }
.dark.cta, .stats, .dark { background: var(--navy); }
footer.site { background: #0A1F35; }
.answer { background: var(--brass-soft); border-color: #E6D8BA; }

/* Header: navy utility row, white main row */
.util { background: var(--navy); text-transform: none; letter-spacing: 0; font-size: .85rem; }
.util .pill-w { background: transparent; color: #FFFFFF; padding: 0; font-size: .85rem; font-weight: 700; }
.util .pill-w:hover { background: transparent; color: var(--gold); }
header.site { background: #FFFFFF; border-bottom: 1px solid var(--line); }
header.site .wrap { padding-block: .9rem; }
.brand { flex-direction: column; align-items: flex-start; gap: .15rem; line-height: 1.1; }
.brand b { font: 700 1.55rem var(--f-display); color: var(--navy); }
.brand span { color: var(--brass); font-size: .7rem; letter-spacing: .18em; }
nav.main > a, .dd-btn { color: var(--navy); font-weight: 600; }
nav.main > a:hover, .dd-btn:hover { background: var(--band); color: var(--navy); }
nav.main a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold); }
.menu-btn { color: var(--navy); border-color: var(--line); }
@media (max-width: 920px) {
  nav.main { background: #FFFFFF; border-bottom: 1px solid var(--line); }
  nav.main > a, .dd-btn { border-bottom: 1px solid var(--line); }
  .ddm a { color: var(--muted); }
}
footer.site .brand b { color: #FFFFFF; }

/* Hero */
.hero { background: var(--navy); padding-block: 0; }
.hero .wrap { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.hero .copy { padding-block: clamp(3rem, 7vw, 5.5rem); padding-right: clamp(1rem, 4vw, 3rem); align-content: center; }
.hero h1 { font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.12; letter-spacing: 0; }
.hero h1 em { color: var(--gold); }
.hero .eyebrow { color: var(--gold); }
.hero .lede { color: var(--on-navy-muted); }
.hero-panel { background: #3A5573; display: flex; align-items: flex-end; justify-content: center; min-height: 380px; }
.hero-panel svg { width: 100%; height: 100%; display: block; }
.hp-bg { fill: #3A5573; } .hp-floor { fill: #2E4660; } .hp-gold { fill: #D9B26A; } .hp-navy { fill: #0E2A47; }
.hp-skin { fill: #E8D3BC; } .hp-shirt { fill: #F5F3EE; } .hp-paper { fill: #FFFFFF; } .hp-line { stroke: #0E2A47; stroke-width: 3; fill: none; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero .copy { padding-right: 0; } .hero-panel { min-height: 260px; } }

/* Pillars */
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pillar { background: #FFFFFF; display: grid; grid-template-rows: auto 1fr; }
.pillar-art { background: #E7E1D3; height: 180px; display: flex; align-items: center; justify-content: center; }
.pillar-art svg { width: 120px; height: 110px; }
.pa-gold { fill: #D9B26A; stroke: #0E2A47; stroke-width: 3; } .pa-white { fill: #FFFFFF; stroke: #0E2A47; stroke-width: 3; stroke-linejoin: round; } .pa-line { fill: none; stroke: #0E2A47; stroke-width: 3; stroke-linecap: round; }
.pillar-body { padding: 1.8rem; display: grid; gap: .7rem; align-content: start; }
.pillar-body h3 { font-size: 1.5rem; }
.pillar-body a { font-weight: 700; }
@media (max-width: 860px) { .pillar-grid { grid-template-columns: 1fr; } }

/* Stats with gold rules */
.stats .wrap > div { border-top: 2px solid var(--gold); padding-top: 1rem; }
.stats b { font-family: var(--f-display); font-weight: 400; }

/* Goals */
.goals { background: var(--band); }
.center-head { text-align: center; margin-inline: auto; justify-items: center; }
.calc.wide { border-radius: 6px; }
.stepper li.on::before { background: var(--navy); border-color: var(--navy); }

/* Cards and misc */
.product, .post, .quiz, .table-wrap, figure.ill, .form, .toc, .tip, .calc { border-radius: 6px; }
.post-art { background: #E7E1D3; }
.post-art svg, .ico { color: var(--navy); }
.dark:not(.cta) .ico { color: var(--gold); }
.pagehead { background: var(--navy); }
.pagehead h1 { font-weight: 400; }
.pagehead .eyebrow { color: var(--gold); }
.cta .btn { background: var(--gold); color: var(--navy); }
.cta .btn.ghost { background: transparent; color: #FFFFFF; border-color: #5E7590; }
.callbar { background: var(--navy); }
.callbar a { background: var(--gold); color: var(--navy); border-radius: 4px; }
.callbar a + a { color: #FFFFFF; }

/* Hero: sample plan card */
.hero-panel { background: #3A5573; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); min-height: 0; }
.plan { width: 100%; max-width: 400px; background: #FFFFFF; border-radius: 8px; box-shadow: 0 24px 50px -20px rgba(5,15,30,.6); padding: 1.4rem 1.4rem 1rem; display: grid; gap: .2rem; color: var(--fg); }
.plan-head { display: grid; gap: .1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.plan-head span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.plan-head b { font: 400 1.5rem var(--f-display); color: var(--navy); }
.plan-head small { color: var(--muted); font-size: .85rem; }
.plan-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.plan-row > svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--brass-soft); fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.plan-row div { display: grid; line-height: 1.25; min-width: 0; }
.plan-row span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.plan-row b { color: var(--navy); font-size: 1.05rem; }
.plan-row small { color: var(--muted); font-size: .82rem; }
.plan .ok { font-style: normal; font-size: .78rem; font-weight: 700; color: #1F5E3A; background: #E3F1E8; padding: .25rem .6rem; border-radius: 999px; }
.plan .spark { width: 80px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.plan-foot { font-size: .75rem; color: var(--muted); padding-top: .6rem; }

/* Hero drawing */
.hero-panel { background: #F5F3EE; padding: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.hero-draw { width: 100%; max-width: 520px; height: auto; display: block; }
.hero-panel { background: #EFEAE0; }
.hero-draw { max-width: 540px; }

/* ======================= NEWS THEME (WSJ-style) ======================= */
:root, :root[data-theme="dark"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --ink: #111111; --fg: #222222; --muted: #5C5C5C; --line: #DADADA;
  --brass: #0274B6; --brass-soft: #F4F4F4; --navy: #111111; --gold: #C9A15A; --on-navy: #FFFFFF; --on-navy-muted: #BBBBBB;
  --teal: #0274B6; --focus: #0274B6; --peach: #FFFFFF; --band: #F6F5F2;
  --f-display: "Newsreader", "Georgia", serif; --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif; color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #FFFFFF; --surface: #FFFFFF; --ink: #111111; --fg: #222222; --muted: #5C5C5C; --line: #DADADA;
  --brass: #0274B6; --brass-soft: #F4F4F4; --navy: #111111; --on-navy: #FFFFFF; --on-navy-muted: #BBBBBB;
  --teal: #0274B6; --focus: #0274B6; --peach: #FFFFFF; --band: #F6F5F2; color-scheme: light; } }
body { font-size: 17px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brass); }
.prose a, .answer a, .faq a { color: var(--brass); text-decoration: underline; }
.util, .topbar, header.site { display: none; }
body::before { background: #FFFFFF; }

/* Masthead */
.mast { background: #FFFFFF; position: relative; }
.mast .wrap { display: grid; justify-items: center; padding-block: .6rem 1rem; gap: .2rem; }
.mast-top { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .6rem; }
.mast-top a { color: var(--ink); font-weight: 600; }
.mast-name { font: 700 clamp(2.6rem, 7vw, 4.4rem)/1 var(--f-display); letter-spacing: -.02em; color: #111111; }
.mast-name:hover { color: #111111; }
.mast-tag { font: italic 400 .98rem var(--f-display); color: var(--muted); text-align: center; }
.sections { border-top: 1px solid #111111; border-bottom: 3px double #111111; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: #FFFFFF; }
.sections .wrap { display: flex; gap: 1.4rem; justify-content: center; overflow-x: auto; scrollbar-width: none; padding-block: .6rem; white-space: nowrap; }
.sections .wrap::-webkit-scrollbar { display: none; }
.sections a { font: 600 .9rem var(--f-body); color: #111111; }
.sections a[aria-current="page"] { color: var(--brass); }
@media (max-width: 900px) { .sections .wrap { justify-content: flex-start; } }

/* Stories */
.kicker { font: 700 .74rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.story { display: grid; gap: .45rem; align-content: start; color: var(--fg); }
.story img, .lead img, .row img { width: 100%; display: block; border-radius: 0; }
.story img { aspect-ratio: 400/260; object-fit: cover; margin-bottom: .35rem; }
.story h3 { font-size: 1.22rem; line-height: 1.22; }
.story p { color: var(--muted); font-size: .95rem; }
.story:hover h3 { color: var(--brass); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.4rem; }
@media (max-width: 1000px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; } }
.sec { padding-block: 2rem; }
.sec-h { border-top: 3px solid #111111; padding-top: .5rem; margin-bottom: 1.2rem; font: 700 .95rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; }

/* Front */
.front { padding-block: 1.6rem 1rem; }
.front-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; }
.front-grid > * { min-width: 0; }
.lead { display: grid; gap: .6rem; align-content: start; color: var(--fg); padding-right: 2rem; border-right: 1px solid var(--line); }
.lead img { aspect-ratio: 400/260; object-fit: cover; }
.lead h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; }
.lead:hover h1 { color: var(--brass); }
.lead .dek { font-size: 1.15rem; color: var(--muted); }
.byline { font-size: .85rem; color: var(--muted); }
.col-h { font: 700 .95rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid #111111; padding-bottom: .4rem; }
.latest { display: grid; align-content: start; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: .9rem; padding-block: .9rem; border-bottom: 1px solid var(--line); align-items: start; }
.row img { aspect-ratio: 400/260; object-fit: cover; }
.row h3 { font-size: 1.05rem; line-height: 1.25; margin-top: .2rem; }
.row:hover h3 { color: var(--brass); }
.more-link { font-weight: 700; padding-top: .8rem; color: var(--brass); }
@media (max-width: 860px) { .front-grid { grid-template-columns: 1fr; } .lead { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; } }

/* Tool band */
.tool { background: var(--band); }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; align-items: start; }
.tool-copy { display: grid; gap: .8rem; }
.tool-copy h3 { font-size: 1.8rem; }
.askbox { border: 1px solid #111111; padding: 1.2rem; display: grid; gap: .6rem; background: #FFFFFF; margin-top: .6rem; }
.askbox b { font: 700 1.1rem var(--f-display); }
.txtlink { color: var(--brass); font-weight: 600; }
@media (max-width: 860px) { .tool-grid { grid-template-columns: 1fr; } }
.calc, .calc.wide { border-radius: 0; box-shadow: none; border: 1px solid #111111; max-width: none; margin: 0; }
.calc .result { background: #111111; }
.calc .result .btn { background: #FFFFFF; color: #111111; }

/* Buttons + CTA + footer */
.btn { background: #111111; color: #FFFFFF; border-radius: 0; }
.btn:hover { color: #FFFFFF; background: #333333; filter: none; }
.btn.ghost { background: transparent; color: #111111; border: 1px solid #111111; }
.dark.cta { background: #111111; }
.dark.cta h2 { color: #FFFFFF; }
.cta .btn { background: #FFFFFF; color: #111111; }
.cta .btn.ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
footer.site { background: #111111; }
footer.site .brand b { font-family: var(--f-display); color: #FFFFFF; }
.callbar { background: #111111; }
.callbar a { background: #FFFFFF; color: #111111; border-radius: 0; }
.callbar a + a { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }

/* Article pages: newspaper header */
.pagehead { background: #FFFFFF; border-bottom: 0; padding-block: 2rem 1rem; }
.pagehead .wrap { max-width: 860px; }
.pagehead h1 { color: #111111; font-weight: 600; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; }
.pagehead .lede { color: var(--muted); font-family: var(--f-display); font-size: 1.25rem; }
.pagehead .eyebrow { color: var(--brass); letter-spacing: .08em; }
.pagehead .crumbs, .pagehead .crumbs a, .pagehead .byline, .pagehead .byline a { color: var(--muted); }
.pagehead .byline { border-top: 1px solid var(--line); padding-top: .7rem; }
.art-hero { margin: 0 auto 1rem; max-width: 860px; }
.art-hero img { width: 100%; display: block; aspect-ratio: 400/260; object-fit: cover; }
.answer { background: #F6F5F2; border: 0; border-left: 3px solid #111111; border-radius: 0; }
.tip { border-radius: 0; border: 1px solid #111111; }
.tip b { color: #111111; }
.product, .post, .quiz, .table-wrap, figure.ill, .form, .toc { border-radius: 0; }
.eyebrow { color: var(--brass); }
.ill .f-brass, .ill .s-brass { fill: #C9A15A; }

/* ===== Agent-first home + Knowledge Center ===== */
.mast-name span { font-weight: 400; font-style: italic; color: var(--muted); font-size: .55em; }
.sections a[href="contact.html"] { background: #111111; color: #FFFFFF; padding: .3rem .8rem; }
.sections a[href="contact.html"]:hover { background: var(--brass); color: #FFFFFF; }
.agent-hero { padding-block: 2.2rem 2.5rem; border-bottom: 1px solid var(--line); }
.ah-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.ah-copy { display: grid; gap: 1.1rem; }
.ah-copy h1 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; }
.ah-copy .dek { font-family: var(--f-display); font-size: 1.22rem; color: var(--muted); max-width: 46ch; }
.proof { list-style: none; margin: 0; padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
.proof b { color: #111111; }
.cred { border: 1px solid #111111; background: #FFFFFF; }
.cred img { width: 100%; display: block; aspect-ratio: 400/220; object-fit: cover; }
.cred-body { padding: 1.3rem 1.4rem 1.4rem; display: grid; gap: .25rem; }
.cred-name { font: 600 1.6rem var(--f-display); color: #111111; }
.cred-role { color: var(--muted); font-size: .95rem; }
.cred dl { margin: .8rem 0 0; display: grid; gap: .7rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.cred dt { font: 700 .72rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cred dd { margin: .2rem 0 0; font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips span { border: 1px solid #111111; padding: .1rem .5rem; font-size: .82rem; font-weight: 600; }
@media (max-width: 900px) { .ah-grid { grid-template-columns: 1fr; gap: 2rem; } }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.offer { display: grid; gap: .55rem; align-content: start; }
.offer img { width: 100%; aspect-ratio: 400/260; object-fit: cover; margin-bottom: .3rem; }
.offer h3 { font-size: 1.5rem; }
.offer p { color: var(--muted); }
.offer ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .95rem; }
.offer-links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: .4rem; }
@media (max-width: 900px) { .offers { grid-template-columns: 1fr; } }
.band-w { background: var(--band); }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.why-grid b { font: 600 1.15rem var(--f-display); color: #111111; display: block; margin-bottom: .3rem; }
.why-grid p { color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } }
.kc-head { border-bottom: 1px solid var(--line); padding-block: 1.8rem 1.4rem; }
.kc-head .wrap { display: grid; gap: .5rem; }
.kc-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; max-width: 26ch; }
.kc-head .dek { color: var(--muted); font-family: var(--f-display); font-size: 1.15rem; }
.lead-h { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; }
.lead:hover .lead-h { color: var(--brass); }
.kc-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #111111; margin-bottom: 1.6rem; }
.kc-tabs::-webkit-scrollbar { display: none; }
.kc-tabs button { font: 600 .95rem var(--f-body); background: none; border: 0; border-bottom: 3px solid transparent; padding: .7rem .9rem; cursor: pointer; color: var(--muted); white-space: nowrap; }
.kc-tabs button[aria-selected="true"] { color: #111111; border-bottom-color: #111111; }
.kc-tabs button:hover { color: #111111; }
[hidden] { display: none !important; }

/* ===== Business header (replaces newspaper masthead) ===== */
.mast, .sections { display: none; }
.bizbar { background: #0E2A47; color: #D5DEE8; font-size: .82rem; }
.bizbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding-block: .4rem; }
header.biz { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: #FFFFFF; border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px -6px rgba(0,0,0,.18); }
header.biz .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: .75rem; position: relative; }
.logo { display: flex; align-items: center; gap: .6rem; color: #0E2A47; }
.logo:hover { color: #0E2A47; }
.logo svg { width: 38px; height: 38px; flex: none; }
.logo span { display: grid; line-height: 1.1; }
.logo b { font: 700 1.25rem var(--f-body); letter-spacing: -.01em; }
.logo small { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
header.biz nav.main { display: flex; gap: 1.2rem; margin-left: auto; }
header.biz nav.main a { font: 600 .95rem var(--f-body); color: #1F2A36; padding: .3rem 0; }
header.biz nav.main a:hover, header.biz nav.main a[aria-current="page"] { color: #0274B6; box-shadow: inset 0 -2px 0 #0274B6; }
.biz-cta { display: flex; align-items: center; gap: .9rem; }
.biz-tel { font-weight: 700; color: #0E2A47; white-space: nowrap; }
.biz-cta .btn { background: #0E2A47; color: #FFFFFF; border-radius: 6px; padding: .6rem 1.1rem; white-space: nowrap; }
.biz-cta .btn:hover { background: #0274B6; }
header.biz .menu-btn { display: none; margin-left: auto; color: #0E2A47; border: 1px solid var(--line); border-radius: 6px; background: #FFFFFF; padding: .45rem .8rem; font: inherit; }
@media (max-width: 1100px) {
  header.biz .menu-btn { display: block; }
  header.biz nav.main { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: #FFFFFF; border-bottom: 1px solid var(--line); padding: .3rem max(16px, env(safe-area-inset-right, 0px)) .8rem max(16px, env(safe-area-inset-left, 0px)); }
  header.biz nav.main.open { display: flex; }
  header.biz nav.main a { padding: .75rem 0; border-bottom: 1px solid var(--line); box-shadow: none; }
  .biz-cta .biz-tel { display: none; }
}
@media (max-width: 520px) { .logo small { display: none; } .biz-cta .btn { padding: .5rem .8rem; font-size: .9rem; } }
header.biz nav.main a, .logo b, .logo small { white-space: nowrap; }
.ah-copy h1 { font-family: var(--f-body); font-weight: 700; color: #0E2A47; letter-spacing: -.02em; font-size: clamp(2rem, 3.8vw, 2.9rem); }
.ah-copy .dek { font-family: var(--f-body); font-size: 1.15rem; }
.agent-hero .btn { border-radius: 6px; }
.agent-hero .btn:not(.ghost) { background: #0E2A47; }
.cred { border-color: #D5DEE8; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 36px -22px rgba(14,42,71,.45); }
.cred-name { font-family: var(--f-body); font-weight: 700; color: #0E2A47; }
.chips span { border-color: #C9D3DE; border-radius: 999px; background: #F3F6FA; color: #0E2A47; padding: .1rem .65rem; }