/* ============================================================
   ГЗТ.РФ — лендинг «Андропауза: диагностика и лечение в Москве»
   Уникальные секции лендинга №3. Общие модули (шапка, врачи,
   вопросы, форма, подвал) стилизует css/common.css.
   Цвета и переменные — из css/common.css (var(--dark), var(--red) и т.д.).
   ============================================================ */

/* ---------- Шапка: в макете прозрачная, лежит поверх фото первого экрана —
   переопределяем общий .lnd-header только для этой страницы (по образцу
   .header в landing-1.css) ---------- */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: 15px;
  padding-bottom: 0;
}

/* Верх фото у нас светлый (не тёмный, как на l1) — поэтому просто скопировать
   белый оттуда было бы ошибкой. Цвет ссылок сверен по самому инстансу шапки
   в макете (узел 1408:3703): там ссылки нав-меню белые, несмотря на светлый
   верх фото — так и оставляем, это не наша самодеятельность, а как в макете */
.header .lnd-header__nav a {
  color: #fff;
}

.header .lnd-burger span {
  background: #fff;
}

/* Логотип в шапке — белый (приём один в один как .hero .lnd-header__logo img
   в landing-2.css): исходный ассет тёмный, поверх фото первого экрана нужен белый */
.header .lnd-header__logo img {
  filter: brightness(0) invert(1);
}

/* Кнопка "Записаться" в шапке в макете — белая таблетка с тёмным кружком-
   стрелкой (см. узел 1408:3703, вариант I1408:3703;1403:23303/23305/23306),
   не сплошная заливка .lnd-btn--red — стиль один в один как .header__btn */
.header__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 26px 6px 6px;
  border-radius: 34px;
  background: #fff;
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.header__btn:hover {
  opacity: 0.85;
}

.header__btn-circle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--dark);
}

.header__btn-circle img {
  width: 14px;
  height: 14px;
}

/* ---------- Ссылка-стрелка (повторяется в нескольких блоках) ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--dark);
  transition: opacity 0.2s;
}

/* как .link-arrow на первом лендинге, плюс шаг стрелки вперёд */
.link-arrow:hover {
  opacity: 0.7;
}

.link-arrow__icon {
  transition: transform 0.2s;
}

.link-arrow:hover .link-arrow__icon {
  transform: translateX(3px);
}

/* шеврон в макете нарисован сразу вправо (10×16, обводка 2px, скруглённые
   концы) — раньше сюда клали «стрелку вниз» и разворачивали её на 90°,
   отчего толщина и скругления не совпадали */
.link-arrow__icon {
  width: 10px;
  height: 16px;
  flex: none;
}

/* ---------- Плашка "Важно:" с иконкой (переиспользуется дважды) ---------- */
.note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 450px;
  padding: 20px;
  border-radius: 18px;
  background: var(--grey-bg-2);
  border: 1px solid rgba(92, 131, 195, 0.13);
}

.note__icon {
  width: 64px;
  height: auto;
  flex: none;
  margin-top: -6px;
}

.note__label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.note__body p {
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-47);
}

/* Раньше — отдельный блок на всю ширину под сеткой карточек. По макету лежит
   внутри левой карточки (.exams__group--light), у её нижнего края:
   margin-top: auto прижимает плашку вниз (родитель — flex-колонка, см. выше),
   а боковые/нижний отступы повторяют паддинг списка (ul) в этой же карточке */
.note--light {
  max-width: none;
  margin: auto 28px 24px;
  background: #fff;
}

/* ---------- Пилюли-ссылки ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 30px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--dark);
  transition: background 0.2s, box-shadow 0.2s;
}

/* таблетка лежит на синей плашке: гасить прозрачностью, как тёмные кнопки,
   нельзя — она просто растворится в фоне, поэтому подсветка тенью и лёгкий
   серый оттенок. Шеврон подаётся вперёд, как в ссылках-стрелках */
.pill:hover {
  background: #eef2f9;
  box-shadow: 0 6px 18px rgba(2, 13, 32, 0.16);
}

.pill img {
  transition: transform 0.2s;
}

.pill:hover img {
  transform: translateX(3px);
}

/* по макету блока "какие анализы" обе кнопки — белые таблетки (раньше первая
   была светло-голубой); .pill--blue больше нигде не используется, поэтому
   красим в белый прямо тут, а не заводим новый модификатор */
.pill--blue { background: #fff; }
.pill--white { background: #fff; }

.pill--tag {
  gap: 10px;
  padding: 12px 21px;
  margin-bottom: 24px;
  font-size: 16px;
  color: rgba(2, 13, 32, 0.5);
  background: rgba(92, 131, 195, 0.12);
}

.pill--tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

/* ============================================================
   Первый экран
   ============================================================ */

.hero {
  position: relative;
  /* кадр ограничен по ширине макета (1440px) и центрирован — приём один в один
     как .hero__frame в landing-1.css. Без этого на широких мониторах section
     тянулась на весь viewport, и фон-фото (768/764 quare, background:cover)
     обрезался иначе, чем в макете — лицо человека на фото уезжало за край. */
  max-width: 1440px;
  margin: 0 auto;
  background: url('../img/l3_hero_bg.webp') center/cover no-repeat;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  /* панель в макете стоит на y=74 при высоте кадра 764 и своих 670 —
     отсюда отступы сверху и снизу; при прежних 32px она заезжала под
     прозрачную шапку, и пункты меню оказывались белым по голубому */
  padding: 74px 0 20px;
}

/* Затемнение под шапкой. В макете ссылки меню белые, но там кадр фотографии
   обрезан иначе, и под шапкой оказывается тёмная часть комнаты. У нас фон
   тянется по center/cover, наверху — светлая стена и окно, и белый текст на
   ней исчезал. Полупрозрачная растяжка сверху возвращает читаемость, не меняя
   ни цвет ссылок, ни само фото. */
.hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(2, 13, 32, 0.55) 0%, rgba(2, 13, 32, 0) 100%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  min-height: 670px;
  display: flex;
  align-items: flex-start;
}

.hero__panel {
  background: var(--blue-tag-bg);
  border-radius: 18px;
  /* в макете панель 716px (Rectangle 111) и паддинги 40/32/32, а не 620 и 56/48 —
     при старой ширине ряду кнопок было физически некуда влезть без переноса
     (362 + 38 зазор + 238 = 638px против 620 − 96 = 524px свободных) */
  padding: 40px 32px 32px;
  max-width: 716px;
  width: 100%;
  /* 716×670 — размер Rectangle 111 из макета */
  min-height: 670px;
  display: flex;
  flex-direction: column;
}

.hero__title {
  /* заголовок первого экрана крупнее общего lnd-title (74px против 59px) и с более плотным интерлиньяжем */
  font-size: clamp(40px, 5.14vw, 74px);
  line-height: 0.847;
  color: var(--dark);
  /* в макете между заголовком и подводкой заметно больше воздуха, чем у обычной
     пары заголовок/текст (было 24px — визуально текст слипался с заголовком) */
  margin-bottom: 40px;
}

/* Подводка — два отдельных абзаца (не один слитный текст), поэтому .hero__lead
   теперь обёртка-колонка, а не сам абзац; типографику (.lnd-lead) несут дочерние <p> */
.hero__lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin-bottom: 40px;
}

.hero__lead p {
  color: var(--dark);
}

.hero__actions {
  /* панель теперь фиксированной высоты — кнопки прибиты к её низу, как в
     макете, а не висят сразу под текстом */
  margin-top: auto;
  display: flex;
  align-items: center;
  /* в макете зазор между кнопкой и ссылкой 38px (450 − (50+362) = 38), было 28 */
  gap: 38px;
  flex-wrap: wrap;
}

.hero__place {
  position: absolute;
  right: 0;
  bottom: 24px;
}

/* Квадраты Group 701: 12 штук 67.56×67.56 в кадре 1440×764, раскиданы по низу
   плитки и фото — координаты каждого сняты из макета и переведены в % от
   полного кадра (см. .hero__square:nth-child ниже) */
.hero__squares {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__square {
  position: absolute;
  width: 4.692%;
  aspect-ratio: 1 / 1;
  background: #fff;
}

/* top — проценты от высоты кадра 764px, как в макете. Раньше они были
   пересчитаны на наши 688px, потому что панель была ниже макетной; теперь
   кадр совпадает с макетом и проценты вернулись к исходным */
.hero__square:nth-child(1) { left: 64.167%; top: 58.246%; }
.hero__square:nth-child(2) { left: 8.141%; top: 66.885%; }
.hero__square:nth-child(3) { left: 45.942%; top: 75.523%; }
.hero__square:nth-child(4) { left: 53.442%; top: 50.000%; }
.hero__square:nth-child(5) { left: 82.686%; top: 75.699%; }
.hero__square:nth-child(6) { left: 73.427%; top: 58.246%; }
.hero__square:nth-child(7) { left: 96.576%; top: 66.973%; }
.hero__square:nth-child(8) { left: 78.056%; top: 66.973%; }
.hero__square:nth-child(9) { left: 91.946%; top: 58.246%; }
.hero__square:nth-child(10) { left: 68.797%; top: 66.973%; }
.hero__square:nth-child(11) { left: 3.511%; top: 75.612%; }
.hero__square:nth-child(12) { left: 87.316%; top: 66.973%; }

/* ============================================================
   Вы заметили изменения (симптомы 01–04)
   ============================================================ */

.symptoms__title {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}

/* Было статичной сеткой на 4 карточки — в макете карточек 8 (см. комментарий
   в landing-3.html про 01-08), поэтому лента переведена на Swiper. Сам свайпер
   (.swiper/.swiper-wrapper/.swiper-slide) кладёт нужные width/transform через
   inline-стили в JS (js/landing-3.js, параметры slidesPerView/spaceBetween
   по брейкпоинтам) — тут только оформление обёртки и самой карточки */
/* .symptoms__slider ничего не переопределяет из swiper-bundle.min.css
   (overflow:hidden и т.п. уже задаёт сам класс .swiper) — сюда добавлять
   ничего не нужно, поэтому отдельного блока стилей у обёртки нет */

.symptom {
  /* ширину задаёт сам Swiper (slidesPerView), карточка только заполняет слайд */
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 32px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Фон/цвет карточек в макете идут по кругу четвёркой — все 4 значения сверены
   по нодам (Rectangle 83 x=20/404/787/1171 и их текстовым узлам), не подобраны
   на глаз. У 3-й (почти белой) в макете ещё и тонкая обводка — без неё карточка
   сливалась бы с фоном страницы */
.symptom--1 { background: var(--blue); color: #fff; }
.symptom--2 { background: var(--blue-tag-bg); color: var(--dark); }
.symptom--3 { background: var(--grey-bg-2); color: var(--dark); border: 2px solid rgba(92, 131, 195, 0.13); }
.symptom--4 { background: var(--dark); color: #fff; }

.symptom__num {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.symptom__text {
  /* в макете этот текст набран Inter Display, а не Arimo — крупный кегль (32px) сбивал с толку */
  font-family: var(--font-body);
  font-size: clamp(20px, 1.8vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ============================================================
   Что такое андропауза?
   ============================================================ */

.about__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: start;
}

.about__title {
  margin-bottom: 28px;
}

.about__lead {
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* в макете абзац приглушённого цвета, а два фрагмента выделены полным тёмным */
  color: rgba(2, 13, 32, 0.71);
  margin-bottom: 32px;
  max-width: 580px;
}

.about__lead b {
  font-weight: 400;
  color: var(--dark);
}

/* ---------- вертикальный таймлайн возраста ---------- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  /* в макете шаг между пунктами (Group712/713/714) фиксированный — 85px между
     низом одного блока и верхом следующего (153px между заголовками минус
     68px высоты блока с однострочным описанием), было 56px произвольно */
  gap: 85px;
  padding-left: 64px;
  padding-top: 4px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  /* линия должна идти строго от центра первого кружка до центра последнего,
     не выступая за них. top — точный расчёт (padding-top 4px + смещение
     кружка 6px + радиус 22px), height — измерено после вёрстки (getBoundingClientRect,
     см. отчёт), т.к. зависит от накопленной высоты первых двух пунктов */
  top: 32px;
  height: 318.78px;
  width: 3px;
  /* цвет проверен по самому узлу (stroke Vector 165), а не по скриншоту
     заказчика — там поверх макета была красная линия-замер Figma. Реальный
     цвет линии в макете красный, в цвет квадратиков внутри кружков */
  background: var(--red);
}

.timeline__item {
  position: relative;
}

.timeline__dot {
  position: absolute;
  left: -64px;
  width: 44px;
  height: 44px;
}

/* В макете кружки НЕ центрированы по заголовку своего пункта — они смещаются
   вниз тем сильнее, чем ниже пункт (у 3-го описание в 2 строки, из-за этого
   блок выше, а кружок доезжает почти до середины описания). Цифры — реальное
   смещение верха кружка от верха заголовка в макете: 6 / 13 / 42px */
.timeline__item:nth-child(1) .timeline__dot { top: 6px; }
.timeline__item:nth-child(2) .timeline__dot { top: 13px; }
.timeline__item:nth-child(3) .timeline__dot { top: 42px; }

.timeline__item h3 {
  /* Inter Display Medium, не Arimo — в макете так, несмотря на жирность */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--dark);
}

.timeline__item p {
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--dark);
}

/* ============================================================
   Андропауза или обычное старение?
   ============================================================ */

.aging__card {
  padding: 64px 48px;
  border-radius: 28px;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
}

.aging__eyebrow {
  display: block;
  margin-bottom: 16px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
}

.aging__title {
  color: #fff;
  margin-bottom: 48px;
}

/* В макете (Group 718/719, id 1408:3500/3513) обе карточки — 557×431, зазор
   между ними 225px (832−607) при общей ширине блока 1339px (1389−50) —
   то есть зазор 16.81% от ширины грида, а не отдельная колонка под иллюстрацию
   на auto. Иллюстрация в макете лежит поверх зазора абсолютным слоем (см. ниже),
   поэтому колонок в гриде теперь две, а не три */
.aging__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16.81%;
  /* было align-items:center — из-за него карточки не тянулись по высоте грида
     и разъезжались (у левой 4 пункта списка, у правой 7, в макете при этом
     обе карточки одной высоты 431). stretch (по умолчанию) выравнивает их */
  position: relative;
}

.aging__col {
  padding: 40px 32px;
  border-radius: 18px;
  background: #0c1629;
  border: 1px solid rgba(191, 214, 252, 0.25);
}

/* правая карточка в макете лежит поверх иллюстрации (порядок слоёв:
   левая карточка → иллюстрация → правая карточка), у левой явный z-index
   не нужен — статичный (не спозиционированный) элемент и так рисуется под
   абсолютной иллюстрацией */
.aging__grid .aging__col:last-child {
  position: relative;
  z-index: 3;
}

.aging__col-title {
  /* в макете 32px, Inter Display Medium (не Arimo) */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.aging__list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 16px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
}

.aging__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  /* в макете маркер — квадрат, а не точка */
  border-radius: 2px;
  background: var(--blue);
}

/* Иллюстрация в макете 737×537 — крупнее и шире, чем зазор между карточками
   (225px), и лежит внахлёст: слева перекрывает правый край левой карточки на
   277px, справа — левый край правой на 235px (сверху с картой в контексте есть
   точные координаты узла 1408:3512). Все % — от .aging__grid (1339px = его
   ширина в макете: ширина карточки + зазор + ширина карточки) */
.aging__illustration {
  position: absolute;
  z-index: 2;
  left: 22.6%;
  bottom: -47%;
  width: 48.8%;
}

.aging__cta {
  margin-top: 32px;
}

/* ============================================================
   Диагностика
   ============================================================ */

.diag__heading {
  /* этот заголовок крупнее общего lnd-title: 74px против 59px */
  font-size: clamp(32px, 5.14vw, 74px);
}

.diag__lead {
  margin: 20px 0 40px;
  max-width: 300px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.diag__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Раскладка макета: в нижнем ряду заполнены только вторая и четвёртая колонки.
   Раньше позиции стояли инлайн в разметке, и каждый брейкпоинт был вынужден
   сбрасывать их через !important — стоило одному сбросу не сработать, и блок
   переставал адаптироваться. Теперь они существуют только на десктопе. */
@media (min-width: 1280px) {
  .diag__card:nth-child(5) { grid-column: 2; grid-row: 2; }
  .diag__card:nth-child(6) { grid-column: 4; grid-row: 2; }
}

.diag__card {
  /* в макете карточка заметно выше (348px) — заголовок прижат к верху,
     а текст к низу, поэтому space-between вместо тесного gap */
  min-height: 348px;
  padding: 32px;
  border-radius: 22px;
  background: var(--grey-bg-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.diag__card h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 29px;
  letter-spacing: -0.02em;
  color: var(--dark);
}

.diag__card p {
  font-size: 20px;
  line-height: 1.1;
  color: var(--grey-text);
}

/* ============================================================
   Какие анализы помогут оценить гормональный фон
   ============================================================ */

/* Плашка карточки: раньше сплошной тёмный фон на всю секцию, заголовок и
   кнопки в столбик друг под другом. По макету — синий градиент по диагонали
   (светлее у левого верхнего угла, темнее у правого нижнего), заголовок слева,
   кнопки прижаты к правому краю на уровне заголовка. Раскладка — grid с
   именованными областями: title/links в одной строке, grid (сетка карточек)
   отдельной строкой ниже; порядок в DOM (h2, .exams__links, .exams__grid)
   как раз даёт три элемента под три области, обёртка не нужна. */
.exams__card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title links"
    "grid  grid";
  column-gap: 24px;
  row-gap: 32px;
  align-items: start;
  padding: 56px 48px;
  border-radius: 28px;
  /* Точных стопов градиента в макете нет — взяты переменные из .whyus__lead
     (landing-1.css), направление развёрнуто под скриншот: светлый угол вверху
     слева. Переход растянут до 60%, чтобы по карточке шла заметная растяжка,
     как в макете, а не узкий светлый клин у самого угла. Сверить, когда
     вернётся доступ к макету. */
  background: linear-gradient(135deg, var(--blue-tag-bg) -25%, var(--blue) 55%);
  color: #fff;
}

.exams__title {
  grid-area: title;
  max-width: 820px;
  color: #fff;
}

.exams__links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  /* по макету кнопки стоят друг под другом и прижаты к правому краю плашки */
  align-items: flex-end;
  gap: 12px;
}

.exams__grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.exams__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.exams__group {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.exams__group h3 {
  padding: 24px 28px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 29px;
  letter-spacing: -0.02em;
}

.exams__group ul {
  padding: 12px 28px 24px;
}

.exams__group li {
  padding: 8px 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}

/* flex-колонка нужна, чтобы прижать плашку "Важно" (см. .note--light ниже)
   к нижнему краю карточки через margin-top: auto — карточка растягивается по
   высоте правой колонки (grid-стретч у .exams__grid), а список — нет */
.exams__group--light {
  display: flex;
  flex-direction: column;
  background: var(--grey-bg-2);
  color: var(--dark);
}

.exams__group--light h3 {
  background: var(--dark);
  color: #fff;
}

.exams__group--blue {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.exams__group--blue h3 {
  background: var(--blue-tag-bg);
  color: var(--dark);
}

/* "чуть светлее" .exams__group--blue по описанию макета — тот же приём
   (полупрозрачный белый поверх градиента), альфа чуть выше (0.13 против 0.11
   у --blue). Выше 0.14 брать нельзя: белый текст на этом фоне проваливается
   ниже 3:1 по WCAG для крупного текста (посчитано по фактическому цвету
   пикселя после наложения на градиент) */
.exams__group--outline {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

/* было rgba(191,214,252,.3) — почти прозрачная светлая плашка; на тёмном фоне
   она читалась как приглушённо-тёмная, а на новом синем градиенте стала бы
   слишком бледной и теряла контраст с белым текстом. По макету шапка тут
   заметно синее шапки "Общее состояние" — берём var(--blue) сплошным цветом */
.exams__group--outline h3 {
  background: var(--blue);
  color: #fff;
}

/* ============================================================
   Почему нельзя начинать терапию самостоятельно
   ============================================================ */

/* "хвостики" стопки карточек уходят за правый край карточки на 77px —
   без этого секция даёт горизонтальный скролл страницы (перенесено с
   landing-1, .errors) */
.mistakes {
  overflow-x: hidden;
}

/* Раскладка перенесена целиком с landing-1 (.errors__grid): не колонка-
   в-колонку, а координатная сетка в % с общим aspect-ratio (как .diagram__body) —
   слева текст, справа поверх друг друга фото и стопка "Ошибка №", карточка
   перекрывает нижнюю часть фото. CSS Grid тут не используется вовсе, поэтому
   прежней проблемы "схлопнутой колонки под фото" (см. старый комментарий про
   minmax(0,1fr) — ширина фото и карточки считалась от intrinsic-размера img
   до её загрузки) больше нет: ширина элементов идёт от aspect-ratio родителя,
   а не от контента. */
/* Координаты и aspect-ratio — с landing-1 (фрейм 1403:20227, блок 1400×510):
   фото 524×510 от x=397, карточка 613×348 от x=731, текст слева от x=21.
   Фото landing-3 (l3_photo_self_treat.png, 1270×1239) снято в той же пропорции,
   что и фото landing-1 (1100×1073 ≈ 524×510), поэтому геометрию берём без
   пересчёта — иначе фото и стопка не перекрывались бы так, как в макете. */
.mistakes__grid {
  position: relative;
  aspect-ratio: 1400 / 510;
}

.mistakes__intro {
  position: absolute;
  left: 0;
  top: 10%;              /* заголовок начинается на 51px ниже верха фото */
  width: 43.3%;          /* 606px из 1400 */
  z-index: 2;
}

.mistakes__lead {
  margin-top: clamp(16px, 3.9vw, 55px);
  max-width: 471px;
}

.mistakes__lead b {
  font-weight: 400;
  color: var(--dark);
}

.mistakes__link {
  margin-top: clamp(16px, 3.4vw, 48px);
}

/* координатная система — bounding box фото (524×510 в макете), фото и карточка
   с "хвостиками" расположены в нём в процентах, как и было в макете landing-1.
   Отдельной обёртки .errors__side тут нет: в landing-1 она давала те же
   inset:0, что и .errors__visual, — дублирующий уровень вложенности без
   собственного эффекта, слит с __visual. */
.mistakes__visual {
  position: absolute;
  inset: 0;
}

.mistakes__photo {
  position: absolute;
  left: 26.93%;          /* x=397 из 1400 */
  top: 0;
  z-index: 1;
  width: 37.43%;         /* 524px */
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.mistakes__card {
  position: absolute;
  left: 50.79%;          /* x=731 */
  top: 24.51%;           /* y=4548 от верха фото */
  z-index: 2;
  width: 43.79%;         /* 613px */
  height: 68.24%;        /* 348px */
}

/* два "хвостика" стопки позади активной карточки — цвета и смещения с landing-1
   (два Rectangle позади инстанса "Ошибки": +38/-37 и +77/-74, чем дальше, тем темнее) */
.mistakes__layer {
  position: absolute;
  inset: 0;
  border-radius: 22px;
}

/* смещение вынесено в переменные --shift-x/--shift-y: по ним же собраны кадры
   @keyframes ниже, поэтому у каждой плашки анимация идёт от и до её же места,
   а не дёргается на позицию соседней (без переменных дальняя плашка мигала) */
.mistakes__layer--2 {
  z-index: 1;
  background: #e5ebf5;
  /* смещение хвостиков в процентах от ширины карточки, а не в пикселях:
     координатная сетка блока сжимается вместе с контейнером, а фиксированные
     38px — нет, и на ширинах около 1300 дальняя плашка вылезала за контейнер,
     переставая совпадать по краю с остальными блоками */
  --shift-x: 6%;
  --shift-y: -37px;
  transform: translate(var(--shift-x), var(--shift-y));
}

.mistakes__layer--3 {
  z-index: 0;
  background: #d6e0f0;
  --shift-x: 12%;
  --shift-y: -74px;
  transform: translate(var(--shift-x), var(--shift-y));
}

/* При смене слайда JS вешает .is-shift на карточку — стопка подтягивается волной */
.mistakes__card.is-shift .mistakes__layer--2 { animation: mistakes-layer 600ms ease; }
.mistakes__card.is-shift .mistakes__layer--3 { animation: mistakes-layer 600ms ease 90ms; }

@keyframes mistakes-layer {
  0%   { transform: translate(var(--shift-x), var(--shift-y)) scale(1); }
  40%  { transform: translate(var(--shift-x), calc(var(--shift-y) - 13px)) scale(1.02); }
  100% { transform: translate(var(--shift-x), var(--shift-y)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mistakes__card.is-shift .mistakes__layer--2,
  .mistakes__card.is-shift .mistakes__layer--3 { animation: none; }
}

/* стопка карточек "Ошибка №1..6" — листается слайдером Swiper,
   инициализация — js/landing-3.js */
.mistakes__stack {
  position: relative;
  z-index: 2;
  height: 100%;
  border-radius: 22px;
}

/* каждая ошибка — отдельный слайд Swiper */
.mistakes__box {
  box-sizing: border-box;
  height: 100%;
  padding: clamp(24px, 3.1vw, 44px) clamp(20px, 2.9vw, 40px);
  border-radius: 22px;
  background: var(--grey-bg-2);
  box-shadow: 11px -10px 24px rgba(0, 27, 72, 0.05);
}

/* «Ошибка №N» — крупная красная подпись. Селектор с классом, а не
   `.mistakes__box p`, иначе общий стиль абзаца перебивает её. */
.mistakes__num {
  font-family: var(--font-head);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);
}

.mistakes__box h3 {
  margin-top: clamp(22px, 3.1vw, 44px);
  max-width: 54.2%;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(2, 13, 32, 0.86);
}

/* у "Ошибка №N" (.mistakes__num) тоже тег <p> — общий селектор
   `.mistakes__box p` перебивал бы её стили из-за специфичности
   (класс+тег > класс), поэтому у текста абзаца отдельный класс */
.mistakes__text {
  margin-top: clamp(16px, 2vw, 28px);
  max-width: 84%;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: rgba(2, 13, 32, 0.86);
}

/* ============================================================
   Цель лечения — улучшить самочувствие и здоровье
   ============================================================ */

.goal {
  text-align: center;
  padding-bottom: 38px;
}

.goal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 21px;
  margin-bottom: 24px;
  border-radius: 35px;
  background: rgba(92, 131, 195, 0.12);
  font-size: 16px;
  color: rgba(2, 13, 32, 0.5);
}

.goal__eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.goal__title {
  /* этот заголовок крупнее общего lnd-title: 74px против 59px */
  font-size: clamp(32px, 5.14vw, 74px);
  max-width: 900px;
  margin: 0 auto 20px;
}

.goal__lead {
  max-width: 500px;
  margin: 0 auto 56px;
  font-size: 20px;
  color: var(--grey-text);
}

/* Координаты сняты с присланного заказчиком скриншота макета (не с самого макета —
   Figma MCP недоступен), точность примерно ±2%, сверить при первой возможности.
   Система координат — бокс 1440×800 от верха плашки "Метаболическое здоровье",
   держим её шириной с контейнер (как .diagram__body/.errors__grid), все
   дети — % от неё. Раньше коллаж был искусственно сужен до 1100px, из-за чего
   карточки и иконки казались крупнее макета, а фото мужчины — мельче и уже. */
.goal__gallery {
  position: relative;
  aspect-ratio: 1440 / 800;
  text-align: left;
}

/* фото на скриншоте занимает всю высоту бокса и снизу чуть выходит за его
   нижний край — уходит в нижний паддинг секции, поэтому overflow не прячем */
.goal__photo {
  position: absolute;
  left: 0;
  top: 5%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  z-index: 2;
  right: 0;
  margin: auto;
}

.goal__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: var(--grey-bg-2);
  justify-content: flex-end;
}

/* Иконка — в верхней части карточки, подпись прижата к низу слева (по ТЗ).
   Размер и вынос заданы в процентах от карточки: сама карточка занимает 26.5%
   ширины коллажа и ужимается вместе с ним, а прежние 230px не ужимались — на
   ширинах около 900px иконки становились больше своих карточек. */
.goal__card img {
  flex: 1;
  min-height: 0;
  width: 62%;
  max-width: none;
  object-fit: contain;
  position: absolute;
  top: 0;
  right: 0;
}

.goal__card--energy img{
  width: 59%;
  top: -19.5%;
  transform: rotate(-18.98deg);
}

.goal__card span {
  padding: 0 0 12% 12%;
  /* в макете подписи набраны Inter Display Medium 32px, а не Arimo */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 32px);
  color: rgba(2, 13, 32, 0.86);
}

/* карточки "Метаболическое здоровье" и "Энергия" лежат под фото (z-index:1),
   "Сон" — поверх фото (видно, что на скриншоте она лежит прямо на мужчине) */
.goal__card--energy { left: 5.42%; top: 23%; width: 26.5%; height: 42.75%; z-index: 1; }
.goal__card--libido { left: 67.43%; top: 2.13%; width: 26.5%; height: 40.75%; z-index: 3; }
.goal__card--sleep  { left: 43.4%; top: 51.88%; width: 26.5%; height: 41.38%; z-index: 3; }

.goal__card--libido img{
  transform: rotate(9.955deg);
  top: -6.3%;
  right: -5.4%;
}

.goal__card--sleep img{
  transform: rotate(-9.639deg);
  top: -23%;
}

.badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 22px;
  /* padding в % у абсолютно спозиционированного элемента считается от ширины
     containing block (.goal__gallery), а не от своей — с процентом текст
     переносился на 2 строки, поэтому здесь фиксированный clamp от вьюпорта */
  padding: 0 clamp(14px, 1.7vw, 24px);
  border-radius: 28px;
  background: var(--grey-bg-2);
  /* в макете подписи Inter Display Medium 32px, а не Arimo */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 32px);
  color: rgba(2, 13, 32, 0.86);
  box-shadow: 0 12px 30px rgba(2, 13, 32, 0.08);
}

.badge img { width: 13px; height: 13px; flex: none; }

/* "Метаболическое здоровье" уходит под фото мужчины (видно на скриншоте),
   "Мышечная масса" лежит слева от фото — обе в одном слое с карточкой "Энергия" */
.badge--metabolic { left: 14.1%; top: 0; width: 33.54%; height: 13.5%; z-index: 1; }
.badge--muscle    { left: 10.07%; top: 76.5%; width: 25.56%; height: 10.25%; z-index: 1; }
.badge--mood      { left: 76.11%; top: 64.75%; width: 20.07%; height: 12.13%; z-index: 3; }

/* ============================================================
   Специалисты (общий модуль .lnd-doctors из common.css — common.css не
   трогаем, оформление секции добавляем поверх через второй класс на секции)
   ============================================================ */

/* В макете вся секция врачей лежит на светлой плашке 1440×815, скругление 28px,
   фон #F2F5FA. Внутренний .container общего модуля уже той же ширины (1440) и
   центрирован, поэтому просто ограничиваем и красим саму секцию — паддинги
   .lnd-doctors/.lnd-section из common.css дают отступ контента от края плашки. */
.doctors {
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 28px;
  background: #f2f5fa;
}

/* Карточка первого врача (Греков Евгений) в макете на красной подложке,
   остальные — на светлой (см. общий .lnd-doc__photo в common.css). Приём
   один в один как .doc--accent в landing-1.css: фото — вырезка с
   прозрачным фоном, подложка видна по краям кадра. */
.doc--accent .lnd-doc__photo {
  background: linear-gradient(160deg, #ff6d71, var(--red) 70%);
}

/* ============================================================
   Почему выбирают нас
   ============================================================ */

.why__title {
  margin-bottom: 40px;
  text-align: center;
}

/* Раскладка — 2 колонки, как в whyus, а не 3: левая карточка совмещает
   фото + точки + "5000+" (.why__lead), правая (.why__side) делится не
   пополам, а на 218/335 через flex-basis — сумма долей (218+335+20 зазор=573)
   равна высоте левой карточки, поэтому .why__side растягивается grid'ом
   ровно на неё, и flex-basis в процентах даёт те же пропорции, что в макете. */
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}

.why__lead {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 573px;
  padding: clamp(28px, 3.7vw, 53px) clamp(20px, 3.2vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  background: linear-gradient(16.8deg, var(--blue) 8.7%, var(--blue-tag-bg) 91.7%);
}

.why__lead img:not(.why__dots) {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 100%;
  object-fit: cover;
}

/* тонировка поверх фото — blend на отдельной заливке поверх фото, а не на самом
   фото (иначе mix-blend-mode на img гасит фото в сплошной цвет и человек на нём перестаёт читаться) */
.why__lead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(16.8deg, var(--blue) 8.7%, var(--blue-tag-bg) 91.7%);
  mix-blend-mode: color;
}

/* координаты/пропорции — те же, что у whyus__dots (совпадающий узел в обоих
   макетах, см. комментарий в landing-3.html) */
.why__dots {
  position: absolute;
  z-index: 2;
  left: 9.5%;
  top: 6%;
  width: 88%;
  height: 87%;
  object-fit: contain;
  opacity: 0.9;
}

.why__lead .why__num,
.why__lead p {
  position: relative;
  z-index: 3;
}

.why__lead p {
  margin-top: clamp(14px, 1.8vw, 26px);
  max-width: 356px;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.why__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.why__stat {
  position: relative;
  flex: 0 0 calc((100% - 20px) * 218 / 553);
  min-height: 200px;
  padding: clamp(28px, 3.7vw, 53px) clamp(20px, 3.2vw, 46px) clamp(24px, 2.9vw, 42px);
  border-radius: 28px;
  background: var(--grey-bg-2);
}

.why__stat--dark {
  position: relative;
  flex: 0 0 calc((100% - 20px) * 335 / 553);
  /* число сверху, подпись у нижнего края — в макете между ними много пустоты */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(111.72deg, var(--dark) 1.67%, var(--blue) 219.42%);
  color: #fff;
}

/* в макете плашка лицензии лежит не на фото, а в углу светлой карточки "16+" */
.why__license {
  position: absolute;
  right: 48px;
  top: 51px;
}

.why__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(34px, 4.1vw, 59px);
  letter-spacing: -0.03em;
}

.why__lead .why__num {
  font-size: clamp(40px, 4.1vw, 59px);
}

/* на тёмной карточке и на карточке с фото число/подпись белые — по умолчанию
   наследуется тёмный цвет body */
.why__stat--dark .why__num {
  color: #fff;
}

.why__stat p,
.why__stat--dark p {
  display: block;
  margin-top: clamp(14px, 1.8vw, 26px);
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* в тёмной плитке подпись прижата вниз распоркой (justify-content:space-between
   родителя), отступ сверху лишний */
.why__stat--dark p {
  margin-top: 0;
}

.why__prize {
  /* в макете иконка ~39% ширины карточки — держим ту же пропорцию,
     т.к. на разных брейкпоинтах карточка "95%" сильно меняет ширину */
  position: absolute;
  /* якорь по right/bottom, а не top/right: в макете приз смещён от угла
     (13.25%/2.22% от плитки 690×335), а не прижат вплотную к рамке */
  z-index: 2;
  right: 13.25%;
  bottom: 2.22%;
  width: 39.21%;
  aspect-ratio: 1 / 1;
  opacity: 0.95;
}

/* Мини-версии карточек отзывов (.review) поверх приза в плитке "95%" —
   в макете это два реальных отзыва вразброс, повёрнутые, а не карточки-стикеры.
   Составной селектор .review.why__note важен: базовый .review ниже
   по файлу задаёт свою ширину/паддинг, без составного селектора они бы победили. */
.review.why__note {
  position: absolute;
  z-index: 2;
  /* 199px в макете — это обычная карточка отзыва (325px) в масштабе 0.612,
     а плитка "95%" в обоих лендингах одного размера (690×335), поэтому
     проценты совпадают с whyus__note */
  width: 28.84%;
  min-width: 150px;
}

/* координаты — по невёрнутому боксу: Figma отдаёт габарит уже повёрнутой
   карточки (bbox), поэтому left/top пересчитаны от центра bbox, а не от угла рамки.
   z-index — по порядку слоёв в макете: карточка-1 лежит под призом, карточка-2 — над ним */
.review.why__note--1 {
  z-index: 1;
  left: 41.55%;
  top: 16.3%;
  transform: rotate(-5.56deg);
}

.review.why__note--2 {
  z-index: 3;
  left: 70.13%;
  top: 46.7%;
  transform: rotate(6.33deg);
}

/* мини-версия карточки отзыва — масштаб 0.612 от обычной .review (325×242 → 199×148).
   Селектор .review.review--mini не для красоты: у обеих частей класс .review,
   а базовые правила карточки (padding/radius/bg/шрифты) объявлены ниже по файлу, в секции
   "Отзывы" — при равной специфичности с одним классом там побеждает более поздний селектор */
.review.review--mini {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(2, 13, 32, 0.14);
}

.review.review--mini .review__head { margin-bottom: 6px; }
.review.review--mini .review__rating { height: 9px; }
.review.review--mini .review__source { height: 7px; }

.review.review--mini h3 {
  margin-bottom: 5px;
  font-size: 11px;
}

/* колонка "95%" у нас уже, чем в макете (грид не воспроизводит фигму 1:1 по
   ширине), поэтому плитка при aspect-ratio ниже фигмовских 335px — карточке
   не хватает места под все 5 строк текста, как на l1. 4 строки при 8px —
   вписывается в самый тесный случай (карточка №2 на 390px), запас ~10px */
.review.review--mini p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 8px;
  line-height: 1.3;
}

.review.review--mini .review__more {
  margin-top: 4px;
  font-size: 8px;
}

/* ============================================================
   Отзывы
   ============================================================ */

.reviews {
  text-align: center;
}

/* Коллаж перенесён с landing-1 (.reviews__collage): видео и карточки
   отзывов раскиданы вразброс поверх заголовка в общей координатной системе
   1379×974 (как в макете), а не собраны в ровную сетку. Все дети — % от неё,
   поэтому у коллажа фиксируем aspect-ratio. На узких экранах (медиа-запрос
   ниже) переключаем в обычный поток. */
.reviews__collage {
  position: relative;
  margin-top: 40px;
  aspect-ratio: 1379 / 974;
}

.reviews__kicker {
  position: absolute;
  left: 45.98%;
  top: 13.24%;
  margin: 0;
}

.reviews__title {
  position: absolute;
  /* рамка и позиция — как в макете (1013/1379 = 73.46% по центру коллажа).
     Текст специально заходит ПОД карточки отзывов слева/справа (это коллаж,
     карточки лежат сверху по z-index) — так и на landing-1, откуда перенесено */
  left: 12.4%;
  top: 22.49%;
  width: 73.46%;
  margin: 0;
}

.reviews__lead {
  position: absolute;
  left: 50%;
  top: 54.72%;
  width: 40%;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(15px, 1.6vw, 20px);
  color: var(--text-47);
  white-space: nowrap;
}

.reviews__more {
  position: absolute;
  left: 50%;
  top: 62.32%;
  margin: 0;
  transform: translateX(-50%);
}

.review-video {
  position: absolute;
  width: 23.57%;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 325 / 220;
}

.review-video--1 { left: 0; top: 45.69%; opacity: 0.74; }
.review-video--2 { left: 76.43%; top: 63.86%; opacity: 0.58; }

.review-video img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
}

.review {
  position: absolute;
  z-index: 2;
  width: 23.57%;
  min-width: 230px;
  padding: 24px;
  border-radius: 22px;
  background: var(--grey-bg-2);
  text-align: left;
}

.review--1 { left: 4.13%; top: 0; }
.review--2 { left: 76.43%; top: 10.88%; }
.review--3 { left: 11.75%; top: 75.15%; }

.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.review__rating {
  height: 20px;
}

.review__source {
  height: 14px;
  opacity: 0.7;
}

.review h3 {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
}

.review p {
  font-size: 14px;
  line-height: 1.1;
  font-weight: 300;
  color: var(--dark);
}

.review__more {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--grey-text);
}

/* ============================================================
   Адаптив: 1279 / 1023 / 659
   ============================================================ */

@media (max-width: 1279px) {
  .hero__panel { max-width: 100%; padding: 40px 32px; }
  .about__inner { grid-template-columns: 1fr; gap: 40px; }
  .aging__grid { grid-template-columns: 1fr; }
  /* карточки встают в столбик — нахлёст иллюстрации на них по ширине блока
     (абсолютные % от .aging__grid) на узкой колонке уже наезжал бы на текст
     списков, поэтому на этой ширине возвращаем её в обычный поток между карточками */
  .aging__illustration {
    position: static;
    z-index: auto;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 220px;
    margin: 24px auto;
  }
  .aging__grid .aging__col:last-child { position: static; z-index: auto; }
  /* 348px — макетная высота под четыре узкие колонки; в двух широких колонках
     она превращается в пустое поле между заголовком и текстом */
  .diag__grid { grid-template-columns: repeat(2, 1fr); }
  .diag__card { min-height: 0; padding: 28px; }
  /* заголовку и кнопкам справа уже тесно в одной строке (max-width заголовка
     820px почти съедает всю карточку) — возвращаем кнопки под заголовок,
     как было в исходной вёрстке до макета */
  .exams__card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "links"
      "grid";
  }
  .exams__links { align-items: flex-start; }
  .exams__grid { grid-template-columns: 1fr; }
  /* .mistakes на этой ширине не трогаем: координатная сетка в % (aspect-ratio)
     держит пропорции фото/карточки сама по себе, теснота начинается только у
     1023px — переопределения ниже, в этом брейкпоинте (перенесено с landing-1) */
  /* мини-карточки отзывов в блоке "95%" — на этой ширине им уже тесно,
     минимальная ширина базовой .review тут не нужна (перенесено с whyus) */
  .review.why__note { min-width: 130px; }
}

@media (max-width: 1023px) {
  /* фиксированные 670px — размер панели в макете на десктопе; на планшете и
     телефоне она должна тянуться по содержимому, иначе внизу пустое поле */
  .hero__panel { min-height: 0; }
  .hero__inner { min-height: 0; }

  /* меню уезжает в белую выпадающую панель (общий .lnd-header__nav.is-open из
     common.css) — белые ссылки, нужные поверх фото, там становятся невидимыми */
  .header .lnd-header__nav a { color: var(--dark); }
  .header .lnd-header__nav a:hover { color: var(--red); }
  .hero__inner { min-height: auto; }
  .hero__place { position: static; margin-top: 24px; align-self: flex-start; }
  .hero__inner { flex-direction: column; align-items: flex-start; }
  /* квадраты раскиданы по пропорциям широкого кадра (1440×764) — на планшете/
     мобильном, где панель с фото встают в столбик, а высота блока целиком
     определяется контентом, эти же проценты уже не попадают в нужные места
     (наезжали на текст в панели) — на такой раскладке декор только мешает */
  .hero__squares { display: none; }
  /* На планшете левой карточке (фото+точки+"5000+") и правой колонке уже
     тесно в 1fr/1fr — переключаем в столбик (перенесено с whyus) */
  .why__grid { grid-template-columns: 1fr; }
  .why__lead { padding-bottom: 24px; }
  .review.why__note { min-width: 150px; }
  /* колонки встали друг под друга — высота больше не задана рядом сетки,
     доли 218/335 при нулевой основе схлопнули бы плитки в паддинги */
  .why__stat,
  .why__stat--dark { flex: 0 0 auto; }
  /* плитке auto-высоты мало — коллаж отзывов вылезал бы за нижний край */
  .why__stat--dark { min-height: 300px; }

  /* на планшете левой колонке текста и правому коллажу фото+карточек уже тесно
     в 43%/57% — сетка ужимается по ширине, а смещения стопки — нет: при 38/77
     дальняя плашка вылезала за правый край блока (перенесено с landing-1) */
  .mistakes__layer--2 { --shift-x: 24px; --shift-y: -24px; }
  .mistakes__layer--3 { --shift-x: 48px; --shift-y: -48px; }
  /* сдвигаем фото+карточку вниз: заголовку/абзацу/ссылке в верхних 10% бокса
     уже не хватает высоты, слева наезжали бы на фото. В landing-1 этот сдвиг
     висел на отдельной обёртке __side — здесь __side слита с __visual (см.
     комментарий у .mistakes__visual), поэтому margin-top переехал на неё же */
  .mistakes__visual { margin-top: 40px; }
}

/* Порог 1023px, а не 767 как на landing-1: у карточки отзыва min-width 230px при
   ширине 23.57% от коллажа, и ниже ~976px минимум перебивает процент — карточка
   .review--2 (left 76.43%) вылезала за коллаж и тянула горизонтальную полосу
   на всю страницу. Ниже этого порога коллаж всё равно нечитаем, поэтому здесь и
   переключаем его в обычный вертикальный поток. */
@media (max-width: 1023px) {
  /* На узких экранах коллаж отзывов (в макете — коллаж вразброс) переключаем
     в обычный вертикальный поток, как на landing-1 */
  .reviews__collage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .reviews__collage > * {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 420px;
    transform: none;
  }

  .reviews__lead,
  .reviews__kicker { max-width: 100%; }

  /* relative, а не static из общего правила выше: иначе кнопка play (absolute)
     теряет превью как систему координат и уезжает вниз коллажа */
  .review-video { order: 1; position: relative; }
  .review { order: 2; }
}

@media (max-width: 659px) {
  .goal__lead{
    margin-bottom: 25px;
  }
  .hero__panel { padding: 32px 20px; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__actions .lnd-btn { width: 100%; }
  /* раньше тут карточки .symptom растягивались на всю ширину и теряли
     квадратную пропорцию (grid в один столбец) — теперь это слайдер, число
     карточек в ряд регулирует Swiper (js/landing-3.js), а пропорция 1/1
     сохраняется на всех ширинах по требованию правки, менять нечего */
  /* 348px — макетная высота карточки для четырёх колонок; на телефоне это
     полтора экрана пустоты под двумя строками текста, поэтому высоту отдаём
     содержимому и ужимаем набор */
  .diag__grid { grid-template-columns: 1fr; gap: 12px; }
  .diag__card { min-height: 0; padding: 22px 20px; gap: 8px; }
  .diag__card h3 { font-size: 22px; }
  .diag__card p { font-size: 16px; line-height: 1.3; }
  .aging__card { padding: 40px 20px; }
  .aging__col { padding: 28px 20px; }
  .exams__card { padding: 36px 20px; }
  /* .exams__links уже flex-direction:column от базового правила и
     align-items:flex-start от брейкпоинта 1279px — тут переопределять нечего */
  /* совсем узкий экран — фото и карточка "Ошибка" больше не накладываются
     (иначе карточке остаётся ~60% от 350px = нечитаемо), идут в столбик
     (перенесено с landing-1) */
  .mistakes__grid { aspect-ratio: auto; }
  .mistakes__intro { position: static; width: 100%; }
  .mistakes__visual { position: static; }
  .mistakes__photo { position: static; width: 100%; height: auto; aspect-ratio: 524 / 510; margin-top: 40px; }
  /* стопка остаётся и на узком экране — только смещение хвостиков вдвое меньше,
     иначе дальняя плашка вылезала бы за край экрана */
  .mistakes__card {
    position: relative;
    /* left/top остались бы от абсолютной раскладки и сдвинули бы карточку
       вправо на полэкрана — при relative они тоже работают */
    left: auto;
    top: auto;
    width: calc(100% - 44px);
    height: auto;
    margin-top: 76px;
  }
  .mistakes__layer--2 { --shift-x: 22px; --shift-y: -22px; }
  .mistakes__layer--3 { --shift-x: 44px; --shift-y: -44px; }
  .mistakes__stack { height: auto; }
  .mistakes__box { height: auto; min-height: 280px; padding: 28px; }
  /* на узком экране карточке хватает ширины — не держим ту же узкую пропорцию, что на 1440 */
  .mistakes__box h3 { max-width: 100%; margin-top: 24px; }
  .mistakes__text { max-width: 100%; margin-top: 20px; }
  /* На телефоне коллаж раскладываем плитками по две в ряд: раньше карточки шли
     столбиком во всю ширину, а иконка оставалась абсолютной и с выносом вверх —
     её перекрывало фото сверху, и оставались пустые прямоугольники с подписью. */
  .goal__gallery {
    display: grid;
    /* три плитки-состояния в один ряд, одинаковые; снимок и плашка над ними
       по-прежнему занимают всю строку */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    position: static;
    aspect-ratio: auto;
  }
  .goal__photo,
  .goal__card,
  .badge { position: static; width: auto; height: auto; left: auto; top: auto; right: auto; z-index: auto; }
  .goal__photo { grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 5; height: 300px;object-fit: contain;}
  .goal__card {
    position: relative;
    aspect-ratio: 1 / 1;
    /* иконка вынесена за верхний край — в плитке это лишнее, обрезаем по карточке */
    overflow: hidden;
  }
  .goal__card img,
  .goal__card--energy img,
  .goal__card--libido img,
  .goal__card--sleep img {
    position: absolute;
    top: 6%;
    right: 4%;
    left: auto;
    /* width: 55%; */
    height: 60px;
    transform: none;
  }
  /* подпись поверх иконки: в плитке они накладываются нижним углом */
  .goal__card span { position: relative; z-index: 1; font-size: 13px; }
  .goal__card { padding: 12px; }
  .badge { grid-column: 1 / -1; min-height: 52px; padding: 12px 18px; }
  /* на телефоне коллаж отзывов уезжает под текст, поэтому подпись возвращается
     под число, а не прижимается к низу плитки, как на широком экране
     (перенесено с whyus) */
  .why__stat--dark {
    justify-content: flex-start;
    min-height: 300px;
    padding-bottom: 120px;
  }
  /* подпись держим в левой колонке — карточки отзывов начинаются с 40% ширины */
  .why__stat--dark > p { margin-top: 14px; max-width: 38%; }
  .review.why__note { position: absolute; min-width: 130px; }
  /* коллаж опускается под число с подписью — на узкой плитке ему иначе некуда
     деться, места по горизонтали для него и текста вместе уже нет */
  .review.why__note--1 { top: 28%; }
  /* правая карточка прижата к краю плитки: процент от узкой ширины уводил бы её за экран */
  .review.why__note--2 { left: auto; right: 3%; top: 30%; }
  /* кубок уходит за карточки отзывов, как на широком экране, а не лежит под ними */
  .why__prize { width: 34%; right: 8%; bottom: 8%; z-index: 1; }
  .timeline { padding-left: 52px; gap: 40px; }
  /* кружок меньше (36 вместо 44) — центр смещается, линию и left пересчитываем:
     left = padding-left(52) − радиус(18) − |left:-52px + 36px кружка| см. отчёт */
  .timeline__dot { left: -52px; width: 36px; height: 36px; }
  .timeline::before {
    left: 18px;
    top: 28px;
    /* высота измерена на 659px (getBoundingClientRect до центра 3-го кружка);
       ниже 490px описание третьего пункта переносится на лишнюю строку и
       кружок съезжает ниже — см. следующий media-запрос */
    height: 228.78px;
  }
}

/* Отдельный порог не привязан к 1279/1023/659 не просто так: именно здесь
   (в районе 480px) описание третьего пункта таймлайна переносится на третью
   строку и третий кружок уезжает на 22px ниже — без этой правки линия на
   390px не дотягивалась бы до него на те же 22px */
@media (max-width: 485px) {
  .timeline::before { height: 250.78px; }
}

/* Симптомы на телефоне: свайпер отключён (см. js/landing-3.js), карточки идут
   списком по одной в ряд. Квадратная пропорция и поля под четыре колонки тут
   давали боксы почти во весь экран — высоту отдаём содержимому. */
@media (max-width: 659px) {
  .symptoms__slider:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    transform: none;
  }

  .symptoms__title { margin-bottom: 24px; }

  .symptom {
    aspect-ratio: auto;
    padding: 16px 20px;
    border-radius: 18px;
    gap: 6px;
  }

  .symptom__num { font-size: 20px; }
  .symptom__text { font-size: 16px; line-height: 1.25; }
}

/* Телефон: кегли и отступы блоков. Заголовки разделов шли 32px, лид-абзацы —
   20px с интерлиньяжем 1.1 (строки слипались), подпись под «Диагностикой»
   отбивалась на 40px. */
@media (max-width: 659px) {
  .lnd-title,
  .diag__heading { font-size: 28px; }

  .about__title { margin-bottom: 18px; }
  .about__lead {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 22px;
  }

  .diag__lead {
    margin: 14px 0 22px;
    max-width: none;
    font-size: 16px;
    line-height: 1.4;
  }

  .symptoms__title { margin-bottom: 20px; }
}

/* ============================================================
   Телефон: кегли, поля и крупные снимки
   Правила идут в конце файла намеренно — базовые стили блоков объявлены выше,
   а специфичность у них та же.
   ============================================================ */
@media (max-width: 659px) {
  /* «Андропауза или обычное старение?»: заголовки колонок 32px и список 20px
     занимали по два экрана */
  .aging__col { padding: 20px 18px; }
  .aging__col-title { font-size: 21px; margin-bottom: 12px; }
  .aging__list li { margin-bottom: 10px; padding-left: 20px; font-size: 16px; }
  .aging__list li::before { top: 6px; width: 7px; height: 7px; }

  /* Анализы: заголовки групп 29px, пункты 24px */
  .exams__col { gap: 14px; }
  .exams__group h3 { padding: 15px 18px; font-size: 20px; }
  .exams__group ul { padding: 8px 18px 16px; }
  .exams__group li { padding: 5px 0; font-size: 16px; }

  /* Снимки: на телефоне занимали от полутора экранов */
  .goal__photo { aspect-ratio: 1 / 1; }
  .why__lead { min-height: 360px; }
  /* снимок прижат к правому нижнему углу и не растягивается на всю плитку —
     иначе мужчина перекрывал текст и обрезался по пояс */
  .why__lead img:not(.why__dots) {
    inset: auto 0 0 auto;
    height: 85%;
    object-fit: cover;
    object-position: center bottom;
  }
  .why__lead .why__num,
  .why__lead p { max-width: 60%; }
  /* высоту не задаём числом: у карточки уже есть пропорция 3/4 (common.css),
     и фиксированный height схлопывал ширину снимка до 225px внутри слайда */
  .lnd-doc__photo { aspect-ratio: 1 / 1; }
  .lnd-doc__name { margin-top: 14px; font-size: 19px; }
  .lnd-doc__desc { margin-top: 8px; font-size: 13px; }
  .mistakes__photo { height: 220px; }

  /* Видео-отзывы — по два в ряд, как на landing-1 */
  .reviews__collage {
    flex-flow: row wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
  }

  .reviews__collage > * { flex: 0 0 100%; }

  .review-video {
    flex: 0 0 calc(50% - 7px);
    max-width: calc(50% - 7px);
    border-radius: 14px;
    opacity: 1;
  }

  .review-video__play { width: 38px; height: 38px; }
}

/* На 320px кнопка «Записаться» вместе с логотипом и бургером не влезала в строку
   шапки — бургер выдавливало за экран и появлялся горизонтальный скролл */
@media (max-width: 359px) {
  .lnd-header { gap: 10px; }
  .header__btn { gap: 8px; padding: 4px 14px 4px 4px; font-size: 14px; }
  .header__btn-circle { width: 28px; height: 28px; }
  .header__btn-circle img { width: 11px; height: 11px; }
}

/* Состав стероидного профиля — вложенный список внутри первого пункта.
   Визуально вторичен: мельче, светлее, плотнее, чтобы не спорить с основным перечнем. */
.exams__note {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 16px);
  opacity: 0.72;
}

.exams__sub {
  margin-top: 14px;
  padding-left: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 18px;
}

.exams__sub li {
  position: relative;
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.25;
  opacity: 0.75;
}

.exams__sub li::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}