/* Стили только для новых блоков этой LP (hero, бонус-стрип, кейсы, счётчик).
   Существующие компоненты сайта (.lic-tab, .plan-ticket, .faq-*, .terms и т.д.)
   не переопределяются — используются как есть из css/style.css. */
.promo-hero { padding: 60px 0 50px; background: linear-gradient(180deg, #eef9f3 0%, #fff 100%); }
/* Хлебные крошки скрыты визуально по решению продукта, но микроразметка
   BreadcrumbList остаётся в DOM для SEO (п.8 требований — не удалять). */
.promo-hero .article-hero__breadcrumbs { display: none; }
.promo-hero__grid { display: flex; align-items: center; gap: 40px; }
.promo-hero__box { flex: 0 0 42%; max-width: 42%; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(20, 41, 94, .15); }
.promo-hero__box img { display: block; width: 100%; height: auto; }
.promo-hero__info { flex: 1 1 auto; padding-left: 15px; }
/* Картинка героя по высоте текстовой колонки справа — низ совпадает с низом
   кнопки "Получить подарок" без margin-bottom (у кнопки высота фиксирована,
   60px/line-height:60px в css/style.css, своего leading у неё нет — align-items:
   stretch у .promo-hero__grid сам подгоняет .promo-hero__box вровень). Сверху
   остаётся небольшой зазор — не баг вёрстки, а типографский leading самого
   шрифта: .promo-hero__title strong набран заглавными буквами с line-height:1.2,
   и над видимой буквой у строчной коробки есть немного пустого места, которого
   нет у картинки — компенсируется через margin-top ниже. Сноска-дисклеймер
   вынесена из .promo-hero__info отдельным абзацем под всей сеткой — иначе
   колонка стала бы выше кнопки, и картинка потянулась бы за ней. Только на
   десктопе — на мобильном (≤767px) блоки идут друг под другом, подгонять
   высоту под соседний блок не нужно. */
@media only screen and (min-width: 768px) {
    .promo-hero__grid { align-items: stretch; }
    /* img — position:absolute (не height:100% у элемента в потоке): с img в потоке
       его собственные пропорции участвуют в расчёте "гипотетической" высоты
       .promo-hero__box ДО применения stretch, из-за чего margin на самой коробке
       считался некорректно и низ картинки уезжал за кнопку. Абсолютно
       позиционированный img из этого расчёта исключён — .promo-hero__box
       стретчится ровно по высоте .promo-hero__info без побочных эффектов. */
    .promo-hero__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
    .promo-hero__box { margin-top: 10px; }
}
.promo-hero__title { font-size: 40px; line-height: 1.2; margin: 0 0 14px; font-family: 'Open Sans Light', sans-serif; }
.promo-hero__title strong { font-family: 'Open Sans Bold', sans-serif; font-weight: normal; text-transform: uppercase; }
.promo-hero__title-line2 { display: inline-block; font-size: 32px; }
.promo-hero__lead { font-size: 18px; line-height: 1.5; color: #41464f; max-width: 560px; margin: 0 0 22px; }
.promo-hero__lead-highlight { text-decoration: underline; text-underline-offset: 2px; }
@media only screen and (min-width: 1200px) {
    .promo-hero__title-line2 { white-space: nowrap; }
    .promo-hero__lead-line1 { white-space: nowrap; }
    .promo-hero__lead-line2 { white-space: nowrap; }
}
.promo-hero__usp { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.promo-hero__usp li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-family: 'Open Sans SemiBold', sans-serif; color: #333; }
.promo-hero__usp-check { flex-shrink: 0; color: #009975; font-family: 'Open Sans Bold', sans-serif; font-weight: normal; }
.promo-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 22px; }
.promo-hero__link { color: #3a4258; font-size: 15px; font-family: 'Open Sans Bold', sans-serif; border-bottom: 1px dashed #b6bac4; padding-bottom: 2px; }
.promo-hero__link:hover { color: #00694f; border-color: #00694f; }
.promo-countdown { display: flex; gap: 11px; }
.promo-countdown__item { background: #fff; border: 1px solid #e3e3e3; border-radius: 9px; width: 68px; height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.promo-countdown__value { display: block; font-family: 'Open Sans Bold', sans-serif; font-size: 26px; color: #009975; line-height: 1.1; }
.promo-countdown__label { display: block; font-size: 12px; color: #858585; text-transform: uppercase; margin-top: 3px; }
/* Состояние после окончания акции — подставляется через className, а не через
   style-атрибут в JS-шаблоне (п.4.2 требований — без инлайн-стилей). */
.promo-countdown__ended { width: auto; height: auto; padding: 8px 16px; }

.case-block { background: #fff; padding: 70px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
.case-block .section-title { text-align: center; }
.case-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.case-rail__btn { border: 1px solid #e0e2e8; background: #fff; color: #4a5064; font-family: 'Open Sans SemiBold', sans-serif; font-size: 14px; padding: 10px 20px; border-radius: 30px; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.case-rail__btn:hover { border-color: #454d66; color: #454d66; }
.case-rail__btn.is-active { background: #454d66; border-color: #454d66; color: #fff; }
.case-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 32px; align-items: start; margin-top: 36px; }
.case-shot { border: 1px solid #e3e3e3; border-radius: 12px; background: #f7f7f7; overflow: hidden; position: sticky; top: 16px; }
.case-shot img { display: block; width: 100%; height: auto; }
.case-panel { display: none; flex-direction: column; background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 36px 40px; min-height: 495px; }
.case-panel.is-active { display: flex; }
.case-panel p { font-size: 15.5px; line-height: 1.65; color: #4a5064; margin: 0 0 14px; }
.case-panel p:last-of-type { margin-bottom: 0; }
.case-fn { font-family: 'Open Sans Bold', sans-serif; font-weight: normal; text-decoration: underline; }
.case-panel__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; padding-top: 22px; }
.case-panel__tag { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: #00694f; background: #d5eed9; border-radius: 4px; padding: 4px 10px; }
@media only screen and (max-width: 991px) {
    .case-layout { grid-template-columns: 1fr; }
    .case-shot { display: none; }
}
@media only screen and (max-width: 767px) {
    /* На мобильном ряд вкладок кейсов — не перенос на несколько строк
       (flex-wrap:wrap по умолчанию, см. .case-rail выше), а горизонтальная
       прокрутка в одну строку: кнопки не сжимаются и не переносятся,
       скроллбар скрыт для вида ленты чипов, как в кейсах uPDF/Ahrefs. */
    .case-rail { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
    .case-rail::-webkit-scrollbar { display: none; }
    .case-rail__btn { flex-shrink: 0; }
}
@media only screen and (max-width: 575px) {
    .case-panel { padding: 26px 22px; }
}

.closing-cta { padding: 50px 0; }
.closing-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #d5eed9; border-radius: 16px; padding: 34px 40px; flex-wrap: wrap; }
.closing-cta__title { font-family: 'Open Sans Bold', sans-serif; font-size: 22px; color: #00694f; margin-bottom: 6px; }
.closing-cta__text { font-size: 15px; color: #333; max-width: 480px; }
.closing-cta__btn { flex-shrink: 0; }
.closing-cta__btn-group { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.closing-cta__btn-note { font-size: 13px; color: #41464f; }

/* Иконки на переключателе "Бессрочная лицензия"/"Подписка на 1 год" — те же
   ∞ и часы, что и в плашках карточек тарифов, для единого визуального языка. */
.lic-head__action__icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 17px; line-height: 1; }
.lic-head__action__icon svg { display: block; width: 16px; height: 16px; }
.lic-head__action__icon--infinity { font-size: 23px; }

/* Отступ сверху и снизу плашки был разным: 14px сверху (свой margin-top) и
   50px снизу (наследуется от общего .lic-head{margin-bottom:50px} из
   css/style.css — плашка его последний child). Общий .lic-head не трогаем
   (используется на order.php и других страницах) — снизу переопределяем
   только для этой LP ниже (#tariffs .lic-head), сверху выравниваем здесь.
   Оба отступа сведены к среднему между исходными 14 и 50 — 32px. */
.tariff-bonus-badge { display: flex; justify-content: center; margin-top: 32px; }
#tariffs .lic-head { margin-bottom: 32px; }
.tariff-bonus-badge span { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #d5eed9; color: #3a4258; font-family: 'Open Sans SemiBold', sans-serif; font-size: 14.5px; padding: 10px 18px; border-radius: 8px; }
.tariff-bonus-badge span b { background: #e5322d; color: #fff; border-radius: 3px; padding: 4px 10px; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-family: 'Open Sans Bold', sans-serif; }
#tariffs .annual-license { font-family: 'Open Sans Regular', sans-serif; }
#tariffs .section-title { text-align: center; margin-bottom: 30px; }
.faq__contact { text-align: center; font-size: 15.5px; color: #6e7480; margin: 26px 0 0; }
.faq__contact a { color: #00694f; font-weight: 600; }
.use-forever__title { display: block; font-family: 'Open Sans Regular', sans-serif; }
/* Уменьшенный шрифт, чтобы "Подарок: 1000 страниц AI-распознавания" (самый
   длинный вариант) помещался в карточку одной строкой, без переноса. */
#tariffs .use-forever { font-size: 15px; }
/* "+1 месяц в подарок" на вкладке "Подписка" — единственный текст в этом
   блоке (в отличие от лицензионной вкладки, где жирным выделено только
   число страниц), поэтому здесь можно оформить жирным и зелёным целиком. */
.use-forever__title--bonus { font-family: 'Open Sans Bold', sans-serif; color: #009975; }
.plan__price-note { font-size: 13px; color: #9a9a9a; font-family: 'Open Sans Regular', sans-serif; margin: 6px 0 16px; }
/* Крупнее, чем было — короткие варианты ("Выгода по акции: 82 ₽") всё равно
   умещаются в одну строку сами по себе; длинный ("обычная цена комплекта...")
   при таком размере уже не помещается в ширину карточки — переносится на
   вторую строку, это нормально для короткой сноски под ценой. Отступ сверху
   увеличен, чтобы подпись не липла к цене/бейджу скидки над ней. */
#tariffs .plan__price-note { font-size: 13.5px; margin-top: 16px; }
#tariffs, .promo-lp .faq { background: #f8f8f8 url('../img/promo-lp/pattern-bg.svg') repeat; background-size: 220px 220px; }
/* Сноска про пакет AI-распознавания — под кнопкой "Получить подарок", над
   заголовком блока тарифов (перенесена из-под карточек тарифов). Шрифт на 1px
   крупнее, чем у обычных мелких подписей на этой LP (#9a9a9a). Цвет затемнён ещё
   раз — #3a4258, уже используется на странице (.promo-hero__link, тон текста
   у бейджа .tariff-bonus-badge), не чёрный. Текст разбит на 2 строки вручную
   через <br> в разметке — по границе предложений, чтобы разбивка не зависела
   от ширины контейнера/зума. */
/* max-width увеличен с 680 до 950px — при 680px первое предложение само по себе
   не помещалось в одну строку и переносилось ещё раз, из-за чего вместо 2 строк
   (по одной на предложение, разбиты через <br> в разметке) получалось 3. Blocк
   по-прежнему у же общего .container (1200px), новый класс, глобальные стили
   не трогает. */
.promo-hero__disclaimer { text-align: center; font-size: 14px; color: #3a4258; max-width: 950px; margin: 22px auto 0; line-height: 1.5; }

/* Плашка-подсказка в шапке карточки (под "бессрочная лицензия"/"Подписка на
   1 год") — цвет фона/текста подобран под тему карточки (серый/синий/зелёный),
   светлее самой шапки, чтобы читаться как отдельный акцентный чип. */
/* display:flex вместо строчного текста + vertical-align — родительский
   .plan__head (css/style.css) сам flex-контейнер с align-items:center, из-за
   чего блочная плашка сжималась по ширине текста (разная ширина у разных
   карточек) и раньше игнорировала это через margin:auto. align-self:stretch
   растягивает плашку на всю ширину шапки — одинаково во всех карточках.
   Иконка (текстовый "∞" или SVG-часы) центрируется по вертикали через
   align-items самой плашки, а не vertical-align — vertical-align у текста и
   у SVG (нет своего baseline) считается по-разному, из-за чего SVG-иконка
   визуально съезжала вниз относительно текста. */
.plan__note { font-size: 14px; line-height: 1.35; text-align: center; border-radius: 6px; padding: 10px 14px; margin: 14px 0 0; font-family: 'Open Sans SemiBold', sans-serif; display: flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch; }
.plan__note--standard { background: #eef0f2; color: #4a5064; }
.plan__note--premium { background: #e4f2fc; color: #2b6ea8; }
.plan__note--pro { background: #e4f5ea; color: #2f6e4c; }
.plan__note-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; line-height: 1; }
.plan__note-icon svg { display: block; width: 18px; height: 18px; }

/* Первая строка списка на вкладке "Подписка"/"Профи"-"Премиум" вида "То же,
   что и в Х, а ещё" — вводная, не отдельное преимущество, поэтому без
   галочки-маркера и курсивом, не жирным (в отличие от остальных пунктов). */
#tariffs .plan__list li.plan__list-lead { padding-left: 0; padding-top: 18px; font-style: italic; font-weight: normal; }
#tariffs .plan__list li.plan__list-lead:before { content: none; }

/* Бейдж скидки рядом с ценой — заменил собой диагональную ленту
   .plan__head-top-sale в углу карточки (убрана из вёрстки этой LP). */
.plan__price-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px; padding: 3px 8px; border-radius: 5px; font-size: 12px; font-family: 'Open Sans Bold', sans-serif; color: #fff; }
#tariffs .plan-ticket__standard .plan__price-badge { background: #808F9C; }
#tariffs .plan-ticket__premium .plan__price-badge { background: #409AD8; }
#tariffs .plan-ticket__pro .plan__price-badge { background: #4C9672; }

/* Знак ₽ в основной цене — раньше .rub (SVG-иконка, весу шрифта не подчиняется),
   заменён на текстовый символ, чтобы он был жирным как сама цифра цены (у .price
   в css/style.css уже шрифт 'Open Sans Bold'/28px — наследуем size, задаём только
   вес явно на случай других браузерных дефолтов и уменьшаем чуть-чуть под знак). */
#tariffs .plan__price-rub { font-family: 'Open Sans Bold', sans-serif; font-weight: bold; font-size: 22px; margin-left: 5px; }

/* .order-block растягивает карточки .plan по высоте самой длинной (flex align-items:
   stretch по умолчанию в css/style.css), а .plan__foot закреплён снизу абсолютным
   позиционированием — на вкладке "Подписка" у Стандарта 5 пунктов списка против 12 у
   Премиум, из-за чего у короткой карточки образуется огромная пустота перед ценой.
   Общий css/style.css не трогаем (используется на order.php и десятках других страниц) —
   переопределяем только для этой LP: карточки подстраиваются под свой контент.
   gap — общий для всех ширин (заменяет justify-content:space-between из общего
   style.css безопасно, работает и в ряд, и в столбик). align-items:stretch и
   justify-content:center — ТОЛЬКО на десктопе/планшете (≥992px), где карточки
   в ряд: на ≤991px общий css/style.css сам переключает .order-block на
   flex-direction:column + align-items:center (карточки по центру экрана) — эта
   правка их не трогала, но раньше стояла без учёта ширины, из-за более высокой
   специфичности (#tariffs) перебивала центрирование и на мобильном тоже,
   карточки прижимались к левому краю. */
#tariffs .order-block { gap: 30px; }
@media only screen and (min-width: 992px) {
    #tariffs .order-block { align-items: stretch; justify-content: center; }
}
#tariffs .plan { padding-top: 0; overflow: hidden; }
/* Скидка — снова диагональная лента .plan__head-top-sale из общего css/style.css
   (цвета/поворот/размер — те же per-variant правила .plan-ticket__standard/premium/pro
   .plan__head-top-sale, ничего своего здесь не переопределяем). Лента спозиционирована
   (top:-65px/right:-65px) относительно .plan (ближайший position:relative — сама
   .plan__head у этой LP static, см. переопределение ниже), а .plan держит
   overflow:hidden (см. правило выше) — часть ленты за пределами видимой карточки
   обрезается им, наружу торчать не должно, как и было в исходном варианте LP. */
/* min-height убран: раньше он был нужен, чтобы шапка не "прыгала" по высоте,
   но сейчас у всех трёх карточек одинаковый набор строк в шапке (заголовок +
   тип лицензии + одна строка-плашка) и высота и так совпадает без него —
   а min-height, наоборot, добавлял в шапку Стандарта лишнее пустое место
   снизу от плашки, из-за которого отступ под плашкой не совпадал с отступом
   над ней. */
/* Отступ под плашкой (14px, столько же, сколько и над ней) переносим внутрь
   шапки (padding-bottom самой шапки), а не в тело карточки — иначе плашка
   упирается прямо в границу между цветной шапкой и белым телом карточки,
   визуально "приклеиваясь" к краю. Суммарный отступ до списка не меняется. */
#tariffs .plan__head { position: static; height: auto; overflow: visible; padding: 24px 24px 14px; margin-top: 0; }
#tariffs .plan.plan-ticket { padding-bottom: 30px; display: flex; flex-direction: column; }
#tariffs .plan__body { padding-top: 0; display: flex; flex-direction: column; flex: 1; }
#tariffs .plan__list { min-height: 297px; }
/* У Стандарта нет вводной строки "То же, что и в Х, а ещё" (её физически
   некуда вставлять — это первый тариф, ссылаться не на что), из-за чего
   первый пункт списка у Стандарта начинался выше, чем у Премиум/Профи.
   Отступ равен высоте строки-приглашения в других карточках. Только на
   десктопе/планшете, где карточки идут в ряд — на мобильном (≤991px,
   брейкпоинт из общего css/style.css, где .order-block становится колонкой)
   выравнивание между карточками не нужно. */
#tariffs .plan__list--align-standard { padding-top: 55px; }
@media only screen and (max-width: 991px) {
    /* На мобильном карточки идут одна под другой, поэтому выравнивание
       между карточками (55px) не нужно — но полностью убирать отступ в 0
       нельзя: тогда список "Собирайте документ с нуля..." прилипает к
       шапке карточки без отступа вообще, в отличие от Премиум/Профи, у
       которых своя строка-приглашение (.plan__list-lead) даёт от неё
       отступ и на мобильном тоже. Оставляем те же 18px, что и у неё. */
    #tariffs .plan__list--align-standard { padding-top: 18px; }
}
#tariffs .plan__foot { position: static; margin-top: auto; padding-top: 22px; }
/* Отступ над кнопкой "Купить" уменьшен: было margin-top:30px у самой кнопки
   (общий .plan-ticket .plan__btn из css/style.css, не трогаем — используется
   на order.php) + margin-bottom:16px у .plan__price-note перед ней, итого
   46px. Кнопка — inline-block (.btn), поэтому margins не схлопываются, а
   складываются. Переопределяем margin-top кнопки только для этой LP. */
#tariffs .plan-ticket .plan__btn { margin-top: 14px; }
/* Плашка "Выбор покупателей" у Профи — капсом (по умолчанию в css/style.css
   у этой плашки text-transform:none) и вровень с верхним краем карточки, как
   было изначально (компенсация 1px рамки .plan.plan-ticket__pro — border:1px
   у неё того же цвета, что и шапка). */
/* left:0 (из общего css/style.css для .pro) + унаследованный right:0 из базового
   .plan__bestseller вместе растягивали плашку на всю ширину карточки при
   width:auto — центрируем через left:50%/transform вместо left+right+margin:auto,
   чтобы фон был только под текстом, как и было изначально. */
#tariffs .plan-ticket__pro .plan__bestseller { top: -1px; left: 50%; right: auto; margin: 0; transform: translateX(-50%); border-radius: 6px; text-transform: uppercase; width: auto; max-width: none; white-space: nowrap; padding: 0 14px; font-size: 12px; }

/* Зелёные галочки вместо точек в списках тарифов — та же SVG-галочка,
   что и в .list-check из общего style.css, тот же зелёный акцент. */
#tariffs .plan__list li { padding-left: 22px; }
#tariffs .plan__list li:before {
    content: '✓'; background: none; border-radius: 0; width: auto; height: auto; top: 8px; line-height: 1;
    font-family: 'Open Sans Bold', sans-serif; font-weight: normal; font-size: 16px; color: #009975;
}

/* Раскладка "Отлично работает / Оплачивайте / Доставка" в один ряд — только
   на десктопе (≥992px). Ниже сайт сам переключает .order-row на колонку
   (css/style.css, брейкпоинт 991px) — там наши переопределения не нужны и
   раньше просачивались в мобильную вёрстку (flex-wrap:wrap + flex-grow на
   колоночном контейнере без заданной высоты раздували блоки на всю высоту
   экрана). На мобильных используем стили сайта по умолчанию как есть. */
@media only screen and (min-width: 992px) {
    #tariffs .order-row { flex-wrap: wrap; gap: 20px 0; }
    #tariffs .order__wins-support-block,
    #tariffs .order__delivery-block { width: auto; flex: 1 1 220px; }
    #tariffs .order__payment-block { width: auto; flex: 2 1 380px; }
    #tariffs .order__delivery-block { padding: 0 30px; border-left: 1px dashed #e6e6e6; }
    #tariffs .order__title { font-size: 14px; white-space: nowrap; }
    #tariffs .order__wins-support-block .order__wins-support,
    #tariffs .order__delivery-block .order__wins-support { white-space: nowrap; font-size: 15px; }
    #tariffs .a-payment-grid { flex-wrap: nowrap; justify-content: flex-start; }
}
/* На мобильных .order__delivery-block — новый блок, которого нет в базовой
   сетке сайта (там только два столбца), поэтому у него нет отступа сверху
   от соседей по умолчанию — блок "прилипает" к блоку оплаты. Добавляем тот
   же отступ, что сайт даёт соседним блокам на этих брейкпоинтах. */
@media only screen and (max-width: 991px) {
    #tariffs .order__delivery-block { margin-top: 30px; }
}
@media only screen and (max-width: 575px) {
    #tariffs .order__delivery-block { margin-top: 20px; }
    /* Сайтовый .lic-user даёт margin-top:-30px (css/style.css) — рассчитан на страницы,
       где .order сразу после hero без нижнего отступа. На этой LP hero заканчивается
       собственным padding-bottom:30px (см. .promo-hero ниже), и минус-отступ .lic-user
       полностью его съедает — блок тарифов "прилипает" к ссылке "Что умеет программа"
       без зазора. Возвращаем небольшой отступ только для этой LP и только на мобильном,
       не трогая общий .lic-user (используется на order.php и других страницах). */
    #tariffs { margin-top: 20px; }
}


@media only screen and (max-width: 991px) {
    .promo-hero__grid { gap: 30px; }
    .promo-hero__title { font-size: 32px; }
    /* Вторая строка (.promo-hero__title-line2) была фиксированной 32px на всех
       брейкпоинтах — на планшете это уравнивало её с главной строкой (обе 32px),
       а на мобильном (см. блок ниже) вторая строка становилась даже крупнее по
       цифре, чем главная. Уменьшаем пропорционально вместе с главной строкой,
       чтобы вторая строка оставалась визуально второстепенной на всех экранах. */
    .promo-hero__title-line2 { font-size: 26px; }
}
@media only screen and (max-width: 767px) {
    .promo-hero__grid { flex-direction: column; align-items: flex-start; }
    .promo-hero__box { width: 100%; max-width: 100%; flex-basis: auto; margin: 0; }
    .promo-hero__info { padding-left: 0; }
    .closing-cta__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media only screen and (max-width: 575px) {
    .promo-hero { padding: 30px 0; }
    .promo-hero__title { font-size: 26px; }
    .promo-hero__title-line2 { font-size: 21px; }
    .promo-countdown__item { width: 54px; height: 54px; }
    .promo-countdown__value { font-size: 19px; }
}

/* Лёгкое появление блоков при прокрутке — только для пользователей без
   prefers-reduced-motion. Плавный скролл по якорям реализован через JS
   (scrollIntoView), а не через `html{scroll-behavior}`, чтобы не задавать
   стиль на голом теге (п.4.2 требований к вёрстке). */
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.is-visible { opacity: 1; transform: none; }
}

.exit-modal { position: fixed; inset: 0; z-index: 60; padding: 24px; align-items: center; justify-content: center; }
.exit-modal__overlay { position: absolute; inset: 0; background: rgba(30, 34, 48, .55); }
.exit-modal__box { position: relative; background: #fff; border-radius: 12px; max-width: 480px; width: 100%; padding: 36px; box-shadow: 0 24px 70px rgba(20, 24, 38, .3); }
.exit-modal__close { position: absolute; top: 14px; right: 14px; border: 0; background: #f2f2f4; width: 30px; height: 30px; border-radius: 4px; cursor: pointer; font-size: 17px; color: #6e7480; line-height: 1; }
.exit-modal__badge { display: inline-block; background: #00694f; color: #fff; border-radius: 3px; padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.exit-modal__title { font-family: 'Open Sans Bold', sans-serif; font-size: 24px; line-height: 1.25; margin: 16px 0 0; color: #232a44; }
.exit-modal__text { font-size: 15.5px; line-height: 1.6; color: #41464f; margin: 12px 0 0; }
.exit-modal__actions { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; align-items: center; }
.exit-modal__dismiss { border: 0; background: none; color: #858585; font-size: 14.5px; cursor: pointer; text-decoration: underline; font-family: 'Open Sans SemiBold', sans-serif; }
@media only screen and (max-width: 575px) {
    .exit-modal__box { padding: 26px; }
}