/*
  Общий компонент «CTA-карточка с фото» — вёрстка/стили одни на оба места,
  где он встречается (consult-cta на главной, catalog-cta на каталоге, см.
  components/cta-card.njk). Числа, которые реально различаются между
  использованиями (высота карточки, кроп фото, ширины текстовых блоков),
  вынесены в CSS-переменные с дефолтами здесь и переопределены точечно на
  классах-модификаторах ниже (.consult-cta/.catalog-cta) — тот же приём,
  что у --heading-gradient-angle в heading-gradient.css. Правка общей
  вёрстки/паддингов/шрифтов — здесь, правка конкретных чисел — в блоке
  модификатора конкретного места использования.
*/
.cta-card {
  --cta-card-min-height: 625px;
  --cta-card-media-left: max(790px, 38%);
  --cta-card-object-position: 50% 50%;
  --cta-card-gradient-stop: 55%;
  --cta-card-heading-max-width: 780px;
  --cta-card-features-max-width: 800px;
  --cta-card-description-max-width: 550px;

  /* Тот же фон, что у соседних блоков (иначе виден шов) — карточка внутри
     обёрнута белой обводкой и залита слегка другим оттенком (--color-cta-bg). */
  background: var(--color-solutions-bg);
  padding: 0 30px 75px;
}

.cta-card__card {
  position: relative;
  display: flex;
  max-width: var(--wide-content-width);
  min-height: var(--cta-card-min-height);
  margin-inline: auto;
  overflow: hidden;
  border: 10px solid var(--color-surface);
  border-radius: 50px;
  background: var(--color-cta-bg);
}

/* left вместо width: на узких ("ноутбучных") ширинах карточки фикс.
   max-width текстовой колонки не успевает сжаться вместе с %-шириной
   фото — последняя плашка-фича заезжает на фото. overflow:hidden —
   обрезка контейнера, чтобы img (object-position) и градиент (::after,
   тот же inset:0 box) всегда были в одной раме, без шва. */
.cta-card__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--cta-card-media-left);
  overflow: hidden;
  pointer-events: none;
}

.cta-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cta-card-object-position);
}

/* Градиент — на CSS, не запечён в файл: рамка фото здесь резиновая,
   запечённый в конкретную рамку градиент съезжает при пересчёте под
   другие пропорции — на CSS он всегда точно по границе живого box. */
.cta-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(246, 245, 248, 0) var(--cta-card-gradient-stop), var(--color-cta-bg) 100%);
}

.cta-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* max-width задан на heading/features/description отдельно, а не тут —
     иначе он складывается с padding и текстовая колонка становится уже
     макета (см. аналогичный фикс в value-prop.css).

     ВАЖНО: padding-left здесь НЕ убран, хотя по общей системе ширин
     (tokens.css, шаг 5) padding-left:75 обычно
     заменяется на центрирование через width+margin-inline:auto. Здесь это
     не применимо: .cta-card__content — flex-item внутри display:flex
     .cta-card__card без flex-grow, т.е. сжимается по контенту (shrink-to-fit)
     и всегда стоит вплотную к левому краю .cta-card__card — со своим
     padding-left это даёт нужный отступ от рамки карточки, без него текст
     утыкается в рамку (проверено реальным рендером на 1440px — без
     padding-left отступ реально пропадал). Сама .cta-card__card уже
     центрирована и ограничена --wide-content-width (см. Шаг 4 выше) — этого
     достаточно для широких экранов, доп. центрирование контента внутри
     не требуется. */
  padding: 65px 40px 75px 75px;
}

.cta-card__eyebrow {
  margin: 0 0 16px;
  font-size: var(--cta-card-eyebrow-fs, var(--fs-section-subtitle));
  line-height: var(--lh-section-subtitle);
  font-weight: var(--cta-card-eyebrow-fw, var(--fw-semibold));
  color: var(--color-accent);
}

/* Сам градиент — общий класс .heading-gradient (heading-gradient.css),
   тут только вёрстка макета этого конкретного заголовка. */
.cta-card__heading {
  margin: 0 0 24px;
  max-width: var(--cta-card-heading-max-width);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.cta-card__intro {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

/* border-radius на обёртке + object-fit:cover на <img> — защита на случай,
   если редактор в WP загрузит обычное прямоугольное фото без готового
   альфа-круга (оно растянется/сплющится в рамку 80×91 иначе). */
.cta-card__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 91px;
  overflow: hidden;
  border-radius: 50%;
}

.cta-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-card__description {
  margin: 0;
  max-width: var(--cta-card-description-max-width);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-cta-ink);
}

/* Вариант без блока avatar+description (cta.avatar не задан) — описание
   идёт сразу после заголовка, со своим отступом снизу вместо .cta-card__intro. */
.cta-card__description--standalone {
  margin-bottom: 30px;
}

.cta-card__features {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--cta-card-features-max-width);
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.cta-card__feature {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 59px;
  padding: 0 15px;
  border-radius: 25px;
  background: var(--cta-card-pill-bg, var(--color-cta-pill-bg));
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-cta-ink);
  white-space: nowrap;
}

/* Белая pill-подложка позади кнопки+email. Ширину не фиксируем (текст
   email придёт из админки и может быть длиннее/короче — плашка тянется
   по контенту). Высота — min-height, не height: emailPrefix + email не
   ограничены по длине; если текст перенесётся на 2 строки, плашка должна
   вырасти вместе с ним, а не обрезать/вытолкнуть текст за свои пределы. */
.cta-card__actions {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 90px;
  margin-top: auto;
  padding: 0 30px 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.cta-card__actions .btn {
  flex-shrink: 0;
}

.cta-card__email {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  color: var(--color-cta-ink);
}

.cta-card__email a {
  color: var(--color-accent);
  transition: opacity 0.2s ease;
}

.cta-card__email a:hover {
  opacity: 0.75;
}

/* Модификатор — CTA консультации на главной (159:3419, сквозной, будет
   ещё на нескольких страницах). */
.consult-cta {
  --cta-card-min-height: 685px;
  --cta-card-media-left: max(790px, 38%);
  --cta-card-object-position: 79% 50%;
  --cta-card-gradient-stop: 53.08%;
  --cta-card-heading-max-width: 815px;
  --cta-card-features-max-width: 815px;
  --cta-card-description-max-width: 599px;
}

/* Модификатор — CTA «оставьте заявку» на каталоге (159:4724). Свой,
   независимый блок (другой текст/фото, без avatar) — но та же общая
   вёрстка/CSS компонента, см. components/cta-card.njk. */
.catalog-cta {
  --cta-card-min-height: 625px;
  --cta-card-media-left: max(900px, 65%);
  --cta-card-object-position: 50% 8%;
  --cta-card-gradient-stop: 60%;
  --cta-card-heading-max-width: 780px;
  --cta-card-features-max-width: 800px;
  --cta-card-description-max-width: 511px;
}

/* Модификатор — CTA «оставьте заявку» товарной страницы (159:3947,
   Frame 43). Текст/фичи/кнопка — идентичны .catalog-cta (тот же
   «Оставьте заявку» / «Подберем оптимальную конфигурацию» / «Запросить
   звонок», см. _data/productPage.json), но своё фото (другой инженер,
   другая композиция света).

   Геометрия фото выведена из абсолютных офсетов узла 159:3948 (right:-272px,
   width:960px внутри карточки 1380px) — видимое окно кропа после обрезки
   overflow:hidden = [692px..1380px] (ширина 688px), отсюда media-left =
   692/1380 ≈ 50%. Стоп-точка градиента (69.74% в локальных координатах
   960px-фото, direction "to left") пересчитана в те же координаты видимого
   окна — 57.76%. --heading-gradient-angle и цвет плашек-фич — свои, другие,
   чем у .consult-cta/.catalog-cta (даже при похожем на первый взгляд оттенке
   — заводим отдельные переменные, не переиспользуем «примерно такие же»).

   media-left считается от ПРАВОГО края (calc(100% - 700px)), а не в %
   от левого — с %-формулой на широких мониторах окно кропа расширяется
   вместе с картой, фото приходится зумить сильнее для object-fit:cover,
   и при object-position:bottom это обрезает голову инженера сверху.
   Фикс. ширина окна (~700px, тот же порядок, что и расчётные 688px на
   макетной ширине) держит масштаб фото постоянным на любой ширине. */
.product-cta {
  --heading-gradient-angle: 113.39deg;
  --cta-card-min-height: 625px;
  --cta-card-media-left: max(692px, calc(100% - 700px));
  --cta-card-object-position: 50% 100%;
  --cta-card-gradient-stop: 57.76%;
  --cta-card-heading-max-width: 815px;
  --cta-card-features-max-width: 815px;
  --cta-card-description-max-width: 511px;
  --cta-card-pill-bg: #ebe9ef;
}

/* Модификатор — финальный контактный CTA сервисной страницы (159:5397,
   Frame 43, «Опишите ситуацию»). Без features (гарантится guard'ом в
   cta-card.njk — блок в _data/servicePage.json их просто не задаёт).
   Эйбрау здесь крупнее/жирнее обычного (19px/700, не 15px/600 по
   умолчанию) — сверено с фактическим стилем узла 159:5401 в Figma. */
.service-contact-cta {
  --heading-gradient-angle: 130.86deg;
  --cta-card-eyebrow-fs: var(--fs-step-title);
  --cta-card-eyebrow-fw: var(--fw-bold);
  --cta-card-min-height: 566px;
  --cta-card-media-left: max(700px, 33%);
  --cta-card-object-position: 65% 100%;
  --cta-card-gradient-stop: 62.4%;
  --cta-card-heading-max-width: 815px;
  --cta-card-description-max-width: 511px;
}

/* Без features margin-top:auto на .cta-card__actions тянет кнопку в
   самый низ карточки вместо места сразу под описанием (в Figma, 159:5397,
   там нет фич-плашек, съедающих высоту, как у .consult-cta/.catalog-cta).
   justify-content:center + равные padding-top/bottom на content — тот же
   отступ сверху/снизу независимо от высоты контента. */
.service-contact-cta .cta-card__content {
  justify-content: center;
  padding-top: 70px;
  padding-bottom: 70px;
}

.service-contact-cta .cta-card__actions {
  margin-top: 0;
}

/* В Figma (159:5397) заголовок идёт ДО эйбрау — обратный порядок
   относительно .consult-cta/.catalog-cta/.product-cta. Родитель
   .cta-card__content уже flex-column, order переставляет визуально
   без правки общего макроса cta-card.njk. */
.service-contact-cta .cta-card__heading {
  order: 1;
}

.service-contact-cta .cta-card__eyebrow {
  order: 2;
}

.service-contact-cta .cta-card__description {
  order: 3;
}

.service-contact-cta .cta-card__actions {
  order: 4;
}

/*
  Мобильная адаптация .consult-cta и .catalog-cta (600px, база 390px).
  Числа текста/фич/кнопки+email у catalog-cta почти буквально совпадают с
  уже реализованными числами consult-cta (блок «CTA» макета) — общие
  правила объединены в селектор `.consult-cta X, .catalog-cta
  X`, различается только карточка (высота) и фото (геометрия/градиент
  полностью свои — у catalog-cta это широкая полоса снизу, не угловой
  круг). У catalog-cta нет аватара (см. cta-card.njk — intro-ветка не
  рендерится без cta.avatar), поэтому .cta-card__intro/.cta-card__avatar
  остаются только в .consult-cta. .product-cta (блок 7 макета) добавлен
  третьим в те же общие
  селекторы, где числа буквально совпадают (карточка 370×1109 — то же,
  что у .catalog-cta; заголовок 28/42, описание 13/24, фичи-плашки
  rgba(232,229,238,.5)/300×59, блок кнопка+email 300×150 — везде те же
  числа, что уже у .consult-cta/.catalog-cta). Различается
  только высота карточки уже совпадает с catalog (не нужен свой селектор)
  и геометрия/градиент фото — у product-cta это своя широкая полоса снизу
  (right:-234/width:678/height:622, но bottom:0, не -212, и без аватара —
  eyebrow тут по центру, чего нет у .consult-cta/.catalog-cta, — отдельное
  правило ниже). .service-contact-cta (блок 8 макета)
  добавлен в общие селекторы там, где числа буквально совпадают (карточка/
  паддинги/типографика описания/кнопка+email pill) — без features и без
  intro/avatar (гард в cta-card.njk их не рендерит). Своя геометрия: высота
  карточки 808 (не 1109/1223), фото — полоса на всю ширину снизу со своим
  фейдом только сверху и своим border-radius на нижних углах (30, не общий
  card-radius 40), заголовок крупнее — 32/46, не 28/42, как у остальных
  трёх (десктопный спец-увеличенный эйбрау — сброшен обратно на дефолт).

  Структурная перестройка (аватар над описанием вместо рядом, фото карточки
  снизу вместо сбоку, кнопка+email в столбик вместо строки) — везде только
  CSS (flex-direction/позиционирование), разметка cta-card.njk не менялась.
*/
@media (max-width: 599.98px) {
  .consult-cta.cta-card,
  .catalog-cta.cta-card,
  .product-cta.cta-card,
  .service-contact-cta.cta-card {
    padding: 0 min(10px, calc(10 / 390 * 100vw)) min(10px, calc(10 / 390 * 100vw));
  }

  .consult-cta .cta-card__card,
  .catalog-cta .cta-card__card,
  .product-cta .cta-card__card,
  .service-contact-cta .cta-card__card {
    /* Фикс. на 390-базе выше 390px (370-плашка, не резиновая ширина
       вплоть до 600) — margin-inline:auto уже есть в базовом правиле
       .cta-card__card выше, здесь только переопределяем ограничитель. */
    max-width: min(370px, calc(370 / 390 * 100vw));
    border-radius: min(40px, calc(40 / 390 * 100vw));
    justify-content: center;
  }

  .consult-cta .cta-card__card {
    min-height: min(1223px, calc(1223 / 390 * 100vw));
  }

  .catalog-cta .cta-card__card,
  .product-cta .cta-card__card {
    min-height: min(1109px, calc(1109 / 390 * 100vw));
  }

  .service-contact-cta .cta-card__card {
    min-height: min(808px, calc(808 / 390 * 100vw));
  }

  .consult-cta .cta-card__media {
    display: block;
    top: auto;
    left: auto;
    right: min(-10px, calc(-10 / 390 * 100vw));
    bottom: min(-10px, calc(-10 / 390 * 100vw));
    width: min(476px, calc(476 / 390 * 100vw));
    height: min(476px, calc(476 / 390 * 100vw));
  }

  .consult-cta .cta-card__media::after {
    background: linear-gradient(to top, rgba(246, 245, 248, 0) 66.8%, var(--color-cta-bg) 98.4%);
  }

  /* Фото инженера — широкая горизонтальная полоса снизу карточки (не
     угловой круг, как у .consult-cta). bottom (не top) — картинка должна
     оставаться прижатой к низу карточки, даже если карточка вырастет от
     более длинного текста из будущей WP-админки (та же поправка уже
     применялась на товарной странице). */
  .catalog-cta .cta-card__media {
    display: block;
    top: auto;
    left: auto;
    right: min(-234px, calc(-234 / 390 * 100vw));
    bottom: min(-232px, calc(-232 / 390 * 100vw));
    width: min(678px, calc(678 / 390 * 100vw));
    height: min(622px, calc(622 / 390 * 100vw));
  }

  /* object-position-x — НЕ 50% (не центр источника): сверено пиксельным
     сопоставлением с реальным рендером узла 226:5248 в Figma (шаблон
     370×400 наложен на масштабированный по высоте (622px) исходник
     1024×860 в диапазоне сдвигов, минимум SSD — 110px из 371 возможных
     ≈ 29.6%). При 50% кроп сдвинут вправо относительно Figma — меньше
     фона слева, инженер визуально «раздут»/занимает больше кадра по
     ширине, чем в макете (жалоба пользователя на «сплющенное» фото). */
  .catalog-cta .cta-card__media img {
    object-position: 30% 100%;
  }

  .catalog-cta .cta-card__media::after {
    background: linear-gradient(to top, rgba(246, 245, 248, 0) 85.852%, var(--color-cta-bg) 100%);
  }

  /* Фото товарной страницы — своя композиция (широкая полоса снизу, как у
     .catalog-cta, блок 7 макета; геометрия .consult-cta__media НЕ подходит
     буквально).

     top (не bottom) — тот же приём, что уже применён у
     .service-contact-cta выше: в макете контейнер фото стоит от top:699
     от верха карточки при размере 678×622, т.е. выходит за её нижний край
     (699+622=1321 против внутренней высоты 1109-20=1089) и нижние ~232px
     срезаются overflow:hidden карточки. При bottom:0 контейнер вместо
     этого притягивался вверх ровно на эти 232px (верх фото оказывался на
     467 вместо 699) — фото заезжало под описание/фичи/кнопку. */
  /* Размер — НЕ 678×622 из макета: это размер рамки Figma-узла, а сама
     картинка внутри неё в макете уменьшена относительно cover, тогда как
     CSS object-fit:cover растягивает фото на всю рамку (человек выходил в
     ~1.6 раза крупнее макета — голова 174px против ~108px). 433×388
     подобраны сравнением кропов с макетом по трём признакам: высота
     головы ~108px, левый край фигуры ~85px от внутреннего края карточки,
     верх головы ~50px ниже белой pill-плашки. 433/388 = 1.117 совпадает с
     пропорцией исходника 1396×1250 — cover при этих числах ничего не
     режет, фото видно целиком, обрезает только нижний край карточки
     (~30px), как в макете. Если правится дальше — менять пару
     width/height, сохраняя отношение 433/388, и подгонять top под те же
     ~50px над головой.
     right — через max(), значение отрицательное (та же поправка к формуле;
     min() у отрицательных чисел в
     соседних правилах этого файла — старая ошибка, не повторять). */
  .product-cta .cta-card__media {
    display: block;
    top: min(731px, calc(731 / 390 * 100vw));
    left: auto;
    right: max(-47px, calc(-47 / 390 * 100vw));
    bottom: auto;
    width: min(433px, calc(433 / 390 * 100vw));
    height: min(388px, calc(388 / 390 * 100vw));
  }

  .product-cta .cta-card__media::after {
    background: linear-gradient(to top, rgba(246, 245, 248, 0) 85.852%, var(--color-cta-bg) 100%);
  }

  /* Фото блока «Опишите ситуацию» — полоса на всю ширину карточки снизу
     (226:6219, 594×396 в исходных координатах узла, здесь — во всю ширину
     карточки, как задано в макете), со своим border-radius на нижних
     углах (30, отдельно от общего card-radius 40 — те же 30px, что и у
     остальных «плашек» этой страницы). Фейд — только сверху (в отличие от
     catalog/product-cta, где тонкая полоса у самого верха фото, здесь
     стоп ниже — фейд закрывает большую часть фото, ближе к переходу в
     текст цитаты).

     top (не bottom) — в Figma фото — прямой потомок карточки (226:6219,
     top:462 от паддинг-края рамки, то же координатное пространство, что и
     top-значения heading/eyebrow/description этого блока) и продолжается
     НИЖЕ видимой области карточки (462+396=858 против внутренней высоты
     788 = 808 - 2×10 рамки) — нижние ~70px обрезаются overflow:hidden у
     .cta-card__card. Это даёт то же намеренное небольшое наложение
     кнопки+email на верх фото, что и в макете (кнопка заканчивается на
     338+150=488 от паддинг-края, что в системе координат border-box —
     той же, что даёт getBoundingClientRect, — соответствует 462+10=472:
     наложение ~16px). При bottom:0 это наложение было в разы больше (после
     фикса вертикального ритма выше кнопка доходит до ~488, а фото при
     bottom:0 начиналось бы только с ~412 border-box) — сама карточка
     выглядела «сломанной» из-за этого рассинхрона, отсюда и жалоба
     пользователя на блок целиком. */
  .service-contact-cta .cta-card__media {
    display: block;
    top: min(462px, calc(462 / 390 * 100vw));
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: min(396px, calc(396 / 390 * 100vw));
    border-radius: 0 0 min(30px, calc(30 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
  }

  /* Кроп фото — сверен с локальным ассетом (1536×1024, то же соотношение
     3:2/1.5, что и у узла 226:6219 в Figma: 594/396=1.5) через тот же
     расчёт object-position, что и у service-checklist__media: рамка шире
     контейнера, левый край в Figma уходит на -234px от паддинг-края при
     594px ширине против 350px видимой области — это соответствует
     object-position-x ≈ 96% (почти полностью правый край источника),
     не оставленному от десктопного варианта 65%. */
  .service-contact-cta .cta-card__media img {
    object-position: 96% 50%;
  }

  /* Стоп прозрачности — 79%, не 21%: при `to top` отсчёт идёт от НИЗА фото,
     поэтому «фейд только на верхних 21%» из макета в этой записи означает
     стоп на 79%. С 21% заливка фоном шла от низа+21% до самого верха и
     съедала 79% высоты фото. Соседние модификаторы того же компонента —
     фейд 14% (.catalog-cta/.product-cta) и ~31% (.consult-cta). */
  .service-contact-cta .cta-card__media::after {
    background: linear-gradient(to top, rgba(246, 245, 248, 0) 79%, var(--color-cta-bg) 100%);
  }

  .consult-cta .cta-card__content,
  .catalog-cta .cta-card__content,
  .product-cta .cta-card__content,
  .service-contact-cta .cta-card__content {
    align-items: center;
    max-width: none;
    padding: min(35px, calc(35 / 390 * 100vw)) min(25px, calc(25 / 390 * 100vw)) min(35px, calc(35 / 390 * 100vw)) min(25px, calc(25 / 390 * 100vw));
  }

  .consult-cta .cta-card__eyebrow,
  .catalog-cta .cta-card__eyebrow,
  .product-cta .cta-card__eyebrow,
  .service-contact-cta .cta-card__eyebrow {
    margin-bottom: min(10px, calc(10 / 390 * 100vw));
  }

  /* Десктопный спец-увеличенный эйбрау (--fs-step-title/--fw-bold, см.
     правило .service-contact-cta выше) на мобильном возвращается к
     обычному размеру CTA-карточек — сброс к дефолтам компонента. */
  .service-contact-cta {
    --cta-card-eyebrow-fs: var(--fs-section-subtitle);
    --cta-card-eyebrow-fw: var(--fw-semibold);
  }

  /* Только у .product-cta эйбрау центрируется на мобильном (у
     .consult-cta/.catalog-cta своя мобильная раскладка эйбрау не менялась
     от базовой — не трогаем их, добавляем правило только для этого
     модификатора). */
  .product-cta .cta-card__eyebrow {
    text-align: center;
  }

  .consult-cta .cta-card__heading,
  .catalog-cta .cta-card__heading,
  .product-cta .cta-card__heading,
  .service-contact-cta .cta-card__heading {
    max-width: min(300px, calc(300 / 390 * 100vw));
    margin-bottom: min(20px, calc(20 / 390 * 100vw));
    overflow-wrap: break-word;
    text-align: center;
    font-size: min(28px, calc(28 / 390 * 100vw));
    line-height: min(42px, calc(42 / 390 * 100vw));
  }

  /* Заголовок этого блока крупнее общего мобильного размера CTA-карточек
     (32/46, не 28/42) — переопределяет только эти два свойства поверх
     общего блока выше. */
  .service-contact-cta .cta-card__heading {
    font-size: min(32px, calc(32 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
  }

  .consult-cta .cta-card__intro {
    flex-direction: column;
    align-items: center;
    gap: min(10px, calc(10 / 390 * 100vw));
    margin-bottom: min(15px, calc(15 / 390 * 100vw));
  }

  .consult-cta .cta-card__avatar {
    width: min(60px, calc(60 / 390 * 100vw));
    height: min(60px, calc(60 / 390 * 100vw));
    border-radius: 0 0 min(40px, calc(40 / 390 * 100vw)) min(40px, calc(40 / 390 * 100vw));
  }

  .consult-cta .cta-card__description,
  .catalog-cta .cta-card__description,
  .product-cta .cta-card__description,
  .service-contact-cta .cta-card__description {
    max-width: min(300px, calc(300 / 390 * 100vw));
    text-align: center;
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(24px, calc(24 / 390 * 100vw));
  }

  /* У .consult-cta описание идёт в паре с аватаром (.cta-card__intro,
     margin-bottom задан там же), у .catalog-cta/.product-cta/
     .service-contact-cta аватара нет (см. _data/productPage.json,
     _data/servicePage.json → cta без поля avatar) — описание рендерится
     через cta-card__description--standalone (см. cta-card.njk), ей нужен
     свой отступ вниз (у service-contact-cta — до кнопки+email, фич нет). */
  .catalog-cta .cta-card__description--standalone,
  .product-cta .cta-card__description--standalone,
  .service-contact-cta .cta-card__description--standalone {
    margin-bottom: min(30px, calc(30 / 390 * 100vw));
  }

  .consult-cta .cta-card__features,
  .catalog-cta .cta-card__features,
  .product-cta .cta-card__features {
    align-items: center;
    flex-direction: column;
    max-width: none;
    gap: min(10px, calc(10 / 390 * 100vw));
    margin-bottom: min(20px, calc(20 / 390 * 100vw));
  }

  .consult-cta .cta-card__feature,
  .catalog-cta .cta-card__feature,
  .product-cta .cta-card__feature {
    justify-content: center;
    width: min(300px, calc(300 / 390 * 100vw));
    height: min(59px, calc(59 / 390 * 100vw));
    border-radius: min(25px, calc(25 / 390 * 100vw));
    background: rgba(232, 229, 238, 0.5);
    font-size: min(15px, calc(15 / 390 * 100vw));
    color: var(--color-cta-ink);
  }

  .consult-cta .cta-card__actions,
  .catalog-cta .cta-card__actions,
  .product-cta .cta-card__actions,
  .service-contact-cta .cta-card__actions {
    flex-direction: column;
    align-self: center;
    gap: 0;
    width: min(300px, calc(300 / 390 * 100vw));
    min-height: min(150px, calc(150 / 390 * 100vw));
    margin-top: 0;
    padding: min(10px, calc(10 / 390 * 100vw));
    border-radius: min(35px, calc(35 / 390 * 100vw));
  }

  .consult-cta .cta-card__actions .btn,
  .catalog-cta .cta-card__actions .btn,
  .product-cta .cta-card__actions .btn,
  .service-contact-cta .cta-card__actions .btn {
    width: 100%;
  }

  .consult-cta .cta-card__email,
  .catalog-cta .cta-card__email,
  .product-cta .cta-card__email,
  .service-contact-cta .cta-card__email {
    margin-top: min(10px, calc(10 / 390 * 100vw));
    font-size: min(13px, calc(13 / 390 * 100vw));
    line-height: min(25px, calc(25 / 390 * 100vw));
  }

  /*
    .service-contact-cta — точечные переопределения ПОВЕРХ общих правил
    выше (объявлены последними в файле нарочно, чтобы выиграть каскад при
    равной специфичности — общие селекторы .consult-cta X, ..., .service-
    contact-cta X выше уже один раз задают padding/margin-bottom/max-width
    для этих же элементов, более ранняя позиция здесь проигрывала бы им).

    Десктопное .cta-card__content{justify-content:center} (правило без
    media-guard в блоке .service-contact-cta выше, для 159:5397, где фото
    карточки сбоку на всю высоту, а не под текстом) утекало и на мобильный:
    контент вертикально центрировался во всей высоте карточки (808px)
    вместо того, чтобы начинаться сразу под отступом сверху — отсюда
    большой пустой отступ над заголовком и рассинхрон с фото/кнопкой ниже
    (общая жалоба пользователя «блок полностью сломан»). Общее мобильное
    padding (общий блок выше) уже сбрасывает 70/70 на 35/25/35/25, но не
    трогает justify-content.

    Остальные значения — точный вертикальный ритм по 226:6175 (заголовок→
    эйбрау 10px, эйбрау→описание 20px, описание→кнопка+email 45px),
    отличается от общих 20/10/30px у .consult-cta/.catalog-cta/.product-cta.
  */
  .service-contact-cta .cta-card__content {
    justify-content: flex-start;
    padding-top: min(40px, calc(40 / 390 * 100vw));
  }

  .service-contact-cta .cta-card__heading {
    margin-bottom: min(10px, calc(10 / 390 * 100vw));
  }

  .service-contact-cta .cta-card__eyebrow {
    margin-bottom: min(20px, calc(20 / 390 * 100vw));
  }

  /* 280px (не общий 300px) — источник другого переноса строк в описании,
     сверено с шириной текстового узла 226:6180 в Figma. */
  .service-contact-cta .cta-card__description {
    max-width: min(280px, calc(280 / 390 * 100vw));
  }

  .service-contact-cta .cta-card__description--standalone {
    margin-bottom: min(45px, calc(45 / 390 * 100vw));
  }
}