@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

:root {
  --ink: #143c36;
  --ink-deep: #0b2b27;
  --mint: #a8ddb5;
  --mint-pale: #e7f4e7;
  --cream: #fff9ee;
  --paper: #ffffff;
  --coral: #f47d61;
  --coral-text: #a9432f;
  --ochre: #e9a72f;
  --text: #213d38;
  --muted: #536a65;
  --line: #dbe7df;
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--text); font-family: var(--body); line-height: 1.65; }
body.menu-open { overflow: hidden; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; padding: .7rem 1rem; background: var(--paper); color: var(--ink-deep); font-weight: 800; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
h1, h2, h3 { margin: 0; color: var(--ink-deep); font-family: var(--display); line-height: 1.12; letter-spacing: -.035em; }
h1 { font-size: clamp(36px, 6vw, 48px); }
h2 { font-size: clamp(24px, 3.4vw, 28px); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
.direct-answer { color: var(--text); font-size: 1.08em; }
.section-answer { color: var(--text); font-weight: 500; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 40px)); }

.site-nav { position: sticky; z-index: 50; top: 0; min-height: 76px; background: rgba(255,249,238,.96); border: 0; backdrop-filter: blur(12px); }
.nav-inner { display: flex; min-height: 76px; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-deep); font: 800 1.12rem var(--display); letter-spacing: -.03em; text-decoration: none; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand > span > span { color: var(--coral-text); }
.desktop-nav { display: flex; flex: 1; align-items: center; gap: .28rem; }
.desktop-nav > a, .nav-trigger { min-height: 42px; padding: .65rem .78rem; border: 0; background: transparent; color: var(--text); font-size: .88rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.nav-trigger { display: inline-flex; align-items: center; gap: .48rem; }
.desktop-nav > a:hover, .desktop-nav > a:focus-visible, .nav-trigger:hover, .nav-trigger:focus-visible { background: var(--mint-pale); color: var(--ink); outline: none; }
.nav-group { position: relative; }
.nav-route-mark { width: 24px; height: 18px; color: var(--ink); transform: none; }
.nav-route-mark path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-route-mark circle { fill: currentColor; stroke: none; }
.nav-trigger[aria-expanded="true"] { background: var(--ink); color: white; }
.nav-trigger[aria-expanded="true"] .nav-route-mark { color: var(--mint); transform: none; }
.nav-menu { display: none; position: absolute; top: calc(100% + 11px); left: 0; width: 400px; padding: .72rem; border: 1px solid #cadbd3; background: rgba(255,249,238,.99); }
.nav-group:nth-child(2) .nav-menu { width: 420px; }
.nav-trigger[aria-expanded="true"] + .nav-menu { display: grid; animation: nav-menu-in .15s ease-out; }
@keyframes nav-menu-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.nav-menu-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .75rem; align-items: center; padding: .72rem; }
.nav-menu-item:focus-within, .nav-menu-item:hover { background: var(--mint-pale); }
.nav-item-icon { display: grid; width: 42px; height: 42px; place-items: center; background: #e1eee4; color: var(--ink); }
.nav-item-icon svg { width: 27px; height: 27px; }
.nav-item-icon path, .nav-item-icon circle { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item-icon circle { fill: var(--paper); }
.nav-menu-item a { text-decoration: none; }
.nav-menu-item a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-menu strong { display: block; font-size: .9rem; line-height: 1.2; }
.nav-menu small { display: block; margin-top: .18rem; color: var(--muted); font-size: .73rem; line-height: 1.35; }
.nav-cta { padding: .66rem 1rem; background: var(--ink); color: white; font-weight: 700; text-decoration: none; }
.nav-cta:hover { background: var(--ink-deep); }
.menu-button { display: none; align-items: center; gap: .65rem; min-width: 91px; height: 44px; padding: 0 .8rem; border: 0; background: var(--mint-pale); color: var(--ink); cursor: pointer; }
.menu-button:hover, .menu-button.open { background: var(--ink); color: white; }
.menu-label { font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.menu-icon { position: relative; display: block; width: 20px; height: 18px; }
.menu-icon i { position: absolute; right: 0; display: block; height: 2px; background: currentColor; transition: transform .18s, top .18s, width .18s; }
.menu-icon i:first-child { top: 5px; width: 20px; }
.menu-icon i:last-child { top: 12px; width: 14px; }
.menu-button.open .menu-icon i { top: 9px; width: 19px; }
.menu-button.open .menu-icon i:first-child { transform: rotate(45deg); }
.menu-button.open .menu-icon i:last-child { transform: rotate(-45deg); }
.mobile-menu { display: none; position: fixed; z-index: 45; inset: 76px 0 0; overflow-y: auto; background: var(--cream); color: var(--text); }
.mobile-menu.open { display: block; animation: menu-in .17s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-inner { padding-block: 1rem 3rem; }
.mobile-intro { display: flex; align-items: center; gap: .9rem; padding: 1rem; background: var(--mint-pale); }
.mobile-brand-mark { display: grid; flex: 0 0 58px; width: 58px; height: 58px; place-items: center; background: var(--paper); }
.mobile-intro img { width: 46px; height: 46px; object-fit: contain; }
.mobile-intro strong { display: block; color: var(--ink-deep); font: 750 1.08rem var(--display); }
.mobile-intro p { max-width: 52ch; margin-top: .2rem; color: var(--muted); font-size: .82rem; }
.mobile-featured { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .85rem; }
.mobile-featured-card { display: grid; min-height: 116px; grid-template-columns: 1fr; align-content: center; padding: 1rem; border: 0; background: var(--mint-pale); color: var(--ink-deep); }
.mobile-featured-card:hover, .mobile-featured-card:focus-within { background: #d8eddc; }
.mobile-featured-card a { color: var(--ink-deep); text-decoration: none; }
.mobile-featured-primary { background: var(--ink); color: white; }
.mobile-featured-primary:hover, .mobile-featured-primary:focus-within { background: var(--ink-deep); }
.mobile-featured-primary a { color: white; }
.mobile-featured strong { font: 700 .95rem var(--display); }
.mobile-featured small { color: var(--muted); }
.mobile-featured-primary small { color: #c5d9d3; }
.mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .85rem; }
.mobile-grid details { padding: .45rem .8rem .75rem; border: 0; background: var(--paper); }
.mobile-grid details[open] { background: var(--mint-pale); }
.mobile-grid summary { display: flex; justify-content: space-between; align-items: center; min-height: 50px; color: var(--ink-deep); font: 750 .94rem var(--display); cursor: pointer; list-style: none; }
.mobile-grid summary::-webkit-details-marker { display: none; }
.mobile-summary-icon { position: relative; width: 28px; height: 28px; background: var(--mint-pale); transition: background-color .16s ease, transform .16s ease; }
.mobile-summary-icon i { position: absolute; top: 13px; left: 8px; width: 12px; height: 2px; background: var(--ink); }
.mobile-summary-icon i:last-child { transform: rotate(90deg); transition: transform .16s ease; }
.mobile-grid details[open] .mobile-summary-icon { background: var(--ink); }
.mobile-grid details[open] .mobile-summary-icon i { background: white; }
.mobile-grid details[open] .mobile-summary-icon i:last-child { transform: rotate(0); }
.mobile-grid a { display: block; position: relative; margin-top: .2rem; padding: .58rem .7rem; color: var(--text); font-size: .86rem; text-decoration: none; }
.mobile-grid a:hover, .mobile-grid a:focus-visible { background: var(--paper); color: var(--ink); text-decoration: underline; }
.mobile-menu-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .85rem; padding: 1rem; background: var(--ink); color: white; }
.mobile-menu-footer a { color: white; font-weight: 800; text-decoration: none; }
.mobile-menu-footer a span { margin-left: .35rem; color: var(--mint); }
.mobile-menu-footer p { color: #c5d9d3; font-size: .76rem; text-align: right; }

.hero { background: var(--cream); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 500px; align-items: center; gap: clamp(2rem, 4vw, 4rem); }
.hero-copy { position: relative; z-index: 2; padding: 4rem 0; }
.hero-copy h1, .hero-lede, .page-hero h1, .page-hero p, .tool-header h1, .tool-header p, .hub-hero h1, .hub-hero p, .article-header h1, .article-dek { width: 100%; max-width: none; }
.hero-lede { margin-top: 1.5rem; color: #49645e; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.hero-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 50px; padding: .72rem 1.15rem; border: 1px solid transparent; font-weight: 800; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--ink); color: white; }
.button-primary:hover { background: var(--ink-deep); }
.button-light { border-color: var(--ink); background: transparent; color: var(--ink); }
.button-light:hover { background: var(--mint-pale); }
.text-link { font-weight: 800; }
.trust-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; color: var(--muted); font-size: .78rem; }
.trust-row span { padding: .35rem .6rem; background: #f0eddf; }
.hero-visual { width: min(100%, 280px); aspect-ratio: 16 / 9; align-self: center; justify-self: end; min-width: 0; overflow: hidden; }
.hero-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.section { padding-block: clamp(4rem, 8vw, 7rem); }
.section-heading { display: block; margin-bottom: 2.2rem; }
.section-heading p { width: 100%; margin-top: .85rem; color: var(--muted); font-size: 1.05rem; }
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tool-grid-full { grid-template-columns: repeat(3, 1fr); }
.tool-card { display: flex; min-height: 330px; flex-direction: column; padding: 1.45rem; border: 1px solid var(--line); background: var(--paper); }
.tool-card:hover { border-color: var(--mint); }
.tool-symbol { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: auto; background: var(--mint-pale); color: var(--ink); font: 700 1.65rem var(--display); }
.tool-card:nth-child(2n) .tool-symbol { background: #fff0e9; color: #b64d36; }
.tool-card h2, .tool-card h3 { margin-top: 2rem; font-size: 1.23rem; }
.tool-card h2 a, .tool-card h3 a { text-decoration: none; }
.tool-card h2 a:hover, .tool-card h3 a:hover { text-decoration: underline; }
.tool-card p { margin-top: .75rem; color: var(--muted); font-size: .9rem; }
.card-action { display: inline-flex; align-items: center; gap: .6rem; width: fit-content; margin-top: 1.1rem; font-size: .82rem; font-weight: 800; text-decoration: none; }
.card-label { color: var(--ink); font-size: .82rem; font-weight: 800; }
.section-action { margin-top: 2rem; text-align: center; }

.route-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--ink-deep); color: white; }
.route-grid > div:first-child { display: block; }
.route-grid h2, .route-grid h3 { color: white; }
.route-grid > div:first-child p { width: 100%; margin-top: .85rem; color: #bfd0cb; }
.route-map { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 1rem; margin-top: 3.4rem; }
.route-map article { min-height: 240px; padding: 1.4rem; border: 1px solid rgba(168,221,181,.28); background: rgba(255,255,255,.04); }
.route-map article h3 { font-size: 1.35rem; }
.route-map article p { margin-top: .8rem; color: #bfd0cb; font-size: .9rem; }
.route-map article a { display: inline-block; margin-top: 1.2rem; color: var(--mint); font-weight: 800; }

.magazine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.story-card { min-height: 280px; padding: 1.45rem; background: #f0eddf; }
.story-card:nth-child(3n) { background: var(--mint-pale); }
.story-card h3 { font-size: 1.35rem; }
.story-card h3 a { text-decoration: none; }
.story-card p { margin-top: .7rem; color: var(--muted); font-size: .9rem; }
.story-link { display: inline-block; margin-top: 1.1rem; font-size: .82rem; font-weight: 800; }
.story-lead { grid-column: span 2; background: var(--ink); }
.story-lead h3, .story-lead h3 a { color: white; }
.story-lead p { color: #c4d5d0; }
.story-lead .story-link { color: var(--mint); }
.library-directory { width: 100%; background: var(--paper); }
.library-directory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.library-directory-group { padding: 1.5rem; background: #f0eddf; }
.library-directory-group:nth-child(2n) { background: var(--mint-pale); }
.library-directory-guides { grid-column: 1 / -1; }
.library-directory-group h3 { font-size: 1.25rem; }
.library-link-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.library-link-list a { display: inline-flex; align-items: center; min-height: 38px; padding: .45rem .72rem; background: rgba(255,255,255,.78); color: var(--ink); font-size: .82rem; font-weight: 750; line-height: 1.25; text-decoration: none; }
.library-link-list a:hover, .library-link-list a:focus-visible { background: var(--ink); color: white; text-decoration: underline; }
.principles { padding-block: 5rem; background: #f0eddf; }
.principles-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 2rem; }
.principles-grid h2 { font-size: 28px; }
.principles-grid strong { color: var(--ink); font-family: var(--display); }
.principles-grid p { margin-top: .6rem; color: var(--muted); font-size: .9rem; }

.page-hero { padding-block: clamp(4rem, 8vw, 7rem); }
.page-hero h1 { font-size: clamp(36px, 5.5vw, 48px); }
.page-hero p { margin-top: 1.3rem; color: var(--muted); font-size: 1.18rem; }
.content-band { padding-block: 4rem; background: var(--mint-pale); }
.content-band h2 { margin-bottom: 1.2rem; font-size: 28px; }
.content-band p + p { margin-top: 1rem; }
.use-steps { padding-top: 4rem; }
.use-steps > h2 { font-size: 28px; }
.use-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.use-steps li { padding: 1.25rem; background: var(--paper); }
.use-steps h3 { font-size: 1.2rem; }
.use-steps p { margin-top: .55rem; color: var(--muted); }
.breadcrumb-bar { background: rgba(255,249,238,.96); border: 0; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; margin: 0; padding-block: .7rem; color: var(--muted); font-size: .84rem; }
.crumbs a { color: var(--ink); font-weight: 700; text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--coral-text); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--muted); }
.tool-header { padding-block: 3rem 2rem; }
.tool-header h1 { font-size: clamp(36px, 5vw, 48px); }
.tool-header p { margin-top: 1rem; color: var(--muted); font-size: 1.12rem; }
.calculator { --result-panel: var(--ink-deep); --result-accent: var(--mint); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.calculator-milestone, .calculator-payoff-path, .calculator-deadline-pace { grid-template-columns: 1.05fr .95fr; }
.calculator-scenario-lab, .calculator-housing-tradeoff, .calculator-cash-waterfall { grid-template-columns: .9fr 1.1fr; }
.calculator-reserve-band { --result-panel: #183d37; --result-accent: #c8f08b; }
.calculator-readiness-gates { --result-panel: #263f48; --result-accent: #ffd29c; }
.calculator-purchase-stack { --result-panel: #343647; --result-accent: #f7d68b; }
.calculator-scenario-lab { --result-panel: #292f48; --result-accent: #c9d3ff; }
.calculator-payoff-path { --result-panel: #3c292d; --result-accent: #ffc3a8; }
.calculator-balance-sheet { --result-panel: #153e43; --result-accent: #9de5da; }
.calculator-cash-waterfall { --result-panel: #273b31; --result-accent: #c8efb1; }
.calculator-deadline-pace { --result-panel: #43382c; --result-accent: #ffdc91; }
.calculator-housing-tradeoff { --result-panel: #303847; --result-accent: #cde1ff; }
.calculator-allocation-drift { --result-panel: #25364b; --result-accent: #bdd2ff; }
.calculator-budget-ledger { --result-panel: #143b35; --result-accent: #a8ddb5; }
.calculator-independence-target { --result-panel: #293748; --result-accent: #ffd29c; }
.calculator-income-floor { --result-panel: #303b2d; --result-accent: #c8efb1; }
.calculator-raise-allocation { --result-panel: #3e3042; --result-accent: #f0c3db; }
.calculator-savings-growth { --result-panel: #183d37; --result-accent: #c8f08b; }
.calculator-fixed-deadline { --result-panel: #43382c; --result-accent: #ffdc91; }
.calculator-education-path { --result-panel: #283b4a; --result-accent: #a8d5e5; }
.calculator-vehicle-fund { --result-panel: #40352e; --result-accent: #f5c79a; }
.calculator-declining-minimum { --result-panel: #3c292d; --result-accent: #ffc3a8; }
.calculator-transfer-deadline { --result-panel: #312f4a; --result-accent: #c9d3ff; }
.calculator-consolidation-test { --result-panel: #3d3032; --result-accent: #f3b7a1; }
.calculator-payment-acceleration { --result-panel: #3a2f2f; --result-accent: #efc89f; }
.calculator-price-ceiling { --result-panel: #263f48; --result-accent: #ffd29c; }
.calculator-mortgage-acceleration { --result-panel: #2f3a42; --result-accent: #bdd9c8; }
.calculator-refinance-crossing { --result-panel: #303847; --result-accent: #cde1ff; }
.calculator-closing-cash { --result-panel: #343647; --result-accent: #f7d68b; }
.calculator-entry-timing { --result-panel: #292f48; --result-accent: #c9d3ff; }
.calculator-purchasing-power { --result-panel: #25364b; --result-accent: #bdd2ff; }
.calculator-retirement-gap { --result-panel: #183d37; --result-accent: #c8f08b; }
.calculator-form, .calculator-result { padding: clamp(1.4rem, 4vw, 3rem); }
.calculator-result { background: var(--result-panel); color: white; }
.calculator-form h2, .calculator-result h2 { font-size: 1.35rem; }
.calculator-result h2 { color: white; }
.calculator-result-header p { margin-top: .65rem; color: #bfd0cb; font-size: .86rem; }
.calculator-result-status { margin-top: 1.15rem; padding: .75rem .85rem; background: rgba(255,255,255,.08); color: #e4eeeb; font-size: .8rem; font-weight: 700; }
.calculator-form-intro { margin-top: .6rem; color: var(--muted); font-size: .9rem; }
.input-groups { display: grid; gap: .85rem; margin-top: 1.3rem; }
.input-group { min-width: 0; margin: 0; padding: 1rem; border: 0; background: #f0f5f1; }
.input-group:nth-child(even) { background: #f7f0e8; }
.input-group legend { float: left; width: 100%; color: var(--ink); font: 800 1rem var(--display); }
.input-group > p { clear: both; padding-top: .28rem; color: var(--muted); font-size: .75rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .9rem; }
.input-group:has(.field-grid > label:only-child) .field-grid { grid-template-columns: 1fr; }
.field-grid label span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
.field-grid input { width: 100%; height: 48px; padding: 0 .8rem; border: 1px solid #cddcd3; background: #fbfdfb; color: var(--ink); }
.field-grid input:focus { border-color: var(--ink); outline: 3px solid rgba(168,221,181,.45); }
.calculate-button { margin-top: 1.4rem; }
.privacy-note { margin-top: .7rem; color: var(--muted); font-size: .75rem; }
.scenario-controls { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.scenario-controls h3 { color: var(--ink); font-size: .9rem; }
.scenario-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.scenario-button { min-height: 40px; padding: .52rem .7rem; border: 1px solid #b8ccc0; background: transparent; color: var(--ink); font: 750 .76rem var(--body); cursor: pointer; }
.scenario-button:hover, .scenario-button:focus-visible { border-color: var(--ink); background: var(--mint-pale); outline: 0; }
.scenario-reset { border-color: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.calculator-readiness-gates, .calculator-payoff-path, .calculator-balance-sheet, .calculator-housing-tradeoff, .calculator-allocation-drift, .calculator-budget-ledger, .calculator-education-path, .calculator-consolidation-test, .calculator-closing-cash, .calculator-retirement-gap { grid-template-columns: 1fr; }
.calculator-readiness-gates .input-groups, .calculator-housing-tradeoff .input-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calculator-payoff-path .input-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.calculator-balance-sheet .input-groups, .calculator-allocation-drift .input-groups, .calculator-budget-ledger .input-groups, .calculator-consolidation-test .input-groups, .calculator-closing-cash .input-groups, .calculator-retirement-gap .input-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calculator-education-path .input-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calculator-reserve-band, .calculator-scenario-lab, .calculator-cash-waterfall, .calculator-independence-target, .calculator-savings-growth, .calculator-declining-minimum, .calculator-transfer-deadline, .calculator-payment-acceleration, .calculator-mortgage-acceleration, .calculator-refinance-crossing, .calculator-entry-timing, .calculator-purchasing-power { grid-template-areas: "result form"; }
.calculator-reserve-band .calculator-form, .calculator-scenario-lab .calculator-form, .calculator-cash-waterfall .calculator-form, .calculator-independence-target .calculator-form, .calculator-savings-growth .calculator-form, .calculator-declining-minimum .calculator-form, .calculator-transfer-deadline .calculator-form, .calculator-payment-acceleration .calculator-form, .calculator-mortgage-acceleration .calculator-form, .calculator-refinance-crossing .calculator-form, .calculator-entry-timing .calculator-form, .calculator-purchasing-power .calculator-form { grid-area: form; }
.calculator-reserve-band .calculator-result, .calculator-scenario-lab .calculator-result, .calculator-cash-waterfall .calculator-result, .calculator-independence-target .calculator-result, .calculator-savings-growth .calculator-result, .calculator-declining-minimum .calculator-result, .calculator-transfer-deadline .calculator-result, .calculator-payment-acceleration .calculator-result, .calculator-mortgage-acceleration .calculator-result, .calculator-refinance-crossing .calculator-result, .calculator-entry-timing .calculator-result, .calculator-purchasing-power .calculator-result { grid-area: result; }
.result-visual { margin-top: 1.5rem; }
.result-primary { margin-top: 1.7rem; }
.result-primary strong { display: block; color: var(--result-accent); font: 800 clamp(2rem, 5vw, 3.5rem) var(--display); letter-spacing: -.05em; line-height: 1.05; }
.result-primary span { display: block; margin-top: .45rem; color: #bfd0cb; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.5rem; }
.result-grid div { padding: .85rem; background: rgba(255,255,255,.08); }
.result-grid span, .result-grid strong { display: block; }
.result-grid span { color: #a9c0ba; font-size: .7rem; }
.result-grid strong { margin-top: .25rem; color: white; font: 700 .95rem var(--display); }
.result-action { margin-top: 1.4rem; color: #d9e5e2; font-size: .86rem; }
.goal-track { padding: 1rem; background: rgba(255,255,255,.07); }
.goal-track-labels { display: flex; justify-content: space-between; gap: 1rem; color: #d8e4e1; font-size: .75rem; }
.goal-track-line { position: relative; height: 10px; margin-top: .75rem; background: rgba(255,255,255,.14); }
.goal-track-line span { display: block; height: 100%; background: var(--result-accent); }
.goal-track-line i { position: absolute; top: 50%; width: 20px; height: 20px; border: 5px solid var(--result-panel); background: var(--result-accent); transform: translate(-50%, -50%); }
.goal-track p { margin-top: .65rem; color: #b9cbc6; font-size: .76rem; }
.reserve-band-visual { padding: 1rem 0 .4rem; }
.reserve-band-line { position: relative; height: 18px; background: rgba(255,255,255,.1); }
.reserve-band-line .reserve-base, .reserve-band-line .reserve-extension { position: absolute; inset-block: 0; }
.reserve-band-line .reserve-base { left: 0; background: #8bcab0; }
.reserve-band-line .reserve-extension { right: 0; background: rgba(200,240,139,.38); }
.reserve-band-line i { position: absolute; top: 50%; width: 4px; height: 34px; background: white; transform: translate(-50%, -50%); }
.reserve-band-labels { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .8rem; color: #bcd0ca; font-size: .68rem; }
.reserve-band-labels span:nth-child(2) { text-align: center; }
.reserve-band-labels span:last-child { text-align: right; }
.reserve-band-labels strong { color: white; font-size: .8rem; }
.readiness-gate-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.readiness-gate-visual article { min-width: 0; padding: .8rem; background: rgba(255,255,255,.08); }
.readiness-gate-visual span, .readiness-gate-visual strong, .readiness-gate-visual small { display: block; }
.readiness-gate-visual span { color: #c9d4d8; font-size: .68rem; }
.readiness-gate-visual strong { margin-top: .35rem; color: white; font: 800 .95rem var(--display); }
.readiness-gate-visual small { margin-top: .7rem; color: #c3d1d5; font-size: .64rem; }
.readiness-gate-visual .gate-pass { border-top: 4px solid #8bd4aa; }
.readiness-gate-visual .gate-review { border-top: 4px solid #ffad82; }
.purchase-stack-visual { display: flex; min-height: 160px; overflow: hidden; }
.purchase-stack-visual > div { display: flex; min-width: 82px; padding: .8rem; flex-direction: column; justify-content: flex-end; }
.purchase-stack-visual span, .purchase-stack-visual strong { display: block; }
.purchase-stack-visual span { font-size: .68rem; }
.purchase-stack-visual strong { margin-top: .3rem; font: 800 .85rem var(--display); }
.stack-equity { background: #f7d68b; color: #34301e; }
.stack-closing { background: #c9a7e8; color: #2f2340; }
.stack-reserve { background: #9bd9cc; color: #193833; }
.scenario-visual, .housing-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 210px; }
.scenario-visual article, .housing-visual article { display: grid; grid-template-rows: auto 1fr auto auto; text-align: center; }
.scenario-visual article > span, .housing-visual article > span { color: #d3d7e8; font-size: .72rem; font-weight: 800; }
.scenario-visual article > div, .housing-visual article > div { display: flex; height: 125px; margin: .55rem auto; align-items: flex-end; }
.scenario-visual i, .housing-visual i { display: block; width: 54px; min-height: 8px; background: var(--result-accent); }
.scenario-visual article:nth-child(2) i, .housing-visual article:nth-child(2) i { background: #e7a9a0; }
.scenario-visual strong, .housing-visual strong { color: white; font: 800 1.05rem var(--display); }
.scenario-visual small, .housing-visual small { margin-top: .25rem; color: #b8bfd2; font-size: .65rem; }
.payoff-path-visual { display: grid; grid-template-columns: 1fr minmax(100px, 1fr) 1fr; align-items: center; gap: .6rem; padding: 1rem; background: rgba(255,255,255,.07); }
.payoff-path-visual span, .payoff-path-visual strong { display: block; }
.payoff-path-visual span { color: #d7c6c9; font-size: .68rem; }
.payoff-path-visual strong { margin-top: .25rem; color: white; font: 800 .9rem var(--display); }
.payoff-path-divider { width: 100%; height: 3px; background: var(--result-accent); }
.payoff-warning { display: grid; gap: .65rem; padding: 1rem; background: rgba(255,255,255,.07); }
.payoff-warning span { color: #e3d1d4; font-size: .75rem; }
.payoff-warning > div { display: grid; grid-template-columns: 1fr minmax(40px, 1fr) 1fr; gap: .7rem; align-items: center; }
.payoff-warning > div i { height: 3px; background: var(--result-accent); }
.payoff-warning > div span:last-child { text-align: right; }
.payoff-comparison-visual { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.payoff-comparison-visual article { padding: 1rem; background: rgba(255,255,255,.07); }
.payoff-comparison-visual article > div, .payoff-comparison-visual article > p { display: flex; justify-content: space-between; gap: .7rem; }
.payoff-comparison-visual article span { color: #ddcbce; font-size: .68rem; }
.payoff-comparison-visual article strong { color: white; font-family: var(--display); }
.payoff-comparison-visual article > i { display: block; height: 15px; margin-top: 1rem; background: rgba(255,255,255,.1); }
.payoff-comparison-visual article > i b { display: block; height: 100%; background: var(--result-accent); }
.payoff-comparison-visual article:nth-child(2) > i b { background: #d69e8b; }
.payoff-comparison-visual article > p { margin-top: .7rem; }
.balance-sheet-visual { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: .55rem; }
.balance-sheet-visual article { padding: .8rem; background: rgba(255,255,255,.08); }
.balance-sheet-visual > b { align-self: center; color: var(--result-accent); font-size: 1.4rem; }
.balance-sheet-visual span, .balance-sheet-visual strong { display: block; }
.balance-sheet-visual span { color: #b8d2d4; font-size: .68rem; }
.balance-sheet-visual strong { margin-top: .35rem; color: white; font: 800 .9rem var(--display); }
.balance-sheet-visual .balance-net { background: var(--result-accent); }
.balance-sheet-visual .balance-net span, .balance-sheet-visual .balance-net strong { color: #153e43; }
.waterfall-visual, .deadline-bars { display: grid; gap: .65rem; }
.visual-bar-row > div { display: flex; justify-content: space-between; gap: .8rem; color: #c8d4ce; font-size: .7rem; }
.visual-bar-row strong { color: white; }
.visual-bar-row > i { display: block; height: 8px; margin-top: .25rem; background: rgba(255,255,255,.09); }
.visual-bar-row > i b { display: block; height: 100%; background: #81968b; }
.bar-income > i b, .bar-margin > i b { background: var(--result-accent); }
.bar-irregular > i b { background: #e0bf7c; }
.deadline-visual { display: grid; grid-template-columns: 110px 1fr; gap: 1.2rem; align-items: center; }
.deadline-calendar { padding: 1rem; background: var(--result-accent); color: #43382c; text-align: center; }
.deadline-calendar span, .deadline-calendar strong, .deadline-calendar small { display: block; }
.deadline-calendar span, .deadline-calendar small { font-size: .7rem; font-weight: 800; }
.deadline-calendar strong { margin-block: .2rem; font: 800 2.3rem var(--display); }
.bar-required > i b { background: var(--result-accent); }
.bar-planned > i b { background: #aabf99; }
.allocation-visual { display: grid; gap: 1rem; }
.allocation-visual article > div, .allocation-key { display: flex; justify-content: space-between; gap: 1rem; color: #c4cfde; font-size: .72rem; }
.allocation-visual article strong { color: white; }
.allocation-visual article p { display: flex; height: 18px; overflow: hidden; margin-top: .4rem; background: #9ba8b8; }
.allocation-visual article i { display: block; height: 100%; background: var(--result-accent); }
.allocation-visual article b { flex: 1; background: #9ba8b8; }
.allocation-key { justify-content: flex-start; }
.allocation-key span::before { display: inline-block; width: 9px; height: 9px; margin-right: .35rem; background: var(--result-accent); content: ""; }
.allocation-key span:last-child::before { background: #9ba8b8; }
.housing-horizon-visual { display: grid; grid-template-columns: 112px 1fr; gap: 1rem; }
.housing-horizon-head { display: grid; grid-row: 1 / 4; place-content: center; padding: 1rem; background: var(--result-accent); color: #27333e; text-align: center; }
.housing-horizon-head strong { font: 800 2.5rem var(--display); }
.housing-horizon-head span { font-size: .7rem; font-weight: 800; }
.housing-cost-row { display: grid; grid-template-columns: 72px 1fr auto; gap: .7rem; align-items: center; color: #cbd5e0; font-size: .68rem; }
.housing-cost-row > i { height: 14px; background: rgba(255,255,255,.1); }
.housing-cost-row > i b { display: block; height: 100%; background: #91a6bb; }
.housing-cost-own > i b { background: var(--result-accent); }
.housing-cost-row strong { color: white; }
.housing-cost-row small { grid-column: 2 / 4; color: #aebdcb; }
.housing-horizon-visual > p { grid-column: 2; padding: .7rem; background: rgba(255,255,255,.08); color: #cbd5e0; font-size: .72rem; }
.housing-horizon-visual > p strong { color: white; }
.budget-plan-visual { padding: 1rem; background: rgba(255,255,255,.07); }
.budget-ledger-head, .budget-ledger-line, .budget-ledger-total { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(80px, 1.5fr) auto; align-items: center; gap: .7rem; }
.budget-ledger-head { padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.16); color: #bfd0cb; font-size: .72rem; }
.budget-ledger-head strong { grid-column: 2 / 4; color: white; text-align: right; }
.budget-ledger-line { padding-block: .55rem; color: #d5e1de; font-size: .72rem; }
.budget-ledger-line > i { height: 7px; background: rgba(255,255,255,.1); }
.budget-ledger-line > i b { display: block; height: 100%; background: var(--result-accent); }
.budget-ledger-line strong { color: white; font-family: var(--display); }
.budget-ledger-total { margin-top: .4rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.16); }
.budget-ledger-total span { grid-column: 1 / 3; }
.budget-ledger-total strong { color: var(--result-accent); font-family: var(--display); }
.budget-ledger-total.is-short strong { color: #ffc3a8; }
.independence-visual { padding: 1rem; background: rgba(255,255,255,.07); }
.independence-track { position: relative; height: 24px; margin-top: 1.4rem; background: rgba(255,255,255,.12); }
.independence-track i { display: block; height: 100%; background: var(--result-accent); }
.independence-track b { position: absolute; top: -7px; width: 4px; height: 38px; background: white; transform: translateX(-50%); }
.independence-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.independence-labels span, .independence-labels small, .independence-labels strong { display: block; }
.independence-labels span:last-child { text-align: right; }
.independence-labels small { color: #c8d2dc; }
.independence-labels strong { margin-top: .25rem; color: white; font-family: var(--display); }
.independence-visual > p { margin-top: 1rem; color: var(--result-accent); font-weight: 800; }
.income-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; height: 175px; align-items: end; }
.income-months article { text-align: center; }
.income-months article > div { display: flex; height: 105px; align-items: flex-end; justify-content: center; background: rgba(255,255,255,.06); }
.income-months i { display: block; width: 48%; min-height: 6px; background: var(--result-accent); }
.income-months span, .income-months strong { display: block; }
.income-months span { margin-top: .45rem; color: #cbd6c5; font-size: .67rem; }
.income-months strong { margin-top: .15rem; color: white; font: 800 .82rem var(--display); }
.income-floor-rule, .income-floor-visual > p { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem; }
.income-floor-rule { border-top: 3px solid var(--result-accent); background: rgba(255,255,255,.08); }
.income-floor-rule span { color: #d4dfd0; font-size: .72rem; }
.income-floor-rule strong { color: white; font-family: var(--display); }
.income-floor-visual > p { margin-top: .5rem; color: #d4dfd0; font-size: .72rem; }
.income-floor-visual .floor-short { color: #ffc3a8; }
.raise-before-after, .raise-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; }
.raise-before-after { color: #d9cddd; font-size: .72rem; }
.raise-before-after strong { display: block; margin-top: .2rem; color: white; font: 800 1rem var(--display); }
.raise-band { display: flex; height: 34px; margin-top: 1rem; overflow: hidden; background: rgba(255,255,255,.08); }
.raise-band i { display: block; height: 100%; }
.raise-essential { background: #f3d0a4; }
.raise-debt { background: #e99882; }
.raise-saving { background: var(--result-accent); }
.raise-investing { background: #aa9ed2; }
.raise-flexible { background: #8aa6a0; }
.raise-key { margin-top: 1rem; color: #d9cddd; font-size: .67rem; }
.raise-key span { display: grid; grid-template-columns: 10px 1fr; gap: .35rem; align-items: center; }
.raise-key span > i { width: 9px; height: 9px; background: currentColor; }
.raise-key strong { grid-column: 2; color: white; }
.savings-growth-visual { display: grid; grid-template-columns: 110px 1fr; align-items: end; gap: 1.2rem; }
.savings-vessel { display: flex; height: 190px; flex-direction: column-reverse; overflow: hidden; border: 2px solid rgba(255,255,255,.3); }
.savings-vessel > div { width: 100%; }
.growth-start { background: #8bbdaf; }
.growth-deposits { background: var(--result-accent); }
.growth-interest { background: #f4d48d; }
.savings-growth-key { display: grid; gap: .8rem; }
.savings-growth-key span { display: grid; grid-template-columns: 11px 1fr; gap: .5rem; color: #c8d8d3; font-size: .72rem; }
.savings-growth-key i { width: 11px; height: 11px; }
.savings-growth-key strong { grid-column: 2; color: white; font: 800 .9rem var(--display); }
.key-start { background: #8bbdaf; }.key-deposits { background: var(--result-accent); }.key-interest { background: #f4d48d; }
.deadline-contribution-visual { display: grid; grid-template-columns: 112px 1fr; gap: 1.2rem; align-items: stretch; }
.deadline-contribution-visual .deadline-calendar { display: flex; flex-direction: column; justify-content: center; }
.deadline-plan { padding: 1rem; background: rgba(255,255,255,.07); }
.deadline-plan > div { display: flex; justify-content: space-between; gap: 1rem; color: #d7ccbb; font-size: .7rem; }
.deadline-plan > div strong { color: white; }
.deadline-plan > p { height: 12px; margin-block: .75rem; background: rgba(255,255,255,.11); }
.deadline-plan > p i { display: block; height: 100%; background: var(--result-accent); }
.deadline-plan small { display: block; margin-top: .8rem; color: #d7ccbb; }
.education-path-visual { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; }
.education-year { display: grid; place-content: center; padding: 1rem; background: var(--result-accent); color: #173341; text-align: center; }
.education-year strong { font: 800 2.6rem var(--display); }
.education-year span { font-size: .7rem; font-weight: 800; }
.education-lines { display: grid; align-content: center; gap: 1rem; }
.education-lines > div { display: grid; grid-template-columns: minmax(110px, 1fr) 1.5fr auto; align-items: center; gap: .7rem; color: #c8d6dc; font-size: .68rem; }
.education-lines > div i { height: 9px; background: rgba(255,255,255,.1); }
.education-lines > div i b { display: block; height: 100%; background: var(--result-accent); }
.education-lines > div:nth-child(2) i b { background: #f0c98b; }
.education-lines > div strong { color: white; }
.education-lines > p { padding: .65rem; background: rgba(255,255,255,.08); color: #d6e0e4; font-size: .72rem; }
.education-lines > p.education-gap { border-left: 4px solid #ffc3a8; }
.education-lines > p.education-funded { border-left: 4px solid var(--result-accent); }
.vehicle-price, .vehicle-gap { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; }
.vehicle-price { background: var(--result-accent); color: #3b3027; }
.vehicle-price strong, .vehicle-gap strong { font-family: var(--display); }
.vehicle-offsets { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .7rem; }
.vehicle-offsets article { padding: 1rem; background: rgba(255,255,255,.08); }
.vehicle-offsets span, .vehicle-offsets strong { display: block; }
.vehicle-offsets span { color: #ddd0c5; font-size: .68rem; }
.vehicle-offsets strong { margin-top: .35rem; color: white; font-family: var(--display); }
.vehicle-gap { margin-top: .7rem; border: 1px solid rgba(255,255,255,.18); color: #ddd0c5; }
.vehicle-gap strong { color: var(--result-accent); }
.vehicle-gap.has-gap strong { color: #ffc3a8; }
.minimum-opening { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; background: rgba(255,255,255,.08); color: #ddcbce; }
.minimum-opening strong { color: white; font-family: var(--display); }
.minimum-tail { position: relative; height: 36px; margin-top: 1.5rem; }
.minimum-tail i { display: block; height: 100%; background: linear-gradient(90deg, var(--result-accent), rgba(255,195,168,.12)); clip-path: polygon(0 0, 100% 42%, 100% 58%, 0 100%); }
.minimum-tail b { position: absolute; right: 0; top: 0; width: 3px; height: 100%; background: white; }
.minimum-tail-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; color: #ddcbce; font-size: .68rem; }
.minimum-payment-visual > p { margin-top: 1rem; color: #ddcbce; font-size: .75rem; }
.transfer-comparison-visual { display: grid; grid-template-columns: 1fr 90px 1fr; gap: .7rem; align-items: stretch; }
.transfer-comparison-visual article, .transfer-window, .transfer-balance { padding: 1rem; background: rgba(255,255,255,.08); text-align: center; }
.transfer-comparison-visual span, .transfer-comparison-visual strong, .transfer-comparison-visual small { display: block; }
.transfer-comparison-visual article span { color: #d7d3e4; font-size: .68rem; }
.transfer-comparison-visual article strong { margin-top: .5rem; color: white; font: 800 1.05rem var(--display); }
.transfer-comparison-visual article small { margin-top: .3rem; color: #bdb8d0; }
.transfer-window { display: grid; place-content: center; background: var(--result-accent); color: #312f4a; }
.transfer-window strong { font: 800 2rem var(--display); }
.transfer-window span { font-size: .63rem; font-weight: 800; }
.transfer-window i { width: 100%; height: 3px; margin-top: .6rem; background: #312f4a; }
.transfer-balance { grid-column: 1 / 4; display: flex; justify-content: space-between; color: #d7d3e4; }
.transfer-balance strong { color: var(--result-accent); font-family: var(--display); }
.consolidation-sources { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.consolidation-sources article, .consolidation-new { padding: 1rem; background: rgba(255,255,255,.08); }
.consolidation-sources span, .consolidation-sources strong, .consolidation-sources small, .consolidation-new span, .consolidation-new strong, .consolidation-new small { display: block; }
.consolidation-sources span, .consolidation-new span { color: #ddcfd1; font-size: .68rem; }
.consolidation-sources strong, .consolidation-new strong { margin-top: .35rem; color: white; font-family: var(--display); }
.consolidation-sources small, .consolidation-new small { margin-top: .25rem; color: #cbbabd; }
.consolidation-join { position: relative; height: 34px; }
.consolidation-join i, .consolidation-join b { position: absolute; background: var(--result-accent); }
.consolidation-join i { left: 25%; top: 0; width: 50%; height: 2px; }
.consolidation-join b { left: 50%; top: 0; width: 2px; height: 100%; }
.consolidation-new { border-top: 4px solid var(--result-accent); text-align: center; }
.payoff-lane { display: grid; grid-template-columns: 110px 1fr auto; gap: .7rem; align-items: center; color: #ddcfca; font-size: .68rem; }
.payoff-lane + .payoff-lane { margin-top: 1rem; }
.payoff-lane > i { height: 18px; background: rgba(255,255,255,.09); }
.payoff-lane > i b { display: block; height: 100%; background: #b9998b; }
.payoff-lane-fast > i b { background: var(--result-accent); }
.payoff-lane strong { color: white; }
.extra-payment-visual > p { margin-top: 1.2rem; padding: .75rem; background: rgba(255,255,255,.08); color: var(--result-accent); font-weight: 800; }
.affordability-ceiling-visual { display: grid; gap: .7rem; }
.affordability-limit { display: grid; grid-template-columns: minmax(120px, 1fr) 1.5fr auto; gap: .7rem; align-items: center; color: #cad5d9; font-size: .68rem; }
.affordability-limit > i { height: 9px; background: rgba(255,255,255,.1); }
.affordability-limit > i b { display: block; height: 100%; background: #8a9ba2; }
.affordability-limit strong { color: white; }
.affordability-limit.is-controlling { padding: .65rem; background: rgba(255,255,255,.08); }
.affordability-limit.is-controlling > i b { background: var(--result-accent); }
.affordability-ceiling-visual > p { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; color: #cad5d9; }
.affordability-ceiling-visual > p strong { color: var(--result-accent); }
.mortgage-term { display: grid; grid-template-columns: 130px 1fr auto; gap: .7rem; align-items: center; color: #ced8dc; font-size: .68rem; }
.mortgage-term + .mortgage-term { margin-top: 1rem; }
.mortgage-term > i { height: 22px; background: rgba(255,255,255,.09); }
.mortgage-term > i b { display: block; height: 100%; background: #8a9ba2; }
.mortgage-term-short > i b { background: var(--result-accent); }
.mortgage-term strong { color: white; }
.mortgage-cut { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: .8rem; background: rgba(255,255,255,.08); color: #ced8dc; }
.mortgage-cut strong { color: var(--result-accent); }
.refinance-payments, .refinance-labels, .refinance-visual > p { display: flex; justify-content: space-between; gap: 1rem; }
.refinance-payments { color: #d1d9e5; font-size: .72rem; }
.refinance-payments strong { display: block; margin-top: .25rem; color: white; font-family: var(--display); }
.refinance-ruler { position: relative; height: 12px; margin-top: 1.5rem; background: rgba(255,255,255,.1); }
.refinance-ruler i { display: block; height: 100%; background: var(--result-accent); }
.refinance-ruler b { position: absolute; top: -8px; width: 3px; height: 28px; background: white; }
.refinance-labels { margin-top: .65rem; color: #bfc8d6; font-size: .68rem; }
.refinance-visual > p { margin-top: 1rem; padding: .75rem; background: rgba(255,255,255,.08); color: #d1d9e5; }
.refinance-visual > p strong { color: var(--result-accent); }
.closing-stack { display: flex; min-height: 230px; flex-direction: column-reverse; justify-content: flex-start; overflow: hidden; }
.closing-stack > div { display: flex; min-height: 36px; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .8rem; color: #282a35; font-size: .68rem; }
.closing-stack strong { font-family: var(--display); }
.closing-equity { background: #f7d68b; }.closing-legal { background: #d5b8e7; }.closing-other { background: #b9c8e3; }.closing-move { background: #a8d4c5; }.closing-reserve { background: #79b7a8; }
.closing-cash-visual > p { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; color: #d6d7df; }
.closing-cash-visual > p strong { color: var(--result-accent); }
.entry-path { display: grid; grid-template-columns: minmax(130px, 1fr) 1.5fr auto; gap: .7rem; align-items: center; color: #d4d7e4; font-size: .7rem; }
.entry-path + .entry-path { margin-top: 1.2rem; }
.entry-dots { display: flex; gap: .3rem; }
.entry-dots i { width: 10px; height: 18px; background: rgba(255,255,255,.12); }
.entry-dots i.is-full { background: var(--result-accent); }
.entry-path-phased .entry-dots i.is-full { background: #f0b6ac; }
.entry-path strong { color: white; }
.entry-timing-visual > p { margin-top: 1.2rem; color: #bec3d4; font-size: .72rem; }
.purchasing-nominal { position: relative; min-height: 170px; padding: 1rem; background: rgba(255,255,255,.11); }
.purchasing-nominal > span, .purchasing-nominal > strong { display: block; }
.purchasing-nominal > span { color: #c9d2e1; font-size: .7rem; }
.purchasing-nominal > strong { margin-top: .35rem; color: white; font: 800 1.1rem var(--display); }
.purchasing-real { position: absolute; left: 0; bottom: 0; min-width: 22%; padding: 1rem; background: var(--result-accent); color: #22334b; }
.purchasing-real span, .purchasing-real strong { display: block; white-space: nowrap; }
.purchasing-real span { font-size: .66rem; }
.purchasing-real strong { margin-top: .25rem; font-family: var(--display); }
.purchasing-power-visual > p { margin-top: .8rem; color: #c9d2e1; font-size: .72rem; }
.retirement-ages { display: flex; align-items: center; gap: .8rem; color: #c9d8d3; font-size: .72rem; }
.retirement-ages i { flex: 1; height: 3px; background: var(--result-accent); }
.retirement-ages strong { color: white; }
.retirement-target { margin-top: 1.3rem; }
.retirement-target > div { display: flex; justify-content: space-between; gap: 1rem; color: #c9d8d3; font-size: .68rem; }
.retirement-target > div strong { color: white; }
.retirement-target > p { position: relative; height: 20px; margin-block: .65rem; background: rgba(255,255,255,.1); }
.retirement-target > p i { display: block; height: 100%; background: var(--result-accent); }
.retirement-target > p b { position: absolute; top: -6px; width: 3px; height: 32px; background: white; }
.retirement-gap-visual > small { color: var(--result-accent); font-weight: 800; }
.tool-explainer { padding-block: 4rem 6rem; }
.tool-explainer h2 { margin-top: 2rem; font-size: 28px; }
.tool-explainer h2:first-child { margin-top: 0; }
.tool-explainer p, .tool-explainer ul { margin-top: 1rem; }
.tool-explainer li + li { margin-top: .55rem; }
.tool-explainer section { margin-top: 3rem; }
.tool-answer-block { padding: clamp(1.2rem, 4vw, 2rem); background: #f0f5f1; }
.tool-story-scenario-lab .tool-answer-block, .tool-story-housing-tradeoff .tool-answer-block { background: #eef1f8; }
.tool-story-payoff-path .tool-answer-block, .tool-story-deadline-pace .tool-answer-block { background: #f7f0e8; }
.tool-answer { color: var(--ink); font-size: 1.14rem; }
.tool-story-section-2 { padding: clamp(1rem, 4vw, 2rem); background: #f1f6f3; }
.tool-story-scenario-lab .tool-story-section-2, .tool-story-housing-tradeoff .tool-story-section-2 { background: #f0f2f8; }
.tool-story-payoff-path .tool-story-section-2, .tool-story-deadline-pace .tool-story-section-2 { background: #f8f2eb; }
.tool-decision-module { margin-top: 3rem; padding: clamp(1.2rem, 4vw, 2rem); background: var(--mint-pale); }
.tool-decision-module > h2 { margin-top: 0; }
.tool-decision-module h3 { font-size: 1rem; }
.tool-decision-module p { color: var(--muted); font-size: .9rem; }
.tool-module-route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.3rem; padding: 0; list-style: none; }
.tool-module-route li { display: flex; gap: .6rem; align-items: center; }
.tool-module-band { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.3rem; }
.tool-module-band article { padding: 1rem; background: white; }
.tool-module-band article:first-child { background: #d5ece3; }
.tool-module-band article:last-child { background: #e7f2ce; }
.tool-module-gates { display: grid; gap: .65rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.tool-module-gates li { display: grid; grid-template-columns: 1fr; gap: .75rem; padding: .85rem; background: white; }
.tool-module-stack { display: grid; gap: .45rem; margin-top: 1.3rem; }
.tool-module-stack article { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; background: white; }
.tool-module-stack article:nth-child(2) { margin-inline: 1rem; background: #f3e7d5; }
.tool-module-stack article:nth-child(3) { margin-inline: 2rem; background: #d9ece5; }
.tool-module-stack p { margin-top: 0; text-align: right; }
.tool-module-protocol { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.3rem; }
.tool-module-protocol article { padding: 1rem; background: white; }
.tool-module-payoff { display: grid; gap: .7rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.tool-module-payoff li { display: grid; grid-template-columns: 20px 1fr; gap: .8rem; }
.tool-module-payoff li > span { width: 16px; height: 16px; margin-top: .2rem; border: 4px solid var(--paper); background: var(--coral-text); outline: 2px solid var(--coral-text); }
.tool-module-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .6rem; align-items: center; margin-top: 1.3rem; }
.tool-module-equation article { min-height: 130px; padding: 1rem; background: white; }
.tool-module-equation > strong { font-size: 1.5rem; }
.tool-module-waterfall { display: grid; gap: .45rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.tool-module-waterfall li { padding: .9rem 1rem; background: white; }
.tool-module-waterfall li:nth-child(2) { width: 88%; margin-left: 4%; }
.tool-module-waterfall li:nth-child(3) { width: 76%; margin-left: 8%; }
.tool-module-waterfall li:nth-child(4) { width: 64%; margin-left: 12%; background: #d9ece5; }
.tool-module-deadline { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.3rem 0 0; }
.tool-module-deadline div { padding: 1rem; background: white; }
.tool-module-deadline dt { font-family: var(--display); font-weight: 800; }
.tool-module-deadline dd { margin: .5rem 0 0; color: var(--muted); font-size: .88rem; }
.tool-module-tradeoff { width: 100%; min-width: 520px; margin-top: 1.3rem; border-collapse: separate; border-spacing: 0; background: white; font-size: .9rem; }
.tool-module-tradeoff th, .tool-module-tradeoff td { padding: .85rem 1rem; text-align: left; vertical-align: top; }
.tool-module-tradeoff thead th { background: var(--ink); color: white; font-family: var(--display); }
.tool-module-tradeoff tbody th { color: var(--ink); font-family: var(--display); }
.tool-module-tradeoff tbody tr:nth-child(even) th, .tool-module-tradeoff tbody tr:nth-child(even) td { background: #f2f6f3; }
.tool-module-allocation { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.3rem; }
.tool-module-allocation article { padding: 1rem; background: white; }
.tool-next-step { padding: 1.4rem; background: var(--mint-pale); }
.tool-next-step h2 { margin-top: 0; }
.tool-related-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.tool-related-links article { padding: 1.2rem; border: 1px solid var(--line); background: white; }
.tool-related-links h3 { font-size: 1.2rem; }
.tool-related-links h3 a { text-decoration: none; }
.tool-related-links p { color: var(--muted); font-size: .9rem; }

.magazine-list { padding-top: 0; }
.guide-group { padding-block: 2rem; }
.guide-group-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.4rem; }
.guide-group-head h2 { font-size: 28px; }
.guide-group-head h2 a { text-decoration: none; }
.guide-group-head > a { font-size: .84rem; font-weight: 800; }
.guide-group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.guide-group-grid article { padding: 1.4rem; border: 1px solid var(--line); background: white; }
.guide-group-grid h3 { font-size: 1.35rem; }
.guide-group-grid h3 a { text-decoration: none; }
.guide-group-grid p { margin-top: .7rem; color: var(--muted); }
.guide-group-grid article > a { display: inline-block; margin-top: 1rem; font-size: .84rem; font-weight: 800; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 4rem; padding-block: 3rem 6rem; }
.article-header { grid-column: 1 / -1; }
.article-header h1 { font-size: clamp(36px, 5vw, 48px); }
.article-dek { margin-top: 1.2rem; color: var(--muted); font-size: 1.2rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: 1.5rem; color: var(--muted); font-size: .8rem; }
.takeaways { grid-column: 2; grid-row: 2 / span 2; align-self: start; position: sticky; top: 100px; padding: 1.35rem; background: var(--mint-pale); }
.takeaways h2 { font-size: 1.25rem; }
.takeaways ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.takeaways li + li { margin-top: .7rem; }
.article-body { grid-column: 1; }
.article-featured { grid-column: 1; width: min(100%, 380px); aspect-ratio: 16 / 9; justify-self: start; margin: 0; overflow: hidden; }
.article-featured img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-body section, .imported-body > * { margin-top: 1.35rem; }
.article-body section { margin-top: 3rem; }
.article-body h2 { font-size: clamp(24px, 3vw, 28px); }
.article-body h3 { font-size: 1.35rem; }
.article-body p { margin-top: 1rem; font-size: 1.04rem; }
.article-body ul, .article-body ol { margin-top: 1rem; padding-left: 1.35rem; }
.article-body li + li { margin-top: .5rem; }
.article-decision-module { margin-top: 3rem; padding: clamp(1.25rem, 4vw, 2rem); }
.module-route { background: var(--ink); color: white; }
.module-route h2, .module-route h3 { color: white; }
.module-route > .section-answer, .module-route p { color: #c5d9d3; }
.module-flow-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1.4rem; }
.module-flow-list article { position: relative; min-width: 0; padding: 1rem; background: rgba(255,255,255,.08); }
.module-flow-list h3 { font-size: 1rem; }
.module-flow-list p { margin-top: .5rem; font-size: .88rem; }
.module-timeline { background: #f0eddf; }
.module-timeline-list { display: grid; gap: .7rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.module-timeline-list li { display: grid; grid-template-columns: 24px 1fr; gap: .8rem; align-items: start; padding: .85rem; background: var(--paper); }
.module-timeline-list li > span { display: block; width: 20px; height: 20px; margin-top: .15rem; border: 5px solid var(--mint); background: var(--ink); }
.module-timeline-list h3 { font-size: 1.02rem; }
.module-timeline-list p { margin-top: .35rem; color: var(--muted); font-size: .9rem; }
.module-matrix { background: var(--mint-pale); }
.module-matrix table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: var(--paper); font-size: .9rem; }
.module-matrix th, .module-matrix td { padding: .85rem .9rem; text-align: left; vertical-align: top; }
.module-matrix thead th { background: var(--ink); color: white; font-family: var(--display); }
.module-matrix tbody th { color: var(--ink); font-family: var(--display); }
.module-matrix tbody tr:nth-child(even) th, .module-matrix tbody tr:nth-child(even) td { background: #f4f8f4; }
.module-checklist { background: #f0eddf; }
.module-checklist-list { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.module-checklist-list li { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; margin: 0; padding: 1rem; background: var(--paper); }
.module-checklist-list svg { width: 30px; fill: var(--mint-pale); stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.module-checklist-list h3 { font-size: 1.03rem; }
.module-checklist-list p { margin-top: .4rem; color: var(--muted); font-size: .9rem; }
.module-stack { background: var(--ink); color: white; }
.module-stack h2, .module-stack h3 { color: white; }
.module-stack > .section-answer { color: #c5d9d3; }
.module-stack-list { display: grid; gap: .55rem; margin-top: 1.4rem; }
.module-stack-list article { display: grid; grid-template-columns: .7fr 1.2fr 1fr; gap: 1rem; align-items: start; padding: 1rem; background: rgba(255,255,255,.08); }
.module-stack-list h3 { font-size: 1rem; }
.module-stack-list p { margin: 0; color: #c5d9d3; font-size: .9rem; }
.module-stack-list strong { color: var(--mint); font-size: .82rem; }
.module-ledger { background: var(--mint-pale); }
.module-ledger-head, .module-ledger-list > div { display: grid; grid-template-columns: .65fr 1.2fr 1fr; gap: 1rem; }
.module-ledger-head { margin-top: 1.4rem; padding: 0 .9rem .5rem; color: var(--muted); font-size: .75rem; font-weight: 800; }
.module-ledger-list { margin: 0; }
.module-ledger-list > div { margin-top: .5rem; padding: .9rem; background: var(--paper); }
.module-ledger-list dt { color: var(--ink); font-family: var(--display); font-weight: 800; }
.module-ledger-list dd { margin: 0; color: var(--muted); font-size: .88rem; }
.module-decision { background: #fff0e9; }
.module-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.4rem; }
.module-decision-grid article { padding: 1rem; background: var(--paper); }
.module-decision-grid h3 { font-size: 1.02rem; }
.module-decision-grid p { margin-top: .55rem; color: var(--muted); font-size: .9rem; }
.module-decision-grid p:last-child { color: var(--ink); }
.guide-workbench { margin-top: 3rem; padding: clamp(1.3rem, 4vw, 2rem); background: #edf5ef; }
.guide-workbench > .section-answer { margin-top: 1rem; }
.guide-workbench h3 { font-size: 1.05rem; }
.guide-workbench-calculation { background: #f4ede3; }
.guide-workbench-ledger { background: var(--mint-pale); }
.guide-workbench-sequence { background: #eef1f8; }
.guide-workbench-decision { background: #fff0e9; }
.guide-workbench-check { background: #f0eddf; }
.workbench-formula { margin-top: 1.3rem; padding: 1rem; background: var(--ink); color: white; font-family: var(--display); }
.workbench-example { margin-top: .75rem; padding: 1rem; background: var(--paper); }
.workbench-example p { margin: 0; }
.workbench-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: .75rem 0 0; }
.workbench-notes div { padding: 1rem; background: var(--paper); }
.workbench-notes dt { color: var(--ink); font-family: var(--display); font-weight: 800; }
.workbench-notes dd { margin: .45rem 0 0; color: var(--muted); font-size: .9rem; }
.workbench-table-wrap { margin-top: 1.3rem; }
.workbench-table { width: 100%; min-width: 650px; border-collapse: separate; border-spacing: 0; background: var(--paper); font-size: .9rem; }
.workbench-table th, .workbench-table td { padding: .9rem 1rem; text-align: left; vertical-align: top; }
.workbench-table thead th { background: var(--ink); color: white; font-family: var(--display); }
.workbench-table tbody th { color: var(--ink); font-family: var(--display); }
.workbench-table tbody tr:nth-child(even) th, .workbench-table tbody tr:nth-child(even) td { background: #f4f8f4; }
.workbench-sequence { display: grid; gap: .7rem; margin-top: 1.3rem; }
.workbench-sequence article { display: grid; grid-template-columns: 1fr; gap: .8rem; padding: 1rem; background: var(--paper); }
.workbench-sequence p { margin-top: .45rem; color: var(--muted); font-size: .9rem; }
.workbench-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.3rem; }
.workbench-decisions article { padding: 1rem; background: var(--paper); }
.workbench-decisions p { margin-top: .5rem; color: var(--muted); font-size: .9rem; }
.workbench-decisions p:last-child { color: var(--ink); }
.workbench-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.workbench-checks li { display: grid; grid-template-columns: 34px 1fr; gap: .75rem; padding: 1rem; background: var(--paper); }
.workbench-checks svg { width: 30px; fill: none; stroke: var(--ink); stroke-width: 2; }
.workbench-checks p { margin-top: .45rem; color: var(--muted); font-size: .9rem; }
.workbench-closing { margin-top: 1.2rem; color: var(--text); font-weight: 500; }
.workbench-closing-more { margin-top: .8rem; }
.guide-format-route .takeaways, .guide-format-stack .takeaways { background: var(--ink); color: white; }
.guide-format-route .takeaways h2, .guide-format-stack .takeaways h2 { color: white; }
.guide-format-route .takeaways li::marker, .guide-format-stack .takeaways li::marker { color: var(--mint); }
.guide-format-timeline .takeaways, .guide-format-checklist .takeaways { background: #f0eddf; }
.guide-format-decision .takeaways { background: #fff0e9; }
.table-scroll { overflow-x: auto; margin-top: 1.2rem; }
.comparison-section table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: var(--paper); font-size: .94rem; }
.comparison-section th, .comparison-section td { padding: .9rem 1rem; text-align: left; vertical-align: top; }
.comparison-section th { background: var(--ink); color: white; font-family: var(--display); }
.comparison-section tbody tr:nth-child(even) td { background: var(--mint-pale); }
.decision-section { background: #f0eddf; }
.decision-table-wrap { background: var(--paper); }
.decision-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: .93rem; }
.decision-table th, .decision-table td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; }
.decision-table th { background: var(--ink); color: white; font-family: var(--display); }
.decision-table tbody tr:nth-child(even) td { background: var(--mint-pale); }
.decision-table td:first-child { color: var(--ink); font-weight: 750; }
.decision-table a { font-weight: 800; }
.decision-note { margin-top: 1.5rem; }
.decision-note h3 { font-size: 1.25rem; }
.decision-note p { margin-top: .6rem; color: var(--muted); }
.source-note { padding: 1.4rem; background: #f0eddf; }
.related { padding-bottom: 6rem; }
.related-tools { padding-bottom: 3rem; }
.related h2 { margin-bottom: 1.4rem; font-size: 28px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related-grid article { padding: 1.25rem; background: white; }
.related-grid h3 a { text-decoration: none; }
.related-grid p { margin-top: .7rem; color: var(--muted); font-size: .86rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; }
.pagination a { color: var(--ink); font-weight: 800; }
.pagination span { color: var(--muted); font-size: .9rem; }
.blog-grid article { padding: 1.4rem; background: white; }
.blog-grid figure { margin: -1.4rem -1.4rem 1.2rem; overflow: hidden; }
.blog-grid figure img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; }
.blog-grid h2 { font-size: 1.35rem; }
.blog-grid h2 a { text-decoration: none; }
.blog-grid article > span { display: block; margin-top: .7rem; color: var(--muted); font-size: .76rem; }
.blog-grid p { margin-top: .8rem; color: var(--muted); }
.blog-grid article > a { display: inline-block; margin-top: 1rem; font-size: .84rem; font-weight: 800; }
.empty-state { max-width: 720px; padding: 2rem; background: white; }
.empty-state h2 { font-size: 28px; }
.empty-state p { margin-top: 1rem; }
.prose-page { padding-bottom: 6rem; }
.prose-page h2 { margin-top: 2.7rem; font-size: 28px; }
.prose-page h2:first-child { margin-top: 0; }
.prose-page p { margin-top: 1rem; font-size: 1.04rem; }
.hub-hero { padding-block: clamp(4rem, 8vw, 7rem); overflow: hidden; background: var(--ink-deep); color: white; }
.hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hub-hero h1 { color: white; font-size: clamp(36px, 5.5vw, 48px); }
.hub-hero p { margin-top: 1.4rem; color: #bfd0cb; font-size: 1.14rem; }
.hub-route svg { width: 100%; fill: none; stroke: var(--mint); stroke-width: 4; stroke-linecap: round; }
.hub-route circle { fill: var(--coral); stroke: none; }
.hub-quick { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; padding-block: 4rem; }
.hub-quick > div p { margin-top: 1rem; color: var(--muted); }
.hub-quick ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.hub-quick li { padding: 1.15rem; background: var(--paper); }
.hub-quick h3 { font-size: 1.1rem; }
.hub-quick li p { margin-top: .55rem; color: var(--muted); font-size: .88rem; }
.hub-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hub-guide-grid article { display: flex; min-height: 285px; flex-direction: column; padding: 1.35rem; border: 1px solid var(--line); background: white; }
.hub-guide-grid h3 { font-size: 1.25rem; }
.hub-guide-grid h3 a { text-decoration: none; }
.hub-guide-grid p { margin-top: .75rem; color: var(--muted); font-size: .9rem; }
.hub-guide-grid article > div { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin-top: auto; padding-top: 1rem; color: var(--muted); font-size: .72rem; }
.hub-guide-grid article > div > a { font-weight: 800; white-space: nowrap; }
.hub-depth { padding-block: clamp(4rem, 8vw, 7rem); background: #f0eddf; }
.hub-depth-grid { display: grid; grid-template-columns: 250px minmax(0, 760px); justify-content: space-between; gap: 4rem; }
.hub-depth nav { align-self: start; position: sticky; top: 105px; display: flex; flex-direction: column; gap: .65rem; padding: 1.2rem; background: var(--cream); }
.hub-depth nav strong { color: var(--ink); font-family: var(--display); }
.hub-depth nav a { color: var(--muted); font-size: .82rem; text-decoration: none; }
.hub-depth nav a:hover { color: var(--ink); text-decoration: underline; }
.hub-depth-body section + section { margin-top: 3.2rem; }
.hub-depth-body h2 { font-size: clamp(24px, 3vw, 28px); }
.hub-depth-body p { margin-top: 1rem; font-size: 1.04rem; }
.hub-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.not-found { display: grid; min-height: 65vh; place-items: center; text-align: center; }
.not-found h1 { font-size: clamp(36px, 6vw, 48px); }
.not-found p { margin-top: 1.2rem; }

.site-footer { padding-block: 4rem 2rem; background: var(--ink-deep); color: white; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; }
.site-footer .brand { color: white; }
.site-footer .brand > span > span { color: var(--coral); }
.site-footer .brand img { background: var(--cream); }
.footer-brand p { max-width: 390px; margin-top: 1rem; color: #b8cbc5; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: .6rem; }
.footer-grid strong { font: 700 .9rem var(--display); }
.footer-grid a { color: #b8cbc5; font-size: .86rem; text-decoration: none; }
.footer-grid a:hover { color: var(--mint); }
.footer-note { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3rem; color: #8da7a0; font-size: .72rem; }

@media (max-width: 1040px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .route-map { grid-template-columns: repeat(3, 1fr); }
  .principles-grid { grid-template-columns: 1fr 1fr; }
  .library-directory-grid { grid-template-columns: 1fr; }
  .library-directory-guides { grid-column: auto; }
}

@media (max-width: 960px) {
  .desktop-nav, .nav-cta { display: none; }
  .nav-inner { justify-content: space-between; }
  .menu-button { display: flex; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 3.5rem 0 2rem; }
  .hero-visual { width: min(100%, 340px); height: auto; aspect-ratio: 16 / 9; justify-self: start; margin-bottom: 2.5rem; }
  .hero-visual img { object-position: center; }
  .route-map { grid-template-columns: 1fr; gap: 1rem; }
  .article-layout { grid-template-columns: 1fr; gap: 2rem; }
  .takeaways { grid-column: 1; grid-row: auto; position: static; }
  .article-body { grid-column: 1; }
  .hub-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hub-route { width: min(100%, 440px); }
  .hub-guide-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-quick { grid-template-columns: 1fr; gap: 2rem; }
  .hub-depth-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hub-depth nav { position: static; }
  .calculator-payoff-path .input-groups, .calculator-balance-sheet .input-groups, .calculator-allocation-drift .input-groups, .calculator-budget-ledger .input-groups, .calculator-consolidation-test .input-groups, .calculator-closing-cash .input-groups, .calculator-retirement-gap .input-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .shell { width: min(100% - 28px, 1180px); }
  .narrow { width: min(100% - 28px, 760px); }
  .site-nav, .nav-inner { min-height: 68px; }
  .brand img { width: 36px; height: 36px; }
  .menu-button { min-width: 88px; height: 42px; }
  .mobile-menu { inset: 68px 0 0; }
  .crumbs { flex-wrap: nowrap; overflow-x: auto; padding-block: .6rem; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .crumbs::-webkit-scrollbar { display: none; }
  .mobile-featured, .mobile-grid { grid-template-columns: 1fr; }
  .mobile-menu-footer { align-items: flex-start; flex-direction: column; }
  .mobile-menu-footer p { text-align: left; }
  .hero-copy h1, .page-hero h1, .tool-header h1, .article-header h1, .hub-hero h1 { font-size: clamp(34px, 10vw, 48px); line-height: 1.08; }
  .hero-copy { padding: 3rem 0 1.5rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-visual { width: min(100%, 280px); height: auto; aspect-ratio: 16 / 9; margin-bottom: 2rem; }
  .article-featured { width: min(100%, 320px); }
  .page-hero { padding-block: 3rem 4rem; }
  .tool-header { padding-block: 2.5rem 1.5rem; }
  .hub-hero { padding-block: 3.5rem; }
  .tool-grid, .tool-grid-full, .magazine-grid, .guide-group-grid, .related-grid, .blog-grid, .hub-guide-grid, .hub-tool-grid { grid-template-columns: 1fr; }
  .guide-group-head { align-items: flex-start; flex-direction: column; }
  .hub-route { width: min(100%, 320px); }
  .story-lead { grid-column: auto; }
  .tool-card { min-height: 280px; }
  .principles-grid, .footer-grid { grid-template-columns: 1fr; }
  .calculator { grid-template-columns: 1fr; }
  .calculator-reserve-band, .calculator-scenario-lab, .calculator-cash-waterfall, .calculator-independence-target, .calculator-savings-growth, .calculator-declining-minimum, .calculator-transfer-deadline, .calculator-payment-acceleration, .calculator-mortgage-acceleration, .calculator-refinance-crossing, .calculator-entry-timing, .calculator-purchasing-power { grid-template-areas: "form" "result"; }
  .calculator-readiness-gates .input-groups, .calculator-housing-tradeoff .input-groups, .calculator-payoff-path .input-groups, .calculator-balance-sheet .input-groups, .calculator-allocation-drift .input-groups, .calculator-budget-ledger .input-groups, .calculator-education-path .input-groups, .calculator-consolidation-test .input-groups, .calculator-closing-cash .input-groups, .calculator-retirement-gap .input-groups { grid-template-columns: 1fr; }
  .field-grid, .result-grid { grid-template-columns: 1fr; }
  .result-primary strong { overflow-wrap: anywhere; }
  .result-reserve-band .result-primary strong { font-size: 1.8rem; }
  .readiness-gate-visual { grid-template-columns: 1fr; }
  .purchase-stack-visual { min-height: 190px; flex-direction: column; }
  .purchase-stack-visual > div { min-height: 58px; }
  .payoff-path-visual { grid-template-columns: 1fr; }
  .payoff-path-divider { width: 3px; height: 34px; }
  .payoff-comparison-visual { grid-template-columns: 1fr; }
  .balance-sheet-visual, .tool-module-equation { grid-template-columns: 1fr; }
  .balance-sheet-visual > b, .tool-module-equation > strong { text-align: center; }
  .deadline-visual { grid-template-columns: 1fr; }
  .deadline-calendar { max-width: 140px; }
  .budget-ledger-head, .budget-ledger-line, .budget-ledger-total { grid-template-columns: minmax(95px, 1fr) minmax(55px, 1fr) auto; gap: .45rem; }
  .savings-growth-visual, .deadline-contribution-visual, .education-path-visual { grid-template-columns: 1fr; }
  .savings-vessel { width: 120px; }
  .education-year { max-width: 160px; }
  .education-lines > div, .affordability-limit, .payoff-lane, .mortgage-term, .entry-path { grid-template-columns: 1fr; }
  .housing-horizon-visual { grid-template-columns: 1fr; }
  .housing-horizon-head { grid-row: auto; max-width: 160px; }
  .housing-horizon-visual > p { grid-column: 1; }
  .transfer-comparison-visual { grid-template-columns: 1fr; }
  .transfer-balance { grid-column: 1; }
  .raise-key { display: grid; grid-template-columns: 1fr 1fr; }
  .vehicle-offsets { grid-template-columns: 1fr; }
  .purchasing-real { position: static; margin-top: 1rem; }
  .purchasing-nominal { min-height: 0; }
  .tool-module-route, .tool-module-band, .tool-module-protocol, .tool-module-deadline, .tool-module-allocation { grid-template-columns: 1fr; }
  .tool-module-route li { align-items: flex-start; flex-direction: column; }
  .tool-module-stack article:nth-child(2), .tool-module-stack article:nth-child(3) { margin-inline: 0; }
  .tool-related-links { grid-template-columns: 1fr; }
  .use-steps ol, .hub-quick ol { grid-template-columns: 1fr; }
  .article-layout { padding-top: 2rem; }
  .article-meta { flex-direction: column; gap: .2rem; }
  .module-flow-list, .module-checklist-list, .module-decision-grid, .workbench-notes, .workbench-decisions, .workbench-checks { grid-template-columns: 1fr; }
  .module-stack-list article, .module-ledger-head, .module-ledger-list > div { grid-template-columns: 1fr; }
  .module-ledger-head { display: none; }
  .footer-note { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}