@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@600;700;800&display=swap');

:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --teal: #14b8a6;
  --amber: #f59e0b;
  --success: #10b981;
  --error: #ef4444;
  --background: #f3f4f6;
  --surface: #ffffff;
  --text: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --border: #e5e7eb;
  --input-border: #d1d5db;
  --head: Inter, sans-serif;
  --body: 'DM Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); font-family: var(--body); }
.page-shell { max-width: 1050px; margin: 0 auto; padding: 24px 20px 48px; }
.masthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 43px; }
.brand { color: var(--text); font: 800 24px/1 var(--head); letter-spacing: -.055em; text-decoration: none; white-space:nowrap; }.brand span { color: var(--primary); font:600 22px/1 var(--body); letter-spacing:0; }
.eyebrow, .kicker, .result-label, .section-label { font: 600 10px/1 var(--body); letter-spacing: .075em; text-transform: uppercase; }
.eyebrow { color: var(--text-tertiary); }.tool-nav { display:flex; gap:16px; }.tool-nav a { color:var(--text-secondary); font-size:12px; font-weight:600; text-decoration:none; }.tool-nav a:hover { color:var(--primary); }.hero { max-width: 665px; margin-bottom: 32px; }.kicker { color: var(--primary); margin: 0 0 10px; }.hero h1 { font: 800 clamp(31px,5.5vw,50px)/1.06 var(--head); letter-spacing: -.052em; margin: 0; }.lede { color: var(--text-secondary); font-size: 15px; line-height: 1.55; margin: 14px 0 0; max-width: 590px; }

.calculator { display: grid; grid-template-columns: minmax(285px,.85fr) minmax(330px,1.15fr); gap: 8px; }.inputs, .result { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }.inputs { display: grid; align-content: start; gap: 12px; padding: 16px; }.section-label { color: var(--text-secondary); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 1px; }
label { color: var(--text-secondary); display: grid; font-size: 11px; font-weight: 600; gap: 4px; }.optional { color: var(--text-tertiary); font-weight: 400; }.field-note { color:var(--text-tertiary); font-size:10px; font-weight:400; line-height:1.35; }.calculated-value { color:var(--text); font:500 14px var(--body); padding:9px; }.input-wrap { align-items: center; background: #fff; border: 1px solid var(--input-border); border-radius: 8px; display: flex; min-height: 36px; padding: 0 9px; }.input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }.input-wrap b { color: var(--text-tertiary); font: 500 12px var(--mono); }
input, select { appearance: none; background: #fff; border: 1px solid var(--input-border); border-radius: 8px; color: var(--text); font: 500 14px var(--body); min-height: 36px; outline: none; padding: 7px 9px; width: 100%; }input:focus,select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }.input-wrap input { border: 0; box-shadow: none; min-height: 34px; padding: 6px; }.input-wrap input:focus { border: 0; box-shadow: none; }
button { background: var(--primary); border: 0; border-radius: 8px; color: #fff; cursor: pointer; font: 700 14px var(--body); margin-top: 4px; min-height: 44px; padding: 12px 16px; text-align: left; }button:hover { background: var(--primary-hover); }button span { float: right; font-size: 18px; line-height: 13px; }

.result { display: flex; flex-direction: column; padding: 22px; }.result-label { color: var(--text-tertiary); margin: 0; }.total { color: var(--text); font: 800 clamp(43px,7vw,64px)/.98 var(--head); letter-spacing: -.065em; margin: 7px 0; }.today-value { color: var(--text-secondary); font-size: 13px; line-height: 1.45; margin: 0; min-height: 38px; }.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }.split div { background: #f9fafb; border: 1px solid var(--border); border-radius: 8px; display: grid; gap: 4px; padding: 10px; }.split span { color: var(--text-tertiary); font-size: 11px; }.split strong { color: var(--text); font: 600 16px var(--mono); }.split div:last-child strong { color: var(--success); }.chart-wrap { background: #f9fafb; border: 1px solid var(--border); border-radius: 8px; height: 185px; margin-top: auto; padding: 8px 8px 0; }.chart-wrap svg { height: 100%; overflow: visible; width: 100%; }.assumption { color: var(--text-tertiary); font: 400 10px/1.4 var(--mono); margin: 11px 0 0; }

.projection { display: grid; grid-template-columns: 240px 1fr; gap: 30px; margin: 65px 0 50px; }.projection h2,.notes h2 { font: 700 26px/1.1 var(--head); letter-spacing: -.04em; margin: 5px 0; }.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }table { border-collapse: collapse; width: 100%; }th,td { border-bottom: 1px solid var(--border); font-size: 13px; padding: 11px 12px; text-align: right; }tr:last-child td { border: 0; }th { background: #f9fafb; color: var(--text-tertiary); font: 600 10px var(--body); letter-spacing: .075em; text-transform: uppercase; }td { color: var(--text-secondary); }td:nth-child(n+2) { font: 500 12px var(--mono); }th:first-child,td:first-child { text-align: left; }.notes { background: #fffbeb; border-left: 3px solid var(--amber); max-width: 760px; padding: 13px 16px; }.notes h2 { font-size: 19px; }.notes p { color: #5f4a13; font-size: 13px; line-height: 1.55; margin: 7px 0 0; }footer { color: var(--text-tertiary); font-size: 12px; margin-top: 65px; padding-top: 17px; }footer a { color: var(--primary); float: right; }

@media(max-width:740px) { .page-shell { padding: 18px 12px 35px; }.masthead { margin-bottom: 32px; }.calculator { grid-template-columns: 1fr; }.inputs { padding: 14px; }.result { min-height: 390px; padding: 18px; }.hero h1 { font-size: 35px; }.projection { display: block; margin: 48px 0; }.projection > div:first-child { margin-bottom: 17px; }.table-wrap { overflow: auto; }.chart-wrap { height: 165px; }.notes { padding: 12px 14px; } }