/* ГазНорма — квиз /raschet/.
   Своей палитры здесь нет. Токены (--ink, --blue, --blue2, --accent, --line,
   --tint, --muted, --r, --shadow) берутся из style.css; редкие литералы —
   ровно те, что уже стоят в style.css, ни одного нового оттенка. Вторая
   палитра означала бы вторую дизайн-систему на одном сайте. */

.qz {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 26px 28px 22px;
  margin: 22px 0 8px;
}

.qz-h { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.25; margin: 0 0 10px; font-weight: 700 }
.qz-h3 { font-size: 18px; line-height: 1.3; margin: 26px 0 10px; font-weight: 600 }
.qz-sub { color: #26374a; font-size: 16.5px; margin: 0 0 18px; max-width: 62ch }

/* ── входной экран ── */

.qz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0 }
.qz-tile { border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; background: var(--tint) }
.qz-tile b { display: block; margin-bottom: 6px; font-size: 15.5px; line-height: 1.3 }
.qz-tile p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5 }

.qz-range-line { font-size: 16px; margin: 4px 0 14px }

.qz-note {
  background: var(--tint); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 17px; margin: 14px 0; font-size: 15.5px; line-height: 1.55;
}
.qz-note--warn { background: #fdf6ee; border-color: #f0dcc4 }
.qz-note--honest { font-size: 14.5px; color: #26374a }
/* Заголовок блока — только прямой <b>. Внутри абзаца **жирный** обязан
   остаться в строке, иначе предложение разрывается на три куска. */
.qz-note > b { display: block; margin-bottom: 5px }
.qz-note p { margin: 0 }
.qz-note p + p { margin-top: 8px }
.qz-note .list { margin: 8px 0 0 }
.qz-note .list li { font-size: 15px }
.qz-plain { margin: 12px 0; font-size: 15.5px }
.qz-plain .list { margin-top: 6px }

.qz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 20px 0 8px }
.qz-cta__sub { color: var(--muted); font-size: 14px }
.qz-alt { margin: 6px 0 0; font-size: 15px }
.qz-alt--tel { color: var(--muted) }

.qz-link {
  font: inherit; font-size: 15px; color: var(--blue2); background: none; border: 0;
  padding: 0; cursor: pointer; text-align: left;
}
.qz-link:hover { text-decoration: underline }

.qz-resume {
  border: 1px solid #cfdae6; border-radius: 10px; background: #eef4fb;
  padding: 14px 17px; margin: 0 0 18px; font-size: 15px;
}
.qz-resume b { display: block; margin-bottom: 3px }
.qz-resume p { margin: 0 0 10px; color: var(--muted); font-size: 14.5px }

/* ── прогресс ── */

.qz-prog { margin: 0 0 20px }
.qz-prog__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 9px }
.qz-prog__line b { font-size: 15.5px }
.qz-prog__line span { color: var(--muted); font-size: 14px }
.qz-prog__dots { display: flex; gap: 6px; margin-bottom: 8px }
.qz-dot {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: #fff;
}
.qz-dot.is-on { background: var(--blue2); border-color: var(--blue2) }
.qz-dot[disabled] { cursor: default; opacity: .55 }
.qz-dot:not([disabled]):hover { border-color: var(--blue2) }
.qz-prog__track { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden }
.qz-prog__track i { display: block; height: 100%; background: var(--blue2); transition: width .25s }

/* ── шаг ── */

.qz-main { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start }
.qz-col { min-width: 0 }
.qz-side { min-width: 0; display: grid; gap: 14px }

.qz-field { border: 0; padding: 0; margin: 0 0 20px; min-width: 0 }
.qz-field legend { padding: 0; margin-bottom: 9px; font-size: 15.5px; font-weight: 600 }

.qz-opts { display: grid; gap: 8px }
.qz-opt {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; padding: 13px 16px;
  background: #fff; font-size: 16px; line-height: 1.35;
  transition: border-color .12s, background .12s;
}
.qz-opt:hover { border-color: #c2d3e5; background: var(--tint) }
.qz-opt.is-on { border-color: var(--blue2); background: #eef4fb; font-weight: 600 }
.qz-opt input { margin: 4px 0 0; flex: 0 0 auto; accent-color: var(--blue2) }
.qz-opt:focus-within { outline: 2px solid var(--blue2); outline-offset: 2px }

.qz-range { display: flex; align-items: center; gap: 14px; margin-bottom: 10px }
.qz-range input { flex: 1; min-width: 0; accent-color: var(--blue2) }
.qz-range output { font-weight: 700; font-size: 17px; color: var(--blue); min-width: 62px; text-align: right }
.qz-check { display: flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer }
.qz-check input { accent-color: var(--blue2) }

.qz-money {
  width: 100%; max-width: 260px; padding: 13px 15px; font: inherit; font-size: 17px;
  border: 1px solid #cfdae6; border-radius: 11px; background: #fff;
}
.qz-money:focus { outline: 2px solid var(--blue2); outline-offset: 1px; border-color: var(--blue2) }

.qz-err { margin: 0 0 12px; color: #b02020; font-size: 14.5px }
.qz-err[hidden] { display: none }

.qz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px }
.qz-nav .btn { margin-left: auto }

/* ── подсказка «зачем спрашиваем» ──
   Это место, где у конкурента стоит фотография несуществующего менеджера.
   Отвал происходит не от одиночества, а когда непонятно, зачем спрашивают. */
.qz-hint { border-left: 3px solid var(--blue2); background: var(--tint); border-radius: 0 10px 10px 0; padding: 14px 16px }
.qz-hint b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px }
.qz-hint p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #26374a }

/* ── сужение вилки: наша замена счётчику растущей скидки ── */

.qz-bar { border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; background: #fff }
.qz-bar__sum { font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--blue); line-height: 1.2 }
.qz-bar__track { height: 6px; border-radius: 4px; background: #eef4fb; overflow: hidden; margin: 10px 0 8px }
.qz-bar__track i { display: block; height: 100%; background: var(--accent); transition: width .3s ease }
.qz-bar__note { color: var(--muted); font-size: 13.5px; line-height: 1.45 }

/* ── результат ── */

.qz-sum { border: 1px solid var(--line); border-radius: var(--r); background: var(--tint); padding: 20px 22px; margin-bottom: 16px }
.qz-sum__l { color: var(--muted); font-size: 14.5px; font-weight: 400; margin: 0 0 3px; line-height: 1.4 }
.qz-sum__v { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; color: var(--blue); line-height: 1.15 }
.qz-sum__n { color: var(--muted); font-size: 14px; margin-top: 7px }

.qz-table { margin: 14px 0 8px }
/* «23 000 – 50 000 ₽» не должно ломаться пополам: колонка узкая, а цифра —
   единственное, ради чего человек смотрит в эту таблицу */
.qz-table td:nth-child(2), .qz-table th:nth-child(2) { white-space: nowrap }
.qz-table td:first-child { width: 46% }
.qz-table .qz-tr-sum td { border-top: 1px solid var(--ink); border-bottom: 0 }
.qz-soft { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap }

.qz-caption { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; max-width: 72ch }
.qz-caption--consent { margin: -4px 0 12px 26px }
.qz-more { margin: 14px 0; font-weight: 600 }

.qz-lines { margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px }
.qz-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line) }
.qz-lines li:last-child { border: 0 }
.qz-lines span:last-child { white-space: nowrap; font-weight: 600 }

.qz-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px }

/* ── контакт ── */

.qz-contact { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px }
.qz-form { margin-top: 14px }
.qz-form .qz-field--chips { margin: 16px 0 10px }
.qz-form .qz-field--chips legend { font-size: 14.5px }
.qz-form .chips { margin: 0 }
.qz-form .chip { display: inline-flex; align-items: center; position: relative }
.qz-form .chip input { position: absolute; opacity: 0; width: 0; height: 0 }
.qz-form .chip:focus-within { outline: 2px solid var(--blue2); outline-offset: 2px }
.qz-form > .btn { margin-top: 16px }
.qz-form .lead__err { display: block }
.qz-form .lead__err[hidden] { display: none }

.qz-link-box { font-weight: 600; margin: 12px 0 18px; word-break: break-all }

/* ── подвал квиза: настоящие реквизиты вместо лица из фотостока ── */

.qz-foot { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 14px }
.qz-foot p { margin: 0 0 5px; color: var(--muted); font-size: 13px; line-height: 1.5 }
.qz-foot p:last-child { margin-bottom: 0 }

/* ── запасной вариант без скрипта ── */

.qz-nojs { border: 1px solid var(--line); border-radius: var(--r); background: var(--tint); padding: 20px 22px; margin: 22px 0 }
.qz-nojs p { margin: 0 0 10px }
.qz-nojs p:last-child { margin: 0 }

@media (max-width: 900px) {
  .qz-main { grid-template-columns: 1fr; gap: 20px }
  /* Вопрос должен быть виден без прокрутки: подсказка и вилка уходят под
     варианты, а не отжимают их вниз экрана. */
  .qz-side { order: 2 }
}

@media (max-width: 680px) {
  .qz { padding: 18px 16px 16px; margin: 16px 0; border-radius: 10px }
  .qz-h { font-size: 20px }
  .qz-sub { font-size: 15.5px }
  .qz-opt { padding: 12px 14px; font-size: 15.5px }
  .qz-tiles { gap: 10px }
  .qz-nav { gap: 12px }
  .qz-nav .btn { width: auto }
  .qz-dot { width: 18px; height: 18px }
  .qz-acts .btn { width: 100% }
  .qz-caption--consent { margin-left: 0 }
}

@media (prefers-reduced-motion: reduce) {
  .qz-prog__track i, .qz-bar__track i { transition: none }
}