@charset "UTF-8";

/* Мобильная версия. Собирается в /assets/css/media/media.css и подключается из scss/media.scss.
   Размеры пишем в px от макетной базы 340 — сборка переводит их в vw */

@media (max-width: 680px) {
  html,
  body {
    font-size: 4.11765vw;
  }

  .main {
    /* поля из макета: 16 при ширине 390 */
    padding: 0 4.08824vw;
  }

  /* ── шапка ── */

  .hd {
    padding-top: 4.11765vw;
    padding-bottom: 4.11765vw;
  }

  .hd_box {
    height: 11.17647vw;
  }

  .logo {
    width: auto;
  }

  .logo img {
    width: 25.29412vw;
    height: 6.17647vw;
  }

  .hd_login {
    display: none;
  }

  .bt_menu {
    width: 11.17647vw;
    height: 11.17647vw;
  }

  .menu_box {
    right: 4.70588vw;
    top: 18.23529vw;
    left: 4.70588vw;
    padding: 5.88235vw;
  }

  /* ── hero ── */

  .b1 {
    min-height: 0;
    /* высота шапки из макета: 20 + 42 */
    padding-top: 15.88235vw;
    padding-bottom: 9.41176vw;
  }

  /* по мобильному макету весь текст героя выровнен по центру */

  .b1_txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 9.11765vw;
    text-align: center;
  }

  .b1_txt h1 {
    max-width: none;
    font-size: 7.70588vw;
  }

  .b1_txt h1 br,
  .b1_descr br {
    display: none;
  }

  .b1_descr {
    max-width: none;
    margin-top: 5.11765vw;
    font-size: 4.61765vw;
  }

  .b1_btn {
    margin-top: 5.11765vw;
    gap: 3.52941vw;
    padding: 2.05882vw 2.05882vw 2.05882vw 4.70588vw;
    border-radius: 5.64706vw;
    font-size: 3.82353vw;
  }

  .btn i {
    width: 11.17647vw;
    height: 11.17647vw;
    border-radius: 3.82353vw;
  }

  .btn i::after {
    left: 3.38235vw;
    top: 3.67647vw;
    width: 4.41176vw;
    height: 3.82353vw;
  }

  /* Композиция встаёт в поток над текстом. В мобильном макете слои перекомпонованы —
     это не уменьшенная десктопная сцена, поэтому масштабировать контейнер нельзя:
     задаём каждому слою координаты из макета (система 390×315, начало — верх контейнера) */

  .b1_bg {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    order: 1;
    width: 100%;
    height: 80.76471vw;
    margin-top: 12.29412vw;
    transform: none;
  }

  .b1_bg_phone {
    left: 31.85294vw;
    top: 4.79412vw;
    width: 35.79412vw;
    height: 74.52941vw;
  }

  .b1_bg_phone img {
    /* 16.45% ширины — та же доля, что на десктопе */
    border-radius: 5.88235vw;
  }

  .b1_bg_note1 {
    left: 48.88235vw;
    top: 48.97059vw;
    width: 43.73529vw;
    height: 9.23529vw;
  }

  .b1_bg_note2 {
    left: 1.94118vw;
    top: 60.76471vw;
    width: 37.67647vw;
    height: 9.23529vw;
  }

  .b1_bg_note1 img,
  .b1_bg_note2 img {
    border-radius: 2.76471vw;
  }

  .b1_bg_apple {
    left: 3.17647vw;
    top: -4.70588vw;
    width: 18.79412vw;
    height: 20.14706vw;
  }

  .b1_bg_google {
    left: 63.38235vw;
    top: 9.20588vw;
    width: 31.17647vw;
    height: 27.23529vw;
  }

  /* стикеры в мобильном макете повёрнуты сильнее, чем на десктопе */

  .b1_bg_apple img {
    rotate: 18.02deg;
  }

  .b1_bg_google img {
    rotate: 42.29deg;
  }

  /* контур стикеров не совпадает с макетным кропом — вписываем, а не растягиваем */

  .b1_bg_apple img,
  .b1_bg_google img {
    -o-object-fit: contain;
    object-fit: contain;
  }

  .b1_bg_card {
    left: 4.70588vw;
    top: 16.55882vw;
    width: 42.88235vw;
    height: 27.88235vw;
  }

  .b1_bg_card img {
    border-radius: 2.08824vw;
  }

  .b1 .main {
    order: 2;
  }

  .b1_ticker {
    order: 3;
  }

  .b1_bg_glow {
    display: none;
  }

  /* галочки — две колонки, иконка над текстом, всё по центру */

  .b1_check {
    justify-content: center;
    align-items: flex-start;
    gap: 8.20588vw;
    margin-top: 0;
    padding-top: 10.76471vw;
    margin-bottom: 0;
  }

  .b1_check li {
    flex-direction: column;
    align-items: center;
    gap: 4.08824vw;
    /* ширина колонки из макета: 157 при 390 — иначе текст растягивается на всю строку */
    max-width: 40.26471vw;
    height: auto;
    text-align: center;
  }

  .b1_check li:first-child p,
  .b1_check li:last-child p {
    width: auto;
  }

  .b1_check p {
    font-size: 3.58824vw;
  }

  .b1_check_ico {
    width: 13.32353vw;
    height: 13.32353vw;
  }

  .b1_check_ico img {
    width: 5.11765vw;
    height: 5.11765vw;
  }

  .b1_ticker_line {
    margin-left: 4.70588vw;
  }

  /* ── блок 02 ──
     Стопка sticky остаётся как на десктопе — переопределяем только её параметры.
     Шаг стопки из макета: 358 → 338 → 318 → 298 по ширине, +48 по вертикали */

  .b2 {
    padding-top: 23.58824vw;
  }

  .b2_title {
    font-size: 7.70588vw;
    text-align: center;
  }

  .b2_cards {
    /* фактическая высота прижатой шапки на мобильном: 15 + 44 + 15 */
    --hd-h: 18.97059vw;
    /* прилипаем не вплотную к шапке, а с воздухом */
    --stack-top: calc(var(--hd-h) + 2.05882vw);
    /* карточка не выше макетных 680 и не выше экрана за вычетом шапки и воздуха снизу */
    --card-h: min(174.29412vw, calc(100vh - var(--stack-top) - 4.08824vw));
    /* Высоту берём из --kp-vh: её один раз снимает скрипт в <head> и меняет
       только при повороте экрана. Единицы вьюпорта тут не годятся — во
       встроенном браузере Telegram сворачивание шапки меняет размер webview
       по-настоящему, и vh, svh, dvh одинаково «дышат», дёргая стопку.
       Запасное значение 100svh — на случай отключённого JS.
       Через @supports, а не вторым объявлением: в пользовательском свойстве
       неизвестная единица не отбрасывается при разборе, а ломает свойство
       уже в момент применения. */
    --card-gap: 14.11765vw;
    --stack-offset: 12.29412vw;
    --stack-scale: 0.0559;
    margin-top: 12.29412vw;
    /* базовый хвост под стопку (4 × шаг) на мобильном вдвое короче */
    padding-bottom: calc(var(--cards) * var(--stack-offset) / 2);
  }

@supports (height: 100svh) {
    .b2_cards {
      --card-h: min(174.29412vw, calc(var(--kp-vh, 100svh) - var(--stack-top) - 4.08824vw));
    }
}

  .b2_card_in {
    justify-content: flex-start;
    padding: 10.76471vw 8.20588vw;
    border-radius: 8.20588vw;
    /* фон под мобильный кроп: предметы внизу, верх свободен под текст */
    background-position: center;
    background-size: cover;
  }

  /* на десктопе фон собран из трёх слоёв (фон + предметы + карта); в мобильном макете
     это один вертикальный кадр — слои прячем и ставим готовый кроп фоном */

  .b2_card_bg,
  .b2_card_obj,
  .b2_card_pay {
    display: none;
  }

  .b2_card:nth-child(1) .b2_card_in {
    background-image: url("../../../img/b2/mob-1.webp");
  }

  .b2_card:nth-child(2) .b2_card_in {
    background-image: url("../../../img/b2/mob-2.webp");
  }

  .b2_card:nth-child(3) .b2_card_in {
    background-image: url("../../../img/b2/mob-3.webp");
  }

  .b2_card:nth-child(4) .b2_card_in {
    background-image: url("../../../img/b2/mob-4.webp");
  }

  .b2_card_txt {
    text-align: center;
  }

  .b2_card_txt h3,
  .b2_card:nth-child(1) .b2_card_txt h3,
  .b2_card:nth-child(2) .b2_card_txt h3 {
    max-width: none;
    font-size: 5.64706vw;
  }

  .b2_card_txt p,
  .b2_card:nth-child(1) .b2_card_txt p,
  .b2_card:nth-child(2) .b2_card_txt p {
    max-width: none;
    margin-top: 4.08824vw;
    font-size: 4.08824vw;
  }

  .b2_card_txt h3 br,
  .b2_card_txt p br {
    display: none;
  }

  .b2_btn {
    -ms-grid-row-align: center;
    align-self: center;
    margin-top: 6.14706vw;
    gap: 3.52941vw;
    padding: 2.05882vw 2.05882vw 2.05882vw 4.70588vw;
    border-radius: 5.64706vw;
    font-size: 3.82353vw;
  }

  /* ── блок 03: тарифы ── */

  .b3 {
    padding-top: 20.5vw;
  }

  .b3_cards {
    gap: 34.35294vw;
  }

  .b3_card {
    max-width: none;
    gap: 6.14706vw;
    /* карта выступает над карточкой, поэтому сверху 112 из макета */
    padding: 28.70588vw 6.14706vw 8.20588vw;
    border-radius: 8.20588vw;
  }

  .b3_card_pic {
    top: -20.5vw;
    width: 61.52941vw;
    height: 40vw;
  }

  .b3_card_pic img {
    border-radius: 3vw;
  }

  .b3_card_head h3 {
    font-size: 5.64706vw;
  }

  .b3_card_sub {
    font-size: 3.58824vw;
  }

  /* во второй карточке подпись и иконки сервисов на десктопе идут в строку,
     в мобильном макете — друг под другом по центру */

  .b3_card_sub_row {
    flex-direction: column;
    align-items: center;
    gap: 3.08824vw;
  }

  .b3_terms {
    gap: 5.11765vw;
    padding: 6.14706vw;
    border-radius: 4.08824vw;
  }

  /* строки «Комиссия / Обслуживание» — в одну линию, как в макете */

  .b3_terms_row {
    justify-content: space-between;
    align-items: center;
    gap: 3.08824vw;
  }

  /* строка лимитов — подпись сверху, чипы столбиком под ней */

  .b3_terms_row:has(.b3_chips) {
    flex-direction: column;
    align-items: flex-start;
  }

  .b3_chips {
    flex-direction: column;
    align-items: flex-start;
    gap: 3.08824vw;
  }

  .b3_card:not(:has(.b3_rate)) .b3_features {
    margin-top: 0;
  }

  .b3_features_title {
    font-size: 4.08824vw;
  }

  .b3_features ul {
    gap: 4.61765vw;
  }

  .b3_features li {
    font-size: 4.08824vw;
  }

  .b3_price {
    gap: 3.08824vw;
  }

  .b3_price_now {
    font-size: 5.11765vw;
  }

  .b3_price_old {
    font-size: 4.08824vw;
  }

  .b3_btn {
    gap: 3.52941vw;
    padding: 2.05882vw 2.05882vw 2.05882vw 4.70588vw;
    border-radius: 5.64706vw;
    font-size: 3.82353vw;
  }

  /* ── блок 04 ──
     В мобильном макете залипающий кадр заменён слайдером: 4 карточки листаются
     свайпом, в каждой иконка, заголовок, описание и телефон под ними.
     Разметка та же — .b4_step становится слайдом, телефон переносит в активный
     слайд скрипт (см. app.js), точки пагинации он же и рисует */

  .b4 {
    height: auto;
    margin-top: 20.5vw;
  }

  .b4_sticky {
    position: static;
    display: block;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .b4_sticky > .main {
    display: block;
    height: auto;
  }

  .b4_bg {
    display: none;
  }

  .b4_grid {
    display: block;
    height: auto;
  }

  .b4_left {
    display: flex;
    align-items: center;
    padding: 0;
  }

  .b4_left h2 {
    font-size: 7.70588vw;
    text-align: center;
  }

  .b4_left h2 br {
    display: none;
  }

  /* в мобильном макете кнопка блока 04 выключена — рядом есть та же в hero и в промо */

  .b4_btn {
    display: none;
  }

  /* лента слайдов: горизонтальный скролл со снапом, без видимой полосы */

  .b4_steps {
    display: flex;
    /* базовый .b4_steps — колонка; без смены направления слайды не встают в ряд,
       а height у них игнорируется (min-height: auto по главной оси) */
    flex-direction: row;
    align-items: flex-start;
    /* центрирование в скролл-контейнере уводит первые слайды за левый край,
       и доскроллить до них уже нельзя */
    justify-content: flex-start;
    gap: 6.14706vw;
    margin-top: 12.29412vw;
    overflow-x: auto;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .b4_steps::-webkit-scrollbar {
    display: none;
  }

  .b4_step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 100%;
    gap: 5.17647vw;
    /* не выше макетных 650 и не выше того, что осталось от экрана:
       шапка 74 + заголовок 99 + отступы 48/24 + точки 10 + воздух = 275 при ширине 390 */
    height: min(166.67647vw, 100vh - 37.5vw);
    /* та же причина, что и у стопки в b2, см. комментарий у --card-h.
       Здесь тоже @supports, хотя свойство обычное: из-за var() запасное
       значение подставляется не при разборе, а при применении, и второе
       объявление не спасло бы — свойство просто обнулилось бы. */
    padding: 8.20588vw 6.14706vw;
    border-radius: 8.20588vw;
    background: var(--white-700);
    /* тень из макета: 2 2 2.63 −1 при 26% чёрного */
    box-shadow: 0.5vw 0.5vw 0.67647vw -0.9px rgba(0, 0, 0, 0.26);
    scroll-snap-align: center;
    overflow: hidden;
  }

@supports (height: 100svh) {
    .b4_step {
      height: min(166.67647vw, var(--kp-vh, 100svh) - 37.5vw);
    }
}

  /* в слайде активны все элементы разом — гасить нечего.
     flex-shrink: 0 обязателен: слайд фиксированной высоты, и без запрета
     флекс сжимает текст до нуля, лишь бы поместить телефон целиком */

  .b4_step_head,
  .b4_step_body {
    flex: 0 0 auto;
  }

  .b4_step_head {
    flex-direction: column;
    align-items: center;
    gap: 2.55882vw;
  }

  .b4_step_head img,
  .b4_step.is-active .b4_step_head img {
    width: 5.11765vw;
    height: 5.11765vw;
    margin: 0;
    opacity: 0.32;
  }

  .b4_step_head h3,
  .b4_step.is-active .b4_step_head h3 {
    font-size: 5.64706vw;
    text-align: center;
    opacity: 1;
  }

  .b4_step_head h3 br {
    display: none;
  }

  .b4_step_body,
  .b4_step.is-active .b4_step_body {
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    margin-top: 0;
    min-height: 0;
    opacity: 1;
  }

  .b4_step_body p {
    padding: 0;
    font-size: 4.08824vw;
    text-align: center;
  }

  .b4_step_body p br {
    display: none;
  }

  /* линия прогресса нужна была залипающему кадру, в слайдере её место заняли точки */

  .b4_step_line {
    display: none;
  }

  /* Телефон вынут из потока и закреплён на одной высоте во всех слайдах —
     иначе тексты разной длины сдвигают его, и при листании он прыгает.
     243.1px = 279 при ширине 390: ниже самого высокого текста шага */

  .b4_phone {
    position: absolute;
    left: 50%;
    /* 42.9% высоты слайда — как в макете; но не выше, чем кончается самый
       длинный текст шага (218.8px), иначе на низких экранах он наедет */
    top: max(64.35294vw, 42.9%);
    width: 71.79412vw;
    height: 149.47059vw;
    margin: 0;
    transform: translateX(-50%);
  }

  .b4_dots {
    display: flex;
    justify-content: center;
    gap: 3.08824vw;
    margin-top: 6.14706vw;
  }

  .b4_dots span {
    width: 2.55882vw;
    height: 2.55882vw;
    border-radius: 50%;
    background: var(--dark-700);
    opacity: 0.2;
    transition: opacity 0.3s;
    cursor: pointer;
  }

  .b4_dots span.is-active {
    opacity: 0.6;
  }

  /* ── блок 05 ──
     Карточка 358×720 со скруглением 50. Фон на мобильном свой: крафт сверху,
     стена логотипов снизу — десктопный слой прячем, кроп ставим фоном */

  .b5 {
    padding-top: 12.29412vw;
  }

  .b5_card {
    height: 184.61765vw;
    border-radius: 12.82353vw;
    background: url("../../../img/b5/mob-bg.webp") center/cover no-repeat;
  }

  .b5_card_bg {
    display: none;
  }

  .b5_content {
    width: 100%;
    height: auto;
    gap: 6.14706vw;
    padding: 8.20588vw 6.14706vw;
    text-align: center;
  }

  .b5_txt {
    gap: 6.14706vw;
  }

  .b5_txt h2 {
    font-size: 7.70588vw;
  }

  .b5_txt h2 br {
    display: none;
  }

  /* чипы переносятся по строкам и центрируются */

  .b5_tags {
    justify-content: center;
    gap: 2.05882vw;
  }

  .b5_tags li {
    gap: 2.05882vw;
    padding: 3.08824vw 3.58824vw;
    border-radius: 2.91176vw;
    font-size: 4.08824vw;
  }

  .b5_note {
    font-size: 4.08824vw;
  }

  .b5_btn {
    -ms-grid-row-align: center;
    align-self: center;
    margin-top: 0;
    gap: 3.52941vw;
    padding: 2.05882vw 2.05882vw 2.05882vw 4.70588vw;
    border-radius: 5.64706vw;
    font-size: 3.82353vw;
  }

  /* персонаж стоит на стене логотипов и свешивается за нижний край карточки */

  .b5_character {
    left: 28.70588vw;
    top: 126.14706vw;
    width: 36.14706vw;
    height: 70vw;
  }

  /* ── блок 06: отзывы ──
     Слайд уже экрана (318 из 358), поэтому виден край следующего — ширину
     задаёт fixedWidth в опциях Splide (см. app.js) */

  .b6 {
    padding-top: 12.29412vw;
  }

  .b6_title {
    font-size: 7.70588vw;
    text-align: center;
  }

  .b6_slider_wrap {
    margin-top: 12.29412vw;
  }

  .b6_slider .splide__slide img {
    height: 46.91176vw;
    border-radius: 6.14706vw;
  }

  .b6_slider_wrap .arrow {
    display: none;
  }

  .b6_slider .splide__pagination {
    margin-top: 8.20588vw;
    gap: 3.08824vw;
  }

  .b6_slider .splide__pagination__page {
    width: 2.55882vw;
    height: 2.55882vw;
  }

  /* рейтинги — две колонки по две карточки */

  .b6_rates {
    -ms-grid-columns: 1fr [2];
    grid-template-columns: repeat(2, 1fr);
    gap: 3.08824vw;
    margin-top: 13.32353vw;
  }

  .b6_rates li {
    border-radius: 6.14706vw;
  }

  .b6_rate_link {
    height: 23.32353vw;
    gap: 3.08824vw;
    padding: 6.14706vw;
  }

  .b6_rate_val {
    font-size: 6.14706vw;
  }

  .b6_rate_ico {
    height: 8.20588vw;
  }

  /* ── блок 07 ──
     Текст и список сверху, иллюстрация под ними. Слои иллюстрации в мобильном
     макете перекомпонованы, поэтому координаты задаём заново (система 358×274) */

  .b7 {
    padding-top: 12.29412vw;
  }

  /* в мобильном макете иллюстрация уходит под список */

  .b7_grid {
    display: flex;
    flex-direction: column;
    gap: 8.20588vw;
  }

  .b7_img {
    order: 2;
  }

  .b7_txt {
    order: 1;
  }

  .b7_title {
    gap: 3.08824vw;
    text-align: center;
  }

  .b7_title h2 {
    font-size: 7.70588vw;
  }

  .b7_title h2 br {
    display: none;
  }

  .b7_title p {
    font-size: 4.61765vw;
  }

  .b7_list {
    gap: 9.23529vw;
  }

  .b7_list li {
    align-items: flex-start;
    gap: 5.11765vw;
  }

  .b7_list_ico {
    width: 15.88235vw;
    height: 15.88235vw;
    border-radius: 5.11765vw;
  }

  .b7_list_ico img {
    width: 6.14706vw;
    height: 6.14706vw;
  }

  .b7_list_txt {
    gap: 1.02941vw;
  }

  .b7_list_name {
    font-size: 4.61765vw;
  }

  .b7_list_txt p:last-child,
  .b7_list li:nth-child(1) .b7_list_txt p:last-child,
  .b7_list li:nth-child(2) .b7_list_txt p:last-child,
  .b7_list li:nth-child(3) .b7_list_txt p:last-child {
    max-width: none;
    font-size: 4.08824vw;
  }

  /* иллюстрация: холст на всю ширину, слои по координатам мобильного макета */

  .b7_img {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 70.26471vw;
    transform: none;
  }

  /* на планшете слои ужимаются до 0.83 — здесь размеры заданы напрямую */

  .b7_img .b7_layer {
    scale: 1;
  }

  .b7_character {
    left: 0.9px;
    top: 0;
    width: 77.44118vw;
    height: 70.26471vw;
  }

  .b7_apple {
    left: 66.91176vw;
    top: 11.02941vw;
    width: 16.67647vw;
    height: 16.67647vw;
  }

  .b7_google {
    left: 18.47059vw;
    top: 13.58824vw;
    width: 14.08824vw;
    height: 14.08824vw;
  }

  .b7_tether {
    left: 5.38235vw;
    top: 47.44118vw;
    width: 7.44118vw;
    height: 7.94118vw;
  }

  .b7_note {
    left: 60.5vw;
    top: 37.94118vw;
    width: 31.52941vw;
    height: 22.29412vw;
  }

  /* ── блок 08: FAQ ── */

  .b8 {
    padding-top: 12.29412vw;
  }

  .b8_title {
    gap: 3.08824vw;
    text-align: center;
  }

  .b8_title h2 {
    font-size: 7.70588vw;
  }

  .b8_title p {
    font-size: 4.61765vw;
  }

  .b8_list {
    gap: 3.08824vw;
    margin-top: 12.29412vw;
  }

  .b8_item {
    border-radius: 6.14706vw;
  }

  .b8_head {
    padding: 6.14706vw;
  }

  .b8_q {
    font-size: 4.61765vw;
  }

  .b8_toggle {
    width: 10.76471vw;
    height: 10.76471vw;
    border-radius: 3.58824vw;
  }

  .b8_body p {
    padding: 0 6.14706vw 6.14706vw;
    font-size: 4.08824vw;
  }

  /* ── футер ──
     Всё в колонку по центру: логотип, кнопки, соцсети, линия, ссылки.
     Размеры из макета: карточка r24 pad 32/24, кнопки 42 высотой r12 с обводкой */

  .ft {
    padding-top: 12.29412vw;
    padding-bottom: 6.14706vw;
  }

  .ft_card {
    gap: 7.17647vw;
    padding: 8.20588vw 6.14706vw;
    border-radius: 6.14706vw;
  }

  .ft_top {
    flex-direction: column;
    align-items: center;
    gap: 6.14706vw;
  }

  .ft_logo {
    order: 1;
    width: 27.70588vw;
    height: 10.76471vw;
    padding: 2.05882vw 3.08824vw;
    border-radius: 3.08824vw;
  }

  .ft_logo img {
    width: 21.52941vw;
    height: 5.11765vw;
  }

  .ft_actions {
    order: 2;
    flex-direction: column;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    gap: 2.05882vw;
  }

  .ft_btn {
    justify-content: center;
    /* кнопки во всю ширину карточки, как в макете */
    width: 100%;
    gap: 2.55882vw;
    height: 10.76471vw;
    padding: 0 5.11765vw;
    border-radius: 3.08824vw;
    font-size: 3.58824vw;
  }

  .ft_btn img {
    width: 3.08824vw;
    height: 3.08824vw;
  }

  .ft_soc {
    order: 3;
    flex-wrap: wrap;
    justify-content: center;
    /* шаг между иконками из макета: 53 при 390 */
    gap: 0;
    justify-content: space-between;
    width: 100%;
  }

  .ft_soc_it {
    width: 10.76471vw;
    height: 10.76471vw;
    border-radius: 3.08824vw;
  }

  .ft_bottom {
    flex-direction: column;
    align-items: center;
    gap: 6.14706vw;
    font-size: 3.58824vw;
    text-align: center;
  }

  .ft_docs {
    flex-direction: column;
    align-items: center;
    gap: 4.08824vw;
  }

  .ft_nav {
    justify-content: center;
    gap: 7.17647vw;
  }

  .ft_license {
    font-size: 3.23529vw;
    text-align: center;
  }

  /* ── плашка cookie ── */

  .notification {
    right: 3.52941vw;
    left: 3.52941vw;
    bottom: 3.52941vw;
    flex-direction: column;
    align-items: stretch;
    gap: 3.52941vw;
    width: auto;
    padding: 4.11765vw;
  }

  .notification__close {
    height: 11.17647vw;
  }

  /* ── документные страницы ── */

  .doc {
    padding-top: 26.47059vw;
    padding-bottom: 11.76471vw;
  }

  .doc--plain {
    padding-top: 11.76471vw;
  }

  .doc_body ul {
    padding-left: 5.88235vw;
  }

  .doc_body li {
    font-size: 4.11765vw;
  }

  .doc h1 {
    font-size: 8.23529vw;
  }

  .doc_body {
    margin-top: 5.88235vw;
  }

  .doc_body h2 {
    margin-top: 8.23529vw;
    font-size: 5.58824vw;
  }

  .doc_body p {
    font-size: 4.11765vw;
  }

  .b6_rate_name {
    white-space: nowrap;
  }

  .hd.scrolled {
    padding: 2vw 0;
  }
}