/* Первый экран ГЛАВНОЙ на телефоне.
 *
 * Замер на 390×844: hero занимал 1137px — не влезал на 293px. Состав:
 * левая колонка 559 (заголовок 102, подзаголовок 87, обещания 190, бейджи 152),
 * правая 257 (чип 47 + сфера 200), блок из трёх кнопок 198, отступы 86.
 *
 * Забираем: бейджи (они повторяют то, что написано ниже по странице),
 * часть сферы и высоту кнопок. Все три призыва к действию остаются на месте.
 *
 * Селекторы с префиксом body: файл acx-fold.css вставляется скриптом уже после
 * нашего link, и при равном !important побеждает больший вес селектора.
 */

@media (max-width: 560px) {
  body .hero { padding: 54px 0 10px !important; }
  body .hero h1 { margin-bottom: 8px !important; line-height: 1.08 !important; }
  body .hero-sub { margin-bottom: 10px !important; font-size: 14.5px !important; }
  body .promises { gap: 6px !important; margin-bottom: 10px !important; }
  body .promise { padding: 9px 12px !important; }
  body .promise b { font-size: 13.5px !important; }
  body .promise p { font-size: 12px !important; margin-top: 1px !important; }
  /* бейджи дублируют блок оплаты ниже по странице */
  body .badges { display: none !important; }
  body .hero-vis { max-width: 150px !important; }
  body .hero-right { gap: 6px !important; }
  body .chip.chip-top { margin-bottom: 4px !important; padding: 6px 13px !important; font-size: 12px !important; }
  body .float-tag { padding: 4px 9px !important; font-size: 10px !important; }
  /* три призыва к действию оставляем все, просто ниже ростом */
  body .hero-cta { gap: 7px !important; }
  body .hero-cta .btn { padding: 12px 22px !important; font-size: 14px !important; }
}

/* --- короткий телефон --- */
@media (max-width: 560px) and (max-height: 720px) {
  body .hero { padding-top: 50px !important; }
  body .hero-right { display: none !important; }
  body .promise p { display: none !important; }
}

/* --- шапка на узком телефоне: прячем последнее слово, а не режем букву --- */
@media (max-width: 420px) {
  body .brand-tail { display: none !important; }
  body .brand { overflow: visible !important; flex-shrink: 0 !important; }
}

/* --- светлая версия: свои классы первого экрана ---
 * На 375×667 hero занимал 867px. Визуал справа — 360px, на таком экране
 * он всё равно почти не читается, поэтому на коротких телефонах убираем его.
 */
@media (max-width: 560px) and (max-height: 720px) {
  body .hero-visual { display: none !important; }
  body .neuro3d-wrap { display: none !important; }
  body .hero-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  body .hero-promises { gap: 6px !important; }
  body .hero-chips { gap: 6px !important; }
}

/* --- шапка светлой версии на узком телефоне ---
 * Замер: кнопка «Начать» кончалась на 384px при ширине экрана 375 и 360 —
 * то есть уезжала за правый край. Ужимаем логотип-надпись и отступы.
 */
@media (max-width: 400px) {
  body .brand-word { max-width: 92px !important; }
  body .brand-logo { width: 34px !important; height: 34px !important; }
  body .nav-login { padding: 7px 13px !important; font-size: 12.5px !important; }
  body .nav-in { gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
}