/* Auren — Главная.
   Источник: Figma-файл Tm44GvalRw5C8CWEbuBRfD (полная копия, содержит главную —
   отличается от Ld6kVV1HwhMQg74aRs8P7y, по которому сделаны остальные 13 страниц).
   Спека секций: .design/spec/home.*.md */

/* ─── Кнопка: паддинг главной ───────────────────────────────────────────
   .au-btn (content.css, node 975:1517) даёт padding 16/24 — на главной три
   независимых замера (hero 1024:1444, карточка 1024:1457) дают 16/34.
   Не трогаю сайтовую кнопку, добавляю модификатор поверх нее. */
.au-btn--home {
  padding: 16px 34px;
}

/* ─── Точки-индикатор слайдера ───────────────────────────────────────────
   Node 1024:1334 (Slider pc): 3 круга ⌀10, шаг между центрами 32 (gap 22),
   последняя точка активна (opacity 1), остальные 0.15. Ассеты — просто
   заливка circle без векторной сложности → CSS, не svg (тот же принцип,
   что и в layout.header.md для линий). */
.au-dots {
  /* Цвет точек зависит от подложки: на фото hero они белые, на светлых секциях
     (флагманы, специалисты) — чёрные. Замерено по эталону: неактивная точка на
     белом даёт 217/255 = чёрный при той же opacity .15, активная — чистый чёрный.
     Поэтому цвет вынесен в переменную, а не продублирован вторым компонентом. */
  --au-dot-color: var(--au-white);
  display: flex;
  align-items: center;
  gap: 22px;
}

.au-dots--dark {
  --au-dot-color: var(--au-black);
}

.au-dots__item {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--au-dot-color);
  opacity: 0.15;
  transition: opacity 0.2s ease;
}

.au-dots__item--active {
  opacity: 1;
}

/* Точки лент строит slider.js кнопками (data-track-dots): сброс рамки и
   отступов кнопки, размер и цвет — от .au-dots__item. */
button.au-dots__item {
  padding: 0;
  border: 0;
  cursor: pointer;
}

/* VIS-12: ховер и фокус точек пагинации слайдеров (паттерн product.css:183) */
.au-dots__item:not(.au-dots__item--active):hover,
.au-dots__item:focus-visible {
  opacity: 0.5;
}
.au-dots__item:focus-visible {
  outline: 2px solid var(--au-dot-color, var(--au-black));
  outline-offset: 2px;
}

/* ─── Стрелки компонента Arrow 1 ─────────────────────────────────────────
   Секции «Специалисты», «Отзывы» и «Видео» используют общий Figma-компонент
   Arrow 1 (240×68 = две пилюли 108 с зазором 24). От пилюли слайдера он
   отличается ровно одним: у него есть обводка 1px rgba(0,0,0,.1), которая
   вместе с opacity .5 самой пилюли даёт на белом краевой пиксель 242/255
   (= 255 × (1 − 0.1×0.5)) — замерено по эталону. Без неё белая пилюля на
   белом фоне этих секций не видна вовсе. У слайдера главной обводки нет
/* Slider button — реюз из about.css (узел 975:2346) */
.au-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 68px;
  padding: 0;
  background: var(--au-white);
  border: 0;
  border-radius: 34px;
  opacity: 0.5;
  cursor: pointer;
}

.au-slider__btn:hover,
.au-slider__btn:focus-visible {
  opacity: 1;
}

/* VIS-08: клавиатурный контур фокуса у стрелок слайдеров (паттерн cart.css) */
.au-slider__btn:focus-visible {
  outline: 2px solid var(--au-black);
  outline-offset: 2px;
}

.au-slider__btn img {
  width: 56px;
  height: 20px;
}

.au-slider__btn--prev img {
  transform: scaleX(-1);
}

   (там кнопки лежат на #efefef, переход фон→заливка чистый 239→247),
   поэтому базовый .au-slider__btn не трогаем, а добавляем модификатор. */
.au-slider__btn--hairline {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Парная обёртка Arrow 1: две пилюли с зазором 24, общая ширина 240. */
.au-arrow-pair {
  display: flex;
  gap: 24px;
}

/* .au-page даёт padding-top: 93px под крошки и padding-bottom: 144px под
   пагинацию (content.css) — на главной нет ни крошек, ни пагинации: hero
   начинается сразу под header (абс. y 232 = ровно высота header), а полоса
   дисклеймера стыкуется с футером вплотную (13727…14270, футер с 14270). */
.au-page--home {
  padding-top: 0;
  padding-bottom: 0;
}

/* ─── Заголовок секции ───────────────────────────────────────────────────
   Девять секций главной (слайдер, флагманы, каталог, о компании, специалисты,
   отзывы, видео, заявка, дисклеймер) несут один и тот же H2: в макете это
   72/70 на y144 у гаттера, на mb 36/normal на y72. Типографика и акцент
   уже описаны сайтовым `.au-h2` / `.au-h2__accent` (content.css) — здесь только
   то, чего у сайтового заголовка нет: абсолютная привязка к координатам секции.
   В разметке класс идёт парой: `au-h2 au-home-h2`. */
.au-home-h2 {
  position: absolute;
  left: var(--au-gutter);
  top: var(--au-tail);
  margin: 0; /* .au-h2 несёт margin-top 24 под крошки — здесь координата точная */
}

@media (max-width: 1023px) {
  .au-home-h2 {
    left: var(--au-gutter-mb);
    top: var(--au-tail-mb);
  }
}

/* ─── Гарнитура заголовков главной ───────────────────────────────────────
   Макет «Главная/pc тонкий» (3136:3548) переводит на Inter Tight ровно один
   ярус — заголовки: заголовки секций (3136:3599, 3136:3594) и первый экран
   (3136:3553) набраны Inter Tight Regular при тех же размерах и интерлиньяже,
   что были у Inter Semi Bold (72/70, 96/94). Служебные ярусы в том же макете
   остаются на Inter: кнопки — Inter Bold 16, пилюли хедера — Inter Regular 16,
   подписи в карточках — Inter Medium 16, заголовки видеокарточек —
   Inter Semi Bold 32. Поэтому меняем шрифт у заголовков, а не у body.

   Приставка `.au-page--home` обязательна, а `.au-home-*` сама по себе не
   признак главной: `home.css` подключён на всех страницах, а блоки заявки и
   дисклеймера стоят ещё на 35 и 18 ресурсах (каталог, карточка продукта и
   прочие). Без приставки их H2 уезжали на Inter Tight 400, тогда как H1
   страницы оставался Inter Semi Bold 600 — две гарнитуры и разрыв в 200
   весов внутри одной страницы. Обёртка `.au-page--home` уже существует
   (templates/home.tpl) и на других страницах не встречается.

   Волна «более тонкого шрифта» (владелец, сентябрь 2026) вышла за этот ярус:
   тонким стал не только заголовочный, но и текстовый слой — карточки
   «Флагманские продукты», «О компании», «Специалисты AUREN», заголовки
   видеокарточек и абзац героя. В тонком макете эти ярусы остались на Inter
   (подписи карточек «О компании» там и вовсе прежние Semi Bold 32), так что
   переносим не макет, а прямое указание владельца. Семейство при этом всё
   равно одно — Inter Tight, и вот почему: у Inter объявлен диапазон 400 700,
   поэтому font-weight: 300 на нём молча рисуется как 400 (замер чернил: 300 и
   400 на Inter совпадают до пикселя — живьём это делают буквы слайдера,
   .au-home-slider__word), а у Inter Tight объявлено 300 700 — только там
   «легче» исполняется. Оба файла несут ось 100…900, дело в объявлении.
   Отдельные обоснования — у каждого правила, ниже по файлу. */
/* §137: .au-home-h2 убран — гарнитуру и вес берёт общий .au-h2. */
.au-page--home .au-home-hero__title,
.au-page--home .au-home-courses__title,
.au-page--home .au-home-telegram__title,
.au-page--home .au-home-zayavka__success-title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 400;
}

/* ─── Hero ────────────────────────────────────────────────────────────────
   PC 1024:1439 (1920×1080), MB 1024:1736 (390×844). Один фон-снимок
   (md5 идентичен на pc/mb), только кроп разный — object-position вместо
   двух файлов.

   Высота. Было height: 1080px на всём pc-диапазоне, и в боксе 1024×1080
   кадр 1920×1080 масштабировался по высоте с множителем 1, теряя по ширине
   46.7 % картинки. Кадр в источнике ровно 16:9, поэтому высота идёт за
   56.25vw (9/16 ширины вьюпорта): множитель W/1920 ≤ 1, то есть видео
   уменьшается, а не обрезается, и кроп нулевой на всём pc-диапазоне.
   Границы шкалы: 1080 сверху — макетная, 555 снизу. 555 складывается из
   тела 449 (H1 182 + 36 + абзац 99 + 64 + кнопка 68) и наибольших отступов:
   нижний 66 (см. padding) и верхний 40. Было 543 (тело 437, абзац 3 × 29):
   волна «более тонкого шрифта» подняла абзац 16/29 → 18/33 — 3 × 33 = 99,
   +12 к телу, +12 к полу. Верхние 40 — запас, а не макетная
   величина: при нулевом чернила прописной начинаются в 11.8px от кромки
   (line-height 91 меньше кегля 93) и заголовок читается прилипшим к белой
   шапке. Запас задан padding-top, а не прибавлен к клампу: иначе длинный
   текст из админки растянул бы секцию до самого заголовка и запас бы исчез.
   Пол теперь нигде не включается: уже на 1024 кадр даёт 576 > 555, поэтому
   высоту на всём диапазоне задаёт соотношение, а пол остаётся проверкой
   «копия влезает» (и включится, если кегли вырастут). Запас растёт до
   макетных 472 на 1920. На 1024 под копию остаётся 576 − 40 − 40 = 496
   против тела 449, то есть 47px запаса (было 59 при теле 437: верхний отступ
   40 и нижний min(gutter, 66) = 40 на этой ширине).

   Кегли и интерлиньяжи. Заголовок 96/94 → 93/91, абзац 20/36 → 16/29 — по
   правке владельца (на 3 и на 4); затем абзац 16/29 → 18/33 волной «более
   тонкого шрифта» (+2 кегля, Inter Tight Light 300, см. `.au-home-hero__text`).
   Оба отношения сохранены: у заголовка 0.979, то есть интерлиньяж остаётся
   МЕНЬШЕ кегля — это и есть его характер, при 93/94 он теряется; у абзаца
   1.833 — воздух дека (1.8 у макета; округление вверх, см. `__text`).
   Абзац на 16 в макетном боксе 701 переносился в две строки и терял форму
   ноды (в макете три), поэтому его ширина пересчитана по коридору переноса.

   min-height, а не height: заголовок и абзац правятся в админке, и при
   height длинный текст уходил бы под overflow: hidden молча. Теперь
   бокс растёт под копию (тело + отступы), а кламп задаёт только то,
   короче чего секция быть не должна. В макетной копии это те же числа:
   тело 449 < 555 < 1080.

   Выше 1920 упирается в 1080: кадр шире 1920 не станет, множитель всё
   равно W/1920, а трекинг дал бы 1440 на 2560 — секцию вдвое выше вьюпорта
   ради снятия вертикального кропа, которого на этих экранах не видно.
   Мобильная ветка: 844 — высота кадра Figma 390×844, ниже 390 кламп её
   держит, а к 1023 шкала спускается до 576 — это высота pc-ветки на 1024
   (56.25vw), иначе на шве 1023/1024 секция прыгала бы вниз на 268px
   (прежде прыгала вверх, 844 → 1080). */
.au-home-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(555px, 56.25vw, 1080px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Левый и нижний отступы равны до 1440 (40 на 1024 — 66 на 1440), выше
     1440 левый продолжает расти до макетных 96 (иначе блок вышел бы из
     контентной сетки), а низ за ним не идёт и остаётся на 66: у низа
     функциональной работы нет, он задаёт только просвет до кромки, и на
     1920 блок стоял бы на 30px выше без причины. 66 — это --au-gutter на
     1440: 40 + 56 × 416/896; правило проверяется тестом против самой
     шкалы, поэтому при её смене 66 надо пересчитать.
     Верхние 40 — запас над H1, а не макетная величина (см. выше).
     §139: горизонтальных отступов у секции больше нет — копия лежит в
     .au-container (см. разметку), поэтому выше 1920 её левый край идёт по
     контентной колонке, а фон и видео остаются полноширинными. */
  padding: 40px 0 min(var(--au-gutter), 66px);
}

.au-home-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Фон — видео, а не снимок. На 1920 кадр 1920×1080 совпадает с боксом,
   поэтому кропа нет; ниже высота идёт за 16:9, так что бокс совпадает с
   кадром от 1024 до 1920 и кроп нулевой во всей полосе (прежде пол 648
   держал бокс выше кадра, и в 1024…1152 cover срезал по ширине 11…0 %).
   object-position по центру удерживает кадр при сужении экрана. */
.au-home-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

.au-home-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.au-home-hero__body {
  /* Бокс держит заголовок, а не абзац: в макете заголовок не переносится
     (две строки по <br>, 3136:3553), а абзац ниже держит свою ноду отдельно
     (701 в макете, 533 здесь — см. __text). Аванс «на уровне клеток» в
     Inter Tight 723 (746 при кегле 96), поэтому 701 ронял «клеток» на третью
     строку и верх H1 уезжал на 94 вверх от макета.
     Ширину берём с запасом: она здесь ничего не выравнивает, только выбирает
     перенос. */
  max-width: 780px;
}

.au-home-hero__title {
  /* 36 — из макета (низ H1 660 = 472 + 188, верх абзаца 696) и столько же на
     живом 1920 (низ H1 747, верх абзаца 783): сами y разные, потому что живой
     стек прижат к низу секции, а макет ставит блок по y. */
  margin: 0 0 36px;
  font-size: 93px;
  line-height: 91px; /* 93 × 94/96 = 91.1 → 91 (0.978 против макетных 0.979):
    интерлиньяж остаётся МЕНЬШЕ кегля — это и есть характер заголовка */
  color: var(--au-white);
}

.au-home-hero__text {
  /* Волна «более тонкого шрифта» (владелец): +2 кегля и один шаг веса вниз.
     Семейство переезжает на Inter Tight потому, что только у него в base.css
     объявлен диапазон от 300: у Inter объявлено 400 700, и просьба «легче»
     там не исполняется — 300 молча рисуется как 400 (замер чернил: 300 и 400
     на Inter совпадают до пикселя; живьём это делают буквы слайдера,
     .au-home-slider__word). Оба файла несут ось 100…900, дело в объявлении.
     18 — это 16 + 2: тот же абсолютный шаг, который владелец уже
     санкционировал на этой странице (20 → 16). «Пт» читаем как px: страница
     и оба макета в px.

     Интерлиньяж 33: текущее отношение 29/16 = 1.8125, 18 × 1.8125 = 32.625,
     ближайшее целое 33. Макетное отношение 1.8 дало бы 32.4, то есть 32 ушло
     бы НИЖЕ макетного воздуха (1.778), а округляем вверх — как 28.8 → 29.

     Ширина пересчитана заново, а не сдвинута арифметикой: коридор промерен
     целыми ширинами 400…720 настоящим файлом шрифта, с <b>AUREN</b> и без
     word-break. Три строки держатся в 483…673, с 598 последняя строка
     вырождается в одно слово («биохакинг.») — рабочий диапазон 483…597,
     середина 540, берём её. Прежние 533 остаются внутри (50px до границы
     четырёх строк, 64px до висячего слова). Замер воспроизводит живую
     разбивку на 533 слово в слово (при 16/29 последняя строка «выбирает
     science-based биохакинг.», 282.1) — им же исправлен прежний порог:
     в заметке стояло 605, живая страница и харнесс дают 570 для 16/29.
     Ширина здесь ничего не выравнивает, только выбирает точку переноса. */
  max-width: 540px;
  /* Отступ 64 — тот же, что в макете (там абзац 696…804, кнопка 868), и на
     живом 1920 он равен: низ абзаца 882, кнопка 946. Числа макета выше, потому
     что кадр ставит блок по y, а живая секция прижимает стек к низу
     (justify-content: flex-end; кнопка 1014 + нижний отступ 66 = 1080), так что
     низ абзаца не зависит от высоты копии: 3 × 33 = 99. */
  margin: 0 0 64px;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 33px;
  color: var(--au-white);
}

.au-home-hero__text b {
  /* Курсивного начертания у пары не заведено — акцент держится только весом,
     поэтому 700 → 600 вместе с абзацем: у абзаца 300, и 700 давал разрыв в
     четыре шага вместо макетных трёх (Regular против Bold), то есть шаг был
     применён к половине абзаца. Замер на живом 1920: чернила «AUREN»
     59.7 → 58.86 (−0.84px), разбивка строится слово в слово как при 700
     (первая строка 311.02, третья «кто выбирает science-based биохакинг.»),
     высота абзаца 99 не меняется. */
  font-weight: 600;
}

/* Кнопка — по содержимому, а не во всю ширину тела (780): растянутая во всю
   колонку пилюля и читается как «дёшево». Приём тот же, что у .au-course__cta:
   max-content плюс пол по макетному боксу. Макет — 200 × 68, padding 16/34
   (node 1024:1444), то есть подпись 132; в браузере та же подпись даёт 118.66,
   так что max-content один дал бы 186.66 — пол возвращает макетные 200.
   Высота 68, радиус 260 и паддинг 16/34 приходят из .au-btn/.au-btn--home и
   здесь не переопределяются. Только pc: на mb кнопка во всю ширину тела. */
.au-home-hero__cta--pc {
  width: max-content;
  min-width: 200px;
}

.au-home-hero__cta--mb {
  display: none;
}

@media (max-width: 1023px) {
  .au-home-hero {
    /* 844 на 390 — высота кадра Figma; к 1023 шкала спускается до 576 —
       высоты десктопной ветки на 1024 (56.25vw, её пол 543 там ещё не
       включается), иначе на шве секция прыгала бы на 268px вниз (прежде
       прыгала вверх, 844 → 1080). Между 390 и 1024 макета нет, поэтому это
       прямая между двумя известными боксами — тот же приём, что у --au-k.
       Ниже 390 кламп держит кадр Figma: секция не растёт. */
    min-height: clamp(576px, calc(844px - (100vw - 390px) * 268 / 633), 844px);
    /* 142 — макетный просвет: 844 − низ кнопки 702 (634+68). Правило равных
       левого и нижнего отступов (см. padding базовой ветки) сюда не идёт:
       оно про композицию pc на 1024…1440, а на телефоне низ кнопки должен
       отходить от кромки кадра — 26 и есть гаттер, а не просвет. Горизонталь
       даёт .au-container (§139), как и на pc. */
    padding: 0 0 142px;
  }

  .au-home-hero__video {
    /* Кадр 16:9 в боксе 390×844 — портретном. cover ведёт по высоте
       (множитель 0.7815), поэтому режутся бока: 74 % на 390. По вертикали
       кадр при этом совпадает с боксом, и сдвигать внутри нечего — замер со
       сменой вертикальной доли на 0 % и на 100 % даёт тот же кадр пиксель в
       пиксель. 60 % оставлены как намерение вёрстки: они сработают, если
       ролик заменят кадром другого формата. */
    object-position: 50% 60%;
  }

  .au-home-hero__scrim {
    background: rgba(0, 0, 0, 0.65);
  }

  .au-home-hero__body {
    max-width: 329px;
  }

  .au-home-hero__title {
    margin: 0 0 24px; /* низ H1 447 (285+162) до верха абзаца 471 */
    font-size: 48px;
    line-height: 54px;
  }

  .au-home-hero__text {
    margin: 0 0 48px; /* низ абзаца 586 до верха кнопки 634: абзац прижат к кнопке */
    /* Волна «более тонкого шрифта» на мобильном: семейство и один шаг веса
       (500 → Inter Tight 400) плюс, с 2026-09-23, тот же +2 кегля, что на
       десктопе — 18/26. Кегль 16 держался здесь ради пяти строк ноды
       1024:1740 (329 × 115), но предпосылка не выжила смену семейства: Inter
       Tight уже́, и 16/23 в боксе 329 давали четыре строки. Пять строк в тех
       же 329 даёт 18/26 — форма возвращается тем же +2, а не сужением бокса:
       .au-home-hero__body sizing и H1, и абзац, поэтому «чинить» абзац уже́м
       значило бы переписать перенос заголовка.
       Низ абзаца прижат к кнопке (586) и не двигается, поэтому 5 × 26 = 130
       растут вверх: верх абзаца 456, низ H1 432 (на 15px выше макетного 447).
       Вес остаётся 400, а не десктопные 300: на мобильном «на шаг легче» — это
       500 → 400. */
    font-size: 18px; /* повторены явно: десктопное правило выше даёт 18/33 */
    font-weight: 400;
    line-height: 26px;
  }

  .au-home-hero__cta--pc {
    display: none;
  }

  .au-home-hero__cta--mb {
    /* Во всю ширину тела (329), хотя нода макета 1024:1741 — 220 × 68: на
       телефоне кнопка-во-всю-ширину это рабочий паттерн (так же сданы
       заявка и курсы), а правка владельца была про pc. Расхождение с макетом
       зафиксировано в context/decisions.md. */
    display: flex;
  }
}

/* ─── 3 карточки-преимущества ───────────────────────────────────────────
   PC 1024:1447/1460/1473 (560×693 каждая, gap 24), MB 1024:1774/1746/1759
   (338×413, в столбик). Позиции title/items/кнопки — абсолютные точные
   координаты Figma (не margin-цепочка): после урока с Hero это надёжнее,
   т.к. высота обёртки заголовка в Figma не дана явным числом. */
.au-home-features {
  margin-top: var(--au-section-gap); /* зазор от низа первого экрана (в макете 1312) до верха карточек 1456;
    высота первого экрана плавает, но зазор считается от её нижней кромки */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.au-home-features__card {
  position: relative;
  /* 693 на 1920. Ниже карточка сужается втрое (560 → 299), и макетная высота
     оставляет под кнопкой мёртвое поле: внутренние координаты (заголовок 96,
     список 181, кнопка 561) считаны от ширины 560. Высота идёт по той же
     шкале, что и остальная страница. */
  height: calc(520px + 173px * var(--au-k));
  overflow: hidden;
  border-radius: 20px;
  background: #efefef;
  color: var(--au-black);
}

.au-home-features__card--dark {
  background: #686876;
  color: var(--au-white);
}

/* Все три фото в макете упираются в правый и нижний край карточки
   (116+444=560, 241+452=693 и так же у остальных двух), поэтому смещение
   задаётся долей от карточки, а не пикселями от ширины 560: иначе ниже 1920
   фото уезжает за клип и в кадре остаётся пустой угол. */
.au-home-features__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Фото — подложка: ниже 1920 карточка сужается, и текст с кнопкой
     оказываются над ним. В макете на 1920 они не пересекаются. */
  z-index: 0;
  background-repeat: no-repeat;
}

.au-home-features__title,
.au-home-features__list,
.au-home-features__cta {
  z-index: 1;
}

/* Зум задавался парой процентов (379.05% 277.87%) — по каждой оси отдельно,
   поэтому ниже 1920 снимок плющило: бокс очерчен краями в долях карточки и
   меняет пропорции вместе с шириной экрана. Одно значение пропорции спасало,
   но привязывало масштаб к ширине бокса, и объект перестал вмещаться.
   `cover` тоже не годится: он вписывает весь кадр 2400×1792 вместе с широкими
   прозрачными полями, и объект выходит мелким (см. §32).
   Зум привязан к высоте бокса — второе число из таблицы макета
   (.design/spec/home.features.md). На 1920 кадр совпадает с макетом, ниже
   объект держит масштаб относительно карточки, пропорции файла целы.
   Клип по краям здесь намеренный: снимок работает фактурой, не товаром.
   Снимки — те товары, что названы в заголовках карточек (ручка 04, спрей 06,
   ампула 02): свои файлы features-*, не product-* из слайдера hero. Объект
   вписан в прежний бокс макетного кадра, поэтому числа кропа не менялись. */
.au-home-features__photo--metabolic {
  left: 20.71%; /* 116 / 560 */
  top: 34.78%; /* 241 / 693 */
  background-image: url(../img/home/features-pen-04-metabolic.webp);
  background-position: 41.5% 43.9%;
  background-size: auto 277.87%;
}

.au-home-features__photo--radiance {
  left: 25.18%; /* 141 / 560 */
  top: 31.03%; /* 215 / 693 */
  background-image: url(../img/home/features-spray-06-radiance.webp);
  background-position: 43.2% 42.2%;
  background-size: auto 228.06%;
}

.au-home-features__photo--regenerate {
  left: 20.89%; /* 117 / 560 */
  top: 35.5%; /* 246 / 693 */
  background-image: url(../img/home/features-ampoule-02-regenerate.webp);
  background-position: 42.8% 40.9%;
  background-size: auto 270.09%;
}

.au-home-features__title {
  /* Обёртка в Figma — auto-layout 68px высотой с центрированием (items-center
     justify-center), а не текст впритык к top: 96 — иначе строка съезжает
     вверх на ~10px (поймано скриншот-сверкой, см. лог). 68 = 48 строки 40px
     + 2×10 паддинга, как у Frame 22 (3136:3558).
     Набор — Inter Tight Light 40 (3136:3560); прежние Inter Medium 32 были из
     старого файла (1024:1424). Сабсет расширен до `300 700`, поэтому 300
     теперь и рисуется как Light, а не упирается в 400. */
  position: absolute;
  left: 64px;
  top: 96px;
  height: 68px;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 300;
}

.au-home-features__list {
  position: absolute;
  left: 64px;
  top: 181px;
  right: 64px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  /* Зазор в ряд 36 — макетный (пункт 2 у карточек 1–2 стоит на x318 при
     маркере пункта 1 на x64: 64+14+8+159.6 = 245.6 текста, до 318 остаётся
     36.4). Вертикальный зазор отделён от него и снижен с 36 до 12 по правке
     владельца от 2026-09-22: 36 между строками кегля 16 — это 1.8 интерлиньяжа
     пункта, и на трёх карточках подряд список читался россыпью. Мерено:
     просвет между строками был 40px на всех ширинах (36 зазора + 4 от бокса
     строки 24 против чернил 20), стал 16px — одинаково в обеих карточках с
     двумя пунктами и в третьей с тремя, на всех ширинах 390…1920.
     Нечётности в замерах не было: 40/40 на 390, 1280, 1440 и 39…40 на 1024,
     где пункты переносятся и просвет считается от последней строки пункта.
     Зазор в ряд не влияет на перенос: он зависит от ширины пунктов. */
  gap: 12px 36px;
}

.au-home-features__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

/* На 1920 пункты в макете одной строкой, nowrap держит их от случайного
   переноса. Ниже карточка сужается втрое и самый длинный пункт
   («Усвоение через слизистые») уходил под клип — там перенос разрешён. */
@media (max-width: 1919px) {
  .au-home-features__item {
    white-space: normal;
  }
}

/* Кегль оставлен от текстового «+»: он держит строку пункта 24px, как у
   остальных маркеров. Крест рисует общий .au-plus-icon (content.css), колонка
   маркера там 14 — прежний глиф занимал 13.36 (аванс Inter Medium 20), поэтому
   текст пункта сдвинулся вправо на 0.64px. */
.au-home-features__marker {
  font-size: 20px;
}

/* В макете кнопка стоит на 64 от низа карточки (561+68=629 при высоте 693).
   Привязка к низу, а не top: 561 — высота карточки течёт вместе со страницей,
   и фиксированный отсчёт сверху выносил кнопку за нижний край. */
.au-home-features__cta {
  position: absolute;
  left: 64px;
  bottom: 64px;
}

@media (max-width: 1023px) {
  .au-home-features {
    grid-template-columns: 1fr;
  }

  .au-home-features {
    margin-top: var(--au-section-gap-mb); /* зазор от низа первого экрана (в макете 844) до верха карточки 916 (rel y72 внутри секции,
      не 144 как pc); высота первого экрана плавает, зазор считается от её нижней кромки */
    padding-bottom: var(--au-tail-mb); /* 139 из макета — остаток фрейма, а не хвост:
      фрейм Figma 1024:1745 высотой 1567, карточки кончаются на rel y1428 (946+482),
      и 139 — это просто разница до нижней кромки фрейма. Секция приведена к общему
      мобильному ритму, как соседи, — низ карточек до низа секции 72.
      Замер 2026-09-23 на 390: было 139, стало 72 (высота секции 1495 → 1428).
      Внутренний запас карточек правка не трогает: он считается от их собственной
      высоты (413/413/482), а не от хвоста секции, — просвет до кнопки остался
      72/72/95, как и был. */
  }

  .au-home-features__card {
    height: 413px;
  }

  .au-home-features__card--3 {
    height: 482px; /* карточка 3 (3 пункта) выше сиблингов — Figma 1024:1759, не 413 */
  }

  .au-home-features__photo--metabolic {
    left: 108px; top: 172px; width: 230px; height: 241px;
    background-position: 40.2% 42.3%;
  }

  .au-home-features__photo--radiance {
    left: 131px; top: 153px; width: 207px; height: 260px;
    background-position: 41.4% 41.4%;
  }

  .au-home-features__photo--regenerate {
    left: 114px; top: 245px; width: 224px; height: 237px;
    background-position: 41.8% 40.5%;
  }

  .au-home-features__title {
    left: 36px;
    top: 64px;
  }

  .au-home-features__list {
    left: 36px;
    top: 149px;
    right: 36px;
  }

  .au-home-features__card--3 .au-home-features__list {
    top: 159px;
  }

  /* Ниже 1024 карточка тянется по ширине экрана (на 1023 список 899 против
     макетных 266 на 390), и обёрточный ряд укладывал пункты по несколько в
     строку. Полоса считается из ширин пунктов: паре «Чистота 98%» (126) +
     зазор 36 + «Точное дозирование» (186) нужно 348, а списку достаётся
     100vw − 124 (карточка во всю ширину минус инсеты 36 + 36) — это 473;
     у карточки 2 пара своих пунктов (236 + 36 + 126 = 398) встаёт с 523,
     у карточки 1 (218 + 36 + 155 = 409) — с 534, а все три пункта карточки 3
     (566) — с 691. Внутри полосы 473…1023 список мерил 24–60 вместо 96: на 768
     просвет до кнопки 108/108/167 против 72/72/95 на 390, а на шве 1023→1024
     раскладка возвращалась к столбику — пункты перекладывались дважды, хотя
     между 390 и 1024 макета нет и раскладка должна читаться одинаково.
     Пункт забирает строку целиком, и по всей полосе 390…1023 выходит ровно то,
     что на 390: 72/72/95.
     Порог в отдельном @media (min-width: 473px) не выносится: он посчитан из
     ширин текста, а пункты редактируются в админке (renderLines), и при другой
     длине полоса сдвинется вместе с ними.
     На 1024+ правило не действует: там карточка сужена втрое, пункты и так
     идут по одному, а парные строки — макетные 1920 (с 1635 и с 1804). */
  .au-home-features__item {
    flex-basis: 100%;
  }

  .au-home-features__cta {
    left: 36px;
    top: 281px;
  }

  .au-home-features__card--3 .au-home-features__cta {
    top: 350px;
  }
}

/* Кегль заголовка едет вместе с карточкой: 32 на 1024 и макетные 40 к 1200,
   выше не растёт — поэтому 1440 и 1920 стоят ровно на макетных 40.
   Без этого ряда заголовок ломается на две строки в полосе 1024…1119:
   карточке там доступно 234.7, а самой длинной подписи «02 Regenerate» при
   40px нужно 259.2 — вторая строка вылезает из бокса 68 на 15px вверх и вниз
   и роняет зазор до списка с 26.5 до 2.0. Ход подобран под рост самой
   карточки: 8px кегля на 176px обзора — это 0.295px на пиксель против 0.292
   у карточки, поэтому запас до правого края держится 27px по всей полосе.
   Ниже 1024 правило не работает намеренно: планшетный блок отдаёт карточке
   935, и заголовок там остаётся 40 — на шве кегль меняется вместе со всей
   перекладкой (лево 36 → 64, верх 64 → 96, высота карточки 482 → 520). */
@media (min-width: 1024px) {
  .au-home-features__title {
    --au-features-k: clamp(0, (100vw - 1024px) / 176 / 1px, 1);
    font-size: calc(32px + 8px * var(--au-features-k));
  }
}

/* ─── Слайдер «Форма выпуска» ─────────────────────────────────────────────
   Figma: компонент Section 187, 3 state-варианта (Home screen 3/3.1/3.2),
   в потоке лежит ОДИН инстанс на breakpoint — не стек из 3 секций, а карусель
   с одним видимым слайдом (доказано координатами соседних секций, см.
   .design/spec/home.slider.md). PC 1024:1488 (margin-top 144, как hero→features),
   MB 1024:1787 (margin-top 0 — вплотную к Features).

   Реюз: пилюля-кнопка — .au-slider__btn (about.css, узел 975:2346 — тот же
   компонент, что и в этом макете, значения 108×68/radius 34 совпадают 1:1),
   стрелка — существующий icon-arrow-pagination.svg (сверено по геометрии
   path, не по имени), листание — существующий slider.js без изменений
   (шаг = ширина первого слайда, работает для любого числа одинаковых по
   ширине карточек).

   Заголовок/описание/кнопки идентичны во всех 3 слайдах (Figma дублирует
   их в каждом state-варианте) — вынесены один раз в .au-home-slider__overlay
   поверх трека, а не повторены 3× на слайд: позиция не меняется между
   слайдами, визуально неотличимо от дублирования, но не плодит 3 копии
   одного h2/кнопок в DOM и слушателей на один и тот же трек. */
.au-home-slider {
  position: relative;
  overflow: hidden;
  /* Правка заказчика 2026-09-27 (§156): на pc слайдер не выше 660, чтобы
     помещаться в экран ноутбука. Макет 1080 сжат целиком в 660/1080 = 0.611:
     фото, вотермарк и тень ручки — в этой пропорции, подписи и кнопки
     кегля не меняют и перераскладываются по нижней кромке. */
  height: 660px;
  /* Цветная полоса без своих полей: весь воздух снаружи. Сверху карточки
     Features (тоже без хвоста) — полный зазор, снизу заголовок Флагманов со
     своей головой 48 — половина. */
  margin: var(--au-section-gap) 0 var(--au-tail);
}

.au-home-slider__track {
  display: flex;
  height: 100%;
  scroll-snap-type: x mandatory; /* макет не может выразить физику скролла — это разумное
    дополнение к статике: кнопки и так листают ровно на ширину слайда, snap просто
    гарантирует тот же результат при ручном свайпе/драге трека */
}

.au-home-slider__slide {
  position: relative;
  /* Без overflow:hidden вотермарки (400px, left:calc(50%±N)) на узких
     слайдах геометрически вылезают за пределы своего слайда в трек и ложатся
     поверх буквы соседнего — оба всегда в DOM трека одновременно, виден
     только текущий по скроллу, но без обрезки бывшая «aU» слайда 2 заезжает
     под слайд 1. Тот же приём, что и у .au-home-slider__photo--pen выше. */
  overflow: hidden;
  flex: none;
  width: 100%;
  height: 100%;
  background: #efefef;
  scroll-snap-align: start;
}

/* Вотермарк AUREN — только pc, во всех 3 слайдах идентичен. Порядок в DOM
   (R → фото → EN → AU) даёт правильный z-порядок без z-index: буква «R»
   лежит под фото-кропом слайдов 2-3 (частично перекрыта), «EN»/«AU» — поверх,
   по краям от фото. Значения — calc(50% ± Npx), т.к. Figma даёт их именно
   так (сам макет 1920 шириной, точка отсчёта — центр).
   Капс приходит из разметки: в `home.slider.tpl` лежат литералы `AU` / `R` /
   `EN`. До решения владельца 2026-09-23 там были `aU` / `r` / `en`, а регистр
   поднимал `text-transform: uppercase` — объявление снято, буквы написаны как
   рисуются, отрисовка не изменилась ни на пиксель. */
.au-home-slider__watermark {
  position: absolute;
  top: calc(50% - 170px); /* 484 × 0.611 = 296 по центру, на 22px выше — над подписью */
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 244px; /* 400 × 0.611 */
  line-height: normal;
  white-space: nowrap;
  color: var(--au-white);
  pointer-events: none;
}

.au-home-slider__watermark--r {
  left: calc(50% - 77px);
  opacity: 0.25;
  mix-blend-mode: soft-light;
}

.au-home-slider__watermark--en {
  left: calc(50% + 82px);
  opacity: 0.5;
}

.au-home-slider__watermark--au {
  left: calc(50% - 419px);
  opacity: 0.5;
}

/* Фото — только слайды 2-3 (слайд 1 в макете без фото: слой есть, но
   hidden=true на pc и вовсе отсутствует на mb — осознанное состояние
   дефолтного слайда, не баг, см. спеку). background-position/-size считаны
   из Figma-кропа формулой P = offset% / (1 − scale%), проверенной на
   карточках Features (см. .au-home-features__photo). */
.au-home-slider__photo {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Слайд 1: кадр ручки 06 RADIANCE из Figma (файл 2880×1359 = 1.5x к 1920×906, прозрачный фон,
   тень в кадре). В макете слой идёт во всю ширину слайда 1:1: верх ручки на
   y134 = 18 + 116 (верх ручки в кадре). Высота фиксирована, ширина — от
   высоты: ниже 1920 прозрачные края кадра обрезаются, ручка остаётся по
   центру и своего размера. */
.au-home-slider__photo--pen {
  left: 0;
  right: 0;
  top: 11px;     /* 18 × 0.611 */
  height: 554px; /* 906 × 0.611: ручка в кадре y81…517 */
  background-image: url(../img/home/slider-pen-06-radiance-hd.webp);
  background-position: 50% 0;
  background-size: auto 100%;
}

.au-home-slider__photo--sprays {
  left: 50%;
  transform: translateX(-50%);
  top: -9px; /* верх кадра обрезается overflow слайда — так в Figma, не 0 */
  width: 968px;  /* 1584 × 0.611 */
  height: 668px; /* 1094 × 0.611 */
  background-image: url(../img/home/product-spray.webp);
  background-position: 50% 115.4%;
  background-size: 100%;
}

.au-home-slider__photo--bottle {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 950px;  /* 1554 × 0.611 */
  height: 660px;
  background-image: url(../img/home/product-ampoule.webp);
  background-position: 50% 50%;
  background-size: 100%;
}

/* Цена/категория — меняются по слайдам, поэтому живут внутри
   .au-home-slider__slide, а не в общем overlay (в отличие от заголовка). */
.au-home-slider__price {
  position: absolute;
  left: 50%;
  top: 580px; /* под подписью, низ 619 — на уровне низа стрелок 620 */
  transform: translateX(-50%);
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: normal;
  white-space: nowrap;
  color: var(--au-black);
}

/* Слайд 1: у цены разный пробел вокруг тире на pc/mb в самом макете
   («15 000 – 20 000 ₽.» vs «15 000–20 000 ₽.», слайды 2-3 одинаковы на
   обоих breakpoint) — не опечатка вёрстки, воспроизводим буквально. */
.au-home-slider__price--mb {
  display: none;
}

/* Слово формы выпуска. В макете нода несла uppercase, но по решению владельца
   2026-09-23 регистр берётся из текста: в конструкторе лежат `Ручка` / `Спреи`
   / `Флаконы` — с заглавной только первая буква. До правки здесь стоял
   `text-transform: uppercase`, и три строки читались `РУЧКА` / `СПРЕИ` /
   `ФЛАКОНЫ`; снятие объявления без правки данных дало бы разнобой, потому что
   в базе `ручка` и `флаконы` были строчными, а `Спреи` — с заглавной. */
.au-home-slider__category {
  position: absolute;
  left: 50%;
  top: 533px; /* 14px под низом ручки 517 с тенью */
  transform: translateX(-50%);
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  opacity: 0.3;
  white-space: nowrap;
  color: var(--au-black);
}

/* Overlay — заголовок/описание/кнопки, общие для всех слайдов (см. комментарий
   у .au-home-slider выше). pointer-events:none на обёртке, чтобы не мешать
   скроллу/свайпу трека под ней — кроме самих кнопок, им нужен auto.
   §139: класс au-container даёт оверлею ширину колонки 1920 с центрированием,
   поэтому заголовок, описание и стрелки стоят по контентной сетке и выше 1920
   (416 и 2144 на 2560); трек и фото слайдов остаются полноширинными. */
.au-home-slider__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.au-home-slider__title--pc {
  top: 48px; /* 660-слайдер: 144 съело бы четверть высоты */
}

.au-home-slider__title--mb {
  display: none;
}

.au-home-slider__text {
  position: absolute;
  /* left:1249/width:575 сходились только на 1920 (1249+575=1824=1920-96,
     край как раз в гаттере) — ниже 1024 фиксированный left уводил блок
     за правый край. Правый край и так на гаттере, поэтому крепим к нему
     явно и тянем ширину по --au-k (300 при 1024, 575 при 1920 — те же
     края, что раньше, на границах). */
  right: var(--au-gutter);
  top: 57px; /* +9 к верху заголовка, как в макете 144/153 */
  width: calc(300px + 275px * var(--au-k));
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 36px;
  color: var(--au-black);
}

.au-home-slider__text b {
  font-weight: 700;
}

.au-home-slider__nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.au-home-slider__nav .au-slider__btn {
  position: absolute;
  top: 552px; /* низ 620: 40px до низа слайдера */
  pointer-events: auto;
}

/* 96, а не 204: get_metadata отдаёт у этого фрейма x=204 (правая кромка),
   истина — inset-проценты из get_design_context (left 5% от 1920 = 96).
   Поймано сканом эталона: в макете кнопка занимает x96…203.
   Ниже 1024 фиксированный left/right уводил обе кнопки за экран (левая —
   вправо от края, правая вообще за вьюпорт); 96/1716 совпадают с гаттером
   на 1920 (1716+108=1824=1920-96), поэтому крепим к --au-gutter вместо
   пиксельных констант — на 1920 те же значения, на 1024 кнопки на месте. */
.au-home-slider__nav .au-slider__btn--prev {
  left: var(--au-gutter);
}

.au-home-slider__nav .au-slider__btn:not(.au-slider__btn--prev) {
  right: var(--au-gutter);
}

@media (max-width: 1023px) {
  .au-home-slider {
    height: 1045px;
    margin: var(--au-tail-mb) 0; /* сверху хвост Features 24 + 24 = зазор 48 */
  }

  .au-home-slider__watermark {
    display: none; /* 400px-текст не помещается в 390px-вьюпорт — в макете
      его и нет ни на одном из 3 mb-слайдов (проверено get_design_context) */
  }

  /* mb-макета нового кадра нет. Ручка — между описанием (низ ~y360) и
     подписью «Ручка» (y775): ручка в кадре занимает 116…808 из 906, при высоте
     кадра 465 это y389…745, до подписи 30px. */
  .au-home-slider__photo--pen {
    top: 330px;
    height: 465px;
  }

  .au-home-slider__photo--sprays {
    left: 50%;
    top: 199px;
    width: 390px;
    height: 668px;
    transform: translateX(-50%);
    background-position: 50% 99.7%;
    background-size: 254.36%;
  }

  .au-home-slider__photo--bottle {
    left: 50%;
    top: 149px;
    width: 390px;
    height: 782px;
    transform: translateX(-50%);
    background-position: 50% 50%;
    background-size: 288.72%;
  }

  .au-home-slider__price {
    top: 818px;
    font-size: 24px;
  }

  .au-home-slider__price--pc {
    display: none;
  }

  .au-home-slider__price--mb {
    display: block;
  }

  .au-home-slider__category {
    top: 775px;
    font-size: 24px;
  }

  .au-home-slider__title--pc {
    display: none;
  }

  .au-home-slider__title--mb {
    display: block;
    width: 316px;
  }

  .au-home-slider__title--mb p {
    margin: 0;
  }

  .au-home-slider__text {
    left: 26px;
    top: 184px;
    width: 329px;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
  }

  /* Arrow1 (1024:1339): пара кнопок слита в общий центрированный виджет
     240×68 с зазором 24 между половинами — вместо двух кнопок на разных
     краях экрана, как на pc. */
  .au-home-slider__nav {
    position: absolute;
    left: 50%;
    top: 905px;
    transform: translateX(-50%);
    display: flex;
    gap: 24px;
  }

  .au-home-slider__nav .au-slider__btn,
  .au-home-slider__nav .au-slider__btn--prev {
    position: static;
    left: auto;
    top: auto;
  }
}

/* ─── Флагманские продукты: раскрывающийся слайдер ────────────────────────
   Figma: PC 1024:2010, mobile 1024:1992. */
.au-home-flagman {
  position: relative;
  /* 164 верх карточек + 580 карточка + 48 хвост (--au-tail) */
  height: calc(696px + 2 * var(--au-tail)); /* голова + 116 (заголовок → карточки) + 580 карточка + хвост */
  background: var(--au-white);
}

/* §138: заголовок и ряд карточек — абсолютные дети .au-container, а не секции:
   containing block у них padding-box контейнера, поэтому `left: var(--au-gutter)`
   даёт контентный край колонки на любой ширине (96 на 1920, 416 на 2560), а не
   гаттер от края вьюпорта. Тот же приём, что у каталога и «О компании». */
.au-home-flagman .au-container {
  position: relative;
}

.au-home-flagman__title--mb {
  display: none;
}

.au-home-flagman__cards {
  position: absolute;
  top: calc(var(--au-tail) + 116px); /* низ заголовка + зазор головы; было 164 при хвосте 48 */
  left: var(--au-gutter);
  right: var(--au-gutter);
  display: flex;
  gap: 24px;
  height: 580px;
}

/* Кроп кадра карточки — длина, а не пара px: переход по ней (§138) повторяет
   прежнее `transition: background-position 0.5s` — кадр съезжает так же плавно. */
@property --au-flagman-crop {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.au-home-flagman__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 580px;
  overflow: hidden;
  border-radius: 20px;
  /* Контейнер для `100cqw` в размере кадра (§138). */
  container-type: inline-size;
  transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.au-home-flagman__card[open] {
  flex-grow: 3.773;
}

.au-home-flagman__summary {
  position: absolute;
  inset: 0;
  z-index: 0;
  list-style: none;
  cursor: pointer;
  transition: filter 0.25s ease;
}

.au-home-flagman__summary::-webkit-details-marker {
  display: none;
}

.au-home-flagman__card::details-content {
  content-visibility: visible;
  block-size: auto;
  overflow: visible;
}

.au-home-flagman__card[open] .au-home-flagman__summary {
  cursor: default;
}

/* VIS-13: отклик при наведении и фокус на свёрнутом флагмане (паттерн карточек и аккордеонов) */
.au-home-flagman__card:not([open]) .au-home-flagman__summary:hover {
  filter: brightness(1.06);
}
.au-home-flagman__summary:focus-visible {
  outline: 2px solid var(--au-black);
  outline-offset: -2px;
}

.au-home-flagman__card--spray {
  background: #9e9e9e;
}

.au-home-flagman__card--case {
  background: #e0e8ee;
}

.au-home-flagman__card--peptides {
  background: #9e9e9e;
}
.au-home-flagman__card--spray::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.au-home-flagman__card--spray {
  order: -1;
}

.au-home-flagman__card--case {
  order: 0;
}

.au-home-flagman__card--peptides {
  order: 1;
}

.au-home-flagman__photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: --au-flagman-crop 0.5s ease;
  pointer-events: none;
}

/* 1920 держит макетный кадр (1173×655 и т. д.), выше карточка растёт — и кадр
   растёт вместе с ней, иначе справа открывается серый фон (§138). */
.au-home-flagman__photo--pump {
  --au-flagman-crop: -21px;
  --au-flagman-w: max(1173px, calc(100cqw + 21px));
  --au-flagman-h: calc(var(--au-flagman-w) * 0.5583972720); /* 655 / 1173 */
  background-image: url(../img/home/flagman-pump.webp);
  background-size: var(--au-flagman-w) var(--au-flagman-h);
  /* `100%` по x — ровно та граница, за которой кадр кончился: кроп никогда не
     левее неё, поэтому правый край карточки кроется на любой ширине (§138). */
  background-position: max(var(--au-flagman-crop), 100%) calc(290px - 0.5 * var(--au-flagman-h));
}

.au-home-flagman__photo--case {
  --au-flagman-crop: -82px;
  --au-flagman-w: max(1180px, calc(100cqw + 82px));
  --au-flagman-h: calc(var(--au-flagman-w) * 0.5584745763); /* 659 / 1180 */
  background-image: url(../img/home/flagman-case.webp);
  background-size: var(--au-flagman-w) var(--au-flagman-h);
  background-position: max(var(--au-flagman-crop), 100%) calc(290px - 0.4734446131 * var(--au-flagman-h));
}

.au-home-flagman__photo--bottle {
  --au-flagman-crop: -66px;
  --au-flagman-w: max(1230px, calc(100cqw + 66px));
  --au-flagman-h: calc(var(--au-flagman-w) * 0.5585365854); /* 687 / 1230 */
  background-image: url(../img/home/flagman-bottle.webp);
  background-size: var(--au-flagman-w) var(--au-flagman-h);
  background-position: max(var(--au-flagman-crop), 100%) calc(290px - 0.4585152838 * var(--au-flagman-h));
}

/* Кроп свёрнутой карточки; по x он тоже не левее `100%` из базового правила,
   поэтому кадр кроет бокс и в этом состоянии (§138). */
.au-home-flagman__card:not([open]) .au-home-flagman__photo--pump {
  --au-flagman-crop: -712px;
}

.au-home-flagman__card:not([open]) .au-home-flagman__photo--case {
  --au-flagman-crop: -698px;
}

.au-home-flagman__card:not([open]) .au-home-flagman__photo--bottle {
  --au-flagman-crop: -763px;
}

.au-home-flagman__copy {
  position: absolute;
  left: 64px;
  top: 309px;
  z-index: 2;
  width: 500px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.au-home-flagman__card--spray .au-home-flagman__copy {
  width: 362px;
}

.au-home-flagman__card--case .au-home-flagman__copy {
  width: 426px;
}

.au-home-flagman__card--peptides .au-home-flagman__copy {
  width: 500px;
}

.au-home-flagman__card[open] .au-home-flagman__copy,
.au-home-flagman__card[open] .au-home-flagman__cta {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.15s;
}

/* Волна «более тонкого шрифта» (владелец): заголовок карточки 500 → Inter
   Tight Light 300 при том же кегле 48 — тот же шаг, что у заголовков карточек
   «Формы выпуска» (.au-home-features__title, 40/300 по нодам 3136:3560,
   3571, 3582). Семейство обязательно: на Inter просьба «легче» не рисуется
   (подробно — в шапке .au-home-hero__text).
   Тонкий макет держит здесь Inter Regular 48, трекинг −4 % и lh AUTO 58
   (варианты 1024:2027 / 2013 / 2020 и их инстансы в 3136:3595). lh AUTO не
   берём: он растит копию с 48 + 12 + 34 = 94 до 58 + 12 + 39 = 109 и двигает
   подпись вниз на 15px — изменение геометрии, которого владелец не просил.
   Трекинг −4 % тоже не нужен: в макете он подтягивал подпись внутрь бокса,
   а у нас это делает кегль (см. `__card-subtitle`), заголовок и без него
   влезает: чернила 355.6 / 307.1 / 293.3 против боксов 500 / 362 / 426.
   nowrap оставлен — боксы копий макетные (500 / 362 / 426), переносить нечем. */
.au-home-flagman__card-title {
  z-index: 2;
  margin: 0;
  color: var(--au-white);
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  /* Регистр берётся из текста: `Спреи AUREN` / `AUREN ручки` / `AUREN пептиды`
     приходят из MIGX дословно. До 8db66dc здесь стоял uppercase, потом none —
     оба объявления сняты вместе с правилом 2.7, трансформации нет вовсе. */
}

/* Подпись — она же «описание» из запроса владельца: 32/400 → Inter Tight
   Light 300, 28/34. 28 = 32 − 4: тот же абсолютный шаг, который владелец уже
   санкционировал на этой странице (абзац героя 20 → 16); 34 = 39 × 28/32, то
   есть макетное отношение подписи 39/32 = 1.219, округлённое до целого.
   Стек копии после правки: заголовок 48 + отступ 12 + подпись 34 = 94, низ
   309 + 94 = 403 при кнопке на 448 — 45px запаса.
   Трекинг из макета (−4 %, это −1.12px) НЕ берём, и это осознанно: он был
   нужен, чтобы подпись влезла в свой бокс, — при 32/400 чернила вылезали у
   всех трёх (535.9 / 456.5 / 387.3 против боксов 500 / 426 / 362). После
   смены кегля и семейства они влезают с запасом (437.3 / 374.0 / 317.3),
   то есть правка стала избыточной, а не забытой. */
.au-home-flagman__card-subtitle {
  margin: 12px 0 0;
  color: var(--au-white);
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 34px;
  white-space: nowrap;
}

.au-home-flagman__card--case .au-home-flagman__card-title,
.au-home-flagman__card--case .au-home-flagman__card-subtitle {
  color: var(--au-black);
}

.au-home-flagman__card--peptides .au-home-flagman__card-title,
.au-home-flagman__card--peptides .au-home-flagman__card-subtitle {
  color: #e4eaf0;
}

.au-home-flagman__cta {
  position: absolute;
  left: 64px;
  top: 448px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  padding: 16px 34px;
  border-radius: 260px;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.au-home-flagman__ellipse,
.au-home-flagman__dots {
  display: none;
}

@media (max-width: 1023px) {
  .au-home-flagman {
    /* 232 верх карточек + 413 карточка + 36 зазор + 10 точка + 72 хвост */
    height: calc(571px + 2 * var(--au-tail-mb));
  }

  .au-home-flagman__title--pc {
    display: none;
  }

  .au-home-flagman__title--mb {
    display: block;
    width: 316px;
  }

  .au-home-flagman__title--mb p {
    margin: 0;
  }

  .au-home-flagman__cards {
    top: calc(var(--au-tail-mb) + 112px);
    left: 0;
    right: 0;
    height: 413px;
    padding: 0 26px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x proximity;

  .au-home-flagman__cards::-webkit-scrollbar {
    display: none;
  }

  .au-home-flagman__card {
    flex: 0 0 272px;
    height: 413px;
    scroll-snap-align: start;
    transition: none;
  }

  .au-home-flagman__photo--pump {
    background-size: 741px 414px;
    background-position: -417px 0;
  }

  .au-home-flagman__photo--case {
    background-image: url(../img/home/flagman-case.webp), url(../img/home/flagman-case-base.webp);
    background-size: 738px 412px, 272px 414px;
    background-position: -301px 0, 0 0;
  }

  .au-home-flagman__photo--bottle {
    background-size: 774px 432px;
    background-position: -373px -19px;
  }

  .au-home-flagman__summary {
    pointer-events: none;
    cursor: default;
  }

  .au-home-flagman__copy,
  .au-home-flagman__card[open] .au-home-flagman__copy,
  .au-home-flagman__cta,
  .au-home-flagman__card[open] .au-home-flagman__cta {
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .au-home-flagman__copy {
    left: 36px;
    top: 33px;
  }

  .au-home-flagman__card-title {
    font-size: 26px;
    line-height: 1;
    white-space: normal;
  }

  .au-home-flagman__card-subtitle {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.1;
    white-space: normal;
  }
  .au-home-flagman__card--spray .au-home-flagman__copy {
    width: 221px;
    max-width: calc(100% - 72px);
  }

  .au-home-flagman__card--peptides .au-home-flagman__copy,
  .au-home-flagman__card--case .au-home-flagman__copy {
    width: 213px;
    max-width: calc(100% - 72px);
  }
  .au-home-flagman__card:not([open]) .au-home-flagman__photo--pump {
    background-position: -417px 0;
  }

  .au-home-flagman__card:not([open]) .au-home-flagman__photo--case {
    background-position: -301px 0, 0 0;
  }

  .au-home-flagman__card:not([open]) .au-home-flagman__photo--bottle {
    background-position: -373px -19px;
  }

  .au-home-flagman__cta,
  .au-home-flagman__card[open] .au-home-flagman__cta {
    left: 36px;
    top: 309px;
    padding: 16px 34px;
  }

  .au-home-flagman__card--peptides,
  .au-home-flagman__card--case,
  .au-home-flagman__card--spray {
    order: 0;
  }

}

  /* Вне блока .au-home-flagman__cards: у него выше (стр. 1317) не закрыта
     скобка, и правила ниже стали вложенными. Точки лежат вне ряда карточек,
     поэтому вложенное правило их не находило, и на mb они не показывались.
     Сам блок не трогаю: закрытая скобка сняла бы вложенность с правил
     карточек, и они потеряли бы специфичность. */
  .au-home-flagman__dots {
    display: flex;
    position: absolute;
    left: 50%;
    top: calc(var(--au-tail-mb) + 561px);
    transform: translateX(-50%);
  }
}

/* ─── Каталог ─────────────────────────────────────────────────────────────
   PC 1024:1494 (y4453 вплотную к флагманам), MB 1024:1800 (y4219 → 7853).
   Абсолютные дети лежат внутри .au-container и получают гаттер явно: у
   абсолютного позиционирования containing block — padding-box, поэтому
   left/right: 0 отсчитывался бы от края макета, а не от контентной колонки
   (та же ловушка, что ловили на стрелках наград, см. about.css).

   Высота. Было `height: 2092px` — макетный узел (1920×2092, следующая секция
   ровно на 4453+2092=6545), верный только на 1920. Сетка внутри резиновая, а
   высота секции стояла, и разницу секция добирала пустотой внизу: 146.06 на
   1920, 440.56 на 1440, 538.03 на 1280, 665.84 на 1024.

   Формула высоты — 358 + сетка + --au-tail, где 358 — прежний абсолютный top
   сетки, отданный контейнеру как `padding-top` (он же резерв под три
   оставшихся абсолютных ребёнка: их нижняя кромка 322, то есть 36px запаса на
   всех ширинах). Сетка при этом встала в поток — `position: absolute` с
   `top: 358px` не давало секции знать свою высоту.
   Через `calc()` по `--au-k` эта высота не выражается: сетка нелинейна по
   ширине, линейная аппроксимация между 1024 и 1920 даёт −20.7px на 1280 и
   −16.0 на 1440 (замер 2026-09-23), поэтому именно поток, а не формула.
   `margin-top` у сетки, а не `padding-top` у контейнера, здесь запрещён:
   маргин схлопывается сквозь контейнер и сдвигает всю страницу на 358px.
   Цена: на 1920 секция 2089.94 против 2092 — 2.06px, разница между прежним
   пустым остатком 146.06 и общим ритмом 144.

   Потолок содержимого. Запас 358 ничего не ограничивает: ни один из трёх
   оставшихся абсолютных детей не достаёт до него ни при каком тексте. 322 —
   это кромка СТРОКИ ФИЛЬТРОВ, а не заголовка: фильтры стоят на `top: 286px`
   высотой 36 на всех четырёх ширинах, потому что `.au-home-catalog__filters` —
   `flex-wrap: nowrap`; подсажено 8 лишних пунктов, высота осталась 36, лишние
   уходят вбок. Запас 36 держится по построению и от текста не зависит.
   Ограничивает другое — зазор 72 от низа заголовка до верха фильтров.
   Заголовок занимает одну строку 70/60.36/57.14/52, его низ 214.00 / 204.36 /
   201.14 / 196.00, фильтры начинаются на 286. Значит заголовок выдерживает
   ровно ОДНУ лишнюю строку: вторая даёт низ 284.00 и запас 2.00 на 1920,
   21.28 на 1440, 38.00 на 1024; третья на 1024 даёт 300.00 и заходит на
   строку фильтров на 14.00. Заголовок правится в админке, и переполнение
   молчит — строка просто ложится на строку. Замер подстановкой текста
   2026-09-23 на 1920/1440/1024.

   Отдельно и НЕ здесь: зазор от чернил заголовка до сетки разъезжается
   151.4 → 168.8 при сужении. Причина не в высоте секции, а в том, что у
   заголовка `top: 144px` держится, а его собственная строка худеет вместе с
   кеглем (72/70 → 52/52), поэтому просвет от низа строки до неподвижного
   `top: 358px` растёт ровно на убыль строки: 214 − line-height = 144.00 /
   153.64 / 156.86 / 162.00. Лечится сдвигом сетки или шкалой заголовка — это
   другое решение, не эта правка. */
.au-home-catalog {
  position: relative;
  height: auto;
  background: var(--au-white);
}

.au-home-catalog .au-container {
  position: relative;
  padding-top: calc(var(--au-tail) + 164px);
  padding-bottom: var(--au-tail);
}

.au-home-catalog__cta {
  position: absolute;
  right: var(--au-gutter);
  top: var(--au-tail); /* на линии заголовка */
}

/* Шаг между пунктами ровный: 72 на pc, 26 на mb (проверено по x/width всех
   пунктов). Первый активен, остальные приглушены. */
.au-home-catalog__filters {
  position: absolute;
  left: var(--au-gutter);
  top: calc(var(--au-tail) + 94px);
  display: flex;
  gap: 72px;
}

.au-home-catalog__filter {
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  color: var(--au-black);
  /* Кегль 16/700 крупным не считается (крупный — от 18.66 при 700), порог 4.5.
     При 0.3 было 2.11 на белом; 0.56 — 4.94, ближайший шаг выше порога. */
  opacity: 0.56;
  white-space: nowrap;
}

.au-home-catalog__filter--active {
  opacity: 1;
}

/* VIS-01: ховер и клавиатурный фокус у фильтров каталога (паттерн навигации layout.css:164) */
.au-home-catalog__filter:hover,
.au-home-catalog__filter:focus-visible {
  opacity: 1;
}
.au-home-catalog__filter:focus-visible {
  outline: 2px solid var(--au-black);
  outline-offset: 2px;
}

/* Пятого пункта «Мужское здоровье» на pc в макете нет, на mb есть — расхождение
   самого макета (context/home-catalog-content.md). Состав ряда приезжает из
   дерева категорий MODX и одинаков на обоих брейкпоинтах: на mb ряд и так
   горизонтально прокручивается, на pc пять пунктов при gap 72 укладываются в
   1728. Правила, скрывавшего пятый пункт, больше нет. */

/* Колонки: контейнер 1728 − 2 зазора по 24 = 3×560. В Figma колонка 3 имеет
   x 1263/1264/1264.5 у разных своих элементов, а ширины 561/558/561 — единого
   точного значения в макете нет, ровная сетка отклоняется максимум на 2px
   (допуск того же порядка уже принят для зазора наград, см. about.md).
   Сетка в потоке (было `position: absolute; left/right: var(--au-gutter);
   top: 358px`): гаттер теперь даёт контейнер, а 358 — его `padding-top`, и
   именно поэтому секция знает свою высоту. Гаттер тот же — в потоке сетка
   занимает content-box контейнера, а абсолютная деталь отсчитывалась от его
   padding-box, отсюда и совпадение левого/правого края с прежними. */
.au-home-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 72px;
}

/* Карточка была раскладкой с абсолютными детьми внутри фиксированной высоты
   764px (фото 0, название +594, фасовка +648, цена +715) — Figma-точные пиксели
   при ширине колонки 1920px. Колонка на деле резиновая (--au-gutter — calc), а
   высота фото была прибита числом: на нерасчётных ширинах фото переставало
   быть квадратным 561:574 и вручную подогнанные фоновые подложки (см.
   --ampoule ниже) расходились по масштабу с соседями — это и была причина
   «товары на разной высоте» на главной при живой ровной картинке в каталоге.
   Раскладка ниже — та, что уже проверена на `/catalog` (catalog.css): высота
   карточки из содержимого, фото — width:100% + aspect-ratio вместо
   фиксированного height, так что кадр остаётся 561:574 на любой ширине
   колонки. Правило общее для обеих страниц: `.au-catalog__grid` (catalog.css)
   больше не переопределяет карточку отдельно. */
.au-home-catalog__card {
  display: flex;
  flex-direction: column;
  height: auto;
}

.au-home-catalog__photo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 561 / 574;
  overflow: hidden;
  border-radius: 20px;
  background-color: #efefef;
  background-repeat: no-repeat;
}

/* Снимки товара нормализованы: квадратный кадр 1600×1600, объект занимает 86%
   высоты. Поэтому здесь contain и файлы из `img/product/` — те же, что видит
   карточка товара. Декоративные фоны секций (Features, слайдер, «Флагман»)
   берут `img/home/product-*.webp`: там объект вписан в холст 2400×1792 под
   свои кропы из макета. Правило видно, когда у товара не заполнено фото. */
.au-home-catalog__photo--pen,
.au-home-catalog__photo--ampoule,
.au-home-catalog__photo--spray {
  background-position: 50% 50%;
  background-size: contain;
}

.au-home-catalog__photo--pen {
  background-image: url(../img/product/pen-01-refresh.webp);
}

/* Флакон вдвое ниже спрея и ручки, но нормализация снимков растянула все три
   объекта до одной высоты кадра — на полке он выглядел крупнейшим из трёх.
   Здесь кроп уменьшен вдвое по высоте, и флакон стоит на той же линии, что
   соседи: разница в размере читается сразу. Спрей и ручка не затронуты — у них
   общее правило выше.

   91% вместо 100%: в `background-position` проценты отсчитываются от разницы
   размеров бокса и фона, а низ изделия в файле лежит на 93% высоты кадра, не на
   самом краю. При таком значении низ флакона приходится на 92.03% высоты
   карточки — ровно туда, где стоит низ спрея при `contain`. */
.au-home-catalog__photo--ampoule {
  background-image: url(../img/product/dry-01-refresh.webp);
  background-position: 50% 91%;
  background-size: auto 50%;
}

.au-home-catalog__photo--spray {
  background-image: url(../img/product/spray-01-refresh.webp);
}

/* Промо-карточка: фона #efefef нет, фото на всю карточку (cover). */
.au-home-catalog__photo--promo {
  background-color: transparent;
  background-image: url(../img/home/catalog-promo.webp);
  background-position: center;
  background-size: cover;
}

.au-home-catalog__name {
  position: static;
  /* Было top:594 от верха карточки при фото 574 — тот же зазор 20px выражен
     отступом от предыдущего элемента в потоке (проверено на /catalog). */
  margin: 10px 0 0;
  padding: 10px 0;
  /* 32 на 1920. Карточка сужается с 560 до 299, и на макетном кегле название
     переносилось во вторую строку и налезало на фасовку (та на 648 при
     названии с 594). Шкала та же, что у остальной страницы; mb ниже — 26. */
  font-size: calc(26px + 6px * var(--au-k));
  font-weight: 500;
  line-height: normal;
  color: var(--au-black);
}

/* Фасовка на pc — фрейм 59px с вертикальным центрированием текста (текст
   садится на +17.5 внутри него), на mb — просто текст без обёртки. */
.au-home-catalog__pack {
  position: static;
  height: 59px;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  /* Кегль 20/500 — не крупный, порог 4.5: при 0.3 было 2.11 на белом, 0.56 — 4.94. */
  opacity: 0.56;
  color: var(--au-black);
}

.au-home-catalog__price {
  position: static;
  /* Было top:715 при фасовке на 648 — те же 67px, тоже отступом (см. name). */
  margin: 8px 0 0;
  display: flex;
  gap: 40px; /* старая цена 1264…1367, новая с 1407 */
  padding: 10px 0;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: var(--au-black);
}

.au-home-catalog__price-old {
  /* Кегль 24/500 — крупный, порог 3.0: при 0.3 было 2.11 на белом, 0.47 — 3.59. */
  opacity: 0.47;
  text-decoration: line-through;
}

/* ─── Промо-карточка: наложения поверх фото ───────────────────────────── */

.au-home-catalog__badge {
  position: absolute;
  /* Макетный x391 при ширине бейджа 135 в карточке 560 даёт отступ справа 34.
     Привязка к краю, а не left: ниже 1920 карточка сужается до 299 и бейдж
     уезжал за клип. */
  right: 34px;
  top: 36px;
  padding: 6px 14px;
  border-radius: 260px;
  background: var(--au-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  color: var(--au-black);
  white-space: nowrap;
}

/* Наведение на карточку каталога и «похожих товаров» (Figma 1024:1724): второй снимок во всю карточку, над
   ним затемнение, описание слева внизу и стрелка справа внизу. Бейдж остаётся
   читаемым поверх — в разметке слой идёт перед ним и рисуется под ним.

   Затемнения в макете нет: там кадр сам по себе тёмный, и белый текст ложится
   на него без подложки. Присланные снимки светлее — под текстом контраст падал
   до 1.35:1 на самом ярком (dry-05). Градиент подобран замером всех 18 кадров:
   суммарные 48% в текстовой зоне дают худший случай 4.7:1, то есть AA для 14px.
   Плоское затемнение той же силы пришлось бы держать по всему кадру, и товар на
   снимке терял яркость — проверено сравнением вариантов. */
.au-card-hover {
  /* Нет указателя — нет слоя: на тач-экране наведение либо не наступает, либо
     залипает после тапа. display, а не opacity: так снимок вообще не грузится. */
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .au-card-hover {
    /* Макетные 36/37/48 сняты с карточки 561. Ниже 1920 она сужается до 299, и
       те же пиксели дают вдвое более толстые поля, поэтому масштаб по --au-k
       (context/tablet-scale.md). */
    --hv-x: calc(19px + 17px * var(--au-k));
    --hv-y: calc(20px + 17px * var(--au-k));
    --hv-icon: calc(26px + 22px * var(--au-k));
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  /* Оба списка разом: карточка каталога и карточка «похожих» отличаются сеткой
     и типографикой, но фото у обеих 561×574, и слой наведения у них общий —
     иначе те же девяносто строк с замерами контраста жили бы в двух файлах. */
  .au-home-catalog__card:hover .au-card-hover,
  .au-home-catalog__card:focus-visible .au-card-hover,
  .au-product-similar__card:hover .au-card-hover,
  .au-product-similar__card:focus-visible .au-card-hover {
    opacity: 1;
  }

  /* VIS-06: контур фокуса у карточки каталога (паттерн product.css:1550) */
  .au-home-catalog__card:focus-visible {
    outline: 2px solid var(--au-black);
    outline-offset: 2px;
  }

  /* cover, а не contain как у productPhoto выше: это кадр во всю карточку, а не
     предметный снимок на белом. */
  .au-card-hover__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ::before, а не ::after: псевдоэлемент позиционирован и потому красится над
     картинкой, которая лежит в обычном потоке, но по порядку в DOM — раньше
     описания и стрелки. На ::after затемнение ложилось поверх текста и гасило
     его вместо фона. */
  .au-card-hover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 42%, rgba(0, 0, 0, 0.48) 78%);
  }

  .au-card-hover__text {
    position: absolute;
    left: var(--hv-x);
    /* Доля, а не width: 344 — причина та же, что у промо-текста выше. */
    right: 32.14%;
    bottom: var(--hv-y);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: pre-line;
    font-size: calc(12px + 2px * var(--au-k));
    font-weight: 400;
    line-height: calc(18px + 6px * var(--au-k));
    /* В макете у ноды 1024:1730 стоит textCase LOWER, и здесь он намеренно не
       воспроизводится: на живом описании он съедал не только заглавную в начале
       предложения, но и аббревиатуры действующих веществ — «bpc-157», «kpv».
       Промо-текст каталога держал такую же трансформацию до 2026-09-23; снята
       там по той же причине, так что на сайте не осталось ни одного lowercase,
       который мог бы пройтись по описанию товара. */
    color: var(--au-white);
  }

  .au-card-hover__icon {
    position: absolute;
    right: var(--hv-x);
    bottom: var(--hv-y);
    width: var(--hv-icon);
    height: var(--hv-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--au-black);
  }

  .au-card-hover__icon img {
    width: calc(15px + 13px * var(--au-k));
    height: calc(15px + 13px * var(--au-k));
  }
}

/* В макете строка набрана с заглавной, а отрисована строчными (textCase LOWER
   у ноды 1024:1553). Трансформация не воспроизводится: в это правило попадает
   тот же `introtext`, что и в слой наведения, а на нём `lowercase` съедал
   аббревиатуры действующих веществ — «bpc-157», «kpv» (decisions §56). Промо
   сейчас не выводится ни на одной странице: у всех 18 товаров `productForm`
   равен `spray` / `ampoule` / `pen`, ветка `promo` в `product.card.tpl` спит.
   Объявление снято 2026-09-23, чтобы ветка не проснулась с ошибкой. */
.au-home-catalog__promo-text {
  position: absolute;
  left: 36px;
  /* В макете текст занимает 36…380 из 560, то есть 32.14% справа. Доля, а не
     width: 344 и не фиксированные 180: карточка сужается до 299 и любое
     пиксельное число либо выносит текст за край, либо не оставляет строки. */
  right: 32.14%;
  /* 465 сверху при высоте 574 — это 37 до низа. Отсчёт от низа, потому что
     ниже 1920 текст переносится на 8 строк вместо 3 и рос вниз за карточку. */
  bottom: 37px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--au-white);
}

/* Ниже 1920 текст переносится на 8 строк вместо 3 и дорастал до кружка
   (тот стоит на 53 от низа) — здесь он кончается над ним. */
@media (max-width: 1919px) and (min-width: 1024px) {
  .au-home-catalog__promo-text {
    bottom: 109px; /* 53 до кружка + просвет 56 */
  }
}

/* Пара стоит у правого края карточки: кружок 414…458, кнопка 477…525 при
   ширине 560. Привязка к краю, а не left — ниже 1920 карточка сужается
   до 299 и оба уезжали за клип. Белый круг сплошной, r=22 без градиента,
   поэтому CSS, а не файл (как точки слайдера и линии хедера). */
.au-home-catalog__promo-dot {
  position: absolute;
  right: 102px; /* 560 − 458 */
  top: 477px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--au-white);
}

.au-home-catalog__promo-link {
  position: absolute;
  right: 35px; /* 560 − 525 */
  top: 489px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--au-black);
}

@media (max-width: 1023px) {
  .au-home-catalog {
    height: auto;
    padding-top: var(--au-tail-mb);
    padding-bottom: var(--au-tail-mb);
  }

  .au-home-catalog .au-container {
    display: flex;
    flex-direction: column;
    /* Base-правило несёт `padding-top: 358px` и `padding-bottom: --au-tail` —
       на mb весь запас даёт секция, поэтому здесь оба обнуляются. */
    padding-top: 0;
    padding-bottom: 0;
  }

  .au-home-catalog__title {
    position: static;
    order: 1;
  }

  .au-home-catalog__filters {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    order: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 36px;
    padding-right: 0;
    overflow-x: visible;
  }

  .au-home-catalog__filter {
    line-height: 24px;
  }

  .au-home-catalog__grid {
    order: 3;
    margin-top: 36px;
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .au-home-catalog__cta {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    order: 4;
    align-self: center;
    margin-top: 48px;
    transform: none;
  }

  /* Карточка и фото авто-высоты уже заданы базовым правилом (общим с
     /catalog) — фиксированные 491/337 здесь были ровно той же проблемой
     Figma-точного пикселя на резиновой ширине, из-за которой карточки на
     главной «плавали» относительно каталога. Флакон и ручка на mb стояли
     зумом 289% с времён нормализации снимков: в карточку попадал фрагмент
     этикетки вместо изделия. Снимки давно приведены к общему кадру, поэтому
     мобильная ветка держит ту же логику, что широкие экраны, — правила выше.
     Флакон вдвое ниже соседей и стоит на их линии. */

  .au-home-catalog__name {
    font-size: 26px;
  }

  .au-home-catalog__pack {
    height: auto;
    display: block;
  }

  /* На mb промо-карточки в макете нет вовсе: накладки убираем, а фото карточек
     3-6 в mb-версии другие (ряд ручка/ампула по кругу вместо промо/спрей).
     Это визуальное расхождение, поэтому воспроизводится; текст карточек —
     отдельное решение, см. context/home-catalog-content.md.
     Правила идут последними в блоке намеренно: перебивают --promo и --spray
     той же специфичностью по порядку. */
  .au-home-catalog__badge,
  .au-home-catalog__promo-text,
  .au-home-catalog__promo-dot,
  .au-home-catalog__promo-link {
    display: none;
  }

  .au-home-catalog__photo--mb-pen {
    background-color: #efefef;
    background-image: url(../img/product/pen-01-refresh.webp);
    background-position: 50% 50%;
    background-size: contain;
  }

  /* Флакон на mb главной — тот же приём, что у `--ampoule` выше: вдвое ниже
     соседей и на их линии. Спрей и ручка остаются на contain. */
  .au-home-catalog__photo--mb-ampoule {
    background-color: #efefef;
    background-image: url(../img/product/dry-01-refresh.webp);
    background-position: 50% 91%;
    background-size: auto 50%;
  }
}

/* ─── Курсы + Консультации ──────────────────────────────────────────────
   PC 1024:1559 (Home screen 6/pc, 1920×1178, y6545 — ровно низ Каталога,
   вплотную), MB 1024:1846 (Home screen 6/mb, 390×1686, y7853 → низ 9539).
   Источник каждого элемента — .design/spec/home.courses.md.
   Два полноширинных подблока встык без зазора, оба фиксированной высоты
   (589 pc / 843 mb): position: relative + overflow: hidden, фото намеренно
   вылезают за границы и режутся клипом. margin-top: 0 на обоих. */
.au-home-courses__block {
  position: relative;
  overflow: hidden;
  height: 589px;
  color: var(--au-white); /* весь текст секции белый */
}

/* Цветные подблоки без своих полей: соседи сверху (Каталог) и снизу
   (О компании) белые и держат по 48 своей головы/хвоста — вторая половина
   зазора 96 здесь. */
.au-home-courses {
  margin: var(--au-tail) 0;
}

.au-home-courses__block--kursy {
  /* Плоская заливка слайда 1024:1561. Мёртвый #efefef обёртки 1024:1560
     полностью перекрыт — не переносим. Тот же литерал, что
     .au-home-features__card--dark. */
  background: #686876;
}

.au-home-courses__block--consult {
  display: none;
}

/* Текстовая колонка — реюз .au-container; фото и фоны полноширинные, вне её.
   Абсолютным детям гаттер задаём явно: containing block у них — padding-box,
   left: 0 отсчитался бы от края макета (та же ловушка, что в каталоге). */
.au-home-courses .au-container {
  position: relative;
  height: 100%;
}

/* Заголовки обоих подблоков: одна строка правил, 48/55 pc → 32/normal mb.
   Регистр одинаков на обоих брейкпоинтах и берётся из текста CMS. В макете он
   различался при одинаковой строке (расхождение №11): pc нёс TITLE (ноды
   3136:3666 и 3136:3684), mb — lowercase с UPPER-отрезком на первой букве
   (ноды 1024:1868 и 1024:1851). По решению владельца 2026-09-23 «заборчик»
   (Заглавная Буква В Каждом Слове) отменён, и обе трансформации сняты:
   строки читаются как в предложении — «AUREN Protocol — курсы пептидов»,
   «Консультация специалиста». Слово «AUREN» остаётся капсом: в разметке это
   литерал, а бренд пишется заглавными.
   Ширина — только выбор переноса (соседи стоят на своих координатах), и при
   Inter Tight коридор стал узким. Границы после снятия регистра: 538.4 —
   самая длинная строка («AUREN Protocol — курсы»), сверху — аванс
   однострочника «Консультация специалиста» 586.5. Держим 568, по 26 с каждой
   стороны. Переносы от правки не изменились: оба заголовка занимали и
   занимают две строки (однострочник 586.5 > 568), поэтому блок не вырос.
   Верхнюю границу считаем по регистру макета (Title Case), а не по капсу,
   который раньше разворачивал «Консультация» в «КОНСУЛЬТАЦИЯ» и давал 660.5:
   от починки регистра коридор не меняется, он и так считался по макету. */
.au-home-courses__title {
  position: absolute;
  left: var(--au-gutter);
  width: 568px;
  margin: 0;
  font-size: 48px;
  line-height: 55px;
}

.au-home-courses__block--kursy .au-home-courses__title {
  top: 48px;
}

.au-home-courses__block--consult .au-home-courses__title {
  top: 48px;
}

/* Слова «AUREN» регистр не трогает: в разметке уже литерал `AUREN`, и это
   бренд, который пишется заглавными. До правки здесь стоял
   `text-transform: uppercase`, но он ничего не делал — правило снято вместе
   с классом `-caps` в `home.courses.tpl`, само слово осталось. */

/* Буллеты Курсов: pc — два столбца (второй + на x483), mb — стопкой
   (расхождение №1). Отступ + → текст везде 22: маркер 14 + зазор 8. */
.au-home-courses__notes {
  position: absolute;
  left: var(--au-gutter);
  top: 184px;
  display: flex;
  gap: 72px; /* 483 − (96 + 14 + 8 + 293) */
}

.au-home-courses__note {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.au-home-courses__note-marker {
  /* Кегль и line-height держат строку 24 — колонку маркера задаёт .au-plus-icon */
  font-size: 20px;
  font-weight: 500;
  line-height: normal; /* 20→24 */
  opacity: 0.7;
}

.au-home-courses__note-text {
  margin: 4px 0 0 8px; /* текст на 4 ниже + (256 против 252); 14 + 8 = 22 */
  font-size: 16px;
  font-weight: 500;
  line-height: normal; /* 16→19 */
}

.au-home-courses__note-text--1 {
  width: 293px; /* 3 строки, h57 */
}

.au-home-courses__note-text--2 {
  width: 400px; /* 3 строки, h57 */
}

/* Цена и «Бесплатно…»: pc — в строку, цена первой слева; mb — стопкой
   в обратном порядке (расхождение №2) через column-reverse. */
.au-home-courses__price-row {
  position: absolute;
  left: var(--au-gutter);
  top: 184px;
  display: flex;
  align-items: flex-start;
}

.au-home-courses__price {
  flex: none;
  width: 123px; /* бокс ноды */
  margin: 0 72px 0 0; /* 96 + 123 + 72 = 291, x плюса */
  font-size: 32px;
  font-weight: 500;
  line-height: normal; /* 32→39 */
  white-space: nowrap;
}

.au-home-courses__note-text--free {
  width: 163px; /* 2 строки, h38 */
}

/* Оформление кнопок — чистый реюз .au-btn + .au-btn--home (совпадение 1:1),
   здесь только позиция. На pc обе кнопки у низа блока, низ — на одной линии
   с низом пилюль (525 = 589 − 64). После сокращения отступов (§156) кнопка
   поднялась к тексту и под ней осталась пустота; заказчик 2026-09-27 вернул её вниз. */
.au-home-courses__cta {
  position: absolute;
  left: var(--au-gutter);
  bottom: 64px;
}

/* Подписи к пилюлям: pc — слева от группы (зазор 24), mb — над группой
   (зазор 36, расхождение №4). Курсы делят с рядом общий верх (488 = 488),
   Консультации — общий низ первого ряда (478 = 441 + 37). Общий flex-контейнер
   на подпись + весь двухрядный список здесь невозможен (flex-end опустил бы
   подпись на 491 вместо 444), поэтому обе стоят отдельными абсолютами —
   выравнивания из спеки сходятся точно. */
.au-home-courses__tags-label {
  position: absolute;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: normal; /* 14→17, h34 = 2 строки */
}

/* Метка стоит слева от своего ряда тегов, а тот привязан к правому краю
   контейнера. Поэтому и метка отсчитывается от края: на долях от 1920 она
   ниже макетной ширины наезжала на пилюли.
   Консультации: метка 1085…1243, теги от 1267 → 1824 − 1243 = 581 + 24.
   Курсы: та же коробка 557 под пять тегов (см. ниже) → те же 581. */
.au-home-courses__block--kursy .au-home-courses__tags-label {
  right: calc(var(--au-gutter) + 581px);
  top: 488px;
  max-width: 224px;
}

.au-home-courses__block--consult .au-home-courses__tags-label {
  right: calc(var(--au-gutter) + 581px);
  top: 444px;
  max-width: 158px;
}

/* В макете метка и кнопка «Записаться» разнесены по колонкам (зазор 683 по x).
   Метка остаётся слева от своих тегов (правила выше, как у курсов), пока ей
   хватает места правее кнопки: левый край метки W − g − 581 − 158 должен быть
   не левее g + 306 + 24 (g = гаттер 40…96). Это держится с W ≈ 1140, запас —
   до 1150. Уже метка встаёт НАД тегами, у левого края их бокса (557 − 158 =
   399 от правого края рядов), с просветом 12: рядом с тегами, а не у кнопки.
   До 2026-09-26 правило действовало на всём 1024–1919 и прибивало метку к
   кнопке даже там, где места у тегов хватало. */
@media (max-width: 1149px) and (min-width: 1024px) {
  .au-home-courses__block--consult .au-home-courses__tags-label {
    top: 378px; /* высота 51 + просвет 12 → низ 429 при ряде тегов с 441 */
    right: calc(var(--au-gutter) + 399px);
  }

  /* То же для курсов, но метка шире (224): её правый край = левый край
     коробки пилюль плюс её собственная ширина (557 − 224). */
  .au-home-courses__block--kursy .au-home-courses__tags-label {
    top: 378px;
    right: calc(var(--au-gutter) + 333px);
  }
}

/* Пилюля-тег — новый примитив секции (11 вхождений, реюза в проекте нет):
   высота везде 37 = 10 + 17 + 10, ширина по контенту (все w из таблиц
   сходятся с padding 10, отдельных значений нет). */
.au-home-courses__tags {
  position: absolute;
  display: flex;
  gap: 10px;
}

.au-home-courses__tag {
  padding: 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

/* Первая буква тега больше не поднимается ::first-letter: строки пишутся
   с заглавной прямо в конструкторе (`Снижение веса` / `Молодость кожи` /
   `Энергия`) — в макете у ноды стоял textCase UPPER на первом символе, но по
   решению владельца 2026-09-23 регистр берётся из текста, а не из стиля.
   Прежние строки лежали строчными, и правило возвращало им «С». */

/* Оба ряда тегов упираются в правый край контейнера (1824 при гаттере 96),
   поэтому привязка к краю, а не left от 1920: ниже макетной ширины
   фиксированный отсчёт уносил пилюли на 800 за клип блока.
   Консультации — два ряда (бокс 557).
   Курсы: в макете это был один ряд, но он держался на трёх коротких задачах
   (369 при полосе 368 — впритык). Пять названий курсов матрицы подбора дают
   930, и в прежнюю полосу не встают никак, поэтому у курсов теперь та же
   коробка 557 и перенос на две строки. context/decisions.md §167. */
.au-home-courses__block--kursy .au-home-courses__tags {
  right: var(--au-gutter);
  top: 488px;
  max-width: 557px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.au-home-courses__block--consult .au-home-courses__tags {
  right: var(--au-gutter);
  top: 441px;
  max-width: 557px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.au-home-courses__photo {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none; /* как фото слайдера и флагманов */
}

/* Пакет — прямоугольник самого изображения (рекомендуемая запись спеки):
   низ режется клипом на 17 (88 + 518 > 589). Привязка к правому краю
   (1920 − 1838 = 82), а не left от 1920: ниже макетной ширины фото целиком
   уходило за клип блока. */
.au-home-courses__photo--bag {
  right: 82px;
  top: 88px;
  width: 389px;
  height: 518px;
  background-image: url(../img/home/courses-bag.webp?v=2);
  background-size: 100% 100%;
}

/* Персиковый фон: слой 1937×821 на (−8, 2), размер 100% 100% (масштаб
   неравномерный — под блюром 100 не читается). */
.au-home-courses__bg {
  position: absolute;
  left: -8px;
  top: 2px;
  width: 1937px;
  height: 821px;
  background-image: url(../img/home/courses-consult-bg.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Стекло слоя 1024:1579: background blur Figma (радиус 200 → CSS 100).
   Девушка и текст лежат выше и остаются резкими. */
.au-home-courses__glass {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.01);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
}

/* Девушка pc — прямоугольник слоя (1042, −274) 936×1248. Ниже текста:
   на pc пересечений нет (безразлично), на mb пересечение реальное
   и текст лежит поверх (расхождение №8) — порядок слоёв в чанке.
   Привязка к правому краю (1042 + 936 = 1978, то есть 58 за край 1920),
   иначе ниже макетной ширины фото целиком уходит за клип. */
.au-home-courses__photo--woman {
  right: -58px;
  top: -274px;
  width: 936px;
  height: 1248px;
  background-image: url(../img/home/courses-consult-photo.webp);
  background-size: 100% 100%;
}

@media (max-width: 1023px) {
  /* Гаттер секции на mb — 36 по всем элементам обоих подблоков вместо
     сайтовых 26 (расхождение №16 спеки): везде литерал 36px,
     var(--au-gutter-mb) тут не подходит. */
  .au-home-courses {
    margin: var(--au-tail-mb) 0;
  }

  .au-home-courses__block {
    height: 843px;
  }

  /* Курсы растут на 32: четыре строки пилюль (685 + 178 = 863) против двух
     при трёх задачах. Высота меняется только у этого подблока — фон
     консультаций посчитан от 843 (правила .au-home-courses__bg ниже).
     context/decisions.md §167. */
  .au-home-courses__block--kursy {
    height: 875px;
  }

  .au-home-courses__title {
    left: 36px;
    top: 24px; /* оба подблока */
    width: 288px;
    font-size: 32px;
    line-height: normal;
  }

  .au-home-courses__notes {
    left: 36px;
    top: 138px;
    flex-direction: column;
    gap: 36px; /* 304 − (188 + 4 + 76) */
  }

  .au-home-courses__note-text--1 {
    width: 238px; /* 4 строки, h76 */
  }

  .au-home-courses__note-text--2 {
    width: 266px; /* 5 строк, h95 */
  }

  .au-home-courses__price-row {
    left: 36px;
    top: 138px;
    flex-direction: column-reverse; /* «Бесплатно…» сверху (192), цена снизу (248) */
    gap: 36px; /* 248 − (188 + 24) */
  }

  .au-home-courses__price {
    margin: 0;
  }

  .au-home-courses__note-text--free {
    width: 238px; /* 1 строка, h19 */
  }

  /* На mb внизу блока стоят пилюли, кнопка — между текстом и ними, на
     макетных координатах (bottom с pc снимается: с top растянул бы кнопку). */
  .au-home-courses__block--kursy .au-home-courses__cta {
    left: 36px;
    top: 451px;
    bottom: auto;
  }

  .au-home-courses__block--consult .au-home-courses__cta {
    left: 36px;
    top: 335px;
    bottom: auto;
  }

  .au-home-courses__block--kursy .au-home-courses__tags-label {
    left: 36px;
    right: auto; /* pc привязан к правому краю — на mb отсчёт слева */
    top: 615px;
    width: 224px;
  }

  .au-home-courses__block--consult .au-home-courses__tags-label {
    left: 36px;
    right: auto; /* pc привязан к правому краю — на mb отсчёт слева */
    top: 499px;
    width: 224px;
  }

  /* Курсы mb — перенос по 318 (36→354, симметричный гаттер): пять названий
     курсов дают 930 и укладываются в четыре строки, 685 + 178 = 863.
     Прежние три задачи давали две строки (280 + 79) и влезали в 843. */
  .au-home-courses__block--kursy .au-home-courses__tags {
    left: 36px;
    right: auto; /* pc привязан к правому краю — на mb отсчёт слева */
    top: 685px; /* 615 + 34 + 36 */
    width: 318px;
    flex-wrap: wrap;
  }

  /* Консультации mb — 1 колонка, шаг 47 = 37 + 10. */
  .au-home-courses__block--consult .au-home-courses__tags {
    left: 36px;
    right: auto; /* pc привязан к правому краю — на mb отсчёт слева */
    top: 569px; /* 499 + 34 + 36 */
    width: auto;
    flex-direction: column;
    align-items: flex-start; /* пилюли по контенту, не в ширину колонки */
  }

  /* Блюр 27.5 только у пилюль Консультаций на mb (Figma 55 против 25,
     расхождение №9); везде остальное — 12.5. Селектор по подблоку, а не по
     классу строки: размытие — свойство блока, а строки приходят из TV. */
  .au-home-courses__block--consult .au-home-courses__tag {
    backdrop-filter: blur(27.5px);
    -webkit-backdrop-filter: blur(27.5px);
  }

  .au-home-courses__photo--bag {
    left: 195px;
    right: auto; /* pc привязан к правому краю — на mb отсчёт слева */
    top: 410px; /* тот же рендер 389×518: видна левая половина, низ режет блок */
  }

  /* Фон на mb — тот же файл, повёрнутый на 90° (расхождение №5, второй ассет
     не нужен): элемент 843×388 центрирован в боксе 388×843 в точке (0, 0) —
     центр (194, 421.5), отсюда (−227.5, 227.5). */
  .au-home-courses__bg {
    left: -227.5px;
    top: 227.5px;
    width: 843px;
    height: 388px;
    transform: rotate(90deg);
  }

  /* Девушка на mb — исключение: бокс (0, 227) 390×616 сам режет картинку,
     поэтому процентная запись вместо прямоугольника слоя. */
  .au-home-courses__photo--woman {
    left: 0;
    right: auto; /* pc привязан к правому краю — на mb отсчёт слева */
    top: 227px; /* прижато к низу: 227 + 616 = 843 */
    width: 390px;
    height: 616px;
    background-size: 200.48%;
    background-position: -0.98% 25.58%;
  }
}

/* ─── О компании ──────────────────────────────────────────────────────────
   PC 1024:1597 (1920×1058, y7723 → следующая секция на 7723+1058=8781),
   MB 1024:1882 (390×1652, y9539 → 9539+1652=11191). Фон белый.
   Источник каждого значения — .design/spec/home.about.md.
   Заголовок — дословный примитив .au-home-catalog__title (72/600/70, mb 36/normal).
   Сетка — восстановление исходной (4×414+3×24=1728=контейнер, все x совпадают
   без отклонений), идиома .au-home-features: repeat(4,1fr), gap 24, mb → 1fr.
   Абсолютные дети лежат внутри .au-container и получают гаттер явно: containing
   block — padding-box, left/right: 0 отсчитывался бы от края макета (та же
   ловушка, что в каталоге). */
.au-home-about {
  position: relative;
  /* 286 верх сетки + 628 карточка + 144 хвост. Сетка абсолютна, а заголовок
     секции привязан к низу (bottom 844), поэтому высота — выражение от
     неподвижной части: перевод сетки в поток перевесил бы заголовок. */
  height: calc(722px + 2 * var(--au-tail)); /* голова + 94 + 628 карточка + хвост */
  background: var(--au-white);
}

.au-home-about .au-container {
  position: relative;
  height: 100%;
}

/* Ряд карточек: top 286 + 628 = 914, хвост 144 до 1058. */
.au-home-about__grid {
  position: absolute;
  left: var(--au-gutter);
  right: var(--au-gutter);
  top: calc(var(--au-tail) + 94px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.au-home-about__card {
  position: relative;
  height: 628px;
  overflow: hidden;
  border-radius: 20px;
  background: #efefef; /* подложка под фото, видна только на время загрузки */
}

.au-home-about__card--brand {
  background: #d3d3d3;
}

/* Фото на всю карточку, кропы Figma L/(100−W) → background-position/size.
   Карточка 01: проценты восстановлены измерением по рендеру ноды в изоляции
   (codegen отдавал неверный size-full), масштаб картинки один на оба
   брейкпоинта — 580×1031. */
.au-home-about__photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

/* Заполнение боксом, а не заданным зумом: карточка держит высоту 628px, а ширина
   сжимается с шириной экрана — фиксированный процент по ширине перестаёт
   доставать до низа, и под фото просвечивала полоса фона. Прежняя запись задавала
   зум по обеим осям и совпадала только на 1920, ниже сплющивала кадр до 38%.
   `cover` держит пропорции файла и закрывает карточку на любой ширине, а точку
   кадрирования держит background-position.
   Фото AUREN от заказчика (2026-09-29, 1792×2400 → 1000×1339): продукт в
   центре кадра, поэтому точка — у центра, а не макетные углы старых стоков.
   Имена файлов новые: картинки из CSS идут без ?v=, и хостинг кэширует их на год.
   Белый номер у новых кадров лёг на светлый верх (пузыри, стакан) — под ним
   мягкая тень без размытия: пелена снизу держит только описание. */
.au-home-about__photo {
  --au-about-num-shade: linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 32%);
}

.au-home-about__photo--1 {
  background-image: var(--au-about-num-shade), url(../img/home/about-card-1-auren.webp);
  background-position: 55% 45%;
  background-size: cover;
}

.au-home-about__photo--2 {
  background-image: var(--au-about-num-shade), url(../img/home/about-card-2-auren.webp);
  background-position: 50% 50%;
  background-size: cover;
}

.au-home-about__photo--4 {
  background-image: var(--au-about-num-shade), url(../img/home/about-card-4-auren.webp);
  background-position: 60% 45%;
  background-size: cover;
}

/* Пелена — сплошная заливка + blur, идиома .au-home-hero__scrim. Слой …2 —
   не второе фото (проверено рендером ноды в изоляции: ровная плашка). */
.au-home-about__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, black 100%);
}

/* Карточки 02 и 04 на pc светлее (на mb все три как у 01). */
.au-home-about__scrim--soft {
  background: rgba(0, 0, 0, 0.16);
}

.au-home-about__num {
  position: absolute;
  left: 36px;
  top: 72px;
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 36px;
  color: var(--au-white);
}

/* Описание прижато к низу (низ текста 586 у всех трёх = 42 от дна 628),
   число строк на раскладку не влияет; ширина задаёт переносы из макета. */
.au-home-about__desc {
  position: absolute;
  left: 36px;
  bottom: 42px;
  margin: 0;
  /* 28/32 на 1920 — прежние 32/36 минус 4 кегля и 4 интерлиньяжа, тот же шаг
     вниз, что у подписи флагмана, плюс отображение 600 → Inter Tight 400,
     которым на этой странице переведены все заголовки (.au-home-h2 и далее).
     Семейство обязательно: на Inter «легче» не рисуется.
     Верхний конец шкалы снижен, нижний оставлен: 20/24 на 1024 — ровно то, что
     там и было, поэтому узкая колонка этим правилом не двигается. Запас есть:
     брендовая подпись занимает 6 строк по 24 (низ 216 при кнопке на top 316),
     а рост кегля к 1920 по-прежнему нужен — колонка растёт почти вдвое. */
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: calc(20px + 8px * var(--au-k));
  font-weight: 400;
  line-height: calc(24px + 8px * var(--au-k));
  color: var(--au-white);
}

/* Ширины в макете считаны от карточки 414: 316, 335, 296 и 302 у брендовой.
   Ниже 1920 карточка сужается до 218, и фиксированная ширина выносила подпись
   за правый край — поэтому у всех четырёх задан отступ справа той же доли, а
   ширину даёт сама карточка. Волна «более тонкого шрифта» сменила здесь
   гарнитуру, начертание и кегль, но не ширины — почему, ниже.

   Полосы, в которых держится макетное число строк (замер целыми ширинами
   120…360, Inter Tight 400 28/32):
     бренд «Полный цикл — …»         5 строк: 220…263
     02 «Контроль на каждом этапе…»  5 строк: 221…262
     01 «Высокоочищенное сырьё…»     4 строки: 214…323
     04 «Составы с подтверждённой…»  3 строки: 131…355
   Макетные боксы 314 (01) и 296 (04) в полосы попадают с запасом 9 и 59px, а
   боксы 335 (02) и 302 (бренд) — нет: в них новые 28/32 дают 3 и 4 строки
   вместо пяти. Пять строк удержала бы только прямая ширина ~242 (середина
   полосы, запас ~21px с каждой стороны) на обеих карточках.

   Так и было сделано — и отменено осознанно: 242 рядом с 314 и 296 рассыпает
   меру, блок перестаёт читаться одной строкой, а сжатая колонка заезжает на
   фото продукта. Числа строк 4 / 5 / 3 / 5 нарисованы для Inter Semi Bold 32,
   а мы сменили и начертание, и кегль: держать счёт из старой гарнитуры — это
   держать число вместо того, что оно описывало. Принято 4 / 3 / 3 / 4.
   Полосы выше — доказательство для того, кто вернётся к этому решению. */
.au-home-about__card--1 .au-home-about__desc {
  right: 15.46%; /* 414 − (36 + 316) = 64; бокс 314 — макетные 4 строки держит */
}

.au-home-about__card--2 .au-home-about__desc {
  right: 10.39%; /* 414 − (36 + 335) = 43: ширину даёт карточка, см. блок выше */
}

.au-home-about__card--4 .au-home-about__desc {
  right: 20.29%; /* 414 − (34 + 296) = 84 */
}

/* У карточки 04 левый край текста 34 вместо 36 (только pc, на mb выровнено). */
.au-home-about__card--4 .au-home-about__num,
.au-home-about__card--4 .au-home-about__desc {
  left: 34px;
}

/* Брендовая карточка: фото и пелены нет, вместо номера — заголовок и кнопка. */
.au-home-about__brand-title {
  position: absolute;
  left: 36px;
  top: 72px;
  right: 18.36%; /* 414 − (36 + 302) = 76: ширину даёт карточка, см. блок выше */
  margin: 0;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: calc(20px + 8px * var(--au-k)); /* та же шкала, что у .au-home-about__desc */
  font-weight: 400;
  line-height: calc(24px + 8px * var(--au-k));
  color: var(--au-black);
}

/* Точный реюз .au-btn + .au-btn--home (200×68 сходится до пикселя), только позиция. */
.au-home-about__cta {
  position: absolute;
  left: 36px;
  top: 316px;
}

/* Макетные 200 не влезают в карточку 218 при отступе 36: ниже 1920 кнопка
   сжимается по месту, паддинги внутри .au-btn держат её читаемой. */
@media (max-width: 1919px) {
  .au-home-about__cta {
    right: 36px;
    justify-content: center;
  }
}

/* Живой текст, не ассет; реюза с вотермарком слайдера нет (там 300/400px,
   soft-light, без трекинга). Бокс 440×155 вылезает за карточку и режется
   overflow — так в макете; единственный элемент блока с прозрачностью.
   Трекинг 19.2px снят 2026-09-23 вместе с остальными растянутыми строками:
   он добавлял пять зазоров по 19.2 — четыре между буквами и хвостовой, —
   поэтому бокс был 536, а по чернилам 517. Теперь буквы сомкнуты, 440.
   Здесь правка заметнее всего: кегль 128px, а не 14-16. */
.au-home-about__word {
  position: absolute;
  left: 88px;
  top: 439px;
  margin: 0;
  font-size: 128px;
  font-weight: 500;
  line-height: normal;
  color: var(--au-white);
  opacity: 0.3;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .au-home-about {
    /* 188 верх сетки + 1392 сетка (4 × 330 + 3 × 24) + 72 хвост */
    height: calc(1460px + 2 * var(--au-tail-mb));
  }

  /* Стопка 4×330 + 3×24: первая top 188, низ последней 1580, хвост 72 до 1652. */
  .au-home-about__grid {
    left: var(--au-gutter-mb);
    right: var(--au-gutter-mb);
    top: calc(var(--au-tail-mb) + 68px);
    grid-template-columns: 1fr;
  }

  .au-home-about__card {
    height: 330px;
    background: var(--au-white);
  }

  .au-home-about__card--brand {
    background: #d3d3d3;
  }

  /* Низкая карточка 330: кадр по ширине, по вертикали — на продукт. */
  .au-home-about__photo--1 {
    background-position: 50% 42%;
  }

  .au-home-about__photo--2 {
    background-position: 50% 48%;
  }

  .au-home-about__photo--4 {
    background-position: 55% 45%;
  }

  /* На mb пелена у всех трёх как у 01; blur слоя 1024:1900 брендовой карточки
     не переносится — под ним только белый фрейм, он ничего не делает. */
  .au-home-about__scrim--soft {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
  }

  .au-home-about__num {
    top: 36px;
    font-size: 24px;
  }

  /* Низы в макете 294/294/288 (дрейф 6px, единого значения нет) — берём 36,
     карточка 04 встаёт на 6px ниже макета, в принятом допуске. */
  .au-home-about__desc {
    bottom: 36px;
    font-size: 24px;
    line-height: 32px;
  }

  .au-home-about__card--1 .au-home-about__desc {
    width: 232px;
  }

  .au-home-about__card--2 .au-home-about__desc {
    width: 255px;
  }

  .au-home-about__card--4 .au-home-about__desc {
    width: 232px;
  }

  .au-home-about__card--4 .au-home-about__num,
  .au-home-about__card--4 .au-home-about__desc {
    left: 36px;
    right: auto; /* pc привязан к правому краю — на mb отсчёт слева */
  }

  .au-home-about__brand-title {
    top: 36px;
    width: 255px;
    font-size: 24px;
    line-height: 32px;
  }

  .au-home-about__cta {
    top: 212px;
    /* Кнопка растянута left:36/right:36 и на 390 её натуральная ширина
       266px (338 − 72, где 338 = 390 − 2×26 гаттера) не задевает
       .au-home-about__word ниже (там наезд принят как есть, см. её
       комментарий). Выше 390 карточка расширяется и вместе с ней растёт
       правый край кнопки (right всё ещё 36px от края карточки) — на 900
       это уже даёт наезд 536×52px на ватермарку. Замораживаем ширину
       кнопки на её же 390-значении: max-width при заданных left+right
       переопределяет right (CSS2.1, box переопределён), кнопка перестаёт
       растягиваться дальше 266px и наезд не растёт вместе с картой. На
       390 no-op (266 = уже её натуральная ширина). */
    max-width: 266px;
  }

  /* Тот же 128px-бокс 517×155, что на pc: вылезает вправо (видно «AU») и на
     53px ниже дна карточки — верстаю как есть, вопрос заказчику, см. спеку. */
  .au-home-about__word {
    left: 145px;
    top: 228px;
  }
}

/* ─── Специалисты AUREN ─────────────────────────────────────────────────
   Figma: pc 1024:1619 (1920×1168, y8781 → низ 9949), mb 1024:1940 (390×804,
   y11191 → низ 11995). Фон белый. Источник каждого значения —
   .design/spec/home.experts.md.
   Шапка (заголовок left:96 top:144, стрелки Arrow 1 left:1584 top:216) +
   2 карточки (top:356, 852+852+24, radius 20, #efefef, overlay .1/.16) +
   точки Slider pc только на mb (left:158 top:722, активна средняя).

   Высота. Было height: 1168px — макетный узел, верный только на 1920. Карточка
   при этом масштабируется (.au-home-experts__card ниже: 420×330 на 1024,
   852×668 на 1920), поэтому ниже 1920-й низ карточки уходил вверх, а высота
   секции стояла: хвост рос с 144 до 482 на 1024 — 338px пустоты между
   карточками и «Отзывами». Теперь высота выводится из карточки и хвоста, а не
   берётся из узла: 356 (top трека) + 330 (карточка на 1024) + 144 (--au-tail)
   = 830, плюс та же рампа, что у карточки, — 338. На 1920 это ровно 1168,
   то есть макетное значение сохранено, и хвост равен 144 на всём диапазоне.
   Точки на pc нет вообще (ниже display: none), на mb хвост уже считался
   верно (732 = низ точек + 72), поэтому mb-высота 804 не меняется. */
.au-home-experts {
  display: none;
  position: relative;
  /* 356 верх трека + (330 + 338k) карточка + 144 хвост */
  height: calc(494px + 338px * var(--au-k) + 2 * var(--au-tail)); /* голова + 164 + карточка + хвост */
  background: var(--au-white);
}

.au-home-experts .au-container {
  position: relative;
  height: 100%;
}

/* pc — одна нода, перенос по пробелу даёт 2 строки × 70 = 140; mb — два
   отдельных <p>. Типографику и приглушение даёт сайтовый
   .au-h2 / .au-h2__accent, координаты — .au-home-h2.
   Ширина 503 из макета держится только на 72 кегле: на 1024 заголовок
   ужимается до 52, «Специалисты Auren» набирается в 497 и в 503 влезает
   одной строкой — блок схлопывался вдвое. Кегль тут интерполируется, а
   ширина нет, поэтому берём 470: коридор 442.8 (самая длинная строка на 72)
   … 497 (однострочник на 52), по 27 с каждой стороны. */
.au-home-experts__title--pc {
  width: 470px;
}

/* Приглушённое слово пишется AUREN на обоих брейкпоинтах — так же, как во
   всех остальных секциях главной (`Вся продукция компании AUREN`, `Сердце
   AUREN.`, подвал). До решения владельца 2026-09-23 в разметке стояло `Auren`
   на pc и mb, а капс на pc поднимал `text-transform: uppercase`; объявление
   снято, и слово пишется заглавными в конструкторе. */
.au-home-experts__title--mb {
  display: none;
}

/* Стрелки — реюз .au-arrow-pair + .au-slider__btn (about.css: тот же
   компонент Arrow 1 1024:1354, что в слайдере); --hairline обязателен —
   белая пилюля на белом фоне без обводки не видна. Правый край
   1584 + 240 = 1824 = край контейнера, низ 216 + 68 = 284 = низ заголовка. */
.au-home-experts__nav {
  position: absolute;
  right: var(--au-gutter);
  top: var(--au-tail); /* на линии заголовка */
}

/* Трек — реюз .au-slider__track (about.css: скролл, скрытие скроллбара);
   кнопки лежат внутри .au-slider, их забирает slider.js без правок. На pc
   обе карточки в вьюпорте (852 + 852 + 24 = 1728 = контейнер) — скролла нет. */
.au-home-experts__track {
  position: absolute;
  left: var(--au-gutter);
  right: var(--au-gutter);
  top: calc(var(--au-tail) + 164px);
  display: flex;
  gap: 24px;
}

/* Колонки 852: в макете 851/853 (дрейф 1px, обоснование — home.experts.md);
   правый край 96 + 852 + 24 + 852 = 1824 = край контейнера.
   Фиксированные 852×668 держали только 1920 — ниже 1366 вторая карточка
   вылезала за вьюпорт (карточка+gap шире доступного трека), а трек здесь
   всего 2 карточки, не многослайдовая карусель — обе должны быть видны
   целиком на любой ширине. Масштабируем по --au-k тем же способом, что и
   весь сайт: 420×330 при 1024, 852×668 при 1920 — то же соотношение сторон
   (0.494 vs 0.494). Проверено расчётом: track(w) − (2×card(w)+24) ≥ 0 на
   всём диапазоне 1024-1920 (0 запаса на 1920, 80px на 1024), т.е. скролл
   в треке не нужен ни на одной ширине. */
.au-home-experts__card {
  position: relative;
  display: block;
  flex: none;
  width: calc((100% - 24px) / 2);
  height: calc(330px + 338px * var(--au-k));
  overflow: hidden;
  border-radius: 20px;
  background: #efefef;
}

/* VIS-03: ховер и клавиатурный фокус карточки экспертов (паттерн product.css:751) */
.au-home-experts__card:hover .au-home-experts__photo,
.au-home-experts__card:focus-visible .au-home-experts__photo {
  transform: scale(1.03);
}
.au-home-experts__card:focus-visible {
  outline: 2px solid var(--au-black);
  outline-offset: 2px;
}

/* cover + верх кадра — дефолт для снимков 4:3 без макетного кропа (все, кроме
   Либерман и Троицкой: у них свои числа из Figma ниже). */
.au-home-experts__photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 30%;
  transition: transform 0.3s ease;
}

/* Затемнение — сплошная заливка поверх фото (blend normal, opacity слоя 1:
   прозрачность сидит в цвете). Background blur 7.5–8.75 из Figma не
   переносим: сверка рендера нод с исходником доказывает, что он не
   отрисовывается и в самом макете. */
.au-home-experts__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}

/* 0.16 у второй карточки подтверждён численно по рендеру — не описка. */
.au-home-experts__photo--troitskaya::after {
  background: rgba(0, 0, 0, 0.16);
}

.au-home-experts__photo--liberman,
[class*="au-home-experts__photo--liberman"] {
  background-image: url(../img/home/experts-liberman.webp);
  background-position: 50% 50%;
  background-size: cover;
}

.au-home-experts__photo--troitskaya {
  background-image: url(../img/home/experts-troitskaya.webp);
  background-position: 50% 67.36%;
  background-size: 100.06%;
}

.au-home-experts__photo--kornilova { background-image: url(../img/home/experts-kornilova.webp); }
.au-home-experts__photo--volkova { background-image: url(../img/home/experts-volkova.webp); }
.au-home-experts__photo--sokolov { background-image: url(../img/home/experts-sokolov.webp); }
.au-home-experts__photo--belova { background-image: url(../img/home/experts-belova.webp); }
.au-home-experts__photo--orlov { background-image: url(../img/home/experts-orlov.webp); }
.au-home-experts__photo--lebedeva { background-image: url(../img/home/experts-lebedeva.webp); }

/* Текст прижат к низу (хвост 93, зазор 24): низ должности 668 − 93 = 575,
   низ имени 539 − 24 = 515, верх имени 515 − 90 = 425 — все три числа спеки.
   Инсеты и шрифт растут по той же шкале, что и сама карточка выше — при
   уменьшении карточки текст пропорционально уменьшается вместе с ней,
   а не остаётся в макетном размере на уменьшенном холсте. */
.au-home-experts__text {
  position: absolute;
  left: calc(36px + 36px * var(--au-k));
  right: calc(36px + 36px * var(--au-k));
  bottom: calc(48px + 45px * var(--au-k));
  display: flex;
  flex-direction: column;
  gap: calc(12px + 12px * var(--au-k));
}

/* Волна «более тонкого шрифта»: карточки специалистов. Имя — 600 → Inter
   Tight 400, то же отображение, что у заголовков; кегль и интерлиньяж не
   тронуты (32/45 на 1920, 24/34 на 1024 — шкала прежняя).*/
.au-home-experts__name {
  margin: 0;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: calc(24px + 8px * var(--au-k));
  font-weight: 400;
  line-height: calc(34px + 11px * var(--au-k));
  color: var(--au-white);
}

/* Роль — «описание» карточки из запроса владельца: Inter 400 20/36 → Inter
   Tight Light 300, 18/33. 18 и 33 — ровно те же кегль и отношение, что у
   абзаца героя (18 × 1.8125 = 32.625 → 33, см. .au-home-hero__text), поэтому
   Light на 18px здесь не новый ярус, а тот же самый.
   Шкала сохранена, а не заменена фиксом: низ правила при k = 0 даёт 16/28, и
   именно на эти 28px ссылается mb-ветка роли (её комментарий ниже закрепляет
   36px как раз потому, что из десктопного правила на 390 подставились бы 28px)
   — при фиксированных 18/33 та ссылка стала бы враньём.
   Верх шкалы: кегль 16 + 2 = 18, интерлиньяж 28 + 5 = 33.
   Чернила роли 269.3 в боксе 708 — строка одна, переносить нечего. */
.au-home-experts__role {
  margin: 0;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: calc(16px + 2px * var(--au-k));
  font-weight: 300;
  line-height: calc(28px + 5px * var(--au-k));
  color: var(--au-white);
}

.au-home-experts__role--mb {
  display: none;
}

/* Точек на pc нет вовсе (реюз .au-dots — только mb). */
.au-home-experts__dots {
  display: none;
}

@media (max-width: 1023px) {
  .au-home-experts {
    /* 232 верх трека + 454 карточка + 36 зазор + 10 точка + 72 хвост */
    height: calc(612px + 2 * var(--au-tail-mb));
  }

  .au-home-experts__title--pc {
    display: none;
  }

  .au-home-experts__title--mb {
    display: block;
    width: 316px;
  }

  .au-home-experts__title--mb p {
    margin: 0;
  }

  .au-home-experts__nav {
    display: none;
  }

  /* Вторая карточка выходит за вьюпорт (322 + 272 = 594 при 390) — тот же
     приём, что у флагманов: трек-скролл, гаттер — паддингом трека. */
  .au-home-experts__track {
    left: 0;
    right: 0;
    top: calc(var(--au-tail-mb) + 112px);
    padding: 0 var(--au-gutter-mb);
  }

  .au-home-experts__card {
    width: 272px;
    height: 454px;
  }

  .au-home-experts__photo--liberman,
  [class*="au-home-experts__photo--liberman"] {
    background-position: 21.78% 35.21%;
    background-size: 211.4%;
  }

  .au-home-experts__photo--troitskaya {
    background-position: 54.39% 67.36%;
    background-size: 213%;
  }

  /* Узкая вертикальная карточка режет 4:3 до центральной полосы — сдвиг по x
     держит лицо в ней: (центр лица − 0.225) / 0.55. */
  .au-home-experts__photo--kornilova,
  .au-home-experts__photo--lebedeva { background-position: 41% 30%; }
  .au-home-experts__photo--volkova { background-position: 46% 30%; }
  .au-home-experts__photo--orlov { background-position: 55% 30%; }

  /* Затемнение второй карточки на mb — 0.1 (слой скопирован с первой вместе
     с именем, см. спеку), не pc-шные 0.16. */
  .au-home-experts__photo--troitskaya::after {
    background: rgba(0, 0, 0, 0.1);
  }

  /* Низ блока имени 372 у обеих карточек при разной его высоте (68/102):
     текст растёт вверх от низа (хвост 36, зазор 10) — верх 304/270 сходится. */
  .au-home-experts__text {
    left: 36px;
    right: 36px;
    bottom: 36px;
    gap: 10px;
  }

  .au-home-experts__name {
    font-size: 24px;
    line-height: 34px;
  }

  .au-home-experts__role {
    font-size: 16px;
    /* line-height раньше приходил из фиксированных 36px десктопного правила
       (там не было --au-k) — теперь то правило растёт с шириной, здесь его
       нужно снова закрепить на 36px, иначе на 390 подставится k=0 значение
       28px и сдвинет геометрию карточки (эталон). */
    line-height: 36px;
  }

  /* Должность второй карточки на mb — дубль первой (расхождение макета,
     вопрос заказчику): каждый брейкпоинт по своему содержимому. */
  .au-home-experts__role--pc {
    display: none;
  }

  .au-home-experts__role--mb {
    display: block;
  }

  /* Точки Slider pc 74×10; left:50% = центр при 390. Число точек — остановки
     ленты (slider.js), поэтому ряд длиннее макетных трёх. */
  .au-home-experts__dots {
    display: flex;
    position: absolute;
    left: 50%;
    top: calc(var(--au-tail-mb) + 602px);
    transform: translateX(-50%);
  }
}

/* ─── Отзывы о продуктах (главная) ─────────────────────────────────────
   Figma: pc 1024:1632 (1920×1164, y9949 → 11113), mb 1024:1905 (390×2612,
   y11995 → 14607). Источник каждого элемента — .design/spec/home.reviews.md.
   Ряд карточек на pc — горизонтальный трек (1964 при кадре 1920, четвёртая
   под обрезом), на mb — вертикальная колонка без стрелок. Абсолютные дети
   лежат внутри .au-container и получают гаттер явно: containing block у них —
   padding-box, left/right: 0 отсчитался бы от края макета (та же ловушка,
   что у каталога и стрелок наград).

   Высота. Было height: 1164px — макетный узел; хвост при нём выходил 148
   (1164 − низ CTA 1016), то есть на 4 больше общего ритма. Здесь ничего не
   масштабируется: трек и карточки фиксированы (520), CTA стоит на top: 948
   и держит 68, поэтому хвост задаётся выражением, а не узлом —
   948 + 68 + 144 (--au-tail) = 1160. На 1920 секция на 4px короче макетной;
   это и есть цена приведения к 144, всё остальное в секции не двигается. */
.au-home-reviews {
  position: relative;
  height: calc(824px + 2 * var(--au-tail)); /* голова + 756 (заголовок → низ CTA) + хвост */
  background: var(--au-white);
}

.au-home-reviews .au-container {
  position: relative;
  height: 100%;
}

.au-home-reviews__title {
  width: 503px;
}

/* Одна и та же строка в разных ролях: на pc подпись в подвале слева от
   кнопки (Regular 20/36), на mb подзаголовок под заголовком (Medium 16/23). */
.au-home-reviews__caption {
  position: absolute;
  left: var(--au-gutter);
  top: calc(var(--au-tail) + 756px);
  width: 313px;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 36px;
  color: var(--au-black);
}

/* Обёртка .au-slider без собственных правил: нужна только чтобы slider.js
   нашёл трек и кнопки. Flex и зазор пары — реюз .au-arrow-pair, пилюли —
   реюз .au-slider__btn + .au-slider__btn--hairline (рамка Arrow 1). */
/* Кнопки обязаны лежать внутри .au-slider, а визуально стоят в строке
   заголовка (низ 284 = низ заголовка, правый край 1824 — тот же приём,
   что у наград, см. about.css). */
.au-home-reviews__nav {
  position: absolute;
  right: var(--au-gutter);
  top: var(--au-tail); /* на линии заголовка */
}

/* Скролл, отступы трека и скрытие скроллбара — реюз .au-slider__track
   (about.css). right: 0 осознанно от padding-box: трек уходит под обрез
   кадра, четвёртая карточка видна частично (1964 при 1920). */
.au-home-reviews__track {
  position: absolute;
  left: var(--au-gutter);
  right: 0;
  top: calc(var(--au-tail) + 164px);
  display: flex;
  gap: 24px;
}

/* Внутренний ритм един у всех четырёх карточек (проверено по metadata).
   Смещения спеки даны от внешнего края, а padding считается от padding-box:
   у карточек с рамкой на 1px меньше (тот же приём, что в reviews.css). */
.au-home-reviews__card {
  position: relative;
  flex: none;
  width: 449px;
  height: 520px;
  display: flex;
  flex-direction: column;
  padding: 47px 37px; /* внешние 48/38 */
  border: 1px solid var(--au-hairline-dark);
  border-radius: 20px;
  background: var(--au-white);
  overflow: hidden;
}

/* Карточки 2 (видео) и 4: #efefef без рамки — отступы внешние, без вычета. */
.au-home-reviews__card--video,
.au-home-reviews__card--plain {
  padding: 48px 38px;
  border: 0;
  background: var(--au-band);
}

/* Видеокарточка кликабельна целиком (lightbox.js), не только кнопкой play. */
.au-home-reviews__card--video:has(.au-home-reviews__play) {
  cursor: pointer;
}

/* Трекинг 2.1px снят 2026-09-23: «О т з ы в   о б :» читалось по буквам.
   В макете у ноды стоял letter-spacing 2.1 при кегле 14 — это 15 % кегля,
   как и у остальных пяти растянутых строк сайта. */
.au-home-reviews__label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px; /* в макете normal (17) */
  color: var(--au-black);
}

.au-home-reviews__product {
  margin: 8px 0 0; /* низ «Отзыв об:» 65 → верх продукта 73 */
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  color: var(--au-black);
  /* Кегль 16/500 — не крупный, порог 4.5: при 0.3 было 2.08 (#efefef) и 2.11
     (белый), 0.56 — 4.76 и 4.94. */
  opacity: 0.56;
}

/* Весь отзыв — одна нода, пустая строка между «абзацами» — настоящая строка
   26px: white-space вместо margin между абзацами (в отличие от страницы
   «Отзывы», правило .au-review__text оттуда сюда не переносится). */
.au-home-reviews__text {
  max-width: 315px;
  margin: 88px 0 0; /* низ продукта 92 → верх текста 180 */
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  white-space: pre-line;
  color: var(--au-black);
}

/* Подвал: аватар 50, зазор до имени 14, рейтинг в той же строке —
   flex с центрированием (дрейф 0.5px макета не воспроизводим).
   position подняться над затуханием длинной карточки; margin-top: auto
   прижимает подвал к низу фиксированных 520. */
.au-home-reviews__foot {
  position: relative;
  display: flex;
  align-items: center;
  margin: auto 0 0;
}

.au-home-reviews__avatar {
  flex: none;
  width: 50px;
  height: 50px;
  margin-right: 14px;
  border-radius: 50%;
  object-fit: cover;
}

.au-home-reviews__name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: var(--au-black);
}

/* pc: рейтинг привязан к правому краю карточки (363…411 = 449 − 38,
   симметрично левому отступу) — margin-left: auto. */
.au-home-reviews__rating {
  margin: 0 0 0 auto;
  font-size: 32px;
  font-weight: 500;
  line-height: 23px;
  color: var(--au-black);
  /* Кегль 32/500 — крупный, порог 3.0: при 0.3 было 2.08 (#efefef) и 2.11
     (белый), 0.47 — 3.50 и 3.59. Видеокарточка перебивает своим правилом. */
  opacity: 0.47;
  /* Значение приходит из админки, а коробка макетная: `nowrap` не давал ему
     ни перенестись, ни сжаться, и длинное значение уходило за кромку карточки.
     Замер подстановкой «4.9 из 5 на Яндекс.Картах»: на 390 за кромку 278,
     на 1920 — 145, в сторону соседней карточки. Режет карточка
     (`overflow: hidden` у `.au-home-reviews__card`), а не сам бокс.
     `min-width: fit-content` здесь главное: он держит нижнюю границу по
     содержимому, поэтому короткое «4.9» сжаться не может — его бокс и чернила
     остаются ровно там же при любой ширине (проверено замером на 320, 360,
     374, 390, 1024, 1440, 1920 — ни одного отличия), — а длинному даёт
     ужаться и перенестись. `anywhere` нужен именно вместо `break-word`:
     нижнюю границу в раскладке меняет только он.
     Остаток на 320 / 360 / 390: 105 / 97 / 102 точки за кромку. Строка там
     занята целиком — бокс начинается после имени, до правого поля карточки
     остаётся 132 точки, а самое длинное слово значения («Яндекс.Картах»)
     занимает 235. Убрать остаток можно только переносом значения на свою
     строку или разрывом слова с разрешённым сжатием — и то, и другое сдвинет
     живое «4.9». */
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: fit-content;
  max-width: 100%;
}

/* ─── Видео-карточка: фото → затемнение → подписи и play ─────────────── */
.au-home-reviews__photo {
  position: absolute;
  inset: 0;
  background-image: url(../img/home/reviews-video.webp?v=3);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Нода «image 1» — не картинка, а сплошная подложка rgba(0,0,0,0.29). */
.au-home-reviews__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.29);
}

.au-home-reviews__card--video .au-home-reviews__label,
.au-home-reviews__card--video .au-home-reviews__product {
  position: relative;
  color: var(--au-white);
}

.au-home-reviews__card--video .au-home-reviews__product {
  opacity: 1;
}

.au-home-reviews__card--video .au-home-reviews__name {
  color: var(--au-white);
}

.au-home-reviews__card--video .au-home-reviews__rating {
  color: var(--au-white);
  opacity: 0.7;
}

/* Кнопку выводит сниппет у любого отзыва с видео; в макете она есть только
   на карточке с оформлением «video» — у остальных видео открывается со
   страницы «Отзывы». */
.au-home-reviews__card:not(.au-home-reviews__card--video) .au-home-reviews__play {
  display: none;
}

/* Дрейф макета 0.5px влево не воспроизводим — строго по центру обоих осей. */
.au-home-reviews__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Play приглушён до #B1B1B1 макета фильтром поверх белого глифа: один ассет
   на оба состояния вместо второго серого SVG. 0.694 = 177/255. */
.au-home-reviews__play img {
  display: block;
  width: 44px;
  height: 44px;
  filter: brightness(0.694);
  transition: filter 0.2s;
}

.au-home-reviews__card:hover .au-home-reviews__play img,
.au-home-reviews__play:focus-visible img {
  filter: none;
}

/* Пара к :hover — кнопка play, а не карточка: карточка это
   <article role="listitem">, табом она не достигается (проверено обходом),
   :focus-visible на ней не сработал бы никогда. Кольцо — сайтовое (2px,
   отступ 2), как в cart.css (778669e). */
.au-home-reviews__play:focus-visible {
  outline: 2px solid var(--au-black);
  outline-offset: 2px;
}

/* ─── Длинная карточка: затухание и скроллбар только на pc ───────────── */
/* Читаемое окно 180 → 369 (начало затухания), дальше текст скроллится.
   Обёртка расширена вправо до x445: скроллбар стоит у края карточки
   (x443–445), а не у текста. Значения бегунка задаст реальный overflow. */
.au-home-reviews__scroll {
  height: 189px;
  margin: 88px -35px 0 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.au-home-reviews__scroll::-webkit-scrollbar {
  width: 2px;
}

.au-home-reviews__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.au-home-reviews__scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.au-home-reviews__scroll .au-home-reviews__text {
  max-width: 315px;
  margin-top: 0;
}

/* reviewText — rich-text TV, значение уже само обёрнуто в <p>...</p>, а шаблон
   оборачивает его ЕЩЁ раз в <p class="au-home-reviews__text">. Вложенный <p>
   в <p> невалиден: браузер закрывает внешний .au-home-reviews__text пустым на
   первом же внутреннем <p> и выносит реальный текст безклассовым соседом того
   же уровня — тот теряет max-width:315px и на «длинной» карточке вылезает за
   правый край, обрываясь на середине слова (воспроизводится и на 1920 — это
   не адаптив, а баг разметки чанка, вне зоны home.css; правка нужна в
   home.review.tpl, не делаю её здесь). До CTA-кнопки этот текст физически
   не долетает: .au-home-reviews__card и .au-home-reviews__scroll оба с
   overflow≠visible, — детекторный «наезд» на кнопку сам по себе false
   positive. Ловим сироту по факту разрыва разметки и возвращаем ширину,
   чтобы карточка не резала слово пополам. Только pc: на mb карточка
   height:auto и от контента, а любой чужой реф­лоу текста там сдвинул бы
   высоту карточки — эталон 390 обязан остаться неподвижным. */
@media (min-width: 1024px) {
  .au-home-reviews__text ~ p {
    max-width: 315px;
  }
}

.au-home-reviews__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 151px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.91) 39.073%, #ffffff 59.934%);
}

/* Оформление кнопки — реюз .au-btn + .au-btn--home без изменений, здесь
   только позиция (правый край 1621+203 = 1824). */
.au-home-reviews__cta {
  position: absolute;
  right: var(--au-gutter);
  top: calc(var(--au-tail) + 756px);
}

@media (max-width: 1023px) {
  .au-home-reviews {
    height: auto;
  }

  .au-home-reviews .au-container {
    height: auto;
    padding-bottom: var(--au-tail-mb); /* 72 — тот же хвост, что на pc, вполовину */
  }

  /* Отзывы приходят из CMS и могут быть выше макетных. Трек и кнопка остаются
     в потоке: при исходном тексте это те же 302 / 48 / 72px, при длинном
     секция растёт и не накрывает карточки и следующий блок. */
  .au-home-reviews__slider {
    padding-top: calc(var(--au-tail-mb) + 156px);
  }

  .au-home-reviews__title {
    width: 316px;
  }

  .au-home-reviews__caption {
    left: var(--au-gutter-mb);
    top: calc(var(--au-tail-mb) + 100px);
    width: 219px;
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
  }

  .au-home-reviews__nav {
    display: none;
  }

  /* Трека-скролла нет: вертикальная колонка с шагом 24. */
  .au-home-reviews__track {
    position: static;
    flex-direction: column;
    gap: 24px;
    overflow: visible;
  }

  /* Высота выводится из контента (484 / 614 / 432): height сброшен,
     левый отступ mb 36 (у четвёртой в макете 38 — дрейф, беру 36, см. спеку). */
  .au-home-reviews__card {
    width: auto;
    height: auto;
    padding: 47px 35px;
  }

  .au-home-reviews__card--video,
  .au-home-reviews__card--plain {
    padding: 48px 36px;
  }

  .au-home-reviews__text {
    margin-top: 64px; /* 92 → 156 */
  }

  .au-home-reviews__card--bordered .au-home-reviews__text {
    max-width: 263px;
  }

  .au-home-reviews__card--long .au-home-reviews__text {
    max-width: 261px;
  }

  .au-home-reviews__card--plain .au-home-reviews__text {
    max-width: 224px;
  }

  /* Затухания и скролла нет — карточка показывает текст целиком. */
  .au-home-reviews__scroll {
    height: auto;
    margin: 64px 0 0;
    overflow: visible;
  }

  .au-home-reviews__fade {
    display: none;
  }

  .au-home-reviews__foot {
    margin-top: 48px;
  }

  /* mb: рейтинг привязан к имени (+24), а не к правому краю карточки. */
  .au-home-reviews__rating {
    margin-left: 24px;
  }

  /* mb показывает левые 338 из тех же 449px кадра (срез справа 111px). */
  .au-home-reviews__photo {
    background-position: 0% 35.08%;
    background-size: 132.86%;
  }

  /* Видео-карточка и на mb фиксированные 520: подвал прижат к низу. */
  .au-home-reviews__card--video {
    height: 520px;
  }

  .au-home-reviews__card--video .au-home-reviews__foot {
    margin-top: auto;
  }

  .au-home-reviews__cta {
    position: static;
    width: fit-content;
    margin: 48px auto 0;
  }
}

/* Видео экспертов. Figma: pc 1091:3059 («Блок 11. Экспертные видео», 1920×1080,
   y11113 → 12193), mb 1024:1954…1957 («Home screen 10/mb», 390×1716, y14607 → 16323).
   Значения — из .design/spec/home.videos.md.

   Реюз, новых правил не требует: карточки — .au-video* (videos.css), трек —
   .au-slider__track (about.css: скролл, скрытые скроллбары, smooth), стрелки —
   .au-slider__btn + .au-slider__btn--hairline (рамка: белое на белом иначе
   невидимо, замер 242/255 в спеке) в обёртке .au-arrow-pair (flex, gap 24),
   листание — slider.js без изменений (шаг = ширина карточки + зазор, кнопок
   на mb нет). Ниже — только pc-геометрия главной (модификатор секции,
   videos.css не трогаем) и сбросы на mb-значения (те же числа, что mb-правила
   videos.css: селектор секции специфичнее, наследование их не пробьёт).
   Из videos.css берётся как есть: radius 160 превью (157 у --new под обводку
   3px), подпись 32/36, метка 14/17 uppercase, градиент --new (сверен пиксельно),
   hover-скрим 0.35, mb-превью 327×302/radius 120/margin-left 32, mb-подпись
   26/31.5, mb-метка 54/75, шаг 71.

   Высота. Единственная из фиксированных секций главной, у которой дети в
   потоке (трек), поэтому высота здесь не нужна вовсе: было height: 1080px —
   макетный узел, и хвост выходил 102.8 на 1920, но 149.8 на 1024, потому что
   трек подстраивается под подпись (line-height карточки идёт по --au-k), а
   высота секции стояла. Теперь низ секции считает сам поток:
   356 (верх карточек) + трек + --au-tail. Абсолютные дети (заголовок, стрелки)
   привязаны к верху и не двигаются. */
.au-home-videos {
  position: relative;
  height: auto; /* низ = 356 + трек + хвост; макетный узел 1080 отсюда убран */
  padding: calc(var(--au-tail) + 164px) 0 var(--au-tail); /* заголовок/стрелки — абсолютные на голове */
  background: var(--au-white);
  box-sizing: border-box;
}

/* Заголовок: pc «Видео / экспертов», mb «Эксперты / об Auren» — разные строки,
   поэтому пара --pc/--mb, как у слайдера/флагмана. Вторая строка — приглушена. */
.au-home-videos__title--pc {
  left: var(--au-gutter);
}

.au-home-videos__title--mb {
  display: none;
}

/* Стрелки Arrow 1: только pc, 240×68 (две пилюли 108 + зазор 24 даёт .au-arrow-pair). */
.au-home-videos__nav {
  position: absolute;
  top: var(--au-tail); /* на линии заголовка */
  right: var(--au-gutter); /* containing block — padding-box: left/right 0 под гаттером запрещены */
}

/* §139: заголовок и стрелки — абсолютные дети .au-container, а не секции:
   containing block у них padding-box контейнера, поэтому `left/right:
   var(--au-gutter)` даёт края контентной колонки на любой ширине (416 и 2144
   на 2560 вместо 96 и 2464). Контейнер нулевой высоты и прижат к верху: оба
   ребёнка позиционируются от верха секции (top 144 / 216), а нулевая высота
   оставляет клики по карточкам видео треку, который лежит вне контейнера.
   Тот же приём, что у оверлея слайдера и у секции флагманов. */
.au-home-videos > .au-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* Трек-карусель: 4×448 + 3×24 = 1864, правый край 1960 уходит под обрез —
   листается стрелками (тот же случай, что ряд категорий каталога).
   §139: трек остаётся во всю ширину окна (карточки по-прежнему уходят за
   правый край), но старт — на линии контентной колонки. Левое поле — та же
   геометрия, что у .au-container, выраженная его же переменными: гаттер до
   1920, дальше — гаттер от края центрированной колонки (416 на 2560).
   В контейнер трек не заводим: его max-width обрезал бы карусель на 1920,
   и справа от неё осталась бы белая полоса. */
.au-home-videos__track--pc {
  display: flex;
  gap: 24px;
  padding-left: var(--au-gutter);
  padding-right: var(--au-gutter);
}

/* Выше 1920 старт ряда уезжает вместе с колонкой: (100% − 1920)/2 — тот же
   сдвиг, что даёт `margin: 0 auto` у .au-container, плюс гаттер. Ветка
   вынесена в медиазапрос намеренно: в общем правиле `var(--au-gutter)` в
   сумме с процентным членом браузер квантует до 1/64px (95.9844 вместо 96), и
   на 1920 строка сдвинулась бы на 0.0156 — поэтому до 1921 значение остаётся
   ровно гаттером, пиксель в пиксель с прежним. */
@media (min-width: 1921px) {
  .au-home-videos__track--pc {
    padding-left: calc((100% - var(--au-page-w)) / 2 + var(--au-gutter));
  }
}

.au-home-videos__track--mb {
  display: none;
}

/* pc-карточка: превью 448×463 (шаг 472), подпись 44 под превью, инсет 47/354,
   метка 26 под подписью. Ширина бокса метки — 103; трекинг 2.1px снят
   2026-09-23, он добавлял одиннадцать зазоров и давал 127. */
.au-home-videos .au-video {
  flex: none;
  width: 448px;
  min-height: 0; /* у videos.css 591 под прижатую метку — здесь метка в потоке */
}

.au-home-videos .au-video__preview {
  width: 448px;
  height: 463px;
}

.au-home-videos .au-video__play {
  left: 50%; /* ровно по центру; +1.5 из videos.css — только mb */
}

.au-home-videos .au-video__title {
  max-width: 401px; /* 47 + 354, симметрия проверена по всем четырём */
  margin: 44px 0 0;
  padding-left: 47px;
}
.au-home-videos .au-video__label {
  margin: 26px 0 0;
  padding-left: 47px;
}

/* Удалено: `.au-home-videos__caption-case` и `.au-home-videos__caption-case span`.
   Правила воспроизводили подпись четвёртой карточки из макета (1091:3059:
   «Результате … ayren metabolic», textCase LOWER плюс UPPER-спан на первой
   букве). В живую вёрстку приём не переехал: класс есть только в статичном
   макете `full-home.html` в корне репозитория, а карточка видео печатает
   `home.video.tpl` — заголовок и метку. Держать оформление под разметку,
   которой на сайте нет, смысла не имеет; опечатки макета («примеа», «AYREN»)
   были отдельным вопросом заказчику (спека home.videos.md, вопрос №4). */

@media (max-width: 1023px) {
  .au-home-videos {
    height: auto; /* низ = 233 + трек + хвост; макетный узел 1716 отсюда убран */
    padding: calc(var(--au-tail-mb) + 112px) 0 var(--au-tail-mb);
  }

  .au-home-videos__title--pc {
    display: none;
  }

  .au-home-videos__title--mb {
    display: block;
    width: 316px; /* 2 строки ≈ 88 = бокс 316×88 */
  }

  .au-home-videos__nav {
    display: none; /* стрелок на mb нет */
  }

  .au-home-videos__track--pc {
    display: none;
  }

  /* mb — 3 карточки в столбик, полноширинные (гаттер не применяется):
     ритм по контенту, зазор 71 от низа видимого текста до верха превью,
     хвост 72 (1644 → 1716). Значения карточек — из mb-правил videos.css. */
  .au-home-videos__track--mb {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 71px;
  }

  .au-home-videos .au-video {
    width: auto;
  }

  .au-home-videos .au-video__preview {
    width: 327px;
    height: 302px;
  }

  .au-home-videos .au-video__play {
    left: calc(50% + 1.5px);
  }

  .au-home-videos .au-video__title {
    max-width: 335px; /* 75 + 260 */
    margin: 24px 0 0;
    padding-left: 75px;
  }

  .au-home-videos .au-video__label {
    margin: 54px 0 0 75px;
    padding-left: 0;
    /* трекинга нет ни здесь, ни на pc — бокс метки 103 на обоих
       брейкпоинтах и на странице «Видео» (2.1px снят 2026-09-23) */
  }
}

/* ─── CTA Telegram ────────────────────────────────────────────────────
   PC 1024:1671 (1920×454, y12193 → низ 12647), MB 1024:1958 (390×547,
   y16323 → низ 16870). Источник каждого элемента — .design/spec/home.telegram.md.
   Три элемента без картинок и иконок: заголовок, кнопка, ссылка t.me/AUREN.
   Хвост равен верхнему отступу — высота собирается паддингом секции,
   фиксированной высоты и абсолютных координат нет.
   Отступ задан токеном --au-tail, а не литералом: раньше здесь стояло 106/74,
   выведенное из узла как «верх 106 = хвост 454 − низ кнопки 348» (было в этой
   строке до 2026-09-23). Форма решения та же — хвост равен верхнему отступу,
   изменилось только число: 106 против общего ритма 144, 74 против 72.
   Узел 454 при этом не сохраняется: секция растёт на 38 с каждой стороны. */
.au-home-telegram {
  /* Гаттер mb по макету — 36 вместо сайтовых 26 (противоречие №1 спеки):
     левый край всех трёх элементов 36. Переключается одной строкой. */
  --au-gutter-mb: 36px;
  padding: var(--au-tail) 0;
  margin-top: var(--au-tail); /* + хвост Видео 48 = зазор 96 до серой полосы */
  background: var(--au-band);
  color: var(--au-black);
}

.au-home-telegram__inner {
  display: flex;
  justify-content: space-between; /* t.me правым краем в 1824 = край контейнера */
  align-items: flex-start; /* t.me top:106 — в одной строке с заголовком */
}

.au-home-telegram__main {
  /* Колонка держит кнопку в контентной ширине (flex-start вместо stretch),
     поэтому у кнопки чистый реюз .au-btn .au-btn--home без единого правила. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.au-home-telegram__title {
  margin: 0 0 24px; /* низ заголовка 216 (106+110) до верха кнопки 280 */
  /* Ширина — только выбор переноса. В макете перенос жёсткий (3136:3775:
     «Мы на связи и рядом.» / «Сердце AUREN.»), в коде разрывов нет, поэтому
     его задаёт эта ширина. При Inter 600 хватало 661, при более узком
     Inter Tight в неё влезало ещё и «Сердце» и разбиение уезжало.
     Коридор 469.2 (первая строка) … 646.3 (однострочник), держим 560. */
  max-width: 560px;
  font-size: 48px;
  line-height: 55px;
  word-break: break-word; /* перенос по ширине ноды, жёстких разрывов нет */
}

/* Нода 3136:3778 — Inter Tight Regular 72/70, трекинг 0, чёрный. Прежние ноды
   того же места (1024:1675, 3136:3380) — Inter Semi Bold 72/70: «тонкий» файл
   сменил здесь семейство и вес, а кегль, интерлиньяж и цвет оставил как были.
   Подчёркивание берётся из метрик шрифта (from-font), поэтому его толщина
   едет за начертанием; ширина ссылки от смены начертания только уменьшается. */
.au-home-telegram__link {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 70px;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: opacity 0.2s ease;
}

/* VIS-14: ховер и фокус ссылки на Telegram (паттерн текстовых ссылок layout.css) */
.au-home-telegram__link:hover,
.au-home-telegram__link:focus-visible {
  opacity: 0.7;
}
.au-home-telegram__link:focus-visible {
  outline: 2px solid var(--au-black);
  outline-offset: 4px;
}

@media (max-width: 1023px) {
  .au-home-telegram {
    padding: var(--au-tail-mb) 0; /* было 74 = хвост 547 − низ t.me 473 */
    margin-top: var(--au-tail-mb);
  }

  .au-home-telegram__inner {
    flex-direction: column; /* стек: заголовок → кнопка → t.me */
  }

  .au-home-telegram__title {
    margin: 0 0 24px; /* низ заголовка 191 (74+117) до верха кнопки 239 */
    max-width: 288px; /* ширина ноды: 3 строки 3×39 = 117 */
    font-size: 32px;
    line-height: 39px; /* 117 / 3 — normal по спеке */
  }

  .au-home-telegram__link {
    align-self: center; /* (390 − 288) / 2 = 51 */
    margin-top: 36px; /* низ кнопки 307 до верха t.me 403 */
    font-size: 48px;
  }
}

/* ─── Заявка ───────────────────────────────────────────────────────────────
   PC 1091:2975 («Zayavka /pc», 1920×1080, y12647 → стык 13727),
   MB 1024:1963 (390×1222, y16870 → стык 18092). Источник каждого элемента —
   .design/spec/home.zayavka.md.
   Блок в потоке между CTA-Telegram и дисклеймером, зазоры 0 с обеих сторон;
   крестик Close/pc (1091:2997) в вёрстку не идёт (§0 спеки). Фон #686876 —
   литерал, как .au-home-features__card--dark (токена в base.css нет, решение
   за владельцем токенов). Абсолютные дети лежат внутри .au-container и берут
   гаттер явно: containing block у них — padding-box (та же ловушка, что
   ловили на стрелках наград, см. about.css). */
/* Секция заявки переведена в поток. Было `height: 1000px` — макетный узел 1920:
   высота стояла числом, а содержимое внутри сжимается вместе с окном (три поля
   считаются от --au-k), поэтому низ краски уезжал 847 → 893, и разницу секция
   добирала пустотой внизу: хвост 152.67 на 1920, 130.50 на 1440, 107.50 на 1024.
   Теперь высоту даёт содержимое плюс общий хвост --au-tail, как у соседних
   секций главной (решения 106 и 107).
   Верхние 144 живут на контейнере как `padding-top`, а не здесь: тогда
   padding-box контейнера совпадает с верхом секции, и оставшийся абсолютный
   ребёнок (`__message`) меряет свой `top` от верха секции, как раньше.
   `margin-top` на контейнере вместо `padding-top` запрещён — маргин
   схлопывается сквозь контейнер и сдвигает всю страницу на 144.
   Хвост держится в ОБОИХ состояниях секции: и в форме, и в экране успеха —
   поэтому `.au-home-zayavka__success` тоже переведён в поток.
   Цена: на 1920 секция 994 против 1000 — 6px, разница между прежним пустым
   остатком 150 и общим ритмом 144. */
.au-home-zayavka {
  position: relative;
  height: auto;
  padding-bottom: var(--au-tail);
  /* Сверху — вплотную к серой полосе Telegram, как в макете: белый зазор
     между двумя полосами заказчик вернул обратно (2026-09-29). Снизу белая
     секция со своей головой — половина зазора. */
  margin: 0 0 var(--au-tail);
  background: #686876;
}

/* Светлая тема формы заявки на страницах курсов и консультаций: белый фон,
   чёрный текст, чёрная кнопка. Модификатор выводит поле «theme» блока
   (dark по умолчанию на главной, light на карточках курсов/консультаций).
   Кнопка (.au-btn) уже чёрная с белым текстом — на белом фоне подходит без
   правок, поэтому переопределяются только цвета текста, линий и подсказок.
   Раскладка переведена на естественный поток (flex-колонка): пиксельная
   абсолютная сетка тёмного варианта рассчитана на однострочный заголовок
   «Оставьте заявку», а «Запишитесь на консультацию» переносится на две строки
   и наезжал на подзаголовок. Поток адаптируется к любой длине заголовка на
   всех брейкпоинтах. Правила выше по специфичности (два класса) перебивают
   абсолютные координаты тёмного макета, в том числе в мобильном медиазапросе. */
.au-home-zayavka--light {
  background: var(--au-white);
}

.au-home-zayavka--light .au-home-zayavka__title {
  color: var(--au-black);
}

.au-home-zayavka--light .au-home-zayavka__subtitle {
  color: var(--au-black);
}

.au-home-zayavka--light .au-home-zayavka__subtitle-dim {
  /* Светлая форма обязана нести своё правило явно: тёмное выше даёт 0.9 белого,
     а на белом это 1.05:1. Половинный чёрный давал 3.95, 0.6 даёт 5.74 — замерено. */
  color: rgba(0, 0, 0, 0.6);
}

.au-home-zayavka--light .au-home-zayavka__message {
  color: var(--au-black);
}

.au-home-zayavka--light .au-home-zayavka__message--error,
.au-home-zayavka--light .au-home-zayavka__error {
  /* Ошибка поля тоже: на белом #ffb4a2 даёт 1.71:1 (замер), под линией поля
     читается как пустое место. Теперь те же 5.44:1, что у сообщения формы. */
  color: #c0392b;
}

.au-home-zayavka--light .au-home-zayavka__input {
  border-bottom-color: rgba(0, 0, 0, 0.35);
  color: var(--au-black);
}

.au-home-zayavka--light .au-home-zayavka__input::placeholder {
  color: var(--au-black);
  opacity: 0.6;
}

.au-home-zayavka--light .au-home-zayavka__input:focus,
.au-home-zayavka--light .au-home-zayavka__input:not(:placeholder-shown) {
  border-bottom-color: var(--au-black);
}

.au-home-zayavka--light .au-home-zayavka__marker,
.au-home-zayavka--light .au-home-zayavka__step-text {
  color: var(--au-black);
}

/* Высота по содержимому, хвост — из своего `clamp`.

   Обе величины объявлены ЗДЕСЬ, ниже базового `.au-home-zayavka` (3577), при
   равной специфичности (0,1,0), поэтому перекрывают базовое правило порядком
   следования, а не весом. Пока это так, паддинг и высота базового правила
   шести страниц курсов и консультаций не касаются — проверено 2026-09-23:
   добавление `padding-bottom` в базовое правило не сдвинуло светлые страницы
   ни на точку, а `height: auto` в базовом правиле складывает тёмную форму
   с 1000 до 144.

   Ловушка: если базовое правило когда-нибудь перенесут ниже этой строки,
   защита исчезнет и шесть страниц поедут молча. Перестановку блоков
   проверять замером — глазами тут ничего не видно.

   Ниже 1024 перекрытие переворачивается: `@media (max-width: 1023px)` ниже
   задаёт базовому правилу `height: 1140px`, а это правило стоит выше него —
   светлая форма теряет высоту по содержимому. Замер 2026-09-23: на 390 бокс
   1140 против 940, хвост 190.67 при мобильном стандарте 72, по полосе
   390…1023 хвост уезжает до 269.84. Дефект измерен и НЕ исправлен: светлой
   формы на главной нет ни разу (это 3 курса и 3 консультации), в задачу
   выравнивания ритма главной он не входит. Решение за владельцем. */
.au-home-zayavka--light {
  height: auto;
  padding: clamp(56px, 8vw, 96px) 0;
}

.au-home-zayavka--light .au-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: auto;
}

/* `margin: 0` здесь не для красоты: перевод тёмной формы в поток добавил
   маргины, которые до этого не существовали ни у кого, — 36 у подзаголовка,
   96 у формы, 55 у согласия, 54 у кнопки, 146 у списка шагов, 48 у полей и
   45/38/64/49 в мобильном блоке. Светлая форма раскладывается своим `gap`,
   и любой из этих маргинов, доставшийся ей по наследству, сдвигает её вниз
   (замер: согласие +55, кнопка +109, шаги +109 на 1920). Селекторы списка
   ниже имеют два класса против одного у базовых правил тёмной, поэтому
   обнуление побеждает по весу, а не по порядку, — те маргины, что светлой
   форме действительно нужны, она задаёт своими правилами дальше. */
.au-home-zayavka--light .au-home-zayavka__title,
.au-home-zayavka--light .au-home-zayavka__subtitle,
.au-home-zayavka--light .au-home-zayavka__message,
.au-home-zayavka--light form,
.au-home-zayavka--light .au-home-zayavka__field,
.au-home-zayavka--light .au-home-zayavka__consent,
.au-home-zayavka--light .au-home-zayavka__submit,
.au-home-zayavka--light .au-home-zayavka__steps,
.au-home-zayavka--light .au-home-zayavka__step {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  margin: 0;
}

.au-home-zayavka--light .au-home-zayavka__title {
  width: auto;
  max-width: 820px;
  margin: 0;
}

.au-home-zayavka--light .au-home-zayavka__subtitle {
  width: auto;
  max-width: 655px;
  margin: 12px 0 0;
}

.au-home-zayavka--light .au-home-zayavka__message {
  width: auto;
  max-width: 655px;
  margin: 24px 0 0;
}

/* Селектор с `.au-home-zayavka__form-wrap` — не украшение: он даёт
   специфичность (0,2,1) против (0,1,1) у тёмного `.au-home-zayavka form`,
   который стоит НИЖЕ по файлу. При равной специфичности грид тёмной формы
   перекрывал светлую по порядку следования, и светлая форма становилась
   гридом: поля съезжали в три колонки 469/335/335 вместо колонки 560, а
   зазор до подзаголовка становился 96 вместо 48. Весом, а не порядком —
   тогда перестановка блоков светлую форму не уронит. */
.au-home-zayavka--light .au-home-zayavka__form-wrap form {
  width: 100%;
  max-width: 560px;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.au-home-zayavka--light .au-home-zayavka__field {
  width: 100%;
}

.au-home-zayavka--light .au-home-zayavka__consent {
  width: auto;
  max-width: 480px;
}

.au-home-zayavka--light .au-home-zayavka__steps {
  display: flex;
  /* `flex-direction` и `align-items` объявлены явно, хотя совпадают со
     значением по умолчанию: мобильный блок тёмной формы задаёт списку шагов
     `flex-direction: column` и `align-items: flex-start`, а светлое правило
     этих свойств не трогает — и колонка досталась бы светлой форме
     по наследству (замер 390: список шагов 237 → 844, форма 896 → 1503,
     высота страницы при этом не менялась, потому что секция фиксированная). */
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 32px 48px;
  width: 100%;
  margin-top: 64px;
}

.au-home-zayavka--light .au-home-zayavka__step {
  flex: 1 1 260px;
  max-width: 360px;
}

/* `height: 100%` держался на фиксированной высоте секции и вместе с ней уходит.
   Верхние 144 живут здесь: см. комментарий к `.au-home-zayavka` выше. */
.au-home-zayavka .au-container {
  position: relative;
  height: auto;
  padding-top: var(--au-tail);
}

/* Светлая форма (курсы и консультации, 6 ресурсов) в правке ритма тёмной НЕ
   участвует: у неё своя высота и свой хвост. Контейнеру тёмной формы верхние
   144 нужны, светлой — нет, верх задаёт `padding` самой секции; но правило
   выше стоит НИЖЕ светлого блока и при равной специфичности (0,1,0)
   перекрывает его по порядку следования. Поэтому здесь снимается обратно.
   Строку держать ПОСЛЕ `.au-home-zayavka .au-container`: перестановка
   вернёт светлым страницам лишние 144 сверху молча. */
.au-home-zayavka--light .au-container {
  padding-top: 0;
}

/* Заголовок в потоке. Абсолютную привязку даёт общий `.au-home-h2` (position,
   left, top: 144) — здесь она снимается, координату 144 теперь держит
   `padding-top` контейнера. Правило ниже `.au-home-h2` в файле при равной
   специфичности, поэтому перекрывает его и на планшете, и на мобильном —
   на мобильном абсолют возвращается явно, см. @media (max-width: 1023px). */
.au-home-zayavka__title {
  position: static;
  left: auto;
  top: auto;
  width: 597px;
  /* Макетная ширина ограничена ещё и контейнером: на 320 она задавала бокс
     316 при контейнере 268, и чернила заголовка на каталожных страницах
     выходили за окно на 2.9 — их срезал `overflow: hidden` у `MAIN.au-page`.
     Замер 320 до правки: чернила 26…322.9 (окно 320). После: заголовок
     переносится в 268, чернила 26…290.6.
     На 390 и выше не меняется ничего: контейнер там 338, а макетная ширина
     316 — предел не достигается. Проверено замером боксов: 375, 390, 1024,
     1920 — ноль изменений. */
  max-width: 100%;
  color: var(--au-white); /* единственная секция с белым заголовком */
}

/* В потоке зазор задаётся маргином, а не координатой: низ заголовка 214 +
   зазор 36 = 250. Ширина 655 остаётся макетной. */
.au-home-zayavka__subtitle {
  width: 655px;
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 36px;
  color: var(--au-white);
}

.au-home-zayavka__subtitle-dim {
  /* 20/400 при норме 4.5: половинный белый давал 2.66:1. 0.9 даёт 4.81:1 — замерено. */
  color: rgba(255, 255, 255, 0.9);
}

.au-home-zayavka__subtitle-bold {
  font-weight: 700;
}

/* Сообщения формы. В макете их нет — состояний «отправлено» и «ошибка» автор не
   рисовал. Место найдено внутри существующего ритма: низ подзаголовка 286,
   поля начинаются на 382, значит строка на 316 ничего не сдвигает. Типографика
   подзаголовка, чтобы сообщение не читалось чужеродным элементом. */
.au-home-zayavka__message {
  position: absolute;
  left: var(--au-gutter);
  top: 316px;
  width: 655px;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--au-white);
}

.au-home-zayavka__message--error {
  /* На подложке #686876 прежний #ffb4a2 давал 3.21:1 при норме 4.5 (кегль 20/400
     крупным не считается). #ffeeeb даёт 4.88:1 — замерено. */
  color: #ffeeeb;
}

/* Ошибка поля ложится под его линию (низ поля 441), не сдвигая соседей. */
.au-home-zayavka__error {
  position: absolute;
  left: 0;
  top: 62px;
  font-size: 14px;
  line-height: 20px;
  /* Тот же цвет, что у сообщения формы: 14/400 крупным не считается, на #686876
     прежний давал 3.21:1. Светлая форма перекрывает его своим правилом ниже. */
  color: #ffeeeb;
}

/* Поля — первая форма в проекте, готовых инпутов нет. Линия-инпут =
   плейсхолдер + border-bottom 1px; линии Figma — не ассеты (прецедент линий
   хедера, layout.header.md). Высота поля 59 = строка 36 + подкладка 22 +
   border 1: низ border ложится ровно на линию макета (top + 59). */
/* Форма — грид в три колонки по ширинам полей. В потоке это даёт ровно те же
   left 96 / 637 / 1044, что раньше считались абсолютно (96 + 469 + 72 = 637;
   637 + 335 + 72 = 1044), но без арифметики в CSS: колонку задаёт переменная.
   Согласие и кнопка занимают строку целиком и стоят по левому краю — как их
   макетные left:96.
   Зазоры между строками — маргинами, а не row-gap: в макете они разные
   (низ полей 441 → согласие 496 = 55; низ согласия 532 → кнопка 586 = 54)
   и одним значением не выражаются.
   `__message` (условная), `.au-visually-hidden` и оба `input[type=hidden]`
   в грид не попадают: первые два абсолютные, третьи скрыты самим браузером. */
.au-home-zayavka form {
  display: grid;
  grid-template-columns: var(--zk-name) var(--zk-phone) var(--zk-email);
  column-gap: var(--zk-gap);
  justify-content: start;
  margin: 96px 0 0; /* низ подзаголовка 286 + 96 = 382 */
}

/* `position: relative` — не для координат, а чтобы `__error` (absolute top:62)
   продолжала считаться от поля. В потоке поле перестало быть absolute,
   и без этого содержащим блоком стал бы контейнер. */
.au-home-zayavka__field {
  position: relative;
}

/* Раскладка 3 полей в ряд (469/335/335, зазор 72) верна только на 1920:
   phone и email стояли на голых left:637/1044 из макета и на узком десктопе
   (1024–1919) вылезали за колонку и за вьюпорт (email на 1024 — на 395px
   и 355px соответственно, наезд §round2). Гоним всё через --au-k: ширины и
   зазор сжимаются к 1024 (плейсхолдеры измерены — 147/118/201px, запас
   заложен). `left` отсюда убран: координату даёт грид формы (см. выше),
   при k=1 он даёт ровно исходные 637 и 1044. */
.au-home-zayavka {
  --zk-name: calc(220px + 249px * var(--au-k)); /* 220 → 469 */
  --zk-gap: calc(24px + 48px * var(--au-k)); /* 24 → 72 */
  --zk-phone: calc(180px + 155px * var(--au-k)); /* 180 → 335 */
  --zk-email: calc(230px + 105px * var(--au-k)); /* 230 → 335 */
}

.au-home-zayavka__field--name {
  width: var(--zk-name);
}

.au-home-zayavka__field--phone {
  width: var(--zk-phone);
}

.au-home-zayavka__field--email {
  width: var(--zk-email);
}

.au-home-zayavka__input {
  width: 100%;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0;
  background: transparent;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 36px;
  color: var(--au-white);
}

.au-home-zayavka__input::placeholder {
  color: var(--au-white);
  opacity: 0.75;
}

/* Заполненное поле нарисовано в макете так же, как фокус: текст и линия без
   прозрачности (у Line 8 в svg нет opacity, у плейсхолдера нет opacity).
   Смена линии и есть индикатор фокуса с клавиатуры. */
.au-home-zayavka__input:focus,
.au-home-zayavka__input:not(:placeholder-shown) {
  border-bottom-color: var(--au-white);
  outline: none;
}

.au-home-zayavka__input:focus::placeholder {
  opacity: 1;
}

/* Кнопка: оформление .au-btn 1:1 (чёрный, radius 260, Bold 16/36), но паддинг
   16/36 не совпадает ни с .au-btn (16/24), ни с .au-btn--home (16/34):
   бокс 208 = 36 + подпись 136 + 36. Третий модификатор поверх сайтовой
   кнопки (держать после .au-btn — та же специфичность, решает порядок);
   сайтовую кнопку не трогаем. */
.au-btn--zayavka {
  padding: 16px 36px;
}

.au-home-zayavka__consent {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 36px; /* низ полей 441 + 55 = 496 */
  width: 480px;
}

.au-home-zayavka__submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 36px; /* низ согласия 532 + 54 = 586 */
}

.au-home-zayavka__consent-icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

.au-home-zayavka__consent-text {
  width: 361px;
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--au-white);
}

/* Шаги: на pc маркеров 1/2/3 (прогрессия-номер шага), на mb по одному —
   единый DOM, лишнее прячется модификатором в медиазапросе. Шаг маркеров
   внутри группы 22 при боксе 14 → gap 8; текст через 22 от последнего
   маркера → margin-right 8. Текст на 4px ниже маркеров (y962 при y958). */
.au-home-zayavka__steps {
  display: flex;
  gap: 72px;
  margin: 48px 0 0; /* низ кнопки 654 + 146 = 800 */
  padding: 0;
  list-style: none;
}

/* В потоке шаг — обычный flex-элемент своей естественной ширины. Макетные
   96 / 501 / 938 из 1920 получаются сами: 96 — гаттер контейнера, а
   96 + 333 + 72 = 501 и 501 + 365 + 72 = 938 — суммы ширин шагов и зазора 72.
   Доли left: 5% / 26.09% / 48.85% убраны: они существовали только потому,
   что шаг стоял абсолютно. На полосе 1024–1919 и зазор, и растяжение другие —
   см. @media ниже. */
.au-home-zayavka__step {
  display: flex;
}

.au-home-zayavka__markers {
  display: flex;
  gap: 8px;
  margin-right: 8px;
}

.au-home-zayavka__marker {
  /* Колонку 14 задаёт .au-plus-icon; кегль и интерлиньяж держат строку шага */
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--au-white);
}

.au-home-zayavka__step-text {
  margin: 4px 0 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--au-white);
}

.au-home-zayavka__step-text strong {
  font-weight: 700;
}

/* Ширины 311 / 321 / 423 из макета — как max-width: на 1024 третий шаг
   начинается с 500 и на жёсткой ширине не помещался в остаток. */
.au-home-zayavka__step--1 .au-home-zayavka__step-text {
  max-width: 311px;
}

.au-home-zayavka__step--2 .au-home-zayavka__step-text {
  max-width: 321px;
}

.au-home-zayavka__step--3 .au-home-zayavka__step-text {
  max-width: 423px;
}

/* Ниже 375 макетных ширин нет — 390 самая узкая из них, — и шаг остаётся
   флекс-элементом с `flex-shrink: 0` в колонке: его ширину задаёт не
   контейнер, а содержимое, поэтому макетные 311 / 321 держали бокс 333 / 343
   в контейнере 268 (окно 320). Текст уходил за окно на 44.4, 34.2 и 5.4, и
   его срезал `overflow: hidden` у `MAIN.au-page` — без горизонтальной
   прокрутки, то есть буквы пропадали совсем. Замер 320: боксы шагов
   333 / 343 / 343 против контейнера 268.
   Предел именно по контейнеру, а не по окну: `100%` от `OL` — та же величина,
   которой живёт остальная вёрстка секции, и её не надо пересчитывать, если
   поля контейнера когда-нибудь изменятся.
   Почему ветка, а не одна строка на все ширины: на 390 контейнер 338, а
   макетный шаг 343 — то есть макет сам на 5 шире контейнера, и любой предел
   по контейнеру обязан изменить 390 (замер: текст шага 321 → 316, перенос
   менялся, высота 50 → 73). Предел по окну сохранил бы 390, но потребовал бы
   вписать в значение поля контейнера и отступ маркера числом — то же
   хардкод-соседство, от которого мы уходим.
   Граница 374 выбрана с запасом: текст начинает пересекать окно при 363.9
   (чернила шага 2 заканчиваются на 364.4), а 375 — общепринятый низ телефонов;
   одиннадцать точек запаса закрывают разницу в метриках шрифта.
   Замер после правки: 320, 360, 374 — чернила внутрь на 20 / 26 / 26; 375,
   390, 1024, 1920 — ноль изменений. */
@media (max-width: 374px) {
  .au-home-zayavka__step {
    max-width: 100%;
  }
}


/* ─── Состояние успешной отправки заявки (Figma: pc 1091:2138, mb 1091:2077) ── */
.au-home-zayavka.is-success .au-home-zayavka__form-wrap,
.au-home-zayavka--success .au-home-zayavka__form-wrap {
  display: none;
}

/* Экран успеха переведён в поток, как и форма. Было: `height: 100%` от
   контейнера плюс `__facts { bottom: 58px }` — то есть факты держались за низ
   определённой высоты, которую давала фиксированная секция. С `height: auto`
   цепочка `100%` разворачивается в auto, у `__success` остаются только
   абсолютные дети, её высота становится 0, и `bottom: 58px` отсчитывается от
   нуля — секция складывалась в 0, а факты уезжали на `-104…-58`.

   Верхние 144 контейнера в состоянии успеха переезжают СЮДА, и `__success`
   снова становится содержащим блоком для `__success-close`. Иначе крестик
   держится за `.au-container`, и его `right: 0` считается от паддинг-бокса
   контейнера, а не от края контента: замер 1920 — крестик 1785.83…1824
   → 1881.83…1920, сдвиг вправо на 96.17. Заменить это на `right: var(
   --au-gutter)` нельзя: у `.au-container` есть `max-width: var(--au-page-w)`
   и `margin: 0 auto`, выше 1920 он уже, и жёсткая привязка к гаттеру дала бы
   другое число. `padding-top: 144px`, а не `margin-top`: маргин схлопнулся бы
   сквозь `__success` на контейнер и вернул бы ошибку сдвига на 144. */
.au-home-zayavka.is-success .au-container,
.au-home-zayavka--success .au-container {
  padding-top: 0;
}

.au-home-zayavka__success {
  display: none;
  width: 100%;
}

.au-home-zayavka.is-success .au-home-zayavka__success,
.au-home-zayavka--success .au-home-zayavka__success {
  display: block;
  position: relative;
  padding-top: var(--au-tail);
}

.au-home-zayavka__success-close {
  position: absolute;
  top: 95px;
  right: 0;
  width: 38.184px;
  height: 38.184px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--au-white);
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--au-ease);
}

.au-home-zayavka__success-close:hover,
.au-home-zayavka__success-close:focus-visible {
  opacity: 1;
}

.au-home-zayavka__success-close::before,
.au-home-zayavka__success-close::after {
  display: none;
}

.au-home-zayavka__success-close-icon {
  width: 100%;
  height: 100%;
  display: block;
}

/* Координату 144 даёт `padding-top` контейнера; абсолютную привязку снимаем,
   как у заголовка формы. */
.au-home-zayavka__success-title {
  position: static;
  left: auto;
  top: auto;
  margin: 0;
  font-size: 72px;
  line-height: 70px;
  color: var(--au-white);
}

/* Низ заголовка 284 (две строки по 70) + 36 = 320. */
.au-home-zayavka__success-subtitle {
  margin: 36px 0 0;
  font-size: 20px;
  line-height: 36px;
  color: var(--au-white);
  max-width: 600px;
}

.au-home-zayavka__success-sub-bold {
  font-weight: 700;
}

/* Низ подзаголовка 392 + 349 = 741. `.au-btn` — display:flex, то есть
   блочный: в потоке он растянулся бы на всю ширину, поэтому width: fit-content
   (ширина та же, что давал absolute: 36 + подпись + 36 = 193.5). */
.au-home-zayavka__success-btn {
  width: fit-content;
  margin: 349px 0 0;
  height: 68px;
  padding: 16px 36px;
  border-radius: 260px;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 36px;
  border: 0;
  cursor: pointer;
  transition: opacity var(--au-ease);
}

/* Правило 5.3: пара к :hover плюс кольцо, одно на весь сайт (cart.css, 778669e):
   2px, отступ 2, чёрное на светлом. */
.au-home-zayavka__success-btn:hover,
.au-home-zayavka__success-btn:focus-visible {
  opacity: 0.85;
}

.au-home-zayavka__success-btn:focus-visible {
  outline: 2px solid var(--au-black);
  outline-offset: 2px;
}

/* Низ кнопки 809 + 87 = 896. `left/right/bottom` убраны: грид блочный и сам
   занимает ширину контейнера, а низ больше не может быть точкой отсчёта —
   высота секции теперь определяется содержимым, а не наоборот. */
.au-home-zayavka__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
  margin: 87px 0 0;
  padding: 0;
  list-style: none;
}

.au-home-zayavka__fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.au-home-zayavka__fact-markers {
  display: flex;
  gap: 6px;
  font-size: 20px;
  font-weight: 500;
  color: var(--au-white);
  line-height: 23px;
  flex-shrink: 0;
}

/* Ширину колонки задаёт .au-plus-icon; правило .au-home-zayavka__fact-marker
   убрано 2026-09-22: в нём оставались только width 14 (ушла в общий класс) и
   text-align: center, который центрировал глиф внутри колонки — иконка шириной
   в колонку центруется сама. */

.au-home-zayavka__fact-text {
  margin: 0;
  font-size: 16px;
  line-height: 23px;
  font-weight: 500;
  color: var(--au-white);
}

.au-home-zayavka__fact-text strong {
  font-weight: 700;
}

/* Светлая тема */
.au-home-zayavka--light .au-home-zayavka__success-close {
  color: var(--au-black);
}

.au-home-zayavka--light .au-home-zayavka__success-title {
  color: var(--au-black);
}

.au-home-zayavka--light .au-home-zayavka__success-subtitle {
  color: var(--au-black);
}

.au-home-zayavka--light .au-home-zayavka__success-sub-dim {
  color: rgba(0, 0, 0, 0.5);
}

.au-home-zayavka--light .au-home-zayavka__fact-markers,
.au-home-zayavka--light .au-home-zayavka__fact-text {
  color: var(--au-black);
}
/* Ниже 1920 три шага в ряд не помещаются: правый край страницы обрезал текст.
   Шаги идут в поток колонкой — та же группировка, что в mb-ветке. */
@media (max-width: 1919px) and (min-width: 1024px) {
  /* От прежней абсолютной раскладки в потоке остаётся только зазор и
     растяжение: `left/right` больше не нужны — ширину даёт контейнер,
     а координату 800 держит `margin-top` базового правила. */
  .au-home-zayavka__steps {
    flex-wrap: wrap;
    gap: 32px;
  }

  .au-home-zayavka__step {
    flex: 1 1 260px;
  }
}

@media (max-width: 1023px) {
  .au-home-zayavka {
    height: auto;
    padding-bottom: var(--au-tail-mb);
    margin: 0 0 var(--au-tail-mb);
  }

  /* Верхние 72 — здесь, а не на секции: тот же приём, что и 144 на десктопе,
     и по той же причине (`margin-top` схлопнулся бы сквозь контейнер). */
  .au-home-zayavka .au-container {
    padding-top: var(--au-tail-mb);
  }

  /* Заголовок и подзаголовок в потоке: абсолютную привязку даёт `.au-home-h2`,
     правило которого лежит ВЫШЕ этого блока при равной специфичности, поэтому
     блок её перекрывает — здесь достаточно не мешать. */
  .au-home-zayavka__title {
    width: 316px;
  }

  .au-home-zayavka__subtitle {
    width: 274px;
    margin: 24px 0 0; /* низ заголовка 116 + 24 = 140 */
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
  }

  /* Форма на мобильном не грид: поля лежат столбиком во всю ширину
     контейнера, поэтому `display: block` и зазор до подзаголовка. */
  .au-home-zayavka form {
    display: block;
    margin: 24px 0 0; /* низ подзаголовка 209 + 49 = 258 */
  }

  /* Поля в столбик во всю ширину контейнера (338 при 390), шаг 48. */
  .au-home-zayavka__field {
    width: auto;
  }

  .au-home-zayavka__field--phone,
  .au-home-zayavka__field--email {
    margin-top: 48px; /* низ предыдущего поля + 48 */
  }

  .au-home-zayavka__consent {
    margin-top: 45px; /* низ полей 531 + 45 = 576 */
    width: auto;
  }

  .au-home-zayavka__submit {
    /* Ширину задаём явно: в абсолютной раскладке её давали `left: 0; right: 0`,
       а в потоке кнопка сжимается по содержимому — замер 390: 26…219.52
       вместо 26…364. `justify-self: normal` не помогает (проверено: свойство
       вычисляется в normal, ширина остаётся 193.5). */
    width: 100%;
    margin-top: 38px; /* низ согласия 630 + 38 = 668 */
  }

  /* Шаги столбиком, шаг 36; прогрессию pc-маркеров mb-макет не содержит.
     `flex: 0 0 auto` и `align-items: flex-start` обязательны: в колоночном
     flex шаг по умолчанию растянулся бы на ширину контейнера (338), а его
     содержимое шире — 14 + 8 + 321 = 343, и `__step-text` с flex-shrink 1
     сжался бы до 316, переразбив строки и изменив высоту шага. */
  .au-home-zayavka__steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    margin: 64px 0 0; /* низ кнопки 736 + 64 = 800 */
  }

  .au-home-zayavka__step {
    flex: 0 0 auto;
  }

  /* Светлая форма. До этой правки высоту 1140 и нижний паддинг 56 ей давали
     те же строки: медиазапрос стоит ниже светлого блока при равной
     специфичности и перекрывал его `height: auto` и `clamp`. Теперь верхняя
     строка стала `height: auto`, и светлая форма потеряла бы фиксированную
     высоту (замер: 1755 вместо 1140), а базовый `padding-bottom: var(--au-tail)`
     перебил бы её `clamp` (замер: 72 вместо 56). Оба значения возвращаются
     явно — 6 страниц курсов и консультаций не должны сдвинуться ни на точку.
     clamp, а не число: на 390 это 8vw = 31.2 → 56, на 1023 это 81.84. */
  .au-home-zayavka--light {
    height: 1140px;
    padding-bottom: clamp(56px, 8vw, 96px);
  }

  .au-home-zayavka--light .au-container {
    padding-top: 0;
  }

  /* Кнопка светлой формы ширины не занимает: в макете она по содержимому —
     замер 390: 194 на курсах, 286 на консультациях. Тёмная кнопка растянута
     на контейнер (26…364), и её `width: 100%` иначе досталось бы и светлой. */
  .au-home-zayavka--light .au-home-zayavka__submit {
    width: auto;
  }

  .au-home-zayavka__marker--extra {
    display: none;
  }

  .au-home-zayavka__step--1 .au-home-zayavka__step-text {
    width: 311px;
  }

  .au-home-zayavka__step--2 .au-home-zayavka__step-text,
  .au-home-zayavka__step--3 .au-home-zayavka__step-text {
    width: 321px;
  }

  /* Экран успеха верхние 72 контейнера не нужны: он тут единственный ребёнок
     в потоке, и его верх задаёт `padding-top` самой секции (40 ниже). Без этой
     строки весь экран успеха уезжает на 72 вниз — замер 390: закрытие 128 →
     200, факты 705 → 777. */
  .au-home-zayavka.is-success .au-container,
  .au-home-zayavka--success .au-container {
    padding-top: 0;
  }

  /* `min-height: 840px` снят вместе с полом: он задавал высоту бокса, и
     хвост выходил 135 при `padding-bottom: var(--au-tail-mb)` — 72. Пол этой
     задаче не служил: переход форма → благодарность на 390 и без него меняет
     высоту на сотни точек (1117 → 777), и 63 точки пола ничего не сглаживают,
     а разный хвост в двух состояниях одной секции — ровно та нестыковка,
     которую сняли на десктопе (58 → 144). Замер 390 после снятия: секция
     840 → 777, хвост 135 → 72, содержимое не двинулось. */
  .au-home-zayavka.is-success,
  .au-home-zayavka--success {
    height: auto;
    padding: 40px 0 var(--au-tail-mb);
  }

  .au-home-zayavka__success {
    height: auto;
  }

  /* Селектор с двумя классами — не украшение: десктопное правило выше задаёт
     `padding-top: 144px` при специфичности (0,3,0), и один класс его не
     перебьёт. Замер с одним классом: 390 — весь экран успеха на 144 ниже
     (факты 705 → 849), секция 921 вместо 840. */
  .au-home-zayavka.is-success .au-home-zayavka__success,
  .au-home-zayavka--success .au-home-zayavka__success {
    position: relative;
    padding-top: 0; /* верх даёт `padding` секции (40), а не десктопные 144 */
  }

  .au-home-zayavka__success-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
  }

  .au-home-zayavka__success-title {
    position: static;
    margin-top: 60px;
    font-size: 36px;
    line-height: 38px;
    width: auto;
    max-width: 316px;
  }

  .au-home-zayavka__success-subtitle {
    position: static;
    margin-top: 24px;
    font-size: 16px;
    line-height: 23px;
    max-width: 283px;
  }

  .au-home-zayavka__success-btn {
    position: static;
    margin-top: 48px;
    width: fit-content;
  }

  .au-home-zayavka__facts {
    position: static;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .au-home-zayavka__fact-markers {
    margin-right: 0;
  }

  .au-home-zayavka__fact-marker--extra {
    display: none;
  }
}

/* ─── Дисклеймер ──────────────────────────────────────────────────────────
   PC 1024:1699 (1920×543, y13727 → стык 14270), MB 1024:1983 (390×628,
   y18092 → стык 18720). Источник каждого элемента — .design/spec/home.legal.md.
   Пространство .au-home-legal: .au-legal занят WYSIWYG-текстом юрстраниц
   (legal.css, чанк legal.text.tpl).
   Типографика заголовка и приглушение второй строки — сайтовые .au-h2 /
   .au-h2__accent (content.css), координаты секции — .au-home-h2.
   Типографика пунктов и ширина маркера 14 — как .au-feature*, зазор 8 — как
   .au-home-features__item; прозрачность везде 1, поэтому это секционные классы,
   а не реюз целиком. */
.au-home-legal {
  position: relative;
  /* В потоке на всех ширинах: высота-выражение от макета (334 + хвост) после
     сокращения отступов давало хвост 97 вместо 48 — пункты стали ниже. */
  /* padding, а не margin у заголовка: margin схлопывался с нижним отступом
     заявки, и зазор выходил 48 вместо 96. */
  padding: var(--au-tail) 0;
  background: var(--au-white);
}

.au-home-legal .au-container {
  position: relative;
}

/* В потоке left не действует: контейнер уже отступил на гаттер. */
.au-home-legal__title {
  position: static;
  margin: 0;
}

/* Переноса по ширине нет intentionally: бокс 619 меньше реальных 624.98px
   второй строки, разбиение задаёт <br> в чанке. */
.au-home-legal__list {
  margin: var(--au-head-gap) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 96px; /* зазор между содержимым ровный, шаг колонок — нет: это flex */
}

.au-home-legal__item {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* 14 ширина маркера + 8 = 22 от края маркера до текста */
}

.au-home-legal__marker {
  /* Колонку 14 задаёт .au-plus-icon; кегль держит строку 24 */
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: var(--au-black);
}

.au-home-legal__text {
  margin: 4px 0 0; /* маркер на 4px выше текста; baseline давал бы лишь ~2 */
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: var(--au-black);
}

/* Ниже 1920 три бокса (384+374+393) плюс два зазора 96 не встают в ряд.
   Ряд сохраняется, как в макете: зазор сжимается, боксы делят остаток
   поровну. Перенос отвергнут — давал колонку с провалами вместо ряда. */
@media (max-width: 1919px) and (min-width: 1024px) {
  .au-home-legal__list {
    flex-wrap: nowrap;
    gap: 32px;
  }
  .au-home-legal__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .au-home-legal__text--1,
  .au-home-legal__text--2,
  .au-home-legal__text--3 {
    width: auto;
  }
}

.au-home-legal__text b {
  font-weight: 700;
}

/* Фиксированные ширины текстовых боксов: только они дают ровный зазор 96. */
.au-home-legal__text--1 {
  width: 384px;
}

.au-home-legal__text--2 {
  width: 374px;
}

.au-home-legal__text--3 {
  width: 393px;
}

@media (max-width: 1023px) {
  .au-home-legal {
    padding: var(--au-tail-mb) 0;
  }

  .au-home-legal__list {
    flex-direction: column;
    gap: 36px; /* шаг 132 − высота пункта 96 */
  }

  /* Переносы подобраны вручную: при доступных 316 держать макетные ширины. */
  .au-home-legal__text--1 {
    width: 287px;
  }

  .au-home-legal__text--2 {
    width: 294px;
  }

  .au-home-legal__text--3 {
    width: 294px;
  }
}

/* Последняя секция главной держит свой хвост; вторая половина зазора до
   футера — здесь, чтобы не зависеть от того, какой блок конструктор
   поставил последним. */
.au-page--home {
  padding-bottom: var(--au-tail);
}

@media (max-width: 1023px) {
  .au-page--home {
    padding-bottom: var(--au-tail-mb);
  }
}