/* ============================================================
   Лендинг №1 — «Лечение низкого тестостерона в Москве»
   Уникальные секции (префикс .l1-). Общие модули — в common.css.
   Цвета/размеры сняты с макета Figma (node 1403:20227).
   ============================================================ */

/* ---------- Эйбрау-плашка "что делать дальше / современная схема / отзывы" ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 21px;
  border-radius: 35px;
  background: rgba(92, 131, 195, 0.12);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: rgba(2, 13, 32, 0.5);
}

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

.kicker--on-dark {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}

.kicker--on-dark::before {
  background: #fff;
}

/* ---------- Мини-ссылка со стрелкой ("Получить консультацию") ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: opacity 0.2s;
}

.link-arrow:hover {
  opacity: 0.7;
}

/* Стрелка в макете — шеврон вправо (›). Оба ассета нарисованы вправо
   (arrow_white.svg 10×16, chevron_right_dark.svg 8×13), поэтому ни поворота,
   ни растягивания под другой габарит здесь больше нет */
.link-arrow__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

.link-arrow__icon img {
  width: 8px;
  height: 13px;
}

.link-arrow--light .link-arrow__icon img {
  width: 10px;
  height: 16px;
}

.link-arrow--light { color: #fff; }
.link-arrow--light .link-arrow__icon img { filter: brightness(0) invert(1); }

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

.header .lnd-header__nav a {
  color: #fff;
}

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

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

/* ============================================================
   1. Hero — фото во всю ширину фрейма (от края до края), карточка
   с заголовком лежит на нём слева, шапка — поверх (см. .header выше)
   ============================================================ */

.hero {
  padding-top: 0;
}

.hero__frame {
  position: relative;
  min-height: 764px;
  max-width: 1440px;
  margin: 0 auto;
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  background: var(--dark);
}

.hero__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/l1_hero_bg.png');
  background-size: cover;
  background-position: center right;
}

/* плашка "г. Москва" — в правом НИЖНЕМ углу поверх фото (в макете, не сверху) */
.hero__place {
  position: absolute;
  bottom: 34px;
  right: 30px;
  z-index: 2;
}

/* Карточка с заголовком — в макете это НЕ градиент поверх фото на всю ширину,
   а отдельная непрозрачная тёмная плашка (Rectangle 111, 716×670 при кадре 1440×764,
   радиус 18px, тонкая синеватая обводка) слева поверх фото. Фото просто видно справа. */
.hero__content {
  position: absolute;
  z-index: 1;
  left: 20px;
  top: 75px;
  bottom: 20px;
  width: 49.7%;
  max-width: 716px;
  /* в макете (Rectangle 111 720×670) заголовок/кнопки не центрированы группой —
     они прибиты к своим местам: заголовок сверху, кнопки внизу с большим
     "воздухом" между ними. Раньше вся группа была flex-центрирована, из-за
     чего расстояния плыли — теперь паддинги/margin-top:auto повторяют макет */
  padding: 41px 40px 32px 31px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(92, 131, 195, 0.28);
  background: linear-gradient(122.76deg, #020d20 31.21%, #00060c 80.64%);
  display: flex;
  flex-direction: column;
  color: #fff;
}

.hero__cta {
  padding: 21px 30px;
}

.hero__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 74px);
  line-height: 0.847;
  letter-spacing: -0.03em;
  /* ширина текстового бокса в макете (598px) — так заголовок ломается ровно
     на "Лечение низкого / тестостерона / в Москве", как в макете, а не как
     получится от ширины карточки */
  max-width: 598px;
}

.hero__lead {
  margin-top: 35px;
  max-width: 440px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.86);
}

.hero__actions {
  /* прибивает ряд кнопок к низу карточки — в макете между лид-текстом и
     кнопками пустое поле в ~243px, а не небольшой равный отступ */
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 38px;
  flex-wrap: wrap;
}

/* ============================================================
   2. Симптомы
   ============================================================ */

/* Заголовок и серая приписка справа — в макете один ряд (space-between), заголовок
   в одну строку (nowrap), а не в 640px-контейнере, из-за которого он переносился */
.symptoms__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

/* в макете тот же кегль, что у остальных заголовков секций (лnd-title, 59px) —
   раньше был занижен до 42px */
.symptoms__title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(32px, 4.1vw, 59px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* серая приписка "Эти симптомы далеко не всегда..." — в макете есть, в вёрстке
   отсутствовала полностью */
.symptoms__note {
  flex: none;
  max-width: 335px;
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #a4a8af;
}

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

.symptoms__card {
  padding: 28px 24px;
  min-height: 220px;
  border-radius: 22px;
  background: var(--grey-bg-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* иконки-пиксели разной формы (19×19 / 57×19 / 57×38 / 76×38 в макете, "блок" везде
   ~19px, у некоторых иконок по 2 строки блоков). Сами svg выгружены с
   preserveAspectRatio="none" — единый квадрат 20×20 их сплющивал и сбивал размер блока,
   а без width/height в разметке браузер вместо родного размера подставлял дефолтный
   (300×150). Поэтому размер теперь задан атрибутами width/height прямо в HTML. */
.symptoms__card img {
  display: block;
  width: auto;
  height: auto;
  /* card — flex-колонка, без align-self картинка растягивалась на всю ширину
     карточки (align-items:stretch по умолчанию) вместо родного размера из HTML */
  align-self: flex-start;
}

.symptoms__card p {
  margin-top: 28px;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ============================================================
   3. Диаграмма "Тестостерон влияет на"
   ============================================================ */

.diagram__card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: 56px 24px 0;
  text-align: center;
  background: radial-gradient(120% 120% at 35% 22%, #bfcbfe 0%, #8ea7e0 42%, #5c83c3 78%);
}

.diagram__eyebrow {
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  color: var(--dark);
}

.diagram__title {
  margin-top: 12px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 74px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--dark);
}

/* .diagram__body — система координат = ограничивающий прямоугольник колец-орбит
   (949×1175 в макете), фото и бейджи расположены внутри него в процентах */
.diagram__body {
  position: relative;
  margin: 0 auto;
  max-width: 949px;
  aspect-ratio: 949 / 1175;
}

.diagram__photo {
  position: absolute;
  left: 10.2%;
  top: 0;
  width: 84.4%;
  height: 100%;
  /* картинка была не той пропорции (почти квадрат) и contain оставлял пустые
     поля сверху/снизу — фигура казалась мельче макета. Перевыгрузили кадр
     из Figma под нужную пропорцию (801×1175), cover — на случай долей пикселя */
  object-fit: cover;
}

/* ---------- Кольца-орбиты вокруг фигуры (в макете были, в вёрстке выбросили — вернули) ---------- */
.diagram__orbits--back { position: absolute; inset: 0; z-index: 1; }
.diagram__orbits--front { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.diagram__ring {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0.9;
}
.diagram__ring:nth-child(1) { top: 24.38%; }
.diagram__ring:nth-child(2) { top: 34.22%; }
.diagram__ring:nth-child(3) { top: 43.36%; }
.diagram__ring:nth-child(4) { top: 52.63%; }
.diagram__ring:nth-child(5) { top: 62.11%; }

/* короткие яркие дуги — места, где кольцо "выходит" перед фигурой */
.diagram__hl { position: absolute; }
.diagram__hl--a { left: 34.3%; top: 51.88%; width: 3.42%; }
.diagram__hl--b { left: 66.65%; top: 52.08%; width: 5.48%; }
.diagram__hl--c { left: 31.4%; top: 61.04%; width: 5.01%; }
.diagram__hl--d { left: 66.54%; top: 61.18%; width: 8.54%; }

.diagram__dot {
  position: absolute;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diagram__dot img { position: absolute; }
.diagram__dot-inner { width: 21px; height: 21px; }
.diagram__dot--1 { left: 15.91%; top: 35.83%; }
.diagram__dot--2 { left: 58.27%; top: 73.96%; }
.diagram__dot--3 { left: 70.07%; top: 46.3%; }

.diagram__sm { position: absolute; width: 17px; height: 17px; }
.diagram__sm--1 { left: 40.25%; top: 23.74%; }
.diagram__sm--2 { left: 94.63%; top: 37.11%; }
.diagram__sm--3 { left: 42.47%; top: 56.43%; }
.diagram__sm--4 { left: 16.75%; top: 64%; }

.diagram__badge {
  position: absolute;
  z-index: 4;
  padding: 11px 20px;
  border-radius: 40px;
  font-size: clamp(14px, 1.7vw, 22px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(2, 13, 32, 0.08);
}

.diagram__badge--white { background: #fff; color: var(--dark); }
.diagram__badge--dark { background: var(--dark); color: #fff; }
.diagram__badge--red { background: var(--red); color: #fff; }
.diagram__badge--blue { background: var(--blue); color: #fff; }

.diagram__badge--libido { left: 17.18%; top: 23.13%; }
.diagram__badge--erection { left: 7.9%; top: 51.74%; }
.diagram__badge--energy { left: 80.4%; top: 42.62%; }
.diagram__badge--mood { left: 81.56%; top: 24.85%; }
.diagram__badge--muscle { left: 33.93%; top: 36.91%; }
.diagram__badge--fat { left: 5.37%; top: 69.77%; }
.diagram__badge--memory { left: 91.89%; top: 56.09%; }
.diagram__badge--bones { left: 68.7%; top: 72.06%; }
.diagram__badge--heart { left: 61.01%; top: 53.85%; }

/* ============================================================
   4. Когда стоит проверить тестостерон
   ============================================================ */

.ages {
  /* нахлёст карточек на линейку: в макете 53px при ширине 1400px, на узких
     экранах уменьшается вместе с самой линейкой */
  --ages-tick-h: 57px;
  --ages-tick-step: 12px;
  --ages-tick-color: #a4a8af;
  /* просвет между нижним краем штрихов и верхом карточек */
  --ages-gap: 22px;
  text-align: center;
}

/* линейка выходит за контейнер на ширину полосы прокрутки — гасим прокрутку
   страницы, не создавая при этом контекста прокрутки (clip, а не hidden) */
body {
  overflow-x: clip;
}

.ages__title {
  margin-top: 16px;
}

/* волнистая линия-коннектор и шкала-линейка под заголовком — в макете есть,
   в вёрстке выбросили. Картинка уже содержит и серые деления, и 4 красные
   линии-выноски к карточкам, поэтому сетку карточек подтягиваем внахлёст */
/* Штрихи идут от края до края экрана. Рисуем их повторяющимся градиентом, а не
   картинкой: SVG фиксированной ширины при растягивании давал дробные позиции
   линий, отчего в ряду появлялись видимые разрывы и сгущения. */
.ages__scale {
  margin-top: 40px;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: var(--ages-tick-h);
  background-image: repeating-linear-gradient(
    to right,
    var(--ages-tick-color) 0 1px,
    transparent 1px var(--ages-tick-step)
  );
}

.ages__grid {
  position: relative;
  z-index: 1;
  /* нахлёст карточек на линейку в макете — 53px при ширине линейки 1400px (~3.8%
     от ширины). Линейка растёт/сжимается вместе с шириной экрана (width:100%,
     фиксированное соотношение сторон), поэтому нахлёст переведён в vw — иначе на
     мобильных фикс. -53px превышал высоту уменьшенной линейки и она пропадала под сеткой */
  margin-top: var(--ages-gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}

.ages__card {
  position: relative;
  padding: 28px 24px;
  border-radius: 22px;
  background: var(--grey-bg-2);
}

/* Красная выноска от линейки к маркеру. Рисуем её у карточки, а не в SVG
   линейки: так она всегда попадает в центр своего маркера при любой ширине,
   и видна поверх карточки, как в макете, а не прячется под неё. */
.ages__card::before {
  content: '';
  position: absolute;
  left: 44px;
  /* начинается на верхней линии штрихов и доходит до центра маркера */
  top: calc(-1 * (var(--ages-tick-h) + var(--ages-gap)));
  width: 2px;
  height: calc(var(--ages-tick-h) + var(--ages-gap) + 48px);
  margin-left: -1px;
  background: var(--red);
}

.ages__card img {
  width: 40px;
  height: 40px;
}

.ages__card h3 {
  margin-top: 30px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 0.847;
  letter-spacing: -0.01em;
}

/* в макете между заголовком карточки и списком симптомов большой отступ (112px
   при 40px заголовке) — раньше был почти прижат (20px), а межстрочный интервал
   в списке был 1.4 вместо 1.1, из-за чего текст выглядел крупнее и рыхлее макета */
.ages__card p {
  margin-top: clamp(48px, 7.8vw, 112px);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: rgba(2, 13, 32, 0.86);
}

/* ============================================================
   5. CTA-плашка на всю ширину
   ============================================================ */

.cta-strip {
  padding-top: clamp(32px, 4vw, 56px);
}

/* ============================================================
   6. Как проходит лечение
   ============================================================ */

.process__grid {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
}

.process__photo {
  flex: 1 1 380px;
  position: relative;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  /* в макете подложка — сплошной var(--blue), а не градиент */
  background: var(--blue);
}

.process__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* тонировка поверх фото: в макете mix-blend-mode стоит на СПЛОШНОМ цвете-заливке
   поверх фото (получается ровный дуотон по яркости фото), а не на самом фото —
   если повесить blend на img, цвет берётся от фото, а не от заливки, и выходит
   слишком тёмно/пятнисто */
.process__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--blue);
  mix-blend-mode: color;
}

.process__photo h2 {
  position: relative;
  z-index: 1;
  padding: 44px;
  max-width: 90%;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 74px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--dark);
}

.process__steps {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.process__step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 90px;
  padding: 14px 32px;
  border-radius: 18px;
  background: var(--grey-bg-2);
  gap: 20px;
}

.process__step span {
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--blue);
  flex: none;
}

.process__step p {
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.02em;
}

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

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

/* Блок в макете НЕ колонка-в-колонку: слева текст (заголовок/абзац/ссылка),
   справа поверх друг друга фото бегущего мужчины и стопка карточек "Ошибка №",
   которая перекрывает нижнюю часть фото. Раньше все 4 элемента лежали в левой
   колонке друг под другом — теперь фото и карточки вынесены в .errors__side
   и .errors__visual (координатная сетка в % — как у .diagram__body). */
/* Координаты сняты с макета (фрейм 1403:20227, блок на y=4423…4933):
   фото 524×510 от x=397, карточка 613×348 от x=731, текст слева от x=21.
   Держим их в общей координатной сетке шириной с контейнер — иначе фото и
   стопка не перекрываются так, как нарисовано. */
.errors__grid {
  position: relative;
  aspect-ratio: 1400 / 510;
}

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

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

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

.errors__side {
  position: absolute;
  inset: 0;
}

/* координатная система — bounding box фото (524×510 в макете), фото и карточка
   с "хвостиками" расположены в нём в процентах, как и было в макете */
.errors__visual {
  position: absolute;
  inset: 0;
}

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

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

/* два "хвостика" стопки позади активной карточки — смещения сняты с макета
   (Rectangle 114 x2 позади инстанса "Ошибки") */
.errors__layer {
  position: absolute;
  inset: 0;
  border-radius: 22px;
}

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

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

/* При смене карточки стопка подтягивается волной — как в блоке «Как проходит
   процедура» на странице услуги. Кадры общие, но смещение каждая плашка берёт
   из своих переменных, иначе дальняя на время анимации прыгает на место
   ближней и выглядит как мигание. */
.errors__card.is-shift .errors__layer--2 { animation: errors-layer 600ms ease; }
.errors__card.is-shift .errors__layer--3 { animation: errors-layer 600ms ease 90ms; }

@keyframes errors-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) {
  .errors__card.is-shift .errors__layer--2,
  .errors__card.is-shift .errors__layer--3 { animation: none; }
}

/* стопка карточек "Ошибка №1..6" — в макете инстанс со свитчем на 6 вариантов
   (1403:20539 / варианты во фрейме 1403:20753), в вёрстке была одна.
   Листается слайдером Swiper, инициализация — js/common.js */
.errors__stack {
  position: relative;
  z-index: 2;
  height: 100%;
  border-radius: 22px;
}

/* каждая ошибка — отдельный слайд Swiper */
.errors__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» — крупная красная подпись из макета (40px). Селектор с классом,
   а не `.errors__box p`, иначе общий стиль абзаца перебивает её. */
.errors__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);
}

.errors__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" (.errors__num) тоже тег <p> — раньше общий селектор `.errors__box p`
   перебивал её стили из-за более высокой специфичности (класс+тег > класс).
   Поэтому у текста абзаца отдельный класс .errors__text */
.errors__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);
}

/* ============================================================
   8. Какие анализы понадобятся (тёмная секция)
   ============================================================ */

.analyses {
  border-radius: 28px;
  padding: clamp(32px, 5vw, 64px);
  background: var(--dark);
  color: #fff;
}

.analyses__title {
  margin-top: 16px;
  color: #fff;
}

.analyses__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* в макете зазор между карточками 42px, не 24 */
  gap: 42px;
  align-items: start;
}

.analyses__card {
  position: relative;
  border-radius: 18px;
  background: #0c1629;
  /* overflow тут НЕТ намеренно: картинка-график в макете выходит за шапку
     вверх и вниз (сосед шапки, а не её содержимое), обрезка её съедала.
     Скругление верхних углов держит сама шапка своим border-radius. */
}

.analyses__head {
  position: relative;
  z-index: 2;            /* картинка должна лежать поверх списка под шапкой */
  border-radius: 18px 18px 0 0;
  /* в макете левый паддинг заголовков/списков карточки — 28px, не 32 (одинаково
     во всех блоках карточки — единая сетка отступов). Заголовок прижат к верху
     шапки, а не к центру — иначе он наезжает на пилюлю "получить список" снизу */
  padding: 26px 28px;
  min-height: 138px;
  display: flex;
  align-items: flex-start;
  background: linear-gradient(69.28deg, #bfd6fc 25.5%, #5c83c3 48.2%);
}

/* В макете правая шапка залита ровным #ff777b, но по просьбе заказчика она
   получает такой же градиент, как левая — те же угол и стопы, своя пара цветов. */
.analyses__head--pink {
  background: #FF777B;
}

.analyses__head h3 {
  max-width: 70%;
  /* в макете эта шапка набрана Inter Display Medium, а не Arimo, как крупные заголовки */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 27px);
  letter-spacing: -0.02em;
  color: #fff;
}

/* у розовой шапки нет иконки справа — тексту можно отдать почти всю ширину,
   иначе заголовок переносится на 2 строки и наезжает на пилюлю снизу */
.analyses__head--pink h3 {
  max-width: 92%;
}

/* картинка-график в шапке карточки — в макете 249×189 (не квадрат 110×110) и
   прижата к правому краю карточки заподлицо, а не с отступом 16px */
/* только прямой потомок: внутри шапки лежит ещё и ссылка «Получить полный
   список» со своей стрелкой — она подхватывала absolute и улетала из плашки */
.analyses__head > img {
  position: absolute;
  right: 0;
  top: -21px;
  width: clamp(120px, 17.3vw, 249px);
  height: clamp(91px, 13.1vw, 189px);
  object-fit: contain;
}

.analyses__more {
  position: absolute;
  left: 28px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid #fff;
  border-radius: 13px;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}

.analyses__more img {
  /* тот же шеврон вправо, что у остальных ссылок (10×16), без поворота */
  width: 7px;
  height: 11px;
  filter: brightness(0) invert(1);
}

.analyses__list {
  padding: 37px 28px 28px;
  display: flex;
  flex-direction: column;
  /* в макете строка от строки — 54px (высота строки 26 + 28 промежуток), а не 18 */
  gap: 28px;
}

.analyses__list li {
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 21px);
  letter-spacing: -0.02em;
}

.analyses__prep {
  padding: 37px 28px;
  display: flex;
  flex-direction: column;
  /* в макете строки идут через 48px: высота строки 18 + промежуток 30 */
  gap: 30px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

/* блок "Остались вопросы?" в макете лежит просто на фоне секции (без своей
   карточки-подложки) с большим отступом сверху от карточки подготовки (63px) */
.analyses__ask {
  margin-top: 63px;
  padding: 0 28px;
}

.analyses__ask h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.analyses__ask p {
  margin-top: 13px;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.7);
  max-width: 340px;
}

.analyses__ask .lnd-btn {
  margin-top: 51px;
  padding: 18px 32px;
  font-size: 16px;
}

/* ============================================================
   8.1. Наши специалисты — переопределение для landing-1: у первого врача
   (Греков Евгений) в макете красная подложка карточки, у остальных — светлая
   (см. общий .lnd-doc__photo в common.css). Фото — вырезка с прозрачным фоном,
   поэтому подложка видна по краям кадра.
   ============================================================ */

.doc--accent .lnd-doc__photo {
  background: linear-gradient(160deg, #ff6d71, var(--red) 70%);
}

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

.whyus {
  text-align: center;
  overflow-x: hidden;
}

.whyus__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}

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

.whyus__lead img:not(.whyus__dots) {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 2;
    transform: rotateY(180deg) scale(1.5);
    right: -19%;
    top: 25%;
}

/* тонировка поверх фото — как в карточке "Как проходит лечение": blend на
   отдельной заливке поверх фото, а не на самом фото — иначе (mix-blend-mode
   на img + непрозрачность 0.35) фигура человека стиралась в сплошной синий
   силуэт и переставала читаться как "мужчина в чёрной майке" */
.whyus__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 {
  position: absolute;
  z-index: 2;
  left: 9.5%;
  top: 6%;
  width: 88%;
  height: 87%;
  object-fit: contain;
  opacity: 0.9;
}

.whyus__lead strong {
  position: relative;
  z-index: 3;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(40px, 4.1vw, 59px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.whyus__lead span {
  position: relative;
  z-index: 3;
  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;
}

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

/* В макете правая колонка делится не пополам: светлая плитка 218px,
   тёмная 335px при общей высоте 573 (как у левой карточки) и зазоре 20.
   Отсюда доли роста 218 и 335 — сумма ровно равна свободному месту. */
.whyus__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);
  overflow: visible;
}

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

.whyus__stat strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(34px, 4.1vw, 59px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* отдельный класс, а не просто span: внутри плитки лежит ещё плашка
   лицензии со своим span, и общий селектор ломал ей выкладку в строку */
.whyus__cap {
  display: block;
  margin-top: clamp(14px, 1.8vw, 26px);
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* в тёмной плитке подпись прижата вниз распоркой, отступ сверху лишний */
.whyus__stat--dark .whyus__cap {
  margin-top: 0;
}

/* "Лицензия" — в макете переехала в карточку "16+", а не лежит на фото */
.whyus__license {
  position: absolute;
  right: 48px;
  top: 51px;
}

/* Металлический приз — фон коллажа мини-отзывов в карточке "95%".
   Координаты из макета: 270×270 в плитке 690×335, почти вплотную к низу. */
.whyus__prize {
  position: absolute;
  right: 13.3%;
  bottom: 2.2%;
  width: 39.2%;
  aspect-ratio: 1;
  object-fit: contain;
  /* кубок лежит между отзывами: перекрывает нижний угол первой карточки,
     но сам уходит под вторую — порядок слоёв взят из макета */
  z-index: 2;
}

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

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

/* правым краем вровень с плиткой: 1412.9 + наклон = 1420.5 при её границе 1420 */
.reviews__card.whyus__note--2 {
  z-index: 3;
  left: 70.13%;
  top: 46.7%;
  transform: rotate(6.33deg);
}

/* ============================================================
   10. Отзывы / видео-отзывы
   ============================================================ */

.reviews {
  text-align: center;
}

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

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

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

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

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

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

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

.reviews__video img.reviews__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

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

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

.reviews__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reviews__stars {
  height: 14px;
  width: auto;
}

.reviews__tag {
  height: 10px;
  width: auto;
}

.reviews__tag--pd {
  height: 14px;
}

.reviews__card h4 {
  margin-top: 18px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.reviews__card p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--dark);
}

.reviews__card a {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--grey-text);
}

/* мини-версия карточки — вложенные отзывы в блоке "Почему выбирают нас" (.whyus__note),
   позиция/поворот/размер задаются классами .whyus__note(--1/--2), тут только "скин" */
/* размеры «скина» — те же, что у мини-карточек в этом блоке на landing-3:
   плитка «95%» в обоих лендингах одинаковая, и карточки в ней должны совпадать */
.reviews__card--mini {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(2, 13, 32, 0.14);
}

.reviews__card--mini .reviews__stars { height: 9px; }
.reviews__card--mini .reviews__tag { height: 7px; }
.reviews__card--mini .reviews__tag--pd { height: 9px; }

.reviews__card--mini h4 {
  margin-top: 6px;
  margin-bottom: 5px;
  font-size: 11px;
}

/* четыре строки, а не пять: плитка «95%» на телефоне ниже фигмовских 335px,
   пятая строка вылезала за карточку */
.reviews__card--mini p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0;
  font-size: 8px;
  line-height: 1.3;
  color: rgba(2, 13, 32, 0.7);
}

.reviews__card--mini a {
  margin-top: 4px;
  font-size: 8px;
}

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

@media (max-width: 1279px) {
  .symptoms__grid,
  .ages__grid { grid-template-columns: repeat(2, 1fr); }
  /* карточки встали в два ряда — выноска от линейки дотянулась бы через весь
     верхний ряд, поэтому ниже 1280px убираем и линию, и саму линейку:
     без выносок штрихи ни на что не указывают и читаются как случайная полоса */
  .ages__card::before { display: none; }
  .ages__scale { display: none; }
  /* сетка налезала на линейку отрицательным полем — без линейки возвращаем обычный отступ */
  .ages__grid { margin-top: 32px; }

  /* на планшете заголовку и приписке тесно в одну строку — переносим приписку под заголовок */
  .symptoms__head { flex-direction: column; gap: 12px; }
  .symptoms__note { margin-top: 0; max-width: 100%; }
  .analyses__grid { grid-template-columns: 1fr; }

  /* мини-карточки отзывов в блоке "95%" — на этой ширине им уже тесно,
     минимальная ширина базового .reviews__card тут не нужна */
  .whyus__note { min-width: 130px; }
}

@media (max-width: 1023px) {
  .header { padding-top: 20px; }

  /* меню уезжает в белую выпадающую панель — белые ссылки, нужные поверх
     тёмного первого экрана, там становятся невидимыми */
  .header .lnd-header__nav a { color: var(--dark); }
  .header .lnd-header__nav a:hover { color: var(--red); }

  /* На планшете/мобильном карточка-плашка на 49.7% ширины уже не помещается рядом с фото —
     возвращаемся к схеме "фото на всю ширину + градиент-подложка", прижатой к низу кадра */
  .hero__content {
    position: relative;
    z-index: 1;
    left: auto; top: auto; bottom: auto;
    width: auto;
    max-width: 100%;
    padding: 48px 28px;
    border: none;
    border-radius: 0;
    background: none;
    display: block;
  }
  .hero__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,13,32,0.35) 0%, rgba(2,13,32,0.88) 65%);
  }
  .hero__frame { display: flex; align-items: flex-end; min-height: 520px; }
  /* на мобильном .hero__content — block, margin-top:auto тут не толкает
     блок вниз (это работает только во flex-контейнере) — возвращаем обычный отступ */
  .hero__actions { margin-top: 40px; }

  /* на планшете левой колонке текста и правому коллажу фото+карточек уже тесно
     в 43%/57% — переключаем в столбик */
  .errors__grid { grid-template-columns: 1fr; }
  /* сетка ужимается по ширине, а смещения стопки — нет: при 38/77 дальняя
     плашка вылезала за правый край блока */
  .errors__layer--2 { --shift-x: 24px; --shift-y: -24px; }
  .errors__layer--3 { --shift-x: 48px; --shift-y: -48px; }
  .errors__intro { padding-top: 0; }
  .errors__side { margin-top: 40px; }

  .process__grid { flex-direction: column; }
  /* в колонке flex-basis становится высотой: 380px основы плюс min-height 420
     раздували синюю плашку в пустое поле на пол-экрана */
  .process__photo { flex: 0 0 auto; min-height: 220px; }

  .whyus__grid { grid-template-columns: 1fr; }
  .whyus__lead { padding-bottom: 24px; }
  .reviews__card.whyus__note { min-width: 150px; }
  /* колонки встали друг под друга — высота больше не задана рядом сетки,
     доли 218/335 при нулевой основе схлопнули бы плитки в паддинги */
  .whyus__stat,
  .whyus__stat--dark { flex: 0 0 auto; }
  /* плитке 200px мало: коллаж отзывов вылезал бы за нижний край */
  .whyus__stat--dark { min-height: 300px; }

  /* коллаж отзывов на планшете — уже, но ещё умещается процентной сеткой;
     карточки/видео немного крупнее относительно текста, сокращаем мин-ширину */
  .reviews__card { min-width: 190px; }
}

@media (max-width: 767px) {
  /* На узких экранах коллаж отзывов (макет — коллаж вразброс) переключаем
     в обычный вертикальный поток, как разрешено в ТЗ для адаптива */
  .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)
     теряет превью как систему координат и уезжает вниз коллажа */
  .reviews__video { order: 1; position: relative; }
  .reviews__card { order: 2; }

  /* два видео-превью встают в один ряд: по одному на строку они занимали
     пол-экрана каждое, а картинке хватает и половины ширины */
  .reviews__collage {
    flex-flow: row wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
  }

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

  .reviews__video {
    flex: 0 0 calc(50% - 7px);
    max-width: calc(50% - 7px);
    border-radius: 14px;
    opacity: 1; /* наведения на телефоне нет — блёклое превью ни к чему */
  }

  .reviews__play { width: 38px; height: 38px; }

  /* заголовок блока: 32px на 390px давали восемь строк */
  .reviews__lead { font-size: 24px; }
  .reviews__sub { font-size: 15px; white-space: normal; }
}

@media (max-width: 659px) {
  .symptoms__grid,
  .ages__grid { grid-template-columns: 1fr; }

  /* совсем узкий экран — заголовку в одну строку не хватает ширины, разрешаем перенос
     (иначе горизонтальный скролл страницы) */
  .symptoms__title { white-space: normal; }

  .hero__actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__place { bottom: 16px; right: 16px; }

  .diagram__card { padding: 36px 16px 0; }
  .diagram__body { max-width: 100%; }
  .diagram__badge { padding: 8px 14px; font-size: 13px; }
  /* "настроение" и "память" на узком экране вылезали за скруглённую карточку
     (overflow:hidden молча обрезал текст на середине слова) — сдвигаем внутрь */
  .diagram__badge--mood { left: 68%; }
  .diagram__badge--memory { left: 76%; }

  .analyses { padding: 28px 16px; }
  .analyses__head h3,
  .analyses__head--pink h3 { max-width: 100%; }
  .analyses__head > img { display: none; }
  .analyses__more { position: static; margin-top: 16px; }
  .analyses__head { flex-direction: column; align-items: flex-start; }

  .process__photo h2 { padding: 28px; }

  /* совсем узкий экран — фото и карточка "Ошибка" больше не накладываются
     (иначе карточке остаётся ~60% от 350px = нечитаемо), идут в столбик */
  .errors__grid { aspect-ratio: auto; }
  .errors__intro { position: static; width: 100%; }
  .errors__side { position: static; }
  .errors__visual { position: static; }
  .errors__photo { position: static; width: 100%; height: auto; aspect-ratio: 524 / 510; margin-top: 40px; }
  /* колонки встали друг под друга — стопка занимает всю ширину, плашки-хвостики
     на узком экране только мешали бы, поэтому их прячем */
  /* стопка остаётся и на узком экране — только смещение хвостиков вдвое меньше,
     иначе дальняя плашка вылезала бы за край экрана */
  .errors__card {
    position: relative;
    /* left/top остались бы от абсолютной раскладки и сдвинули бы карточку
       вправо на полэкрана — при relative они тоже работают */
    left: auto;
    top: auto;
    width: calc(100% - 44px);
    height: auto;
    margin-top: 76px;
  }
  .errors__layer--2 { --shift-x: 22px; --shift-y: -22px; }
  .errors__layer--3 { --shift-x: 44px; --shift-y: -44px; }
  .errors__stack { height: auto; }
  .errors__box { height: auto; min-height: 280px; padding: 28px; }
  /* на узком экране карточке хватает ширины — не держим ту же узкую пропорцию, что на 1440 */
  .errors__box h3 { max-width: 100%; margin-top: 24px; }
  .errors__text { max-width: 100%; margin-top: 20px; }

  .whyus__grid { grid-template-columns: 1fr; }
  /* на телефоне коллаж уезжает под текст, поэтому подпись возвращается под
     число, а не прижимается к низу плитки, как на широком экране */
  .whyus__stat--dark {
    justify-content: flex-start;
    min-height: 300px;
    padding-bottom: 120px;
  }
  /* подпись держим в левой колонке — карточки отзывов начинаются с 40% ширины */
  .whyus__stat--dark .whyus__cap { margin-top: 14px; max-width: 38%; }
  .reviews__card.whyus__note { position: absolute; min-width: 130px; }
  /* коллаж опускается под число с подписью — на узкой плитке он иначе ложится
     прямо на текст, места по горизонтали для них двоих уже нет */
  .reviews__card.whyus__note--1 { top: 28%; }
  /* правая карточка прижата к краю плитки: процент от узкой ширины уводил её за экран */
  .reviews__card.whyus__note--2 { left: auto; right: 3%; top: 30%; }
  /* кубок уходит за карточки отзывов, как на широком экране, а не лежит под ними */
  .whyus__prize { width: 34%; right: 8%; bottom: 8%; z-index: 1; }

  /* Плитка «5000+»: 573px высоты — полтора экрана на телефоне, а снимок
     (width:100% + scale(1.5)) перекрывал текст. Приводим к тем же размерам,
     что и на landing-3: снимок прижат к правому нижнему углу без масштаба */
  .whyus__lead { min-height: 360px; }
  .whyus__lead img:not(.whyus__dots) {
    /* та же посадка, что в этом блоке на landing-3: снимок прижат к правому
       нижнему углу, ширина — своя, от высоты, без масштабирования и зеркала */
    inset: auto 0 0 auto;
    width: auto;
    height: 85%;
    object-position: center bottom;
    transform: none;
  }
  .whyus__lead strong,
  .whyus__lead span { max-width: 60%; }

  /* карточка врача: высоту не задаём числом — у снимка уже есть пропорция
     из common.css, фиксированный height схлопывал бы его ширину в слайде */
  .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; }
}

/* На 320px кнопка «Записаться» (162px) вместе с логотипом и бургером не влезала
   в строку шапки — бургер выдавливало за экран и появлялся горизонтальный скролл */
@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; }
}