:root{--red:#e30613;--red2:#b8000f;--line:#e3e3e8;--txt:#22222a;--muted:#7a7a85;--bg:#f7f7f9}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:17px/1.55 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

.hd{background:#fff;border-bottom:1px solid var(--line);padding:26px 0 22px;margin-bottom:24px}
.hd-back{display:inline-block;margin-bottom:10px;color:var(--muted);text-decoration:none;font-size:15px}
.hd-back:hover{color:var(--red)}
.hd h1{margin:0 0 6px;font-size:27px;line-height:1.25}
.hd p{margin:0;color:var(--muted);font-size:16px}

main{padding-bottom:50px}
.notice{background:#fff9e6;border:1px solid #f0d878;color:#6b5300;border-radius:10px;padding:12px 16px;font-size:14.5px;margin-bottom:20px}

.progress{display:flex;gap:6px;margin:0 0 22px}
.progress i{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .25s}
.progress i.on{background:var(--red)}

.step{display:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px;margin-bottom:20px}
.step.on{display:block;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step h2{margin:0 0 8px;font-size:24px;line-height:1.28}
.hint{color:var(--muted);font-size:15.5px;margin:0 0 20px}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.opt{text-align:left;padding:20px 22px;border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;min-height:88px;position:relative}
.opt:hover{border-color:#f3a0a6;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.06)}
.opt.sel{border-color:var(--red);background:#fff5f5}
.opt b{display:block;font-weight:600;font-size:17.5px;line-height:1.3}
.opt span{display:block;color:var(--muted);font-size:14.5px;margin-top:4px;line-height:1.4}
.opt .price{display:block;margin-top:8px;font-size:20px;font-weight:800;color:var(--txt)}

.checks{display:grid;gap:10px}
.chk{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:#fff;transition:border-color .15s}
.chk:hover{border-color:#f3a0a6}
.chk.on{border-color:var(--red);background:#fff5f5}
.chk input{margin-top:3px;width:20px;height:20px;flex:0 0 20px;accent-color:var(--red)}
.chk .nm{flex:1;font-size:16px}
.chk .pr{white-space:nowrap;font-weight:700}
.chk .pr.ask{font-weight:400;color:var(--muted);font-size:14.5px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2 .full{grid-column:1/-1}
label{display:block;font-size:14.5px;color:#55555f;margin-bottom:7px}
input[type=text],input[type=tel],input[type=email],select{width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:16.5px;background:#fff}
input:focus,select:focus{outline:0;border-color:var(--red)}
.inn-row{display:flex;gap:8px}
.inn-row input{flex:1}
.inn-msg{font-size:14px;margin-top:7px;min-height:19px}
.inn-msg.ok{color:#127a33}
.inn-msg.err{color:var(--red2)}

.agree{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#55555f;margin:18px 0 0;line-height:1.45;cursor:pointer}
.agree input{margin-top:2px;width:20px;height:20px;flex:0 0 20px;accent-color:var(--red)}
.agree a{color:var(--red)}

.nav{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16.5px;padding:15px 30px;border-radius:12px;border:0;cursor:pointer;font-family:inherit;min-height:52px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(0,0,0,.12)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn.primary{background:var(--red);color:#fff}
.btn.ghost{background:#fff;color:#55555f;border:1.5px solid var(--line)}
.btn.small{padding:14px 18px;min-height:0;font-size:15px;background:#f1f1f4;color:#44444c}

.msg{margin-top:16px;padding:15px 17px;border-radius:10px;font-size:15.5px;display:none}
.msg.ok{display:block;background:#eafaef;color:#127a33}
.msg.err{display:block;background:#fdecec;color:var(--red2)}

.summary{background:#fff;border:1px solid var(--line);border-left:5px solid var(--red);border-radius:12px;padding:20px 24px;display:none}
.summary.on{display:block}
.summary h3{margin:0 0 12px;font-size:18px}
.sum-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.sum-row:last-of-type{border-bottom:0}
.sum-row .ask{color:var(--muted)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:2px solid var(--line)}
.sum-total b{font-size:24px}

.done{text-align:center;padding:14px 0}
.done .nav{justify-content:center}

@media(max-width:640px){
  body{font-size:16px}
  .hd h1{font-size:22px}
  .step{padding:22px 18px}
  .step h2{font-size:20px}
  .grid2{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
  .btn{width:100%}
  .inn-row{flex-direction:column}
}

/* Работы, входящие в обслуживание — показываем на шаге разовых работ,
   чтобы клиент видел, что он уже не платит отдельно. */
.included{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:16px 18px;margin:0 0 16px}
.included b{display:block;font-size:15px;color:#127a33;margin-bottom:8px}
.included ul{margin:0;padding-left:20px}
.included li{font-size:14.5px;color:#2c5c3c;padding:3px 0;line-height:1.45}

/* Подзаголовки внутри шага «Что ещё обслуживать» */
.step h3.sub{font-size:17px;margin:22px 0 10px;color:var(--txt)}
.step h3.sub:first-of-type{margin-top:4px}
.seats{margin-top:14px;max-width:260px}

/* Пояснение к автоматически включённой позиции (ЭДО при маркировке) */
.auto-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;
  padding:11px 14px;font-size:14px;margin:10px 0 0;line-height:1.45}

/* Оговорка про ограниченный список обслуживаемого ПО */
.sw-note{background:#fff9e6;border:1px solid #f0d878;color:#6b5300;border-radius:10px;
  padding:11px 14px;font-size:14px;margin:12px 0 0;line-height:1.45}

/* Счётчик касс */
.counter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cnt-btn{width:52px;height:52px;border-radius:12px;border:2px solid var(--line);background:#fff;
  font-size:26px;line-height:1;cursor:pointer;color:var(--txt);font-family:inherit}
.cnt-btn:hover{border-color:var(--red);color:var(--red)}
.counter input{width:90px;text-align:center;font-size:22px;font-weight:700;padding:12px 8px}
.cnt-price{margin-left:8px}
.cnt-price b{display:block;font-size:26px;font-weight:800;line-height:1.2}
.cnt-price span{font-size:14px;color:var(--muted)}
.cnt-break{margin-top:16px;font-size:14.5px;color:var(--muted);line-height:1.6}
.cnt-break i{font-style:normal;color:var(--txt)}
@media(max-width:640px){ .cnt-price{margin-left:0;width:100%} }

/* Список позиций оборудования */
.eq-row{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;position:relative}
/* align-items:end — подписи разной длины переносятся на две строки,
   и без выравнивания по низу поля в строке съезжают друг относительно друга */
.eq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:end}
.eq-grid > div{display:flex;flex-direction:column}
.eq-grid label{margin-bottom:7px}
/* select и input по умолчанию считают высоту чуть по-разному — фиксируем,
   иначе поля в строке расходятся на пиксель */
.eq-grid input,.eq-grid select{height:52px;box-sizing:border-box}
.eq-grid .eq-wide{grid-column:1/-1}
.eq-actions{display:flex;gap:16px;margin-top:12px}
.eq-actions button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;
  font-size:14px;text-decoration:underline;padding:0}
.eq-actions button:hover{color:var(--red)}

/* Рекомендуемый уровень: бейдж и подсветка.
   Пульсация мягкая и по тени, а не морганием — резкое мигание раздражает
   и мешает людям с чувствительностью к анимации (уважаем prefers-reduced-motion). */
.opt.hit{border-color:var(--red);box-shadow:0 6px 20px rgba(227,6,19,.10)}
.opt.hit .hit-badge{position:absolute;top:-11px;left:20px;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;white-space:nowrap;
  animation:hitPulse 2.4s ease-in-out infinite}
.opt.hit .hit-note{color:var(--red);font-size:14px;margin-top:6px;display:block;line-height:1.4}
@keyframes hitPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(227,6,19,.45)}
  50%    {box-shadow:0 0 0 7px rgba(227,6,19,0)}
}
@media (prefers-reduced-motion:reduce){
  .opt.hit .hit-badge{animation:none}
}

/* Раскрывающийся состав услуги внутри чекбокса */
.chk-det{margin-top:10px}
.chk-det summary{cursor:pointer;color:var(--red);font-size:14px;list-style:none;display:inline-block}
.chk-det summary::-webkit-details-marker{display:none}
.chk-det summary::before{content:'▸ ';font-size:12px}
.chk-det[open] summary::before{content:'▾ '}
.chk-det-in{margin-top:8px;font-size:14px;color:#55555f;line-height:1.5}
.chk-det-in b{display:block;margin:10px 0 4px;color:var(--txt);font-size:14px}
.chk-det-in ul{margin:0;padding-left:20px}
.chk-det-in li{padding:2px 0}