/* ============================================================
   page-foundation.css — слой страницы нового дизайна uprav.ru
   поверх компонентов кита RSU/UI-kit.

   Кит даёт КОМПОНЕНТЫ. Этот слой даёт СТРАНИЦУ: продуктовую базу
   (reset), серый холст с фирменным свечением, шапку-карточку со
   шторкой-размытием, белые «листы» r72, контейнерную модель осей,
   боевые кнопки и секционные паттерны (FAQ, преподаватели,
   карусели, футер, тикер логотипов, «Кейсы и отзывы»).

   Значения сняты с боевых страниц нового дизайна (uprav.ru/,
   /rukovoditel/, /mba/mini-mba-klassichesky/) по computed styles —
   это перенос боевых правил, а не «дизайн по мотивам».

   Подключение (порядок обязателен, см. rshu-page-build.md):
     css компонентов кита -> tokens.css -> page-foundation.css -> page.css
   Шаблон-скелет: docs/ai-pipeline/page-template.html
   ============================================================ */

/* ─── Продуктовая база (вместо витринного base.css кита) ────
   base.css кита — фон витрины playground, на страницы его не подключать. */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    color: var(--color-text-primary);
    min-height: 100vh;
}

h1, h2, h3, h4, p, ul, ol {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

button, input, textarea, select {
    font: inherit;
}

/* Кнопки хрома с боя (шапка/подвал): на бою их сбрасывает общий reset шаблона,
   которого в снимке нет — без него <button class="header__nav-item"> получает
   серую «пилюлю» браузера (найдено Сашей 16.09 на пункте «МВА»). */
/* Шапка едет за пользователем (боевое .header.section-container { position: sticky }):
   на статичной сборке sticky заперт в обёртке div.header--blue высотой в шапку — липкой
   делаем саму обёртку (ревью 16.09: «хедер не ездит, прозрачная плашка» — то была
   шторка .scroll-blur без шапки над ней). */
.rshu-chrome > .header--blue {
    position: sticky;
    top: 12px;
    z-index: 100;
    /* обёртка прозрачная: липнет КАРТОЧКА шапки (r36, градиент, blur — .header.header--blue),
       а не полоса во всю ширину (полоса — боевой css header.fix-container, который на бою
       не виден, потому что sticky там не срабатывает; ревью 16.09 09:40: «вёрстка едет») */
    background: none;
}
.rshu-chrome header.fix-container { background: none; }

.rshu-chrome button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
}

/* кнопка-призыв — всегда <a href>, не голый <button> */
a.btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section__title {
    margin-bottom: var(--space-8);
}

/* карточки внутри листа: собственные поля __cards кита не нужны —
   оси держит контейнер листа (иначе двойной отступ) */
.course-info-section .advantages-section__cards {
    padding: 0;
}

/* ─── Честные плейсхолдеры (нет данных — видно на ревью) ──── */

.ph-inline {
    display: inline-block;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-s);
    color: var(--color-text-muted);
    font-family: ui-monospace, monospace;
    font-size: var(--type-body-s14-size);
    line-height: var(--type-body-s14-lh);
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.55);
}

.ph-inline--inverse {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.5);
}

.ph--photo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1.5px dashed var(--color-border);
    background: var(--color-bg-accent);
    color: var(--color-text-muted);
    font-family: ui-monospace, monospace;
    font-size: var(--type-body-s14-size);
    min-height: 240px;
    padding: var(--space-6);
}

/* ─── Холст: серый фон + фирменное свечение ────────────────── */

body.main {
    background: #F6F7F9; /* оттенок эталона; в токенах кита аналога нет — кандидат в токен bg-canvas */
    position: relative;
    overflow-x: hidden;
}

.main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background:
        radial-gradient(56.23% 38.22% at 23.69% 18.39%, rgba(9, 62, 180, 0.79) 0%, rgba(9, 62, 180, 0) 100%),
        radial-gradient(14.66% 35.36% at 66.34% 78.41%, rgba(9, 62, 180, 0.32) 0%, rgba(9, 62, 180, 0) 100%),
        radial-gradient(19.34% 53.36% at 37.44% 47.80%, rgba(9, 62, 180, 0.48) 0%, rgba(9, 62, 180, 0) 100%),
        radial-gradient(16.45% 23.11% at 48.45% 26.84%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(19.09% 33.14% at 75.43% 19.15%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(20.04% 44.84% at 95.74% 108.68%, #F6F7F9 0%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(15.83% 43.51% at 0% 100.49%, #F6F7F9 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(107.7deg, #59A7D8 0.25%, #2561c0 99.75%);
    backdrop-filter: blur(100px);
    z-index: 0;
    width: 100%;
    height: 1000px;
}

.main::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 650px;
    height: 380px;
    background: linear-gradient(to bottom, #ffffff00 10%, #F6F7F9 80%);
    pointer-events: none;
    z-index: 0;
}

/* Контент страницы поверх свечения. Нельзя применять это правило ко всем
   прямым потомкам body: выпадающие меню шапки тоже находятся на этом уровне
   и должны сохранять штатное position: fixed из header.css. */
body.main > main,
body.main > .section-container,
body.main > .section-container_m,
body.main > footer,
body.main > .footer {
    position: relative;
    z-index: 1;
}

/* ─── Контейнеры и вертикальный ритм ───────────────────────── */

.section-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 72px;
}

.section-container_m {
    max-width: 1584px;
    margin: 0 auto;
    padding: 0 72px;
}

/* только вертикаль: шорткат «56px 0» обнулял боковые поля .section-container
   у блоков на холсте (section-container section-m) — они съезжали с оси
   шапки на ширинах > 1200px (дефект 14.09, ловит measure_axes «холст>») */
.section-m {
    padding-top: 56px;
    padding-bottom: 56px;
}

/* модификатор «без верхнего поля» — строго ПОСЛЕ .section-m:
   специфичность равная, побеждает порядок объявления */
.section-m--flush-top {
    padding-top: 0;
}

.section-bt {
    padding-bottom: var(--space-14);
}

/* белый «лист»: фон и r72 даёт кит (advantages-section.css);
   внутренние поля листа — боевые */
.section-container_m .course-info-section {
    /* горизонтальные оси держит контейнер прямых детей (см. «Оси листа» ниже);
       верх листа — боевой воздух над первой секцией (flush-top): 56px, ≤980 — 28px
       (замер uprav.ru/mba/mini-mba-klassichesky/ 14.09; до этого заголовок
       первой секции лежал на кромке листа) */
    padding: 56px 0 0;
}

@media (max-width: 1583px) {
    .section-container_m {
        max-width: 100%;
        padding: 0;
    }
}

@media (max-width: 1200px) {
    .section-container {
        padding-left: 50px;
        padding-right: 50px; /* не шорткат: обнулял .section-m у панелей на холсте (17.09) */
    }

    .section-container_m {
        padding: 0;
    }
}

@media (max-width: 980px) {
    .section-container {
        padding-left: 25px;
        padding-right: 25px; /* не шорткат: обнулял .section-m у панелей на холсте (17.09) */
    }

    .section-m {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    /* flush-top обязан переживать мобильное переобъявление .section-m
       (равная специфичность — побеждает порядок; найдено ревью 21.08) */
    .section-m--flush-top {
        padding-top: 0;
    }

    .section-container_m .course-info-section {
        padding: 28px 0 0;
    }
}

@media (max-width: 670px) {
    .section-container {
        padding-left: 10px;
        padding-right: 10px; /* не шорткат: обнулял .section-m у панелей на холсте (17.09) */
    }

    .footer .section-container {
        padding: 0 25px;
    }

    .section-container_m .course-info-section {
        padding: 28px 0 0;
    }
}

/* ─── Шапка-карточка: sticky-обёртка ───────────────────────── */
/* r36, градиент 90.32deg и blur — в ките (header.css) */

/* ─── Хлебные крошки на холсте ──────────────────────────────
   База крошек — компонент кита (breadcrumbs.css, подключить его).
   Здесь — посадка на свечение и мобильный кегль. */

:root {
    /* табы-пилюли боевых страниц (программа, преподаватели, прайс) */
    --tab-active-bg: #0A34AA;
    --tab-active-color: #ffffff;
}

.main .section-breadcrumbs {
    background: none;
    position: relative;
    padding: var(--space-9) 0 0;
}

.main .breadcrumbs__link {
    color: #ffffff;
}

.main .breadcrumbs__link:hover {
    color: var(--bc-color-current);
}

@media (max-width: 767px) {
    .breadcrumbs__link {
        font-size: 13px;
        line-height: 120%;
    }

    .breadcrumbs__item,
    .breadcrumbs__link {
        white-space: normal;
        word-break: break-word;
    }
}

/* ─── Заголовки секций: боевая лестница ────────────────────── */

/* Заголовочный блок секции НЕ прилипает к контенту: боевой ритм 40px
   (замер главной 20.08: карточные секции 40px, плитка направлений 32px;
   исключение — собственный подзаголовок секции, у него свои 8px).
   Инвариант держит rhythm_checks.mjs (гейт, шаг 2.5). */
.section-m > .section-title,
.section-m > .section-title-row {
    margin-bottom: var(--space-10);
}
.section-m > .section-title-row .section-title {
    margin-bottom: 0;
}

.section-title__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: 24px;
    line-height: 32px;
    color: var(--color-text-primary);
    margin: 0;
}

@media (min-width: 768px) {
    .section-title__title {
        font-size: 32px;
        line-height: 40px;
    }
}

@media (min-width: 1224px) {
    .section-title__title {
        font-size: var(--type-h2-size);
        line-height: 46px;
    }
}

/* ─── Hero курса: прозрачный, лежит на свечении ────────────── */

.section-course-hero {
    margin-top: 40px;
}

.section-course-hero__inner {
    display: grid;
    grid-template-columns: 1fr 385px;
    grid-template-areas:
        "left form"
        "formats form";
    gap: var(--space-5);
    align-items: stretch;
    margin-top: 40px;
    grid-template-rows: 1fr auto;
}

.section-course-hero__left {
    grid-area: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}

.section-course-hero__label {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--btn-text-color);
    margin-bottom: var(--space-3);
}

.section-course-hero__label-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.section-course-hero__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    position: relative;
}

.section-course-hero__title {
    font-size: 36px;
    font-weight: var(--fw-bold);
    line-height: 120%;
    color: var(--btn-text-color);
    margin-bottom: var(--space-1);
}

.section-course-hero__desc {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--btn-text-color);
    line-height: 120%;
    margin-top: var(--space-7);
}

.section-course-hero__promo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-4) var(--space-6);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 120%;
    max-width: 260px;
    flex-shrink: 0;
    background: rgba(255, 236, 229, 1);
    color: var(--color-secondary);
    border-radius: var(--radius-2l);
    position: relative;
    margin-top: var(--space-5);
}

.section-course-hero__promo:empty {
    display: none;
}

.section-course-hero__promo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.section-course-hero__formats {
    grid-area: formats;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    z-index: 1;
    height: max-content;
    align-items: stretch;
}

/* планшетный шаг чипов hero: 3 → 2 → 1 (боевая топология; без него на
   671–1360px чипы сжимались, а 4-й «висел» — найдено ревью 21.08) */
@media (max-width: 1360px) and (min-width: 671px) {
    .section-course-hero__formats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.section-course-hero__format {
    background: var(--cb-bg);
    border-radius: var(--radius-2l);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.section-course-hero__format-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.section-course-hero__format-icon {
    width: 45px;
    max-height: 45px;
    padding: 6px;
    flex-shrink: 0;
    color: #fff;
    border: 1px solid rgb(225 230 238);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-course-hero__format-name {
    font-size: 18px;
    color: var(--bc-color);
    font-weight: var(--font-weight-bold);
}

.section-course-hero__format-text {
    font-size: 15px;
    line-height: 120%;
    color: var(--bc-color);
    flex: 1;
    font-weight: var(--font-weight-medium);
}

.section-course-hero__format-date {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--bc-color);
}

.section-course-hero__format-date svg {
    width: 18px;
    height: 20px;
    color: black;
}

/* форма в hero — карточка #E0E8F5 (боевой override) */
.section-course-hero__inner .enrollment-form {
    grid-area: form;
    background: rgba(224, 232, 245, 1);
    z-index: 1;
    width: 100%;
}

@media (max-width: 1199px) {
    .section-course-hero__inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        align-items: flex-start;
    }

    .section-course-hero__left {
        order: 1;
        position: relative;
        width: 100%;
    }

    .section-course-hero__inner .enrollment-form {
        order: 2;
        width: 100%;
    }

    .section-course-hero__formats {
        order: 3;
    }

    .section-course-hero__title {
        font-size: 32px;
    }

    .section-course-hero__desc {
        font-size: 15px;
    }
}

@media (max-width: 840px) {
    .section-course-hero__label {
        font-size: 12px;
    }
}

@media (max-width: 670px) {
    .section-course-hero {
        margin-top: 24px;
    }

    .section-course-hero__inner {
        gap: 26px;
    }

    .section-course-hero__formats {
        grid-template-columns: 1fr;
    }

    .section-course-hero__title-row {
        flex-direction: column;
        gap: var(--space-4);
        margin-bottom: 0;
    }

    .section-course-hero__desc {
        margin-top: var(--space-4);
    }

    .section-course-hero__title {
        font-size: 28px;
        margin-bottom: var(--space-2);
    }

    .section-course-hero__format-text {
        font-size: 13px;
    }

    .section-course-hero__format-date {
        margin-top: var(--space-1);
    }

    .section-course-hero .section-bt {
        padding-bottom: var(--space-7);
    }
}

/* ─── FAQ: белые карточки r20 с шевроном (боевая разметка) ─── */

.section-faq__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.section-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.section-faq__item {
    background: var(--color-bg-primary);
    border-radius: var(--radius-l);
    overflow: hidden;
}

.section-faq__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 26px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    color: var(--color-text-primary);
    transition: background 0.2s ease;
}

.section-faq__question {
    font-size: 22px;
    font-weight: var(--font-weight-medium);
    line-height: 120%;
}

.section-faq__btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.section-faq__trigger:hover .section-faq__btn {
    background: var(--color-bg-secondary);
}

.section-faq__chevron {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-text-primary);
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.section-faq__item.is-open .section-faq__chevron {
    transform: rotate(0);
}

.section-faq__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.section-faq__item.is-open .section-faq__body {
    grid-template-rows: 1fr;
}

.section-faq__content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 26px 0;
    font-size: 16px;
    line-height: 130%;
}

.section-faq__item.is-open .section-faq__content {
    padding-bottom: 26px;
}

@media (max-width: 980px) {
    .section-faq__question {
        font-size: 21px;
    }
}

@media (max-width: 670px) {
    .section-faq__question {
        font-size: 14px;
        font-weight: var(--font-weight-bold);
    }

    .section-faq__trigger {
        padding: 12px 20px;
    }

    .section-faq__item.is-open .section-faq__content {
        padding-bottom: 12px;
    }

    .section-faq__content {
        padding: 0 20px 0;
        font-size: var(--type-body-m-size); /* единая шкала (§7.5 п.17): не 13px рядом с 15px основного */
    }

    .section-faq__chevron {
        width: 18px;
        height: 9px;
    }
}

/* ─── Преподаватели: карусель карточек (боевая разметка) ───── */

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

.teachers-section__track-wrap {
    position: relative;
}

.section-teachers__card {
    background: rgba(246, 247, 249, 1);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    height: 100%;
}

.section-teachers__photo {
    width: 206px;
    height: 206px;
    border-radius: var(--radius-full);
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
}

.section-teachers__name {
    font-size: 21px;
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    line-height: 120%;
    margin: 0;
}

.section-teachers__desc {
    font-size: 15px;
    line-height: 120%;
    color: var(--color-text-primary);
    margin: 0;
}

@media (max-width: 670px) {
    .section-teachers__name {
        font-size: 18px;
    }

    .section-teachers__desc {
        font-size: 13px;
    }

    .teachers-section .section-title__title {
        margin: 0 14px;
    }
}

/* ─── Карусель: индикатор и стрелки (боевые) ───────────────── */

.cards-indicator {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    gap: var(--spacing-special-sm);
    border-radius: 30px;
    justify-content: center;
}

.cards-indicator__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 1px 0;
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 24px;
    flex-shrink: 0;
}

.cards-indicator__dot-inner {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: #d0d5e3;
    transition: all 0.25s ease;
}

.cards-indicator__dot--active .cards-indicator__dot-inner {
    width: 23px;
    height: 7px;
    border-radius: 24px;
    background: #091d36;
}

.cards-indicator--teachers-section {
    padding-top: var(--space-8);
}

.slider__arrow {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(234, 239, 252, 1);
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.slider__arrow:hover {
    background: rgba(221, 230, 252, 1);
}

.slider__arrow svg {
    width: 24px;
    height: 24px;
    color: rgba(34, 89, 212, 1);
}

.main_arrow--prev {
    left: -30px;
}

.main_arrow--next {
    right: -30px;
}

.slider__arrow.is-disabled {
    pointer-events: none;
    display: none;
}

.slider__indicator {
    display: flex;
    justify-content: center;
}

@media (max-width: 980px) {
    .main_arrow--next {
        right: 0;
    }

    .main_arrow--prev {
        left: 0;
    }
}

@media (max-width: 767px) {
    .slider__arrow {
        display: none;
    }
}

/* ─── Формы на холсте ──────────────────────────────────────── */

.main .cta-form {
    background: none;
}

/* кит задумал cta-form полноширинной полосой со своими боковыми полями
   (24px с 768, 72px с 1250); на холсте поля уже даёт .section-container —
   свои боковые поля обнуляем, иначе карточка уезжает с оси шапки
   (+24px на 768–1249, +72px от 1250; ловит measure_axes «холст>») */
.section-container > .cta-form {
    padding-left: 0;
    padding-right: 0;
}

/* витринный дефект кита: cta-form__body — grid 1fr 1fr и на мобиле;
   на телефоне складываем в колонку, как на боевых страницах.
   form__title в базе — h2 36px: «Зарегистрируйтесь» не влезает в 375 — понижаем кегль */
@media (max-width: 767px) {
    .cta-form__body {
        display: flex;
        flex-direction: column;
    }

    .cta-form .form__title {
        font-size: var(--type-h4-size);
        line-height: var(--type-h4-lh);
        overflow-wrap: anywhere;
    }

    .cta-form .form__subtitle {
        font-size: var(--type-body-l-size);
    }
}

/* ─── Футер (боевой footer.css) ────────────────────────────── */

.footer {
    padding: 40px 0 24px;
    color: #fff;
    background: #133157;
    position: relative;
    z-index: 1;
}

.footer a {
    text-decoration: none;
}

.footer-top {
    margin-top: var(--space-10);
}

.footer-col-left {
    max-width: 400px;
}

.footer__logo {
    display: flex;
    align-items: center;
    color: #fff;
    gap: 8px;
}

.footer__logo span {
    font-size: 16px;
    text-transform: uppercase;
    line-height: 120%;
}

.footer__logo svg,
.footer__logo img {
    max-width: 60px;
    flex-shrink: 0;
}

/* при полном горизонтальном SVG-лого кита (а не круглом знаке боя) */
.footer__logo svg {
    max-width: 200px;
    height: auto;
}

.footer__link_block {
    margin: 16px 0 50px;
    display: flex;
    flex-direction: column;
}

.footer__link {
    color: #fff;
    max-width: 330px;
    display: block;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
}

.footer__link-xl,
.footer__link-address {
    font-size: 26px;
    line-height: 33px;
    max-width: none;
    color: #fff;
}

.footer-socials {
    gap: 4px;
    margin-top: 10px;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.footer-socials__item {
    width: 56px;
    height: 56px;
    background: #2B4668;
    border-radius: 8px;
}

.footer-socials__item a,
.footer-socials__item svg {
    color: #fff;
    width: inherit;
    height: inherit;
    fill: none;
}

.footer-socials__item svg {
    width: 22px;
    height: 22px;
}

.footer-menu__item {
    max-width: 240px;
}

.footer-menu__item:not(:last-child) {
    margin-right: 6vw;
}

.footer-menu__title {
    color: #fff;
    margin-bottom: 24px;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 21px;
    line-height: 27px;
    text-transform: uppercase;
}

.footer-menu__title svg {
    transform: rotate(-90deg);
    transition: transform 0.2s;
    display: none;
}

.footer-menu__item.is-active .footer-menu__title svg {
    transform: rotate(90deg);
}

.footer-menu__item.is-active .footer-menu__list {
    display: block;
}

.footer-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu__list li:not(:last-child) {
    margin-bottom: 16px;
}

.footer-menu__list a {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    transition: color 0.2s;
}

.footer-menu__list a:hover {
    color: #d5d3d3;
}

.footer__meta {
    border-top: 1px solid rgba(255, 255, 255, 0.23);
    padding-top: 28px;
    margin-top: 48px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.rabo-rp-logos {
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.footer-logo_circle {
    max-width: 68px;
}

.footer-logo_rectangle {
    max-width: 150px;
}

.footer-copyright {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.footer-copyright p,
.footer-copyright a {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    color: #fff;
    margin: 0;
}

/* заголовок-оверлайн блока контактов футера
   (адаптация: на бою из легаси-глобалей) */
.title_block {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

/* утилиты боевого футера (адаптация легаси-глобалей боя) */
.d-flex { display: flex; }
.w-100 { width: 100%; }
.jc-sb { justify-content: space-between; }
.al-center { align-items: center; }
.d-flex-cent { display: flex; align-items: center; justify-content: center; }
.footer .mt-20 { margin-top: 20px; }
.footer .mt-30 { margin-top: 30px; }

@media (min-width: 992px) and (max-width: 1200px) {
    .footer-col-left {
        max-width: 100%;
        width: 100%;
        margin-bottom: 30px;
    }

    .footer-menu {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 1440px) {
    .footer-menu__item:not(:last-child) {
        margin-right: 3vw;
    }
}

@media (max-width: 1300px) {
    .footer-col-left {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        max-width: 100%;
        width: 100%;
        margin-bottom: 32px;
    }

    .footer-info-company,
    .footer-info-company .footer__link_block {
        margin-top: 0;
    }
}

@media (max-width: 1214px) {
    .footer-copyright {
        align-items: flex-start;
    }
}

@media (max-width: 980px) {
    .footer-menu {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-menu__item {
        margin-right: 3vw !important;
    }

    .footer .mt-30 {
        margin-top: 0;
    }

    .footer-menu__title {
        margin-bottom: 0;
        font-size: 18px;
    }
}

@media (max-width: 750px) {
    /* аналог боевой утилиты col-100-xs: колонки футера в столбец */
    .footer-top {
        flex-direction: column;
    }

    .footer-col-left {
        display: flex !important;
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        margin-bottom: 28px;
    }

    .footer__link {
        font-size: 15px;
        line-height: 19px;
    }

    .footer__link-xl,
    .footer__link-address {
        font-size: 21px;
        line-height: 27px;
    }

    .footer__link_block {
        margin: 12px 0 28px;
    }

    .footer-menu {
        display: flex;
        flex-direction: column;
        border-top: 1px solid rgba(255, 255, 255, 0.23);
        padding-top: 28px;
        gap: 28px;
    }

    .footer-menu__item {
        max-width: 100%;
    }

    .footer-menu__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: max-content;
    }

    .footer-menu__title svg {
        display: block;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        padding: 4px;
        margin-left: 5px;
        color: #fff;
    }

    .footer-menu__list {
        display: none;
        padding-top: 16px;
    }

    .footer__meta {
        margin-top: 32px;
        padding-top: 32px;
        gap: 4px;
    }
}

/* ═══ Дополнение 11.08 (снято с боя): анти-слияние шапки, боевые кнопки, тикер, отзывы ═══ */

/* Шторка-размытие под шапкой: контент, проезжающий над/за карточкой шапки,
   растворяется, а не режет глаз (боевой .scroll-blur, z под шапкой) */
/* Боевая btn--tertiary (кит её не знает — кнопка карточек каталога) */
.btn--tertiary {
    background: #FFECE5;
    color: #FF672D;
    font-size: 15px;
    font-weight: 600;
    line-height: 19px;
    padding: 16px;
    min-height: 52px;
    border-radius: 16px;
}
.btn--tertiary:hover { background: #FFDDD0; }
.btn--tertiary:active { background: #FFD0BE; }

/* Боевая btn--brand-light (кнопка на светлой поверхности, «Смотреть все отзывы») */
.btn--brand-light {
    background: #EAEFFC;
    color: #2259D4;
    font-size: 15px;
    font-weight: 600;
    line-height: 19px;
    padding: 16px;
    min-height: 52px;
    border-radius: 16px;
}
.btn--brand-light:hover { background: #D4DCF8; }
.btn--brand-light:active { background: #C3CEF5; }

/* ─── Боевой тикер логотипов (companies-ticker, uprav.ru главная) ─── */
.companies-ticker {
    background: var(--color-bg-secondary, #F2F5F9);
    border-radius: 24px;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    overflow: hidden;
}
.companies-ticker__row {
    display: flex;
    width: max-content;
    animation: ticker-left 39s linear infinite;
}
.companies-ticker__row--reverse { animation-name: ticker-right; }
.companies-ticker__logos {
    display: flex;
    align-items: center;
    gap: 64px;
    padding: 0 32px;
}
.companies-ticker__logo {
    height: 46px;
    width: auto;
    display: block;
    flex-shrink: 0;
    opacity: .8;
    filter: grayscale(1);
}
@keyframes ticker-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes ticker-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@media (max-width: 767px) {
    .companies-ticker__logo { height: 36px; }
    .companies-ticker__logos { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .companies-ticker__row { animation: none; }
    .companies-ticker { overflow-x: auto; }
}

/* ─── Боевой блок «Кейсы и отзывы»: заголовок-ряд + карточки-цитаты ─── */
.section_row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.title-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text-primary);
    text-decoration: none;
}
.title-link svg { width: 24px; height: 24px; }
/* .review-card_catalog (цитата), .review-card__quote/__author/__meta/__position/__company —
   с 16.09 в компоненте кита review-card (review-card.css); здесь не дублируются. */

/* Полный боевой .review-card (видео- и кейс-карточки «Кейсы и отзывы») */
.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-primary, #fff);
    border-radius: 24px;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
}
.review-card:hover { text-decoration: none; }
.review-card__preview {
    position: relative;
    width: 100%;
    height: 205px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-bg-secondary, #F2F5F9);
}
.review-card__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-card__overlay {
    position: absolute;
    left: 18px;
    bottom: 18px;
    right: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.review-card__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    flex-shrink: 0;
}
.review-card__play svg { width: 28px; height: 28px; display: block; }
.review-card__duration {
    display: inline-flex;
    align-items: center;
    padding: 7px 9px 8px;
    background: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    color: #fff;
}
.review-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 24px 28px;
    gap: 10px;
    width: 100%;
}
.review-card__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    padding-top: 16px;
}
.review-card__course {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-text-primary);
    margin: 0;
}
/* ссылка-карточка не наследует глобальный линк-стиль */
a.review-card, a.review-card * { text-decoration: none; }
a.review-card .review-card__course, a.review-card .review-card__name { color: var(--color-text-primary); }
/* на белом листе карточки отзывов — серые (боевое правило course-info-section) */
.advantages-section .review-card,
.advantages-section .review-card_catalog { background: var(--color-bg-secondary, #F2F5F9); }
.advantages-section .review-card__preview { background: #E7ECF3; }


/* ─── Оси листа (11.08): контент полотна сидит на оси шапки на ЛЮБОЙ ширине ───
   Прямые дети полотна получают контейнер шапки (1440/72 → 50 → 25 → 10).
   Вместе с медиа ≤1583 (лист full width) это даёт совпадение осей везде:
   при w≥1584 лист 1584 центр + контейнер 1440 центр листа = ось шапки. */
.course-info-section > * {
    width: 100%;
    min-width: 0; /* полотно кита — flex-колонка: без этого секции сжимаются в fit-content и распирают вьюпорт */
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 72px;
    padding-right: 72px;
    box-sizing: border-box;
}
@media (max-width: 1200px) {
    .course-info-section > * { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 980px) {
    .course-info-section > * { padding-left: 25px; padding-right: 25px; }
}
@media (max-width: 670px) {
    .course-info-section > * { padding-left: 10px; padding-right: 10px; }
}


/* Футер: на планшете (768–980) три колонки меню не влезают — переносим (дефект пойман гейтом 11.08) */
@media (max-width: 980px) {
    .footer-menu { flex-wrap: wrap; row-gap: 24px; }
}

/* Футер 751–980 (пойман гейтом 11.08): контакты + меню в ряд не влезают —
   в столбец уже с 980 (боевой grid 3 колонки для меню на этой полосе уже активен) */
@media (max-width: 980px) {
    .footer-top { flex-direction: column; }
    .footer-col-left { max-width: 100%; width: 100%; margin-bottom: 28px; }
    .footer-menu { width: 100%; }
}


/* Тач-таргеты индикаторов и иконок-ссылок (код-ревью РШУ 21.08): визуал кита
   не меняем, кликабельную зону добираем padding-ом с компенсирующим margin */
.cards-indicator__dot {
    padding: 17px 9px;
    margin: -16px -9px;
}
.section-title__link-btn {
    padding: 8px;
    margin: -8px;
}

.title-link {
    padding: 8px;
    margin: -8px;
}

/* ─── Hero без формы: сервисные страницы и хабы ─────────────────
   Модификатор на __inner (heroes/hero_service.html, hero_hub.html).
   Раньше заводился в page.css каждой страницы — вынесен в слой страницы. */

.section-course-hero__inner--no-form {
    grid-template-columns: 1fr;
    grid-template-areas:
        "left"
        "formats";
    grid-template-rows: auto;
}

.section-course-hero__inner--no-form .section-course-hero__left {
    max-width: 760px;
}

/* лист/карточки начинаются сразу после текста — без пустой синей зоны */
.section-course-hero__inner--no-form.section-bt {
    padding-bottom: var(--space-4);
}

/* ─── Хаб: карточки программ семейства (боевой паттерн /catalog/) ───
   catalog-course-card кита рассчитан на ленту каталога с max-width 420px;
   на хабе — ровная сетка 3 → 2 → 1, карточки одной высоты, кнопки внизу. */

.section-hub-programs {
    margin-bottom: 40px;
}

.section-hub-programs .catalog-course-card-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: stretch;
}

.section-hub-programs .catalog-course-card {
    max-width: none;
    height: 100%;
}

.section-hub-programs .catalog-course-card__actions {
    margin-top: auto;
}

@media (max-width: 1199px) {
    .section-hub-programs .catalog-course-card-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 670px) {
    .section-hub-programs .catalog-course-card-section {
        grid-template-columns: 1fr;
    }
}

/* кегли подписей карточки хаба — в шкалу абзацев страницы (на ≤1199 подзаголовок
   hero 15px; 14px кита рядом = «одна роль в двух размерах», adaptive_checks) */
@media (max-width: 1199px) {
    .section-hub-programs .catalog-course-card__subtitle,
    .section-hub-programs .catalog-course-card__price-monthly {
        font-size: 15px;
    }
}

/* ═══ Паттерны 16.09 (после ревью Саши по /mba/leader/) ═══════════════════════ */

/* Полоса рейтингов и наград — боевой паттерн «Признание рынка» (/mba/): карточки
   с местом («Топ-5») синей пилюлей и подписью-источником (вариант, выбранный РШУ
   на ревью 16.09). Чек-лист с галочками вместо этого — возврат: «топ» должен быть виден. */
.ratings--grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
.rating-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-bg-primary);
    border-radius: var(--radius-l);
    padding: var(--space-5);
    min-height: 100%;
}
.advantages-section .rating-card { background: var(--color-bg-secondary); }
.rating-card__place {
    display: inline-flex;
    width: fit-content;
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--type-h6-size);
    line-height: var(--type-h6-lh);
    white-space: nowrap; /* место — короткое: «ТОП-5», «HR Force 2025»; длинный текст — в подпись */
}
.rating-card__source {
    color: var(--color-text-muted);
    font-size: var(--type-body-m-size);
    line-height: var(--type-body-m-lh);
}
@media (max-width: 1024px) { .ratings--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 669px)  { .ratings--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } } /* 8 наград столбиком = 1100px прокрутки (ревью №12) */

/* Ряд карточек — равная высота: карточки тянутся до самой высокой, подпись/автор
   прижаты к низу (отзывы разной длины «не выровнены» — возврат с ревью). */
.advantages-section__row { align-items: stretch; }
.advantages-section__row > .advantages-card,
.advantages-section__row > .review-card_catalog { height: auto; align-self: stretch; }

/* Список внутри карточки-преимущества (боевые «Кому подойдут…»: заголовок + буллеты
   «почему подойдёт»). Список боя остаётся списком, не склеивается в абзац. */
.advantages-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.advantages-card__list li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--type-body-m-size);
    line-height: var(--type-body-m-lh);
    color: var(--color-text-primary);
}
.advantages-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
}

/* Иконка карточки на брендовой подложке: боевые иконки — белые глифы (PNG/SVG),
   на белом кружке кита они невидимы (/goskontrakt/ 21.08, /mba/leader/ 16.09). */
.advantages-card__icon-circle--brand {
    background: var(--color-primary);
    border: 0;
}
.advantages-card__icon-circle--brand img,
.advantages-card__icon-circle--brand .icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    color: #fff;
}

/* Текстовый блок с выделением: длинный описательный текст боя = лид + абзацы +
   панель-акцент («Преимущество: …»). Сплошная простыня в 800 знаков — возврат. */
.text-block { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.text-block__lead { font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-4); }
.text-block p { margin: 0 0 var(--space-4); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
.text-block p.text-block__lead { font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); } /* лид сильнее правила p (дизайн-ревью 16.09 №5) */
.text-block p:last-child { margin-bottom: 0; }
.note-panel {
    background: var(--color-bg-accent);
    border-radius: var(--radius-l);
    padding: var(--space-6);
    font-size: var(--type-body-m-size);
    line-height: var(--type-body-m-lh);
    color: var(--color-text-primary);
}
.note-panel__label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}
@media (max-width: 1024px) { .text-block { grid-template-columns: 1fr; } }
@media (max-width: 669px) {
    /* на 375 роль «лид» и подзаголовок панели — на шкале body-m, как остальной текст */
    .text-block p.text-block__lead, .hub-top .hub-top__desc, .cta-form .form__subtitle { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
}

/* FAQ на белом листе: карточки вопросов серые (то же боевое правило, что для
   карточек отзывов, — белое на белом «сетка едет», ревью 16.09). Заголовок FAQ —
   всегда внутри листа, не на холсте. */
.advantages-section .section-faq__item { background: var(--color-bg-secondary); }

/* Дизайн-ревью 16.09 (агент), №1: ряд из 4 карточек кита на 769–1024 даёт колонки ~170px,
   заголовки вылезают за карточку. Ряд переносится в 2 колонки, длинные слова переносятся. */
@media (max-width: 1024px) {
    .advantages-section__row { flex-wrap: wrap; }
    /* специфичность выше китовой `.advantages-section__row:last-child .advantages-card:not(…) { flex: 1 }` */
    .advantages-section__row:first-child > .advantages-card:not(.advantages-card--license),
    .advantages-section__row:last-child > .advantages-card:not(.advantages-card--license),
    .advantages-section__row > .advantages-card:not(.advantages-card--license) { flex: 1 1 calc(50% - var(--space-4)); min-width: 0; }
}
.advantages-card__title { min-width: 0; overflow-wrap: break-word; }
/* №6–7: мобильная иерархия — вопрос FAQ не мельче ответа, заголовок CTA-панели на кегле заголовка секции */
@media (max-width: 669px) {
    .section-faq__question { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
    .cta-form .form__title { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); } /* = заголовок секции на 375 (24px), одна роль — один кегль */
}

/* ═══ Холст каталога — страницы уровня 2 / 2.5 (направление, семейство программ):
   боевой /catalog/. Без свечения курса, крошки тёмные, наверху белая карточка
   с H1 и чипсами (кит directions-section + direction-bubble), карточки программ
   на холсте. Решение РШУ 16.09 («страница каталога, а не страница продукта»). ═══ */
body.main--catalog::before,
body.main--catalog::after { display: none; }
.main--catalog .breadcrumbs__link { color: var(--color-text-primary); }
.main--catalog .breadcrumbs__link--current { color: var(--color-text-muted); }
.main--catalog .section-breadcrumbs { padding: var(--space-6) 0 0; }
.hub-top { margin-top: var(--space-5); }
.hub-top .directions-section__card {
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-12) var(--space-12);
    border-radius: var(--radius-l);
}
.hub-top .directions-section__title { text-align: left; font-size: var(--type-h2-size, 36px); line-height: var(--type-h2-lh, 46px); }
.hub-top__desc { margin: calc(-1 * var(--space-3)) 0 0; max-width: 820px; font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); color: var(--color-text-primary); }
.hub-top .directions-tile { gap: var(--space-3); }
.hub-top .direction-bubble { text-decoration: none; color: var(--color-text-primary); }
.hub-top .direction-bubble .icon { width: 22px; height: 22px; }
.main--catalog .section-hub-programs { margin-top: var(--space-8); }
@media (max-width: 767px) {
    .hub-top .directions-section__card { padding: var(--space-6); }
    .hub-top .direction-bubble { max-width: 100%; }
    .hub-top .direction-bubble__label { white-space: normal; } /* длинное имя программы переносится, не обрезается (375) */
    .hub-top .directions-section__title { font-size: var(--type-h3-size, 28px); line-height: var(--type-h3-lh, 34px); }
}

/* ═══ Один межколонник на странице (замер 16.09: ряды шли с зазорами 24/16/20 —
   «сетка едет»). Все ряды карточек — gap 24px (--space-6), как карточки каталога. ═══ */
.advantages-section__row,
.ratings--grid,
.review-card-section--grid,
.catalog-course-card-section { gap: var(--space-6); }
@media (max-width: 669px) {
    .ratings--grid { gap: var(--space-3); }
    .rating-card__place { white-space: normal; } /* «HR Force 2025» в узкой колонке не должна вылезать */
}

/* ═══ Паттерны 16.09, вечер (пересборка «Цифрового лидерства» по каталогу) ═══════ */

/* P19. Первый экран лендинга / направления по паттерну ГЛАВНОЙ (кит `hero`, Figma
   «основной файл РШУ», node 0-1): надзаголовок + H1 + подзаголовок + кнопка слева,
   картинка справа. Без формы записи — форма не на первом экране, а панелью ниже
   (P10), кнопка ведёт на неё якорем. Пока картинки нет — честный .ph--photo. */
.hero-landing__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    gap: var(--space-10);
    align-items: center;
    margin-top: 40px;
}
.hero-landing__body { display: flex; flex-direction: column; align-items: flex-start; }
.hero-landing .section-course-hero__desc { max-width: 640px; }
.hero-landing__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-landing__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
    border-radius: var(--radius-l);
    color: var(--color-text-primary);
}
.hero-landing__inner.section-bt { padding-bottom: var(--space-10); }
@media (max-width: 1024px) {
    .hero-landing__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: var(--space-6); }
}
@media (max-width: 669px) {
    .hero-landing__inner { grid-template-columns: 1fr; margin-top: var(--space-6); }
    .hero-landing__media { display: none; } /* как у кита hero: картинка первого экрана на 375 не показывается */
    .hero-landing__actions { width: 100%; }
    .hero-landing__actions .btn { width: 100%; }
    .hero-landing__inner.section-bt { padding-bottom: var(--space-6); }
}

/* P13. Нумерованные шаги / тезисы в карточках кита: номер в кружке вместо иконки,
   контент от левого края (маршрут сотрудничества, спектр задач). */
.advantages-card__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-bg-accent);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--type-h6-size);
    line-height: var(--type-h6-lh);
}
.advantages-card--start { justify-content: flex-start; align-items: flex-start; }
.advantages-card--start .advantages-card__body { align-items: flex-start; }
.advantages-card--start .advantages-card__title,
.advantages-card--start .advantages-card__text { text-align: left; }

/* P7. Полоса рейтингов на три карточки (когда наград три, а не восемь). */
.ratings--grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .ratings--grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 669px)  { .ratings--grid--3 { grid-template-columns: 1fr; } }

/* P14. Вкладки кита с панелями содержимого: скрытая панель не занимает места,
   лид панели — обычный абзац. */
.tab-panels .tab-panel[hidden] { display: none; }
.tab-panel__lead { margin: 0 0 var(--space-4); }

/* P20. Статьи блога — карточка боевой статейной карусели (/rukovoditel/…/,
   assets/css/article.css), в ките компонента нет. Три статьи — сеткой, больше — Swiper. */
.article-card {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    width: 100%;
    overflow: hidden;
    text-decoration: none;
}
.article-card__preview { position: relative; width: 100%; height: 258px; flex-shrink: 0; overflow: hidden; background: var(--color-bg-accent); }
.article-card__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card__body { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 28px 28px; gap: 10px; width: 100%; }
.article-card__title {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: 18px;
    line-height: 24px;
    color: var(--color-text-primary);
    margin: 0;
    align-self: stretch;
}
.advantages-section .article-card { background: var(--color-bg-secondary); }
.article-section--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 1024px) { .article-section--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 669px)  { .article-section--grid { grid-template-columns: 1fr; } .article-card__preview { height: 205px; } }

/* Заголовок секции с кнопкой справа («Читайте наши статьи» + «Смотреть все»):
   .section_row/.title-link кита + внешний ряд с space-between. */
.section-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.section-header-row .section_row { flex: 1 1 auto; min-width: 0; }
.section-header-row .section-title__title { margin: 0; }

/* P16. Эксперты: карточка без фото — круглый плейсхолдер того же размера, ряд не прыгает;
   на 375 подпись эксперта на шкале body-m, как текст карточек (одна роль — один кегль). */
.section-teachers__photo.ph--photo {
    width: 206px;
    height: 206px;
    min-height: 0;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    font-size: 11px;
    line-height: 14px;
}
@media (max-width: 670px) {
    .section-teachers__desc { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
}

/* P10. CTA-панель кита внутри белого листа (лид-форма, привязанная к секции —
   «Скачать примеры форматов» под вкладками форматов): отступ от контента секции. */
.course-info-section .cta-form { margin-top: var(--space-8); padding-left: 0; padding-right: 0; } /* поля кита обнулены, как и на холсте: ось листа уже даёт 72px */
/* Панель-акцент после ряда карточек / вкладок — с отступом, не впритык; внутри text-block — в колонке, без отступа. */
.advantages-section__cards + .note-panel, .tab-panels + .note-panel { margin-top: var(--space-6); }

/* Карточки кита в листе — контент от верха, не по центру: при разном объёме текста
   в ряду заголовки «пляшут» по вертикали (гейт rhythm, чек «заголовки ряда ±4px»). */
.course-info-section .advantages-card { justify-content: flex-start; }

/* ═══ Паттерны с /mba/ (макет Кати, пересборка 16.09): промо-панель, тест-драйв,
   SEO-текст, фильтр каталога — были своими классами страницы, теперь каталог. ═══ */

/* P12. Промо-панель: текст + кнопка слева, картинка справа (MBA 2.0, тест на подбор).
   Светлая — bg-secondary, акцентная — bg-accent; тёмных промо нет (тёмная одна — тест-драйв). */
.promo-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    gap: var(--space-8);
    background: var(--color-bg-primary); /* на холсте — белая, серая на сером холсте не читалась (ревью /mba/ №2) */
    border-radius: var(--radius-xl);
    padding: var(--space-10);
}
.promo-panel--accent { background: var(--color-bg-accent); }
.promo-panel__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px var(--space-3);
    background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-bg-primary)); /* подложка btn--tertiary кита — от токена */
    color: var(--color-secondary);
    border-radius: var(--radius-full);
    font-size: var(--type-tags-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-tags-lh);
    width: fit-content;
    margin-bottom: var(--space-4);
}
.promo-panel__tag-icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-secondary); flex-shrink: 0; }
.promo-panel__title { font-family: var(--font-family); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0 0 var(--space-6); }
.promo-panel__text { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.promo-panel__media { height: 220px; border-radius: var(--radius-l); font-size: var(--type-body-s13-size); }
.promo-panel__cta { margin-top: var(--space-5); }
.promo-panel__cta[aria-disabled="true"] { cursor: not-allowed; }
.promo-panel__note { display: block; margin-top: var(--space-3); }
@media (max-width: 980px) { .promo-panel { grid-template-columns: 1fr; } .promo-panel__media { height: 160px; } }
@media (max-width: 669px) { .promo-panel { padding: var(--space-6); } .promo-panel__cta { width: 100%; } }

/* P11. Тест-драйв — единственная тёмная панель страницы (боевой паттерн /mba/;
   цвет — как у subscribe-form кита). Слева текст и выбор формата, справа медиа, форма в ряд снизу. */
.testdrive-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-8);
    background: var(--color-primary); /* тёмно-синяя панель макета — --color-primary (правило Саши 17.09; --color-text-primary — токен текста, не фона) */
    border-radius: var(--radius-l);
    padding: var(--space-10);
}
.testdrive-panel__title { font-family: var(--font-family); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); margin: 0 0 var(--space-6); }
.testdrive-panel__text { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: color-mix(in srgb, var(--color-text-inverse) 80%, transparent); margin: 0 0 var(--space-6); }
.testdrive-panel__choices { display: flex; flex-direction: column; gap: var(--space-3); }
.testdrive-panel__choice { position: relative; display: flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-text-inverse); }
.testdrive-panel__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.testdrive-panel__choice-dot { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--color-text-inverse) 50%, transparent); flex-shrink: 0; }
.testdrive-panel__choice-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-inverse); transform: scale(0); transition: transform .15s ease; }
.testdrive-panel__choice input:checked + .testdrive-panel__choice-dot::after { transform: scale(1); }
.testdrive-panel__media { color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent); border-color: color-mix(in srgb, var(--color-text-inverse) 35%, transparent); background: color-mix(in srgb, var(--color-text-inverse) 6%, transparent); min-height: 200px; }
.testdrive-panel__form { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-8); border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 15%, transparent); }
.testdrive-panel__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.testdrive-panel .checkbox__label, .testdrive-panel .checkbox__label a { color: var(--color-text-inverse); }
@media (max-width: 980px) { .testdrive-panel { grid-template-columns: 1fr; } .testdrive-panel__fields { grid-template-columns: 1fr; } }
@media (max-width: 669px) { .testdrive-panel { padding: var(--space-6); } .testdrive-panel__form .btn { width: 100%; } }

/* P18. SEO-текст в конце страницы: свёрнут до 120px с градиентом, кнопка «Подробнее» (page.js: data-seo-toggle). */
.seo-text__title { margin: 0 0 var(--space-6); }
.seo-text__body { display: grid; gap: var(--space-2); overflow: hidden; max-height: 120px; position: relative; transition: max-height .25s ease; }
.seo-text__body.is-open { max-height: 4000px; }
.seo-text__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-primary) 0%, transparent) 0%, var(--color-bg-primary) 100%); pointer-events: none; }
.seo-text__body.is-open::after { opacity: 0; }
.seo-text__body p { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.seo-text__subtitle { font-weight: var(--font-weight-bold); color: var(--color-text-primary) !important; margin-bottom: var(--space-2) !important; }
.seo-text__list { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--color-text-muted); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
.seo-text__list li { margin-bottom: var(--space-1); }
.seo-text__toggle { margin-top: var(--space-4); }

/* Фильтр над карточками каталога (чипсы формата) и ряд кнопок под секцией. */
.section-hub-programs__filter { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.section-hub-programs__filter-label { font-size: var(--type-body-s13-size); color: var(--color-text-muted); }
.section-hub-programs__filter .filter-tags { flex-wrap: wrap; }
.section-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
@media (max-width: 669px) { .section-actions .btn { width: 100%; } }

/* Карточки семейств программ на холсте (P2): catalog-course-card кита + список фактов внутри. */
.catalog-course-card .advantages-card__list { margin: var(--space-2) 0 var(--space-4); }
.catalog-course-card__tags-row { margin-bottom: var(--space-4); }

/* Дизайн-ревью 16.09 (агент, «Цифровое лидерство») — правки слоя */
.tabs + .tab-panels { margin-top: var(--space-6); } /* тезис вкладки не прилипает к пилюлям (№2) */
.advantages-card__list--wide { margin-top: var(--space-5); gap: var(--space-3); } /* список тезисов вне карточки (№8) */
.advantages-card__list--wide li { font-size: var(--type-body-l-size, 18px); line-height: var(--type-body-l-lh, 24px); padding-left: var(--space-6); }
.advantages-card__list--wide li::before { top: 0.6em; width: 8px; height: 8px; }
.advantages-card__list--wide + .note-panel { margin-top: var(--space-6); }
.experts-slider .swiper-slide { height: auto; display: flex; } /* карточки экспертов одной высоты в ряду (№10) */
.experts-slider .section-teachers__card { height: 100%; width: 100%; }
.slider__arrow.swiper-button-disabled { display: none; } /* Swiper ставит свой класс, не .is-disabled (№11) */

/* Дизайн-ревью 16.09 (агент, /mba/) — правки слоя */
/* №3: заголовки панелей — на той же лесенке, что заголовок секции (24 → 32 → h2) */
.promo-panel__title, .testdrive-panel__title, .seo-text__title { font-size: 24px; line-height: 30px; }
@media (min-width: 768px)  { .promo-panel__title, .testdrive-panel__title, .seo-text__title { font-size: 32px; line-height: 40px; } }
@media (min-width: 1224px) { .promo-panel__title, .testdrive-panel__title, .seo-text__title { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); } }
/* №11: видеокарточка в сетке — подпись у низа, как у цитат */
.review-card-section--grid > .review-card { justify-content: space-between; }
/* №14: шторка размытия — под кромкой карточки шапки, а не под верхом окна (page.js пишет --header-height) */
/* Шторки размытия под шапкой НЕТ (Саша, 16.09 20:52: «какая-то плашка бегает»; ещё раньше — «прозрачная плашка»).
   Карточка шапки сама с blur, контент просто уходит под неё. Боевой .scroll-blur не рисуем. */
@media (max-width: 669px) {
    .ratings--grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* №5: шесть наград не столбиком */
    .section-m > .section-title-row, .section-title-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); } /* №12 */
    /* №15: один межколонник на 375 — 12px у всех рядов */
    .advantages-section__row, .catalog-course-card-section, .review-card-section--grid, .article-section--grid { gap: var(--space-3); }
    /* №16: кнопки карточек и панелей на всю ширину, как остальные CTA на 375 */
    .catalog-course-card__actions .btn, .seo-text__toggle, .promo-panel__cta { width: 100%; }
    .catalog-course-card__actions { align-self: stretch; } /* карточка кита — flex-start, ряд кнопок был шириной с кнопку (17.09) */
}

/* ═══ 16.09, 21:00 — правки по просмотру Саши на dev2 ═══════════════════════════ */

/* P13-маршрут: схема «змейкой» — номера на линии, 4 шага в ряд, второй ряд справа налево,
   поворот линией за правым краем (ТЗ: «плашками, стрелками — без открытки»). */
.route { display: flex; flex-direction: column; gap: var(--space-10); --route-line: color-mix(in srgb, var(--color-primary) 22%, transparent); }
.route__row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.route__row--reverse { direction: rtl; }
.route__step { direction: ltr; position: relative; padding: 64px var(--space-3) 0; text-align: center; }
.route__step::before { content: ""; position: absolute; top: 21px; left: 0; right: 0; height: 2px; background: var(--route-line); }
.route__row:first-child .route__step:first-child::before { left: 50%; }     /* старт у шага 1 */
.route__row--reverse .route__step:last-child::before { left: 50%; }         /* финиш у шага 8 (крайний левый) */
.route__num {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--color-primary); color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold); font-size: var(--type-h6-size); line-height: var(--type-h6-lh);
    box-shadow: 0 0 0 6px var(--color-bg-primary);
}
.route__text { margin: 0; font-size: 16px; line-height: 22px; font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
/* поворот: линия первого ряда уходит за правый край, вертикаль, линия второго ряда возвращается */
.route__row:not(:last-child)::after, .route__row + .route__row::before { content: ""; position: absolute; right: -1px; width: 2px; background: var(--route-line); }
.route__row:not(:last-child)::after { top: 21px; bottom: 0; }
.route__row + .route__row::before { top: calc(-1 * var(--space-10)); height: calc(var(--space-10) + 23px); }
/* стрелка в конце маршрута */
.route__row:last-child .route__step:last-child .route__num::after { content: ""; position: absolute; left: -22px; top: 16px; border: 6px solid transparent; border-right: 10px solid color-mix(in srgb, var(--color-primary) 35%, transparent); }
@media (max-width: 1024px) { .route__text { font-size: 15px; line-height: 20px; } }
@media (max-width: 669px) {
    .route { gap: 0; }
    .route__row, .route__row--reverse { grid-template-columns: 1fr; direction: ltr; }
    .route__step { padding: 0 0 var(--space-6) 64px; text-align: left; min-height: 44px; }
    .route__step::before, .route__row:first-child .route__step:first-child::before, .route__row--reverse .route__step:last-child::before { top: 0; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; }
    .route__row:last-child .route__step:last-child::before { display: none; }
    .route__row::after, .route__row + .route__row::before, .route__num::after { display: none; }
    .route__num { left: 0; transform: none; }
    .route__text { padding-top: 10px; }
}

/* P21. Форматы по уровням — группы «уровень → форматы»: слева номер, название уровня и тезис,
   справа строки форматов (название · срок · для чего). Наглядная альтернатива вкладкам
   (Саша 16.09: «нечитаемый формат»). */
.format-groups { display: flex; flex-direction: column; gap: var(--space-5); }
.format-group { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); padding: var(--space-6); background: var(--color-bg-secondary); border-radius: var(--radius-l); }
.format-group__head { display: flex; gap: var(--space-4); align-items: flex-start; }
.format-group__title { margin: 0 0 var(--space-2); font-size: 21px; line-height: 27px; font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.format-group__lead { margin: 0; font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-text-muted); }
.format-group__rows { display: flex; flex-direction: column; gap: var(--space-3); }
.format-row { display: grid; grid-template-columns: 190px 112px minmax(0, 1fr); /* жёсткие колонки: срок и описание стоят на одной оси во всех группах (Саша 17.09: «едет сетка») */ gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-5); background: var(--color-bg-primary); border-radius: var(--radius-m, 16px); }
.format-row__name { margin: 0; font-size: 16px; line-height: 22px; font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.format-row__time { display: inline-flex; width: fit-content; padding: 4px var(--space-3); border-radius: var(--radius-full); background: var(--color-bg-accent); color: var(--color-primary); font-size: var(--type-body-s13-size, 13px); line-height: 18px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.format-row__text { margin: 0; font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-text-muted); }
@media (max-width: 1024px) { .format-group { grid-template-columns: 1fr; gap: var(--space-4); } }
@media (max-width: 669px) {
    .format-group { padding: var(--space-4); }
    .format-row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
    .format-row__time { order: 3; }
}

/* Перебивка-иллюстрация внутри CTA-панели (P10): картинка под текстом в левой колонке,
   форма справа как была. Саша 16.09: «нагенери картинок для главного экрана и перебивок». */
.cta-form__media { margin-top: var(--space-6); max-width: 460px; aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden; }
.cta-form__media img, .hero-landing__image { width: 100%; height: 100%; object-fit: cover; display: block; }
img.hero-landing__image { aspect-ratio: 4 / 3; }
@media (max-width: 669px) { .cta-form__media { max-width: none; aspect-ratio: 16 / 10; } }


/* ═══ Круг правок 17.09 (Саша, «Цифровое лидерство») ═══ */

/* P10 + иллюстрация: картинка — средняя колонка панели во всю её высоту, без своей рамки,
   края растворены маской, фон сведён с панелью (multiply). Высоту панели задаёт форма —
   картинка её не раздувает (Саша 17.09). ≤1249 картинки нет. */
.cta-form--media .cta-form__media { display: none; }
@media (min-width: 1250px) {
    .cta-form--media .cta-form__body { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-6); overflow: hidden; }
    .cta-form--media .cta-form__media {
        display: block; position: relative; align-self: stretch; margin: -40px 0 -48px; max-width: none; aspect-ratio: auto; border-radius: 0;
        mix-blend-mode: multiply;
        -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
        mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
    }
    .cta-form--media .cta-form__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    /* панель-призыв сразу под первым экраном: заголовок на ступень крупнее */
    .cta-form--lead .form__title { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); }
}

/* P23. Итоговая панель с иллюстрацией: вывод секции на фирменном синем, картинка справа
   в край панели, растворена в фон. Варианты: текст-вывод; вывод + три факта + кнопка. */
.summary-panel {
    position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    margin-top: var(--space-6); border-radius: var(--radius-l); min-height: 224px;
    background: linear-gradient(100deg, var(--color-primary-hover) 0%, var(--color-primary) 100%); color: var(--color-text-inverse); /* только токены кита */
}
.summary-panel__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); }
.summary-panel__label { font-size: var(--type-body-s13-size, 13px); line-height: 18px; font-weight: var(--font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.summary-panel__text { margin: 0; font-size: 21px; line-height: 29px; font-weight: var(--font-weight-medium); }
.summary-panel__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; width: 100%; }
.summary-panel__facts li { padding-left: var(--space-4); border-left: 2px solid color-mix(in srgb, var(--color-text-inverse) 35%, transparent); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
.summary-panel__facts strong { display: block; margin-bottom: var(--space-1, 4px); font-size: 18px; line-height: 24px; font-weight: var(--font-weight-bold); }
.summary-panel__media { position: relative; min-height: 100%; }
.summary-panel__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0, #000 55%);
}
@media (max-width: 1024px) {
    .summary-panel { grid-template-columns: 1fr; }
    .summary-panel__media { display: none; }
}
@media (max-width: 669px) {
    .summary-panel__body { padding: var(--space-5); }
    .summary-panel__text { font-size: 18px; line-height: 25px; }
    .summary-panel__facts { grid-template-columns: 1fr; gap: var(--space-4); }
    .summary-panel .btn { width: 100%; }
}

/* P24. Шаги с иллюстрацией: вместо сплошного списка — карточки-шаги 2×2 (номер, тезис, пояснение)
   и картинка колонкой справа на высоту карточек (Саша 17.09: «сплошным текстом сложно читать»). */
.steps-media { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); }
.steps-media__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.steps-media__grid .advantages-card { height: 100%; }
.steps-media__media { position: relative; border-radius: var(--radius-l); overflow: hidden; min-height: 320px; }
.steps-media__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps-media + .note-panel, .steps-media + .summary-panel, .advantages-section__cards + .summary-panel { margin-top: var(--space-6); }
@media (max-width: 1024px) {
    .steps-media { grid-template-columns: 1fr; }
    .steps-media__media { display: none; }
}
@media (max-width: 669px) { .steps-media__grid { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Карточки с иконкой в ряду: заголовки разной длины (1 и 2 строки) встают на общую нижнюю линию,
   пояснения начинаются с одной строки во всём ряду (Саша 17.09: «выравнивание по нижнему краю»). */
@media (min-width: 1025px) {
    .advantages-section__row--bottom .advantages-card__title { display: flex; align-items: flex-end; justify-content: center; min-height: 2lh; }
}

/* Первый экран без кнопки (лид-панель сразу под ним): панель подтянута к первому экрану */
.hero-landing--no-actions .hero-landing__inner.section-bt { padding-bottom: var(--space-4); }

/* P10 в окне: лид-форма по кнопке (когда ТЗ даёт форму внутри секции, а панель заявки уже стоит рядом).
   Нативный <dialog>, внутри — та же разметка cta-form кита. */
.lead-dialog { border: 0; padding: 0; width: min(560px, calc(100vw - 32px)); border-radius: var(--radius-xl); background: var(--cta-form-bg-card, #E0E8F5); color: var(--color-text-primary); }
.lead-dialog::backdrop { background: color-mix(in srgb, var(--color-text-primary) 55%, transparent); }
.lead-dialog .cta-form { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: none; }
.lead-dialog .form__title { font-size: var(--type-h4-size, 28px); line-height: var(--type-h4-lh, 34px); padding-right: var(--space-8); }
.lead-dialog .form__subtitle { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
.lead-dialog .cta-form__form { margin-top: var(--space-2); }
.lead-dialog__close { position: absolute; top: var(--space-5); right: var(--space-5); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--color-bg-primary); color: var(--color-text-primary); cursor: pointer; }
.lead-dialog__close .icon { width: 20px; height: 20px; }
@media (max-width: 669px) { .lead-dialog .cta-form { padding: var(--space-5); } .lead-dialog .cta-form__submit.btn { width: 100%; } }


/* ═══ Круг 17.09 №2 — по референсу Ольги (боевая /mba/mini-mba-klassichesky/) ═══ */

/* P19 + лид-магнит: плашка «Презентация … + Скачать» на первом экране, как на бою у hero курса
   («Презентация программы»). Форма — в окне (lead-dialog), а не панелью под первым экраном. */
.hero-magnet { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-8); padding: var(--space-5); max-width: 560px; border-radius: var(--radius-2l); background: var(--cta-form-bg-card, var(--color-bg-accent)); color: var(--color-text-primary); }
.hero-magnet__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-bg-primary); color: var(--color-secondary); }
.hero-magnet__icon .icon { width: 24px; height: 24px; }
.hero-magnet__body { flex: 1; min-width: 0; }
.hero-magnet__title { margin: 0 0 var(--space-1, 4px); font-size: 18px; line-height: 24px; font-weight: var(--font-weight-bold); }
.hero-magnet__text { margin: 0; font-size: 15px; line-height: 20px; font-weight: var(--font-weight-medium); }
.hero-magnet .btn { flex-shrink: 0; }
@media (max-width: 669px) {
    .hero-magnet { flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); }
    .hero-magnet .btn { width: 100%; }
}

/* Ряды карточек сеткой: китовые `:first-child/:last-child` брейкпоинты ≤1350 рассчитаны на витрину
   (2+лицензия) и на страницах ломают первый ряд в столбик (Ольга 17.09, ~1100px). */
.advantages-section__cards--grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.advantages-section__cards--grid3 > .advantages-section__row { display: contents; }
@media (max-width: 1024px) { .advantages-section__cards--grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (max-width: 669px) { .advantages-section__cards--grid3 { grid-template-columns: 1fr; gap: var(--space-3); } }

/* Логотипы клиентов в цвете — как на боевой /corporate/ */
.companies-ticker--color .companies-ticker__logo { filter: none; opacity: 1; }

/* ═══ Круг 17.09 №3 — паттерны, снятые с боевой /mba/mini-mba-klassichesky/ (разнообразие блоков) ═══ */

/* P25 `pairs` — бой `section-who`: строки-пары «слева задача → справа что делаем», подписи колонок сверху. */
.pairs { display: grid; gap: var(--space-3); }
.pairs__head, .pairs__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.pairs__head { padding: 0 var(--space-8); margin-bottom: var(--space-2); }
.pairs__label { margin: 0; font-size: var(--type-h5-size, 24px); line-height: var(--type-h5-lh, 30px); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.pairs__row { padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl); background: var(--color-bg-secondary); align-items: center; }
.pairs__cell { display: flex; align-items: flex-start; gap: var(--space-4); margin: 0; font-size: 18px; line-height: 24px; font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.pairs__cell--lead { align-items: center; font-weight: var(--font-weight-bold); }
.pairs__cell .icon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 0; color: var(--color-primary); }
.pairs + .summary-panel { margin-top: var(--space-6); }
@media (max-width: 1024px) {
    .pairs__head { display: none; }
    .pairs__row { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-2l); }
}
@media (max-width: 669px) { .pairs__cell { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); } .pairs__cell--lead { font-size: 18px; line-height: 24px; } }

/* P26 `md` (master-detail) — бой «Программа курса» (`program-popup`): слева список пунктов с номером-плашкой,
   справа панель выбранного пункта с кнопкой-скачиванием. ≤1024 — все панели раскрыты стопкой, список скрыт. */
.md { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--space-6); align-items: stretch; }
.md__list { display: flex; flex-direction: column; gap: var(--space-4); }
.md__item { display: flex; gap: var(--space-4); align-items: flex-start; width: 100%; padding: var(--space-5) var(--space-6); border: 0; border-radius: var(--radius-2l); background: var(--color-bg-secondary); color: var(--color-text-primary); text-align: left; font-family: inherit; cursor: pointer; transition: background .2s, color .2s; }
.md__item:hover { background: var(--color-bg-accent); }
.md__badge { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 36px; height: 28px; margin-top: 2px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-bg-primary)); color: var(--color-secondary); font-size: 14px; line-height: 14px; font-weight: var(--font-weight-semibold); }
.md__name { display: block; font-size: 21px; line-height: 27px; font-weight: var(--font-weight-bold); }
.md__hint { display: block; margin-top: var(--space-1, 4px); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.md__item.is-active { background: var(--color-primary); color: var(--color-text-inverse); }
.md__item.is-active .md__hint { color: inherit; opacity: .8; }
.md__item.is-active .md__badge { background: var(--color-bg-primary); color: var(--color-primary); }
.md__panel { display: none; flex-direction: column; gap: var(--space-5); height: 100%; padding: var(--space-8) var(--space-10); border-radius: var(--radius-xl); background: var(--color-bg-secondary); }
.md__panel.is-active { display: flex; }
.md__panel-title { display: none; margin: 0; font-size: 21px; line-height: 27px; font-weight: var(--font-weight-bold); }
.md__lead { margin: 0; font-size: 18px; line-height: 25px; font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.md__foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.md + .summary-panel { margin-top: var(--space-6); }
@media (max-width: 1024px) {
    .md { grid-template-columns: 1fr; }
    .md__list { display: none; }
    .md__panels { display: flex; flex-direction: column; gap: var(--space-4); }
    .md__panel { display: flex; height: auto; padding: var(--space-5); border-radius: var(--radius-2l); }
    .md__panel-title { display: block; }
    .md__foot { display: none; }
    .md__panel:last-child .md__foot { display: flex; border-top: 0; padding-top: 0; }
    .md__foot .btn { width: 100%; }
}

/* P27 `stage-cards` — бой `section-track`: карточки этапов, заголовок фирменным синим, крупная бледная цифра в углу. */
.stage-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.stage-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%; padding: var(--space-8); border-radius: var(--radius-2l); background: var(--color-bg-secondary); overflow: hidden; }
.stage-card__title { margin: 0; font-size: var(--type-h5-size, 24px); line-height: 32px; font-weight: var(--font-weight-bold); color: var(--color-primary); }
.stage-card__text { margin: 0; max-width: 85%; font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.stage-card__num { align-self: flex-end; margin-top: auto; font-size: 96px; line-height: 80px; font-weight: var(--font-weight-bold); color: color-mix(in srgb, var(--color-secondary) 16%, transparent); }
@media (max-width: 1024px) { .stage-cards, .stage-cards--2 { grid-template-columns: 1fr; } .stage-card { padding: var(--space-5); } .stage-card__num { font-size: 64px; line-height: 56px; } .stage-card__title { font-size: 21px; line-height: 27px; } }

/* P28 `media-panel` — бой «диплом»: серая панель, слева список тезисов (жирный тезис + пояснение), справа картинка в край. */
.media-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: var(--radius-xl); background: var(--color-bg-secondary); overflow: hidden; }
.media-panel__list { display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); margin: 0; padding: var(--space-8) var(--space-10); list-style: none; }
.media-panel__list li { position: relative; padding-left: var(--space-6); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.media-panel__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-primary); }
.media-panel__list strong { display: block; margin-bottom: var(--space-1, 4px); font-size: 21px; line-height: 27px; font-weight: var(--font-weight-bold); }
.media-panel__media { position: relative; min-height: 360px; }
.media-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) { .media-panel { grid-template-columns: 1fr; border-radius: var(--radius-2l); } .media-panel__media { min-height: 0; aspect-ratio: 16 / 9; order: -1; } .media-panel__list { padding: var(--space-5); gap: var(--space-4); } .media-panel__list strong { font-size: 18px; line-height: 24px; } }

/* P29 `fact-cards` — бой `section-price__feature`: иконка в кружке и заголовок в строку, пояснение под ними. */
.fact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fact-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-2l); background: var(--color-bg-secondary); }
.fact-card__head { display: flex; align-items: center; gap: var(--space-4); }
.fact-card__title { margin: 0; font-size: 21px; line-height: 27px; font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.fact-card__text { margin: 0; font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
@media (max-width: 1024px) { .fact-cards { grid-template-columns: 1fr; } .fact-card { padding: var(--space-5); } .fact-card__title { font-size: 18px; line-height: 24px; } }

/* ═══ Круг 17.09 №4 — /mba/ уровня 2.5 (макет Кати, пересборка): фильтр каталога с боя,
   тёплая промо-панель, факты «бенто», маршрут 3+3, видео-тизер, синяя CTA-панель ═══ */

/* Фильтр каталога — боевой `select` /catalog/ (правила сняты с uprav.ru 17.09, цвета — токены).
   Выпадающий список «Формат обучения ▾», выбранный пункт + крестик сброса; JS — page.js `data-select`. */
.section-hub-programs .select-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-6); }
.select { position: relative; display: inline-block; }
.select__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-width: 247px; min-height: 64px; padding: var(--space-5) var(--space-6); border: 0; border-radius: var(--radius-m); background: var(--color-bg-primary); color: var(--color-text-primary); font-family: var(--font-family); font-weight: var(--font-weight-medium); font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); white-space: nowrap; cursor: pointer; transition: background .15s; }
.select__label { flex: 1 1 0%; text-align: left; }
.select__chevron { width: 15px; height: 15px; flex-shrink: 0; transform: rotate(90deg); transition: transform .2s; }
.select--open .select__chevron { transform: rotate(-90deg); }
.select--selected .select__chevron { display: none; }
.select__clear { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--color-text-primary); cursor: pointer; }
.select__clear:not([hidden]) { display: flex; }
.select__clear .icon { width: 14px; height: 14px; }
.select__dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 2; min-width: 100%; margin: 0; padding: var(--space-3); list-style: none; flex-direction: column; gap: 2px; border-radius: var(--radius-m); background: var(--color-bg-primary); box-shadow: var(--elevation-lg); }
.select--open .select__dropdown { display: flex; }
.select__option { display: flex; align-items: center; padding: 10px; border-radius: var(--radius-s); color: var(--color-text-primary); font-weight: var(--font-weight-medium); font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); white-space: nowrap; cursor: pointer; transition: background .15s; }
.select__option:hover { background: var(--color-bg-secondary); }
.select__option--active { background: var(--color-bg-accent); color: var(--color-primary); }
.catalog-empty { margin: 0; padding: var(--space-8); border-radius: var(--radius-2l); background: var(--color-bg-primary); color: var(--color-text-muted); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
.catalog-course-card .filter-tags a.filter-tag { text-decoration: none; }
@media (max-width: 1024px) { .select__trigger, .select__option { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); } .select__trigger { min-height: 52px; min-width: 209px; padding: 16px 20px; } }
@media (max-width: 670px) { .section-hub-programs .select-row, .select { width: 100%; } .select__trigger { min-height: 44px; } .select__option { white-space: normal; } }

/* P12 тёплая — промо «MBA 2.0» (макет: светло-оранжевая панель, оранжевая метка, фото справа).
   Фон и рамка — от --color-secondary, фото боя — в скруглённой рамке на высоту текста. */
.promo-panel--warm { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; background: var(--color-secondary); color: var(--color-text-inverse); } /* оранжевая панель макета — --color-secondary */
.promo-panel--warm .promo-panel__tag { background: var(--color-bg-primary); color: var(--color-secondary); }
.promo-panel--warm .promo-panel__title, .promo-panel--warm .promo-panel__text { color: var(--color-text-inverse); }
.promo-panel__photo { position: relative; min-height: 280px; border-radius: var(--radius-l); overflow: hidden; }
.promo-panel__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) { .promo-panel--warm { grid-template-columns: 1fr; } .promo-panel__photo { min-height: 0; aspect-ratio: 16 / 10; order: -1; } }
.advantages-section .promo-panel--warm { background: var(--color-secondary); }

/* P29 «бенто» — факты «MBA №1»: сетка 4 колонки, первая карточка на две (макет), заголовок фирменным синим;
   карточка без заголовка — текст-тезис крупнее. */
.fact-cards--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.fact-cards--bento .fact-card--wide { grid-column: span 2; }
.fact-cards--bento .fact-card__title { color: var(--color-primary); }
.fact-card__lead { margin: 0; font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
@media (max-width: 1024px) { .fact-cards--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (max-width: 669px) { .fact-cards--bento { grid-template-columns: 1fr; gap: var(--space-3); } .fact-cards--bento .fact-card--wide { grid-column: auto; } .fact-card__lead { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); } }

/* P7 — шесть рейтингов в ряд (макет /mba/): 6 → 3 → 2 колонки. */
.ratings--grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1249px) { .ratings--grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 669px)  { .ratings--grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact-cards + .ratings--grid { margin-top: var(--space-6); }

/* P13a по 3 шага в ряд со заголовком и пояснением (бой /mba/ «Как проходит обучение» — змейка 3+3). */
.route--3 .route__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route--3 .route__step { padding-left: var(--space-6); padding-right: var(--space-6); }
.route__note { margin: var(--space-2) 0 0; font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); color: var(--color-text-muted); }
@media (max-width: 669px) { .route--3 .route__row { grid-template-columns: 1fr; } .route--3 .route__step { padding: 0 0 var(--space-6) 64px; } }

/* P26 — пункты без подсказки: список в панели. */
.md__panel .advantages-card__list { margin: 0; gap: var(--space-3); }
.md__panel .advantages-card__list li { font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); }
@media (max-width: 669px) { .md__panel .advantages-card__list li { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); } }

/* P11 по макету 2.5: слева текст и форма, справа видео-тизер (боевая разметка `section-trial__video`
   с /mba/mini-mba-klassichesky/; видео — в окне). ≤1249 — форма под медиа на всю ширину. */
.testdrive-panel--teaser { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); grid-template-areas: "text media" "form media"; align-items: start; column-gap: var(--space-10); row-gap: var(--space-6); }
.testdrive-panel--teaser > :first-child { grid-area: text; }
.testdrive-panel--teaser .section-trial__video { grid-area: media; align-self: stretch; }
.testdrive-panel--teaser .testdrive-panel__form { grid-area: form; padding-top: 0; border-top: 0; }
.testdrive-panel--teaser .testdrive-panel__text { margin-bottom: var(--space-4); }
.section-trial__video { position: relative; min-height: 320px; border-radius: var(--radius-l); overflow: hidden; background: var(--color-bg-accent); }
.section-trial__video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.section-trial__play { position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-text-primary) 65%, transparent); color: var(--color-text-inverse); cursor: pointer; transition: background .2s; }
.section-trial__play:hover { background: color-mix(in srgb, var(--color-text-primary) 85%, transparent); }
.section-trial__play .icon { width: 24px; height: 24px; margin-left: 3px; }
.section-trial__duration { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: 7px 9px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--color-text-primary) 60%, transparent); color: var(--color-text-inverse); font-size: var(--type-tags-size); line-height: 1; font-weight: var(--font-weight-bold); }
.section-trial__badge { position: absolute; top: 20px; left: 20px; z-index: 1; display: inline-flex; align-items: center; padding: 10px 22px; border-radius: var(--radius-m); background: var(--color-bg-primary); color: var(--color-primary); font-size: var(--type-body-m-size); line-height: 1; font-weight: var(--font-weight-medium); }
@media (max-width: 1249px) {
    .testdrive-panel--teaser { grid-template-columns: 1fr; grid-template-areas: "text" "media" "form"; }
    .testdrive-panel--teaser .section-trial__video { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (min-width: 981px) and (max-width: 1249px) { .testdrive-panel--teaser .testdrive-panel__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Окно с видео (тот же нативный dialog, что у лид-форм). iframe получает src при открытии, теряет при закрытии. */
.video-dialog { width: min(1040px, calc(100vw - 32px)); background: var(--color-text-primary); }
.video-dialog__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-dialog .lead-dialog__close { top: var(--space-3); right: var(--space-3); }

/* P23 с кнопкой и картинкой — промо «Не знаете, какую программу выбрать?» (макет: синяя панель, оранжевая кнопка). */
.summary-panel--promo { margin-top: 0; }
.summary-panel--promo .summary-panel__title { margin-bottom: var(--space-2); }
.summary-panel__title { margin: 0; font-family: var(--font-family); font-weight: var(--font-weight-bold); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); }
@media (min-width: 768px)  { .summary-panel__title { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); } }
.summary-panel--promo .summary-panel__text { font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); }

/* P10 на фирменном синем — «Подключите корпоративное обучение» (макет): текст белый, поля белые, кнопка оранжевая. */
.cta-form--brand { --cta-form-bg-card: var(--color-primary); color: var(--color-text-inverse); }
.cta-form--brand .form__title, .cta-form--brand .form__subtitle,
.cta-form--brand .checkbox__label, .cta-form--brand .checkbox__label a { color: var(--color-text-inverse); }
.cta-form--brand .form__subtitle { opacity: .85; }
.testdrive-panel__fields .input-field-wrap, .testdrive-panel__fields .input-field { min-width: 0; width: 100%; } /* поля кита с min-width вылезали из колонки под видео */

/* 1100 (просмотр 17.09): три карточки семейств и каталог держат 3 колонки до 1025 — на 1199 было 2+1 с сиротой */
@media (min-width: 1025px) and (max-width: 1199px) { .section-hub-programs .catalog-course-card-section { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* бенто на 1025–1249 — две колонки: в четырёх узких тезис шёл в 9 строк */
@media (min-width: 670px) and (max-width: 1249px) { .fact-cards--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
/* тест-драйв на 981–1249: текст и видео рядом, форма под ними во всю ширину */
@media (min-width: 981px) and (max-width: 1249px) {
    .testdrive-panel--teaser { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text media" "form form"; }
    .testdrive-panel--teaser .section-trial__video { align-self: start; }
}
/* отзывы сеткой 4 на 1025–1249 — 2×2: цитаты в узких колонках шли простынёй */
@media (min-width: 1025px) and (max-width: 1249px) { .review-card-section--grid:not(.review-card-section--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 670–1199 в две колонки: нечётная последняя карточка — на всю ширину, без сироты (768, 17.09) */
@media (min-width: 671px) and (max-width: 1024px) { .section-hub-programs .catalog-course-card-section > .catalog-course-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 980px) { .promo-panel__photo { aspect-ratio: 16 / 9; max-height: 320px; } }

/* ═══ Дизайн-ревью 17.09 (Opus) по /mba/ 2.5 ═══ */
/* Ссылка-кнопка в строке заголовка — с фоном, поэтому без отрицательного отступа текстовой ссылки (вылезала за ось на 8px) */
.section-title-row .section-title__link-btn { margin: 0; padding: var(--space-3) var(--space-4); }
.review-card__more { align-self: flex-start; margin: 0; padding: 0; background: none; }
/* Семейства программ (блок 03 макета) — белый лист, карточки с обводкой: не сливаются с каталогом на холсте ниже */
.hub-families { padding: var(--space-8); border-radius: var(--radius-xl); background: var(--color-bg-primary); }
.hub-families .catalog-course-card { box-shadow: inset 0 0 0 1px var(--color-border); }
.catalog-course-card__practice { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--color-bg-accent); color: var(--color-primary); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: var(--font-weight-semibold); }
@media (max-width: 669px) {
    .hub-families { padding: var(--space-4); border-radius: var(--radius-2l); }
    .hub-top .directions-section__card { padding-left: 0; padding-right: 0; } /* на 375 карточка прозрачная — заголовок и чипсы на оси */
    .section-faq__chevron { width: 18px; height: 18px; }
}

/* ═══ P17 v2 — FAQ на языке кита (Саша 17.09, 20:10: «FAQ не в нормальной дизайн-системе»).
   Боевой section-faq с Mini MBA — вне кита (вопрос 22px medium, тонкий шеврон 24×24, отступы 26px).
   Теперь как карточки-пункты md/fact-card: серая карточка r26 на листе, вопрос — h6 bold,
   ответ — body-l regular, кнопка — белый кружок кита с глифом спрайта icon-chevron-right. ═══ */
.course-info-section .section-faq__list { gap: var(--space-4); }
.course-info-section .section-faq__item { background: var(--color-bg-secondary); border-radius: var(--radius-2l); transition: background .2s; }
.course-info-section .section-faq__item:hover, .course-info-section .section-faq__item.is-open { background: var(--color-bg-accent); }
.course-info-section .section-faq__trigger { gap: var(--space-6); padding: var(--space-5) var(--space-6); }
.course-info-section .section-faq__question { font-size: var(--type-h6-size); line-height: var(--type-h6-lh); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.course-info-section .section-faq__btn { width: 44px; height: 44px; background: var(--color-bg-primary); color: var(--color-primary); }
.course-info-section .section-faq__trigger:hover .section-faq__btn { background: var(--color-bg-primary); }
.course-info-section .section-faq__chevron { width: 20px; height: 20px; color: var(--color-primary); transform: rotate(90deg); }
.course-info-section .section-faq__item.is-open .section-faq__chevron { transform: rotate(-90deg); }
.course-info-section .section-faq__content { padding: 0 var(--space-6); font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); font-weight: var(--font-weight-regular); color: var(--color-text-primary); }
.course-info-section .section-faq__item.is-open .section-faq__content { padding-bottom: var(--space-6); }
.course-info-section .section-faq__content p { margin: 0; }
@media (max-width: 669px) {
    .course-info-section .section-faq__list { gap: var(--space-3); }
    .course-info-section .section-faq__trigger { gap: var(--space-4); padding: var(--space-4) var(--space-5); }
    .course-info-section .section-faq__question { font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); }
    .course-info-section .section-faq__btn { width: 44px; height: 44px; }
    .course-info-section .section-faq__chevron { width: 18px; height: 18px; }
    .course-info-section .section-faq__content { padding: 0 var(--space-5); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
    .course-info-section .section-faq__item.is-open .section-faq__content { padding-bottom: var(--space-5); }
}