/* 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;
}

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

/* ─── Стрелки компонента 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;
}

.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/600/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: 144px;
  margin: 0; /* .au-h2 несёт margin-top 24 под крошки — здесь координата точная */
}

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

/* ─── Hero ────────────────────────────────────────────────────────────────
   PC 1024:1439 (1920×1080), MB 1024:1736 (390×844). Один фон-снимок
   (md5 идентичен на pc/mb), только кроп разный — object-position вместо
   двух файлов. */
.au-home-hero {
  position: relative;
  overflow: hidden;
  height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--au-gutter) 144px; /* низ контейнера 1080 − низ кнопки 936 (868+68) */
}

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

/* Фон — видео, а не снимок: кадр 1920×1080 совпадает с боксом на pc, поэтому
   кроп из макета не нужен, cover сам закрывает бокс. 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 {
  max-width: 701px;
}

.au-home-hero__title {
  margin: 0 0 36px; /* низ H1 660 (472+188) до верха абзаца 696 */
  font-size: 96px;
  font-weight: 600;
  line-height: 94px;
  color: var(--au-white);
}

.au-home-hero__text {
  margin: 0 0 64px; /* низ абзаца 804 (696+108) до верха кнопки 868 */
  font-size: 20px;
  font-weight: 400;
  line-height: 36px;
  color: var(--au-white);
}

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

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

@media (max-width: 1023px) {
  .au-home-hero {
    height: 844px;
    padding: 0 var(--au-gutter-mb) 142px; /* 844 − низ кнопки 702 (634+68) */
  }

  .au-home-hero__video {
    /* Кадр 16:9 в боксе 390×844 — портретном. cover масштабирует по ширине и
       срезает верх с низом; сдвиг вниз держит в кадре продукт, а не потолок. */
    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 (471+115) до верха кнопки 634 */
    font-size: 16px;
    font-weight: 500;
    line-height: 23px;
  }

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

  .au-home-hero__cta--mb {
    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: 144px; /* низ hero 1312 (232+1080) до верха карточек 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 кадр совпадает с макетом, ниже
   объект держит масштаб относительно карточки, пропорции файла целы.
   Клип по краям здесь намеренный: снимок работает фактурой, не товаром. */
.au-home-features__photo--metabolic {
  left: 20.71%; /* 116 / 560 */
  top: 34.78%; /* 241 / 693 */
  background-image: url(../img/home/product-pen.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/product-spray.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/product-ampoule.webp);
  background-position: 42.8% 40.9%;
  background-size: auto 270.09%;
}

.au-home-features__title {
  /* обёртка в Figma — auto-layout 59px высотой с центрированием (items-center
     justify-center), а не текст впритык к top: 96 — иначе строка съезжает
     вверх на ~10px (поймано скриншот-сверкой, см. лог) */
  position: absolute;
  left: 64px;
  top: 96px;
  height: 59px;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 32px;
  font-weight: 500;
}

.au-home-features__list {
  position: absolute;
  left: 64px;
  top: 181px;
  right: 64px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 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;
  }
}

.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: 72px; /* низ hero 844 до верха карточки 916 (rel y72 внутри секции, не 144 как pc) */
    padding-bottom: 139px; /* фрейм Figma 1024:1745 высотой 1567, а карточки заканчиваются
      на rel y1428 (946+482) — 139px хвостового отступа внутри фрейма перед следующей секцией.
      Без него следующая секция (слайдер) на mb стартует на 139px раньше макета. */
  }

  .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;
  }

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

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

/* ─── Слайдер «Форма выпуска» ─────────────────────────────────────────────
   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;
  height: 1080px;
  margin-top: 144px; /* низ карточек 2149 (1456+693) до верха слайдера 2293 */
}

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

.au-home-slider__slide {
  position: relative;
  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 шириной, точка отсчёта — центр). */
.au-home-slider__watermark {
  position: absolute;
  top: calc(50% - 242px);
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 400px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--au-white);
  pointer-events: none;
}

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

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

.au-home-slider__watermark--au {
  left: calc(50% - 686px);
  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: фото 1024:2038 (222,128 1476×824). Пропорции бокса и raw-картинки
   совпадают (1476/824 ≈ 1376/768), поэтому кроп не нужен — чистый cover. */
/* Бокс в макете 222…1698 из 1920 (ширина 1476) — доли, а не пиксели: ниже 1920
   фиксированная ширина уводила фото на 674px за правый край слайда. */
.au-home-slider__photo--pen {
  left: 11.56%; /* 222 / 1920 */
  right: 11.56%; /* 1920 − 1698 */
  top: 128px;
  height: 824px;
  background-image: url(../img/home/slider-pen.webp);
  background-position: 50% 50%;
  background-size: cover;
}

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

.au-home-slider__photo--bottle {
  left: 182px;
  top: 0;
  width: 1554px;
  height: 1080px;
  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: 949px;
  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;
}

.au-home-slider__category {
  position: absolute;
  left: 50%;
  top: 896px;
  transform: translateX(-50%);
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  text-transform: uppercase;
  opacity: 0.3;
  white-space: nowrap;
  color: var(--au-black);
}

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

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

.au-home-slider__text {
  position: absolute;
  left: 1249px;
  top: 153px;
  width: 575px;
  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: 940px;
  pointer-events: auto;
}

/* 96, а не 204: get_metadata отдаёт у этого фрейма x=204 (правая кромка),
   истина — inset-проценты из get_design_context (left 5% от 1920 = 96).
   Поймано сканом эталона: в макете кнопка занимает x96…203. */
.au-home-slider__nav .au-slider__btn--prev {
  left: 96px;
}

.au-home-slider__nav .au-slider__btn:not(.au-slider__btn--prev) {
  left: 1716px;
}

@media (max-width: 1023px) {
  .au-home-slider {
    height: 1045px;
    margin-top: 0; /* низ Features 2411 = верх слайдера 2411, вплотную */
  }

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

  .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: Section «Home screen 4», pc 1024:1489 (1920×1080, вплотную к слайдеру
   и к следующей секции — 1080 включает 144px хвостового отступа после карточек,
   тот же паттерн, что нашли в Features mb), mb 1024:1794 (390×763, из них 72px
   хвоста после точек). Фон секции — белый (единственная секция главной без
   #efefef/тёмного фона). */
.au-home-flagman {
  position: relative;
  height: 1080px;
  background: var(--au-white);
}

/* pc — одна строка (2 span), mb — 2 строки (2 p): разная структура, не просто
   другая позиция той же разметки, поэтому пара --pc/--mb, как у заголовка слайдера. */
.au-home-flagman__title--mb {
  display: none;
}

/* Ряд тянется по контентной ширине, а не по макетным 1824: карточки делят
   остаток пропорцией, поэтому ниже 1920 ничего не выпадает за гаттер. */
.au-home-flagman__cards {
  position: absolute;
  left: var(--au-gutter);
  right: var(--au-gutter);
  top: 356px;
  display: flex;
  gap: 24px;
  height: 580px;
}

/* Аккордеон по ширине. Пропорция взята из макета: раскрытая карточка к сжатой
   как 1098 к 291, то есть 3.773. Пропорция вместо фиксированных 291px — иначе
   к 1024 ряд почти делится поровну (замер дал 314/291/291) и раскрытая
   карточка перестаёт отличаться от соседей.
   Переход по flex-grow: ширина здесь производная от остатка ряда, поэтому
   анимируется доля, а не width. `overflow: hidden` карточки срезает кадр. */
.au-home-flagman__card {
  position: relative;
  flex: 1 1 0;
  height: 580px;
  border-radius: 20px;
  overflow: hidden;
  transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.au-home-flagman__card[open] {
  flex-grow: 3.773; /* 1098 / 291 */
}

/* Фото лежит в summary, поэтому слой растянут на карточку: он и кликабельная
   область, и подложка кадра. Маркер треугольника снят — в макете его нет. */
.au-home-flagman__summary {
  position: absolute;
  inset: 0;
  z-index: 0;
  list-style: none;
  cursor: pointer;
}

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

/* Закрытый <details> перестаёт рисовать содержимое (content-visibility: hidden
   на ::details-content). Здесь состояние решает только ширину: заголовок с
   кнопкой гасятся прозрачностью на pc и видны всегда на mb, поэтому рисовать
   содержимое надо в любом состоянии. Размеры у него и так есть — без этого
   правила браузер просто не выводит слой. */
.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;
}

.au-home-flagman__card--bottle {
  background: #cac8c8;
}

.au-home-flagman__card--pump {
  background: var(--au-white);
}

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

.au-home-flagman__photo {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Кроп в обоих состояниях описан макетом так, что размер кадра не меняется, а
   меняется только его сдвиг: у бутылки 256.01% от 607 и 534.02% от 291 дают
   одни и те же 1554px, у градиента 1148px, у спреев 1460px. Пересчёт показал,
   что центр кадра стоит на постоянном расстоянии от ПРАВОГО края карточки
   (бутылка 257, градиент 549, спреи 368) — фото не ездит при сжатии, его просто
   срезает край карточки.
   Поэтому бокс задан кадром: фиксированная ширина в пикселях, привязка правым
   краем со сдвигом `правое расстояние − половина кадра`, позиция по центру.
   Проценты не годятся — они считаются от разницы размеров бокса и фона, и при
   смене ширины карточки дают разные значения (−14% против 59%). */
.au-home-flagman__photo--gradient {
  top: 0;
  bottom: 0;
  right: -25px; /* 549 − 1148/2 */
  width: 1148px;
  background-image: url(../img/home/flagman-gradient.webp);
  background-position: 50% 50%;
  background-size: 100% auto;
}

.au-home-flagman__photo--bottle {
  top: 0;
  right: -520px; /* 257 − 1554/2 */
  width: 1554px;
  height: 580px;
  /* тот же raw-файл, что и ампула в слайдере (md5 идентичен) — реюз ассета */
  background-image: url(../img/home/product-ampoule.webp);
  background-position: 50% 52.4%;
  background-size: 100% auto;
}

.au-home-flagman__photo--pump {
  top: 0;
  bottom: 0;
  right: -362px; /* 368 − 1460/2 */
  width: 1460px;
  background-image: url(../img/home/flagman-pump.webp);
  background-position: 50% 27.2%;
  background-size: 100% auto;
}

/* Чехол живёт по тому же правилу, что три кадра выше: макет задаёт ему кроп
   (`scaleMode: CROP`), а не `cover`. Кадр 927px в обоих состояниях — 676/0.7292
   у раскрытой и 291/0.3139 у сжатой дают одно число, — и центр кадра стоит в
   212.5px от правого края карточки. Отсюда привязка правым краем: у раскрытой
   бокс встаёт на макетные left 422 из 1098, у сжатой уезжает на −385, и одно
   правило обслуживает оба состояния.
   Прежние `cover` + доля 38.4% давали другой кадр: `cover` вписывает файл
   целиком, а в файле лежали прозрачные поля (см. ниже), поэтому чехол выходил
   вдвое мельче макетного и плавал в пустоте. */
.au-home-flagman__photo--case {
  top: 0;
  bottom: 0;
  right: -251px; /* 212.5 − 927/2 */
  width: 927px;
  background-image: url(../img/home/flagman-case.webp);
  background-position: 50% 50%;
  background-size: 100% auto;
}

/* Заголовок и кнопка есть только у раскрытой карточки (вариант Hover); в сжатой
   их нет вовсе, остаётся одно фото. Гасим прозрачностью, а не display: тогда
   текст успевает проявиться вместе с шириной, а не выпрыгивает в конце.
   nowrap не даёт заголовку переломиться в момент сжатия. */
.au-home-flagman__card-title,
.au-home-flagman__cta {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.au-home-flagman__card[open] .au-home-flagman__card-title,
.au-home-flagman__card[open] .au-home-flagman__cta {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.15s; /* ширина уходит вперёд, текст догоняет */
}

.au-home-flagman__card-title {
  position: absolute;
  left: 64px;
  top: 232px;
  margin: 0;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--au-white);
  white-space: nowrap;
}

/* Заголовок «AUREN MOTS» на светлом фото — чёрный и без uppercase-регистра
   макета (в Figma он набран заглавными в самом тексте). */
.au-home-flagman__card-title--case {
  color: var(--au-black);
}

/* Оформление кнопки — сайтовые .au-btn + .au-btn--home (padding 16/34,
   radius 260, чёрный фон, 16/36 bold): совпадает с макетом 1:1, здесь только
   позиция. */
.au-home-flagman__cta {
  position: absolute;
  left: 64px;
  top: 448px;
}

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

/* Блик Ellipse35 — только mb (на pc его в макете нет). */
.au-home-flagman__ellipse {
  display: none;
}

/* Точки-пагинация — только mb (в макете на pc их нет вовсе, реюз .au-dots из Hero). */
.au-home-flagman__dots {
  display: none;
}

/* Ellipse34 (декор в карточке case на pc) не переносим: лежит вне границ
   карточки (x −427 при ширине карточки 291) и обрезается её же overflow —
   нулевой визуальный эффект при любой реализации, см. лог. */

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

  .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 {
    left: 0;
    top: 232px;
    height: 413px;
    padding: 0 26px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

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

  /* Аккордеона на mb нет: в макете все три карточки одинаковы и раскрыты, ряд
     листается тачем. Ширина фиксированная, поэтому flex-grow не участвует. */
  .au-home-flagman__card {
    flex: 0 0 272px;
    height: 413px;
    transition: none;
  }

  /* summary несёт фото, скрывать его нельзя — снимаем только реакцию на тач,
     иначе скролл ряда цеплялся бы за карточку и открывал её. */
  .au-home-flagman__summary {
    pointer-events: none;
    cursor: default;
  }

  /* Заголовок и кнопка на mb показаны у всех трёх карточек, а details закрыт у
     двух из них — держим содержимое видимым независимо от состояния. */
  .au-home-flagman__card-title,
  .au-home-flagman__cta {
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  /* На mb карточка не сжимается, поэтому пиксельные боксы кадра из pc здесь не
     нужны: ширина одна (272), и кроп задаётся процентами прямо от карточки. */
  .au-home-flagman__photo--bottle {
    right: auto;
    left: 0;
    top: 38px;
    width: 272px;
    height: 266px;
    background-position: 49.4% 46.5%;
    background-size: 299.22%;
  }

  /* На mb чехол — единственный кадр, который карточку НЕ закрывает: макет
     рисует его лентой в 203px по центру карточки высотой 413, а сверху и снизу
     остаётся фон. Кадр — ровно ширина карточки (272/1.0008), поэтому 100% по
     ширине; сдвиг 55.9% ставит ленту на макетные 117px от верха
     (117.4 из 413 − 203 свободных). */
  .au-home-flagman__photo--case {
    left: 0;
    right: 0;
    width: auto;
    background-position: 50% 55.9%;
    background-size: 100%;
  }

  /* Фон виден только у этой карточки — только он и переопределён; у двух
     соседних макетный mb-фон #9e9e9e закрыт фото целиком. */
  .au-home-flagman__card--case {
    background: #e0e8ee;
  }

  /* `width: auto` вместе с `right: auto` оставляли бокс без обоих краёв, и он
     сжимался в ноль — градиент с фото спреев пропадали. Оба края заданы. */
  .au-home-flagman__photo--gradient {
    left: 0;
    right: 0;
    width: auto;
    background-position: 38.6% 30.9%;
    background-size: 422.06%;
  }

  .au-home-flagman__photo--pump {
    left: 0;
    right: 0;
    width: auto;
    background-position: 44.3% 39.8%;
    background-size: 447.79%;
  }

  .au-home-flagman__card-title {
    left: 50%;
    top: 52px;
    transform: translateX(-50%);
    font-size: 24px;
  }

  .au-home-flagman__cta {
    left: 36px;
    top: 309px;
  }

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

  .au-home-flagman__cta--mb {
    display: inline-flex;
  }

  /* На mb заголовок карточки «case» чёрный и не центрирован, в отличие от двух
     соседних — так в макете (1024:2008). На pc у него та же чернота, но левый
     край общий с остальными. */
  .au-home-flagman__card-title--case {
    left: calc(50% - 80px);
    transform: none;
  }

  .au-home-flagman__ellipse {
    display: block;
    position: absolute;
    left: -25px;
    top: 86px;
    width: 332px;
    height: 76px;
    pointer-events: none;
  }

  .au-home-flagman__dots {
    display: flex;
    position: absolute;
    left: 50%;
    top: 681px;
    transform: translateX(-50%);
  }
}

/* ─── Каталог ─────────────────────────────────────────────────────────────
   PC 1024:1494 (1920×2092, y4453 вплотную к флагманам; следующая секция ровно
   на 4453+2092=6545), MB 1024:1800 (390×3634, y4219 → 7853).
   Абсолютные дети лежат внутри .au-container и получают гаттер явно: у
   абсолютного позиционирования containing block — padding-box, поэтому
   left/right: 0 отсчитывался бы от края макета, а не от контентной колонки
   (та же ловушка, что ловили на стрелках наград, см. about.css). */
.au-home-catalog {
  position: relative;
  height: 2092px;
  background: var(--au-white);
}

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

.au-home-catalog__cta {
  position: absolute;
  right: var(--au-gutter);
  top: 157px;
}

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

.au-home-catalog__filter {
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  color: var(--au-black);
  opacity: 0.3;
  white-space: nowrap;
}

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

/* Пятого пункта «Мужское здоровье» на 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). */
.au-home-catalog__grid {
  position: absolute;
  left: var(--au-gutter);
  right: var(--au-gutter);
  top: 358px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 72px;
}

/* Внутренний ритм у всех шести карточек одинаковый (проверено по обоим рядам):
   фото 0, название +594, фасовка +648, цена +715 от верха карточки. */
.au-home-catalog__card {
  position: relative;
  height: 764px;
}

.au-home-catalog__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 574px;
  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: absolute;
  left: 0;
  top: 594px;
  margin: 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: absolute;
  left: 0;
  top: 648px;
  height: 59px;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  opacity: 0.3;
  color: var(--au-black);
}

.au-home-catalog__price {
  position: absolute;
  left: 0;
  top: 715px;
  display: flex;
  gap: 40px; /* старая цена 1264…1367, новая с 1407 */
  margin: 0;
  padding: 10px 0;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: var(--au-black);
}

.au-home-catalog__price-old {
  opacity: 0.3;
  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;
}

/* В макете строка набрана с заглавной, а отрисована строчными (textCase LOWER
   у ноды 1024:1553) — воспроизводим трансформацию, а не переписываем текст. */
.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;
  text-transform: lowercase;
  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: 3634px;
  }

  /* Кнопка уезжает под сетку и центрируется (x86 при ширине 218 и вьюпорте 390). */
  .au-home-catalog__cta {
    right: auto;
    left: 50%;
    top: 3494px;
    transform: translateX(-50%);
  }

  /* Ряд шире вьюпорта (26…621 при 390) — скроллится по горизонтали, как трек
     флагманов; правый паддинг возвращает гаттер в конце прокрутки. */
  .au-home-catalog__filters {
    left: var(--au-gutter-mb);
    right: 0;
    top: 188px;
    gap: 26px;
    padding-right: var(--au-gutter-mb);
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  .au-home-catalog__grid {
    left: var(--au-gutter-mb);
    right: var(--au-gutter-mb);
    top: 260px;
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .au-home-catalog__card {
    height: 491px;
  }

  .au-home-catalog__photo {
    height: 337px;
  }

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

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

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

  .au-home-catalog__price {
    top: 462px;
  }

  /* На 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); /* весь текст секции белый */
}

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

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

/* Заголовки обоих подблоков: одна строка, SemiBold 48/55 pc → 32/normal mb.
   Регистр различается при одинаковом тексте (расхождение №11): pc capitalize,
   mb lowercase + первый спан uppercase — текст не переписан. */
.au-home-courses__title {
  position: absolute;
  left: var(--au-gutter);
  width: 661px;
  margin: 0;
  font-size: 48px;
  font-weight: 600;
  line-height: 55px;
  text-transform: capitalize;
}

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

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

.au-home-courses__title-caps {
  text-transform: uppercase; /* на pc no-op, на mb возвращает первую букву */
}

/* Буллеты Курсов: pc — два столбца (второй + на x483), mb — стопкой
   (расхождение №1). Отступ + → текст везде 22: маркер 14 + зазор 8. */
.au-home-courses__notes {
  position: absolute;
  left: var(--au-gutter);
  top: 252px;
  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 {
  flex: none;
  width: 14px; /* бокс + 14×24 */
  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: 274px;
  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 обе стоят на одном y377. */
.au-home-courses__cta {
  position: absolute;
  left: var(--au-gutter);
  top: 377px;
}

/* Подписи к пилюлям: 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 она
   ниже макетной ширины наезжала на пилюли.
   Курсы: метка 1208…1432, теги от 1456 → 1824 − 1432 = 392 + зазор 24.
   Консультации: метка 1085…1243, теги от 1267 → 1824 − 1243 = 581 + 24. */
.au-home-courses__block--kursy .au-home-courses__tags-label {
  right: calc(var(--au-gutter) + 392px);
  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).
   Ниже 1920 колонки сходятся: кнопка 306 шириной кончается на 346, а метка
   начиналась с 245 — они накладывались. Метка уходит выше своего ряда тегов
   и не может начаться левее кнопки. */
@media (max-width: 1919px) and (min-width: 1024px) {
  .au-home-courses__block--consult .au-home-courses__tags-label {
    top: 378px; /* высота 51 + просвет 12 → низ 429 при ряде тегов с 441 */
    left: calc(var(--au-gutter) + 306px + 24px); /* правее кнопки с зазором 24 */
    right: auto;
    max-width: 158px;
  }
}

/* Пилюля-тег — новый примитив секции (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;
}

/* Строки в макете строчные, заглавную первую букву даёт textCase ноды. */
.au-home-courses__tag::first-letter {
  text-transform: uppercase;
}

/* Оба ряда тегов упираются в правый край контейнера (1824 при гаттере 96),
   поэтому привязка к краю, а не left от 1920: ниже макетной ширины
   фиксированный отсчёт уносил пилюли на 800 за клип блока.
   Курсы — один ряд по макету, консультации — два (бокс 557). */
.au-home-courses__block--kursy .au-home-courses__tags {
  right: var(--au-gutter);
  top: 488px;
  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);
  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__block {
    height: 843px;
  }

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

  .au-home-courses__notes {
    left: 36px;
    top: 188px;
    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: 188px;
    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 */
  }

  .au-home-courses__block--kursy .au-home-courses__cta {
    left: 36px;
    top: 451px;
  }

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

  .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 — wrap 2 + 1: ряд 1 (129 + 10 + 141 = 280), «Енергия» переносится.
     Ширина 318 (36→354, симметричный гаттер): тройке (368) не влезть никак. */
  .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;
  height: 1058px;
  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: 286px;
  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. */
.au-home-about__photo--1 {
  background-image: url(../img/home/about-card-1.webp);
  background-position: 85.61% 68.49%;
  background-size: cover;
}

.au-home-about__photo--2 {
  background-image: url(../img/home/about-card-2.webp);
  background-position: 62.46% 100%;
  background-size: cover;
}

.au-home-about__photo--4 {
  background-image: url(../img/home/about-card-4.webp);
  background-position: 18.86% 99.93%;
  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;
  text-transform: uppercase;
  color: var(--au-white);
}

/* Описание прижато к низу (низ текста 586 у всех трёх = 42 от дна 628),
   число строк на раскладку не влияет; ширина задаёт переносы из макета. */
.au-home-about__desc {
  position: absolute;
  left: 36px;
  bottom: 42px;
  margin: 0;
  /* 32/36 на 1920. Колонка сужается с 414 до 218, и на макетном кегле подпись
     разрасталась с 4 строк до 7-10, а в брендовой карточке наезжала на кнопку.
     Шкала та же, что у остальной страницы. */
  font-size: calc(20px + 12px * var(--au-k));
  font-weight: 600;
  line-height: calc(24px + 12px * var(--au-k));
  color: var(--au-white);
}

/* Ширины в макете считаны от карточки 414: 316, 335 и 296. Ниже 1920 карточка
   сужается до 218, и фиксированная ширина выносила подпись за правый край —
   поэтому задан отступ справа той же доли, а ширину даёт сама карточка. */
.au-home-about__card--1 .au-home-about__desc {
  right: 15.46%; /* 414 − (36 + 316) = 64 */
}

.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-size: calc(20px + 12px * var(--au-k)); /* та же шкала, что у .au-home-about__desc */
  font-weight: 600;
  line-height: calc(24px + 12px * 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, без трекинга). Бокс 517×155 вылезает за карточку и режется
   overflow — так в макете; единственный элемент блока с прозрачностью. */
.au-home-about__word {
  position: absolute;
  left: 88px;
  top: 439px;
  margin: 0;
  font-size: 128px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 19.2px;
  color: var(--au-white);
  opacity: 0.3;
  white-space: nowrap;
}

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

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

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

  .au-home-about__photo--1 {
    background-position: 66.11% 42.08%;
    background-size: 171.61%;
  }

  .au-home-about__photo--2 {
    background-position: 62.46% 43.37%;
    background-size: 178.35%;
  }

  .au-home-about__photo--4 {
    background-position: 19.10% 30.09%;
    background-size: 172.76%;
  }

  /* На 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;
  }

  /* Тот же 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, активна средняя). */
.au-home-experts {
  position: relative;
  height: 1168px;
  background: var(--au-white);
}

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

/* pc — одна нода шириной 503, перенос по пробелу даёт 2 строки × 70 = 140;
   mb — два отдельных <p>. Типографику и приглушение даёт сайтовый
   .au-h2 / .au-h2__accent, координаты — .au-home-h2. */
.au-home-experts__title--pc {
  width: 503px;
}

/* Приглушённое слово написано AUREN на pc и Auren на mb при одинаковых
   буквах — единое написание в разметке, регистр даёт text-transform. */
.au-home-experts__title--pc .au-h2__accent {
  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: 216px;
}

/* Трек — реюз .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: 356px;
  display: flex;
  gap: 24px;
}

/* Колонки 852: в макете 851/853 (дрейф 1px, обоснование — home.experts.md);
   правый край 96 + 852 + 24 + 852 = 1824 = край контейнера. */
.au-home-experts__card {
  position: relative;
  flex: none;
  width: 852px;
  height: 668px;
  overflow: hidden;
  border-radius: 20px;
  background: #efefef;
}

.au-home-experts__photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

/* Затемнение — сплошная заливка поверх фото (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 {
  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%;
}

/* Текст прижат к низу (хвост 93, зазор 24): низ должности 668 − 93 = 575,
   низ имени 539 − 24 = 515, верх имени 515 − 90 = 425 — все три числа спеки. */
.au-home-experts__text {
  position: absolute;
  left: 72px;
  right: 72px;
  bottom: 93px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.au-home-experts__name {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 45px;
  color: var(--au-white);
}

.au-home-experts__role {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 36px;
  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 {
    height: 804px;
  }

  .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: 232px;
    padding: 0 var(--au-gutter-mb);
  }

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

  .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%;
  }

  /* Затемнение второй карточки на 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;
  }

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

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

  /* Точки Slider pc 74×10, активна средняя; left:50% = 158 при 390. */
  .au-home-experts__dots {
    display: flex;
    position: absolute;
    left: 50%;
    top: 722px;
    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 отсчитался бы от края макета (та же ловушка,
   что у каталога и стрелок наград). */
.au-home-reviews {
  position: relative;
  height: 1164px;
  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: 948px;
  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: 216px;
}

/* Скролл, отступы трека и скрытие скроллбара — реюз .au-slider__track
   (about.css). right: 0 осознанно от padding-box: трек уходит под обрез
   кадра, четвёртая карточка видна частично (1964 при 1920). */
.au-home-reviews__track {
  position: absolute;
  left: var(--au-gutter);
  right: 0;
  top: 356px;
  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);
}

.au-home-reviews__label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px; /* в макете normal (17) */
  letter-spacing: 2.1px;
  color: var(--au-black);
}

.au-home-reviews__product {
  margin: 8px 0 0; /* низ «Отзыв об:» 65 → верх продукта 73 */
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 2.4px;
  color: var(--au-black);
  opacity: 0.3;
}

/* Весь отзыв — одна нода, пустая строка между «абзацами» — настоящая строка
   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);
  opacity: 0.3;
  white-space: nowrap;
}

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

/* Нода «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;
}

/* Дрейф макета 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 {
  filter: none;
}

/* ─── Длинная карточка: затухание и скроллбар только на 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;
}

.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: 948px;
}

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

  .au-home-reviews .au-container {
    height: auto;
    padding-bottom: 72px;
  }

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

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

  .au-home-reviews__caption {
    left: var(--au-gutter-mb);
    top: 184px;
    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;
  }

  /* Трекинг строки продукта только на pc (доказано ширинами строк в спеке). */
  .au-home-reviews__product {
    letter-spacing: normal;
  }

  .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. */
.au-home-videos {
  position: relative;
  height: 1080px; /* низ секции 12193 при верхе 11113 */
  padding-top: 356px; /* верх карточек 356; заголовок/стрелки — абсолютные */
  background: var(--au-white);
  box-sizing: border-box;
}

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

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

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

/* Трек-карусель: 4×448 + 3×24 = 1864, правый край 1960 уходит под обрез —
   листается стрелками (тот же случай, что ряд категорий каталога). */
.au-home-videos__track--pc {
  display: flex;
  gap: 24px;
  padding-left: 96px;
}

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

/* pc-карточка: превью 448×463 (шаг 472), подпись 44 под превью, инсет 47/354,
   метка 26 под подписью с letter-spacing 2.1px (ширина бокса 124 = 103 + 10×2.1). */
.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;
  letter-spacing: 2.1px;
}

/* Подпись карточки 4 набрана с lowercase и uppercase-спаном первой буквы —
   в макете «Результате … ayren metabolic» (тот же приём, что промо-текст
   каталога: трансформация, а не правка строк; опечатки «примеа»/«AYREN» —
   дословно из макета, вопрос заказчику №4 в спеке). */
.au-home-videos__caption-case {
  text-transform: lowercase;
}

.au-home-videos__caption-case span {
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .au-home-videos {
    height: 1716px; /* низ 16323 при верхе 14607 */
    padding-top: 233px; /* верх карточек 233 */
  }

  .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;
    letter-spacing: normal; /* бокс метки 103, как на странице «Видео» */
  }
}

/* ─── CTA Telegram ────────────────────────────────────────────────────
   PC 1024:1671 (1920×454, y12193 → низ 12647), MB 1024:1958 (390×547,
   y16323 → низ 16870). Источник каждого элемента — .design/spec/home.telegram.md.
   Три элемента без картинок и иконок: заголовок, кнопка, ссылка t.me/AUREN.
   Хвост равен верхнему отступу (106 pc / 74 mb) — высота собирается паддингом
   секции, фиксированной высоты и абсолютных координат нет. */
.au-home-telegram {
  /* Гаттер mb по макету — 36 вместо сайтовых 26 (противоречие №1 спеки):
     левый край всех трёх элементов 36. Переключается одной строкой. */
  --au-gutter-mb: 36px;
  padding: 106px 0; /* верх 106 = хвост 454 − низ кнопки 348 */
  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 64px; /* низ заголовка 216 (106+110) до верха кнопки 280 */
  max-width: 661px; /* ширина ноды: 2 строки 2×55 = 110 */
  font-size: 48px;
  font-weight: 600;
  line-height: 55px;
  word-break: break-word; /* перенос по ширине ноды, жёстких разрывов нет */
}

.au-home-telegram__link {
  font-size: 72px;
  font-weight: 600;
  line-height: 70px;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

@media (max-width: 1023px) {
  .au-home-telegram {
    padding: 74px 0; /* верх 74 = хвост 547 − низ t.me 473 */
  }

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

  .au-home-telegram__title {
    margin: 0 0 48px; /* низ заголовка 191 (74+117) до верха кнопки 239 */
    max-width: 288px; /* ширина ноды: 3 строки 3×39 = 117 */
    font-size: 32px;
    line-height: 39px; /* 117 / 3 — normal по спеке */
    /* Отрисовка mb строчными при нормальном тексте в CMS (прецедент —
       промо-текст каталога): первую букву возвращает ::first-letter. Раньше
       её возвращал <span> внутри строки — он рвал текст заголовка на три
       части, и редактор правил бы разметку вместо предложения. */
    text-transform: lowercase;
  }

  .au-home-telegram__title::first-letter {
    text-transform: uppercase;
  }

  .au-home-telegram__link {
    align-self: center; /* (390 − 288) / 2 = 51 */
    margin-top: 96px; /* низ кнопки 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). */
.au-home-zayavka {
  position: relative;
  height: 1080px; /* низ шагов 1008 + хвост 72 */
  background: #686876;
}

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

.au-home-zayavka__title {
  width: 597px;
  color: var(--au-white); /* единственная секция с белым заголовком */
}

.au-home-zayavka__subtitle {
  position: absolute;
  left: var(--au-gutter);
  top: 250px; /* низ заголовка 214 + зазор 36 */
  width: 655px;
  margin: 0;
  font-size: 20px;
  line-height: 36px;
  color: var(--au-white);
}

.au-home-zayavka__subtitle-dim {
  color: rgba(255, 255, 255, 0.5);
}

.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 {
  color: #ffb4a2;
}

/* Ошибка поля ложится под его линию (низ поля 441), не сдвигая соседей. */
.au-home-zayavka__error {
  position: absolute;
  left: 0;
  top: 62px;
  font-size: 14px;
  line-height: 20px;
  color: #ffb4a2;
}

/* Поля — первая форма в проекте, готовых инпутов нет. Линия-инпут =
   плейсхолдер + border-bottom 1px; линии Figma — не ассеты (прецедент линий
   хедера, layout.header.md). Высота поля 59 = строка 36 + подкладка 22 +
   border 1: низ border ложится ровно на линию макета (top + 59). */
.au-home-zayavka__field {
  position: absolute;
  top: 382px; /* низ подзаголовка 286 + зазор 96; линия 382 + 59 = 441 */
}

.au-home-zayavka__field--name {
  left: var(--au-gutter);
  width: 469px;
}

.au-home-zayavka__field--phone {
  left: 637px;
  width: 335px;
}

.au-home-zayavka__field--email {
  left: 1044px;
  width: 335px;
}

.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.6;
}

/* Заполненное поле нарисовано в макете так же, как фокус: текст и линия без
   прозрачности (у 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__submit {
  position: absolute;
  left: var(--au-gutter);
  top: 741px; /* линия 441 + зазор 300 */
}

/* Согласие — статичный текст с иконкой: чекбокса и ссылок на оферту/политику
   в макете нет (открытый вопрос 5 спеки). Текст дословно, «пероснальных» —
   опечатка макета. Иконка белая на 30% изнутри файла — оставляем как отдал
   экспорт. Строка flex: иконка y758 при тексте y757 → margin-top 1px. */
.au-home-zayavka__consent {
  position: absolute;
  left: 340px;
  top: 757px;
  display: flex;
  gap: 11px; /* зазор иконка↔текст одинаковый на pc и mb */
  width: 396px; /* 24 иконка + 11 + 361 текст */
}

.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 {
  margin: 0;
  padding: 0;
  list-style: none;
}

.au-home-zayavka__step {
  position: absolute;
  top: 958px; /* кнопка 741 + 68 + зазор 149 */
  display: flex;
}

/* Позиции в макете 96 / 501 / 938 из 1920 — доли, а не пиксели: третий шаг
   с текстом 423 иначе уходил на 403 за правый край при ширине 1024. */
.au-home-zayavka__step--1 {
  left: 5%; /* 96 / 1920 */
}

.au-home-zayavka__step--2 {
  left: 26.09%; /* 501 / 1920 */
}

.au-home-zayavka__step--3 {
  left: 48.85%; /* 938 / 1920 */
}

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

.au-home-zayavka__marker {
  width: 14px;
  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;
}

/* Ниже 1920 три шага в ряд не помещаются: правый край страницы обрезал текст.
   Шаги идут в поток колонкой — та же группировка, что в mb-ветке. */
@media (max-width: 1919px) and (min-width: 1024px) {
  .au-home-zayavka__steps {
    position: absolute;
    left: var(--au-gutter);
    right: var(--au-gutter);
    top: 958px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
  }

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

@media (max-width: 1023px) {
  .au-home-zayavka {
    height: 1222px; /* низ шага 03 1150 + хвост 72 */
  }

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

  .au-home-zayavka__subtitle {
    left: var(--au-gutter-mb);
    top: 140px; /* низ заголовка 116 + зазор 24 */
    width: 274px;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
  }

  /* Поля в столбик во всю ширину контейнера, шаг 107. */
  .au-home-zayavka__field {
    left: var(--au-gutter-mb);
    right: var(--au-gutter-mb);
    width: auto;
  }

  .au-home-zayavka__field--name {
    top: 258px; /* низ подзаголовка 186 + зазор 72; линия 258 + 59 = 317 */
  }

  .au-home-zayavka__field--phone {
    top: 365px; /* линия 424 */
  }

  .au-home-zayavka__field--email {
    top: 472px; /* линия 531 */
  }

  /* Кнопка во всю ширину контейнера (338 при 390). */
  .au-home-zayavka__submit {
    left: var(--au-gutter-mb);
    right: var(--au-gutter-mb);
    top: 675px; /* линия 531 + зазор 144 */
  }

  /* Согласие под кнопкой: кнопка 675 + 68 + зазор 36 = 779. */
  .au-home-zayavka__consent {
    left: 51px;
    top: 779px;
    width: 289px; /* 24 + 11 + 254 */
  }

  .au-home-zayavka__consent-text {
    width: 254px;
  }

  /* Шаги столбиком, шаг 86; прогрессию pc-маркеров mb-макет не содержит. */
  .au-home-zayavka__step {
    left: var(--au-gutter-mb);
  }

  .au-home-zayavka__step--1 {
    top: 905px; /* низ согласия 833 + зазор 72 */
  }

  .au-home-zayavka__step--2 {
    top: 991px;
  }

  .au-home-zayavka__step--3 {
    top: 1077px;
  }

  .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;
  }
}

/* ─── Дисклеймер ──────────────────────────────────────────────────────────
   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;
  height: 543px; /* низ пунктов 430 + хвост 113 */
  background: var(--au-white);
}

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

/* left:130 — макетные, не гаттер 96: здесь и заголовок, и первый маркер стоят
   на 130 (расхождение вынесено заказчику, см. спеку); top:145 — тоже макетный. */
.au-home-legal__title {
  left: 130px; /* макетные, не гаттер 96 */
  top: 145px;
}

/* Переноса по ширине нет intentionally: бокс 619 меньше реальных 624.98px
   второй строки, разбиение задаёт <br> в чанке. */
.au-home-legal__list {
  position: absolute;
  left: 130px; /* первый маркер x130, как заголовок */
  top: 357px; /* маркеры top:357, тексты на 4px ниже — см. __text */
  margin: 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 {
  width: 14px;
  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 {
    height: auto;
    padding-bottom: 113px;
  }

  .au-home-legal .au-container {
    height: auto;
  }

  /* В потоке left не действует: макетные 130 — от края страницы, а контейнер
     уже отступил на гаттер, поэтому добавляется только разница. */
  .au-home-legal__title {
    position: static;
    margin: 145px 0 0;
    padding-left: calc(130px - var(--au-gutter));
  }

  .au-home-legal__list {
    position: static;
    margin-top: 212px; /* 357 − 145: тот же зазор от заголовка, что в макете */
    padding-left: calc(130px - var(--au-gutter));
    padding-right: calc(130px - var(--au-gutter));
    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 {
    height: 628px; /* низ пунктов 556 + хвост 72 */
  }

  .au-home-legal__title {
    left: var(--au-gutter-mb);
    top: 72px; /* на mb гаттер и 72, в отличие от pc 130/145 */
  }

  .au-home-legal__list {
    left: var(--au-gutter-mb);
    top: 196px;
    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;
  }
}