/* ============================================================================
   Daily Moscow — посадочная «Блог на Daily Moscow». Два варианта.

   Общие токены и компоненты; различия вариантов — под .bl--a и .bl--b.
     · A «Витрина» — доверие вперёд: воздух, крупная типографика, цена ниже.
     · B «Оффер»   — цена вперёд: тёмный первый экран, плотнее, липкий CTA.

   Типографика фирменная, снята с сайта:
     заголовки — Graphik Bold, ls −0.5px; кнопки и подзаголовки карточек —
     Graphik Medium 17/22.1; текст и интерфейс — Manrope.
   Палитра монохромная, красный #d5181f — только на акценте выгодного тарифа.
   ========================================================================= */

/* Токены объявлены на :root, а не на .bl: липкая панель живёт вне блока
   .bl (иначе её нельзя было бы прижать к окну поверх всей страницы), и
   var(--bl-ink) внутри неё не разрешался бы — кнопка получала белый текст
   на белом фоне и исчезала. */
:root {
    --bl-ink: #000;
    --bl-muted: #7b7b81;
    --bl-dim: #9d9da4;
    --bl-rule: #efeff3;
    --bl-fill: #f6f6f9;
    --bl-accent: #d5181f;
}

.bl {
    font-family: Manrope, "Manrope Fallback", "Segoe UI", Arial, sans-serif;
    color: var(--bl-ink);
    background: #fff;
}

.bl__wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.bl__narrow { max-width: 860px; }

/* ---------- типографика ---------- */

.bl h1, .bl h2, .bl h3 {
    font-family: "Graphik Bold", "Graphik Bold Fallback", Arial, sans-serif;
    font-weight: 400;
    margin: 0;
}

.bl h1 { font-size: 56px; line-height: 60px; letter-spacing: -1.2px; }
.bl h2 { font-size: 34px; line-height: 40px; letter-spacing: -.6px; }
.bl h3 { font-size: 20px; line-height: 26px; letter-spacing: -.2px; }

.bl__kicker {
    font-family: "Graphik Medium", "Graphik Medium Fallback", Arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .48px;
    text-transform: uppercase;
    color: var(--bl-muted);
}

.bl__lead {
    font-size: 19px;
    line-height: 28px;
    color: var(--bl-muted);
    margin: 14px 0 0;
}

.bl__section { padding: 88px 0; }
.bl__section--tight { padding: 64px 0; }
.bl__section--fill { background: var(--bl-fill); }

.bl__head { margin-bottom: 40px; }
.bl__head .bl__lead { max-width: 620px; }

/* ---------- кнопки ---------- */

.bl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 17px 32px;
    border: 1px solid var(--bl-ink);
    background: var(--bl-ink);
    color: #fff;
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 17px;
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
}

.bl-btn:hover { opacity: .84; }

.bl-btn--light {
    background: #fff;
    color: var(--bl-ink);
    border-color: #fff;
}

.bl-btn--ghost {
    background: transparent;
    color: var(--bl-ink);
    border-color: var(--bl-rule);
}

.bl-btn--ghost:hover { border-color: var(--bl-ink); opacity: 1; }

.bl-btn--sm { padding: 12px 22px; font-size: 15px; }
.bl-btn--wide { width: 100%; }

.bl-cta {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 34px;
}

.bl-cta__note { font-size: 14px; line-height: 20px; color: var(--bl-muted); }
.bl-cta__note a { color: var(--bl-ink); }

/* ---------- полоса доверия ---------- */

.bl-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding: 40px 0;
    border-top: 1px solid var(--bl-rule);
    border-bottom: 1px solid var(--bl-rule);
}

.bl-proof__num {
    font-family: "Graphik Bold", Arial, sans-serif;
    font-size: 34px;
    line-height: 38px;
    letter-spacing: -.6px;
    margin-bottom: 6px;
}

.bl-proof__label { font-size: 14px; line-height: 20px; color: var(--bl-muted); }

/* ---------- шаги ---------- */

.bl-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    counter-reset: s;
}

.bl-step { counter-increment: s; }

.bl-step::before {
    content: counter(s);
    display: block;
    font-family: "Graphik Bold", Arial, sans-serif;
    font-size: 15px;
    line-height: 34px;
    width: 34px;
    height: 34px;
    text-align: center;
    border: 1px solid var(--bl-rule);
    border-radius: 50%;
    margin-bottom: 16px;
}

.bl-step h3 { margin-bottom: 8px; }
.bl-step p { margin: 0; font-size: 15px; line-height: 23px; color: var(--bl-muted); }

/* ---------- преимущества ---------- */

.bl-perks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 32px;
}

.bl-perk h3 { margin-bottom: 8px; }
.bl-perk p { margin: 0; font-size: 15px; line-height: 23px; color: var(--bl-muted); }

.bl-perk__mark {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--bl-ink);
    margin-bottom: 18px;
}

/* ---------- тарифы ---------- */

.bl-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.bl-plan {
    display: flex;
    flex-direction: column;
    padding: 30px 28px 28px;
    border: 1px solid var(--bl-rule);
    background: #fff;
    height: 100%;
    box-sizing: border-box;
}

.bl-plan--best {
    border-color: var(--bl-ink);
    border-width: 2px;
    padding: 29px 27px 27px;
}

.bl-plan__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    min-height: 24px;
}

.bl-plan__name {
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 17px;
    line-height: 22.1px;
}

.bl-plan__badge {
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--bl-accent);
    white-space: nowrap;
}

.bl-plan__price {
    font-family: "Graphik Bold", Arial, sans-serif;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -1px;
}

.bl-plan__per {
    font-size: 14px;
    line-height: 20px;
    color: var(--bl-muted);
    margin: 6px 0 22px;
}

.bl-plan__list {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    flex: 1;
}

.bl-plan__list li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 10px;
}

.bl-plan__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 6px;
    border-left: 1.6px solid var(--bl-ink);
    border-bottom: 1.6px solid var(--bl-ink);
    transform: rotate(-45deg);
}

/* ---------- FAQ ---------- */

.bl-faq { border-top: 1px solid var(--bl-rule); }

.bl-faq details {
    border-bottom: 1px solid var(--bl-rule);
}

.bl-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 18px;
    line-height: 24px;
}

.bl-faq summary::-webkit-details-marker { display: none; }

.bl-faq summary::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-right: 1.6px solid var(--bl-ink);
    border-bottom: 1.6px solid var(--bl-ink);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform .2s ease;
}

.bl-faq details[open] summary::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}

.bl-faq p {
    margin: 0 0 24px;
    max-width: 720px;
    font-size: 16px;
    line-height: 25px;
    color: var(--bl-muted);
}

/* ---------- дополнительная информация ---------- */

.bl-extra {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    font-size: 14px;
    line-height: 21px;
    color: var(--bl-muted);
}

.bl-extra b {
    display: block;
    margin-bottom: 6px;
    font-family: "Graphik Medium", Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: var(--bl-ink);
}

.bl-extra a { color: var(--bl-muted); }
.bl-extra a:hover { color: var(--bl-ink); }

/* ---------- финальный призыв ---------- */

.bl-final {
    background: var(--bl-ink);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

.bl-final h2 { margin-bottom: 14px; }
.bl-final .bl__lead { color: rgba(255, 255, 255, .66); margin: 0 auto; max-width: 560px; }
.bl-final .bl-cta { justify-content: center; }
.bl-final .bl-cta__note { color: rgba(255, 255, 255, .5); }
.bl-final .bl-cta__note a { color: #fff; }

.bl-awards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 44px;
    opacity: .7;
}

.bl-awards img { display: block; height: 46px; width: auto; }

/* ============================ ВАРИАНТ A ============================ */

.bl--a .bl-hero { padding: 96px 0 72px; }
.bl--a .bl-hero h1 { max-width: 15ch; }
.bl--a .bl-hero .bl__lead { max-width: 560px; font-size: 20px; line-height: 30px; }

/* ============================ ВАРИАНТ B ============================ */

.bl--b .bl-hero {
    background: var(--bl-ink);
    color: #fff;
    padding: 72px 0 76px;
}

.bl--b .bl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 56px;
    align-items: center;
}

.bl--b .bl-hero .bl__kicker { color: rgba(255, 255, 255, .55); }
.bl--b .bl-hero .bl__lead { color: rgba(255, 255, 255, .68); }

.bl--b .bl-hero__list {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.bl--b .bl-hero__list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 24px;
    color: rgba(255, 255, 255, .86);
}

.bl--b .bl-hero__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 6px;
    border-left: 1.6px solid #fff;
    border-bottom: 1.6px solid #fff;
    transform: rotate(-45deg);
}

/* карточка цены на первом экране */
.bl-offer {
    background: #fff;
    color: var(--bl-ink);
    padding: 30px 28px;
}

.bl-offer__from { font-size: 14px; line-height: 20px; color: var(--bl-muted); }

.bl-offer__price {
    font-family: "Graphik Bold", Arial, sans-serif;
    font-size: 46px;
    line-height: 50px;
    letter-spacing: -1.2px;
    margin: 4px 0 2px;
}

.bl-offer__per { font-size: 14px; line-height: 20px; color: var(--bl-muted); margin-bottom: 22px; }

.bl-offer__list { margin: 0 0 24px; padding: 0; list-style: none; }

.bl-offer__list li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--bl-rule);
    font-size: 14px;
    line-height: 20px;
}

.bl-offer__list li span:last-child { color: var(--bl-muted); text-align: right; }

/* лента агрегаторов */
.bl-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px 40px;
    flex-wrap: wrap;
    padding: 26px 0;
    border-bottom: 1px solid var(--bl-rule);
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 15px;
    color: var(--bl-muted);
}

.bl-logos b {
    font-family: "Graphik Medium", Arial, sans-serif;
    font-weight: 400;
    color: var(--bl-ink);
}

/* липкая панель */
.bl-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--bl-ink);
    color: #fff;
    transform: translateY(110%);
    transition: transform .28s ease;
}

.bl-sticky[data-on="1"] { transform: translateY(0); }

.bl-sticky__in {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.bl-sticky__text { font-size: 15px; line-height: 21px; }
.bl-sticky__text b { font-family: "Graphik Medium", Arial, sans-serif; font-weight: 400; }

/* ======================== ТЁМНАЯ ТЕМА (.bl--dark) ========================

   Страница ложится на body.body-dark (#000) между шапкой header-second и
   подвалом footer-second — своего фона у секций почти нет, темнота приходит
   от каркаса сайта. Здесь только то, что иначе осталось бы «дневным».

   Приглушённый текст на чёрном берём светлее фирменного #7b7b81: он даёт на
   белом 4.6:1, а на чёрном всего 4.4:1 — мелкий шрифт уже плывёт. #a2a2aa
   держит 8:1. По той же причине бейдж выгодного тарифа — осветлённый
   фирменный красный: #d5181f на чёрном даёт 3.1:1 и не читается.
   ======================================================================== */

.bl--dark {
    --bl-muted: #a2a2aa;
    --bl-dim: #8b8b93;
    --bl-rule: rgba(255, 255, 255, .14);
    --bl-fill: #0d0d10;
    --bl-accent: #ff5158;

    color: #fff;
    background: transparent;
}

/* Первый экран уже не «чёрная плашка на белом», а начало чёрной страницы:
   фон снимаем, вместо него отступ от шапки. */
.bl--dark.bl--b .bl-hero { background: transparent; padding: 56px 0 68px; }

.bl--dark .bl__section--fill {
    background: var(--bl-fill);
    border-top: 1px solid var(--bl-rule);
    border-bottom: 1px solid var(--bl-rule);
}

/* кнопки инвертируются: главная — белая на чёрном */
.bl--dark .bl-btn {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.bl--dark .bl-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
}

.bl--dark .bl-btn--ghost:hover { border-color: #fff; opacity: 1; }

.bl--dark .bl-cta__note a { color: #fff; }

/* галочки и штрихи, у которых цвет был прибит к чёрному */
.bl--dark .bl-perk__mark { background: #fff; }

.bl--dark .bl-plan__list li::before,
.bl--dark .bl-faq summary::after {
    border-color: #fff;
}

/* Тарифы: выгодный — белой карточкой. На сплошь чёрной странице это самый
   светлый объект, взгляд идёт туда, и подсказка «берите этот» не требует слов. */
.bl--dark .bl-plan {
    background: #0d0d10;
    border-color: var(--bl-rule);
}

.bl--dark .bl-plan--best {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.bl--dark .bl-plan--best .bl-plan__per { color: #6a6a72; }
.bl--dark .bl-plan--best .bl-plan__badge { color: var(--bl-ink); }
.bl--dark .bl-plan--best .bl-plan__list li::before { border-color: #000; }

.bl--dark .bl-plan--best .bl-btn {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Карточка цены на первом экране остаётся белой: это кассовый узел страницы. */
.bl--dark .bl-offer { background: #fff; color: var(--bl-ink); }
.bl--dark .bl-offer__from,
.bl--dark .bl-offer__per,
.bl--dark .bl-offer__list li span:last-child { color: #6a6a72; }
.bl--dark .bl-offer__list li { border-top-color: #efeff3; }
.bl--dark .bl-offer .bl-cta__note { color: #6a6a72; }

.bl--dark .bl-offer .bl-cta__note a { color: #000; }

.bl--dark .bl-offer .bl-btn {
    background: #000;
    border-color: #000;
    color: #fff;
}

.bl--dark .bl-logos b { color: #fff; }
.bl--dark .bl-extra b { color: #fff; }
.bl--dark .bl-extra a:hover { color: #fff; }

/* Финал остаётся тёмным, а от подвала его отбивает линия и лёгкая
   подложка. Белым его делать нельзя: артворк наград — белый рисунок на
   прозрачном фоне (средняя яркость 237 из 255), на белом он исчезает. */
.bl-final--edge {
    background: #0d0d10;
    border-top: 1px solid var(--bl-rule);
    border-bottom: 1px solid var(--bl-rule);
}

.bl-final--edge .bl-awards { opacity: 1; }

/* Липкая панель на чёрной странице не может быть чёрной — приподнимаем
   на тон и отбиваем линией. */
.bl--dark ~ .bl-sticky,
body.body-dark .bl-sticky {
    background: #141418;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

/* ---------- полоса индексации: подпись отдельной строкой ----------

   Пока пять марок стоят в одну строку с подписью, глаз читает их как
   продолжение предложения. Подпись уводим наверх мелким прописным, а сами
   названия ставим ниже ровным рядом с волосяными разделителями — так блок
   читается как ряд марок, а не как фраза. Логотипов здесь нет намеренно:
   правила Яндекса и Google запрещают такое размещение без письменного
   разрешения, см. переписку от 19.08.2026. */

.bl-logos--stack {
    display: block;
    text-align: center;
    padding: 30px 0;
}

.bl-logos--stack .bl-logos__cap {
    display: block;
    margin-bottom: 18px;
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--bl-muted);
}

.bl-logos--stack .bl-logos__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 0;
}

.bl-logos--stack .bl-logos__row b {
    display: inline-flex;
    align-items: center;
    padding: 0 30px;
    font-family: "Graphik Medium", Arial, sans-serif;
    font-weight: 400;
    /* Крупнее обычного текста: рядом стоят знаки с высотой букв ~21px,
       и 19px здесь читались бы мельче соседей. */
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -.3px;
    color: #fff;
}

.bl-logos--stack .bl-logos__row b + b {
    border-left: 1px solid var(--bl-rule);
}

/* Монохром: brightness(0) гасит любой цвет в чёрный, invert(1) поднимает
   в белый — работает и для SVG, и для PNG с альфой, форму знака не трогает.

   Высоты подобраны не на глаз и не по высоте файла, а по высоте букв:
   я отрисовал каждый знак и померил, какую долю файла занимает словесная
   часть. У Яндекса это 100% (файл обрезан по буквам), у Google 97%,
   у Дзена 88% — звезда торчит выше строки. Отсюда 21 / 22 / 24: буквы
   выходят одинаковыми, ~21px. Медиалогия — исключение: там горизонтальный
   локап, буквы всего 36% высоты файла, и подгонять её по буквам значило бы
   раздуть знак до 58px. Компромисс 30px: марка чуть крупнее соседей, но
   надпись перестаёт проваливаться. */
.bl-logos__mark {
    display: block;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .92;
}

.bl-logos__mark--yandex { height: 21px; }
.bl-logos__mark--google { height: 22px; }
.bl-logos__mark--dzen   { height: 24px; }
.bl-logos__mark--mlg    { height: 30px; }

@media only screen and (max-width: 630px) {
    .bl-logos--stack .bl-logos__row b { padding: 0 14px; font-size: 19px; }
    /* На переносе вертикальная линейка оказалась бы в начале строки. */
    .bl-logos--stack .bl-logos__row b + b { border-left: none; }

    .bl-logos__mark--yandex { height: 17px; }
    .bl-logos__mark--google { height: 18px; }
    .bl-logos__mark--dzen   { height: 19px; }
    .bl-logos__mark--mlg    { height: 24px; }
}

/* ================== БОЕВАЯ СТРАНИЦА /press/blog (.bl--page) ==============

   Шапка сайта — position: absolute с z-index 30000, она плавает над началом
   страницы. Её высота 120px на десктопе и 75px на узких экранах, поэтому
   первый экран отступает вниз: без этого шапка садилась на надпись
   «Блог на Daily Moscow». Нынешняя /press/blog решала это так же — там у
   .about-bg стоит padding-top 136px.
   ======================================================================== */

/* Селектор в четыре класса не для красоты: padding первого экрана задан
   правилом .bl--dark.bl--b .bl-hero сокращённой записью, и отступ в два
   класса ему проигрывал — карточка цены уезжала под меню шапки. */
.bl--dark.bl--b.bl--page .bl-hero { padding-top: 140px; }

@media only screen and (max-width: 940px) {
    .bl--dark.bl--b.bl--page .bl-hero { padding-top: 95px; }
}

/* Сообщение об ошибке входа через Яндекс ID. */
.bl-alert {
    margin-bottom: 28px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 81, 88, .5);
    background: rgba(213, 24, 31, .12);
    font-size: 15px;
    line-height: 22px;
    color: #fff;
}

/* ---------- служебная полоса песочницы ---------- */

/* Шапка сайта — position: absolute с z-index 30000, она плавает над началом
   страницы (так задумано: на /press/blog под ней лежит фотография). Полоса
   песочницы попадала ровно под неё, и клики забирало меню шапки. Поэтому не
   воюем за z-index, а отступаем вниз на высоту шапки: 120px на десктопе,
   75px на узких экранах. Столько же нужно будет боевой странице. */
.bl-sbx {
    position: relative;
    z-index: 200;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding: 132px 16px 12px;
}

@media only screen and (max-width: 940px) {
    .bl-sbx { padding-top: 87px; }
}

.bl-sbx__in {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.bl-sbx__t {
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .48px;
    text-transform: uppercase;
    color: #7b7b81;
}

.bl-sbx__nav { display: flex; gap: 6px; flex-wrap: wrap; }

.bl-sbx__nav a {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    font-family: Manrope, sans-serif;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}

.bl-sbx__nav a[data-on="1"] { background: #fff; color: #000; border-color: #fff; }

/* ---------- адаптив: брейкпоинты сайта ---------- */

@media only screen and (max-width: 1000px) {
    .bl h1 { font-size: 42px; line-height: 46px; letter-spacing: -.8px; }
    .bl h2 { font-size: 28px; line-height: 34px; }
    .bl__section { padding: 64px 0; }
    .bl-plans { grid-template-columns: minmax(0, 1fr); }
    .bl-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
    .bl--b .bl-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

@media only screen and (max-width: 630px) {
    .bl h1 { font-size: 32px; line-height: 36px; letter-spacing: -.5px; }
    .bl h2 { font-size: 24px; line-height: 29px; }
    .bl__lead, .bl--a .bl-hero .bl__lead { font-size: 17px; line-height: 26px; }
    .bl__section { padding: 48px 0; }
    .bl-steps, .bl-perks, .bl-extra { grid-template-columns: minmax(0, 1fr); }
    .bl-cta { gap: 14px; }
    /* Кнопка во всю ширину только внутри контента: в липкой панели
       она должна остаться рядом с подписью, а не переносом ниже. */
    .bl .bl-btn { width: 100%; }
    .bl-sticky__in { gap: 12px; flex-wrap: nowrap; padding: 11px 16px; }
    .bl-sticky__text { font-size: 14px; line-height: 19px; }
    .bl-proof__num { font-size: 28px; line-height: 32px; }
    .bl-final { padding: 56px 0; }
    .bl-awards img { height: 36px; }
}

/* ==================== ВАРИАНТ C: АТМОСФЕРА (.bl--rich) ====================

   Надстройка над тёмной темой: фоновое свечение, зернистость, стеклянные
   карточки и красный градиентный CTA. Ставится вместе с .bl--dark, поэтому
   идёт ниже неё — при равной специфичности выигрывает последнее правило.

   Свечение сделано слоями radial-gradient на одном элементе, а не размытыми
   блобами через filter: blur(). Блоб с blur(120px) на мобильном — это
   полноэкранная растровая операция каждый кадр; градиент рисуется даром.
   ======================================================================== */

.bl--rich {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bl-bg {
    position: absolute;
    inset: -160px 0 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(980px 660px at 84% -4%,  rgba(213, 24, 31, .34), transparent 62%),
        radial-gradient(780px 580px at 6% 14%,   rgba(74, 88, 148, .26), transparent 64%),
        radial-gradient(1100px 760px at 52% 46%, rgba(213, 24, 31, .09), transparent 66%),
        radial-gradient(900px 720px at 10% 78%,  rgba(58, 68, 116, .22), transparent 66%),
        radial-gradient(900px 700px at 88% 98%,  rgba(213, 24, 31, .16), transparent 64%),
        #05050a;
    animation: bl-drift 46s ease-in-out infinite alternate;
}

/* Дышит еле заметно — движение читается periферийным зрением, но не отвлекает
   от текста. transform, а не background-position: только он идёт по GPU. */
@keyframes bl-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}

/* Зерно: без него градиент на больших плоскостях идёт полосами (banding). */
.bl-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bl--rich .bl__section--fill {
    background: rgba(255, 255, 255, .022);
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* ---------- общий «стеклянный» приём ---------- */

.bl--rich .bl-plan,
.bl--rich .bl-perk,
.bl--rich .bl-proof,
.bl--rich .bl-logos,
.bl--rich .bl-finalcard {
    background: linear-gradient(180deg, rgba(255, 255, 255, .058), rgba(255, 255, 255, .018));
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* ---------- первый экран ---------- */

.bl--rich.bl--b .bl-hero { padding: 76px 0 84px; }

.bl--rich .bl-hero h1 {
    background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .62));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bl--rich .bl__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .78);
}

.bl--rich .bl__kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b43;
    box-shadow: 0 0 0 4px rgba(255, 59, 67, .22);
}

/* Карточка оффера остаётся светлой, но уже не плоско-белой: подсвечена
   красным сверху и приподнята тенью — это кассовый узел страницы. */
.bl--rich .bl-offer {
    position: relative;
    border-radius: 18px;
    padding: 34px 30px;
    background: linear-gradient(180deg, #fff, #f2f2f6);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .10);
}

.bl--rich .bl-offer::before {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    top: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #ff3b43, #d5181f);
}

/* ---------- красная кнопка ---------- */

.bl--rich .bl-btn {
    border-radius: 12px;
    border-color: transparent;
    background: linear-gradient(135deg, #ff3b43, #d5181f 58%, #a5111a);
    color: #fff;
    box-shadow: 0 12px 30px rgba(213, 24, 31, .34);
}

.bl--rich .bl-btn:hover { opacity: 1; box-shadow: 0 16px 38px rgba(213, 24, 31, .46); }

/* Строгая тёмная версия делает эти две кнопки чёрными адресными правилами
   в три класса — перебиваем их такой же длиной, иначе градиент до них
   не доедет и на странице окажутся две разные главные кнопки. */
.bl--rich .bl-offer .bl-btn,
.bl--rich .bl-plan--best .bl-btn {
    border-color: transparent;
    background: linear-gradient(135deg, #ff3b43, #d5181f 58%, #a5111a);
    color: #fff;
    box-shadow: 0 12px 30px rgba(213, 24, 31, .34);
}

.bl--rich .bl-btn--ghost {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: none;
}

.bl--rich .bl-btn--ghost:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .34); }

/* ---------- цифры и агрегаторы ---------- */

.bl--rich .bl-proof {
    padding: 34px 30px;
    margin-top: -18px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.bl--rich .bl-proof__num {
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .55));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bl--rich .bl-logos { padding: 22px 30px; margin-top: 28px; }
.bl--rich .bl-logos b { color: #fff; }

/* ---------- тарифы ---------- */

.bl--rich .bl-plan { padding: 32px 28px 30px; }

/* Выгодный тариф не белой плашкой, как в строгой тёмной версии, а свечением:
   на цветном фоне белый прямоугольник выглядел бы вырезанным из другой сцены. */
.bl--rich .bl-plan--best {
    position: relative;
    padding: 32px 28px 30px;
    border: 1px solid rgba(255, 90, 96, .55);
    background:
        linear-gradient(180deg, rgba(213, 24, 31, .16), rgba(213, 24, 31, .04)),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: 0 24px 60px rgba(213, 24, 31, .22);
    color: #fff;
}

.bl--rich .bl-plan--best .bl-plan__per,
.bl--rich .bl-plan--best .bl-plan__badge { color: #ff8b90; }
.bl--rich .bl-plan--best .bl-plan__list li::before { border-color: #fff; }
.bl--rich .bl-plan__badge { color: #ff8b90; }

.bl--rich .bl-plan__price {
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .62));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- что входит ---------- */

.bl--rich .bl-perk {
    padding: 26px 24px;
    transition: border-color .2s ease, transform .2s ease;
}

.bl--rich .bl-perk:hover { border-color: rgba(255, 90, 96, .45); transform: translateY(-3px); }

.bl--rich .bl-perk__mark {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff3b43, #d5181f);
}

/* ---------- шаги ---------- */

.bl--rich .bl-step::before {
    border-color: rgba(255, 90, 96, .5);
    background: rgba(213, 24, 31, .14);
    color: #fff;
}

/* ---------- FAQ ---------- */

.bl--rich .bl-faq { border-top-color: rgba(255, 255, 255, .10); }
.bl--rich .bl-faq details { border-bottom-color: rgba(255, 255, 255, .10); }
.bl--rich .bl-faq details[open] summary { color: #ff8b90; }
.bl--rich .bl-faq details[open] summary::after { border-color: #ff8b90; }

/* ---------- финал ---------- */

.bl--rich .bl-final { background: transparent; padding: 40px 0 96px; }

.bl-finalcard {
    padding: 64px 40px;
    text-align: center;
}

.bl--rich .bl-finalcard {
    border-color: rgba(255, 90, 96, .3);
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(213, 24, 31, .26), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}

/* Награды — белый артворк на прозрачном фоне, поэтому только на тёмном. */
.bl-awards--dark img { filter: none; }

/* ---------- липкая панель в атмосферной версии ---------- */

body.body-dark .bl-sticky.bl-sticky--rich {
    background: rgba(12, 12, 18, .82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.bl-sticky--rich .bl-btn {
    border-radius: 12px;
    border-color: transparent;
    background: linear-gradient(135deg, #ff3b43, #d5181f 58%, #a5111a);
    color: #fff;
}

@media only screen and (max-width: 630px) {
    .bl-finalcard { padding: 44px 22px; }
    .bl--rich .bl-proof { padding: 26px 20px; }
    .bl--rich .bl-logos { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-bg { animation: none; }
}

/* ==================== ВАРИАНТ D: ПОЛОСА (.bl--paper) =====================

   Плотность здесь берётся не из эффектов, а из газетного набора и живого
   контента: стена настоящих заголовков как фактура первого экрана, бегущая
   строка свежих материалов, реальные карточки из ленты. Ни скруглений, ни
   стекла, ни свечения — сетка, линейки и типографика, как на самом сайте.
   Красный только там, где он и так есть на Daily Moscow: метка и разделитель.
   ======================================================================== */

.bl--paper.bl--b .bl-hero {
    position: relative;
    isolation: isolate;
    padding: 44px 0 64px;
    border-bottom: 1px solid var(--bl-rule);
}

/* Стена заголовков: настоящие материалы издания, набранные мелко в три
   колонки. Даёт первому экрану плотность газетной полосы, а не фотофон. */
.bl-wall {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    padding: 18px 16px 0;
    columns: 3;
    column-gap: 42px;
    opacity: .09;
    color: #fff;
    font-family: "Graphik Bold", Arial, sans-serif;
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -.2px;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .5) 58%, transparent);
    mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .5) 58%, transparent);
}

.bl-wall span { display: block; margin-bottom: 12px; break-inside: avoid; }

/* Выходные данные над заголовком — как шапка полосы. */
.bl-masthead {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--bl-rule);
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.bl-masthead__mark { color: var(--bl-accent); }

.bl--paper .bl__kicker { color: rgba(255, 255, 255, .55); }

/* Купон подписки: рамка в две линии, как объявление в газете. */
.bl--paper .bl-offer {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 26px 26px 28px;
    box-shadow: none;
}

.bl--paper .bl-offer::before { display: none; }

.bl--paper .bl-offer__from,
.bl--paper .bl-offer__per { color: rgba(255, 255, 255, .6); }
.bl--paper .bl-offer__list li { border-top-color: rgba(255, 255, 255, .22); }
.bl--paper .bl-offer__list li span:last-child { color: rgba(255, 255, 255, .72); }
.bl--paper .bl-offer .bl-cta__note { color: rgba(255, 255, 255, .55); }

.bl--paper .bl-offer .bl-btn,
.bl--paper .bl-btn {
    border-radius: 0;
    background: #fff;
    border-color: #fff;
    color: #000;
    box-shadow: none;
}

.bl--paper .bl-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
}

.bl--paper .bl-btn--ghost:hover { border-color: #fff; }

/* ---------- бегущая строка ---------- */

.bl-tick {
    overflow: hidden;
    border-bottom: 1px solid var(--bl-rule);
    padding: 14px 0;
}

.bl-tick__row {
    display: flex;
    width: max-content;
    animation: bl-tick 90s linear infinite;
}

.bl-tick:hover .bl-tick__row { animation-play-state: paused; }

.bl-tick a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    white-space: nowrap;
}

.bl-tick a:hover { color: #fff; }

.bl-tick a::after {
    content: "";
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--bl-accent);
}

@keyframes bl-tick {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- цифры ---------- */

.bl--paper .bl-proof {
    border-top: none;
    padding: 44px 0;
    gap: 0;
}

.bl--paper .bl-proof > div { padding: 0 28px; border-left: 1px solid var(--bl-rule); }
.bl--paper .bl-proof > div:first-child { padding-left: 0; border-left: none; }

.bl--paper .bl-proof__num { font-size: 42px; line-height: 46px; letter-spacing: -1px; }

/* ---------- витрина настоящих материалов ---------- */

.bl-show {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.bl-card { color: inherit; text-decoration: none; display: block; }

.bl-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 736 / 510;
    object-fit: cover;
    background: #14141a;
    margin-bottom: 14px;
}

.bl-card__cat {
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--bl-accent);
}

.bl-card__title {
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 17px;
    line-height: 22.1px;
    margin: 8px 0 0;
}

.bl-card:hover .bl-card__title { text-decoration: underline; text-underline-offset: 3px; }

.bl-show__note {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--bl-muted);
}

/* ---------- преимущества нумерованной колонкой ---------- */

.bl--paper .bl-perks {
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--bl-rule);
}

.bl--paper .bl-perk {
    padding: 26px 28px 30px;
    border-bottom: 1px solid var(--bl-rule);
    border-right: 1px solid var(--bl-rule);
    counter-increment: perk;
}

.bl--paper .bl-perks { counter-reset: perk; }
.bl--paper .bl-perk:nth-child(3n) { border-right: none; }

.bl--paper .bl-perk__mark { display: none; }

.bl--paper .bl-perk h3::before {
    content: "0" counter(perk);
    display: block;
    margin-bottom: 12px;
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .6px;
    color: var(--bl-accent);
}

/* ---------- тарифы ---------- */

.bl--paper .bl-plans { gap: 0; border-top: 2px solid #fff; }

.bl--paper .bl-plan {
    border: none;
    border-right: 1px solid var(--bl-rule);
    border-bottom: 1px solid var(--bl-rule);
    background: transparent;
    border-radius: 0;
    padding: 32px 28px 30px;
}

.bl--paper .bl-plan:last-child { border-right: none; }

/* Выгодный тариф — сплошная белая плашка: на чёрной полосе это выворотка,
   приём самого издания, а не подсветка. */
.bl--paper .bl-plan--best {
    background: #fff;
    color: #000;
    border-right-color: #fff;
    box-shadow: none;
}

.bl--paper .bl-plan--best .bl-plan__price { color: #000; -webkit-text-fill-color: #000; }
.bl--paper .bl-plan--best .bl-plan__per { color: #6a6a72; }
.bl--paper .bl-plan--best .bl-plan__badge { color: var(--bl-accent); }
.bl--paper .bl-plan--best .bl-plan__list li::before { border-color: #000; }

.bl--paper .bl-plan--best .bl-btn {
    background: #000;
    border-color: #000;
    color: #fff;
}

.bl--paper .bl-plan__badge { color: var(--bl-accent); }
.bl--paper .bl-plan__price { -webkit-text-fill-color: #fff; color: #fff; }

/* ---------- шаги ---------- */

.bl--paper .bl-step::before {
    border-radius: 0;
    border-color: rgba(255, 255, 255, .28);
    background: transparent;
    color: #fff;
}

/* ---------- финал ---------- */

.bl--paper .bl-final {
    background: transparent;
    border-top: 2px solid #fff;
    padding: 72px 0;
}

@media only screen and (max-width: 1000px) {
    .bl-wall { columns: 2; }
    .bl-show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl--paper .bl-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl--paper .bl-perk:nth-child(3n) { border-right: 1px solid var(--bl-rule); }
    .bl--paper .bl-perk:nth-child(2n) { border-right: none; }
    .bl--paper .bl-plan { border-right: none; }
}

@media only screen and (max-width: 630px) {
    .bl-wall { columns: 1; opacity: .07; }
    .bl-show { grid-template-columns: minmax(0, 1fr); }
    .bl--paper .bl-perks,
    .bl--paper .bl-proof { grid-template-columns: minmax(0, 1fr); }
    .bl--paper .bl-perk { border-right: none; }
    .bl--paper .bl-proof > div { padding: 18px 0; border-left: none; border-top: 1px solid var(--bl-rule); }
    .bl--paper .bl-proof > div:first-child { border-top: none; padding-top: 0; }
    .bl--paper .bl-proof__num { font-size: 32px; line-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-tick__row { animation: none; }
}

/* ================== ВАРИАНТ E: УЗКАЯ КОЛОНКА (.bl--col) ==================

   Ширина взята из нынешней /press/blog: там обёртка 924px, а сам текст
   идёт в .about-block шириной 740px с полями по 16px. Повторяем ровно:
   одна колонка, всё стоит друг под другом, читается как страница издания,
   а не как лендинг. Кегли уменьшены под узкую полосу набора — 56px в строке
   на 708px давали бы по три-четыре слова.

   Оформления не добавлено никакого: чёрный фон, белый текст, волосяные
   линейки, красный только на метке выгодного тарифа.
   ======================================================================== */

.bl--col .bl__wrap { max-width: 740px; }
.bl--col .bl__narrow { max-width: 740px; }

.bl--col h1 { font-size: 44px; line-height: 48px; letter-spacing: -.9px; }
.bl--col h2 { font-size: 26px; line-height: 32px; letter-spacing: -.4px; }

.bl--col .bl-hero { padding: 56px 0 48px; }
.bl--col .bl-hero .bl__lead { font-size: 18px; line-height: 28px; max-width: none; }

.bl--col .bl__section { padding: 52px 0; }
.bl--col .bl__section--tight { padding: 44px 0; }
.bl--col .bl__head { margin-bottom: 28px; }
.bl--col .bl__head .bl__lead { max-width: none; }

/* Секции разделены линейкой, а не подложкой: заливка на узкой колонке
   выглядит полосой поперёк экрана и рвёт чтение. */
.bl--col .bl__section--fill {
    background: transparent;
    border-top: 1px solid var(--bl-rule);
    border-bottom: none;
}

.bl--col .bl-cta { margin-top: 28px; gap: 16px; }
.bl--col .bl-cta__note { flex: 1 1 240px; }

/* ---------- цифры: две на две ---------- */

.bl--col .bl-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
    padding: 28px 0;
}

.bl--col .bl-proof__num { font-size: 28px; line-height: 32px; letter-spacing: -.5px; }

/* ---------- тарифы строками ---------- */

.bl-rows { border-top: 1px solid var(--bl-rule); }

.bl-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--bl-rule);
    align-items: start;
}

.bl-row__name {
    font-family: "Graphik Medium", Arial, sans-serif;
    font-size: 17px;
    line-height: 22.1px;
}

.bl-row__badge {
    margin-left: 10px;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--bl-accent);
    white-space: nowrap;
}

.bl-row__list { margin: 12px 0 0; padding: 0; list-style: none; }

.bl-row__list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 22px;
    color: var(--bl-muted);
}

.bl-row__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 11px;
    height: 5px;
    border-left: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
}

.bl-row__price {
    font-family: "Graphik Bold", Arial, sans-serif;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -.6px;
}

.bl-row__per { font-size: 13px; line-height: 19px; color: var(--bl-muted); margin: 2px 0 14px; }

/* ---------- что входит: две колонки коротких пунктов ---------- */

.bl--col .bl-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.bl--col .bl-perk h3 { font-size: 17px; line-height: 23px; }
.bl--col .bl-perk__mark { width: 20px; margin-bottom: 12px; }

/* ---------- шаги: вертикальный список ---------- */

.bl--col .bl-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }

.bl--col .bl-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bl-rule);
}

.bl--col .bl-steps { border-top: 1px solid var(--bl-rule); }
.bl--col .bl-step::before { margin-bottom: 0; }
.bl--col .bl-step h3 { font-size: 17px; line-height: 23px; }

/* ---------- дополнительно: одной колонкой ---------- */

.bl--col .bl-extra { grid-template-columns: minmax(0, 1fr); gap: 22px; }

/* ---------- финал ---------- */

.bl--col .bl-final { background: transparent; border-top: 1px solid var(--bl-rule); padding: 56px 0 72px; }
.bl--col .bl-awards { margin-top: 34px; }

@media only screen and (max-width: 630px) {
    .bl--col h1 { font-size: 30px; line-height: 34px; }
    .bl--col .bl-perks { grid-template-columns: minmax(0, 1fr); }
    .bl--col .bl-proof { grid-template-columns: minmax(0, 1fr); }
    .bl-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .bl-row__side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .bl-row__per { margin: 0; }
    .bl-row__side .bl-btn { width: 100%; }
}

/* ---------- доступность ---------- */

.bl a:focus-visible,
.bl button:focus-visible,
.bl summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .bl *, .bl-sticky { transition: none !important; }
}