/* Рестайлинг 2026 (новая главная, index.php): шапка и первый экран по образцу документы/restyling-2026-09-21 */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-bold.ttf') format('truetype');
  font-weight: 600 800;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* Преимущества первого экрана: крупнее и мягче, тем же шрифтом и цветом, что заголовок */
.offer__list .list-item {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: #293a44;
  -webkit-font-smoothing: antialiased;
}

/* Фон первого экрана и блока отзывов: светлый градиент + приглушённая карта, растворяющаяся под текстом */
.header,
.reviews {
  background: linear-gradient(180deg, #f7fafb, #dfebee);
}

.reviews {
  position: relative;
  isolation: isolate;
  padding-bottom: 90px;
}

.header:before,
.reviews:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background: url('../img/city-map.jpg') center 42% / cover no-repeat;
  opacity: .38;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 25%, rgba(0, 0, 0, .75) 48%, #000 70%), linear-gradient(180deg, transparent 0%, #000 22%, #000 67%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 25%, rgba(0, 0, 0, .75) 48%, #000 70%), linear-gradient(180deg, transparent 0%, #000 22%, #000 67%, transparent 100%);
  mask-composite: intersect;
}

/* В первом экране слой не изолируем: иначе плавающая шапка (z-index 999999) оказалась бы заперта внутри
   него и ушла под блоки ниже. Карта лежит на z-index 0, содержимое экрана — над ней. */
.header:before {
  z-index: 0;
}

.header .head:not(.b-block),
.header .offer {
  position: relative;
  z-index: 1;
}

/* Заголовок */
.offer {
  max-width: 870px;
}

.offer__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 54px;
  line-height: 1.16;
  letter-spacing: -2px;
  text-transform: none;
  color: #293a44;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.offer__title span {
  color: #e26554;
  white-space: nowrap;
}

/* Логотип и контакты в шапке */
.logo:after {
  display: none;
}

/* Почта ровно под WhatsApp: кнопка копирования вынесена за край и не сдвигает адрес */
.head__link p a:nth-child(2) {
  margin: 0;
}

.head__link .mail-copy-wrap {
  position: relative;
  margin-top: 5px;
}

.head__link .mail-copy {
  position: absolute;
  top: 50%;
  left: 100%;
  margin: -13px 0 0 6px;
}

@media screen and (max-width: 767px) {
  .head__link .mail-copy {
    left: auto;
    right: 100%;
    margin: -13px 6px 0 0;
  }

  .head__link .mail-copy::after {
    right: auto;
    left: 0;
  }
}

@media screen and (min-width: 577px) {
  .logo .logo-desktop {
    width: 263px;
    height: auto;
  }
}

@media screen and (min-width: 768px) {
  /* Компактный первый экран: без растяжки на всю высоту окна, меньше зазор до заголовка */
  .header,
  .header .container {
    min-height: auto;
  }

  .head {
    padding-top: 28px;
  }

  .offer {
    margin: 36px auto 56px 0;
  }


  /* Телефон в плавающей шапке — шрифтом и цветом заголовка первого экрана */
  .head__link a.phone {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.5px;
    color: #293a44;
    -webkit-font-smoothing: antialiased;
  }

  .head__link a.phone:hover {
    color: #f84644;
  }

  .head__link p,
  .head__link a {
    font-size: 13px;
  }

  .head__link p {
    margin-top: 7px;
  }
}

/* Форма справа от преимуществ */
@media screen and (min-width: 992px) {
  .offer {
    display: grid;
    grid-template-columns: minmax(0, 485px) 340px;
    column-gap: 70px;
    justify-content: space-between;
    align-items: start;
    max-width: none;
  }

  .offer__title {
    grid-column: 1 / -1;
    max-width: 870px;
    margin-left: 0;
  }

  .offer .sign-up__form {
    width: auto;
    margin: 30px 0 0;
  }
}

/* Поля, кнопка и согласие — одной ширины на любой ширине экрана */
.offer .sign-up__form ._input,
.offer .sign-up__form .cta {
  width: 100%;
}

.offer .sign-up__form .label {
  width: calc(100% - 30px);
}

@media screen and (max-width: 1050px) {
  .offer__title {
    font-size: 48px;
  }
}

@media screen and (max-width: 767px) {
  /* Заголовок ближе к логотипу (отступ 150 → 36px); преимущества ниже заголовка и дальше от формы,
     пустоты под кнопкой меньше */
  .header {
    background: linear-gradient(180deg, #f7fafb, #dfebee);
    padding-bottom: 72px;
  }

  .offer {
    margin-top: 36px;
  }

  .offer__list {
    margin: 34px 0 40px;
  }

  .offer__list .list-item {
    font-size: 17px;
    margin-bottom: 14px;
  }

  .header:before {
    background-size: auto 100%;
    background-position: 58% center;
    opacity: .32;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .6) 45%, #000 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 75%, transparent 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .6) 45%, #000 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 75%, transparent 100%);
  }

  .offer__title {
    font-size: 36px;
    letter-spacing: -1.3px;
    line-height: 1.2;
  }
}

/* Логотип в одну строку на мобильном: вместо двухстрочного logo-mobile.svg */
@media screen and (max-width: 576px) {
  .logo .logo-desktop {
    display: block;
    width: min(224px, 57vw);
    height: auto;
  }

  .logo .logo-mobile {
    display: none;
  }

  /* Плавающая шапка: полупрозрачная, со стеклом; из иконок остаётся только телефон */
  .head-fixed.b-block {
    background: transparent;
  }

  /* Высота плавающей шапки, логотип, телефон и бургер — на 40% больше исходных (44px → 62px) */
  .head.b-block {
    padding-top: 14px;
    padding-bottom: 14px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 1px 12px rgba(0, 0, 0, .1);
  }

  .head.b-block .logo img {
    width: min(224px, 57vw);
  }

  .burger.b-block {
    width: 34px;
    height: 34px;
    background-size: 34px 34px;
  }

  .burger._close {
    background-size: 34px 34px;
  }

  .burger__menu.b-block {
    margin-top: 62px;
    background: #fff;
  }

  .icon-contacts.b-none {
    right: 56px;
  }

  .icon-contacts a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 62px;
    padding: 0;
    font-size: 36px;
    background: transparent;
  }

  .icon-contacts a:nth-child(2),
  .icon-contacts a:nth-child(3) {
    display: none;
  }
}

@media screen and (max-width: 359px) {
  .offer__title {
    font-size: 31px;
  }
}

/* Блок «Вопросы и ответы» (из документы/mockup-main-2026-10-21.html) */
.faq {
  background: #f3f8fb;
  padding: 88px 0;
}

.faq .container {
  max-width: 890px;
}


.faq__list {
  margin-top: 32px;
  border-bottom: 1px solid #e3ebf0;
}

.faq__item {
  border-top: 1px solid #e3ebf0;
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: #1c2b36;
  -webkit-font-smoothing: antialiased;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__ico {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #2f6f8f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.faq__item[open] .faq__ico {
  transform: rotate(45deg);
}

.faq__item p {
  padding-bottom: 20px;
  font-size: 16px;
  line-height: 1.55;
  color: #5d6f7b;
}

@media screen and (max-width: 767px) {
  .faq {
    padding: 56px 0;
  }

  .faq__item summary {
    font-size: 17px;
  }
}

/* Текст в остальных экранах — как в блоке «Вопросы и ответы»: Roboto 16px, межстрочный 1.55 (цвета не меняем) */
.benefits__item p,
.app-ready p,
.app-quiz__discount p,
.stages__text,
.conditions__term,
.sign-up__text,
.sign-up__item p,
.pass-check__wrap > p,
.wrap_order_tracker .top_text,
.wrap_order_tracker .bottom_text,
.bottom_list_wrap p,
.about__add,
.about__item span,
.reviews__add,
.reviews-text__name,
.reviews-text__text,
.contacts__wrap p,
.contacts__wrap a.contact_mail,
.footer__copy,
.footer__link {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* Отзывы на ПК: три карточки помещаются в ряд, Slick их не прокручивает и ставит вплотную у левого края —
   выстраиваем по центру с отступом (на планшете и телефоне остаётся карусель) */
@media screen and (min-width: 992px) {
  .reviews-text .slick-track {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100% !important;
    transform: none !important;
  }

  .reviews-text .slick-slide {
    width: auto !important;
  }
}

/* С новой межстрочкой длинные отзывы не помещаются в карточку фиксированной высоты */
@media screen and (min-width: 577px) {
  .reviews-text__slide {
    height: auto;
    min-height: 420px;
  }
}

/* Стоимость: на мобильном одна общая карточка вместо трёх */
.conditions__item._all {
  display: none;
}

@media screen and (max-width: 767px) {
  .conditions__item:not(._all) {
    display: none;
  }

  .conditions__item._all {
    display: block;
  }

  .conditions__item._all .conditions__title span {
    white-space: nowrap;
  }
}

/* Проверка пропуска: на мобильном всё по центру */
@media screen and (max-width: 767px) {
  .pass-check__wrap {
    align-items: center;
  }

  .pass-check__wrap p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .pass-check__form {
    margin: 0 auto;
    text-align: center;
  }

  .pass-check__form ._input {
    text-align: center;
  }

  .pass-check .hint {
    display: block;
    text-align: center;
  }

  .pass-mobile,
  .pass-mobile .pass__item {
    text-align: center;
  }

  .btn-order .pass__cta {
    display: block;
  }
}

/* Форма заказа трекера скрыта до нажатия «Заказать трекер» */
#buy_tracker {
  display: none;
}

#buy_tracker.is-open {
  display: block;
}

/* ПК: правые прикреплённые иконки (звонок, WhatsApp, почта) убраны — их заменяет виджет связи */
@media screen and (min-width: 577px) {
  .icon-contacts.b-none {
    display: none;
  }
}

/* Тексты согласий под формами — как в плашке куки (Roboto 12px, серый); ссылки неприметные, с лёгким подчёркиванием */
.label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1.3;
  color: #5b6670;
}

.label a {
  color: #657784;
  text-decoration: underline;
  text-decoration-color: rgba(101, 119, 132, .4);
  text-underline-offset: 2px;
}

.label a:hover {
  color: #293a44;
}

/* «Закажите прямо сейчас»: без фоновой картинки, фон как у блока «Вопросы и ответы» */
#sign-up {
  background: #f3f8fb;
  padding-top: 56px;
  padding-bottom: 88px;
}

/* Заголовок ближе к началу фона экрана и с отступом до текста и формы (раньше их разделял подзаголовок) */
#sign-up h2 {
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  #sign-up {
    padding-top: 44px;
  }

  #sign-up h2 {
    margin-bottom: 28px;
  }
}

@media screen and (max-width: 767px) {
  #sign-up {
    padding-bottom: 56px;
  }
}

/* ПК: контакты из шапки убраны; со второго экрана шапка плавающая — логотип, телефон и меню, как на мобильном */
/* Контакты в шапке первого экрана убраны (ПК и мобильный); телефон остаётся в плавающей шапке ПК */
.head__link {
  display: none;
}

@media screen and (min-width: 577px) {
  .cp-sticky .head-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999999;
  }

  .cp-sticky .head {
    align-items: center;
    gap: 28px;
    height: 62px;
    padding: 0 32px 0 max(15px, calc((100% - 990px) / 2));   /* телефон и меню — к правому краю экрана */
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 1px 12px rgba(0, 0, 0, .1);
    animation: cpSlideDown .25s ease-out;
  }

  .cp-sticky .head .logo .logo-desktop {
    width: 263px;
  }

  .cp-sticky .head__link {
    display: block;
    margin-left: auto;
  }

  .cp-sticky .head__link > :not(.phone) {
    display: none;
  }

  .cp-sticky .burger {
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: url(../img/burger-menu.svg) no-repeat center / 30px 30px;
    cursor: pointer;
  }

  .cp-sticky .burger._close {
    background-image: url(../img/close.svg);
  }

  .cp-sticky .burger__menu.b-block {
    display: block;
    position: absolute;
    top: 62px;
    right: 16px;
    width: 360px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    border-radius: 0 0 14px 14px;
  }
}

@keyframes cpSlideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Подвал: место под кнопку копирования почты перед следующей ссылкой */
.footer .mail-copy-wrap.footer__link {
  margin-right: 44px;
}

/* Блок «О центре пропусков»: подложка под цифрой — по центру карточки (раньше left в %, на мобильном уезжала влево) */
.about__item:before {
  left: 50%;
  transform: translateX(-50%);
}

/* Выпадающее меню бургера (ПК и мобильный): поверх всех слоёв, вплотную к плашке, стекло, крупные пункты с подсветкой */
.head-fixed.b-block,
.cp-sticky .head-fixed {
  z-index: 2147483001;
}

/* Иконка звонка мобильной плашки — над самой плашкой */
.icon-contacts.b-none {
  z-index: 2147483002;
}

.burger__menu.b-block {
  max-height: calc(100vh - 62px);
  overflow-y: auto;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}

.burger__menu .menu__item {
  padding: 0;
  font-size: 19px;
  border-bottom: 1px solid rgba(41, 58, 68, .08);
}

.burger__menu .menu__item:last-child {
  border-bottom: none;
}

.burger__menu .menu__item a {
  display: block;
  padding: 13px 22px;
  color: #293a44;
  transition: background-color .15s, color .15s;
}

.burger__menu .menu__item a:hover,
.burger__menu .menu__item a:focus-visible {
  background: rgba(248, 70, 68, .08);
  color: #f84644;
  outline: none;
}

@media screen and (max-width: 576px) {
  .burger__menu.b-block {
    margin-top: 62px;
    padding: 6px 0;
  }

  .burger__menu .menu__item {
    font-size: 20px;
  }

  .burger__menu .menu__item a {
    padding: 14px 15px;
  }
}

/* Плашка согласия на куки: плавающая, стекло, компактная. Обработка кнопок пока не подключена */
.cookie-bar {
  position: fixed;
  left: 50%;
  bottom: 8px;
  z-index: 2147482999;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 5px 6px 5px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 12px;
  background: rgba(244, 246, 249, .36);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 5px 20px rgba(20, 30, 40, .07);
  transform: translateX(-50%);
  animation: cookieBarIn .45s cubic-bezier(.2, .8, .2, 1) both;
}

.cookie-bar__text {
  font-size: 12px;
  line-height: 1.3;
  color: #5b6670;
  white-space: nowrap;
}

.cookie-bar__text a {
  color: #1d65c8;
}

.cookie-bar__text a:hover {
  text-decoration: underline;
}

.cookie-bar__short,
.cookie-bar__mini {
  display: none;
}

.cookie-bar__actions {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
}

.cookie-bar__btn {
  height: 24px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s;
}

.cookie-bar__btn:hover {
  transform: translateY(-1px);
}

.cookie-bar__btn:active {
  transform: scale(.93);
  transition-duration: .08s;
}

.cookie-bar__btn:focus-visible {
  outline: 2px solid rgba(29, 101, 200, .35);
  outline-offset: 2px;
}

.cookie-bar__btn._accept {
  background: #1d65c8;
  color: #fff;
}

.cookie-bar__btn._accept:hover {
  background: #1857ad;
  box-shadow: 0 3px 10px rgba(29, 101, 200, .3);
}

.cookie-bar__btn._limited {
  background: rgba(41, 58, 68, .05);
  color: #1f2a33;
}

.cookie-bar__btn._limited:hover {
  background: rgba(41, 58, 68, .12);
}

.cookie-bar__btn._decline {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(41, 58, 68, .12);
  color: #1f2a33;
}

.cookie-bar__btn._decline:hover {
  background: rgba(255, 255, 255, .6);
  border-color: rgba(41, 58, 68, .28);
}

/* Скрытие по любой кнопке: плашка уезжает вниз и пропадает, виджет связи опускается на место */
.cookie-bar.is-leaving {
  animation: cookieBarOut .3s ease-in forwards;
}

.cookie-hidden .cookie-bar {
  display: none;
}

@keyframes cookieBarOut {
  to { opacity: 0; transform: translate(-50%, 16px); }
}

@keyframes cookieBarIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Средние экраны: короткий текст */
@media screen and (max-width: 991px) {
  .cookie-bar__full {
    display: none;
  }

  .cookie-bar__short {
    display: inline;
  }
}

/* Мобильный: одна строка — «Куки · условия» и маленькие кнопки; кнопка виджета связи — над плашкой */
@media screen and (max-width: 576px) {
  .cookie-bar {
    gap: 8px;
    padding: 4px 4px 4px 10px;
    border-radius: 10px;
  }

  .cookie-bar__text {
    font-size: 11px;
  }

  .cookie-bar__we {
    display: none;
  }

  .cookie-bar__mini {
    display: inline;
  }

  .cookie-bar__actions {
    gap: 4px;
  }

  .cookie-bar__btn {
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 11px;
    line-height: 20px;
  }
}

@media screen and (max-width: 767px) {
  html:not(.cookie-hidden) call-widget {
    --offset: 26px !important;
  }
}

/* Виджет связи появляется вместе с плавающей шапкой — как только прокрутка скрыла верхний логотип */
call-widget {
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

/* На ПК кнопка видна сразу, на мобильном — появляется при прокрутке */
@media screen and (max-width: 767px) {
  html:not(.cp-scrolled) call-widget {
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
  }
}

/* Цены: «от 8 000 руб.» */
.conditions__item .conditions__term {
  margin: 4px 0 22px;
  font-size: 18px;
  color: #5b6670;
}

.conditions__item .conditions__term b {
  font-family: 'Manrope', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #293a44;
}

/* Контакты: «Остались вопросы? Звоните:» над телефоном (перенесено из подвала) */
.contacts__ask {
  margin-top: 30px;
  font-size: 20px;
  color: #303030;
}

.contacts__ask + .contacts__tel {
  margin-top: 6px;
}

/* Контакты: телефон и почта тёмные (красным — только при наведении), WhatsApp — иконкой в ряду мессенджеров */
.contacts__wrap a.contacts__tel,
.contacts__wrap a.contact_mail {
  color: #293a44;
}

/* Почта в контактах — жирная, как на странице квиза */
.contacts__wrap a.contact_mail {
  font-family: 'Manrope', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 17px;
}

.contacts__wrap a.contacts__tel:hover,
.contacts__wrap a.contact_mail:hover {
  color: #f84644;
}

/* Подвал: только копирайт и политика, без пустоты внизу страницы */
.footer {
  padding: 28px 0 18px;
}

.footer .footer__copy {
  margin-bottom: 8px;
}

/* Окно «Вам подарок» */
.form-popup__title span {
  background: none;
  color: #f84644;
}

/* «Закажите прямо сейчас» и заказ трекера: на мобильном формы на всю ширину, как остальные */
@media screen and (max-width: 576px) {
  .sign-up .sign-up__form,
  .track_form,
  .track_form > textarea {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Заказ трекера: кнопка на всю ширину формы, согласие под кнопкой */
.track_form ._input,
.track_form .track_btn {
  width: 100%;
}

.track_form .track_btn {
  margin: 4px 0 16px;
}

.track_form .label {
  width: calc(100% - 30px);
}

/* Преимущества трекера — сразу после подзаголовка */
.track_advantages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 36px;
  margin: 24px 0 8px;
}

.track_advantages .list-item {
  width: auto;
  margin: 0;
  font-size: 17px;
}

@media screen and (max-width: 767px) {
  .track_advantages {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .track_advantages .list-item {
    font-size: 16px;
  }
}

/* Что входит в обслуживание — текст в стиле остальных блоков рядом с формами */
.track_list p {
  font-size: 16px;
  line-height: 1.55;
  color: #303030;
}

.track_list p strong {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
}

/* Вопросы и ответы: документы списком с красными кружками, как варианты в квизе */
.faq__docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
  padding-bottom: 12px;
}

.faq__docs-title {
  padding-bottom: 8px !important;
  font-weight: 500;
  color: #293a44 !important;
}

.faq__docs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq__docs li {
  position: relative;
  padding: 0 0 8px 30px;
  font-size: 16px;
  line-height: 1.5;
  color: #5d6f7b;
}

.faq__docs li:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f84644;
}

.faq__docs li:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

@media screen and (max-width: 576px) {
  .faq__docs {
    grid-template-columns: 1fr;
  }
}

/* Квиз: подсказка, если нажали «Далее» без выбранного варианта */
.quiz-hint {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 5;
  padding: 10px 16px;
  border-radius: 12px;
  background: #293a44;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(20, 30, 40, .2);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

.quiz-hint:after {
  content: '';
  position: absolute;
  right: 40px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #293a44;
  transform: rotate(45deg);
}

.quiz-hint.is-on {
  opacity: 1;
  transform: translateY(0);
}

.app-quiz__btn-wrap {
  position: relative;
}

[class*="app-quiz__answers_"].is-shake {
  animation: quizShake .4s ease;
}

@keyframes quizShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Проверка пропуска: шесть колонок с «Временем» */
.pass-desktop .pass__item > div,
.pass-desktop .pass__item > div:last-child {
  flex: 1 1 0;
  width: auto;
}

.pass-desktop .pass__item > div:last-child {
  flex-grow: 1.4;
}

/* iOS 26 Safari красит нижнюю панель цветом фиксированного элемента, прижатого к низу экрана (на главной такого нет —
   там низ прозрачный). Плашку куки держим выше края и безопасной зоны, чтобы Safari её не «подхватывал». */
@media screen and (max-width: 767px) {
  .cookie-bar {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  html:not(.cookie-hidden) call-widget {
    --offset: 36px !important;
  }
}

/* Поле «Пожелания» — по ширине формы (в старых стилях фиксированные 376/325px вылезали за край) */
.sign-up__form textarea._input,
.track_form textarea._input {
  width: 100%;
  box-sizing: border-box;
}

/* Заказ трекера: список выезжает справа (fadeInRight) — без горизонтальной прокрутки на время анимации */
#buy_tracker {
  overflow-x: hidden;
}

/* ===== Формы в стиле quiz.php: поля, отступы, кнопки, шрифты, цвета, анимация кнопок ===== */
/* поля светлые (белые с тонкой рамкой), чтобы были заметны на светлом фоне экранов; кнопки с классом _input не трогаем */
.js-form ._input:not(.cta),
.pass-check__form ._input {
  height: 56px;
  margin-bottom: 12px;
  padding: 0 20px;
  border: 2px solid #e1e8ef;
  border-radius: 16px;
  background: #fff;
  font-family: 'Manrope', 'Roboto', sans-serif;
  font-size: 17px;
  line-height: normal;
  color: #1f2733;
  -webkit-font-smoothing: antialiased;
  transition: border-color .2s ease, background-color .2s ease;
}

.js-form textarea._input {
  height: 130px;
  padding: 16px 20px;
  resize: vertical;
}

.js-form ._input:not(.cta)::placeholder,
.pass-check__form ._input::placeholder {
  color: #8a94a3;
}

.js-form ._input:not(.cta):hover,
.js-form ._input:not(.cta):focus,
.pass-check__form ._input:hover,
.pass-check__form ._input:focus {
  border-color: #8fc6dc;
  background: #fff;
  outline: none;
}

.js-form ._input:not(.cta).error {
  border-color: #ed0d0d;
}

.js-form label.error {
  margin: -6px 0 10px 8px;
}

.cta {
  border-radius: 999px;
  font-family: 'Manrope', 'Roboto', sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .12s ease, transform .12s ease;
}

.js-form .cta._submit,
.js-form .track_btn,
.pass-check__form .cta._submit {
  height: 52px;
}

.js-form .cta._submit {
  margin: 6px 0 16px;
}

/* «Нашли дешевле?» — поля и кнопка в одну строку */
.question .js-form ._input:not(.cta) {
  margin: 0 10px 0 0;
}

.question .js-form .cta._submit {
  height: 56px;
  margin: 0;
}

/* ПК: поля и кнопка — первая строка сетки, ошибки — вторая, каждая под своим полем (раньше подписи ошибок
   вставали в ряд между полями и сдвигали кнопку; старые правила main.css ждали id #tel-error, а у поля name="phone") */
@media screen and (min-width: 992px) {
  .question .js-form {
    display: grid;
    grid-template-columns: 240px 240px auto;
    column-gap: 10px;
    justify-content: center;
    align-items: start;
  }

  .question .js-form ._input:not(.cta) {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .question .js-form ._input[name="name"] { grid-column: 1; grid-row: 1; }
  .question .js-form ._input[name="phone"] { grid-column: 2; grid-row: 1; }
  .question .js-form .cta._submit { grid-column: 3; grid-row: 1; }

  .question .js-form label.error {
    position: static;
    grid-row: 2;
    max-width: none;
    margin: 6px 0 0 8px;
  }

  .question .js-form #name-error,
  .question .js-form #phone-error {
    position: static;
    margin: 6px 0 0 8px;
  }

  .question .js-form #name-error { grid-column: 1; }
  .question .js-form #phone-error { grid-column: 2; }
}

@media screen and (max-width: 991px) {
  .question .js-form ._input:not(.cta) {
    margin: 0 0 12px;
  }

  /* ошибки слева под полем, как в остальных формах */
  .question .js-form label.error,
  .question .js-form #name-error,
  .question .js-form #phone-error {
    align-self: stretch;
    margin: -6px 0 10px 8px;
    text-align: left;
  }

  .question .js-form .cta._submit {
    height: 52px;
    margin: 6px 0 16px;
  }
}

/* Проверка пропуска: ошибка под полем — как в остальных формах */
.pass-check__form ._input.error {
  border-color: #ed0d0d;
}

.pass-check__form label.error {
  margin: 6px 0 4px 8px;
  text-align: left;
}

.pass-check__form label.error + .hint {
  display: none;   /* пока есть ошибка, серая подсказка с примером не нужна — пример уже в тексте ошибки */
}

/* Окно «Вам подарок»: кнопка как на остальных формах (у неё есть класс поля _input) */
.form-popup .cta._submit {
  height: 52px;
  padding: 0 24px;
  border: 2px solid #f84644;
  background: #f84644;
  color: #fff;
  line-height: normal;
}

.form-popup .cta._submit:hover {
  border-color: #ff5856;
  background: #ff5856;
}

/* Подвал: ссылка на политику — неяркая */
.footer .footer__link {
  color: #657784;
  text-decoration: underline;
  text-decoration-color: rgba(101, 119, 132, .4);
  text-underline-offset: 3px;
}

.footer .footer__link:hover {
  color: #293a44;
}

/* Наши контакты: иконки мессенджеров в стиле плиток виджета связи */
.contacts__messengers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  margin: 4px 0 26px;
}

.messenger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
  font-family: 'Manrope', 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #293a44;
  text-decoration: none;
  transition: transform .18s ease-out;
}

.messenger:hover {
  color: #293a44;
  transform: translateY(-3px);
}

.messenger:active {
  transform: scale(.96);
}

.messenger__bubble {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  background: var(--ch);
  box-shadow: 0 8px 20px var(--glow);
  transition: box-shadow .18s ease-out;
}

.messenger:hover .messenger__bubble {
  box-shadow: 0 12px 26px var(--glow);
}

.messenger__bubble svg {
  width: 32px;
  height: 32px;
}

.messenger._whatsapp { --ch: #25D366; --glow: rgba(37, 211, 102, .35); }
.messenger._telegram { --ch: #2AABEE; --glow: rgba(42, 171, 238, .35); }
.messenger._max { --ch: linear-gradient(45deg, #3BC8FF 0%, #4A56E8 55%, #9B3FE0 100%); --glow: rgba(74, 86, 232, .35); }
.messenger._call { --ch: linear-gradient(135deg, #1683c0 0%, #29a8e6 100%); --glow: rgba(22, 131, 192, .35); }

/* Проверка пропуска: подсказка под полем — с отступом и по центру поля */
.pass-check .pass-check__form .hint {
  position: static;
  display: block;
  margin: 2px 0 0;
  text-align: center;
}

/* «Заказать звонок» в контактах — подпись в две строки по центру иконки */
.messenger._call {
  width: 96px;
  text-align: center;
  line-height: 1.25;
}

/* Окно «Вам подарок»: всё по центру (форма раньше стояла по левому краю на широких телефонах), заголовок и текст крупнее */
.form-popup__wrapper {
  padding-left: 32px;
  padding-right: 32px;
  text-align: center;
}

.form-popup__wrapper .sign-up__form {
  margin-left: auto;
  margin-right: auto;
}

.form-popup__title {
  margin-bottom: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

.form-popup__add {
  margin-bottom: 20px;
  font-size: 19px;
  line-height: 1.4;
  color: #293a44;
  text-align: center;
}

.form-popup__wrapper .label {
  text-align: left;
}

@media screen and (max-width: 576px) {
  .form-popup__wrapper {
    padding-left: 18px;
    padding-right: 18px;
  }

  .form-popup__title {
    font-size: 32px;
  }

  .form-popup__add {
    font-size: 18px;
  }
}

/* Окно «Вам подарок»: картинка чуть крупнее и сдвинута вправо — пальцы указывают ровно на центр заголовка
   (точка между пальцами на снимке ≈ 45,5% ширины); лишнее справа обрезает окно */
.form-popup__form {
  overflow: hidden;
}

.form-popup__img {
  display: block;
  width: 110%;
  max-width: none;
  margin-left: -0.1%;
}

/* Фоны «Нашли дешевле?» и «Что обычно спрашивают перед заказом» — поменяны местами */
#question {
  background: #f3f8fb;
}

#faq {
  background: #deeef5;
}

/* Экран «Чем мы отличаемся от конкурентов» — минималистичная таблица в стиле блока «Вопросы и ответы» */
.compare {
  padding: 88px 0;
  background: #fff;
}

.compare .container {
  max-width: 890px;
}

.compare__sub {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.5;
  color: #5b6670;
  text-align: center;
}

.compare__table {
  margin-top: 32px;
  border: 1px solid #e3ebf0;
  border-radius: 20px;
  overflow: hidden;
}

.compare__row {
  display: grid;
  grid-template-columns: 1fr 170px 130px;
  align-items: center;
  border-top: 1px solid #e3ebf0;
}

.compare__row:first-child {
  border-top: none;
}

/* чередование заливки строк */
.compare__row:nth-child(odd):not(.compare__head) {
  background: #f7fafb;
}

.compare__feature {
  padding: 18px 24px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: #1f2733;
  -webkit-font-smoothing: antialiased;
}

.compare__us,
.compare__them {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 14px 10px;
  text-align: center;
}

/* наша колонка — лёгкий тёплый оттенок поверх заливки строки */
.compare__us {
  background: rgba(248, 70, 68, .045);
}

.compare__head .compare__us,
.compare__head .compare__them {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.compare__head .compare__us {
  color: #e26554;
}

.compare__head .compare__them {
  color: #8a94a3;
}

/* галочка — спокойная: светлый кружок, красная отметка, без тени */
.compare__yes {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fde4e1;
  color: #e26554;
}

.compare__yes svg {
  width: 18px;
  height: 18px;
}

.compare__no {
  font-size: 22px;
  line-height: 1;
  color: #c3cbd4;
}

@media screen and (max-width: 767px) {
  .compare {
    padding: 56px 0;
  }

  .compare__sub {
    margin-top: 10px;
    font-size: 16px;
  }

  .compare__table {
    margin-top: 24px;
    border-radius: 16px;
  }

  .compare__row {
    grid-template-columns: 1fr 72px 92px;
  }

  .compare__feature {
    padding: 14px 14px;
    font-size: 15px;
  }

  .compare__head .compare__us,
  .compare__head .compare__them {
    font-size: 12px;
  }

  .compare__yes {
    width: 28px;
    height: 28px;
  }

  .compare__yes svg {
    width: 16px;
    height: 16px;
  }
}

/* Трекеры на мобильном — слайдер (Slick, как в отзывах): одна карточка на экран, стрелки по бокам */
@media screen and (max-width: 767px) {
  .order_tracker_price.slick-slider {
    display: block;
    margin: 28px 22px;
  }

  .order_tracker_price .slick-track {
    display: flex;
  }

  .order_tracker_price .slick-slide {
    height: auto;
    padding: 6px 6px 14px;
  }

  .order_tracker_price .slick-slide > div,
  .order_tracker_price .order_tracker_price_item {
    height: 100%;
  }

  .order_tracker_price .order_tracker_price_item {
    max-width: none;
    margin: 0;
  }

  .order_tracker_price .order_tracker_price_item:hover {
    transform: none;
  }

  .order_tracker_price .slick-arrow {
    margin-top: -25px;
  }

  .order_tracker_price .slick-arrow.prev {
    left: -26px;
  }

  .order_tracker_price .slick-arrow.next {
    right: -26px;
  }
}

/* «Вопросы и ответы» — фон как у экрана с трекерами */
#faq {
  background: #f8f9fa;
}

/* Трекеры в мобильном слайдере: картинка по центру карточки и крупнее (обёртка была 130px и прижата влево,
   картинка — квадрат 110×110 при вертикальном исходнике) */
@media screen and (max-width: 767px) {
  .order_tracker_price .img_price {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
  }

  .order_tracker_price .img_price img {
    width: auto;
    height: 190px;
    max-width: 100%;
    max-height: none;
    margin: 0 auto 20px;
    object-fit: contain;
  }
}

/* Кнопка «Заказать трекер» в карточках — как остальные кнопки сайта: красная «таблетка», Manrope, тень снизу */
.order_tracker_price_item .tracker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border: 2px solid #f84644;
  border-radius: 999px;
  background: #f84644;
  color: #fff;
  font-family: 'Manrope', 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 0 0 #c52523;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .12s ease, transform .12s ease;
}

.order_tracker_price_item .tracker-btn:hover {
  border-color: #ff5856;
  background: #ff5856;
  color: #fff;
  transform: none;
  box-shadow: 0 3px 0 0 #c52523;
}

.order_tracker_price_item .tracker-btn:active {
  border-color: #de312f;
  background: #de312f;
  transform: translate(0, 3px);
  box-shadow: none;
}

/* Заголовки-призывы («Закажите прямо сейчас», «Нашли дешевле?», «Вам подарок») — div.h2, а не h2, чтобы не засорять
   структуру заголовков для поисковиков; выглядят как h2. :where — вес как у селектора тега, классы секций перекрывают */
:where(.h2) {
  font-family: 'ProximaNovaBold', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2em;
  text-align: center;
}

#sign-up .h2 {
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  :where(.h2) {
    font-size: 25px;
  }

  #sign-up .h2 {
    margin-bottom: 28px;
  }
}

/* Названия карточек цен стали h3 (были h4) — размер прежний */
.conditions__title {
  font-size: 24px;
}

/* Контакты на мобильном: четыре иконки мессенджеров в один ряд (как на странице квиза) */
@media screen and (max-width: 576px) {
  .contacts__messengers {
    gap: 12px 4px;
  }

  .messenger {
    width: 70px;
    font-size: 13px;
  }

  .messenger._call {
    width: 84px;
  }
}