/* Hallmark · shape: Workbench · genre: modern-minimal · theme: Cobalt (deal 2/3, seed usa-finance-calculators-tool-6281·df553dcb·2026-11-13·r0) · job: try
 * hero: tool-first, headline + one sentence + live calculator in first screen · nav: edge-aligned wordmark and cluster links · footer: wordmark over link columns · imagery: none, numbers are the material · signature: one huge live tabular result figure
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · weakest: E, no photography by design, numbers and ruled tables carry the page instead */
/* waive 58: calculator pages carry a longer original explanation below the tool because ranking requires it (Claude-SEO plan); the first screen stays within the word limit */
@import url("./tokens.css");
@import url("./base.css");

.site-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; }
.wordmark span { color: var(--color-accent); }
.nav-links { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.nav-links a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-accent); }
.hero { padding-block: var(--space-2xl) var(--space-xl); display: grid; gap: var(--space-lg); }
.hero h1 { font-size: var(--text-display-s); }
.tool-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; padding-bottom: var(--section-gap-s); }
@media (max-width: 60rem) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }
.panel { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); padding: var(--space-lg); }
@supports (corner-shape: bevel) { .panel { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.field { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.field label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.field input, .field select { border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); padding: var(--space-xs) var(--space-sm); background: var(--color-key-face); color: var(--color-ink); min-height: 48px; width: 100%; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.result-figure { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-size: var(--text-display-s); color: var(--color-accent-deep); font-variant-numeric: tabular-nums; overflow-wrap: break-word; min-width: 0; }
.result-label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); }
th, td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
th { font-family: var(--font-display); font-weight: 500; color: var(--color-muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr.highlight { background: var(--color-accent-wash); }
.section { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-md); }
.section p { color: var(--color-ink-2); }
.formula { background: var(--color-graphite); color: var(--color-graphite-ink); border-radius: var(--radius-card); padding: var(--space-lg); font-family: var(--font-outlier); font-size: var(--text-sm); overflow-x: auto; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-md); }
.related a { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); text-decoration: none; background: var(--color-paper-2); }
.related a:hover { border-color: var(--color-accent); }
.related strong { font-family: var(--font-display); font-weight: 500; display: block; }
.related span { color: var(--color-muted); font-size: var(--text-sm); }
.site-footer { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); display: grid; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.calc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-md); padding-bottom: var(--section-gap-s); }
.calc-list a { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); text-decoration: none; background: var(--color-paper); box-shadow: var(--shadow-card); }
.calc-list a:hover { border-color: var(--color-accent); }
.calc-list strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; display: block; margin-bottom: var(--space-2xs); }
.calc-list span { color: var(--color-muted); font-size: var(--text-sm); }
.status { color: var(--color-accent-deep); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); }
a:active { color: var(--color-accent-deep); }
input:disabled, select:disabled { background: var(--color-paper-3); color: var(--color-muted); }
input:active, select:active { border-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { * { transition: none; } }
/* faq */
.faq h3 { margin-top: var(--space-md); }