/* Страница «Штраф 12.21.1» — второй лендинг, под запросы о штрафе.
   Оформление берётся из landing.css: тот же Inter, тот же синий, те же скругления.
   Здесь только то, чего на витрине нет: обещание списком на первом экране,
   калькулятор штрафа и разбор поводов. */

/* Первый экран: обещание раскрывается списком «за счёт чего», а не абзацем —
   читают по диагонали, и четыре строки с галочками ловятся глазом лучше прозы. */
.promise{margin:26px 0 30px}
.promise .cap{color:#aebad0;font-size:15px;margin:0 0 14px}
.promise ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.promise li{display:flex;gap:12px;align-items:flex-start;color:#e6ecf7;font-size:16.5px;line-height:1.45}
.promise .ico{color:#4ade80;margin-top:3px;width:19px;height:19px}

/* Калькулятор штрафа: то, зачем человек пришёл из поиска. Сумма должна быть
   крупной и читаться с расстояния — это главный аргумент страницы. */
.calc{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:20px;
  padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:34px;align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr;gap:26px;padding:22px}}
.calc-q{margin-bottom:24px}
.calc-q:last-child{margin-bottom:0}
.calc-label{font-size:15px;font-weight:600;color:#fff;margin:0 0 12px}
.calc input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.opts{display:grid;gap:9px}
.opts label,.seg label{display:block;cursor:pointer;border:1px solid var(--ink-line);border-radius:12px;
  padding:13px 16px;color:#c2ccdd;font-size:15.5px;line-height:1.4;transition:border-color .15s,background .15s,color .15s}
.opts label:hover,.seg label:hover{border-color:rgba(255,255,255,.34);color:#fff}
.calc input[type=radio]:checked+label{border-color:#7aa2ff;background:rgba(37,99,235,.22);color:#fff}
.calc input[type=radio]:focus-visible+label{outline:2px solid #60a5fa;outline-offset:2px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:560px){.seg{grid-template-columns:1fr}}
.opts label b,.seg label b{display:block;font-weight:600;color:inherit}
.opts label .sum-hint{font-size:13px;color:#8c9bb5}

/* Ответ вынесен в отдельную колонку и держится при прокрутке: человек меняет
   ответы и сразу видит, как двигается сумма. */
.calc-res{background:var(--ink);border:1px solid var(--ink-line);border-radius:16px;padding:24px;position:sticky;top:20px}
@media(max-width:900px){.calc-res{position:static}}
.calc-res .sum{font-size:clamp(34px,6vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:#fca5a5}
.calc-res .part{color:#8c9bb5;font-size:13.5px;margin-top:8px;font-family:'JetBrains Mono',ui-monospace,monospace}
.calc-res ul{list-style:none;padding:18px 0 0;margin:18px 0 0;border-top:1px solid var(--ink-line);display:grid;gap:12px}
.calc-res li{color:#aebad0;font-size:14.5px;line-height:1.45;display:flex;gap:10px;align-items:flex-start}
.calc-res li b{color:#fff;font-weight:600}
.calc-res .btn{width:100%;margin-top:20px}

/* Пять поводов: нумерованная колонка, потому что это перечень составов,
   а не набор преимуществ — порядок читается как список проверок перед рейсом. */
.reasons{display:grid;gap:0;margin-top:8px}
.reason{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px;
  padding:24px 0;border-top:1px solid var(--border);align-items:baseline}
.reason:last-child{border-bottom:1px solid var(--border)}
@media(max-width:760px){.reason{grid-template-columns:1fr;gap:10px}}
.reason h3{margin-bottom:7px}
.reason p{color:var(--muted);font-size:15.5px;margin:0}
.reason .catch{color:var(--ok);font-size:15px;font-weight:600;display:flex;gap:9px;align-items:flex-start}
.reason .catch .ico{width:19px;height:19px;margin-top:2px;flex:none}
.reason .catch.none{color:var(--muted);font-weight:500}

/* Живой случай вместо отзыва: клиентов ещё нет, а выдуманный отзыв виден насквозь. */
.case{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:30px}
.case>div{background:var(--page);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.case .tag{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.case h3{margin-bottom:8px}
.case p{color:var(--muted);font-size:15.5px;margin:0}
.case .fix{border-color:#bbf7d0;background:var(--ok-bg)}
.case .fix .tag,.case .fix h3{color:var(--ok)}
.case .fix p{color:#0f5132}

/* Сумма в заголовке не должна разрываться посередине: «600 000 ₽» на двух строках
   читается как два разных числа. */
.hero h1 em{white-space:nowrap}

/* Финальный блок: рядом с формой колонка пустовала, а человек в этот момент
   решает, вводить ли пароль. Шаги отвечают «что будет после кнопки»,
   галочки ниже — «чем я при этом не рискую». */
.cta .next{list-style:none;counter-reset:n;padding:0;margin:30px 0 0;display:grid;gap:15px}
.cta .next li{counter-increment:n;position:relative;padding-left:46px;color:#aebad0;font-size:15.5px;line-height:1.5}
.cta .next li::before{content:counter(n);position:absolute;left:0;top:0;width:31px;height:31px;border-radius:10px;
  display:grid;place-items:center;background:rgba(255,255,255,.09);border:1px solid var(--ink-line);
  color:#fff;font-weight:600;font-size:14px;font-family:'JetBrains Mono',ui-monospace,monospace}
.cta .next b{color:#fff;font-weight:600}
.cta .checklist{margin-top:28px;padding-top:26px;border-top:1px solid var(--ink-line);gap:12px}
.cta .checklist li{font-size:15px;color:#aebad0}

/* Пара телефонов в герое. Картинки лежат с прозрачным фоном, поэтому тень даём
   через drop-shadow — она повторяет силуэт корпуса, а не рисует прямоугольник.
   Телефоны чуть развёрнуты и наезжают друг на друга: так видно, что это одна
   связка «разрешение → маршрут», а не две отдельные картинки. */
.hero-phones{padding-top:6px}
.hero-phones .hp{display:block;width:100%;height:auto;margin:0 auto;
  filter:drop-shadow(0 30px 52px rgba(2,8,23,.55))}
@media(max-width:980px){.hero-phones .hp{max-width:520px}}

/* В «Кабине» телефон стоит на светлом фоне — одной тени мало, добавляем контур. */
.route-sec .phone{border:1px solid var(--border);box-shadow:0 24px 48px rgba(2,8,23,.14)}