/* ═══════════════════════════════════════════════════════════
   RocketCDN · посадка сайта на реальные устройства

   Заказчик смотрит сайт с Android и из встроенного браузера
   Телеграма. Это самая жёсткая среда, какая у нас есть: узкий
   экран, толстые пальцы, вырез сверху, полоса жеста снизу,
   движок WebView на пару лет старше настольного Chrome и сеть,
   которая любит доставить один файл и потерять другой.

   Здесь не меняется ни вёрстка, ни ритм, ни палитра - этим
   заняты rc.css и rc-compact.css. Здесь страница только
   подгоняется под железо:

     0. безопасные зоны и высота экрана одним именем;
     1. шапка на 360-412 пикселях;
     2. вырез, скруглённые углы, полоса жеста;
     3. палец: ни одна цель нажатия не меньше 44×44;
     4. липкая нижняя панель с заявкой;
     5. горизонтальные ленты под свайп;
     6. планшет;
     7. ландшафт телефона;
     8. подстраховки под Android-браузеры и WebView;
     9. запрет перелива по горизонтали.

   Файл подключается ПОСЛЕДНИМ, после rc.css, rc-interior.css,
   rc-reduced.css и rc-compact.css: он правит их значения, а не
   вводит свои. Своих цветов, шрифтов и теней здесь нет.

   Главное правило: увеличиваем зону нажатия, а не размер
   элемента. Заказчик жаловался на длину страницы - раздувать
   кнопки ради пальца значит вернуть эту длину. Поэтому почти
   везде цель растёт невидимым прямоугольником поверх элемента,
   а сам элемент остаётся ровно таким, каким его нарисовали.

   И второе: ни одно правило здесь не полагается на то, что
   свойство поддерживается. Всё, что моложе Android 12, стоит
   парой «сначала старое, потом новое» или закрыто @supports.
   ═══════════════════════════════════════════════════════════ */


/* ═══ 0. ИМЕНА ДЛЯ ЖЕЛЕЗА ════════════════════════════════════
   env() понимают не все движки, поэтому каждое обращение идёт
   через var(...,0px): если переменная не собралась, элемент
   получит ноль и ничего не сломается. */

:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* Высота липкой нижней панели. Ноль, пока панели нет: класс
     has-mcta на body включает её одной строкой в разметке. */
  --mcta-h: 0px;
}

/* Высота экрана. Единица svh появилась в 2022-м: где её нет,
   второе объявление отбрасывается целиком и остаётся vh - экран
   выходит чуть выше из-за адресной строки, но блок не
   схлопывается в нулевую высоту и страница не рассыпается.
   Стоит в начале файла, чтобы разделы 6 и 7 могли эти значения
   переопределять. */
body { min-height: 100vh; min-height: 100svh; }
.hero { min-height: 100vh; min-height: 100svh; }
.hs-stage { height: 100vh; height: 100svh; }
@media (max-width: 640px) { .hero { min-height: 0; } }
@media (max-width: 900px) { .hs-stage { height: auto; } }


/* ═══ 1. ШАПКА НА УЗКОМ ЭКРАНЕ ═══════════════════════════════
   На 360 в шапке живут логотип, кнопка «Регистрация» и бургер.
   Втроём они занимают 338 пикселей из 360 - зазора почти нет, и
   любое удлинение подписи (английский, крупный системный шрифт
   в настройках Android, вырез слева в ландшафте) выталкивает
   бургер за край экрана.

   Поэтому: строке разрешено ужиматься, логотипу - обрезаться,
   кнопке - терять горизонтальные отступы. Бургер не ужимается
   никогда: это единственный вход в меню. */

.hdr-in {
  padding-left: calc(var(--pad) + var(--safe-l, 0px));
  padding-right: calc(var(--pad) + var(--safe-r, 0px));
}

@media (max-width: 900px) {
  /* Ни один элемент шапки не имеет права распирать строку */
  .hdr-in > * { min-width: 0; }
  .hdr-act { gap: 7px; }
  .logo { overflow: hidden; }
}

@media (max-width: 412px) {
  .hdr-in { height: 58px; gap: 8px; }
  .logo img { height: 26px; }
  /* Кнопка сжимается по содержимому, но подпись не переносится
     на вторую строку */
  .hdr-act .btn-sm { padding: 0 13px; font-size: 13.5px; white-space: nowrap; }
}

@media (max-width: 359px) {
  /* Совсем узкие аппараты и режим крупного системного шрифта:
     логотип отдаёт место кнопке, знак остаётся читаемым */
  .logo img { height: 23px; }
  .hdr-act .btn-sm { padding: 0 11px; font-size: 13px; }
}

/* Якорная прокрутка: заголовок раздела не должен уезжать под
   шапку. На телефоне шапка ниже настольной, зато к ней
   добавляется вырез. */
@media (max-width: 900px) {
  html { scroll-padding-top: calc(74px + var(--safe-t, 0px)); }
}


/* ═══ 2. ВЫРЕЗ, УГЛЫ И ПОЛОСА ЖЕСТА ══════════════════════════
   viewport-fit=cover в разметке уже стоит, значит страница
   рисуется под вырезом и под полосой жеста. Дальше наша забота:
   ни одна буква и ни одна кнопка не должны попасть в эти зоны.

   Главный случай - телефон в ландшафте: вырез уходит вбок и
   съедает до 48 пикселей слева или справа. Вертикальный отступ
   контейнера от этого не спасает, нужен горизонтальный. */

.wrap {
  padding-left: calc(var(--pad) + var(--safe-l, 0px));
  padding-right: calc(var(--pad) + var(--safe-r, 0px));
}

/* Выдвижное меню, модалка и кнопка «наверх» стоят вне потока,
   поэтому безопасные зоны им прописываются отдельно */
.drawer {
  padding-left: calc(var(--pad) + var(--safe-l, 0px));
  padding-right: calc(var(--pad) + var(--safe-r, 0px));
  padding-bottom: calc(34px + var(--safe-b, 0px));
  overscroll-behavior: contain;
}
/* Меню - колонка на flex, и при переполнении оно ужимало кнопку
   «Зарегистрироваться» до 31 пикселя высотой: попасть по такой
   невозможно. Запрещаем сжатие, лишнее уводим в прокрутку. */
.drawer > * { flex: none; }

.modal {
  padding: calc(var(--pad) + var(--safe-t, 0px))
           calc(var(--pad) + var(--safe-r, 0px))
           calc(var(--pad) + var(--safe-b, 0px))
           calc(var(--pad) + var(--safe-l, 0px));
}
.modal-box { overscroll-behavior: contain; }

.totop {
  right: calc(16px + var(--safe-r, 0px));
  bottom: calc(16px + var(--safe-b, 0px) + var(--mcta-h));
}


/* ═══ 3. ПАЛЕЦ: 44×44 ════════════════════════════════════════
   Ниже 44 пикселей человек начинает промахиваться, и промах по
   ссылке в правовой строке обиднее промаха по чему угодно
   другому: страница уезжает не туда, и он уходит.

   Цель нажатия растим прозрачным прямоугольником поверх
   элемента. Высота строки, плотность блока и длина страницы при
   этом не меняются ни на пиксель - меняется только то, куда
   попадает палец. Правило включается на сенсорных экранах
   (pointer: coarse); под мышью всё и так попадается. */

@media (pointer: coarse) {

  /* Общий приём: невидимая накладка ростом в 44 пикселя */
  .legal a,
  .contact-list a { position: relative; }

  .legal a::after,
  .contact-list a::after {
    content: '';
    position: absolute;
    left: -6px; right: -6px;
    top: 50%; height: 44px; transform: translateY(-50%);
  }

  /* Логотипу накладка не годится: разделом выше ему поставлен
     overflow: hidden, чтобы длинная подпись не распирала шапку, и
     этот же overflow срезает накладку по краю картинки - палец
     ловил 26 пикселей вместо 44. Проверено обстрелом точками:
     настоящая высота цели совпадала с высотой картинки.
     Поэтому здесь честная высота. Шапка от неё не растёт: строка
     и так 58 пикселей на самом узком экране и 70 на настольном. */
  .logo { min-height: 44px; }

  /* Накладки не должны перекрывать друг друга: в правовой
     строке ссылки идут в две-три строки через восемь пикселей,
     и соседние прямоугольники наезжали бы один на другой.
     Разводим строки ровно настолько, чтобы они не спорили. */
  .legal { gap: 22px 20px; }
  .contact-list { gap: 16px; }

  /* Бургер и круглые кнопки-иконки: у них нет подписи, промах
     по ним - тупик, поэтому растим сам элемент */
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn svg { width: 19px; height: 19px; }

  /* Кнопка в шапке: нажимают её чаще всего на странице */
  .hdr-act .btn-sm { min-height: 44px; }

  /* Вкладки регионов остаются компактными на вид, но ловят
     палец с запасом сверху и снизу */
  .reg-tabs button { position: relative; }
  .reg-tabs button::after {
    content: '';
    position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }

  /* Строка города и строка вопроса: обе открываются нажатием и
     стоят вплотную друг к другу, поэтому им честная высота, а
     не накладка - накладки соседних строк перекрывались бы */
  .node-row { min-height: 44px; }
  .faq-q { min-height: 46px; }

  /* Пункты выдвижного меню */
  .drawer a { min-height: 50px; }
  .drawer .btn { min-height: 50px; }
  .pill.wide button { height: 46px; }

  /* Флажок согласия. Квадратику 22 пикселя не дотянуть до 44 -
     у поля ввода нет псевдоэлементов, накладку туда не поставить.
     Зато вся подпись лежит внутри label и переключает флажок,
     поэтому настоящая цель здесь - строка целиком, ей и даём
     высоту. Ссылка на политику внутри той же строки - отдельная
     цель, ей нужна своя накладка, иначе палец по ней всегда
     будет попадать в согласие. */
  .consent input { width: 22px; height: 22px; }
  .consent { padding: 6px 0; min-height: 44px; }
  .consent a { position: relative; }
  .consent a::after {
    content: '';
    position: absolute; left: -6px; right: -6px;
    top: 50%; height: 44px; transform: translateY(-50%);
  }

  /* Кнопки форм и крупные кнопки-ссылки */
  .btn { min-height: 46px; }
  .totop { width: 48px; height: 48px; }
}


/* ═══ 4. ЛИПКАЯ НИЖНЯЯ ПАНЕЛЬ ════════════════════════════════
   По сценарию кнопка заявки дублируется внизу экрана на всём
   протяжении страницы: человек может решиться на любом блоке, и
   искать форму прокруткой он не пойдёт.

   Панель появляется только на телефоне и только на сенсорном
   экране. Разметка - в index.html (фрагмент отдан
   координатору), класс mcta, и вместе с ней на body ставится
   has-mcta. Пока разметки нет, весь раздел ничего не делает.

   Ни одного :has() здесь нет намеренно: в WebView Телеграма на
   старых Android его может не быть, а от него зависит, не
   перекроет ли панель последнюю строку страницы. */

.mcta {
  position: fixed; z-index: 190;
  left: 0; right: 0; bottom: 0;
  display: none;
  gap: 10px;
  padding: 10px calc(var(--pad) + var(--safe-r, 0px))
           calc(10px + var(--safe-b, 0px))
           calc(var(--pad) + var(--safe-l, 0px));
  background: var(--head-bg);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  /* Панель уезжает вниз, пока человек не прочитал первый экран,
     и возвращается после него: класс on ставит скрипт прокрутки */
  transform: translateY(110%);
  transition: transform .38s var(--ease);
}
.mcta.on { transform: none; }
/* Кнопки делят ширину поровну. Подпись не режется и не уезжает
   за край даже по-английски, где она длиннее: кегль плавает по
   ширине экрана, а длинная подпись переносится на вторую строку
   с плотным межстрочным - панель от этого растёт вверх, а не
   наезжает на содержимое. */
.mcta .btn {
  flex: 1 1 0; min-width: 0; min-height: 46px;
  padding: 10px 12px; text-align: center;
  font-size: clamp(13px, 3.4vw, 15px); line-height: 1.16;
  white-space: normal;
}
.mcta .btn > span { display: block; min-width: 0; }

@media (max-width: 900px) and (pointer: coarse) {
  .mcta { display: flex; }
  /* Ровно на высоту панели поднимается низ страницы, чтобы
     правовая строка не оказалась под ней. Семьдесят два - это
     десять отступа сверху, сорок шесть кнопки, десять снизу,
     пиксель рамки и запас на округление кегля. */
  .has-mcta { --mcta-h: calc(76px + var(--safe-b, 0px)); }
  .has-mcta main { padding-bottom: var(--mcta-h); }
}

/* Пока открыто меню или окно обратного звонка, панель мешает:
   она перекрывает кнопку отправки и последний пункт меню.
   Соседский комбинатор работает потому, что в разметке панель
   стоит после #drawer и после #cbModal. */
.drawer.on ~ .mcta,
.modal.on ~ .mcta { transform: translateY(110%); }

/* В ландшафте телефона панель забирает пятую часть экрана -
   отказываемся от неё совсем */
@media (max-height: 520px) and (orientation: landscape) {
  .mcta { display: none; }
  .has-mcta { --mcta-h: 0px; }
  .has-mcta main { padding-bottom: 0; }
}


/* ═══ 5. ГОРИЗОНТАЛЬНЫЕ ЛЕНТЫ ════════════════════════════════
   Маршрут запроса и двенадцать сценариев на телефоне листаются
   пальцем вбок. Три вещи ломают этот жест на Android:

   - свайп добегает до края ленты и уходит в системный жест
     «назад», страница закрывается посреди чтения;
   - снап по центру не даёт доехать до первой и последней
     карточки: у ленты есть боковой отступ, и центр крайней
     карточки физически не совпадает с центром окна;
   - до конца ленты не докрутить, последняя карточка упирается
     в правый край и выглядит обрезанной.

   Первое лечится overscroll-behavior, второе - снапом по
   началу и полем прокрутки, третье - распоркой в хвосте.
   touch-action не трогаем нигде: вертикальная прокрутка должна
   остаться нативной, это условие приёмки. */

@media (max-width: 900px) {
  .hs-view {
    overscroll-behavior-x: contain;
    scroll-padding-left: calc(var(--pad) + var(--safe-l, 0px));
    scroll-padding-right: calc(var(--pad) + var(--safe-r, 0px));
  }
  .hs-track {
    padding-left: calc(var(--pad) + var(--safe-l, 0px));
    padding-right: calc(var(--pad) + var(--safe-r, 0px));
  }
  .hs-track > * { scroll-snap-align: start; }
  /* Распорка в хвосте ленты: без неё последняя карточка не
     доезжает до левого края и лента ощущается сломанной */
  .hs-track::after {
    content: ''; flex: none; width: 26vw;
  }
}

/* Бегущая строка городов: на слабом Android её анимация даёт
   пропуски кадров - дорожка длиной в тридцать семь тысяч
   пикселей перекладывается каждый кадр. Замедляем ход. */
@media (max-width: 640px) {
  .mq-track { animation-duration: 190s; }
}

/* Список городов прокручивается внутри карточки. Без этих строк
   палец, докрутивший список до низа, продолжает крутить
   страницу, и человек теряет место, где читал. */
.node-list {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* ═══ 6. ПЛАНШЕТ ═════════════════════════════════════════════
   768×1024 попадает в мобильные правила по ширине, но экран у
   него вдвое шире телефона. Карточки, сжатые под палец на 360,
   выглядят на нём потерянными, а половина ширины пустует. */

@media (min-width: 601px) and (max-width: 900px) {
  /* Лента: карточка в 68vw - это 522 пикселя, во весь экран.
     Показываем две с половиной, и лента читается как лента */
  .hs-track > * { width: 40vw; }
  .hs-track::after { width: 18vw; }

  /* Показатели: четыре в ряд помещаются, два на два оставляли
     половину экрана пустой */
  .kpi { grid-template-columns: repeat(4, 1fr); }

  /* Три собственных ЦОД встают в ряд, как на настольном */
  .dc-grid { grid-template-columns: repeat(3, 1fr); }
  .dc-grid > .dc:last-child:nth-child(3) { grid-column: auto; }
}

@media (min-width: 601px) and (max-width: 1023px) {
  /* Карту ужали до 268 пикселей заодно с телефоном - здесь ей
     есть куда развернуться */
  .map-wrap { max-width: 400px; }

  /* Форма стоит в колонку, но тянуться во всю ширину планшета
     ей незачем: поле ввода длиной в семьсот пикселей неудобно */
  .form-card { max-width: 620px; }
}

/* Планшет в ландшафте (1024×768) получает настольную раскладку
   по ширине, но пальцем по нему водят так же. Правила пальца из
   раздела 3 завязаны на pointer: coarse и работают и здесь. */


/* ═══ 7. ЛАНДШАФТ ТЕЛЕФОНА ═══════════════════════════════════
   844×390. Высота меньше, чем ширина иного телефона в портрете:
   на экран влезает четыре строки текста. Всё, что рассчитано на
   высоту экрана (первый экран, липкие сцены, меню, модалка),
   надо пересчитать, иначе человек видит один заголовок и не
   понимает, куда попал. */

@media (max-height: 520px) and (orientation: landscape) {

  /* Первый экран перестаёт быть «в рост экрана»: содержимое
     важнее композиции, пусть занимает столько, сколько нужно */
  .hero { min-height: 0; padding: 74px 0 26px; }
  .hero-logo img { width: clamp(96px, 16vw, 132px); }
  .hero h1 { font-size: clamp(26px, 4.6vw, 38px); }
  .hero-sub { font-size: 14px; margin-bottom: 14px; }
  /* Планета в ландшафте налезает на текст справа - приглушаем.
     Сцена с ракетой на фоне при этом остаётся. */
  .hero-globe { opacity: .32; }
  .scroll-hint { display: none; }

  /* Кнопки встают в строку: во всю ширину они съедали бы
     половину видимой высоты */
  .btn-row .btn { flex: 0 1 auto; width: auto; }

  /* Липкие сцены на 390 пикселях высоты не работают: карточка
     не помещается целиком. Лента листается пальцем. */
  .hs-stage { position: static; height: auto; padding: var(--sec) 0; }
  .hs-track { transform: none !important; }
  .hs-track > * { width: 38vw; }
  .hs-bar { display: none; }

  /* Меню: семь пунктов по пятьдесят пикселей в 390 не влезают,
     и кнопка «Зарегистрироваться» оказывалась ниже экрана - её
     не видно, а именно она здесь главная. Разворачиваем пункты
     в две колонки, кнопку и инструменты кладём во всю ширину:
     меню собирается в один экран. */
  .drawer {
    display: grid; grid-template-columns: 1fr 1fr;
    align-content: start; gap: 4px 16px;
    padding-top: calc(62px + var(--safe-t, 0px));
  }
  .drawer a:not(.btn) { min-height: 38px; padding: 5px 4px; font-size: 15.5px; }
  .drawer .btn { grid-column: 1 / -1; margin-top: 8px; min-height: 44px; }
  .drawer-tools {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .drawer-tools .pill.snd { grid-column: 1 / -1; }
  .pill.wide button { height: 38px; }

  /* Окно обратного звонка прокручивается внутри себя, а не
     уезжает за край экрана */
  .modal-box { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }

  /* Высокие блоки, посчитанные от ширины экрана: в ландшафте
     ширина большая, и они вырастают выше самого экрана */
  .rack { height: clamp(180px, 30vh, 240px); min-height: 0; }
  .map-wrap { max-width: min(300px, 62vh); }
  .node-list { max-height: 168px; }
}


/* ═══ 8. ANDROID-БРАУЗЕРЫ И ВСТРОЕННЫЙ БРАУЗЕР ТЕЛЕГРАМА ═════
   Движок в приложении отстаёт от настольного Chrome, и каждое
   современное свойство надо подпирать простым. Ни одна из
   подстраховок ниже не меняет вид страницы там, где всё
   поддерживается. */

/* Размытие за шапкой. Без него полупрозрачный фон превращается
   в окно, сквозь которое едет содержимое страницы, и подписи в
   шапке становятся нечитаемыми - ровно то, на что жаловался
   заказчик, когда текст «вылез поверх страницы». */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .hdr { background: var(--bg); }
  .mcta { background: var(--bg); }
  .modal { background: rgba(3, 8, 14, .93); }
  .chip { backdrop-filter: none; }
  .sec-head::before, .hero-in::before, .hs-head::before { background: var(--read-veil-2); }
}

/* Приближение при фокусе. Ниже 16 пикселей Safari и часть
   Android-оболочек увеличивают страницу, когда человек ставит
   курсор в поле, и обратно её уже не уменьшают. */
@media (pointer: coarse) {
  .field input, .field textarea, .field select,
  .search input { font-size: 16px; }
}

/* Инерция прокрутки внутри блоков со своим окном */
.modal-box, .drawer, .hs-view { -webkit-overflow-scrolling: touch; }

/* Тап-подсветка и меню по долгому нажатию: в WebView они
   рисуются поверх наших состояний и выглядят как дефект */
.btn, .icon-btn, .pill button, .reg-tabs button,
.faq-q, .node-row, .mcta .btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Курсорные затеи не нужны там, где нет курсора: это и лишние
   слои композитинга, и лишний расход заряда */
@media (hover: none) {
  .cur-dot, .cur-ring { display: none; }
  .card::before { display: none; }
}

/* Режим экономии трафика человек включает сам, и означает он
   одно: покажи содержимое, а не представление */
@media (prefers-reduced-data: reduce) {
  .hero-globe, #spaceBg, #rocketCanvas { display: none; }
  .mq-track { animation: none; }
}


/* ═══ 9. НИКАКОГО ПЕРЕЛИВА ПО ГОРИЗОНТАЛИ ════════════════════
   Страницу, которую можно сдвинуть вбок, человек считает
   сломанной - и он прав. У html уже стоит overflow-x: clip, но
   клип прячет следствие, а не причину: под ним карточка
   по-прежнему шире экрана, просто её край не виден, а текст в
   ней обрезан. Ниже - сами причины, какие встречаются на 360. */

/* Длинное слово без пробелов (адрес почты, домен, название
   тарифа) распирает свою колонку и тянет за собой всю сетку */
h1, h2, h3, h4, p, li,
.kpi-n, .node-row .nm, .legal, .chip, .inc-item {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Заголовок переносить по слогам некрасиво, но красивее, чем
   заголовок, уехавший за край экрана */
@media (max-width: 412px) {
  .sec-h, .hero h1 { hyphens: auto; -webkit-hyphens: auto; }
}

/* Ячейка грид-сетки по умолчанию не уже своего содержимого.
   Из-за этого одна широкая карточка расширяет всю сетку, а
   сетка - страницу. */
.grid > *, .kpi > *, .contact > *, .infra > *,
.form-2 > *, .dc-grid > *, .viz-grid > *, .inc-grid > * { min-width: 0; }

/* Внутренности виджетов считаются от ширины родителя, а не от
   ширины экрана */
.viz-card, .form-card, .faq, .node-list { min-width: 0; }

/* Имя и телефон стоят в анкете парой ради плотности. На 360
   пикселях каждому полю достаётся 145, и набранный номер
   «+7 900 000-00-00» перестаёт помещаться целиком: человек
   набирает вслепую. Ниже 380 разводим пару в столбик - это
   единственное место, где плотность проигрывает делу. */
@media (max-width: 379px) {
  .form-2 { grid-template-columns: 1fr; }
}

/* Всё, что нарисовано в canvas, обязано жить в своей коробке */
canvas { max-width: 100%; }


/* ── Правки приёмки (аудит игры) ─────────────────────────────ы */
@media (max-width: 760px) {
  /* Контакты: подпись и ссылки-документы после формы, а не перед ней.
     Левая колонка распускается, и каждый её блок получает своё место
     в общем столбце. */
  .contact { display: flex; flex-direction: column; }
  .contact > .rv:first-child { display: contents; }
  .contact .legal { order: 99; margin-top: 26px; }
  .contact .form-card { order: 50; }

  /* Кнопка «наверх» не должна лежать на полях формы */
  .totop { width: 40px; height: 40px; }
}
/* Вторая подсказка прокрутки у героя: чип «Листайте дальше» уже
   есть, двойной призыв - шум. Оставляем анимированную стрелку
   только на широких экранах, где она не липнет к кнопкам. */
@media (max-width: 1100px) {
  .hero .scroll-hint { display: none; }
}