/* Мобильные кадры макета, ширина 390.
   Подключается последним, поэтому переопределяет всё выше по каскаду.

   Общий строй телефонной версии: поля секции 40 сверху и снизу, 20 по бокам,
   колонка контента 350, зазор блока 20, зазор заголовка 6.
   Заголовок секции 28/800 с интерлиньяжем 30.8 и трекингом −0.7,
   подзаголовок 15/500 с интерлиньяжем 22.5.

   Узлы: 26:21 первый экран, 48:29 риелтор, 200:205 банки, 68:29 истории,
   34:25 индекс, 201:205 калькулятор, 285:2000 подборки, 93:113 отзывы,
   151:207 квиз, 153:230 оставить отзыв, 201:241 программы, 202:217 шаги,
   202:244 вопросы, 200:225 финал, 256:1015 подвал. */

@media (max-width: 760px) {

  /* H1 из кадра 26:36: кегль 32, интерлиньяж 34.56, трекинг −0.64.
     Доли (1.05 и −0.025em) давали 33.6 и −0.8 — мимо макета. */
  .hero__h1 { font-size: 32px; line-height: 34.56px; letter-spacing: -0.64px; }

  /* Заголовок колонки подвала на телефоне мельче: 10/600, трекинг 0.8. */
  .ftr__h { font-size: 10px; line-height: 13.66px; letter-spacing: 0.8px; }

  /* Шапка на телефоне 68 высотой — якорь отступает на неё же плюс зазор. */
  :target,
  section[id] { scroll-margin-top: calc(var(--hdr-h) + 10px); }

  /* Поля ровно 20, как в макете. clamp(20px, 6.25vw, 120px) на ширине 390
     даёт 24.4 — колонка контента выходила 322 вместо 350, и каждая карточка
     оказывалась на 29 px уже макета. */
  :root { --side: 20px; --hdr-h: 68px; }

  /* ─── Банки (200:205) ───────────────────────────────────────────────────
     Секция 123 высотой, поля 24/20, зазор 12. Плитки 112×48 идут ЛЕНТОЙ
     с прокруткой: в макете строка логотипов шириной 952 при экране 390. */
  .banks__in { padding: 24px var(--side); gap: 12px; }
  .banks__cap { font-size: 11px; line-height: 15.03px; letter-spacing: normal; }
  .banks__row {
    gap: 8px; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--side) * -1); padding: 0 var(--side);
  }
  .banks__row::-webkit-scrollbar { display: none; }
  /* 🔴 Плитка 100, а не 112 из макета (200:209), — ради четвёртой.

     Считается так: поле 20 + три плитки с зазором 8. При 112 четвёртая
     начинается на 380-й точке экрана 390 и выглядывает на 10 — белая полоска
     на светлом фоне, которой не видно. Выходит «банков ровно три», и ленту
     никто не листает. При 100 она начинается на 344-й и показывает 46: край
     читается как продолжение, и палец тянет её влево.

     Логотипы 120 в ширину и так ужимались (места было 92, стало 84) —
     срабатывает общее правило img max-width из main.css. */
  .banks__item { flex: 0 0 100px; width: 100px; max-width: none; height: 48px; padding: 6px 8px; }

  /* ─── Истории (68:29) ───────────────────────────────────────────────────
     Секция 250, поля 40/0/40/20. Карточка 148×170, внутренняя 142×164,
     радиусы 17 и 14, поля 12, подпись 14/600 с интерлиньяжем 18.2. */
  .st__in { padding: 40px 0 40px var(--side); }
  .st__row { gap: 12px; padding-right: var(--side); }
  .st__item { flex: 0 0 148px; }
  .st__ring { border-radius: 17px; }
  .st__card { height: 164px; padding: 12px; border-radius: 14px; }
  .st__label { font-size: 14px; line-height: 18.2px; }
  /* Крыша 92×46, толщина 10. */
  .st__roof { top: -12px; margin-left: -46px; }
  .st__roof svg { width: 92px; height: 46px; }
  .st__roof path { stroke-width: 10; }
  .st__data { padding: 0 var(--side) 32px; }

  /* ─── Индекс новостроек (34:25) ─────────────────────────────────────────
     Полоса 350 с полями 16/16/74/16 и зазором 16. Метрики идут в столбик
     строками 318×59: слева подпись и пояснение, справа значение. */
  .idx__wrap { padding: 20px var(--side); }
  .idx__band { padding: 16px 16px 74px; gap: 16px; }
  .idx__head { gap: 12px; }
  .idx__title { gap: 4px; }
  .idx__h { font-size: 20px; line-height: 27.32px; letter-spacing: normal; }
  .idx__sub { font-size: 13px; line-height: 17.76px; }
  .idx__metrics { grid-template-columns: 1fr; gap: 8px; }
  .idx__m {
    padding: 12px; min-height: 59px;
    /* Зазор только между колонками. По вертикали подпись и пояснение идут
       вплотную (в макете зазор 1), иначе строка вырастает с 59 до 70. */
    column-gap: 12px; row-gap: 1px;
  }
  /* Подпись и пояснение — одной колонкой слева, значение справа. */
  .idx__l { order: 1; font-size: 13px; line-height: 17.76px; }
  .idx__n { order: 2; font-size: 12px; line-height: 16.39px; }
  .idx__v { order: 3; margin-left: auto; font-size: 24px; line-height: 32.78px; letter-spacing: -0.48px; }
  .idx__m { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l v" "n v"; }
  .idx__l { grid-area: l; }
  .idx__n { grid-area: n; }
  .idx__v { grid-area: v; align-self: center; }
  .idx__skyline { height: 74px; }

  /* ─── Калькулятор (201:205) ─────────────────────────────────────────────
     Поля 40/20, зазор 20; вкладки 9/14 и 14/600; поля ввода в столбик
     с зазором 10; результат 350×216 с полями 20 и зазором 8. */
  .mort__in { padding: 40px var(--side); gap: 20px; }
  .mort__head { gap: 6px; }
  .mort__h { font-size: 28px; line-height: 30.8px; letter-spacing: -0.7px; }
  .mort__sub { font-size: 15px; line-height: 22.5px; }
  .mort__calc { padding: 0; box-shadow: none; gap: 20px; }
  .mort__progs { gap: 8px; }
  .mort__prog span { padding: 9px 14px; font-size: 14px; line-height: 19.12px; }
  .mort__fields { grid-template-columns: 1fr; gap: 10px; }
  .mort__res { padding: 20px; gap: 8px; }
  .mort__cap { font-size: 11px; line-height: 15.03px; }
  .mort__sum { font-size: 40px; line-height: 54.64px; letter-spacing: -1px; }
  /* Строки «вместо N ₽ одной суммой» в мобильном кадре нет: на узком экране
     она уводит взгляд от самого платежа. Условия расчёта при этом остаются
     на месте — без них цифру платежа показывать нельзя (§10). */
  .mort__alt { display: none; }
  .mort__terms { font-size: 11px; line-height: 15.95px; }
  .mort__cta { padding: 15px 0; font-size: 15px; }

  /* ─── Подборки (285:2000) ───────────────────────────────────────────────
     Поля 28/20, зазор 16; карточки в столбик с зазором 10.
     Заголовок 22/800, подзаголовок 14/500. */
  .coll__in { padding: 28px var(--side); gap: 16px; }
  .coll__head { gap: 6px; }
  .coll__h { font-size: 22px; line-height: 30.05px; letter-spacing: normal; }
  .coll__sub { font-size: 14px; line-height: 19.12px; }
  .coll__grid { grid-template-columns: 1fr; gap: 10px; }

  /* ─── Квиз (151:207) ────────────────────────────────────────────────────
     Поля 40/20, зазор 24; текст с зазором 12, заголовок 28/800 (30.24),
     подзаголовок 14/500 (21.7), факты с зазором 24 и значением 20/800. */
  .qz__in { padding: 40px var(--side); gap: 24px; }
  .qz__text { gap: 12px; }
  .qz__h { font-size: 28px; line-height: 30.24px; letter-spacing: -0.7px; }
  .qz__sub { font-size: 14px; line-height: 21.7px; }
  .qz__facts { gap: 24px; }
  .qz__fact b { font-size: 20px; line-height: 27.32px; letter-spacing: -0.4px; }
  .qz__fact i { font-size: 11px; line-height: 15.03px; }

  /* ─── Оставить отзыв (153:230) ──────────────────────────────────────────
     Секция 292, полоса 350 на #F4F5F7 с полями 18/16 и зазором 16.
     Текст с зазором 5, кнопки в столбик по 60 с зазором 8. */
  .leave { padding: 20px 0; }
  .leave__band { flex-direction: column; align-items: stretch; padding: 18px 16px; gap: 16px; }
  .leave__txt { gap: 5px; }
  .leave__h { font-size: 20px; line-height: 27.32px; letter-spacing: -0.4px; }
  .leave__p { font-size: 13px; line-height: 19.5px; }
  /* Меняем длинную пару на короткую: так в макете (153:233). */
  .leave__h:not(.leave__h--short), .leave__p:not(.leave__p--short) { display: none; }
  .leave__h--short, .leave__p--short { display: block; }
  .leave__btns { flex-direction: column; gap: 8px; }
  .leave__btn { height: 60px; }

  /* ─── Программы (201:241) ───────────────────────────────────────────────
     Поля 40/20, зазор 20; сетка в столбик с зазором 10. */
  .prg__in { padding: 40px var(--side); gap: 20px; }
  .prg__head { gap: 6px; }
  .prg__h { font-size: 28px; line-height: 30.8px; letter-spacing: -0.7px; }
  .prg__sub { font-size: 15px; line-height: 22.5px; }
  .prg__grid { grid-template-columns: 1fr; gap: 10px; }

  /* ─── Три шага (202:217) ────────────────────────────────────────────────
     Поля 40/20, зазор 20; карточки в столбик с зазором 10. */
  .stp__in { padding: 40px var(--side); gap: 20px; }
  .stp__head { gap: 6px; }
  .stp__h { font-size: 28px; line-height: 30.8px; letter-spacing: -0.7px; }
  .stp__sub { font-size: 15px; line-height: 22.5px; }
  .stp__grid { grid-template-columns: 1fr; gap: 10px; }

  /* ─── Вопросы (202:244) ─────────────────────────────────────────────────
     Поля 40/20, зазор 20; список с зазором 8. */
  .faq__in { padding: 40px var(--side); gap: 20px; }
  .faq__head { gap: 6px; }
  .faq__h { font-size: 28px; line-height: 30.8px; letter-spacing: -0.7px; }
  .faq__sub { font-size: 15px; line-height: 22.5px; }
  .faq__list { gap: 8px; }

  /* ─── Финальный призыв (200:225) ────────────────────────────────────────
     Поля 40/20, зазор 20; обещание с зазором 10, фото 56. */
  .lead__in { padding: 40px var(--side); gap: 20px; }
  .lead__text { gap: 10px; }
  .lead__h { font-size: 28px; line-height: 30.8px; letter-spacing: -0.7px; }
  .lead__p { font-size: 15px; line-height: 22.5px; color: #fff; }
  .lead__ava { width: 56px; height: 56px; }

  /* ─── Подвал (256:1015) ─────────────────────────────────────────────────
     Поля 40/20, зазор 28; бренд с зазором 14, знак 36. */
  .ftr__in { padding: 40px var(--side); gap: 28px; }
  .ftr__brand { gap: 14px; }
  .ftr__logo { gap: 10px; }
  .ftr__mark svg { width: 36px; height: 36px; }
}

/* ─── Карточка риелтора на телефоне (48:29) ───────────────────────────────
   В макете это отдельная секция под первым экраном: поля 24/20, карточка 350
   с фото 284, внутри поля 16 и зазор 8. Имя 18/800, роль 12/600,
   факты 156×64 с зазором 6, значение 22/800, подпись 10/500. */
@media (max-width: 1180px) {
  .rlt { width: 100%; }
}
@media (max-width: 760px) {
  /* Список всех квартир дома — на телефоне в одну колонку: три колонки
     на 390 px дали бы строки по три слова с переносами. */
  .zall__list { columns: 1; padding: 0 16px 16px; }
  .zall__sum { padding: 16px; }

  .hero__top { gap: 24px; }
  .rlt__photo { height: 284px; }
  .rlt__info { padding: 16px; gap: 8px; }
  .rlt__name { font-size: 18px; line-height: 24.59px; }
  .rlt__role { font-size: 12px; line-height: 16.39px; }
  .rlt__facts { gap: 6px; }
  .rlt__fact { padding: 10px 12px; }
  .rlt__fact b { font-size: 22px; line-height: 30.05px; }
  .rlt__fact i { font-size: 10px; line-height: 13px; }
  .rlt__pitch { font-size: 18px; line-height: 24.59px; }
  .rlt__detail { font-size: 13px; line-height: 19.5px; }
}