.zv{padding-top:var(--s10);padding-bottom:var(--s11)}
.zv-head{max-width:38em}
.zv-head h1{margin-top:var(--s4);font-size:clamp(30px,4vw,44px)}
.zv-head h1 em{font-family:Literata,Georgia,serif;font-style:italic;font-weight:300;color:var(--blue)}
.zv-head p{margin-top:var(--s5);font-size:19px;color:var(--ink-mid)}

.zv-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s8);align-items:start;margin-top:var(--s8)}

/* ---- форма ---- */
.zv-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-block);padding:var(--s8);box-shadow:var(--sh-1)}
.zv-step{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.zv-step span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--blue-pale);color:var(--blue-deep);font-size:13px;font-weight:600}
.zv-step h3{font-size:18px}
.zv-block + .zv-block{margin-top:var(--s8);padding-top:var(--s7);border-top:1px solid var(--line)}

.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.pick label{
  display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s3) var(--s5);
  border:1px solid var(--line-2);border-radius:var(--r-ctl);cursor:pointer;
  font-size:15px;font-weight:500;transition:border-color .18s,background .18s;
}
.pick label:hover{background:var(--sky)}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick .mark{width:20px;height:20px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:border-color .18s}
.pick .mark::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .18s var(--ease)}
.pick input:checked + .mark{border-color:var(--blue)}
.pick input:checked + .mark::after{transform:scale(1)}
.pick input:focus-visible + .mark{outline:2px solid var(--blue);outline-offset:3px}
.pick label:has(input:checked){border-color:var(--blue);background:var(--blue-pale)}

/* Подпись к подставленным значениям. Стоит между заголовком шага и
   полями, и поднята вплотную к заголовку: иначе она висит посреди
   пустоты и читается как отдельное сообщение, а не как пояснение к
   тому, что человек увидит ниже. Отрицательный отступ съедает
   margin-bottom у .zv-step — он и создаёт этот разрыв. */
.zv-note{margin:calc(var(--s5) * -1 + 6px) 0 var(--s5);font-size:13.5px;line-height:1.55;color:var(--ink-soft)}

.fields{display:grid;gap:var(--s5)}
.fld label{display:block;font-size:14px;font-weight:600;color:var(--ink-mid);margin-bottom:var(--s2)}
.fld input,.fld textarea{
  width:100%;height:50px;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:0 var(--s4);
  transition:border-color .18s,box-shadow .18s;
}
.fld textarea{height:auto;min-height:120px;padding:var(--s3) var(--s4);resize:vertical;line-height:1.6}
.fld input:hover,.fld textarea:hover{border-color:#B2CDE8}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,119,201,.13)}
.err{color:var(--clay);font-size:14px;margin-top:var(--s2)}
.hp{position:absolute;left:-9999px}

.agree{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s6);font-size:14px;color:var(--ink-soft);line-height:1.55}
.agree input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--blue)}
.zv-form .btn{width:100%;height:52px;margin-top:var(--s6)}

.flash{background:var(--mint-pale);border:1px solid #CBE5DA;border-radius:var(--r-card);padding:var(--s5) var(--s6);margin-bottom:var(--s6);color:#2D6553}
.alert-bad{background:var(--clay-pale);border:1px solid #EED6CD;border-radius:var(--r-card);padding:var(--s5) var(--s6);margin-bottom:var(--s6);color:#8E4232}

/* ---- боковая колонка заявки ----
   Здесь лежала тёмная карточка расчёта из калькулятора (.quote*) со
   списком услуг, итогом и анимированным холстом-фоном. Калькулятор со
   страницы тарифов убран — правила остались бы мёртвыми, а мёртвый
   стиль хуже отсутствующего: через год по нему ищут элемент, которого
   нет. Осталось то, что показывается на самом деле. */

/* БОКОВАЯ КОЛОНКА.

   Правила у неё не было вовсе — только отмена в мобильном блоке
   («.zv-side{position:static}»), то есть отменяли то, чего никто не
   назначал. Следствий два, и оба видны на экране.

   Карточки внутри стояли вплотную: у div отступов нет, а обе одного
   цвета и с одинаковым скруглением. Две светло-голубые плашки впритык
   читаются как одна, у которой посередине вмятина, — именно так это и
   выглядело.

   И колонка не липла при прокрутке, хотя мобильный блок эту липкость
   отменяет. Форма длинная; «сколько стоит» и «что дальше» уезжают
   вверх на первом же шаге и до конца заполнения человек их не видит.

   Липнем ниже шапки, а не под самый верх: шапка перекрыла бы
   заголовок карточки. */
.zv-side{
  display:grid;gap:var(--s4);align-content:start;
  position:sticky;top:calc(var(--header-h) + var(--s5));
}

.zv-empty{background:var(--sky);border-radius:var(--r-block);padding:var(--s7)}
.zv-empty h4{margin-bottom:var(--s3)}
.zv-empty p{font-size:15px;color:var(--ink-mid)}
/* Два абзаца подряд: глобальный сброс margin делает их одним
   полотном, и «до встречи любая цифра была бы выдуманной» сливается
   со следующей мыслью. */
.zv-empty p + p{margin-top:var(--s3)}
.zv-empty .btn{width:100%;margin-top:var(--s5)}

.zv-info{background:var(--sky);border-radius:var(--r-block);padding:var(--s7)}
.zv-info h4{margin-bottom:var(--s4)}
.zv-info li{position:relative;padding:var(--s2) 0 var(--s2) var(--s6);font-size:15px;color:var(--ink-mid);line-height:1.5}
.zv-info li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:2px;background:var(--blue)}

/* ---- адаптив ---- */
@media(max-width:1024px){
  .zv-grid{grid-template-columns:minmax(0,1fr) 330px;gap:var(--s7)}
  .zv-form{padding:var(--s7)}
}
@media(max-width:900px){
  .zv-grid{grid-template-columns:minmax(0,1fr)}
  .zv-side{position:static}
}
@media(max-width:600px){
  .zv{padding-top:var(--s8)}
  .zv-form,.zv-info,.zv-empty{padding:var(--s6)}
  .pick{grid-template-columns:minmax(0,1fr)}
  .zv-head p{font-size:17px}
}
/* Полный текст согласия — раскрывается по требованию. */
.agree-full{margin-top:var(--s3);border:1px solid var(--line);border-radius:var(--r-card);background:var(--sky)}
.agree-full summary{
  cursor:pointer;padding:var(--s3) var(--s5);font-size:14px;font-weight:600;color:var(--ink-mid);
  list-style:none;display:flex;align-items:center;gap:var(--s2);
}
.agree-full summary::-webkit-details-marker{display:none}
.agree-full summary::before{content:"+";width:18px;font-size:15px;color:var(--blue);font-weight:600}
.agree-full[open] summary::before{content:"−"}
.agree-full summary:hover{color:var(--ink)}
.agree-full p{padding:0 var(--s5) var(--s4);font-size:14px;line-height:1.6;color:var(--ink-mid)}
.agree-full p + p{padding-top:0}
.agree-meta{color:var(--ink-soft)}
/* Пятый вариант — «Просто вопрос» — на два столбца шириной.
   Вариантов стало пять, и последний оставался висеть в одиночестве
   рядом с пустой клеткой: сетка из двух колонок делит нечётное число
   криво. Развернуть последний на всю ширину честнее, чем оставлять
   дыру, и заодно верно по смыслу: «просто вопрос» ни к чему не
   обязывает и стоит особняком от остальных четырёх. */
.pick label:last-child{grid-column:1 / -1}
@media(max-width:640px){
  .pick label:last-child{grid-column:auto}
}