/* Калькулятор тарифов: поля и результат. Сетка, карточки и кнопка — из ui.css. */
.calc { margin-top: 48px; align-items: stretch; }
.calc-in, .calc-out { min-width: 0; }
.calc .f + .f { margin-top: 26px; }
.calc label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; color: var(--ink); line-height: 1.4; }
.calc output { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc small { display: block; margin-top: 6px; color: var(--dim); font-size: 12px; }
.calc input[type="range"] { width: 100%; margin: 12px 0 0; accent-color: var(--accent-strong); }
.calc input[type="number"] { display: block; width: 100%; min-height: 46px; margin-top: 10px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; }
.calc-row { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.calc-row span { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.calc-row p { margin: 8px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink); }
.calc-row.hl span { color: var(--accent); }
.calc-note { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.calc-note b { color: var(--ink-2); font-weight: 600; }
.calc-out .btn { width: 100%; min-height: 46px; }