/* ==========================================================================
   bands.css — система полос страницы: чередование «документ / гараж».

   Вынесено из home.css, потому что этим языком говорят все внутренние
   страницы. Держать копию в каждой — гарантированный разъезд: поправишь
   отступ полосы на главной, а на доставке останется старый.

   Светлые песочные полосы — бумага, факты и цифры. Тёмные — гараж, где
   показывают машину: студийные фото сняты на чёрном фоне и на песочном
   теряются, а на тёмном читаются как в шоуруме.
   ========================================================================== */

.home,
.page {
  --night:      #16130f;   /* глубокий тёмный — герой, доказательство   */
  --night-2:    #1e1a14;   /* на ступень светлее — вложенные плитки     */
  --night-line: rgba(245,240,230,.14);
  --on-night:   #f5f0e6;   /* текст на тёмном, контраст 15.6           */
  --on-night-2: #cfc7b6;   /* второстепенный на тёмном, контраст 10.5  */
  --gold:       #c9a227;   /* латунь: цифры, номера шагов, подчёркивание */
  /* Отдельный тон латуни ТОЛЬКО для надзаголовков. Обычная --brass
     (#8a6a2f) даёт на песке 4.41 при 12px — ниже порога 4.5, замерено
     аудитом на всех полосах сразу. Трогать саму --brass нельзя: ею
     покрашена плашка Pending Sale, у которой свой фон и свой запас. */
  --brass-ink:  #7d5f26;   /* надзаголовки на светлом, контраст 5.2      */
}

/* Полосы во всю ширину — фон уходит за пределы контейнера */
.band { position: relative; }
.band--night { background: var(--night); color: var(--on-night); }
.band--night h2, .band--night h3 { color: #fff; }
.band--sand  { background: var(--bg); }
.band--paper { background: var(--surface); }
.band--tint  { background: var(--surface-tint); }
.band + .band--sand, .band--sand + .band--sand { border-top: 1px solid var(--line); }

/* Общая шапка полосы: надзаголовок латунью, заголовок, лид */
.bandhead { max-width: 62ch; margin: 0 0 40px; }
.bandhead--center { margin-left: auto; margin-right: auto; text-align: center; }
/* Селектор с двумя классами не случайно: надзаголовок — это <p> внутри
   .bandhead, и правило .bandhead p (специфичность выше) перекрашивало его
   в серый. Латунь молча пропадала на всех полосах. */
.eyebrow,
.bandhead .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 var(--fs-micro)/1 var(--font-body);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-ink); margin: 0 0 12px;
}
.band--night .eyebrow,
.band--night .bandhead .eyebrow { color: var(--gold); }
.eyebrow:before { content: ""; width: 26px; height: 2px; background: currentColor; }
.bandhead--center .eyebrow:after { content: ""; width: 26px; height: 2px; background: currentColor; }
.bandhead h2 {
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.14;
  letter-spacing: -.01em; margin: 0 0 12px;
  text-wrap: balance;
}
.bandhead p { font-size: var(--fs-base); color: var(--ink-muted); margin: 0; text-wrap: pretty; }
.band--night .bandhead p { color: var(--on-night-2); }

/* Проявление при прокрутке. Наблюдаем за каждым элементом отдельно:
   порог у длинной секции никогда не набирается (проверено на прошлом сайте). */
.rise { opacity: 0; transform: translateY(22px); }
.rise.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }




/* ── Общая мебель страниц: шаги и вопросы ────────────────────────────────
   Вынесено из home.css: этими блоками говорит не только главная.
   Копия в каждой странице разъедется на первой же правке. */

/* ==========================================================================
   7. ПОРЯДОК ПОКУПКИ
   Человек ни разу не покупал машину за две тысячи миль и не знает, что
   вообще происходит после звонка. Пять шагов снимают этот страх.
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.step { position: relative; padding: 0 20px 0 0; }
.step__num {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brass); color: var(--brass);
  font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700;
  position: relative; z-index: 1; margin-bottom: 16px;
}
/* Линия между шагами — рисуется от кружка до кружка, у последнего нет */
.step:not(:last-child):before {
  content: ""; position: absolute; left: 46px; top: 22px; right: 0; height: 2px;
  background: var(--line-strong);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.steps.is-in .step:not(:last-child):before { transform: scaleX(1); }
.step h3 { font-size: var(--fs-base); margin: 0 0 8px; }
.step p { font-size: var(--fs-small); color: var(--ink-muted); margin: 0; padding-right: 12px; }



/* ==========================================================================
   9. ВОПРОСЫ
   ========================================================================== */
.qa-grid { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.qa-aside { position: sticky; top: 150px; }
.qa-aside .bandhead { margin-bottom: 28px; }
.qa-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-lg); padding: 20px 24px;
}
.qa-card > p { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-base); margin: 0 0 12px; }
.qa-card__call {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: 20px; font-weight: 700;
  color: var(--green); text-decoration: none;
  min-height: var(--h-btn-sm);
  transition: color var(--dur) var(--ease);
}
.qa-card__call:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }
.qa-card__call svg { width: 20px; height: 20px; }
.qa-card > span { display: block; margin-top: 8px; font-size: var(--fs-label); color: var(--ink-soft); }

.qa { border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 20px 4px; background: transparent; border: 0; cursor: pointer;
  text-align: left; font: 700 var(--fs-base)/1.35 var(--font-heading); color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.qa__q:hover { color: var(--green); }
.qa__sign { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.qa__sign:before, .qa__sign:after {
  content: ""; position: absolute; background: var(--brass); border-radius: 1px;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.qa__sign:before { left: 0; right: 0; top: 8px; height: 2px; }
.qa__sign:after  { top: 0; bottom: 0; left: 8px; width: 2px; }
.qa__item.is-open .qa__sign:after { transform: rotate(90deg); opacity: 0; }
.qa__a { overflow: hidden; height: 0; transition: height .3s var(--ease); }
.qa__a p { padding: 0 56px 24px 4px; margin: 0; color: var(--ink-muted); font-size: var(--fs-small); }


/* Призыв под лентой шагов. Жил в home.css, а лента .steps — здесь, и на
   странице доставки блок выводился вовсе без стилей: текст лип к шагам,
   кнопки стояли в строчку слева под центрованным заголовком. Стиль ездит
   вместе с разметкой, которую он обслуживает. */
/* Блок «как проходит покупка» заканчивался последним шагом и упирался
   в пустоту: человек дочитал порядок действий — и делать ему нечего. */
.steps__cta {
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.steps__cta p {
  margin: 0; max-width: 46ch;
  font-size: var(--fs-base); color: var(--ink-muted);
}
.steps__act { display: flex; gap: 12px; flex-wrap: wrap; }
.steps__act .btn svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .steps__cta { flex-direction: column; align-items: stretch; text-align: left; }
  .steps__act .btn { flex: 1 1 180px; }
}

/* ==========================================================================
   Раскладка полос на узких экранах.

   ВСЁ ЭТО ЛЕЖАЛО В home.css. Базовые правила (.steps в пять колонок,
   .qa-grid с колонкой 380px, отступы .band > .container) — здесь, а их
   схлопывание на телефоне — там. Страница доставки home.css не подключает,
   и на 320px держала пятиколоночную ленту шагов и боковую колонку в 380px:
   297 пикселей горизонтальной прокрутки. Правило и его отмена должны
   лежать в одном файле, иначе каждая следующая страница наступит на это
   снова. Замерено аудитом по 21 ширине.
   ========================================================================== */
.band > .container { padding-top: clamp(56px, 6.5vw, 96px); padding-bottom: clamp(56px, 6.5vw, 96px); }

.bandhead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.bandhead-row .bandhead { margin-bottom: 0; }

@media (max-width: 1180px) {
  .qa-grid { grid-template-columns: 320px 1fr; gap: 40px; }
}

@media (max-width: 980px) {
  /* Липкая колонка на узком экране только мешает: она уезжает вместе
     с вопросами и съедает первый экран блока. */
  .qa-grid { grid-template-columns: 1fr; gap: 28px; }
  .qa-aside { position: static; }
  .steps { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .step:not(:last-child):before { display: none; }
  .step { padding-right: 0; }
}

@media (max-width: 760px) {
  .bandhead-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .qa__a p { padding-right: 20px; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН ВНУТРЕННИХ СТРАНИЦ (.phero)

   Был написан ТРИЖДЫ — отдельно в delivery.css, financing.css и
   condition.css — почти одинаковым кодом. Три копии одной раскладки
   неизбежно разъезжаются, и разъехались: замер дал высоты 582 / 840 / 763
   на десктопе и 787 / 1172 / 1096 на телефоне. Человек, переходящий из
   меню со страницы на страницу, видел, как полоса прыгает на четверть
   экрана. Теперь метрика одна на всех.

   Общая нижняя граница (min-height) держит короткие экраны, но не
   ограничивает длинные: полоса с высокой карточкой вырастет, а полоса
   с низкой не провалится. Разброс от этого не исчезает совсем — он и не
   должен, содержимое разное, — но становится в пределах одного экрана,
   а не в четверть.

   Своё у каждой страницы остаётся только одно: фон. У доставки это
   фотография погрузки, у остальных — тёмная фактура без снимка.
   ========================================================================== */
/* Первый экран добирает до низа окна — ровно так же, как герой главной.
   Раньше здесь стояла прибитая цифра (min-height: 720px), и полосы вели
   себя по-разному: на 1440×900 доставка обрывалась за 43 пикселя до низа
   и снизу выглядывала полоска следующего блока, финансирование перелезало
   на 79. Высоту шапки меряет ui.js и кладёт в --chrome-h, так что расчёт
   верен и когда демо-полоски сверху не будет.

   Это min-height, а не height: содержимое всегда важнее и просто раздвинет
   полосу — на низком ноутбуке карточка калькулятора не обрежется. */
.phero {
  position: relative; overflow: hidden;
  color: var(--on-night);
  isolation: isolate;
  min-height: calc(100vh - var(--chrome-h, 137px));
  display: flex; flex-direction: column;
}
@supports (height: 100dvh) {
  /* На телефоне адресная строка съедает часть 100vh — dvh считает по факту */
  .phero { min-height: calc(100dvh - var(--chrome-h, 75px)); }
}
.phero > .container { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* Фон по умолчанию: тёмная база, вертикальные волоски студийной стены,
   у которой снят весь каталог, и тёплое свечение под карточкой справа.
   Ни байта картинок. Страница со своим фоном перекрывает это правило. */
.phero--plain {
  background:
    radial-gradient(130% 100% at 76% 34%, rgba(201,162,39,.12) 0%, rgba(201,162,39,.04) 42%, rgba(201,162,39,0) 68%),
    repeating-linear-gradient(90deg, rgba(245,240,230,.032) 0 1px, rgba(245,240,230,0) 1px 7px),
    linear-gradient(180deg, #1c1813 0%, #16130f 46%, #100e0b 100%);
}
/* Фотография под текстом, если страница её задала. Слой общий: у доставки
   он уже был свой, и четвёртая копия того же кода — то, из-за чего три
   первых экрана и разъехались. Заливка держит контраст текста слева и
   отпускает середину, где обычно и лежит сюжет кадра. */
.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  animation: pheroDrift 32s ease-in-out infinite alternate;
}
@keyframes pheroDrift {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .phero__media img { animation: none; transform: scale(1.05); }
}
.phero__media:after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(12,10,8,.94) 0%, rgba(12,10,8,.9) 26%, rgba(12,10,8,.6) 42%,
      rgba(12,10,8,.3) 58%, rgba(12,10,8,.46) 76%, rgba(12,10,8,.66) 100%),
    linear-gradient(to top, rgba(12,10,8,.76) 0%, rgba(12,10,8,0) 38%);
}
/* На узком экране в кадр попадает лишь треть ширины — сдвигаем окно к
   сюжету, а не к пустому краю. */
@media (max-width: 700px) {
  .phero__media img { object-position: 46% center; }
}

/* Латунная нить по нижнему краю — тот же приём, что отделяет шапку. */
.phero:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(201,162,39,0) 0%, rgba(201,162,39,.5) 38%,
                              rgba(201,162,39,.5) 62%, rgba(201,162,39,0) 100%);
}
/* Отступы задаёт ТОЛЬКО сетка внутри. Общее правило .band > .container
   добавляет свои, и вместе выходило вдвое больше нужного: 198 пикселей
   пустоты сверху и снизу при 374 пикселях содержимого. */
.phero > .container { position: relative; z-index: 1; padding-top: 0; padding-bottom: 0; }
.phero__grid {
  display: grid; grid-template-columns: 1fr 440px; gap: 56px;
  align-items: center;
  /* Отступы меньше прежних 104: высоту полосы теперь держит min-height
     самого экрана, а не набивка сетки. Прежние 104 сверху и снизу вместе
     с этой высотой выталкивали карточку калькулятора за низ окна. */
  padding: clamp(40px, 5vw, 80px) 0;
}
.phero__text { max-width: 62ch; }
.phero h1 {
  font-size: clamp(34px, 4.8vw, 64px); line-height: 1.03; letter-spacing: -.022em;
  color: #fff; margin: 0 0 20px;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
/* Золотая фраза не рвётся переносом: иначе на первой строке остаётся
   одинокий золотой предлог, а смысл уезжает на вторую. */
.phero h1 em { font-style: normal; color: var(--gold); white-space: nowrap; }
.phero__lead {
  font-size: var(--fs-base); line-height: 1.55; color: #e6dfd0;
  max-width: 52ch; margin: 0 0 28px; text-shadow: 0 1px 16px rgba(0,0,0,.5);
}
.phero__lead b { color: #fff; }
/* Доводы лентой поперёк. Столбиком они занимали треть ширины и оставляли
   справа пустоту. Столбик остаётся только на телефоне: тремя колонками по
   103 пикселя формулировки режет в лапшу. */
.phero__marks {
  display: grid; grid-template-columns: 1fr; gap: 12px 24px;
  margin: 0; padding: 20px 0 0; list-style: none;
  border-top: 1px solid var(--night-line);
}
.phero__marks li {
  position: relative; padding-left: 26px;
  font-size: var(--fs-small); color: var(--on-night-2);
}
.phero__marks li:before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* Карточка справа: калькулятор доставки, калькулятор платежа, щит гарантий */
.phero__card {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: 0 28px 72px rgba(0,0,0,.55);
}
.phero__card-head {
  margin: 0 0 16px;
  font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700;
}

/* ── Полоса доверия ────────────────────────────────────────────────────
   Идёт поперёк обеих колонок по низу первого экрана, на латунной нити,
   которая и так отделяет полосу от следующей. Не карточками: карточек
   в первом экране уже одна, вторая начнёт с ней спорить. Тонкая строка
   цифр читается как подпись под сценой, а не как ещё один блок.

   Кегль намеренно скромный. Плашка доверия, набранная крупнее заголовка,
   работает наоборот: чем громче дилер кричит, что ему можно верить, тем
   меньше верят. */
/* Отступ снизу такой же, как сверху. Без него полоса кончалась ровно на
   нижней границе последней плашки: на телефоне, где содержимое заполняет
   экран целиком, «21 days / or 500 miles to send it back» упиралось в край
   полосы вплотную и читалось обрезанным. На десктопе этого не было видно —
   там лишнее место съедало вертикальное центрирование. */
.phero__seals {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; margin: 0; padding: 22px 0;
  border-top: 1px solid var(--night-line);
}
.seal {
  padding: 0 24px; min-width: 0;
  border-left: 1px solid var(--night-line);
}
.seal:first-child { padding-left: 0; border-left: 0; }
.seal:last-child { padding-right: 0; }
.seal__top { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.seal b {
  font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.seal__cap {
  display: block; margin-top: 6px;
  font-size: var(--fs-label); line-height: 1.4; color: var(--on-night-2);
}
/* Звёзды рамками, а не символом из шрифта: на части систем ★ подменяется
   цветным эмодзи и уезжает по базовой линии.

   Селектор с двумя классами не случайно. Правило .seal span (класс плюс
   элемент) специфичнее, чем .seal__stars, и ставило звёздам display:block —
   пять звёзд выстраивались столбиком в высоту всей плашки. */
.seal .seal__stars { display: flex; gap: 3px; }
.seal__stars i {
  width: 12px; height: 12px; display: block; flex: 0 0 auto;
  background: rgba(245,240,230,.22);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.seal__stars i.is-on { background: var(--gold); }
/* Настоящие знаки партнёров, когда дилер их подтвердит */
.seal--logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.seal--logos img { height: 30px; width: auto; opacity: .85; }

@media (max-width: 1180px) { .phero__seals { grid-template-columns: repeat(3, 1fr); gap: 20px 0; } }
@media (max-width: 700px) {
  /* В две колонки, а не в столбик: пять строк подряд по одной цифре
     растягивают первый экран ещё на треть экрана. */
  .phero__seals { grid-template-columns: repeat(2, 1fr); gap: 18px 0; padding: 18px 0; }
  .seal { padding: 0 14px; }
  .seal:nth-child(odd) { padding-left: 0; border-left: 0; }
  /* Нечётное число плашек оставляло последнюю сиротой в половину ширины,
     а рядом дыру. Последняя в таком случае занимает строку целиком —
     это читается решением, а не остатком. */
  .seal:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .seal b { font-size: 20px; }
}

/* Появление. Скрытое состояние включает скрипт (is-anim) и он же снимает
   его (is-ready): упадёт скрипт — экран не будет анимирован, но и пустым
   не окажется. */
.phero.is-anim .eyebrow,
.phero.is-anim h1,
.phero.is-anim .phero__lead,
.phero.is-anim .phero__marks,
.phero.is-anim .phero__seals,
.phero.is-anim .phero__card {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.phero.is-anim.is-ready .eyebrow      { opacity: 1; transform: none; transition-delay: 60ms; }
.phero.is-anim.is-ready h1            { opacity: 1; transform: none; transition-delay: 140ms; }
.phero.is-anim.is-ready .phero__lead  { opacity: 1; transform: none; transition-delay: 220ms; }
.phero.is-anim.is-ready .phero__marks { opacity: 1; transform: none; transition-delay: 300ms; }
.phero.is-anim.is-ready .phero__card  { opacity: 1; transform: none; transition-delay: 260ms; }
.phero.is-anim.is-ready .phero__seals { opacity: 1; transform: none; transition-delay: 380ms; }
@media (prefers-reduced-motion: reduce) {
  .phero.is-anim .eyebrow, .phero.is-anim h1, .phero.is-anim .phero__lead,
  .phero.is-anim .phero__marks, .phero.is-anim .phero__card, .phero.is-anim .phero__seals {
    opacity: 1; transform: none; transition: none;
  }
}

/* Низкое окно. На ноутбуке 1366×768 и 1280×720 первый экран перелезал
   за низ на 45-98 пикселей: содержимое считалось по десктопным кеглям, а
   высоты под него нет. Ужимаем метрику полосы целиком — одним правилом
   на все страницы, а не по одной.

   Порог поднят с 820 до 980 после того, как в первый экран добавилась
   полоса доверия: на 1440×900 она вытолкнула содержимое за низ окна
   на 68 пикселей. 1080 остаётся нетронутым. */
@media (min-width: 981px) and (max-height: 980px) {
  .phero__grid { padding: 28px 0; gap: 40px; }
  .phero h1 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 14px; }
  .phero__lead { margin-bottom: 18px; }
  .phero__marks { padding-top: 14px; gap: 8px 24px; }
  .phero__card { padding: 20px 24px; }
  .phero__card-head { margin-bottom: 12px; }
  .phero__seals { padding-top: 16px; }
  .seal b { font-size: 21px; }
  .seal__cap { margin-top: 4px; }
}

/* Вторая ступень — совсем низкое окно (1366×768, 1280×800). Первой не
   хватало: у страницы состояния в первом экране и карточка щита, и полоса
   доверия, и вместе они перелезали ещё на 63-95 пикселей. Режем метрику
   дальше, но НЕ содержимое: ни один довод, ни одна плашка не прячется —
   человек на низком ноутбуке должен видеть то же, что на высоком. */
@media (min-width: 981px) and (max-height: 830px) {
  .phero__grid { padding: 20px 0; gap: 32px; }
  .phero h1 { font-size: clamp(28px, 3.1vw, 40px); margin-bottom: 12px; }
  .phero__lead { font-size: var(--fs-small); margin-bottom: 14px; }
  .phero__marks { padding-top: 12px; gap: 6px 20px; }
  .phero__seals { padding-top: 14px; }
  .seal b { font-size: 19px; }
  .phero__card { padding: 18px 22px; }
}

@media (min-width: 700px) {
  .phero__marks { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  .phero__grid { grid-template-columns: 1fr 400px; gap: 40px; }
}
@media (max-width: 980px) {
  /* Карточка уходит под текст, но остаётся в первом блоке: за цифрой в ней
     человек и пришёл, отправлять её вниз страницы нельзя. */
  .phero__grid { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .phero__text { max-width: none; }
  .phero__card { max-width: 560px; }
}
@media (max-width: 640px) {
  .phero__grid { padding: 40px 0 48px; }
  .phero__card { padding: 20px; }
}