/*
 * Главная по макету из Figma («SQLAD.KZ · Главная», 04.11).
 *
 * Только блоки самой главной: шапка, подвал, кнопки и типографика,
 * общие со страницами склада, карты и текстов, — в landing.css.
 * Прежние блоки главной сохранены в docs/design-backup/2026-11-04/.
 *
 * Мобильный первым, как и весь сайт; медиазапросы — в конце файла,
 * по возрастанию.
 *
 * ── Цвета ─────────────────────────────────────────────────────────
 * Только токенами (проверяет public/ui/tokens.test.js). Зелёный и жёлтый —
 * логобука, а не снятые с макета: те приглушены,
 * и логотип рядом с ними смотрелся бы чужим. Бледно-жёлтая карточка —
 * `--tag-warn-bg` с текстом `--tag-warn-text`: это ровно «фирменный
 * жёлтый 22 % на белом».
 *
 * ── Тема ──────────────────────────────────────────────────────────
 * Только светлая — решение Заказчика (04.11): скрипта темы на главной
 * нет, и тёмных правил здесь тоже нет (это проверяет home.test.js).
 * Классы `theme-light` у рисованных карточек остались как страховка:
 * если тему когда-нибудь вернут, рисунок интерфейса останется светлым.
 */

.home {
  /* Кегли главной по макету: 60 и 40 на 1440, вдвое меньше на телефоне.
     Заголовок первого экрана — 78 вместо 88 из макета: наш Inter шире
     того, что в макете, и на 88 «вещей рядом» уже не вставало в строку. */
  --h-display: clamp(40px, 5.4vw, 80px);
  --h-section: clamp(30px, 4.2vw, 60px);
  --h-sub:     clamp(26px, 2.8vw, 40px);

  /* Скругление крупных карточек: 32 на компьютере, 24 на телефоне. */
  --card-r: clamp(24px, 2.2vw, 32px);

  /* Подложка карточек — «бумага», тёплый светлый в макете. */
  --card: var(--paper);

  /* Вторая строка заголовка — зелёный на ступень светлее основного
     текста, как в макете. */
  --accent-head: var(--brand-3);
}

/* Контейнер карточек: поле у края уже, чем у текста (`--edge`,
   landing.css), — у карточки свой внутренний отступ. */
.wrap-edge { width: min(100% - 2 * var(--edge), var(--page)); margin-inline: auto; }

/* Раздел с заголовком отделён большим просветом; первый экран и жёлтая
   полоса идут вплотную, как в макете. */
.block { padding-top: clamp(56px, 7vw, 100px); scroll-margin-top: 96px; }
.block--tight { padding-top: var(--space-3); }
main > .block:first-child { padding-top: var(--space-1); }

/* ── Карточки ──────────────────────────────────────────────────── */
.card { border-radius: var(--card-r); }
.card--paper { background: var(--card); }
.card--brand { background: var(--brand); color: var(--on-brand); }
.card--mark  { background: var(--mark); color: var(--on-mark); }
.card--soft  { background: var(--tag-warn-bg); color: var(--text); }

/* ── Заголовки ─────────────────────────────────────────────────── */
.h-display,
.h-section,
.h-sub { margin: 0; font-weight: var(--weight-strong); }
.h-display { font-size: var(--h-display); line-height: .98; letter-spacing: -.045em; }
.h-section { font-size: var(--h-section); line-height: 1.02; letter-spacing: -.04em; }
.h-sub     { font-size: var(--h-sub); line-height: 1.08; letter-spacing: -.03em; }
.h-accent  { color: var(--accent-head); }
.h-mark    { color: var(--mark); }
/* Акцент — со своей строки, как в макете. */
.h-section .h-accent,
.h-section .h-mark { display: block; }

/* Метка раздела: точка фирменного жёлтого и два-три слова. */
.label-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0;
  padding: 6px var(--space-3);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
}
.card--paper .label-chip { background: var(--surface); }
.label-chip--dark { background: var(--brand-2); color: var(--on-brand); }
.label-chip__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--mark); flex: none; }

/* ── Пилюли ────────────────────────────────────────────────────── */
/* Кнопки главной: пилюля и, у главных, жёлтый кружок со стрелкой. */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: 999px;
  font-weight: var(--weight-strong);
  font-size: var(--text-md);
  text-decoration: none;
  white-space: nowrap;
}
.pill:has(.pill__arrow) { justify-content: space-between; padding-right: var(--space-2); }
.pill--big { min-height: 60px; padding-left: var(--space-8); }
.pill--brand { background: var(--brand); color: var(--on-brand); }
.pill--brand:hover { background: var(--brand-solid-hover); }
.pill--light { background: var(--surface); color: var(--text); }
.pill--light:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.pill--mark { background: var(--mark); color: var(--on-mark); }
.pill--mark:hover { box-shadow: 0 0 0 2px var(--on-brand); }
.pill:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }
.card--brand .pill:focus-visible { outline-color: var(--mark); }

.pill__arrow {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mark);
  color: var(--on-mark);
}
.pill--big .pill__arrow { width: 44px; height: 44px; }
.pill--mark .pill__arrow { background: var(--brand); color: var(--on-brand); }
.pill__arrow .icon { width: 18px; height: 18px; stroke-width: 2; }

/* ── Рисованные карточки поверх зелёного ───────────────────────── */
.float {
  border-radius: 22px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.float b { font-weight: var(--weight-strong); }
.float__note { display: block; margin: 0; font-size: var(--text-sm); color: var(--muted); }
.float__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.float__row--line { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.float__big { font-size: 26px; letter-spacing: -.02em; }
.float__mid { font-size: var(--text-lg); letter-spacing: -.01em; }
.float__tag {
  padding: 5px var(--space-3);
  border-radius: 999px;
  background: var(--tag-warn-bg);
  color: var(--tag-warn-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
}
.float__btn {
  padding: 10px var(--space-4);
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  text-decoration: none;
  white-space: nowrap;
}
a.float__btn:hover { background: var(--brand-solid-hover); }
a.float__btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.float__ok { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-3); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.float__ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.float__bar { display: block; height: 6px; border-radius: 3px; background: var(--mark); }
.float__ico {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--mark);
  color: var(--on-mark);
}
.float__ico .icon { width: 26px; height: 26px; }

/* ── Первый экран ──────────────────────────────────────────────── */
.hero2__grid { display: grid; gap: var(--space-3); }

.hero2__main {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(24px, 3.4vw, 48px);
}
.hero2__main .h-display { margin-top: var(--space-6); }
.hero2__lead {
  margin: var(--space-5) 0 0;
  max-width: 34em;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
}
.hero2__actions {
  display: grid; gap: var(--space-3);
  align-self: stretch;
  margin-top: var(--space-6);
}

.stats {
  list-style: none;
  display: grid; gap: var(--space-2);
  align-self: stretch;
  margin: var(--space-3) 0 0; padding: 0;
}
.stat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: 18px;
  background: var(--surface);
}
.stat b { font-size: clamp(20px, 1.8vw, 26px); font-weight: var(--weight-strong); letter-spacing: -.02em; white-space: nowrap; }
.stat span { color: var(--muted); font-size: var(--text-sm); text-align: right; }

.hero2__plan { padding: clamp(24px, 3.4vw, 52px); }
.plan-demo__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-5); }
.plan-demo__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-strong); }
/* Честно: план — пример, и он нажимается. */
.plan-demo__hint { margin: 0; color: var(--on-brand-muted); font-size: var(--text-sm); }
/* Доска — сам план вместе с карточкой бокса над ним: карточка стоит
   относительно плана, а не всей зелёной плашки, и при ужатом плане
   не съезжает с него. */
.plan-demo__board { position: relative; }
.plan-demo { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(4px, .45vw, 7px); }
/* Клетки — `<span>` в разметке; скрипт главной меняет их на кнопки
   (`landing.js`), поэтому правила — на любого ребёнка сетки. */
.plan-demo > * {
  display: block;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: clamp(4px, .6vw, 9px);
  background: var(--brand-2);
  font: inherit;
}
.plan-demo .on { background: var(--on-brand); opacity: .92; }
.plan-demo .pick { background: var(--mark); opacity: 1; }
/* Выбран занятый — жёлтой рамкой, а не заливкой: заливка значит «ваш». */
.plan-demo .pick:not(.on) { background: var(--brand-2); box-shadow: inset 0 0 0 3px var(--mark); }
.plan-demo button { cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.plan-demo button:hover { transform: scale(1.06); }
.plan-demo button.on:hover { opacity: 1; }
.plan-demo button:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }

/* Карточка выбранного бокса — над планом, у его правого края. */
/* Карточка выбранного бокса. Где ей стоять, решает скрипт — рядом
   с выбранным, но не поверх него (`landing.js`); без скрипта — как
   в макете, справа над планом. */
.float--box { position: absolute; right: 0; top: 30%; z-index: 1; width: min(250px, 62%); padding: var(--space-4); }
/* Карточка лежит поверх соседних боксов — и не должна мешать их нажать:
   нажатие проходит сквозь неё на бокс под ней, и тогда она отъезжает.
   Ловит нажатия только «Выбрать». */
.float--box { pointer-events: none; }
.float--box a { pointer-events: auto; }
.float__tag--busy { background: var(--tag-neutral-bg); color: var(--tag-neutral-text); }
.float--box .float__big { font-size: 22px; }

.plan-demo__foot { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.float--door { display: flex; align-items: center; gap: var(--space-4); }
.float--pay { display: grid; gap: var(--space-2); }

/* ── Жёлтая полоса ─────────────────────────────────────────────── */
.strip {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, auto); justify-content: start;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: 24px;
  background: var(--mark);
  color: var(--on-mark);
  font-weight: var(--weight-strong);
  font-size: var(--text-base);
}
.strip li { display: flex; align-items: center; gap: var(--space-2); }
/* Ромбы — рисунок, не текст: читалка их не озвучивает. */
.strip li::before { content: ''; width: 9px; height: 9px; border-radius: 1px; background: var(--brand); transform: rotate(45deg); flex: none; }

/* ── Заголовок раздела ─────────────────────────────────────────── */
.block__head { display: grid; gap: var(--space-4); margin-bottom: clamp(24px, 2.4vw, 32px); }
.block__head .label-chip { margin-bottom: var(--space-6); }
.block__aside { margin: 0; max-width: 400px; color: var(--muted); font-size: var(--text-md); line-height: 1.55; }
.block__head > .pill { justify-self: start; }

/* ── Подбор размера ────────────────────────────────────────────── */
.pick { display: grid; gap: var(--space-3); }
.pick__ask,
.pick__result,
.pick__tips { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); }
.pick__ask { gap: var(--space-4); align-items: flex-start; }
.pick__label { margin: 0; color: var(--muted); font-size: var(--text-base); }
.pick__label--dark { color: var(--on-brand-muted); }
.pick__label--soft { color: var(--tag-warn-text); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-label);
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip[aria-pressed='true'] { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.chip:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.chip--small { min-height: 38px; font-size: var(--text-sm); }

.pick__answers { display: grid; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); }
.pick__answers[hidden] { display: none; }

.pick__result { position: relative; overflow: hidden; }
.pick__area {
  display: flex; align-items: flex-end; gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: clamp(72px, 8vw, 120px);
  font-weight: var(--weight-strong);
  line-height: .9;
  letter-spacing: -.05em;
}
.pick__area small { padding-bottom: .12em; font-size: .3em; letter-spacing: 0; }
.pick__pic { position: absolute; right: clamp(16px, 2vw, 32px); top: clamp(56px, 5vw, 72px); width: clamp(96px, 10vw, 150px); }
/* Справа от строки — место под кубик, чтобы он не лёг на текст. */
.pick__size { margin: var(--space-5) 0 0; padding-right: 100px; color: var(--on-brand-muted); font-size: var(--text-base); }
.pick__price { display: flex; align-items: center; gap: var(--space-3); margin: auto 0 0; padding-top: var(--space-6); font-weight: var(--weight-strong); }
.pick__tick {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mark);
  color: var(--on-mark);
}
.pick__tick .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.pick__result .pill { align-self: flex-start; margin-top: var(--space-4); }

.stack-demo { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(4, 40px); gap: 6px; margin-top: var(--space-5); }
.stack-demo span { border-radius: 10px; }
.stack-demo__big  { grid-column: 1; grid-row: 1 / 3; background: var(--brand); }
.stack-demo__tall { grid-column: 2; grid-row: 1 / 5; background: var(--brand-3); }
.stack-demo__s    { background: var(--mark); }
.stack-demo__w    { background: var(--surface); }
.stack-demo span:nth-child(3) { grid-column: 3; grid-row: 1; }
.stack-demo span:nth-child(4) { grid-column: 3; grid-row: 2; }
.stack-demo span:nth-child(5) { grid-column: 1; grid-row: 3; }
.stack-demo span:nth-child(6) { grid-column: 1; grid-row: 4; }
.stack-demo span:nth-child(7) { grid-column: 3; grid-row: 3; }
.stack-demo span:nth-child(8) { grid-column: 3; grid-row: 4; }
.pick__tips-title { margin: auto 0 0; padding-top: var(--space-6); font-size: clamp(20px, 1.7vw, 24px); font-weight: var(--weight-strong); line-height: 1.25; letter-spacing: -.01em; }
.pick__tips-note { margin: var(--space-2) 0 0; color: var(--tag-warn-text); font-size: var(--text-base); }

/* ── Кубики размеров ───────────────────────────────────────────── */
/* Три грани одного цвета разной светлоты: на светлой карточке —
   белый с зелёным оттенком, на выделенной и в подборе — фирменный жёлтый. */
.cube { display: block; width: 100%; height: auto; }
.cube__top   { fill: var(--surface); }
.cube__left  { fill: var(--box-free-bg); }
.cube__right { fill: var(--line-strong); }
.size-card--lead .cube__top,
.pick__pic .cube__top   { fill: var(--mark); }
.size-card--lead .cube__left,
.pick__pic .cube__left  { fill: var(--box-occupied-line); }
.size-card--lead .cube__right,
.pick__pic .cube__right { fill: var(--warn-text); }
/* На жёлтой карточке призыва — зелёный кубик. */
.cube--deco .cube__top   { fill: var(--brand-3); }
.cube--deco .cube__left  { fill: var(--brand-2); }
.cube--deco .cube__right { fill: var(--brand); }

/* ── Шесть шагов ───────────────────────────────────────────────── */
.steps2 { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin: 0; padding: 0; }
.step2 { display: flex; flex-direction: column; min-height: 230px; padding: var(--space-5); }
.step2__no { font-size: var(--text-base); font-weight: var(--weight-strong); color: var(--accent-head); }
.card--brand .step2__no { color: var(--mark); }
.step2__ico {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin-top: var(--space-5);
  border-radius: 16px;
  background: var(--surface);
  color: var(--accent-head);
}
.card--brand .step2__ico { background: var(--brand-2); color: var(--mark); }
.step2__ico .icon { width: 24px; height: 24px; }
.step2__title { margin: auto 0 0; padding-top: var(--space-5); font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -.01em; }
.step2__text { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-base); line-height: 1.4; }
.card--brand .step2__text { color: var(--on-brand-muted); }

/* ── Вход по лицу ──────────────────────────────────────────────── */
.face { display: grid; gap: var(--space-8); padding: clamp(28px, 4.5vw, 64px); overflow: hidden; }
.face .label-chip { margin-bottom: var(--space-6); }
.face__lead { margin: var(--space-5) 0 0; max-width: 30em; color: var(--on-brand-muted); font-size: var(--text-md); line-height: 1.55; }
.face__note { margin: var(--space-3) 0 0; color: var(--on-brand-muted); font-size: var(--text-sm); }
.face__stats { list-style: none; display: grid; gap: var(--space-2); margin: var(--space-8) 0 0; padding: 0; }
.face__stats li { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: 18px; background: var(--brand-2); }
.face__stats b { font-size: clamp(22px, 2vw, 28px); font-weight: var(--weight-strong); letter-spacing: -.02em; }
.face__stats span { color: var(--on-brand-muted); font-size: var(--text-sm); }
.face__stats .face__stat--mark { background: var(--mark); color: var(--on-mark); }
.face__stats .face__stat--mark span { color: var(--on-mark); }

/* Телефон стоит на нижнем крае плашки и уходит за него. */
.face__phone {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  min-width: 0;
  margin-bottom: calc(-1 * clamp(28px, 4.5vw, 64px));
}
.phone-demo {
  display: grid; gap: var(--space-2); align-content: start;
  width: min(300px, 100%);
  min-height: 460px;
  padding: var(--space-6) var(--space-5);
  border: 10px solid var(--text);
  border-bottom: 0;
  border-radius: 40px 40px 0 0;
  background: var(--surface);
}
.phone-demo__top { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--text-sm); }
.phone-demo__title { margin-top: var(--space-2); font-size: 22px; font-weight: var(--weight-strong); letter-spacing: -.02em; }
.phone-demo__face {
  display: grid; place-items: center; justify-self: center;
  width: 140px; height: 140px;
  margin-top: var(--space-3);
  border-radius: 40px;
  background: var(--tag-warn-bg);
  color: var(--brand);
}
.phone-demo__face .icon { width: 64px; height: 64px; stroke-width: 1.4; }
.phone-demo__ok { justify-self: center; margin-bottom: var(--space-2); color: var(--brand-3); font-size: var(--text-base); font-weight: var(--weight-strong); }
.phone-demo__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: 14px;
  background: var(--paper);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}
.phone-demo__row span:last-child { color: var(--muted); font-weight: var(--weight-label); }
.phone-demo__row--on { background: var(--brand); color: var(--on-brand); }
.phone-demo__row--on b { color: var(--mark); }

/* Плашки у телефона — с 560 px: на телефоне они закрыли бы экран. */
.float--today,
.float--mark { display: none; }
.float--mark { background: var(--mark); color: var(--on-mark); box-shadow: var(--shadow-lift); }
.float--mark .float__note { color: var(--on-mark); }

/* ── Размеры и цены ────────────────────────────────────────────── */
.sizes { display: grid; gap: var(--space-3); }
.size-card {
  display: grid; grid-template-rows: auto 1fr auto auto;
  padding: var(--space-6);
  border-radius: var(--card-r);
  background: var(--card);
}
.size-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.size-card__name { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -.01em; }
.size-card__range { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.size-card__pic { display: grid; place-items: end center; padding: var(--space-4) 0; }
/* На телефоне кубики вдвое меньше: карточки идут столбиком, и пять
   полноразмерных растянули бы раздел на три экрана. */
.size-card__pic .cube { width: 40px; }
.size-card__pic .cube--1 { width: 54px; }
.size-card__pic .cube--2 { width: 68px; }
.size-card__pic .cube--3 { width: 82px; }
.size-card__pic .cube--4 { width: 96px; }
.size-card__fits { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }
.size-card__price { margin: var(--space-2) 0 0; font-size: clamp(22px, 1.8vw, 26px); font-weight: var(--weight-strong); letter-spacing: -.02em; }
.size-card__none { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-base); }
.size-card--lead { background: var(--brand); color: var(--on-brand); }
.size-card--lead .size-card__range { color: var(--mark); }
.size-card--lead .size-card__fits,
.size-card--lead .size-card__none { color: var(--on-brand-muted); }

/* ── Филиалы ───────────────────────────────────────────────────── */
.branches2 { display: grid; gap: var(--space-3); }

/* Карта: картинка 2ГИС 880 × 600 и наши метки поверх неё — на «доске»
   (`.bmap__board`) тех же пропорций, чтобы метки в долях стояли ровно
   там, где их склады на картинке (`shared/home-blocks.js`).

   На телефоне рамка тех же пропорций, и доска входит в неё целиком.
   На широком экране рамка растягивается по высоте списка рядом, и доска
   её покрывает, как `object-fit: cover`: по большей из двух сторон, лишнее
   уходит за край поровну. Склады при этом стоят в середине картинки
   с запасом под такую обрезку — см. `SAFE` там же. */
/* Высота доски — в процентах от рамки, а не в `cqh`: Chrome на 1440 px
   считал высоту рамки для `cqh` нулевой (рамка растянута по высоте
   списка рядом), доска выходила 829 × 565 вместо 880 × 600, и сверху
   и снизу торчала схема. Ширина — от высоты, через пропорции; `cqw`
   ширину рамки знает всегда. Итог тот же «cover»: высота — большая
   из «как у рамки» и «как надо при её ширине», ширина — по пропорциям,
   и она тогда не меньше ширины рамки. */
.bmap { position: relative; aspect-ratio: 880 / 600; overflow: hidden; container-type: inline-size; background: var(--box-free-bg); }
.bmap__streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.bmap__board {
  position: absolute; left: 50%; top: 50%;
  height: max(100%, 100cqw * 600 / 880);
  aspect-ratio: 880 / 600;
  transform: translate(-50%, -50%);
}
.bmap__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Не загрузилась — пропадает, и видна схема под ней (`landing.js`). */
.bmap--nomap .bmap__img,
.bmap--nomap .bmap__credit { display: none; }

/* Подпись источника — условие 2ГИС. Слева: справа внизу на самой
   картинке свой знак 2ГИС, и на телефоне, где картинка видна целиком,
   они легли бы друг на друга. Только когда картинка есть. */
.bmap__credit {
  display: none;
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-xs);
}
.bmap:has(.bmap__img) .bmap__credit { display: block; }

/* Виджет 2ГИС — когда в настройках вписаны организации (`home-blocks.js`).
   Доска тогда не «обложка», а ровно карточка: виджет сам ставит
   организации по центру, и обрезать его края незачем. Фрейм рисуется
   1200 px шириной и уменьшается под карточку (`landing.js`). */
.bmap:has(.bmap__widget) .bmap__board { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
.bmap__widget { position: absolute; inset: 0; overflow: hidden; }
.bmap__widget iframe {
  position: absolute; left: 0; top: 0;
  width: 1200px;
  border: 0;
  transform: scale(var(--map-scale, 1));
  transform-origin: 0 0;
  pointer-events: none;
}
/* Ссылка на всю карточку: нажатие на карту открывает 2ГИС. Подпись
   видна и до загрузки виджета — на месте карты тогда схема. */
.bmap__open {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end;
  padding: var(--space-3);
  text-decoration: none;
}
.bmap__open-label {
  padding: 6px var(--space-3);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  box-shadow: var(--shadow-soft);
}
.bmap__open:hover .bmap__open-label { background: var(--brand); color: var(--on-brand); }
.bmap__open:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -4px; border-radius: inherit; }
.bmap__road { fill: none; stroke: var(--surface); stroke-width: 12; }
.bmap__park { fill: var(--tag-ok-bg); }
.bmap__pin {
  position: absolute;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease;
}
.bmap__pin--on { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--mark); }
.bmap__pin:hover,
.bmap__pin:focus-visible { transform: scale(1.15); outline: none; }

.blist { display: grid; gap: var(--space-2); align-content: start; }
.brow {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: 20px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
}
.brow:hover,
.brow--on { background: var(--brand); color: var(--on-brand); }
.brow:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.brow__photo { width: 52px; height: 52px; flex: none; border-radius: 12px; object-fit: cover; }
.brow__text { display: grid; gap: 2px; min-width: 0; }
.brow__name { font-size: var(--text-md); font-weight: var(--weight-strong); }
.brow__address,
.brow__hours { color: var(--muted); font-size: var(--text-sm); }
.brow:hover .brow__address, .brow:hover .brow__hours,
.brow--on .brow__address, .brow--on .brow__hours { color: var(--on-brand-muted); }
.brow__price { margin-left: auto; font-weight: var(--weight-strong); white-space: nowrap; }

/* ── Для бизнеса и призыв ──────────────────────────────────────── */
.biz { display: grid; gap: var(--space-3); }
.biz__main,
.biz__cta { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.4vw, 48px); }
.biz__main .h-sub { margin-top: var(--space-6); max-width: 15em; }
.biz__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; padding: var(--space-8) 0 0; }
.biz__tags li { padding: 10px var(--space-4); border-radius: 14px; background: var(--surface); font-size: var(--text-base); font-weight: var(--weight-label); }
.biz__cta { position: relative; overflow: hidden; }
.biz__cta .h-sub,
.biz__lead { position: relative; max-width: 14em; }
.biz__lead { margin: var(--space-3) 0 0; max-width: 24em; font-size: var(--text-md); line-height: 1.5; }
.biz__cta .pill { position: relative; margin-top: var(--space-8); }
/* Кубик — в правом нижнем углу, под кнопкой не лежит и текст не закрывает. */
.biz__pic { position: absolute; right: -16px; bottom: -20px; width: clamp(96px, 14vw, 200px); }

/* ══ Ширины ════════════════════════════════════════════════════════ */

@media (min-width: 560px) {
  .hero2__actions { display: flex; flex-wrap: wrap; align-self: flex-start; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4); }
  .stat span { text-align: left; }

  .plan-demo__foot { grid-template-columns: auto auto; justify-content: space-between; align-items: end; }

  .sizes { grid-template-columns: repeat(2, 1fr); }
  .face__stats { grid-template-columns: repeat(3, 1fr); }

  /* Телефон — к левому краю колонки, плашки — справа от него, как в макете. */
  .face__phone { justify-content: flex-start; }
  .float--today,
  .float--mark { display: grid; gap: 2px; position: absolute; right: 0; width: 190px; }
  .float--today { top: 12%; }
  .float--mark { top: 46%; }
}

@media (min-width: 720px) {
  .steps2 { grid-template-columns: repeat(3, 1fr); }
  .step2 { min-height: 280px; padding: var(--space-8); }
}

@media (min-width: 900px) {
  .block__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-12); }
  .block__head > .pill { justify-self: end; }

  /* Полоса строкой: пять обещаний, ромбы ровно посередине между ними.
     Каждый пункт растягивается поровну и ставит текст в середину,
     поэтому ромб на стыке двух пунктов приходится точно между текстами. */
  .strip { display: flex; padding: var(--space-6) var(--space-4); font-size: clamp(14px, 1.15vw, 17px); }
  .strip li { position: relative; flex: 1 1 auto; justify-content: center; }
  .strip li::before { display: none; }
  .strip li + li::after {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 14px; height: 14px; border-radius: 2px;
    background: var(--brand);
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick__ask,
  .pick__result,
  .pick__tips { min-height: 440px; }

  .sizes { grid-template-columns: repeat(3, 1fr); }

  .branches2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .bmap { aspect-ratio: auto; min-height: 600px; }
  /* Список — той же высоты, что схема: строки делят её поровну, как
     в макете (шесть строк по 92 на 600). Раньше строки стояли сверху,
     и под ними оставалась пустая полоса — Заказчик, 04.11. Филиалов
     станет больше, чем входит, — вырастут оба: схема растягивается
     по высоте ряда так же, как список. */
  .blist { grid-auto-rows: 1fr; align-content: stretch; }

  .biz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz__main,
  .biz__cta { min-height: 380px; }
  /* Кнопка призыва — у нижнего края, как теги соседней карточки. */
  .biz__cta .pill { margin-top: auto; }
  .biz__lead { margin-bottom: var(--space-8); }
}

@media (min-width: 1024px) {
  .hero2__grid { grid-template-columns: minmax(0, 600fr) minmax(0, 748fr); }
  .hero2__main .h-display { margin-top: var(--space-10); }
  .hero2__actions { margin-top: auto; padding-top: var(--space-8); }
  .hero2__plan { display: flex; flex-direction: column; }
  .plan-demo__foot { margin-top: auto; padding-top: var(--space-6); }

  .face { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
}

/* ── Первый экран — целиком в окне ─────────────────────────────────
   На ноутбуке первый экран обязан помещаться в окно без прокрутки:
   главная кнопка и низ плана уходили за край (1366×768, 1440×800,
   1920×950 — замеры Заказчика). Поэтому высота героя берётся от окна,
   а не от содержимого:

     окно − шапка (84: 12 + 64 + 8) − 4 сверху − 12 до края = окно − 100.

   Потолок 860 — чтобы на высоком мониторе первый экран не раздувался
   выше макета (720 на 1440). Всё, что внутри, ужимается по высоте окна:
   кегль заголовка (`vh` наравне с `vw`), отступы и, главное, план —
   он вписывается в оставшееся место квадратами, а не растягивается
   на ширину карточки.

   Ниже 620 по высоте (маленькие окна, экран 1024×600) ужимать дальше
   некуда — заголовок стал бы мельче текста, — и там остаётся обычная
   прокрутка. */
@media (min-width: 1024px) and (min-height: 620px) {
  .home { --h-display: clamp(40px, min(5.4vw, 8.6vh), 80px); }

  .hero2__grid {
    height: calc(100vh - 100px);
    height: min(calc(100svh - 100px), 860px);
    max-height: 860px;
  }

  .hero2__main,
  .hero2__plan { min-height: 0; padding: clamp(24px, min(3.4vw, 5vh), 52px); }
  .hero2__main .h-display { margin-top: clamp(12px, 3.6vh, 40px); }
  .hero2__lead { margin-top: clamp(12px, 2.4vh, 20px); font-size: clamp(16px, min(1.4vw, 2.6vh), 20px); }
  .hero2__actions { padding-top: clamp(16px, 3vh, 32px); }
  .hero2__actions .pill--big { min-height: clamp(48px, 7.5vh, 60px); }
  .stats { margin-top: clamp(8px, 1.2vh, 12px); }
  .stat { padding: clamp(10px, 1.6vh, 16px) var(--space-4); }

  .plan-demo__head { margin-bottom: clamp(12px, 2.4vh, 20px); }
  /* Сцена занимает всё между заголовком и плашками, доска вписывается
     в неё. Клетки — от квадрата до 1,2 : 1 в ширину: строго квадратные
     на широком мониторе оставляли справа пустую полосу в треть карточки,
     а чуть вытянутый бокс на плане и так обычное дело. Восемь клеток на
     шесть — это 4 : 3, отсюда 0,75 и 1,6 (= 4 : 3 × 1,2). */
  .plan-demo__stage { flex: 1 1 0; min-height: 0; container-type: size; }
  .plan-demo__board { width: min(100cqw, 100cqh * 1.6); height: min(100cqh, 100cqw * .75); }
  .plan-demo { height: 100%; grid-template-rows: repeat(6, 1fr); }
  .plan-demo > * { aspect-ratio: auto; }
  .plan-demo__foot { margin-top: 0; padding-top: clamp(12px, 2.4vh, 24px); }
  .float--pay { gap: 6px; padding: clamp(10px, 1.6vh, 16px) var(--space-5); }
}

/* Узкий и низкий ноутбук (1024–1179 на 620–699): подписи цифр в три
   строки — колонка героя здесь уже всего, — и им не хватало пары
   пикселей. Мелкий кегль подписей держит их в две. */
@media (min-width: 1024px) and (max-width: 1179px) and (min-height: 620px) and (max-height: 699px) {
  .stat span { font-size: var(--text-xs); }
}

@media (min-width: 1200px) {
  .steps2 { grid-template-columns: repeat(6, 1fr); }
  .sizes { grid-template-columns: repeat(5, 1fr); }
  .size-card { min-height: 430px; }
  .size-card__pic { padding: var(--space-6) 0; }
  .size-card__pic .cube { width: 60px; }
  .size-card__pic .cube--1 { width: 86px; }
  .size-card__pic .cube--2 { width: 116px; }
  .size-card__pic .cube--3 { width: 146px; }
  .size-card__pic .cube--4 { width: 172px; }
}