/* ==========================================================================
   Квиз «Списание долгов через МФЦ»
   Геометрия, цвета и типографика сняты с оригинала https://mrqz.me/bankrot-orsk
   (вычисленные стили на 1440×900 и на узком экране).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Шрифт
   Набор начертаний повторяет оригинал: 400/500/600. Начертания 700 у Gilroy
   нет — заголовки с font-weight:700 браузер синтезирует из 600, и на оригинале
   происходит ровно то же самое. Поэтому добавлять сюда 700 нельзя.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Gilroy;
  src: url(/fonts/gilroy-regular.woff2) format('woff2'), url(/fonts/gilroy-regular.woff) format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url(/fonts/gilroy-medium.woff2) format('woff2'), url(/fonts/gilroy-medium.woff) format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url(/fonts/gilroy-semibold.woff2) format('woff2'), url(/fonts/gilroy-semibold.woff) format('woff');
  font-weight: 600;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Сброс и база
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
}

body {
  font-family: var(--font, Gilroy), Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #494949;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p {
  margin: 0;
}

/* Атрибут hidden должен побеждать любые display из классов —
   иначе скрытые блоки (вопросы, список мессенджеров) остаются на экране. */
[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input {
  font: inherit;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.mdi-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Каркас и переключение экранов
   Один документ, четыре секции. Видна та, чьё имя стоит в data-screen.
   -------------------------------------------------------------------------- */
.app-wrapper {
  --cookie-h: 0px;
  /* Высота одного экрана квиза. На узких экранах считаем её от вьюпорта:
     процентные высоты там не к чему привязать, и подвал уезжает за контент. */
  --screen-h: calc(100vh - var(--cookie-h));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-base-100, #fff);
}

.app-wrapper_has-cookie {
  --cookie-h: 64px;
}

@supports (height: 100dvh) {
  .app-wrapper {
    --screen-h: calc(100dvh - var(--cookie-h));
  }
}

/* Высота задаётся явно, без flex-растяжения: при `flex: 1 1 0%` процентная
   высота дочерних экранов схлопывалась бы в ноль. */
.app__layout {
  height: calc(100vh - var(--cookie-h));
  height: calc(100dvh - var(--cookie-h));
}

.screen {
  display: none;
  height: 100%;
}

.app-wrapper[data-screen='start'] .screen_start,
.app-wrapper[data-screen='question'] .screen_question,
.app-wrapper[data-screen='form'] .screen_form,
.app-wrapper[data-screen='thanks'] .screen_thanks {
  display: block;
  animation: screen-in var(--block-speed, 250ms) cubic-bezier(0.61, 0.3, 0.8, 0.97);
}

/* Анимация «справа налево» — из настроек оформления квиза. */
@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-wrapper[data-screen] .screen {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px; /* 2.6875rem — базовая высота кнопки в оригинале */
  border-radius: var(--button-border-radius, 12px);
  font-size: 16px;
  line-height: 20.8px;
  white-space: nowrap;
  transition: background-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.button_primary {
  background: var(--color-primary);
  color: var(--color-primary-text, #fff);
}

.button_primary:hover {
  background: var(--color-primary-dark-10, #3a8603);
}

.button_primary:disabled,
.button_primary[aria-disabled='true'] {
  opacity: 0.55;
  cursor: default;
}

.button_primary:disabled:hover {
  background: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Карточка бонуса — общая для стартового экрана, боковой панели и «спасибо»
   -------------------------------------------------------------------------- */
.bonus-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  background-image: linear-gradient(331deg, var(--color-primary-dark-20, #245502), var(--color-primary-light-20, #80fa29));
  overflow: hidden;
}

.bonus-preview__overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55));
}

.bonus-preview__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bonus-preview__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bonus-preview__name {
  position: relative;
  flex: 0 1 auto;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #fff;
  text-align: right;
}

.bonus-preview_compact {
  height: 56px;
}

.bonus-preview_compact .bonus-preview__image {
  width: 40px;
  height: 40px;
}

.bonus-preview_regular {
  height: 64px;
}

.bonus-preview_regular .bonus-preview__image {
  width: 48px;
  height: 48px;
}

/* ==========================================================================
   ЭКРАН 1 — стартовая страница
   ========================================================================== */
.start-page {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.start-page__bg {
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: calc(58.3333% - 12px);
  background-color: #fff;
  background-image: url(/img/bg-1600.webp);
  background-size: cover;
  background-position: 0 40%;
  background-repeat: no-repeat;
}

@media (min-width: 1601px) {
  .start-page__bg {
    background-image: url(/img/bg-2200.webp);
  }
}

.start-page__brand {
  position: absolute;
  z-index: 1; /* полоса с названием компании лежит поверх белого блока контента */
  left: 58.3333%;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 16px 32px;
  background: #fff;
}

.start-page__company {
  flex: 1 1 70%;
  font-size: 14px;
  line-height: 17.5px;
  color: var(--color-text-base-100, #363636);
}

.start-page__content {
  position: absolute;
  left: 58.3333%;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 12px 16px 0;
  background: #fff;
  overflow: auto;
}

.start-page__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 32px 16px;
}

.start-page__header {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 36px;
  font-weight: var(--font-title-weight, 700);
  color: var(--color-text-title-100, #363636);
}

.start-page__subheader {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 23.94px;
  font-weight: 400;
  color: var(--color-text-alpha-70, rgba(54, 54, 54, 0.7));
}

.start-page__button {
  align-self: flex-start;
  flex-shrink: 0;
  min-height: 56px; /* 3.5rem — как у оригинала */
  padding: 12px 30px;
  font-size: 18px;
  line-height: 20.8px;
  white-space: normal;
  box-shadow: 0 1px 4px rgba(81, 185, 5, 0.2);
}

.start-page__bonuses {
  margin-top: 20px;
  max-width: max-content;
}

.bonuses-rail__title {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-title-weight, 700);
  color: var(--color-text-title-100, #363636);
}

.bonuses-rail__list {
  display: grid;
  grid-template-columns: repeat(2, 240px);
  gap: 8px;
}

.start-page__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 16px 0 32px;
}

.start-page__contact {
  display: flex;
  flex-direction: column;
}

.start-page__phone {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--color-text-base-100, #363636);
}

.start-page__legal {
  padding-right: 15px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-text-alpha-70, rgba(54, 54, 54, 0.7));
}

.start-page__disclaimer {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: calc(58.3333% - 12px);
  padding: 32px 32px 16px;
  border-radius: 0 0 10px 10px;
  background-image: linear-gradient(0deg, rgb(209, 205, 202) 65%, rgba(255, 255, 255, 0));
  font-size: 11px;
  line-height: 16px;
  color: #000;
}

/* ==========================================================================
   ЭКРАН 2 — вопрос
   ========================================================================== */
.quiz {
  display: flex;
  height: 100%;
}

.quiz__questions-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
}

.quiz__questions {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.quiz__questions-header {
  padding-bottom: 16px;
}

.quiz__question-title {
  width: 840px;
  max-width: 93%;
  margin: 10px auto 0;
  padding-top: 30px;
  font-size: 32px;
  line-height: 38.4px;
  font-weight: var(--font-title-weight, 700);
  color: var(--color-text-title-100, #363636);
  text-align: left;
}

.question-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 840px;
  max-width: 93%;
  margin: 0 auto;
  padding-bottom: 6px;
}

.answer-variants__group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-bottom: 6px;
}

.answer-variants__variant {
  border: 1px solid var(--color-bg-base-10, #e6e6e6);
  border-radius: 5px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.answer-variants__variant:hover {
  border-color: var(--color-primary);
}

.answer-variants__variant:has(input:checked) {
  border-color: var(--color-primary);
}

.b-radio {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12.8px 16px;
  cursor: pointer;
}

.b-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.b-radio .check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg-base-10, #e6e6e6);
  transition: background-color 0.15s, box-shadow 0.15s;
}

.b-radio input:checked + .check {
  background: var(--color-primary);
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 20px var(--color-primary);
}

.b-radio input:focus-visible + .check {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.answer__title {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-base-100, #363636);
}

/* Вопрос типа «выпадающий список» */
.answer-select {
  max-width: 412px;
}

.answer-select__field {
  width: 100%;
  height: 56px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--color-bg-base-20, #ccc);
  border-radius: var(--input-border-radius, 4px);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23363636' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-base-100, #363636);
  appearance: none;
  cursor: pointer;
}

.answer-select__field:focus {
  outline: none;
  border-color: var(--color-primary);
}

.answer-select__field:invalid {
  color: var(--color-text-alpha-50, rgba(54, 54, 54, 0.5));
}

@media (max-width: 1023px) {
  .answer-select {
    max-width: none;
  }
}

.quiz__navbar {
  position: relative;
  border-top: 1px solid rgba(230, 230, 230, 0.4);
}

.quiz-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 840px;
  max-width: 93%;
  margin: 0 auto;
  padding: 26px 0 30px;
}

.progress-bar__gradient {
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-alpha-70, rgba(54, 54, 54, 0.7));
}

.quiz-navbar__buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.quiz-navbar__button {
  height: 43px;
}

.quiz-navbar__button_prev {
  width: 43px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.2);
}

.quiz-navbar__button_prev:disabled {
  cursor: default;
}

.quiz-navbar__button_next {
  padding: 0 16px 0 22px;
  box-shadow: 0 3px 10px rgba(81, 185, 5, 0.5);
}

.quiz-navbar__button_next:disabled {
  box-shadow: none;
}

.quiz__sidebar {
  flex-shrink: 0;
  width: 320px;
  padding: 16px 16px 40px;
  background: var(--color-bg-base-03, #f7f7f7);
  overflow: auto;
}

/* Стопка бонусов и полоска прогресса — только для узких экранов,
   на широких их место занимают боковая панель и текстовый счётчик. */
.bonus-stack,
.progress-bar-linear {
  display: none;
}

.bonus-stack {
  position: relative;
  flex-shrink: 0;
}

.bonus-stack__items {
  display: flex;
}

.bonus-stack__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-image: linear-gradient(331deg, var(--color-primary-dark-20, #245502), var(--color-primary-light-20, #80fa29));
}

.bonus-stack__item + .bonus-stack__item {
  margin-left: -20px;
}

.bonus-stack__item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.bonus-stack__counter {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  height: 12px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--color-text-base-100, #363636);
  color: #fff;
  font-size: 8px;
  line-height: 12px;
}

.progress-bar-linear {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--color-bg-base-10, #e6e6e6);
}

.progress-bar-linear__field {
  display: block;
  width: var(--percent, 0%);
  height: 100%;
  background: var(--color-primary);
  transition: width var(--block-speed, 250ms);
}

.quiz-navbar__button_next-text_narrow {
  display: none;
}

.sidebar-bonuses {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   ЭКРАН 3 — форма контактов
   ========================================================================== */
.final-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

/* margin:auto центрирует блок в свободном месте над подвалом — так же,
   как в оригинале. Через flex:1 контейнер растянулся бы на всю высоту. */
.final-page__container {
  width: 660px;
  max-width: 100%;
  margin: auto;
  padding: 32px 0;
  text-align: center;
}

.final-page__promo {
  display: none;
}

.final-page__header {
  margin-bottom: 20px;
}

.final-page__title {
  margin: 0 0 19.2px;
  font-size: 28px;
  line-height: 31.5px;
  font-weight: var(--font-title-weight, 700);
  color: var(--color-text-title-100, #363636);
}

.final-page__subtitle {
  font-size: 16px;
  line-height: 19.2px;
  font-weight: var(--font-title-weight, 700);
  color: var(--color-text-alpha-70, rgba(54, 54, 54, 0.7));
}

/* Флекс-колонка, а не обычный блок: так вертикальные отступы соседних блоков
   не схлопываются — в оригинале форма тоже flex, и расстояния считаются в сумме. */
.lead-form {
  display: flex;
  flex-direction: column;
  width: 550px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.lead-form__fields {
  margin-bottom: 20px;
}

.field {
  margin-bottom: 18px;
}

.field:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  padding-bottom: 6px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-text-alpha-70, rgba(54, 54, 54, 0.7));
}

.control {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
}

.input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--color-bg-base-20, #ccc);
  border-radius: var(--input-border-radius, 4px);
  background: transparent;
  font-size: 18px;
  line-height: 27px;
  color: var(--color-text-base-100, #363636);
  transition: border-color 0.15s;
}

.input::placeholder {
  color: var(--color-text-alpha-50, rgba(54, 54, 54, 0.5));
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.control_has-icon .input {
  padding-left: 54.4px;
}

.control__icon {
  position: absolute;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-alpha-30, rgba(54, 54, 54, 0.3));
  pointer-events: none;
}

.control__icon .mdi-icon {
  width: 26px;
  height: 26px;
}

/* Телефон: слева неизменяемый префикс страны, справа поле ввода. */
.control_phone {
  gap: 0;
}

.phone-prefix {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 120px;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--color-bg-base-20, #ccc);
  border-right: 0;
  border-radius: var(--input-border-radius, 4px) 0 0 var(--input-border-radius, 4px);
  font-size: 18px;
  color: var(--color-text-base-100, #363636);
  flex-shrink: 0;
}

.phone-prefix__flag {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.input_phone {
  border-radius: 0 var(--input-border-radius, 4px) var(--input-border-radius, 4px) 0;
}

.field__error,
.lead-form__error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: #e0245e;
  min-height: 0;
}

.field__error:empty,
.lead-form__error:empty {
  display: none;
}

.lead-form__messengers-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 20px;
  padding: 18px 0;
  border-radius: var(--button-border-radius, 12px);
  background: var(--color-bg-base-07, #ededed);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-base-100, #363636);
  transition: background-color 0.15s;
}

.lead-form__messengers-link:hover {
  background: var(--color-bg-base-10, #e6e6e6);
}

/* Четыре иконки мессенджеров, наложенные друг на друга, — как в оригинале. */
.lead-form__messengers-icons {
  width: 64px;
  height: 20px;
  margin-right: 5px;
  background-image: url(/img/msg-4.svg), url(/img/msg-3.svg), url(/img/msg-2.svg), url(/img/msg-1.svg);
  background-position: 36px 0, 24px 0, 12px 0, 0 0;
  background-size: 18px 100%;
  background-repeat: no-repeat;
}

.lead-form__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 20px;
}

.messenger-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-bg-base-10, #e6e6e6);
  border-radius: var(--button-border-radius, 12px);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-base-100, #363636);
  transition: border-color 0.15s, background-color 0.15s;
}

.messenger-option:hover {
  border-color: var(--color-primary);
}

.messenger-option[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-primary-alpha-10, rgba(81, 185, 5, 0.1));
}

.messenger-option__icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.messenger-option__icon_max {
  background-image: url(/img/msg-4.svg);
}
.messenger-option__icon_telegram {
  background-image: url(/img/msg-1.svg);
}
.messenger-option__icon_whatsapp {
  background-image: url(/img/msg-2.svg);
}
.messenger-option__icon_viber {
  background-image: url(/img/msg-3.svg);
}

.lead-form__button {
  margin-bottom: 13px;
}

.lead-form__submit {
  width: 100%;
  height: 50px;
  padding: 12px 30px;
  font-size: 18px;
  line-height: 20.8px;
}

/* Пока имя и телефон не заполнены, кнопка выглядит неактивной — как в оригинале.
   Нажатие при этом работает и показывает, что именно не заполнено. */
.lead-form__submit.is-inactive {
  box-shadow: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.lead-form-agreement {
  margin-top: 16px;
}

.b-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 15px;
  color: #494949;
  cursor: pointer;
}

.b-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.b-checkbox .check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border: 1px solid var(--color-bg-base-20, #ccc);
  border-radius: 4px;
  background: #fff;
  transition: background-color 0.15s, border-color 0.15s;
}

.b-checkbox input:checked + .check {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l5 5 9-10'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}

.b-checkbox input:focus-visible + .check {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* min-height повторяет высоту подвала оригинала: там рядом с бонусами стоял
   логотип Marquiz, мы его убрали, но геометрию экрана сохраняем. */
.final-page__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 660px;
  max-width: 100%;
  min-height: 78px;
  margin: 0 auto;
  padding: 10px 55px;
}

.bonuses-mini {
  display: inline-flex;
  gap: 4px;
}

.bonuses-mini__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-image: linear-gradient(331deg, var(--color-primary-dark-20, #245502), var(--color-primary-light-20, #80fa29));
}

.bonuses-mini__item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* ==========================================================================
   ЭКРАН 4 — спасибо
   ========================================================================== */
.final-page_thanks {
  padding: 0;
}

.thanks-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 64px 16px 16px;
  background: #fff;
}

/* Внешний блок центрирует пару колонок по высоте экрана, внутренний
   выравнивает сами колонки по верхнему краю — как в оригинале. */
.thanks-page__content {
  display: flex;
  align-items: flex-start;
  gap: 132px;
}

.thanks-page__text,
.thanks-page__bonuses {
  flex-shrink: 0;
}

.thanks-page__text {
  width: 368px;
  max-width: 100%;
  text-align: left;
}

.thanks-page__title {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 38.4px;
  font-weight: var(--font-title-weight, 700);
  color: var(--color-text-title-100, #363636);
}

.thanks-page__subtitle {
  font-size: 20px;
  line-height: 25px;
  color: var(--color-text-base-100, #363636);
}

.thanks-page__bonuses {
  width: 320px;
  display: flex;
  justify-content: center;
}

.thanks-bonuses {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
  padding: 12px;
  border-radius: 12px;
  background-image: linear-gradient(rgba(254, 204, 49, 0.04), rgba(254, 204, 49, 0.4));
}

.thanks-bonuses__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-title-weight, 700);
  color: var(--color-text-title-100, #363636);
}

.thanks-bonuses__list {
  display: grid;
  gap: 8px;
}

/* ==========================================================================
   Cookie-баннер
   ========================================================================== */
.cookie-notice {
  position: relative;
  flex-shrink: 0;
  height: var(--cookie-h);
  overflow: hidden;
}

.cookie-notice[hidden] {
  display: none;
}

.cookie-notice__bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg-base-03, #f7f7f7);
}

.cookie-notice__banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 800px;
  height: 100%;
  margin: 0 auto;
  padding: 11px;
}

.cookie-notice__text {
  font-size: 14px;
  line-height: 18.06px;
  color: var(--color-text-base-100, #363636);
}

.cookie-notice__button {
  flex-shrink: 0;
  padding: 8px 24px;
  border-radius: var(--button-border-radius, 12px);
  background: var(--color-primary-alpha-20, rgba(81, 185, 5, 0.2));
  color: var(--color-text-base-100, #363636);
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cookie-notice__button:hover {
  background: var(--color-primary-alpha-50, rgba(81, 185, 5, 0.5));
}

/* ==========================================================================
   Узкие экраны — контент в одну колонку
   Порог 1024px соответствует оригиналу (у Marquiz это брейкпоинт «is-desktop»).
   ========================================================================== */
@media (max-width: 1023px) {
  .app__layout {
    height: auto;
    flex: 1 0 auto;
    min-height: var(--screen-h);
  }

  .screen {
    height: auto;
  }

  /* Каждый экран занимает не меньше вьюпорта — тогда нижние блоки
     (навигация вопроса, подвал формы) прижаты к низу, как в оригинале. */
  .start-page,
  .quiz,
  .final-page {
    height: auto;
    min-height: var(--screen-h);
  }

  /* --- стартовая --- */
  .start-page {
    display: flex;
    flex-direction: column;
  }

  .start-page__bg {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 220px;
    flex-shrink: 0;
    background-image: url(/img/bg-640.webp);
    background-position: 50% 50%;
  }

  .start-page__brand {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-bg-base-10, #e6e6e6);
  }

  .start-page__company {
    font-size: 12px;
    line-height: 15px;
  }

  .start-page__content {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    flex: 1;
    justify-content: flex-start;
    padding: 0;
    overflow: visible;
  }

  .start-page__body {
    flex: none;
    justify-content: flex-start;
    padding: 24px 32px;
  }

  .start-page__header {
    margin: 16px 0;
    font-size: 26px;
    line-height: 31.2px;
  }

  .start-page__subheader {
    font-size: 16px;
    line-height: 21.28px;
  }

  .start-page__button,
  .start-page__bonuses {
    width: 100%;
    max-width: none;
  }

  .start-page__button {
    height: 56px;
  }

  .bonuses-rail__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-page__footer {
    flex-direction: column;
    align-items: center;
    padding: 16px 16px 24px;
  }

  .start-page__contact {
    align-items: center;
  }

  .start-page__legal {
    padding-right: 0;
    text-align: center;
  }

  /* На узких экранах оригинал дисклеймер не показывает — он обрезается
     нижней границей блока. Повторяем поведение явно. */
  .start-page__disclaimer {
    display: none;
  }

  /* --- вопрос --- */
  .quiz {
    flex-direction: column;
  }

  .quiz__sidebar {
    display: none;
  }

  .quiz__questions-header {
    padding: 0 16px 16px;
  }

  .quiz__question-title {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 0 0;
    font-size: 22px;
    line-height: 27px;
  }

  .question-wrapper {
    width: 100%;
    max-width: none;
    padding: 0 16px 6px;
  }

  .answer-variants__group {
    grid-template-columns: 1fr;
  }

  /* Навигация вопроса: слева стопка бонусов, справа кнопки,
     по нижнему краю — линейный индикатор прогресса. */
  .quiz-navbar {
    width: 100%;
    max-width: none;
    height: 60px;
    padding: 6px 10px 19px;
  }

  .bonus-stack {
    display: block;
  }

  .progress-bar-linear {
    display: block;
  }

  .progress-bar__gradient {
    display: none;
  }

  .quiz-navbar__buttons {
    gap: 10px;
  }

  .quiz-navbar__button_next {
    padding: 0 20px;
  }

  .quiz-navbar__button_next-text_wide {
    display: none;
  }

  .quiz-navbar__button_next-text_narrow {
    display: inline;
  }

  /* --- форма --- */
  .final-page__container {
    width: 100%;
    margin: 0;
    padding: 0 0 40px;
    text-align: left;
  }

  .final-page__body {
    padding: 24px 16px 16px;
  }

  /* Иконки бонусов на узком экране переезжают наверх формы. */
  .final-page__promo {
    display: block;
    margin-bottom: 20px;
  }

  .final-page__header {
    margin-bottom: 0;
  }

  .final-page__title {
    margin-bottom: 8px;
    font-size: 24px;
    line-height: 28.8px;
  }

  .final-page__subtitle {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .final-page__lead-form {
    padding: 0 16px 24px;
  }

  /* На узком экране форма — обычный блок: вертикальные отступы кнопки
     и согласия схлопываются, как в оригинале. */
  .lead-form {
    display: block;
    width: 100%;
  }

  .field {
    margin-bottom: 12px;
  }

  .input,
  .control {
    height: 48px;
  }

  .phone-prefix {
    width: 104px;
    height: 48px;
  }

  .lead-form__messengers-link {
    margin-bottom: 10px;
    padding: 11.2px 16px;
  }

  .final-page__footer {
    display: none;
  }

  /* --- спасибо --- */
  .thanks-page {
    align-items: flex-start;
    padding: 40px 16px 24px;
  }

  .thanks-page__content {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  .thanks-page__text {
    width: 100%;
    text-align: center;
  }

  .thanks-page__title {
    font-size: 26px;
    line-height: 31.2px;
  }

  .thanks-page__bonuses {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .bonuses-rail__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Служебные страницы: индекс, политика, статистика
   ========================================================================== */
body.plain {
  background: #f7f7f7;
  color: #363636;
}

.plain__wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.plain__wrap h1 {
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}

.plain__wrap h2 {
  margin: 24px 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.plain__wrap h2 small {
  font-weight: 400;
  color: rgba(54, 54, 54, 0.6);
}

.plain__wrap p {
  margin: 0 0 12px;
}

.plain__lead {
  color: rgba(54, 54, 54, 0.75);
}

.doc {
  padding: 24px 28px;
  border-radius: 12px;
  background: #fff;
}

.doc h2 {
  margin: 24px 0 8px;
  font-size: 17px;
}

.doc h2:first-child {
  margin-top: 0;
}

.doc ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.doc li {
  margin-bottom: 4px;
}

.cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.city {
  padding: 16px 20px;
  border-radius: 12px;
  background: #fff;
}

.city h2 {
  margin-top: 0;
}

.city ul {
  margin: 0;
  padding-left: 18px;
}

.city li {
  margin-bottom: 4px;
  font-size: 14px;
}

.stats-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}

.stats-table th,
.stats-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #ededed;
  white-space: nowrap;
}

.stats-table th {
  background: #f0f0f0;
  font-weight: 600;
}

.stats-table tr:last-child td {
  border-bottom: 0;
}

.stats-scroll {
  overflow-x: auto;
}