/* cl_common.css — общие переиспользуемые правила Claude для лендингов rss.group.
   cl = Claude. Классы префикс cl-, тематики в именах НЕТ (лендинги на разные темы).
   Подключается абсолютной ссылкой ПОСЛЕ index.css → корректно переопределяет её.
   Правило файла: за каждую строку понимаем, что и зачем делаем. Не дублировать index.css. */

/* --- Первый экран: прижать H1 к hero (только ПК) ---
   .section__wrapper по умолчанию = padding: var(--section-padding) 0.
   На ПК (>=1241px) --section-padding = 6rem → сверху 6rem, H1 проваливается вниз под hero.
   Уменьшаем ТОЛЬКО верхний отступ и ТОЛЬКО на ПК. Мобилу (<=1240px) не трогаем:
   правило живёт внутри min-width медиазапроса, поэтому на мобиле его как будто нет. */
@media (min-width: 1241px) {
  .cl-wrapper--tight-top { padding-top: 3rem; } /* 6rem -> 3rem, только десктоп */
}

/* --- Утилита переноса строки только на ПК ---
   <br class="cl-br-pc"> — принудительный перенос виден на ПК (>=1241px) и скрыт на мобиле,
   где текст переносится сам. Нужна, чтобы верстать «красивые» переносы заголовков/лидов
   на десктопе, не ломая мобильную ширину (обычно смотрим 360px). */
.cl-br-pc { display: none; }
@media (min-width: 1241px) {
  .cl-br-pc { display: inline; }
}

/* --- Утилита переноса строки только на узких экранах ---
   Зеркало .cl-br-pc: <br class="cl-br-sm"> виден на планшете и мобиле (<=1240px),
   на ПК скрыт. Нужна там, где в узкой колонке строка ломается сама, но в непредсказуемом
   месте: одни подписи влезают в строку, другие нет, и ряд карточек читается рваным.
   Явный перенос делает разбивку одинаковой у всех. */
.cl-br-sm { display: inline; }
@media (min-width: 1241px) {
  .cl-br-sm { display: none; }
}

/* --- Подсветка ключевой выгоды в тексте: жирный + фирменный синий ---
   <span class="cl-hl">…</span>. Для акцента на выгодах в лидах/абзацах на любом лендинге. */
.cl-hl { font-weight: 700; color: var(--color-accent); }

/* --- Телефон-строка (иконка + номер) ---
   Нужна на всех лендингах. Разметка: <div class="cl-phone"> SVG {{global.phoneFull}} </div>.
   CMS-переменная {{global.phoneFull}} разворачивается в ЦЕЛУЮ ссылку
   <a href="tel:..." class="phoneFull"><b>+7 (…)</b></a> — свой <a> НЕ оборачивать,
   стилизуем внутренний тег (.cl-phone a / .phoneFull). */
.cl-phone { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-accent); }
.cl-phone a, .cl-phone .phoneFull {
  font-size: var(--title-size-subheadline);
  font-weight: 700; letter-spacing: -.01em;
  color: var(--color-accent); text-decoration: none;
}
.cl-phone a:hover, .cl-phone .phoneFull:hover { color: var(--color-accent-hover); }
.cl-phone b { font-weight: 700; }

/* --- Кнопка закрытия попапа (крестик): читаемость на любом фоне ---
   Штатная кнопка = полупрозрачный белый круг + белый крестик: на тёмном фоне видна,
   а на светлом (напр. фото товара в шапке попапа) сливается и пропадает.
   Делаем круг почти непрозрачным белым (+ мягкая тень/кромка, чтобы белое читалось
   даже на белом), а крестик — тёмным. Тогда кнопка видна и на тёмном, и на светлом.
   !important — базовое правило темы может иметь бóльшую специфичность. */
.popup__close {
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  border: 1px solid rgba(0, 0, 0, .08);
}
.popup__close:hover { background: #fff !important; }
/* Крестик тёмный: sprite-иконка красится fill, currentColor — на случай stroke-иконки. */
.popup__close svg, .popup__close .icon {
  color: var(--color-dark);
  fill: var(--color-dark);
}

/* ============================================================================
   ФИКС ТЕМЫ: видимость ошибки валидации
   index.js вешает на .form-input класс .has-error, но в index.css правил для него
   НЕТ — невалидный телефон никак не подсвечивался, поле молча не отправлялось.
   Правим здесь: файл грузится после index.css и общий для всех лендингов.
   ========================================================================= */
.form-input.has-error .form-input__item  { border-bottom-color: #E14848; }
.form-input.has-error .form-input__label { color: #E14848; }

/* ============================================================================
   РАСКЛАДКИ
   ========================================================================= */

/* --- Двухколоночный блок «текст + медиа» ---
   В теме такого компонента нет: штатный .section__content--middle кладёт заголовок
   и картинку строго друг под другом. Здесь на ПК — две равные колонки по центру,
   на мобиле — обычный вертикальный стек (grid без явных колонок).
   minmax(0,1fr) вместо 1fr: иначе длинное слово в колонке распирает сетку. */
.cl-split { display: grid; gap: var(--section-spacer-middle, 2rem); }
@media (min-width: 1241px) {
  .cl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  /* Картинка слева, текст справа — при этом в разметке текст остаётся первым,
     чтобы на мобиле он читался до фото, а не после. */
  .cl-split--reverse > *:first-child { order: 2; }
  /* Выравнивание по верху вместо центра: нужно, когда колонки сильно разной высоты
     и центрирование заставляет короткую «висеть» посередине длинной. */
  .cl-split--top { align-items: start; }
}

/* --- Строка «кнопка + телефон» ---
   Повторяется у каждого призыва к действию. flex-wrap: на узком экране телефон
   переносится под кнопку сам, без отдельного медиазапроса. */
.cl-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }

/* --- Отступ контента от заголовка секции ---
   Штатный .section__header раздвигает только СВОИХ детей (gap). Блок, который идёт
   после него соседом, прилипает к заголовку вплотную. Берём ту же величину, что
   тема использует между заголовком и текстом, — контент не липнет и остаётся
   в общей шкале отступов. */
.section__header + .cl-tiles,
.section__header + .cl-features,
.section__header + .cl-person-grid,
.section__header + .cl-split,
.section__header + .cl-check,
.section__header + .cl-stats,
.section__header + .cl-callout,
.section__header + .cl-figure,
.section__header + .slider { margin-top: var(--section-header-spacer-base); }

/* --- Пропорции для .section-img ---
   Штатный .section-img--big = 56.25% (16:9) на ПК, но 130% на ≤1240px: горизонтальное
   фото на мобиле обрезается до портрета. Эти модификаторы задают пропорцию явно.
   Правила продублированы в медиазапросе намеренно: одноклассовая специфичность равна
   штатной, и полагаться только на порядок подключения файлов — хрупко. */
.cl-img--16x9 { padding-bottom: 56.25%; }
.cl-img--1x1  { padding-bottom: 100%; }
.cl-img--3x4  { padding-bottom: 133%; }
/* Скруглённые углы фотографии. overflow обязателен: картинка внутри абсолютная
   и без него вылезала бы за скругление прямыми углами. */
.cl-img--round { border-radius: 1.25rem; overflow: hidden; }
@media (max-width: 1240px) {
  .cl-img--16x9 { padding-bottom: 56.25%; }
  .cl-img--1x1  { padding-bottom: 100%; }
  .cl-img--3x4  { padding-bottom: 133%; }
}

/* --- Встроенное видео ---
   Пропорция держится padding-bottom, iframe растягивается по ней: плеер сам
   размер не задаёт, а фиксированная высота ломала бы вёрстку на узких экранах.
   Тёмная подложка — чтобы до загрузки плеера не белел прямоугольник. */
.cl-video { position: relative; width: 100%; padding-bottom: 56.25%; background: var(--color-dark); border-radius: 1.25rem; overflow: hidden; }
/* Квадрат — под ролики, снятые вертикально на телефон: в 16:9 от кадра остаётся
   узкая полоса посередине, и понять, что происходит, нельзя. */
.cl-video--1x1 { padding-bottom: 100%; }
/* Прозрачная кнопка поверх кадра, её ставит initVideoPoster из cl_common.js.
   Нижние 3rem не накрыты — там панель управления плеера. */
.cl-video__play {
  position: absolute; left: 0; top: 0; right: 0; bottom: 3rem;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.cl-video iframe,
.cl-video video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
/* ЗНАЕМ И НЕ ЧИНИМ: на живом iOS Safari плеер Rutube внутри iframe уезжает влево,
   обложка срезается слева, а справа остаётся полоса фона контейнера (~18px на 390px).
   Проверено: наша коробка ни при чём — в WebKit и в Chromium iframe совпадает
   с контейнером до пикселя на всех ширинах. Дефект внутри чужого плеера, стилями
   до него не дотянуться. Обход width:1px + min-width:100% пробовали — не помогает.
   Воспроизвести инструментами нельзя: Rutube отдаёт автоматизированному браузеру
   заглушку вместо плеера. Решение Бориса 2026-07-30 — оставить как есть.
   Если однажды понадобится убрать: свой постер + загрузка iframe по клику. */

/* --- Фон-заглушка под изображение ---
   Пока в слоте лежит временная картинка (или она ещё грузится), видно ровный
   светлый прямоугольник, а не «битую» иконку и не прыжок вёрстки. */
.cl-ph { background: var(--color-white-dark); }

/* --- Фотополоса во всю ширину экрана ---
   Стоит между секциями самостоятельным элементом: своей секции и своих отступов
   у неё нет, поэтому верх полосы точно совпадает с нижней границей предыдущего
   блока и фото читается как его продолжение, а не как отдельная картинка. */
.cl-band { display: block; width: 100%; overflow: hidden; }
.cl-band img { display: block; width: 100%; height: auto; }

/* Полоса с параллаксом темы. Штатный ParallaxEffect делает картинку абсолютной
   и растягивает на контейнер, поэтому высоту обязан задавать сам контейнер —
   иначе он схлопнется в ноль вместе с полосой. Пропорция задаётся отношением
   сторон конкретного файла, поэтому значение живёт на странице, а не здесь.
   Разметка: .cl-band .cl-band--parallax .parallax-container + img.parallax-img */
.cl-band--parallax { position: relative; }
.cl-band--parallax img { height: 100%; }

/* ============================================================================
   СПИСКИ И ПЛИТКИ
   ========================================================================= */

/* --- Чек-лист «галочка + текст» --- */
.cl-check { display: grid; gap: 1.25rem; }
.cl-check__item { display: flex; align-items: flex-start; gap: .875rem; }
.cl-check__mark {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--color-accent); display: flex; align-items: center; justify-content: center;
}
/* Галочки в sprite.svg нет — маркер рисуется инлайновым polyline. */
.cl-check__mark svg { width: .9rem; height: .9rem; fill: none; stroke: #fff; stroke-width: 2.5; }
/* Тот же круг, но с цифрой — для нумерованных перечислений. Геометрия наследуется. */
.cl-check__mark--num { color: #fff; font-weight: 700; font-size: .875rem; line-height: 1; }

/* --- Плитки «иконка + заголовок + текст» ---
   auto-fit: число колонок подбирается под ширину, отдельные брейкпоинты не нужны. */
.cl-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.cl-feature {
  background: var(--color-white-dark); border-radius: 1rem; padding: 1.75rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.cl-feature__ic {
  width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; border-radius: .625rem;
  background: var(--color-accent); display: flex; align-items: center; justify-content: center;
}
.cl-feature__ic svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: #fff; stroke-width: 2; }
/* Без подложки: нужен на секциях со светло-серым фоном, где заливка плитки
   сливается с фоном секции. Заодно текст встаёт на общую вертикаль страницы —
   внутренний отступ плитки его сдвигал. */
.cl-features--plain .cl-feature { background: none; padding: 0; }
/* Фотография внутри сетки плиток: занимает всю строку целиком. Лежит в той же
   сетке, а не отдельным блоком, — тогда расстояние от неё до плиток задаёт тот же
   gap, что и между самими плитками, и подгонять отступ руками не нужно.
   Радиус берём у .cl-feature, а не у .cl-img--round: фото стоит вплотную к плиткам,
   и разные скругления по соседству сразу заметны. overflow обязателен — картинка
   внутри абсолютная и без него вылезла бы за скругление прямыми углами. */
.cl-features__media { grid-column: 1 / -1; border-radius: 1rem; overflow: hidden; }

/* --- Акцентная панель-рамка --- */
.cl-callout {
  background: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  text-align: center;
}
.cl-callout__title { max-width: 40rem; }
/* Мягкий вариант: заливка вместо акцентной рамки. Для панелей, которые не должны
   спорить за внимание с основными призывами ниже по странице. */
.cl-callout--soft { background: var(--color-white-dark); border: none; }
/* Панель с содержимым по левому краю: нужна, когда внутри не короткий призыв,
   а полноценный блок с текстом и медиа. */
.cl-callout--left { align-items: stretch; text-align: left; }
.cl-callout--left > * { width: 100%; }
/* Панель центрирует заголовок и текст через align-items/text-align, но строка
   «кнопка + телефон» — свой flex-контейнер: без justify-content её содержимое
   липнет к левому краю, как только панель шире содержимого. У варианта --left
   левый край как раз и нужен, поэтому правило только для обычной панели. */
.cl-callout:not(.cl-callout--left) .cl-cta-row { justify-content: center; }

/* --- Крупные цифры-достижения --- */
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; }
.cl-stat { display: flex; flex-direction: column; gap: .25rem; }
.cl-stat__num { color: var(--color-accent); }
.cl-stat__label { color: var(--color-grey); }

/* ============================================================================
   КАРТОЧКИ
   ========================================================================= */

/* --- Сетка карточек «фото + название + цена» ---
   Сетка, а не слайдер: в слайдере при ширине контейнера видно ~3 карточки,
   остальные позиции пользователь не увидит, если не догадается листать. */
.cl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
/* Радиус и тень — как у карточек сайта (person-card из about.css).
   Плюс тонкая обводка: на белом фоне одной лишь мягкой тени не хватает, карточка
   сливается с полотном и перестаёт читаться как отдельный объект.
   Цвет #E4E4ED — единственный цвет границ во всей теме, свой не выдумываем. */
.cl-tile {
  display: flex; flex-direction: column;
  background: var(--color-white); border-radius: 1rem; overflow: hidden;
  border: 1px solid #E4E4ED;
  box-shadow: 7px 1px 9px 0 rgba(197, 197, 197, .1);
  transition: .25s border-color, .25s box-shadow;
}
/* На наведении карточка слегка выделяется — подсказывает, что она кликабельна. */
.cl-tile:hover { border-color: var(--color-accent-light); box-shadow: 0 .5rem 1.25rem rgba(46, 59, 78, .10); }
.cl-tile__img { position: relative; padding-bottom: 75%; background: var(--color-white-dark); }
.cl-tile__img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* Боковые поля одинаковые, интервалы внутри разные: цена держится ближе к названию
   (это одна мысль — что за услуга и почём), а кнопка отделена заметнее. */
.cl-tile__body { flex-grow: 1; display: flex; flex-direction: column; padding: 1.25rem 2.5rem 1.875rem; }
.cl-tile__title { letter-spacing: -.01em; }
/* Цена идёт сразу под названием, а к низу прижимается кнопка: так пустое место
   от разной длины названий собирается в одном месте, а не разрывает карточку
   между названием и ценой. Кнопки при этом всё равно встают на одну линию. */
/* margin-bottom, а не margin-top у кнопки: у кнопки стоит auto, чтобы она
   прижималась к низу и кнопки всех карточек вставали на одну линию. Отступ снизу
   у цены задаёт минимальный зазор, а auto добирает остаток. */
.cl-tile__price { margin-top: .375rem; margin-bottom: 1.25rem; color: var(--color-accent); font-weight: 700; }
.cl-tile__body > .button { margin-top: auto; }
/* Для позиций без фиксированной цены («по запросу») — приглушённый вариант. */
.cl-tile__price--muted { color: var(--color-grey); font-weight: 500; }
@media (max-width: 1240px) {
  .cl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  /* Боковые поля меньше десктопных: на планшете 40px по краям съедали бы
     половину узкой карточки и названия услуг ломались бы по слогам. */
  .cl-tile__body { padding: 1rem 1.25rem 1.25rem; }
}
/* На телефоне — одна карточка в ряд: в две колонки фото и название ужимаются
   до нечитаемых, а названия услуг разваливаются на четыре строки. */
@media (max-width: 640px) {
  .cl-tiles { grid-template-columns: 1fr; }
}

/* --- Карточка человека ---
   Реплика person-card из about.css: на лендингах эта таблица стилей не подключена,
   поэтому правила воспроизведены здесь. Пропорция фото 118% — как в теме. */
.cl-person-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cl-person { display: flex; flex-direction: column; }
.cl-person__wrapper {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 1rem; overflow: hidden; background: var(--color-white);
  /* Рамка обязательна: карточка стоит на белом полотне, одной мягкой тени мало —
     без обводки она перестаёт читаться как отдельный объект. Цвет #E4E4ED —
     единственный цвет границ во всей теме, свой не выдумываем. */
  border: 1px solid #E4E4ED;
  box-shadow: 7px 1px 9px 0 rgba(197, 197, 197, .1);
}
.cl-person__img { position: relative; padding-bottom: 118%; background: var(--color-white-dark); }
.cl-person__img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-person__content {
  flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;
  gap: .875rem; padding: 1rem 1rem 1.5rem;
}
.cl-person__title { line-height: 1.56; letter-spacing: -.01em; }
@media (max-width: 640px) {
  .cl-person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .cl-person__content { padding: .75rem .75rem 1rem; }
  /* В две колонки фамилия и имя почти всегда встают в две строки, и штатный
     интерлиньяж 1.56 разводит их так далеко, что читаются как разные строки
     списка. 1.25 — та же величина, что тема даёт заголовкам в узких блоках. */
  .cl-person__title { line-height: 1.25; }
}

/* --- Тарифная карточка --- */
.cl-plans { display: grid; gap: 1rem; }
@media (min-width: 1241px) { .cl-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-plan {
  background: var(--color-white); border: 1px solid #E4E4ED; border-radius: 1rem;
  padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem;
}
.cl-plan--accent { border-color: var(--color-accent); }
.cl-plan__price { color: var(--color-accent); }
.cl-plan__note { color: var(--color-grey); }

/* --- Скан документа (портретный, целиком) ---
   Своя геометрия, а не .section-img: скан нельзя кропать, он должен быть виден
   полностью, поэтому object-fit: contain на светлой подложке. */
.cl-doc {
  position: relative; width: 15rem; padding-bottom: 128%;
  background: var(--color-white-dark); border-radius: .75rem; overflow: hidden;
}
.cl-doc img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) { .cl-doc { width: 11rem; } }

/* ============================================================================
   ФОРМА ВНЕ ПОПАПА
   ========================================================================= */

/* Штатный .application-popup рассчитан на попап: ширина 31.875rem, а на ≤1240px
   жёстко 23.5rem (376px) — в секции это выходит за пределы экрана 360px.
   Здесь ширина резиновая с потолком. Правило продублировано в медиазапросе:
   специфичность со штатным одинаковая, полагаться на порядок файлов ненадёжно.
   Обработчик отправки общий для всех .s-form и делегированный, поэтому вторая
   форма на странице не требует ни своего JS, ни правок попапа. */
.cl-form-section { width: 100%; max-width: 31.875rem; box-shadow: 0 .5rem 2rem rgba(46, 59, 78, .10); }
@media (max-width: 1240px) { .cl-form-section { width: 100%; } }

/* ============================================================================
   ФИКС ТЕМЫ: CTA-баннер на узком экране
   Штатно картинка баннера — абсолютный фон, и на мобиле текст на неё налезает.
   Переносим картинку в поток под текст.
   ========================================================================= */
@media (max-width: 640px) {
  .cl-cta-banner { padding-bottom: 0; }
  .cl-cta-banner .estimate-banner__wrapper { display: flex; flex-direction: column; padding: 1.25rem 1rem; }
  .cl-cta-banner .estimate-banner__content { order: 1; gap: 1.5rem; }
  /* relative, НЕ static: у .button--gradient заливка сделана абсолютными ::before/::after,
     при static они всплывают до .estimate-banner__wrapper и заливают синим весь блок. */
  .cl-cta-banner .estimate-banner__button { position: relative; top: auto; left: auto; width: 100%; }
  .cl-cta-banner .estimate-banner__bg {
    position: static; order: 2; display: block; width: 100%; height: auto; margin-top: 1.25rem;
  }
  .cl-cta-banner .estimate-banner__bg img {
    position: static; width: 100%; height: auto; object-fit: contain; border-radius: .75rem;
  }
}

@media (max-width: 1240px) {
  .cl-callout { padding: 1.75rem 1.25rem; }
  .cl-feature { padding: 1.25rem; }
}

/* ============================================================================
   ПРЕЛЕНДИНГ
   Короткая страница-статья: у неё одно действие — переход на основной лендинг,
   формы на ней нет. Отсюда три требования, которых нет у обычного лендинга:
   заголовок обязан читаться в первом экране на ЛЮБОЙ ширине, текст должен
   держать ритм статьи, а финальная кнопка — быть самым заметным объектом
   страницы. Компоненты ниже закрывают ровно это.
   ========================================================================= */

/* --- Обложка: фотография с заголовком поверх ---
   Штатный .hero текст поверх фото тоже умеет (.hero__content), но на ≤1240px
   тема его скрывает: на главной там лежит логотип, который на телефоне не нужен.
   Прелендингу заголовок нужен именно в первом экране и именно на телефоне —
   человек приходит с креатива и должен увидеть его текст сразу, без прокрутки.
   Поэтому обложка своя.
   Фон --color-dark: пока картинка не загрузилась, белый текст лежит на тёмном,
   а не на белом. */
.cl-cover { position: relative; overflow: hidden; background: var(--color-dark); }
.cl-cover__media { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cl-cover__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Два затемнения на одной подложке. Снизу — под заголовок: белый текст на
   светлом небе или бетоне нечитаем. Сверху — под шапку сайта: .header у темы
   position: absolute и лежит ПОВЕРХ первого экрана, у штатного .hero ровно для
   этого есть свой градиент сверху (.hero-bg::before). */
.cl-cover__media::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 22%, rgba(0, 0, 0, 0) 40%),
    linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .45) 35%, rgba(0, 0, 0, .05) 70%, rgba(0, 0, 0, 0) 100%);
}
/* Высоты — те же, что у .hero__wrapper темы: обложка встаёт в общий ритм сайта.
   На телефоне чуть ниже штатных 27.5rem, чтобы под кадром осталось начало текста:
   видимое продолжение говорит, что страницу надо листать. */
.cl-cover__body {
  position: relative; z-index: 2; height: 36.25rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 3rem;
}
@media (max-width: 1240px) { .cl-cover__body { height: 27.5rem; padding-bottom: 2rem; } }
@media (max-width: 640px)  { .cl-cover__body { height: 24rem; } }
.cl-cover__title { color: var(--color-white); }
/* Подзаголовок белый, но приглушённый: два одинаково белых блока текста подряд
   читаются как один абзац, и заголовок перестаёт быть заголовком. */
.cl-cover__sub { margin-top: 1rem; color: rgba(255, 255, 255, .88); }

/* --- Вводный абзац ---
   Крупнее основного текста: в статье первый абзац отвечает за то, дочитают ли
   остальное. Отдельного размера в теме нет, берём соседнюю ступень шкалы. */
.cl-lede { font-size: var(--title-size-middle); line-height: 1.5; }

/* --- Фотография с подписью ---
   Подпись — статейный элемент: рядом с кадром помещается факт, которому в тексте
   пришлось бы отдавать отдельный абзац. Величина отступа и цвет — как у подписей
   в карточках темы, свой серый не вводим. */
.cl-figure__caption {
  margin-top: .75rem; color: var(--color-grey);
  font-size: var(--text-size-subtitle); line-height: 1.4;
}

/* --- Врезка ---
   Вытащенная из текста фраза, на которой держится вся страница. Полоса слева —
   акцентная: врезка обязана отличаться от абзаца ещё до чтения. */
.cl-pull {
  border-left: .25rem solid var(--color-accent); padding-left: 1.5rem;
  font-size: var(--title-size-subheadline); font-weight: 700; line-height: 1.3;
}
@media (max-width: 640px) { .cl-pull { padding-left: 1rem; } }

/* --- Кнопка перехода ---
   Ставится ВМЕСТЕ с классами темы: button button--base button--gradient.
   Своего цвета и своей геометрии не заводим — только увеличиваем штатную кнопку
   до размера, который на прелендинге оправдан: она здесь единственное действие,
   и всё остальное на странице ведёт к ней.
   5rem = шаг шкалы (80px), ширина ограничена шириной колонки текста. */
.cl-btn-xl {
  height: 5rem; width: min(100%, 30rem);
  font-size: var(--title-size-small); gap: .75rem;
  /* Свечение цветом самой кнопки: она отрывается от белого полотна, но не
     превращается в чужеродный объект — цвет тот же --color-accent. */
  box-shadow: 0 .75rem 2rem rgba(31, 96, 194, .35);
  animation: cl-btn-breathe 2.8s ease-in-out infinite;
  transition: .2s transform;
}
/* Стрелка внутри кнопки. На наведении уходит вправо — движение подсказывает,
   что нажатие ведёт на другую страницу, а не открывает форму.
   z-index обязателен: у .button--gradient заливка сделана абсолютными ::before/::after
   с z-index 2 и 3, и всё, что не подняли выше, оказывается ПОД ней. Тема поднимает
   только .button__text (z-index 4) — своя иконка иначе просто не видна. */
.cl-btn-xl svg {
  position: relative; z-index: 4;
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; transition: .25s transform;
  animation: cl-btn-arrow 1.6s ease-in-out infinite;
}
/* Стрелка покачивается вдоль своей оси. Ход маленький (6px) и по горизонтали:
   вертикальное или крупное движение внутри кнопки читается как дребезг вёрстки,
   а сдвиг вправо-влево — как «здесь переход». */
@keyframes cl-btn-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(.375rem); }
}
/* Под курсором качание останавливаем и фиксируем стрелку сдвинутой: два движения
   одновременно (своё и от наведения) спорят друг с другом — transform у элемента
   один, и анимация перебивала бы hover. */
.cl-btn-xl:hover svg { animation: none; transform: translateX(.25rem); }
/* Кнопка чуть приподнимается под курсором — привычная подсказка, что элемент живой.
   Двух пикселей достаточно: больший сдвиг читается как скачок вёрстки. */
.cl-btn-xl:hover { transform: translateY(-2px); }
/* Дыхание тени, без движения самой кнопки: сдвиг или масштаб на статичной
   странице читается как дефект вёрстки, а меняющаяся тень — как подсветка. */
@keyframes cl-btn-breathe {
  0%, 100% { box-shadow: 0 .75rem 2rem rgba(31, 96, 194, .35); }
  50%      { box-shadow: 0 .75rem 2.75rem rgba(31, 96, 194, .6); }
}
@media (max-width: 1240px) {
  .cl-btn-xl { height: 4rem; width: 100%; font-size: var(--text-size-base); }
}
/* Системная настройка «меньше движения» — уважаем: пульсация в ней запрещена. */
@media (prefers-reduced-motion: reduce) {
  .cl-btn-xl { animation: none; transition: none; }
  .cl-btn-xl:hover { transform: none; }
  .cl-btn-xl svg { animation: none; transition: none; }
}

/* Подпись под кнопкой: снимает вопрос «что будет, если нажму». */
.cl-jump-note { margin-top: .25rem; color: var(--color-grey); font-size: var(--text-size-subtitle); }