/* The cover fee calculator. Role tokens only — no colour is named here, so it
   follows site.css into dark mode without a second block. */

.calc { border: 1px solid var(--line); border-radius: var(--rc); background: var(--surface); padding: clamp(16px, 3vw, 24px); margin: 22px 0 26px; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.calc-f label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--body-ink); margin-bottom: 5px; }
.calc-f input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rb); background: var(--ground); color: var(--ink); }
.calc-f input:focus-visible { outline: 2px solid var(--act); outline-offset: 1px; border-color: var(--act); }
.calc-f .calc-note { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

.calc-out { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.calc-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.calc-stat { display: flex; flex-direction: column; gap: 2px; }
.calc-stat .calc-n { font-size: clamp(22px, 3.6vw, 30px); line-height: 1.1; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.calc-stat .calc-l { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.calc-stat.lead .calc-n { color: var(--act); }
.calc-say { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--body-ink); }
.calc-say strong { color: var(--ink); font-weight: 500; }
.calc-say + .calc-say { margin-top: 10px; }