/* ==========================================================================
   ryabov.academy — надстройка над базовой вёрсткой страницы.
   Файл подключается последним, поэтому переопределяет инлайновые стили блоков.
   ========================================================================== */

/* --- общий easing/переходы для hover-эффектов ---------------------------- */
:root {
    --rx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* У .zb-atom базовым стилем уже задан transition для цвета, фона, рамки и тени.
   Дописываем в тот же список transform, чтобы не потерять готовые ховеры. */
.rx-hover .zb-atom,
.rx-hover.zb-atom {
    transition:
        background-color var(--zb-speedhover, .2s) ease-in-out,
        color var(--zb-speedhover, .2s) ease-in-out,
        border-color var(--zb-speedhover, .2s) ease-in-out,
        box-shadow var(--zb-shadowshoverspeed, .2s) ease-in-out,
        transform .28s var(--rx-ease),
        opacity .28s var(--rx-ease);
}

@media (prefers-reduced-motion: reduce) {
    .rx-hover .zb-atom,
    .rx-hover.zb-atom {
        transition: none;
    }
}

/* ==========================================================================
   ШАПКА
   ========================================================================== */

/* Иконки-ссылки: <a class="zb-atom"> вместо <div>.
   Правило намеренно ограничено картинками — у кнопок .zb-atom должен
   остаться флексом, иначе текст в рамке прижимается к верхнему краю. */
#rec2279675221 .zb-elem[data-elem-type="image"] a.zb-atom,
#rec2278389271 .zb-elem[data-elem-type="image"] a.zb-atom {
    display: block;
    cursor: pointer;
}

/* ==========================================================================
   ПОДВАЛ: пункт «Образовательные программы» на мобильной раскладке
   ========================================================================== */

/* На мобильной каждый пункт меню — отдельная строка с left, подобранным
   вручную под конкретный текст так, чтобы строка выглядела отцентрованной.
   У этого пункта текст стал длиннее («Учебные программы» →
   «Образовательные программы»), а left остался прежним — строка съехала
   влево и сломала «лесенку». Вместо подбора нового left центрируем пункт
   явно, чтобы длина текста больше не имела значения. */
@media screen and (max-width: 479px) {
    #rec2278389271 .zb-elem[data-elem-id="1779030863260000006"] {
        left: 50% !important;
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   МИКРОАНИМАЦИИ (шапка, первый экран, «Обо мне», «Занятия со мной»)

   Все переходы навешиваются на .zb-atom и повторяют список свойств,
   заданный базовым стилем, — добавлены только transform и opacity. Так
   готовые ховеры и пошаговые анимации (они живут на
   .zb-atom__sbs-anim-wrapper) продолжают работать без конфликтов.

   Обязательный [data-elem-id] в селекторах — ради веса: инлайновый стиль
   записи описывает transition отдельно для каждого элемента селектором
   вида #recNNN .zb-elem[data-elem-id="…"] .zb-atom, и без атрибута наше
   правило проигрывало ему — transform оставался вообще без перехода,
   а ховеры срабатывали рывком.
   ========================================================================== */

#rec2279675221 .zb-elem[data-elem-id] .zb-atom,
#rec2271822731 .zb-elem[data-elem-type="button"][data-elem-id] .zb-atom,
#rec2277784991 .zb-group[data-group-id="1778946046555000005"] .zb-elem[data-elem-id] .zb-atom,
#rec2277784991 .zb-elem.animation-num[data-elem-id] .zb-atom,
#rec2277800191 .zb-elem[data-elem-type="button"][data-elem-id] .zb-atom,
#rec2278389271 .zb-elem[data-elem-id] .zb-atom {
    transition:
        background-color var(--zb-speedhover, 0s) ease-in-out,
        color var(--zb-speedhover, 0s) ease-in-out,
        border-color var(--zb-speedhover, 0s) ease-in-out,
        box-shadow var(--zb-shadowshoverspeed, .2s) ease-in-out,
        transform .3s var(--rx-ease),
        opacity .3s var(--rx-ease);
}

@media (hover: hover) {

    /* --- шапка ------------------------------------------------------- */

    /* пункты меню: подчёркивание, растущее от левого края */
    #rec2279675221 .zb-elem[data-elem-type="text"] .zb-atom a {
        position: relative;
        display: inline-block;
        transition: color .25s var(--rx-ease);
    }

    #rec2279675221 .zb-elem[data-elem-type="text"] .zb-atom a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .28s var(--rx-ease);
    }

    #rec2279675221 .zb-elem[data-elem-type="text"] .zb-atom a:hover::after {
        transform: scaleX(1);
    }

    /* иконки Telegram и звонка */
    #rec2279675221 .zb-elem[data-elem-type="image"] a.zb-atom:hover {
        transform: translateY(-1px) scale(1.14);
    }

    /* логотип: ссылка на главную, поэтому таргетируемся по data-elem-id,
       а не по отсутствию <a>, — иначе правило перестало бы применяться */
    #rec2279675221 .zb-elem[data-elem-id="1779027956516000019"] .zb-atom:hover {
        transform: scale(1.03);
    }

    /* кнопки «Материалы» и «Личный кабинет» */
    #rec2279675221 .zb-elem[data-elem-type="button"] .zb-atom:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    }

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

    /* «Понять», «Полюбить», «Подготовиться», «По математике и физике» */
    #rec2271822731 .zb-elem[data-elem-type="button"] .zb-atom:hover {
        transform: scale(1.06) rotate(-1.2deg);
    }

    /* главный CTA «Смотреть программы» — без наклона */
    #rec2271822731 .zb-elem[data-elem-id="1778791617461000003"] .zb-atom:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(51, 51, 51, .22);
    }

    /* --- «Обо мне» --------------------------------------------------- */

    /* строки списка чуть уезжают вправо, галочка подрастает */
    #rec2277784991 .zb-group[data-group-id="1778946046555000005"] .zb-molecule > .zb-group:hover
    .zb-elem[data-elem-type="text"] .zb-atom {
        transform: translateX(6px);
    }

    #rec2277784991 .zb-group[data-group-id="1778946046555000005"] .zb-molecule > .zb-group:hover
    .zb-elem[data-elem-type="image"] .zb-atom {
        transform: translateX(3px) scale(1.14);
    }

    /* счётчики 180+ / 2300+ / 50+ */
    #rec2277784991 .zb-group[data-group-id="1778946046561000019"]:hover .zb-elem.animation-num .zb-atom,
    #rec2277784991 .zb-group[data-group-id="1778946046563000023"]:hover .zb-elem.animation-num .zb-atom,
    #rec2277784991 .zb-group[data-group-id="1778946046565000027"]:hover .zb-elem.animation-num .zb-atom {
        transform: scale(1.07);
    }

    /* --- «Занятия со мной» ------------------------------------------- */

    #rec2277800191 .zb-elem[data-elem-type="button"] .zb-atom:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 8px 18px rgba(51, 51, 51, .14);
    }

    /* --- подвал -------------------------------------------------------- */

    /* пункты меню: то же подчёркивание, что в шапке */
    #rec2278389271 .zb-elem[data-elem-type="text"] .zb-atom a {
        position: relative;
        display: inline-block;
        transition: color .25s var(--rx-ease);
    }

    #rec2278389271 .zb-elem[data-elem-type="text"] .zb-atom a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .28s var(--rx-ease);
    }

    #rec2278389271 .zb-elem[data-elem-type="text"] .zb-atom a:hover::after {
        transform: scaleX(1);
    }

    /* иконки Telegram и звонка */
    #rec2278389271 .zb-elem[data-elem-type="image"] a.zb-atom:hover {
        transform: translateY(-1px) scale(1.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    #rec2279675221 .zb-elem[data-elem-id] .zb-atom,
    #rec2271822731 .zb-elem[data-elem-type="button"][data-elem-id] .zb-atom,
    #rec2277784991 .zb-group[data-group-id="1778946046555000005"] .zb-elem[data-elem-id] .zb-atom,
    #rec2277784991 .zb-elem.animation-num[data-elem-id] .zb-atom,
    #rec2277800191 .zb-elem[data-elem-type="button"][data-elem-id] .zb-atom,
    #rec2278389271 .zb-elem[data-elem-id] .zb-atom {
        transition: none;
        transform: none !important;
    }
}

/* Голова Давида: держим SBS-анимацию на первом кадре, пока посетитель
   не доехал до блока «Обо мне» (снимается из landing-extra.js). */
#rec2277784991 .zb-elem.rx-anim-hold .zb-atom__sbs-anim-wrapper {
    animation-play-state: paused !important;
}

/* Зернистость поверх портрета.

   Исходник — жёсткий чёрно-белый шум 500×700. В режиме overlay он читается
   как помехи старого телевизора, поэтому здесь три смягчающих слоя:
   soft-light вместо overlay, приглушённый contrast() и низкая opacity.

   Настраивается двумя числами: opacity ниже — тише зерно, contrast ниже —
   мягче переходы. Текущие значения дают едва заметную живую фактуру. */
.noize.rx-grain {
    mix-blend-mode: soft-light;
    opacity: .15;
}

.noize.rx-grain img {
    /* Размытие снимает пиксельный «звон» от уменьшения 500×700 → 386×462,
       а contrast() стягивает чёрно-белый шум к серому: в soft-light серый
       нейтрален, поэтому зерно остаётся фактурой, а не помехами. */
    filter: blur(.45px) contrast(.5);
}

@media (prefers-reduced-motion: reduce) {
    .noize.rx-grain { opacity: .07; }
}

/* ==========================================================================
   ОТЗЫВЫ

   Композиция из двух колонок разной ширины со смещением по вертикали.
   Высота карточек задаётся текстом, размеры — в vw от сетки 1200,
   как и у остальных Zero-блоков.
   ========================================================================== */

.rx-reviews {
    padding: 0 0 8.75vw;                /* 105 */
    background: #f5f5f5;
    overflow: hidden;                   /* карточки прилетают из-за края */
}

.rx-reviews__wrap {
    display: flex;
    align-items: flex-start;
    gap: 3.33vw;                        /* 40 */
    padding: 0 1.67vw;                  /* поля сетки Zero-блоков */
    box-sizing: border-box;
}

.rx-reviews__col {
    display: flex;
    flex-direction: column;
    gap: 2vw;                           /* 24 */
    min-width: 0;
}

.rx-reviews__col_left  { flex: 0 0 55%; }
.rx-reviews__col_right { flex: 1 1 auto; margin-top: 5vw; }

.rx-review {
    box-sizing: border-box;
    padding: 2.33vw 2.33vw 2.5vw;       /* 28 / 30 */
    background: #ffffff;
    border-radius: 2.67vw;              /* 32 */
    color: #333333;
}

/* лёгкая асимметрия, чтобы композиция не читалась как таблица */
.rx-review_inset-right { width: 84%; margin-left: auto; }
.rx-review_inset-left  { width: 92%; }

.rx-review__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.67vw;
    margin-bottom: 1.83vw;              /* 22 */
}

.rx-review__name {
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-size: 1.5vw;                   /* 18 */
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: #7b2121;
}

.rx-review__course {
    margin-top: .5vw;
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: 1vw;                     /* 12 */
    line-height: 1.2;
    color: #333333;
}

.rx-review__badge {
    display: flex;
    align-items: center;
    gap: 1vw;
    flex: 0 0 auto;
    padding: .33vw .33vw .33vw 1.58vw;  /* 4 / 19 */
    background: #f5f5f5;
    border-radius: 6.58vw;              /* 79 */
}

.rx-review__badge-label {
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-size: 1vw;                     /* 12 */
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
    color: #333333;
}

.rx-review__badge-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.25vw;                  /* 51 */
    padding: .5vw .75vw;
    background: #333333;
    border-radius: 6.58vw;
    color: #ffffff;
    text-align: center;
}

.rx-review__badge-value b {
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-size: 1.33vw;                  /* 16 */
    font-weight: 500;
    line-height: 1.15;
}

.rx-review__badge-value i {
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: .67vw;                   /* 8 */
    font-style: normal;
    line-height: 1.2;
}

.rx-review__badge-value_word b {
    font-size: 1vw;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 0 .25vw;
}

.rx-review__text {
    margin: 0;
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: .92vw;                   /* 11 */
    line-height: 1.55;
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.rx-review__text + .rx-review__text { margin-top: .83vw; }

/* --- прилёт карточек по мере прокрутки ------------------------------- */
.rx-reviews_armed .rx-review {
    opacity: 0;
    will-change: transform, opacity;
}

@media (hover: hover) {
    .rx-review {
        transition: box-shadow .3s var(--rx-ease);
    }

    .rx-review:hover {
        box-shadow: 0 10px 26px rgba(51, 51, 51, .10);
    }
}

/* --- мобильная: обычная колонка -------------------------------------- */
@media screen and (max-width: 639px) {
    .rx-reviews {
        padding: 0 0 23.4vw;            /* 75 из 320 */
    }

    /* колонки схлопываем, чтобы карточки шли одной лентой в нужном порядке */
    .rx-reviews__wrap {
        display: flex;
        flex-direction: column;
        gap: 3.13vw;
        padding: 0 3.13vw;
    }

    .rx-reviews__col { display: contents; }

    .rx-review[data-rx-order="0"] { order: 0; }
    .rx-review[data-rx-order="1"] { order: 1; }
    .rx-review[data-rx-order="2"] { order: 2; }
    .rx-review[data-rx-order="3"] { order: 3; }

    .rx-review {
        width: auto;
        margin: 0;
        padding: 5.6vw 5.6vw 6.25vw;
        border-radius: 6.25vw;
    }

    .rx-review__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 3.13vw;
        margin-bottom: 4.4vw;
    }

    .rx-review__name   { font-size: 5.6vw; }
    .rx-review__course { font-size: 3.44vw; margin-top: 1.25vw; }

    .rx-review__badge {
        gap: 3.13vw;
        padding: .9vw .9vw .9vw 4.4vw;
        border-radius: 12.5vw;
    }

    .rx-review__badge-label     { font-size: 3.44vw; }
    .rx-review__badge-value     { min-width: 12.2vw; padding: 1.6vw 2.2vw; border-radius: 12.5vw; }
    .rx-review__badge-value b   { font-size: 4.7vw; }
    .rx-review__badge-value i   { font-size: 2.5vw; }
    .rx-review__badge-value_word b { font-size: 3.44vw; }

    .rx-review__text { font-size: 3.44vw; }
    .rx-review__text + .rx-review__text { margin-top: 2.5vw; }
}

/* ==========================================================================
   БЛОК «АНОНИМНЫЙ ОПРОС УЧЕНИКОВ»

   Композиция из трёх колонок: высота карточек задаётся текстом, колонки
   сдвинуты по вертикали — получается ровная сетка со «случайным» ритмом.
   Размеры в vw от сетки 1200 px (мобильная — от 320 px), как у Zero-блоков.
   ========================================================================== */

.rx-survey {
    padding: 0.83vw 0 8.75vw;          /* 10 / 105 */
    background: #f5f5f5;
}

.rx-survey__wrap {
    padding: 0 1.67vw;                 /* поля сетки Zero-блоков: 20 */
    box-sizing: border-box;
}

.rx-survey__head {
    max-width: 63.3vw;                 /* 760 */
    margin-bottom: 2.5vw;              /* 30 */
}

.rx-survey__title {
    margin: 0 0 1.17vw;                /* 14 */
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-size: 3.5vw;                  /* 42 */
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: #333333;
}

.rx-survey__lead {
    margin: 0;
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: 1.17vw;                 /* 14 */
    font-weight: 400;
    line-height: 1.6;
    color: #4a4a4a;
}

.rx-survey__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5vw;                        /* 18 */
    align-items: start;
}

.rx-survey__col {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    min-width: 0;
}

/* Колонки выровнены по верхней линии — «рваный» ритм даёт только
   разная высота карточек, и композиция читается спокойнее. */

.rx-note {
    margin: 0;
    padding: 1.83vw 2vw 1.67vw;        /* 22 / 24 / 20 */
    background: #ffffff;
    border-radius: 2vw;                /* 24 */
    transition: transform .28s var(--rx-ease), box-shadow .28s var(--rx-ease);
}

.rx-note blockquote {
    margin: 0;
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: .92vw;                  /* 11 */
    font-weight: 400;
    line-height: 1.6;
    color: #333333;
}

.rx-note figcaption {
    margin-top: 1vw;                   /* 12 */
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: .83vw;                  /* 10 */
    line-height: 1.3;
    color: #9a9a9a;
}

@media (hover: hover) {
    .rx-note:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(51, 51, 51, .10);
    }
}

/* Появление при скролле. Прятать элемент имеет право только скрипт:
   класс rx-reveal_armed вешается из JS, поэтому без JS текст виден сразу. */
.rx-reveal_armed {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--rx-ease), transform .7s var(--rx-ease);
}

.rx-reveal_armed.rx-reveal_in {
    opacity: 1;
    transform: none;
}

/* На телефоне появления нет — блок читается сразу, без ожидания.
   Условие продублировано в CSS, чтобы поворот экрана ничего не сломал. */
@media screen and (max-width: 639px) {
    .rx-reveal_armed { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rx-reveal_armed { opacity: 1; transform: none; transition: none; }
    .rx-note { transition: none; }
}

/* Мобильная сетка — 320 px: 1 px сетки = 100/320 vw.
   Блок здесь идёт одной колонкой, поэтому набран плотнее: меньше поля,
   меньше кегль, меньше воздуха между карточками. */
@media screen and (max-width: 639px) {
    .rx-survey {
        padding: 1.9vw 0 18.75vw;      /* 6 / 60 */
    }

    .rx-survey__wrap { padding: 0 3.13vw; }      /* 10 */

    .rx-survey__head {
        max-width: none;
        margin-bottom: 5.6vw;          /* 18 */
    }

    .rx-survey__title {
        font-size: 7.5vw;              /* 24 */
        margin-bottom: 3.13vw;         /* 10 */
    }

    .rx-survey__lead {
        font-size: 2.81vw;             /* 9 */
        line-height: 1.5;
    }

    .rx-survey__grid {
        grid-template-columns: 1fr;
        gap: 2.5vw;
    }

    .rx-survey__col { gap: 2.5vw; }

    .rx-note {
        padding: 3.75vw 3.75vw 3.13vw; /* 12 / 10 */
        border-radius: 3.75vw;
    }

    .rx-note blockquote {
        font-size: 2.81vw;             /* 9 */
        line-height: 1.5;
    }

    .rx-note figcaption {
        font-size: 2.5vw;              /* 8 */
        margin-top: 1.9vw;
    }
}

/* ==========================================================================
   АККОРДЕОНЫ «Этапы работы» и «Отвечаю на ваши вопросы»
   ========================================================================== */

/* Содержимое мягко проявляется вместе с раскрытием.
   .anx-closing вешается скриптом ANNEXX только на сворачивание. */
.r.collapsing:not(.anx-closing) .zb__artboard {
    animation: rxAccordionIn .68s var(--rx-ease) both;
}

@keyframes rxAccordionIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.r.anx-closing .zb__artboard {
    opacity: .35;
    transition: opacity .45s var(--rx-ease);
}

@media (prefers-reduced-motion: reduce) {
    .r.collapsing:not(.anx-closing) .zb__artboard { animation: none; }
    .r.anx-closing .zb__artboard { opacity: 1; transition: none; }
}

/* ==========================================================================
   ФОРМА «ЗАКАЖИТЕ ЗВОНОК»
   ========================================================================== */

/* --- сообщение об итоге отправки (успех/ошибка) --------------------------
   .js-successbox используется и для успеха, и для ошибки — разница в
   модификаторе rx-form__successbox_error (навешивается landing-extra.js).
   Вместо плоских зелёной/красной плашек форм-движка Tilda — карточка в
   цветах и скруглениях сайта: серый фон блоков, тот же радиус, что у полей
   формы, акцентный цвет только в значке. */
.js-successbox.rx-form__successbox {
    display: none;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: #f5f5f5;
    color: #333333;
    text-align: left;
    border-radius: 20px;
}

.rx-callback-msg__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #7b2121; /* фирменный акцентный цвет — и для успеха, и для ошибки */
}

.rx-callback-msg__icon svg {
    display: block;
}

.rx-callback-msg__text {
    flex: 1 1 auto;
}

/* --- чекбокс «Даю согласие…» ----------------------------------------------
   В исходной вёрстке это просто текст со ссылкой; чекбокс перед ним
   добавляет landing-extra.js. Стиль — тот же язык, что у полей формы:
   серая рамка #c9c9c9, как у input/textarea, заливка акцентным цветом
   при отметке. */
.rx-consent {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    cursor: pointer;
}

.rx-consent__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* спрятан визуально, но доступен с клавиатуры и скринридерам */
}

.rx-consent__box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .15em;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    background: #fff;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.rx-consent__box svg {
    display: block;
    opacity: 0;
    transition: opacity .1s ease-in-out;
}

.rx-consent__input:checked + .rx-consent__box {
    background: #7b2121;
    border-color: #7b2121;
}

.rx-consent__input:checked + .rx-consent__box svg {
    opacity: 1;
}

.rx-consent__input:focus-visible + .rx-consent__box {
    outline: 2px solid #7b2121;
    outline-offset: 2px;
}

.rx-consent__error {
    display: none;
    margin-top: 6px;
    color: #c0392b;
    font-size: .85em;
}

.blk702__form-bottom-text.rx-consent_error .rx-consent__box {
    border-color: #c0392b;
}

.blk702__form-bottom-text.rx-consent_error .rx-consent__error {
    display: block;
}

/* Выравнивание раскрываемого текста по ширине */
#rec2286348641 [data-elem-type="text"] .zb-atom,
#rec2286378541 [data-elem-type="text"] .zb-atom,
#rec2286379301 [data-elem-type="text"] .zb-atom,
#rec2286379871 [data-elem-type="text"] .zb-atom,
#rec2286380781 [data-elem-type="text"] .zb-atom,
#rec2286425741 [data-elem-type="text"] .zb-atom,
#rec2286425841 [data-elem-type="text"] .zb-atom,
#rec2286426191 [data-elem-type="text"] .zb-atom,
#rec2286426291 [data-elem-type="text"] .zb-atom,
#rec2286426361 [data-elem-type="text"] .zb-atom,
#rec2286426561 [data-elem-type="text"] .zb-atom,
#rec2286426621 [data-elem-type="text"] .zb-atom,
#rec2286427071 [data-elem-type="text"] .zb-atom {
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* ==========================================================================
   ЛИЧНЫЙ КАБИНЕТ

   Как «Отзывы» — обычная вёрстка, не canvas, размеры в vw от сетки 1200/320.
   По умолчанию (без JS, узкий экран, prefers-reduced-motion) рендерится
   финальное статичное состояние: заголовок, 4 скриншота лентой, плюсы,
   финальная фраза — всё видно сразу. initLkAssembly() (landing-extra.js)
   на широких экранах добавляет класс .rx-lk_armed и прокручиваемую
   pinned-сцену: слова разлетаются, собираются в системe, скриншоты
   проявляются один за другим, тонкие линии их связывают и гаснут.
   ========================================================================== */

/* Сцена держится на position:sticky, а он не работает, если у любого предка
   есть overflow:hidden — такой предок становится «прокручиваемым», и элемент
   липнет к нему, а не к окну. У #allrecords этот overflow вешает базовый
   скрипт (canvas.min.js, zb__setOverflowToAllRecords): по умолчанию hidden,
   а для блоков со sticky он же переключается на clip — clip тоже обрезает,
   но прокручиваемого контейнера не создаёт. Список таких блоков в скрипте
   зашит, нашего в нём нет, поэтому переключаем сами. По той же причине
   у самой секции clip вместо hidden. */
#allrecords.rx-records__overflow-hidden {
    overflow: clip;
}

.rx-lk {
    padding: 6.67vw 1.67vw 8.75vw;      /* 80 / 20 / 105 из 1200 */
    background: #f5f5f5;
    overflow: clip;
}

.rx-lk__stage-wrap {
    position: relative;
}

.rx-lk__sticky {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- слова-разброс: чистая типографика, не показываются без анимации --- */
.rx-lk__scatter {
    display: none;
}

.rx-lk__word {
    position: absolute;
    opacity: 0;
    white-space: nowrap;
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    will-change: transform, opacity;
}

.rx-lk__word:nth-child(3n+1) { color: #7b2121; }
.rx-lk__word:nth-child(3n+2) { color: #333333; }
.rx-lk__word:nth-child(3n)   { color: #983f3f; }

/* --- прямоугольник, «собирающий» слова ---------------------------------- */
.rx-lk__collector {
    display: none;
}

/* --- соединительные линии между скриншотами ------------------------------ */
.rx-lk__lines {
    display: none;
}

.rx-lk__line {
    stroke: #983f3f;
    stroke-width: 1.5;
    stroke-dasharray: 5 6;
    opacity: .55;
}

/* --- заголовок ------------------------------------------------------------ */
.rx-lk__headline {
    position: relative;
    z-index: 4;
    max-width: 46vw;
    margin: 0 auto 3.33vw;
    text-align: center;
}

.rx-lk__hline {
    margin: 0;
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-weight: 600;
    line-height: 1.35;
    color: #333333;
    font-size: 1.92vw;                  /* 23 */
}

/* В статичной раскладке (мобильная, без JS) обе строки стоят подряд и
   читаются как одна мысль; в сцене их разводит по экрану .rx-lk_armed. */
.rx-lk__hline + .rx-lk__hline {
    margin-top: .5vw;
}

/* --- скриншоты ------------------------------------------------------------- */
.rx-lk__screens {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "courses  courses"
        "topics   progress"
        "mocktests mocktests";
    justify-items: center;
    align-items: start;
    gap: 2.17vw;                        /* 26 */
    width: 100%;
    max-width: 65vw;
    margin: 0 auto;
}

.rx-lk__screen_courses   { grid-area: courses; }
.rx-lk__screen_topics    { grid-area: topics; }
.rx-lk__screen_progress  { grid-area: progress; }
.rx-lk__screen_mocktests { grid-area: mocktests; }

.rx-lk__screen {
    margin: 0;
    background: #ffffff;
    border: 1px solid rgba(51, 51, 51, .08);
    border-radius: 1.33vw;              /* 16 */
    box-shadow: 0 14px 30px rgba(51, 51, 51, .14);
    overflow: hidden;
}

.rx-lk__screen img {
    display: block;
    width: 100%;
    height: auto;
}


.rx-lk__screen_courses   { width: 27vw; max-width: 340px; }
.rx-lk__screen_topics,
.rx-lk__screen_progress  { width: 23vw; max-width: 290px; }
.rx-lk__screen_mocktests { width: 25vw; max-width: 310px; }

@media (hover: hover) {
    .rx-lk__screen {
        transition: box-shadow .3s var(--rx-ease);
    }

    .rx-lk__screen:hover {
        box-shadow: 0 20px 40px rgba(51, 51, 51, .2);
    }

    /* Подъём при наведении — только в статичной раскладке: в прокручиваемой
       сцене transform занят анимацией, и переход по нему растянул бы каждый
       кадр прокрутки на 0,3 с, а :hover просто перебивал бы её значение. */
    .rx-lk:not(.rx-lk_armed) .rx-lk__screen {
        transition: transform .3s var(--rx-ease), box-shadow .3s var(--rx-ease);
    }

    .rx-lk:not(.rx-lk_armed) .rx-lk__screen:hover {
        transform: translateY(-4px);
    }
}

/* --- плюсы и финальная фраза ------------------------------------------------ */

/* Идентификатор и тег в селекторе обязательны: базовые стили описывают
   списки как «#allrecords ul» и «.rx-records ul» (padding-left:20px,
   margin-top:0), и правило из одного класса проигрывает им по весу —
   отступы молча обнулялись, а слева появлялся лишний вылет в 20 px. */
#allrecords ul.rx-lk__perks {
    position: relative;
    z-index: 4;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25vw 3.33vw;
    margin: 2.92vw 0 0;
    padding: 0;
}

.rx-lk__perk {
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-weight: 500;
    font-size: 1.08vw;                  /* 13 */
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #7b2121;
}

.rx-lk__tagline {
    position: relative;
    z-index: 4;
    max-width: 40vw;
    margin: 2.92vw auto 0;
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-weight: 600;
    font-size: 1.67vw;                  /* 20 */
    line-height: 1.35;
    text-align: center;
    color: #333333;
}

/* --- «прокрученная» сцена: включается классом из initLkAssembly ------------

   Вся сцена обязана поместиться в один экран: .rx-lk__sticky прибит к верху
   и обрезает всё, что выходит за 100vh. Поэтому в этом режиме размеры
   скриншотов упираются не только в ширину окна, но и в его высоту —
   min(vw, vh). Заголовок, плюсы и финальная фраза уходят из потока в
   абсолютные позиции, и по вертикали остаётся только сетка скриншотов:
   она и центрируется в экране.
   -------------------------------------------------------------------------- */
/* Длина прокрутки сцены. Из неё вычитается экран, который сцена занимает
   в закреплённом виде, — на анимацию остаётся 460vh. При окне 900 px это
   примерно 4100 px, то есть на каждую «полку» из initLkAssembly приходится
   по пять-шесть щелчков колеса. Короче делать нельзя: состояния начинают
   мелькать, длиннее — сцена превращается в бесконечную прокрутку. */
.rx-lk_armed .rx-lk__stage-wrap {
    height: 560vh;
}

.rx-lk_armed .rx-lk__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    justify-content: center;
    overflow: hidden;
}

.rx-lk_armed .rx-lk__scatter {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Прямоугольник-«сборщик» повторяет размер и пропорции первого скриншота:
   из него скриншот и проявляется, поэтому подмена не должна быть заметна. */
.rx-lk_armed .rx-lk__collector {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(27vw, 34vh);
    height: auto;
    aspect-ratio: 900 / 484;
    max-width: none;
    max-height: none;
    background: #333333;
    border-radius: 1.6vh;
    opacity: 0;
    z-index: 3;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .22);
    will-change: transform, opacity;
}

.rx-lk_armed .rx-lk__lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* Первая строка стоит по центру экрана — среди разлетевшихся слов, вторая
   уже вверху: центр к этому моменту занимает «сборщик», из которого
   появляется первый скриншот. */
.rx-lk_armed .rx-lk__headline {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    pointer-events: none;
}

.rx-lk_armed .rx-lk__hline {
    display: block;
    position: absolute;
    left: 50%;
    width: 50vw;
    margin: 0;
    opacity: 0;
}

.rx-lk_armed .rx-lk__hline_1 {
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Вторая строка длиннее и на невысоких экранах занимает две строки,
   поэтому поднята к самому верху: ниже начинается сетка скриншотов. */
.rx-lk_armed .rx-lk__hline_2 {
    top: 5vh;
    transform: translateX(-50%);
}

/* Сетка скриншотов — единственное, что осталось в потоке, поэтому её и
   центрирует flex у .rx-lk__sticky. Ширина по содержимому: колонки
   собираются из среднего ряда, верхний и нижний скриншоты стоят по центру. */
.rx-lk_armed .rx-lk__screens {
    width: auto;
    max-width: none;
    gap: 2.4vh;
}

.rx-lk_armed .rx-lk__screen {
    border-radius: 1.6vh;
}

.rx-lk_armed .rx-lk__screen_courses {
    width: min(27vw, 34vh);
    max-width: none;
}

.rx-lk_armed .rx-lk__screen_topics,
.rx-lk_armed .rx-lk__screen_progress {
    width: min(23vw, 30vh);
    max-width: none;
}

.rx-lk_armed .rx-lk__screen_mocktests {
    width: min(25vw, 32vh);
    max-width: none;
}

/* Плюсы стоят по краям от композиции — по два слева и справа, на уровне
   верхнего и нижнего скриншотов, где сетка уже сама сужается. */
/* Идентификатор — по той же причине, что и у статичного правила ниже:
   иначе базовое «#allrecords ul» перевесит и вернёт список в поток. */
#allrecords .rx-lk_armed ul.rx-lk__perks {
    position: absolute;
    inset: 0;
    display: block;
    gap: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.rx-lk_armed .rx-lk__perk {
    position: absolute;
    max-width: 15vw;
    line-height: 1.3;
}

.rx-lk_armed .rx-lk__perk:nth-child(1) { left: 5vw;  top: 29vh; }
.rx-lk_armed .rx-lk__perk:nth-child(2) { right: 5vw; top: 29vh; text-align: right; }
.rx-lk_armed .rx-lk__perk:nth-child(3) { left: 5vw;  top: 63vh; }
.rx-lk_armed .rx-lk__perk:nth-child(4) { right: 5vw; top: 63vh; text-align: right; }

.rx-lk_armed .rx-lk__tagline {
    position: absolute;
    left: 50%;
    bottom: 7vh;
    width: 44vw;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
}

.rx-lk_armed .rx-lk__screen,
.rx-lk_armed .rx-lk__perk,
.rx-lk_armed .rx-lk__tagline {
    opacity: 0;
    will-change: transform, opacity;
}

/* При prefers-reduced-motion класс .rx-lk_armed не навешивается вовсе
   (initLkAssembly выходит раньше), поэтому отдельных правил для этого
   случая тут нет: остаётся статичная раскладка по умолчанию. */

/* --- мобильная: статичная лента без анимации -------------------------------- */
@media screen and (max-width: 639px) {
    .rx-lk {
        padding: 15.6vw 4.4vw 18.75vw;  /* 50 / 14 / 60 из 320 */
    }

    .rx-lk__headline {
        max-width: none;
        margin-bottom: 11.25vw;         /* 36 из 320 */
    }

    .rx-lk__hline {
        font-size: 6.25vw;
    }

    .rx-lk__hline + .rx-lk__hline {
        margin-top: 2.5vw;
    }

    .rx-lk__screens {
        position: relative;
        grid-template-columns: 1fr;
        grid-template-areas:
            "courses"
            "topics"
            "progress"
            "mocktests";
        gap: 8.75vw;                    /* 28 */
        max-width: 100%;
    }

    /* Связка между экранами — та же мысль, что и линии в сцене на большом
       экране. Пунктир идёт через всю колонку, но виден только в зазорах:
       сами карточки непрозрачные и перекрывают его. */
    .rx-lk__screens::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 5vw;
        bottom: 5vw;
        left: 50%;
        border-left: 1px dashed rgba(152, 63, 63, .45);
    }

    .rx-lk__screen_courses,
    .rx-lk__screen_topics,
    .rx-lk__screen_progress,
    .rx-lk__screen_mocktests {
        width: 100%;
        max-width: 420px;
    }

    .rx-lk__screen {
        border-radius: 5vw;
        box-shadow: 0 2.8vw 7vw rgba(51, 51, 51, .13);
    }

    /* Плюсы — в две колонки с тем же горчичным маркером, что и в списках
       «Образовательных программ»: одной лентой они читались как случайный
       набор слов.

       Отступ сверху заметно больше, чем зазор между скриншотами: иначе
       первая строка читается как подпись к последнему скриншоту, а не как
       начало нового ряда. */
    #allrecords ul.rx-lk__perks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
        gap: 5vw 4.4vw;
        margin-top: 18.75vw;            /* 60 из 320 */
    }

    .rx-lk__perk {
        position: relative;
        padding-left: 7.8vw;
        font-size: 3.44vw;
        line-height: 1.25;
        text-align: left;
    }

    .rx-lk__perk::before {
        content: '';
        position: absolute;
        top: .25em;
        left: 0;
        width: 6.25vw;
        height: 3.6vw;
        background: url("/assets/static/f6264-6630-4861-b064-636364623762/svg_1778967235900.svg") center / contain no-repeat;
    }

    .rx-lk__tagline {
        position: relative;
        max-width: none;
        margin-top: 11vw;
        padding-top: 8vw;
        font-size: 5.3vw;
    }

    .rx-lk__tagline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 12.5vw;
        height: 2px;
        background: #7b2121;
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   ОБРАЗОВАТЕЛЬНЫЕ ПРОГРАММЫ

   Три карточки на серой плашке — canvas-запись. Артборд масштабируется
   через CSS zoom, поэтому все размеры внутри записи — и её собственные,
   и наши — задаются обычными px от сетки 1200: пересчитает браузер.

   Здесь три правки поверх записи.

   1. Наши вставки (переключатель формата, бейдж «Мини-группа») лежат в
      той же молекуле, что и белая плашка карточки. У плашки z-index:3,
      у наших блоков он не задан — и они оказывались ПОД белым
      прямоугольником: карточка «Математика ЕГЭ 0–75» выглядела пустой,
      а бейджей не было видно вовсе. Отсюда z-index:4 у обоих.

   2. Пункт списка — вложенная группа высотой в одну строку с абсолютно
      позиционированным текстом внутри. Пока текст был коротким, это
      работало; после переписывания он стал переноситься, и строки
      наезжали друг на друга. Поэтому строки и их содержимое переведены
      в обычный поток: высота считается по тексту, наезжать нечему.

   3. Карточки расширены с 273 до 340 px (правка координат в самой
      записи), и промежуток между ними стал 40 px вместо 149. Поля
      внутри карточки заданы через left/right и left:50%, чтобы не
      пересчитывать координаты каждого элемента под новую ширину.
   ========================================================================== */

/* --- поля внутри карточки ------------------------------------------------- */

/* белая плашка — на всю карточку */
#rec2278359701 .zb__artboard > .zb-group > .zb-molecule > .zb-elem[data-elem-type="shape"] {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* название и цена — по центру карточки: их собственный left подбирался
   вручную под ширину 273 и после расширения потерял смысл */
#rec2278359701 .zb__artboard > .zb-group > .zb-molecule > .zb-elem[data-elem-type="text"],
#rec2278359701 .zb-group[data-group-id="1779030287554000007"],
#rec2278359701 .zb-group[data-group-id="1779030300349000038"] {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

/* список и кнопка — во всю ширину карточки, поля по 14 px */
#rec2278359701 .zb-group[data-group-id="1779030287555000012"],
#rec2278359701 .zb-group[data-group-id="1779030300349000043"],
#rec2278359701 .zb__artboard > .zb-group > .zb-molecule > .zb-elem[data-elem-type="button"] {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
}

/* --- списки: строки в обычном потоке -------------------------------------- */

/* Бейдж «Мини-группа» лежит в зазоре между названием и списком, поэтому
   список сдвигаем вниз — на ту же высоту, с которой начинается список
   в карточке с переключателем формата. */
#rec2278359701 .zb-group[data-group-id="1779030287555000012"],
#rec2278359701 .zb-group[data-group-id="1779030300349000043"] {
    height: auto !important;
    transform: translateY(30px) !important;
}

#rec2278359701 .zb-group[data-group-id="1779030287555000012"] > .zb-molecule,
#rec2278359701 .zb-group[data-group-id="1779030300349000043"] > .zb-molecule {
    height: auto !important;
    row-gap: 9px;
}

/* строка списка: горчичный маркер и текст рядом, высота — по тексту */
#rec2278359701 .zb-group[data-group-id="1779030287555000012"] .zb-group,
#rec2278359701 .zb-group[data-group-id="1779030300349000043"] .zb-group {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
}

#rec2278359701 .zb-group[data-group-id="1779030287555000012"] .zb-group > .zb-molecule,
#rec2278359701 .zb-group[data-group-id="1779030300349000043"] .zb-group > .zb-molecule {
    display: flex !important;
    align-items: flex-start;
    column-gap: 6px;
    height: auto !important;
}

#rec2278359701 .zb-group[data-group-id="1779030287555000012"] .zb-group .zb-elem,
#rec2278359701 .zb-group[data-group-id="1779030300349000043"] .zb-group .zb-elem {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
}

#rec2278359701 .zb-group[data-group-id="1779030287555000012"] .zb-group .zb-elem[data-elem-type="image"],
#rec2278359701 .zb-group[data-group-id="1779030300349000043"] .zb-group .zb-elem[data-elem-type="image"] {
    flex: 0 0 20px;
    width: 20px !important;
    margin-top: 1px;
}

#rec2278359701 .zb-group[data-group-id="1779030287555000012"] .zb-group .zb-elem[data-elem-type="text"],
#rec2278359701 .zb-group[data-group-id="1779030300349000043"] .zb-group .zb-elem[data-elem-type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    height: auto !important;
}

/* --- бейдж «Мини-группа» --------------------------------------------------- */

/* Бейдж стоит по центру под названием курса — как подзаголовок карточки. */
.rx-course-badge {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #7b2121;
    background: #f5f5f5;
    border: 1px solid rgba(123, 33, 33, .25);
    border-radius: 20px;
}

/* ==========================================================================
   ОБРАЗОВАТЕЛЬНЫЕ ПРОГРАММЫ — переключатель формата на карточке
   «Математика ЕГЭ 0–75»

   Переключатель меняет содержимое карточки вживую, чего canvas не умеет,
   поэтому исходные список и цену этой карточки прячем, а на их место
   кладём обычную вёрстку внутри той же молекулы. Координаты повторяют
   соседние карточки: список начинается на той же высоте, цена стоит на
   той же строке — чтобы три карточки читались как одна сетка.
   ========================================================================== */

#rec2278359701 .zb-elem[data-elem-id="1778967230718000004"],
#rec2278359701 .zb-group[data-group-id="1778967230718000005"],
#rec2278359701 .zb-group[data-group-id="1779030211635000002"] {
    display: none !important;
}

.rx-course-format {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    right: 14px;
    z-index: 4;
    /* кнопка «Записаться» лежит под этим слоем — не перехватываем её клики */
    pointer-events: none;
}

.rx-course-format__tabs {
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    padding: 2px;
    background: #f5f5f5;
    border-radius: 20px;
    pointer-events: auto;
}

.rx-course-format__tab {
    flex: 1 1 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 5px 4px;
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #333333;
    border-radius: 17px;
    transition: background-color .25s var(--rx-ease), color .25s var(--rx-ease);
}

.rx-course-format__tab_active {
    background: #7b2121;
    color: #ffffff;
}

@media (hover: hover) {
    .rx-course-format__tab:not(.rx-course-format__tab_active):hover {
        background: rgba(123, 33, 33, .1);
    }
}

/* Список повторяет соседние карточки: тот же кегль, тот же интерлиньяж,
   тот же горчичный маркер — он лежит в картинках записи. */
#allrecords ul.rx-course-format__list {
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 9px;
}

.rx-course-format__list li {
    position: relative;
    padding-left: 26px;
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    color: #333333;
}

.rx-course-format__list li::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
    height: 12px;
    background: url("/assets/static/f6264-6630-4861-b064-636364623762/svg_1778967235900.svg") center / contain no-repeat;
}

.rx-course-format__price {
    position: absolute;
    top: 413px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.rx-course-format__price-main {
    font-family: var(--rx-headline-font, 'Oswald', Arial, sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: #333333;
}

.rx-course-format__price-hour {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: #a0a0a0;
}

.rx-course-format__paren {
    flex: 0 0 auto;
    width: 4px;
    height: 24px;
    fill: currentColor;
}

/* Годовая оплата — отдельное предложение, поэтому вынесена в рамку.
   Горчичный #b7993c — цвет маркеров в списках курсов. */
.rx-course-format__price-annual {
    margin-top: 3px;
    padding: 3px 9px;
    font-family: var(--rx-text-font, 'Roboto', Arial, sans-serif);
    font-size: 9px;
    line-height: 1.25;
    color: #b7993c;
    background: rgba(183, 153, 60, .08);
    border: 1px solid rgba(183, 153, 60, .55);
    border-radius: 14px;
}

.rx-course-format__price-annual s {
    color: rgba(183, 153, 60, .7);
    text-decoration: line-through;
}

/* Идентификатор нужен и здесь: правило про списки выше начинается с
   #allrecords, и без него скрытый список пересилил бы display:none. */
#allrecords .rx-course-format[data-course-format="mini"] ul.rx-course-format__list[data-format="group"],
#allrecords .rx-course-format[data-course-format="group"] ul.rx-course-format__list[data-format="mini"],
.rx-course-format[data-course-format="mini"] .rx-course-format__price [data-format="group"],
.rx-course-format[data-course-format="group"] .rx-course-format__price [data-format="mini"] {
    display: none;
}