:root { --bg: #f5f7fb; --ink: #101828; --muted: #64748b; --line: #dbe3ef; --panel: #ffffff; --navy: #0f172a; --blue: #2563eb; --green: #047857; --amber: #b45309; --red: #be123c; --shadow: 0 18px 60px rgba(15, 23, 42, .12); --radius: 8px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); } a { color: inherit; text-decoration: none; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(16px, 4vw, 48px); background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: var(--navy); border-radius: 8px; font-weight: 800; } .brand strong, .brand small { display: block; line-height: 1.05; } .brand small { margin-top: 4px; color: var(--muted); font-size: 12px; } .nav { display: flex; gap: 18px; color: #334155; font-size: 14px; font-weight: 650; } .hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 28px; min-height: calc(100vh - 68px); padding: clamp(34px, 7vw, 84px) clamp(16px, 4vw, 48px) 36px; align-items: center; background: linear-gradient(120deg, rgba(15, 23, 42, .95), rgba(30, 64, 175, .82)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Crect width='1400' height='900' fill='%23eef6ff'/%3E%3Cg fill='none' stroke='%2393c5fd' stroke-width='2' opacity='.65'%3E%3Cpath d='M90 170h460M90 240h350M90 310h410M90 380h290M790 165h350M790 240h450M790 315h280M790 390h390'/%3E%3C/g%3E%3Cg fill='%23fbbf24' opacity='.85'%3E%3Ccircle cx='1180' cy='160' r='48'/%3E%3Ccircle cx='1090' cy='485' r='32'/%3E%3C/g%3E%3Cg fill='%231e40af' opacity='.16'%3E%3Crect x='600' y='125' width='155' height='520' rx='18'/%3E%3Crect x='222' y='535' width='410' height='90' rx='14'/%3E%3Crect x='790' y='535' width='360' height='90' rx='14'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; color: #fff; } .hero-copy { max-width: 760px; } .eyebrow { margin: 0 0 10px; color: #60a5fa; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .hero h1 { max-width: 760px; margin: 0; font-size: clamp(40px, 6vw, 78px); line-height: .98; } .lede { max-width: 650px; margin: 20px 0 0; color: #dbeafe; font-size: 18px; line-height: 1.65; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .button, button { border: 0; border-radius: var(--radius); font: inherit; font-weight: 750; cursor: pointer; } .button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 18px; } .primary { color: var(--navy); background: #fff; } .secondary { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); } .quick-panel { display: grid; gap: 14px; padding: 22px; color: var(--ink); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius); box-shadow: var(--shadow); } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .panel-head strong { font-size: 32px; } label { display: grid; gap: 7px; color: #334155; font-size: 13px; font-weight: 750; } input, select { width: 100%; min-height: 42px; padding: 9px 10px; color: var(--ink); background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; } .muted { color: var(--muted); } .calculator-search { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(260px, 1fr) auto; gap: 14px; align-items: end; padding: 20px clamp(16px, 4vw, 48px) 8px; background: #fff; border-top: 1px solid var(--line); } .calculator-search label { color: var(--ink); font-size: 18px; } .calculator-search input { min-height: 48px; width: 100%; } .calculator-search .muted { margin: 0 0 11px; white-space: nowrap; } .tools-strip { display: flex; gap: 8px; overflow-x: auto; padding: 14px clamp(16px, 4vw, 48px); background: #fff; border-block: 1px solid var(--line); } .tool-tab { flex: 0 0 auto; min-height: 38px; padding: 0 13px; color: #334155; background: #eef2f7; } .tool-tab.active { color: #fff; background: var(--blue); } .workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; padding: 26px clamp(16px, 4vw, 48px); } .rail { display: grid; align-content: start; gap: 16px; } .ad-slot, .tracker, .calculator-shell, .seo-grid article, .sources { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .ad-slot { display: grid; min-height: 250px; place-items: center; color: #94a3b8; border-style: dashed; } .ad-slot span, .ad-slot small { display: block; text-align: center; } .tracker { padding: 18px; } .tracker h2 { margin: 0 0 12px; font-size: 18px; } dl { margin: 0; } .tracker div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } dt { color: var(--muted); } dd { margin: 0; font-weight: 800; } .calculator-shell { min-width: 0; overflow: hidden; box-shadow: 0 10px 34px rgba(15, 23, 42, .07); } .calculator-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; border-bottom: 1px solid var(--line); } .calculator-head h2 { margin: 0; font-size: 28px; } .head-actions { display: flex; gap: 8px; } .icon-button { min-height: 38px; padding: 0 12px; color: #fff; background: var(--navy); } .calculator-grid { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr); gap: 0; } .input-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; padding: 22px; border-right: 1px solid var(--line); } .input-panel .wide { grid-column: 1 / -1; } .result-panel { padding: 22px; } .result-main { padding: 20px; color: #fff; background: var(--navy); border-radius: var(--radius); } .result-main span, .result-main small { display: block; color: #cbd5e1; } .result-main strong { display: block; margin: 7px 0; font-size: clamp(34px, 6vw, 54px); line-height: 1; } .breakdown { display: grid; gap: 8px; margin-top: 16px; } .row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); } .row span:first-child { color: #475569; } .row span:last-child { font-weight: 800; text-align: right; } .row.positive span:last-child { color: var(--green); } .row.negative span:last-child { color: var(--red); } .row.warning span:last-child { color: var(--amber); } .note { margin-top: 16px; padding: 13px; color: #475569; background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; line-height: 1.55; } .seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 clamp(16px, 4vw, 48px) 26px; } .seo-grid article, .sources { padding: 22px; } .seo-grid h2, .sources h2 { margin: 0 0 10px; font-size: 22px; } .seo-grid p, .sources li { color: #475569; line-height: 1.65; } .sources { margin: 0 clamp(16px, 4vw, 48px) 28px; } .footer { display: flex; justify-content: space-between; gap: 16px; padding: 22px clamp(16px, 4vw, 48px); color: #cbd5e1; background: var(--navy); } @media (max-width: 900px) { .nav { display: none; } .hero, .workspace, .calculator-grid, .calculator-search, .seo-grid { grid-template-columns: 1fr; } .hero { min-height: auto; align-items: start; } .calculator-search { align-items: stretch; } .calculator-search .muted { margin: 0; white-space: normal; } .rail { order: 2; } .input-panel { grid-template-columns: 1fr; border-right: 0; border-bottom: 1px solid var(--line); } } @media (max-width: 560px) { .topbar, .calculator-head, .footer { align-items: flex-start; flex-direction: column; } .hero h1 { font-size: 38px; } .quick-panel, .calculator-head, .input-panel, .result-panel, .seo-grid article, .sources { padding: 16px; } } @media print { .topbar, .hero, .tools-strip, .rail, .seo-grid, .sources, .footer, .head-actions, .input-panel { display: none; } body { background: #fff; } .workspace { display: block; padding: 0; } .calculator-shell { border: 0; box-shadow: none; } .calculator-grid { display: block; } } .compact-hero { min-height: 560px; } .no-rail { grid-template-columns: minmax(0, 1fr); } .no-rail .calculator-shell { max-width: 1180px; width: 100%; margin: 0 auto; } .tool-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding: 0 clamp(16px, 4vw, 48px) 26px; } .tool-links a { display: flex; min-height: 48px; align-items: center; padding: 12px 14px; color: #0f172a; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 750; } .content-page { max-width: 980px; margin: 0 auto; padding: 34px clamp(16px, 4vw, 48px) 44px; } .content-page h1 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; } .content-page p, .content-page li { color: #475569; font-size: 17px; line-height: 1.7; } .content-card { margin-top: 18px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .inline-calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; } .inline-calc output { display: grid; align-content: center; min-height: 72px; padding: 12px; color: #fff; background: var(--navy); border-radius: var(--radius); font-size: 24px; font-weight: 850; } @media (max-width: 760px) { .inline-calc { grid-template-columns: 1fr; } } .brand-logo { display: block; width: 38px; height: 38px; object-fit: cover; border-radius: 8px; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; color: var(--muted); font-size: 14px; } .breadcrumbs a { color: #1d4ed8; font-weight: 650; } .calculator-page .page-calculator { margin: 24px 0; } .content-card { margin: 20px 0; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .content-card h2 { margin-top: 0; } .content-card li { margin: 8px 0; line-height: 1.55; } .content-card a, .content-page a:not(.brand):not(.button) { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 560px) { .content-card { padding: 16px; } .calculator-page .page-calculator { margin-inline: -16px; border-left: 0; border-right: 0; } } .page-calculator .input-panel { min-height: 430px; } .page-calculator .result-panel { min-height: 520px; } @media (max-width: 900px) { .page-calculator .input-panel { min-height: 520px; } .page-calculator .result-panel { min-height: 560px; } } .tool-search { position: relative; min-width: 0; } .tool-search-input { font-size: 16px; } .tool-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: min(420px, 62vh); overflow-y: auto; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(15, 23, 42, .18); } .tool-search-result, .tool-search-empty { display: grid; gap: 4px; width: 100%; min-height: 68px; padding: 12px; color: var(--ink); background: #fff; border: 1px solid transparent; border-radius: 7px; text-align: left; } .tool-search-result + .tool-search-result { margin-top: 4px; } .tool-search-result strong, .tool-search-result span, .tool-search-result em { min-width: 0; overflow-wrap: anywhere; } .tool-search-result strong { font-size: 15px; line-height: 1.25; } .tool-search-result span { color: #475569; font-size: 13px; line-height: 1.35; } .tool-search-result em { color: #1d4ed8; font-size: 12px; font-style: normal; font-weight: 800; } .tool-search-result:hover, .tool-search-result.active, .tool-search-result:focus-visible { background: #eff6ff; border-color: #bfdbfe; outline: 0; } .tool-search-empty { align-content: center; min-height: 54px; color: var(--muted); } .related-tools { min-width: 0; } .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; min-width: 0; } .tool-card, .tool-links a.tool-card, .content-card a.tool-card, .content-page a.tool-card:not(.brand):not(.button) { display: grid; gap: 8px; min-width: 0; min-height: 150px; padding: 16px; color: var(--ink); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(15, 23, 42, .05); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .tool-card:hover, .tool-card:focus-visible { color: var(--ink); border-color: #93c5fd; box-shadow: 0 14px 30px rgba(15, 23, 42, .1); outline: 0; transform: translateY(-1px); } .tool-card:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, .22), 0 14px 30px rgba(15, 23, 42, .1); } .tool-card-category { width: fit-content; max-width: 100%; padding: 4px 8px; color: #1d4ed8; background: #eff6ff; border-radius: 999px; font-size: 11px; font-weight: 850; line-height: 1.2; overflow-wrap: anywhere; } .tool-card-title { color: var(--ink); font-size: 17px; line-height: 1.28; overflow-wrap: anywhere; } .tool-card-description { color: #475569; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .tool-card-action { align-self: end; color: #1d4ed8; font-size: 13px; font-weight: 850; } .tool-card-action::after { content: " ->"; } .tool-links { display: block; } @media (min-width: 1040px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 700px) and (max-width: 1039px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 699px) { .tool-grid { grid-template-columns: 1fr; } .tool-card, .tool-links a.tool-card, .content-card a.tool-card, .content-page a.tool-card:not(.brand):not(.button) { min-height: 132px; padding: 14px; } } @media (max-width: 560px) { .calculator-search { position: relative; padding-bottom: 14px; } .tool-search-results { max-height: min(360px, 58vh); } .tool-search-result { min-height: 76px; padding: 12px 10px; } } .tool-search-action { color: #1d4ed8; font-size: 13px; font-weight: 850; } .tool-search-action::after { content: " ->"; } html, body { max-width: 100%; overflow-x: hidden; } .tools-strip { max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; } @media (max-width: 600px) { .calculator-search { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; max-width: 100%; padding: 18px 16px 16px; overflow: visible; } .calculator-search .eyebrow { margin-bottom: 8px; } .calculator-search label { font-size: 16px; line-height: 1.35; } .tool-search { width: 100%; max-width: 100%; } .tool-search-input { width: 100%; min-height: 52px; padding: 10px 44px 10px 14px; font-size: 16px; box-sizing: border-box; } .tool-search-results { position: static; inset: auto; z-index: auto; display: grid; gap: 8px; max-height: none; margin-top: 10px; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .tool-search-results[hidden] { display: none !important; } .tool-search-result, .tool-search-empty { min-height: 118px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(15, 23, 42, .06); } .tool-search-result strong { font-size: 16px; } .tool-search-result span { font-size: 14px; } .tool-search-result em { width: fit-content; max-width: 100%; padding: 4px 8px; background: #eff6ff; border-radius: 999px; line-height: 1.2; } .tool-search-active .tools-strip { display: none; } } @media print { @page { margin: 14mm; } .calculator-search, .tool-links, .related-tools, .content-page > .breadcrumbs, .content-page > .eyebrow, .content-page > h1, .content-page > p, .content-page > .content-card { display: none !important; } .content-page { max-width: none; margin: 0; padding: 0; } .calculator-shell, .page-calculator, .no-rail .calculator-shell { max-width: none; width: 100%; margin: 0; border: 0; box-shadow: none; overflow: visible; } .calculator-head { display: block; padding: 0 0 12px; border-bottom: 1px solid #dbe3ef; } .calculator-head h2 { font-size: 22px; } .calculator-grid { display: block; } .result-panel, .page-calculator .result-panel { min-height: 0; padding: 18px 0 0; } .result-main { color: #101828; background: #fff; border: 1px solid #dbe3ef; } .result-main span, .result-main small { color: #475569; } .result-main strong { color: #101828; font-size: 38px; } .breakdown, .note { break-inside: avoid; page-break-inside: avoid; } } .flagship-results { display: grid; gap: 16px; margin-top: 18px; } .mini-section { padding: 16px; background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius); } .mini-section h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.25; } .mini-section p { margin: 0; color: #334155; line-height: 1.55; } .scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .scenario-grid div { display: grid; gap: 5px; min-width: 0; padding: 12px; background: #fff; border: 1px solid #dbe3ef; border-radius: 7px; } .scenario-grid strong { color: #334155; font-size: 13px; line-height: 1.25; } .scenario-grid span { color: var(--ink); font-size: 20px; font-weight: 850; overflow-wrap: anywhere; } .scenario-grid small { color: var(--muted); line-height: 1.35; } .bar-chart { display: grid; gap: 10px; } .chart-row { display: grid; grid-template-columns: minmax(86px, .85fr) minmax(100px, 1.4fr) minmax(72px, .75fr); gap: 10px; align-items: center; font-size: 13px; } .chart-row > span { color: #334155; font-weight: 750; overflow-wrap: anywhere; } .chart-row > div { height: 12px; overflow: hidden; background: #e2e8f0; border-radius: 999px; } .chart-row i { display: block; height: 100%; background: #2563eb; border-radius: inherit; } .chart-row strong { text-align: right; font-size: 13px; overflow-wrap: anywhere; } .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; } .table-scroll th, .table-scroll td { padding: 9px; border-bottom: 1px solid #dbe3ef; text-align: right; } .table-scroll th:first-child, .table-scroll td:first-child { text-align: left; } .review-line { margin: 0; color: var(--muted); font-size: 13px; } @media (max-width: 560px) { .chart-row { grid-template-columns: 1fr; gap: 5px; } .chart-row strong { text-align: left; } .scenario-grid { grid-template-columns: 1fr; } .mini-section { padding: 14px; } } .salary-hub .content-card, .wage-page .content-card { overflow: hidden; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .stat-grid div { display: grid; gap: 6px; min-width: 0; padding: 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius); } .stat-grid span { color: var(--muted); font-size: 13px; font-weight: 750; } .stat-grid strong { color: var(--ink); font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; } .salary-cluster-links { margin-top: 20px; } @media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } .stat-grid strong { font-size: 22px; } } .debt-calculator { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(280px, 1fr); gap: 18px; align-items: start; } .debt-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .debt-inputs .wide, .debt-inputs .table-scroll { grid-column: 1 / -1; } .debt-inputs table input { min-width: 96px; } .debt-page .result-panel h3 { margin: 18px 0 10px; } .debt-hub .content-card, .debt-page .content-card { overflow: hidden; } @media (max-width: 760px) { .debt-calculator, .debt-inputs { grid-template-columns: 1fr; } .debt-inputs table input { min-width: 90px; } } .retirement-calculator { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(280px, 1fr); gap: 18px; align-items: start; } .retirement-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .retirement-page .result-panel h3 { margin: 18px 0 10px; } .retirement-page .content-card, .retirement-hub .content-card, .savings-hub .content-card { overflow: hidden; } @media (max-width: 760px) { .retirement-calculator, .retirement-inputs { grid-template-columns: 1fr; } } @media print { @page { margin: 16mm; } * { color: #111827 !important; text-shadow: none !important; box-shadow: none !important; } html, body { width: auto !important; min-width: 0 !important; background: #fff !important; font-size: 11pt; line-height: 1.45; } body::before { content: "DailyToolDesk\A" attr(data-print-title) "\A Generated / Calculated: " attr(data-print-date) "\A Educational planning estimate"; display: block; margin: 0 0 12mm; padding-bottom: 5mm; white-space: pre-line; border-bottom: 1px solid #111827; font-size: 11pt; font-weight: 700; } .topbar, .nav, .hero, .calculator-search, .tools-strip, .tool-links, .related-tools, .footer, .head-actions, button, .button, .adsbygoogle, iframe[src*="googlesyndication"], script, .breadcrumbs { display: none !important; } .content-page, main, .calculator-page, .workspace, .no-rail { display: block !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: #fff !important; } .content-page > .eyebrow, .content-page > h1, .content-page > p, .content-page > .content-card, .calculator-shell, .page-calculator, .flagship-results, .mini-section, .result-panel, .result-main, .breakdown, .scenario-grid, .bar-chart, .table-scroll, .note { display: block !important; visibility: visible !important; max-width: none !important; overflow: visible !important; background: #fff !important; } .content-card, .calculator-shell, .page-calculator, .mini-section, .result-main, .scenario-grid > div, .note { margin: 0 0 6mm !important; padding: 4mm !important; border: 1px solid #d1d5db !important; border-radius: 0 !important; break-inside: avoid; page-break-inside: avoid; } .calculator-head { display: block !important; padding: 0 0 4mm !important; margin: 0 0 4mm !important; border-bottom: 1px solid #d1d5db !important; } .calculator-grid, .debt-calculator, .retirement-calculator { display: block !important; } .input-panel, .debt-inputs, .retirement-inputs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3mm !important; margin-bottom: 5mm !important; break-inside: avoid; page-break-inside: avoid; } label { font-size: 9.5pt !important; font-weight: 700 !important; } input, select { min-height: 0 !important; padding: 1.5mm 2mm !important; border: 1px solid #9ca3af !important; font-size: 10pt !important; } .result-main strong { display: block !important; margin-top: 2mm !important; font-size: 24pt !important; line-height: 1.15 !important; } .breakdown .row, .breakdown div { display: flex !important; justify-content: space-between !important; gap: 8mm !important; padding: 2mm 0 !important; border-bottom: 1px solid #e5e7eb !important; } .scenario-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 3mm !important; } .scenario-grid > div { margin: 0 !important; } .chart-row { display: grid !important; grid-template-columns: 35mm 1fr 30mm !important; gap: 3mm !important; align-items: center !important; break-inside: avoid; } .chart-row > div { height: 3mm !important; border: 1px solid #9ca3af !important; border-radius: 0 !important; } .chart-row i { background: #6b7280 !important; border-radius: 0 !important; } .table-scroll { overflow: visible !important; } table { width: 100% !important; min-width: 0 !important; border-collapse: collapse !important; font-size: 8.8pt !important; break-inside: auto; } thead { display: table-header-group; } tfoot { display: table-footer-group; } tr { break-inside: avoid; page-break-inside: avoid; } th, td { padding: 2mm !important; border: 1px solid #d1d5db !important; vertical-align: top !important; } h1 { font-size: 22pt !important; margin: 0 0 5mm !important; } h2 { font-size: 16pt !important; margin: 0 0 3mm !important; } h3 { font-size: 12pt !important; margin: 4mm 0 2mm !important; } p, li { font-size: 10pt !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; font-weight: 400; } } :root{--bg:#f6f7f3;--ink:#192e2b;--muted:#5d706b;--line:#dce4dd;--panel:#fff;--navy:#153f36;--blue:#17654d;--green:#17654d;--radius:20px;--shadow:0 12px 40px #203b2e0c} html{scroll-padding-top:100px}body{background:var(--bg);line-height:1.6;font-family:Inter,"Segoe UI",Arial,sans-serif}::selection{background:#cfebad;color:#163e32}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ab7425;outline-offset:4px}a:hover{color:#17654d}.skip-link{position:fixed;left:20px;top:-100px;z-index:1000;padding:12px 20px;background:#fff;border:2px solid #17654d;border-radius:8px}.skip-link:focus{top:12px} .topbar{max-width:1440px;margin:auto;padding:22px 4.5%;background:#f6f7f3f5;border-bottom:1px solid #dce4dd;backdrop-filter:blur(16px);gap:24px}.brand{flex-shrink:0}.brand strong{font-size:20px;letter-spacing:-.6px;color:#183c32}.brand small{font-size:11px;letter-spacing:.05em}.brand-logo{border-radius:10px}.nav{align-items:center;gap:22px;font-size:12px}.nav a{padding:5px 0}.nav .directory-link{background:#173f35;color:#fff;border-radius:30px;padding:10px 16px;white-space:nowrap}.nav-toggle{display:none} main{max-width:1440px;margin:auto}.hero.compact-hero{margin:0;min-height:0;padding:76px 6% 66px;grid-template-columns:minmax(0,1.3fr) minmax(290px,.75fr);gap:8%;background:radial-gradient(ellipse at 85% 40%,#e4ebda 0,transparent 52%),#f6f7f3;color:var(--ink);border-bottom:1px solid var(--line)}.hero-copy{max-width:700px}.eyebrow{color:#466b57;font-size:10px;font-weight:750;letter-spacing:.15em}.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(48px,5.6vw,80px);line-height:1.05;letter-spacing:-3px;margin:24px 0}.hero h1 em{color:#397454;font-weight:400}.hero .lede{font-size:16px;line-height:1.8;max-width:530px;color:#53665e}.hero-actions{margin-top:30px;gap:12px}.button{border-radius:40px;padding:13px 22px;font-size:13px;font-weight:650;box-shadow:none}.button.primary{background:#1c4b3d;color:#fff;border-color:#1c4b3d}.button.primary:hover{background:#2b6249;transform:translateY(-1px)}.button.secondary{background:transparent;color:#234b3b;border:1px solid #b9c8b7}.hero-proof{display:flex;gap:16px;flex-wrap:wrap;font-size:10px;color:#586b5e;margin-top:27px}.quick-panel{border:1px solid #d1dccd;background:#fff;border-radius:24px;padding:28px;box-shadow:0 18px 50px #263e2910;transform:rotate(1deg)}.quick-panel .panel-head{display:block;border-bottom:1px solid #e5eadf;padding-bottom:20px;margin-bottom:22px}.quick-panel .panel-head>span{font-size:10px;color:#5e715e;letter-spacing:.1em}.quick-panel .panel-head small{font-size:11px;letter-spacing:0;font-weight:400}.quick-panel .panel-head strong{display:block;font-family:Georgia,serif;font-size:52px;color:#214e38;letter-spacing:-2px;margin-top:8px}.quick-panel label{color:#415549;font-size:12px}.quick-panel input,.quick-panel select{background:#f7f9f4;border:1px solid #dde5d8;color:#233b2e;border-radius:10px;padding:12px;font-size:15px}.quick-panel p{font-size:11px;color:#677465} .start-paths{padding:38px 6%;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-bottom:1px solid var(--line);background:#fff}.start-paths>div{position:relative;padding-left:43px}.path-number{position:absolute;left:0;top:4px;font-size:11px;border:1px solid #d9e4d2;border-radius:50%;padding:5px 9px;color:#58754a}.start-paths h2{font-size:17px;letter-spacing:-.4px;margin:0 0 4px}.start-paths p{font-size:12px;margin:0 0 12px;color:var(--muted)}.start-paths a{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:5px} .calculator-search{margin:44px 6% 20px;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:none;padding:24px}.calculator-search label{font-size:17px;letter-spacing:-.4px}.tool-search-input{background:#f8faf6!important;border-radius:12px!important;border-color:#d4dfd1!important;color:#233d2b!important}.tool-search-results{border-radius:12px;box-shadow:var(--shadow)}.tools-strip{background:transparent;border:0;padding:4px 6% 24px;gap:8px;flex-wrap:wrap;max-height:none}.tool-tab{border:1px solid #d7e0d3;border-radius:30px;background:#fff;color:#435642;font-size:11px;padding:9px 15px;white-space:nowrap}.tool-tab.active{background:#1c4b3d;border-color:#1c4b3d;color:#fff;box-shadow:none}.workspace.no-rail{padding:0 6% 44px;display:block}.calculator-shell{border:1px solid #d9e2d5;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;background:#fff}.calculator-head{padding:25px 30px;border-bottom:1px solid #e4eade;background:#fff}.calculator-head h2{font-size:22px;letter-spacing:-.7px}.calculator-head .eyebrow{margin-bottom:5px}.head-actions{gap:8px;flex-wrap:wrap}.icon-button,.reset-tool{border:1px solid #cfdacc;border-radius:30px;background:#fff;color:#3c563b;font:600 11px inherit;padding:8px 14px;cursor:pointer}.calculator-grid{gap:0}.input-panel{padding:28px;background:#fff;gap:20px}.input-panel label{font-size:12px;line-height:1.6;color:#425441}.input-panel input,.input-panel select{border-radius:10px;border:1px solid #d6dfd1;background:#f8faf6;padding:12px;color:#233c2e;font:500 15px "Segoe UI",sans-serif;min-width:0;max-width:100%}.input-panel input:focus,.input-panel select:focus{border-color:#3f8057;box-shadow:0 0 0 3px #4f805716}.result-panel{background:#f0f4eb;padding:28px;border-left:1px solid #dce6d5}.result-main{background:#1b493a;color:#fff;border-radius:16px;padding:25px;box-shadow:none}.result-main>span,.result-main>small{color:#d7e7d0}.result-main strong{font-family:Georgia,serif;letter-spacing:-1.5px;font-size:clamp(30px,3.3vw,47px)}.breakdown .row,.breakdown>div{font-size:12px;gap:18px;padding:11px 0;border-bottom-color:#d9e3d3}.note{background:#e4eddb;color:#53634d;border:1px solid #d5e1ca;border-radius:12px;font-size:11px;line-height:1.7}.mini-section{border-color:#d7e1cf}.scenario-grid>div{background:#fff;border:1px solid #d5dfce;border-radius:12px;padding:14px}.scenario-grid small{color:#6a7564}.scenario-grid strong{font-size:11px}.bar-chart{overflow:hidden}.form-notice{grid-column:1/-1;border:1px solid #e3b5a6;background:#fff2ed;color:#853d26;border-radius:10px;padding:12px 16px;font-size:12px}.form-notice[hidden]{display:none}.input-panel [aria-invalid="true"]{border-color:#b75537;background:#fff4ee}.calculator-shell.has-invalid .result-panel,.calculator-grid.has-invalid .result-panel,#debtCalculator.has-invalid .result-panel,#retirementCalculator.has-invalid .result-panel{opacity:.45}.validation-state{font-size:11px;color:#486243;margin:0 0 14px}.validation-state[hidden]{display:none} .content-page{max-width:1180px;padding:48px 5% 60px;margin:auto}.content-page>h1{font-family:Georgia,serif;font-size:clamp(32px,4vw,54px);line-height:1.16;font-weight:400;letter-spacing:-1.5px;color:#233f2e}.content-page h2{letter-spacing:-.5px}.content-page>p{max-width:850px;color:#566553;line-height:1.85}.breadcrumbs{font-size:11px;color:#73806a}.content-card{border:1px solid #dce4d5;background:#fff;border-radius:18px;padding:28px;box-shadow:none;margin-top:24px;line-height:1.85}.content-card h2{font-size:22px}.content-card h3{font-size:16px}.content-card a,.content-page p a{text-decoration:underline;text-underline-offset:3px;color:#27623f}.tool-card{border-radius:16px;border:1px solid #d8e2d1;box-shadow:none;padding:24px;transition:transform .15s,border-color .15s}.tool-card:hover{transform:translateY(-3px);border-color:#6b9564;box-shadow:0 10px 30px #233d2710}.tool-card-title{font-size:18px;letter-spacing:-.4px}.tool-card-category{font-size:9px;letter-spacing:.13em;color:#587650}.tool-card-description{font-size:12px;line-height:1.8}.tool-card-action{color:#286441;font-size:12px}.trust-banner{background:#e7eddf;border:1px solid #d5dfcd;border-radius:22px;margin:20px 6% 60px;padding:40px;max-width:100%}.trust-banner h2{font:400 34px Georgia,serif;letter-spacing:-1px;margin:10px 0}.trust-banner p{font-size:13px;max-width:700px;color:#586a50}.trust-banner>div{display:flex;gap:25px;flex-wrap:wrap;margin-top:22px;font-size:12px;font-weight:650}.footer{border-top:1px solid #d6e0cf;background:#f6f7f3;padding:30px 6%;font-size:11px;gap:18px;line-height:2;max-width:1440px;margin:auto}.directory-filter{display:block;font-size:12px;font-weight:650;max-width:550px;margin-top:28px}.directory-filter input{display:block;width:100%;padding:15px;margin-top:10px;background:#fff;border:1px solid #cad8c4;border-radius:12px;font:inherit}.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 40px}.directory-card{display:flex;justify-content:space-between;gap:15px;padding:22px;background:#fff;border:1px solid #d5dfd0;border-radius:14px;font-size:13px;align-items:center}.directory-card:hover{border-color:#558558;background:#eff5e9}.directory-card b{color:#4d7950}.directory-card[hidden]{display:none}#directoryStatus{font-size:12px}.table-scroll{overflow-x:auto}table{max-width:100%} @media(min-width:1200px){.content-page.calculator-page{max-width:1250px}}@media(max-width:1050px){.nav{gap:12px;font-size:11px}.nav a:nth-child(3),.nav a:nth-child(4){display:none}.hero.compact-hero{padding:55px 5%;gap:5%}.hero h1{font-size:62px}.hero-proof{gap:10px}.calculator-search,.trust-banner{margin-left:5%;margin-right:5%}.workspace.no-rail{padding-left:5%;padding-right:5%}.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:720px){html{scroll-padding-top:85px}.topbar{padding:16px 5%;flex-wrap:wrap;gap:12px}.brand strong{font-size:18px}.nav-toggle{display:block;background:transparent;border:1px solid #cbd8c4;padding:8px 14px;border-radius:30px;color:#315338;font-weight:650}.topbar .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0}.topbar .nav.is-open{display:flex}.topbar .nav a{display:block!important;padding:12px;border-bottom:1px solid #e0e7da}.topbar .nav .directory-link{text-align:center;border:0;margin-top:10px}.hero.compact-hero{grid-template-columns:1fr;padding:44px 6% 36px;gap:32px}.hero h1{font-size:58px;letter-spacing:-2.5px;margin:20px 0}.hero .lede{font-size:14px}.hero-actions{flex-wrap:wrap;gap:10px;margin-top:24px}.hero-actions .button{font-size:12px;padding:12px 18px}.hero-proof{font-size:9px;gap:12px}.quick-panel{transform:none;padding:24px;max-width:none}.quick-panel .panel-head strong{font-size:46px}.start-paths{padding:25px 6%;grid-template-columns:1fr;gap:22px}.start-paths>div{padding-left:42px}.start-paths h2{font-size:16px}.start-paths p{margin:0 0 5px}.calculator-search{margin:28px 5% 18px;padding:20px;display:block}.calculator-search label{font-size:15px}.tool-search{margin-top:16px}.calculator-search .muted{font-size:11px}.tools-strip{padding:0 5% 20px;gap:7px;max-height:155px;overflow:auto}.tool-tab{font-size:10px;padding:8px 12px}.workspace.no-rail{padding:0 4% 30px}.calculator-head{padding:22px 20px;align-items:flex-start;gap:18px;flex-wrap:wrap}.calculator-head h2{font-size:21px}.input-panel{padding:22px;gap:18px}.input-panel label{font-size:11px}.input-panel input,.input-panel select{font-size:16px;padding:11px}.calculator-grid{grid-template-columns:1fr}.result-panel{border-left:0;border-top:1px solid #dce6d5;padding:22px}.result-main strong{font-size:40px}.content-page{padding:32px 5%}.content-page>h1{font-size:37px}.content-card{padding:22px}.content-card h2{font-size:21px}.trust-banner{padding:26px;margin-bottom:35px}.trust-banner h2{font-size:29px}.trust-banner>div{gap:16px}.directory-grid{grid-template-columns:1fr}.directory-card{padding:18px}.footer{display:block}.footer>span{display:block}.scenario-grid{grid-template-columns:1fr 1fr}.note{overflow-wrap:anywhere}} .footer{color:#5a6a53}.debt-calculator,.retirement-calculator{gap:0}.result-panel[hidden]{display:none!important} .category-section{padding:46px 6% 8px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:22px}.section-heading h2{font:400 30px Georgia,serif;letter-spacing:-.7px;line-height:1.2;margin:8px 0}.section-heading>a{font-size:12px;font-weight:650;white-space:nowrap;color:#356247}.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.category-card{position:relative;background:#fff;border:1px solid #d8e2d1;border-radius:15px;padding:23px;transition:border-color .15s,transform .15s}.category-card:hover{border-color:#65875b;transform:translateY(-2px)}.category-number{font-size:10px;font-weight:700;color:#6b825b;letter-spacing:.1em}.category-card h3{font-size:17px;letter-spacing:-.4px;margin:9px 0 4px}.category-card p{font-size:12px;color:#62715a;margin:0;padding-right:12px}.category-arrow{position:absolute;right:21px;top:22px;color:#5d8452}.tool-links>.section-heading{padding:0 4px}.page-jump-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:24px 0;font-size:11px}.page-jump-links>strong{color:#65775b;font-size:10px;letter-spacing:.05em;margin-right:5px}.page-jump-links a{background:#edf3e7;border:1px solid #d8e2cf;border-radius:30px;padding:7px 12px;text-decoration:none!important;color:#3b5e35!important}.maintenance-note{font-size:11px!important;padding:20px 0;color:#6d7b62!important}.scenario-comparison{background:#fafcf7;border-top:1px solid #dbe5d2;padding:20px 28px;font-size:12px}.scenario-comparison>summary{font-size:13px;font-weight:700;color:#315638;cursor:pointer;list-style-position:inside}.scenario-comparison>p{color:#607154;max-width:720px;font-size:12px}.comparison-actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.comparison-status{font-size:11px!important}.scenario-comparison table{min-width:520px;width:100%;font-size:12px;border-collapse:collapse}.scenario-comparison th,.scenario-comparison td{padding:12px;text-align:left;vertical-align:top;border-bottom:1px solid #dde5d5;max-width:300px;overflow-wrap:anywhere}.scenario-comparison th{color:#4e6543;background:#f0f5e9;font-weight:600}.scenario-comparison .table-scroll{border-radius:12px}.offer-divider{grid-column:1/-1;background:#e9f1e1;padding:9px 13px;font-weight:750;color:#3d6134;border-radius:8px;font-size:12px}.input-panel .wide{grid-column:1/-1}button:disabled{cursor:not-allowed;opacity:.5}#loanCompareRows th{text-align:left;font-size:12px;font-weight:600}#loanCompareRows td{font-size:12px;white-space:nowrap}#loanCompareValue{font-size:40px} @media(max-width:720px){.category-section{padding:28px 5% 4px}.category-grid{grid-template-columns:1fr 1fr}.category-card{padding:18px 16px}.category-card h3{font-size:15px}.category-card p{font-size:11px;line-height:1.7}.category-arrow{right:14px;top:15px}.section-heading{align-items:start;flex-direction:column;gap:10px;margin-bottom:18px}.section-heading h2{font-size:27px}.scenario-comparison{padding:20px}.page-jump-links{gap:6px}.page-jump-links a{font-size:10px;padding:6px 10px}.page-jump-links strong{flex-basis:100%}.hero.compact-hero h1{font-size:46px}} @media(min-width:721px){.topbar .nav{display:flex}} @media(max-width:720px){.topbar{flex-direction:row;align-items:center}.hero h1{font-size:48px;letter-spacing:-2px}.topbar .nav{flex-basis:100%}.retirement-calculator,.debt-calculator{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}@media print{.nav-toggle,.start-paths,.hero,.calculator-search,.tools-strip,.trust-banner,.reset-tool,.validation-state,.form-notice{display:none!important}.result-panel{opacity:1!important}.content-page{padding:0}.calculator-shell{box-shadow:none}.topbar{position:static}} .category-number{color:#45613a}.brand-logo{width:38px;height:38px;object-fit:contain}