/* The free tax calculators (MCS-457), on top of landing.css. */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.calc form, .calc .calc-out { border: 1px solid var(--border); border-radius: 16px; background: var(--panel); padding: 24px; }
.calc form { display: grid; gap: 16px; }
.calc label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.calc label small { font-weight: 500; color: var(--faint); font-size: 13px; }
.calc input, .calc select { min-height: 46px; font-size: 17px; }
.calc .money { position: relative; }
.calc .money::before { content: '$'; position: absolute; left: 12px; bottom: 12px; color: var(--faint); }
.calc .money input { padding-left: 26px; width: 100%; }
.calc-out h2 { font-size: 19px; margin: 0 0 12px; }
.calc-out dl { margin: 0; display: grid; gap: 2px; }
.calc-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.calc-row dt { color: var(--muted); }
.calc-row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.calc-row.total { border-bottom: 0; padding-top: 12px; font-size: 18px; }
.calc-row.total dt { color: var(--text); font-weight: 700; }
.calc-row.total dd { color: var(--accent-text); font-size: 22px; }
.calc-out p { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.calc-note { font-size: 14px !important; }
.calc-fine { max-width: 760px; margin: 24px auto 0; font-size: 14px; color: var(--faint); text-align: center; }
@media (max-width: 760px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc form, .calc .calc-out { padding: 18px; } }