/* ==========================================================================
   РЕДИЗАЙН v2 — новый слой оформления (скоуп .rd)
   Подключается только туда, где разметка уже переведена на новые классы.
   Всё внутри .rd — глобальные стили style.css не затрагиваются,
   поэтому остальные страницы можно переводить постепенно.

   Ориентиры (из разбора 24 лендингов в архиве Inspo):
   • hero целиком помещается в первый экран (~1280×800, 100svh);
   • вертикальный ритм между секциями 80–160px, берём один шаг --rd-rhythm;
   • горизонтальный контейнер: центрированная колонка + padding-inline
     (не шорткат padding, иначе он обнуляет вертикальный ритм секции);
   • один брендовый акцент (янтарный) для главного действия,
     нейтральный — для второстепенных, зелёный — только «бесплатно/успех».
   ========================================================================== */

.rd {
    /* --- типографика: 6 ступеней вместо 14 микроразмеров --- */
    --rd-fs-xs: .8125rem;   /* 13 — подписи, метаданные */
    --rd-fs-sm: .9375rem;   /* 15 — мелкий текст, кнопки */
    --rd-fs-base: 1rem;     /* 16 — базовый */
    --rd-fs-md: 1.0625rem;  /* 17 — лид, описания карточек */
    --rd-fs-lg: 1.25rem;    /* 20 — заголовок карточки */
    --rd-fs-h3: clamp(1.125rem, .35vw + 1.05rem, 1.3125rem);
    --rd-fs-h2: clamp(1.5rem, .85vw + 1.25rem, 2.0625rem);
    --rd-fs-h1: clamp(2rem, 2.1vw + 1.35rem, 3.125rem);

    /* --- вертикальный ритм: один шаг на все стыки секций --- */
    /* между секциями получается 2×шаг ≈ 96–168px — попадает в ориентир 80–160px */
    --rd-rhythm: clamp(48px, 5vw, 84px);
    --rd-rhythm-sm: clamp(28px, 3vw, 48px);

    /* --- поверхности и границы --- */
    --rd-surface: #ffffff;
    --rd-surface-2: #fbfaf7;
    --rd-line: #e6e1d8;
    --rd-line-strong: #d8d2c6;
    --rd-dark: #131c27;
    --rd-dark-2: #1d2733;
    --rd-ring: 0 0 0 4px rgba(180, 83, 9, .18);
    --rd-shadow: 0 1px 2px rgba(23, 32, 43, .05), 0 10px 30px rgba(23, 32, 43, .06);
    --rd-shadow-hover: 0 2px 6px rgba(23, 32, 43, .07), 0 18px 44px rgba(23, 32, 43, .10);
    --rd-radius: 16px;
    --rd-radius-lg: 22px;
    --rd-container: 1120px;

    font-size: var(--rd-fs-base);
    line-height: 1.6;
}

/* Контейнер: только padding-inline, вертикаль задают секции */
.rd .rd-wrap {
    width: 100%;
    max-width: var(--rd-container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ---------- Ритм секций ---------- */
.rd .rd-section { padding-block: var(--rd-rhythm); }
.rd .rd-section--tight { padding-block: var(--rd-rhythm-sm); }
.rd .rd-section--first { padding-block: var(--rd-rhythm-sm) var(--rd-rhythm-sm); }
.rd .rd-section--last { padding-block: var(--rd-rhythm) var(--rd-rhythm-sm); }
.rd .rd-section--line { border-top: 1px solid var(--rd-line); }
.rd .rd-section--soft { background: var(--rd-surface-2); }

/* ---------- Шапка секции ---------- */
.rd .rd-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.rd .rd-head__text { max-width: 720px; }
.rd .rd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rd-fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-dark);
    margin-bottom: 10px;
}
.rd .rd-head h2 {
    font-size: var(--rd-fs-h2);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.18;
}
.rd .rd-head p {
    margin-top: 10px;
    color: var(--ink-soft);
    font-size: var(--rd-fs-md);
    line-height: 1.55;
}
.rd .rd-head__aside { flex: none; padding-bottom: 4px; }
.rd .rd-head--center { flex-direction: column; align-items: center; text-align: center; }
.rd .rd-head--center .rd-head__text { max-width: 680px; }

/* ---------- Кнопки: единая система ---------- */
.rd .btn {
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: var(--rd-fs-sm);
    font-weight: 700;
    gap: 8px;
    box-shadow: none;
}
.rd .btn:focus-visible { outline: none; box-shadow: var(--rd-ring); }
.rd .btn-primary { background: var(--brand); color: #fff; }
.rd .btn-primary:hover { background: var(--brand-dark); box-shadow: 0 10px 24px rgba(180, 83, 9, .24); }
.rd .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--rd-line-strong); }
.rd .btn-ghost:hover { background: var(--rd-surface-2); border-color: var(--ink-faint); text-decoration: none; }
.rd .btn-quiet { background: var(--rd-surface-2); color: var(--ink); border: 1px solid var(--rd-line); }
.rd .btn-quiet:hover { background: #f3efe7; text-decoration: none; }
.rd .btn-lg { min-height: 54px; padding: 16px 28px; font-size: var(--rd-fs-base); border-radius: 14px; }
.rd .btn-sm { min-height: 38px; padding: 8px 14px; font-size: var(--rd-fs-sm); border-radius: 10px; }
.rd .btn-block { width: 100%; }
.rd .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: var(--rd-fs-sm);
    color: var(--brand-dark);
}
.rd .btn-text:hover { text-decoration: none; color: var(--brand); }

/* ---------- Метки ---------- */
.rd .rd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--rd-fs-xs);
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.rd .rd-badge--free { background: var(--ok-soft); color: var(--ok); }
.rd .rd-badge--sub { background: var(--brand-soft); color: var(--brand-dark); }
.rd .rd-badge--neutral { background: var(--rd-surface-2); color: var(--ink-soft); border: 1px solid var(--rd-line); }

/* ==========================================================================
   HERO — помещается в первый экран
   ========================================================================== */
.rd .rd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    min-height: min(82svh, 720px);
    padding-block: clamp(28px, 5vh, 64px) var(--rd-rhythm-sm);
}
.rd .rd-hero h1 {
    font-size: var(--rd-fs-h1);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.06;
    margin-top: 14px;
}
.rd .rd-hero__lead {
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: var(--rd-fs-md);
    line-height: 1.6;
    max-width: 560px;
}
.rd .rd-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.rd .rd-hero__note {
    margin-top: 16px;
    color: var(--ink-faint);
    font-size: var(--rd-fs-sm);
    max-width: 520px;
    line-height: 1.5;
}
.rd .rd-hero__proof {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rd-line);
    color: var(--ink-faint);
    font-size: var(--rd-fs-sm);
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
.rd .rd-hero__proof b { color: var(--ink); }

/* Живой пример вопроса — правая часть hero */
.rd .rd-q {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-lg);
    box-shadow: var(--rd-shadow);
    padding: 26px 28px 24px;
    width: 100%;
    max-width: 520px;
    justify-self: end;
}
.rd .rd-q__top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rd-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    margin-bottom: 14px;
}
.rd .rd-q__text {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 16px;
    letter-spacing: -.01em;
}
.rd .rd-q__opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1.5px solid var(--rd-line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    font-size: var(--rd-fs-sm);
    line-height: 1.45;
    color: var(--ink-soft);
    background: #fff;
}
.rd .rd-q__opt .rd-letter {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f0ea;
    color: var(--ink-soft);
    font-weight: 800;
    font-size: var(--rd-fs-xs);
}
.rd .rd-q__opt--correct { border-color: #86c79b; background: var(--ok-soft); color: #14532d; }
.rd .rd-q__opt--correct .rd-letter { background: var(--ok); color: #fff; }
.rd .rd-q__footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--rd-fs-sm);
    color: var(--ink-faint);
}
.rd .rd-q__bar {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.rd .rd-q__bar span {
    width: 22px;
    height: 4px;
    border-radius: 999px;
    background: var(--rd-line-strong);
}
.rd .rd-q__bar span:first-child { background: var(--brand); }

/* ---------- Полоса цифр под hero ---------- */
.rd .rd-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--rd-line);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
}
.rd .rd-stat {
    background: var(--rd-surface);
    padding: 20px 22px;
}
.rd .rd-stat b {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.rd .rd-stat span { color: var(--ink-soft); font-size: var(--rd-fs-sm); }

/* ==========================================================================
   ПОЛОСЫ (bands): бесплатная диагностика и B2B
   ========================================================================== */
.rd .rd-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding: 28px 32px;
    border-radius: var(--rd-radius-lg);
    border: 1px solid var(--rd-line);
    background: var(--rd-surface);
    box-shadow: var(--rd-shadow);
}
.rd .rd-band--brand {
    background: linear-gradient(115deg, #fef7e6 0%, #fdf1d8 55%, #fbe9c4 100%);
    border-color: #f1dcae;
}
.rd .rd-band__body { flex: 1 1 380px; max-width: 720px; }
.rd .rd-band__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--rd-fs-lg);
    font-weight: 800;
    letter-spacing: -.01em;
}
.rd .rd-band p { margin-top: 8px; color: var(--ink-soft); line-height: 1.55; font-size: var(--rd-fs-md); }
.rd .rd-band__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rd .rd-band--compact { padding: 22px 26px; }

/* ==========================================================================
   ТРИ РЕЖИМА
   ========================================================================== */
.rd .rd-grid { display: grid; gap: var(--gap, 20px); }
.rd .rd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd .rd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rd .rd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.rd .rd-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rd .rd-card--flat { box-shadow: none; }
.rd .rd-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.rd .rd-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--rd-fs-lg);
    font-weight: 800;
    letter-spacing: -.01em;
}
.rd .rd-card__text { color: var(--ink-soft); font-size: var(--rd-fs-md); line-height: 1.55; overflow-wrap: break-word; }
.rd .rd-card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.rd .rd-card__foot .rd-course__hint,
.rd .rd-course__hint { flex-basis: 100%; }
.rd .rd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rd .rd-list li {
    /* НЕ flex: внутри пункта бывают инлайновые вставки (точки уровней, ссылки) —
       во флекс-контейнере они становятся отдельными колонками и текст «разъезжается» */
    position: relative;
    padding-left: 16px;
    color: var(--ink-soft);
    font-size: var(--rd-fs-sm);
    line-height: 1.5;
    overflow-wrap: break-word;
}
.rd .rd-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

/* ==========================================================================
   ТЁМНАЯ ПОЛОСА «КАРЬЕРА» (единственный тёмный акцент на странице)
   ========================================================================== */
.rd .rd-dark {
    background: linear-gradient(140deg, var(--rd-dark-2) 0%, var(--rd-dark) 65%);
    color: #fff;
    border-radius: var(--rd-radius-lg);
    padding: clamp(28px, 3.5vw, 44px);
    box-shadow: 0 20px 50px rgba(17, 24, 39, .22);
}
.rd .rd-dark__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.rd .rd-dark__title { display: flex; align-items: center; gap: 14px; }
.rd .rd-dark__mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand), #f59e0b);
    color: #fff;
    flex: none;
}
.rd .rd-dark h2 { font-size: var(--rd-fs-h3); font-weight: 800; letter-spacing: -.01em; }
.rd .rd-dark__sub { color: #cbd5e1; font-size: var(--rd-fs-sm); margin-top: 3px; }
.rd .rd-dark__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 14px;
    margin-top: 26px;
}
.rd .rd-dark__item {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 16px 18px;
}
.rd .rd-dark__item b { display: flex; align-items: center; gap: 8px; font-size: var(--rd-fs-base); }
.rd .rd-dark__item p { color: #cbd5e1; font-size: var(--rd-fs-sm); margin-top: 6px; line-height: 1.5; }
.rd .rd-dark__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.rd .rd-dark__note { color: #94a3b8; font-size: var(--rd-fs-sm); }
.rd .rd-dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.rd .rd-dark .btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* ==========================================================================
   КОМУ ПОДОЙДЁТ
   ========================================================================== */
.rd .rd-segment {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rd .rd-segment b { font-size: var(--rd-fs-base); font-weight: 800; }
.rd .rd-segment p { color: var(--ink-soft); font-size: var(--rd-fs-sm); line-height: 1.55; flex: 1; }
.rd .rd-segment .rd-card__icon { width: 38px; height: 38px; border-radius: 10px; }

/* ==========================================================================
   КУРСЫ
   ========================================================================== */
.rd .rd-courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rd .rd-course {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.rd .rd-course:hover {
    border-color: var(--rd-line-strong);
    box-shadow: var(--rd-shadow-hover);
    transform: translateY(-2px);
}
.rd .rd-course__top { display: flex; align-items: center; gap: 12px; }
.rd .rd-course__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    color: var(--brand-dark);
    flex: none;
}
.rd .rd-course h3 { font-size: var(--rd-fs-base); font-weight: 800; letter-spacing: -.01em; }
.rd .rd-course__text { color: var(--ink-soft); font-size: var(--rd-fs-sm); line-height: 1.55; flex: 1; }
.rd .rd-course__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--rd-fs-xs);
    color: var(--ink-faint);
}
.rd .rd-course__meta span {
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    border-radius: 999px;
    padding: 3px 10px;
}
.rd .rd-course__cta { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.rd .rd-course__hint {
    font-size: var(--rd-fs-xs);
    color: var(--ink-faint);
    /* две строки всегда: иначе кнопки в ряду «пляшут», когда название темы длиннее */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

/* ==========================================================================
   ЧТО ВНУТРИ ТЕСТА — компактный список, а не шесть карточек
   ========================================================================== */
.rd .rd-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 40px;
}
.rd .rd-feature { display: flex; gap: 14px; align-items: flex-start; }
.rd .rd-feature__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    color: var(--brand-dark);
}
.rd .rd-feature b { font-size: var(--rd-fs-base); font-weight: 700; }
.rd .rd-feature p { color: var(--ink-soft); font-size: var(--rd-fs-sm); line-height: 1.55; margin-top: 3px; }

/* ==========================================================================
   ГАЙДЫ
   ========================================================================== */
.rd .rd-guides {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rd .rd-guides__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rd .rd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--rd-line);
    background: var(--rd-surface);
    color: var(--ink);
    font-size: var(--rd-fs-sm);
    font-weight: 600;
}
.rd .rd-chip:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }

/* ==========================================================================
   ОТЗЫВЫ / ПАКЕТЫ / FAQ / ФИНАЛЬНЫЙ CTA
   ========================================================================== */
.rd .rd-quote {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rd .rd-quote__stars { color: var(--warn); letter-spacing: 3px; font-size: var(--rd-fs-sm); }
.rd .rd-quote__text { font-size: var(--rd-fs-md); line-height: 1.65; flex: 1; }
.rd .rd-quote__author { color: var(--ink-faint); font-size: var(--rd-fs-sm); }
.rd .rd-quote__author b { color: var(--ink); }

.rd .rd-package {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-top: 3px solid var(--brand);
    border-radius: var(--rd-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rd .rd-package__price { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.rd .rd-package__unit { color: var(--ink-faint); font-size: var(--rd-fs-sm); }
.rd .rd-package__text { color: var(--ink-soft); font-size: var(--rd-fs-sm); line-height: 1.55; flex: 1; }

.rd .rd-faq { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.rd .rd-faq details {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding: 16px 20px;
}
.rd .rd-faq summary {
    /* не flex: внутри вопроса бывает инлайновая разметка, во флексе она распадается
       на колонки. Маркер «+/–» рисуем абсолютом. */
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 28px;
    display: block;
}
.rd .rd-faq summary::-webkit-details-marker { display: none; }
.rd .rd-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    color: var(--brand);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1.3;
}
.rd .rd-faq details[open] summary::after { content: "–"; }
.rd .rd-faq p { margin-top: 10px; color: var(--ink-soft); line-height: 1.6; }

.rd .rd-final {
    text-align: center;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-lg);
    padding: clamp(32px, 4vw, 56px);
    box-shadow: var(--rd-shadow);
}
.rd .rd-final h2 { font-size: var(--rd-fs-h2); font-weight: 800; letter-spacing: -.02em; }
.rd .rd-final p { color: var(--ink-soft); margin-top: 12px; font-size: var(--rd-fs-md); }
.rd .rd-final__actions { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   АДАПТИВНОСТЬ
   ========================================================================== */
@media (max-width: 1024px) {
    .rd .rd-hero { min-height: 0; grid-template-columns: minmax(0, 1fr); }
    .rd .rd-q { justify-self: stretch; max-width: none; }
    .rd .rd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd .rd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd .rd-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd .rd-dark__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .rd .rd-wrap { padding-inline: 20px; }
    .rd .rd-hero { padding-block: 20px 32px; }
    .rd .rd-hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
    .rd .rd-hero__lead { font-size: var(--rd-fs-base); }
    .rd .rd-head { flex-direction: column; align-items: flex-start; }
    .rd .rd-head__aside { padding-bottom: 0; }
    .rd .rd-grid--3,
    .rd .rd-grid--4,
    .rd .rd-grid--2,
    .rd .rd-courses,
    .rd .rd-dark__grid,
    .rd .rd-features,
    .rd .rd-stats { grid-template-columns: minmax(0, 1fr); }
    .rd .rd-stat b { font-size: 1.5rem; }
    .rd .rd-band { padding: 22px; }
    .rd .rd-band__actions { width: 100%; }
    .rd .rd-band__actions .btn { flex: 1 1 auto; }
    .rd .rd-hero__cta .btn { flex: 1 1 100%; }
    .rd .rd-final__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   СТРАНИЦА ТЕСТА (визард вопросов, результаты)
   Логику и разметку не трогаем — только оформление.
   ========================================================================== */
.rd .test-head { padding-block: 8px 0; }
.rd .test-head h1 { font-size: var(--rd-fs-h2); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }
.rd .test-head p { color: var(--ink-soft); margin-top: 8px; font-size: var(--rd-fs-md); max-width: 760px; }
.rd .progress-track { margin-top: 20px; }
.rd .progress-bar {
    height: 8px;
    border-radius: 999px;
    background: #ece7dd;
    overflow: hidden;
}
.rd .progress-bar .fill { background: var(--brand); transition: width .25s ease; }
.rd .progress-label { color: var(--ink-soft); font-size: var(--rd-fs-sm); margin-top: 8px; }
.rd .q-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.rd .q-dots button,
.rd .q-dots .dot {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--rd-line);
    background: var(--rd-surface);
    color: var(--ink-soft);
    font-size: var(--rd-fs-xs);
    font-weight: 700;
    cursor: pointer;
}
.rd .q-dots .dot--done,
.rd .q-dots button.is-done { background: var(--ok-soft); border-color: #a7d8b6; color: var(--ok); }
.rd .q-dots .dot--current,
.rd .q-dots button.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }

.rd .question-view {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-lg);
    box-shadow: var(--rd-shadow);
    padding: 28px;
    margin-top: 24px;
}
.rd .q-counter {
    font-size: var(--rd-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rd .q-text {
    font-size: clamp(1.0625rem, .55vw + 1rem, 1.375rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.01em;
    margin: 12px 0 20px;
}
.rd .q-options { display: flex; flex-direction: column; gap: 10px; }
.rd .q-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--rd-line);
    border-radius: 14px;
    padding: 14px 16px;
    font: inherit;
    font-size: var(--rd-fs-md);
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rd .q-option:hover { border-color: var(--brand); background: #fffdf7; }
.rd .q-option.selected {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: var(--rd-ring);
}
.rd .q-option .letter {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    font-weight: 800;
    font-size: var(--rd-fs-sm);
    color: var(--ink-soft);
}
.rd .q-option.selected .letter { background: var(--brand); border-color: var(--brand); color: #fff; }
.rd .explain {
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    border-left: 3px solid var(--brand);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: var(--rd-fs-sm);
}
.rd .explain b { color: var(--ink); }
.rd .nav-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.rd .nav-hint { color: var(--ink-faint); font-size: var(--rd-fs-xs); margin-top: 10px; }
.rd .results-head { margin-top: 8px; }
.rd .results-title { font-size: var(--rd-fs-h2); font-weight: 800; letter-spacing: -.02em; }
.rd .score-card,
.rd .plan-block {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding: 22px;
    box-shadow: var(--rd-shadow);
}
.rd .grade-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: var(--rd-fs-sm);
    font-weight: 700;
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.rd .type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.rd .type-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding: 20px;
    text-align: center;
}
.rd .type-hint { color: var(--ink-soft); font-size: var(--rd-fs-sm); }
.rd .answer-lines { display: flex; flex-direction: column; gap: 8px; }
.rd .answer-lines .al {
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: var(--rd-fs-sm);
    color: var(--ink-soft);
}
@media (max-width: 720px) {
    .rd .question-view { padding: 20px; border-radius: var(--rd-radius); }
    .rd .nav-row .btn { flex: 1 1 auto; }
    .rd .q-option { font-size: var(--rd-fs-base); padding: 13px 14px; }
}

.rd .profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rd-line);
}
.rd .profile-row:last-child { border-bottom: none; }
.rd .profile-row .k { color: var(--ink-soft); font-size: var(--rd-fs-sm); }

.rd .flashes {
    max-width: var(--rd-container);
    margin: 14px auto 0;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rd .flash {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: var(--rd-fs-sm);
    border: 1px solid transparent;
}
.rd .flash.ok { background: var(--ok-soft); color: #14532d; border-color: #a7d8b6; }
.rd .flash.info { background: var(--rd-surface-2); color: var(--ink-soft); border-color: var(--rd-line); }
.rd .flash.warning { background: var(--warn-soft); color: #78350f; border-color: #f1dcae; }
.rd .flash.error { background: var(--bad-soft); color: #7f1d1d; border-color: #f0b4b4; }

/* Общие блоки SEO-страниц и старых карточек: остаются работоспособными,
   но получают новую типографику и ритм внутри слоя .rd */
.rd .hero { text-align: left; padding-block: var(--rd-rhythm-sm) 0; }
.rd .hero h1 { font-size: var(--rd-fs-h2); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.rd .hero p {
    color: var(--ink-soft);
    font-size: var(--rd-fs-md);
    line-height: 1.6;
    margin-top: 12px;
    max-width: 820px;
}
.rd .crumbs,
.rd .breadcrumbs { color: var(--ink-faint); font-size: var(--rd-fs-sm); }
.rd .crumbs a,
.rd .breadcrumbs a { color: var(--ink-faint); }
.rd .crumbs a:hover,
.rd .breadcrumbs a:hover { color: var(--brand-dark); }
.rd .course-card {
    border-radius: var(--rd-radius);
    border-color: var(--rd-line);
    box-shadow: var(--rd-shadow);
    padding: 24px;
}
.rd .course-card h2 { font-size: var(--rd-fs-lg); font-weight: 800; letter-spacing: -.01em; }
.rd .course-card .desc { font-size: var(--rd-fs-md); line-height: 1.55; }
.rd .course-card .meta { font-size: var(--rd-fs-sm); color: var(--ink-faint); }
.rd .courses-grid { gap: 20px; padding-bottom: 0; }

/* ==========================================================================
   КАРЬЕРА и общие блоки внутренних страниц
   ========================================================================== */
.rd .avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand-dark);
    flex: none;
}
.rd .course-head { padding-block: 8px 0; gap: 16px; }
.rd .course-head h1 { font-size: var(--rd-fs-h2); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.rd .course-head .desc {
    color: var(--ink-soft);
    margin-top: 8px;
    max-width: 760px;
    line-height: 1.55;
    font-size: var(--rd-fs-md);
}
.rd .section-title {
    font-size: var(--rd-fs-h3);
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 32px 0 16px;
}
.rd .career-collapse {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    margin-bottom: 12px;
    overflow: hidden;
}
.rd .career-collapse summary {
    /* layout-ok: здесь флекс намеренный — заголовок, теги уровня и шеврон в строку */
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    list-style: none;
}
.rd .career-collapse summary::-webkit-details-marker { display: none; }
.rd .career-collapse-body { padding: 0 20px 18px; color: var(--ink-soft); line-height: 1.65; }
.rd .career-collapse-body p { margin-top: 10px; }
.rd .career-collapse-body ul,
.rd .career-collapse-body ol { margin: 10px 0 0 20px; line-height: 1.7; }
.rd .career-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--rd-fs-xs);
    font-weight: 700;
}
.rd .career-tag.is-muted {
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    color: var(--ink-faint);
}
.rd .stat-pill,
.rd .chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: var(--rd-fs-sm);
    color: var(--ink-soft);
}

/* ==========================================================================
   ЛЕСТНИЦА УРОВНЕЙ НА СТРАНИЦЕ СОБЕСЕДОВАНИЯ
   ========================================================================== */
.rd .iv-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.rd .iv-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--rd-line);
    background: var(--rd-surface);
    color: var(--ink-faint);
    font-size: var(--rd-fs-sm);
    font-weight: 600;
}
.rd .iv-step.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.rd .iv-step.is-done { border-color: #a7d8b6; background: var(--ok-soft); color: var(--ok); }
.rd .iv-step.is-off { opacity: .55; }
.rd .iv-arrow { color: var(--ink-faint); }

/* ==========================================================================
   СТУПЕНИ ДИАГНОСТИКИ, ТОЧКИ ВОПРОСОВ, ТИПЫ ВОПРОСОВ
   ========================================================================== */
.rd .ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.rd .ladder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--rd-fs-sm);
    font-weight: 600;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    color: var(--ink-soft);
}
.rd .ladder-chip.is-current { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); font-weight: 700; }
.rd .ladder-chip.is-passed { border-color: #a7d8b6; background: var(--ok-soft); color: var(--ok); }
.rd .ladder-chip.is-failed { border-color: #f0b4b4; background: var(--bad-soft); color: var(--bad); }
.rd .ladder-chip.is-locked { opacity: .6; }
.rd .ladder-arrow { color: var(--ink-faint); }
.rd .q-dot {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 1px solid var(--rd-line);
    background: var(--rd-surface);
    color: var(--ink-soft);
    font-size: var(--rd-fs-xs);
    font-weight: 700;
    cursor: pointer;
}
.rd .q-dot.answered { background: var(--ok-soft); border-color: #a7d8b6; color: var(--ok); }
.rd .q-dot.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.rd .qtype-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--rd-fs-xs);
    font-weight: 700;
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    color: var(--ink-soft);
}
.rd .type-card .k {
    color: var(--ink-soft);
    font-size: var(--rd-fs-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.rd .type-card .v { font-size: 1.25rem; font-weight: 800; margin-top: 6px; }
.rd .type-card.t-practice { border-color: #f1dcae; background: #fffdf7; }

/* ==========================================================================
   ОТЗЫВЫ, ГАЙДЫ, ТЕКСТОВЫЕ СТРАНИЦЫ
   ========================================================================== */
.rd .rd-quote--pending { border-style: dashed; border-color: var(--brand); }
.rd .rd-quote__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rd-fs-xs);
    font-weight: 700;
    color: var(--brand-dark);
}
.rd .rd-quote__answer {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--brand-soft);
    border-radius: 12px;
}
.rd .rd-quote__answer b { display: flex; align-items: center; gap: 8px; font-size: var(--rd-fs-sm); }
.rd .rd-quote__answer p { margin-top: 6px; line-height: 1.6; font-size: var(--rd-fs-sm); }
.rd .rd-quote__answer .rd-quote__author { margin-top: 6px; font-size: var(--rd-fs-xs); }
.rd .hint { color: var(--ink-faint); font-size: var(--rd-fs-xs); margin-top: 6px; line-height: 1.5; }

/* Длинный текст статьи или документа: узкая колонка с комфортной строкой */
.rd .rd-prose { max-width: 760px; }
.rd .rd-prose h2 { font-size: var(--rd-fs-h3); font-weight: 800; margin-top: 32px; letter-spacing: -.01em; }
.rd .rd-prose h3 { font-size: var(--rd-fs-md); font-weight: 800; margin-top: 24px; }
.rd .rd-prose p { margin-top: 12px; line-height: 1.7; color: var(--ink-soft); overflow-wrap: break-word; }
.rd .rd-prose ul,
.rd .rd-prose ol { margin: 12px 0 0 20px; line-height: 1.75; color: var(--ink-soft); }
.rd .rd-prose li { margin-top: 6px; }
.rd .rd-prose b,
.rd .rd-prose strong { color: var(--ink); }
.rd .rd-prose a { color: var(--brand-dark); text-decoration: underline; text-decoration-color: #e2c9a4; }
.rd .rd-prose a:hover { text-decoration-color: var(--brand); }
.rd .rd-prose blockquote {
    margin: 18px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--brand);
    background: var(--rd-surface-2);
    border-radius: 12px;
    color: var(--ink-soft);
}
.rd .rd-prose table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: var(--rd-fs-sm); }
.rd .rd-prose th,
.rd .rd-prose td { border: 1px solid var(--rd-line); padding: 10px 12px; text-align: left; }
.rd .rd-prose th { background: var(--rd-surface-2); font-weight: 700; }

/* Строка «шаг» для нумерованных инструкций */
.rd .rd-poll { display: grid; gap: 10px; }

/* Авторизация и служебные сообщения */
.rd .rd-auth { max-width: 470px; margin-inline: auto; }
.rd .error-msg {
    background: var(--bad-soft);
    border: 1px solid #f0b4b4;
    color: #7f1d1d;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: var(--rd-fs-sm);
    margin-bottom: 14px;
}
.rd .badge-ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--ok-soft);
    color: var(--ok);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: var(--rd-fs-xs);
    font-weight: 700;
}
.rd .badge-muted {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    color: var(--ink-faint);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: var(--rd-fs-xs);
    font-weight: 700;
}
.rd .form-check { display: flex; align-items: center; gap: 8px; }
.rd .form-check input[type="checkbox"] { width: auto; }
.rd .rd-form label.rd-check {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    color: var(--ink-soft);
    font-size: var(--rd-fs-sm);
    line-height: 1.45;
    cursor: pointer;
}
.rd .rd-form label.rd-check input { width: auto; margin-top: 3px; flex: none; }
.rd .rd-auth__links {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rd-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--rd-fs-sm);
    color: var(--ink-soft);
}

/* ==========================================================================
   ШАГИ, ФОРМА, B2B
   ========================================================================== */
.rd .rd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rd .rd-step {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding: 22px;
}
.rd .rd-step__num {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.rd .rd-step b { font-size: var(--rd-fs-base); font-weight: 800; }
.rd .rd-step p { color: var(--ink-soft); font-size: var(--rd-fs-sm); line-height: 1.55; margin-top: 6px; }

.rd .rd-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rd .rd-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--rd-fs-sm);
    font-weight: 600;
    color: var(--ink);
}
.rd .rd-form input,
.rd .rd-form select,
.rd .rd-form textarea {
    font: inherit;
    font-size: var(--rd-fs-base);
    padding: 11px 14px;
    border: 1px solid var(--rd-line-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    width: 100%;
}
.rd .rd-form input:focus,
.rd .rd-form select:focus,
.rd .rd-form textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--rd-ring);
}
.rd .rd-form__full { grid-column: 1 / -1; }
.rd .rd-form__hint { color: var(--ink-faint); font-size: var(--rd-fs-xs); }
@media (max-width: 1024px) {
    .rd .rd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .rd .rd-steps,
    .rd .rd-form { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   СТРАНИЦА КУРСА: заголовок, подсказка, список тем
   ========================================================================== */
.rd .rd-course-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.rd .rd-course-head .rd-course__icon { width: 56px; height: 56px; border-radius: 16px; }
.rd .rd-course-head h1 { font-size: var(--rd-fs-h2); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.rd .rd-course-head p { color: var(--ink-soft); margin-top: 8px; max-width: 720px; line-height: 1.55; font-size: var(--rd-fs-md); }
.rd .rd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rd .rd-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: var(--rd-fs-sm);
    color: var(--ink-soft);
}
.rd .rd-help {
    background: var(--ok-soft);
    border: 1px solid #a7d8b6;
    border-radius: var(--rd-radius);
    padding: 18px 20px;
    margin-top: 24px;
}
.rd .rd-help__title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #14532d; margin-bottom: 6px; }
.rd .rd-help p { color: #14532d; line-height: 1.55; }
.rd .rd-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rd .lvl-chip.is-active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* Строки тем: переопределяем старый .test-row в новом слое */
.rd .test-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.rd .test-row:hover { border-color: var(--rd-line-strong); box-shadow: var(--rd-shadow); }
.rd .test-row .num {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    font-weight: 800;
    color: var(--ink-soft);
}
.rd .test-row .body { flex: 1; min-width: 0; }
.rd .test-row .body h3 { font-size: var(--rd-fs-md); font-weight: 700; letter-spacing: -.01em; }
.rd .test-row .body .sub { color: var(--ink-faint); font-size: var(--rd-fs-sm); margin-top: 4px; }
.rd .test-row .go { flex: none; }
@media (max-width: 720px) {
    .rd .rd-course-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .rd .test-row { flex-wrap: wrap; }
    .rd .test-row .go { width: 100%; }
    .rd .test-row .go .btn { width: 100%; }
}

/* ==========================================================================
   СПИСОК КУРСОВ (каталог): ровные строки вместо сетки карточек
   ========================================================================== */
.rd .rd-course-list { display: flex; flex-direction: column; gap: 12px; }
.rd .rd-course-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    padding: 18px 20px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.rd .rd-course-row:hover { border-color: var(--rd-line-strong); box-shadow: var(--rd-shadow-hover); }
.rd .rd-course-row__body { min-width: 0; }
.rd .rd-course-row__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--rd-fs-md);
    font-weight: 800;
    letter-spacing: -.01em;
}
/* Аудитория бывает длинным списком («data-аналитики, тестировщики, разработчики») —
   бейдж должен переноситься, иначе он растягивает строку и ломает мобильную вёрстку */
.rd .rd-course-row__title .rd-badge {
    white-space: normal;
    max-width: 100%;
    line-height: 1.35;
    font-weight: 600;
}
.rd .rd-course-row__title a { color: var(--ink); }
.rd .rd-course-row__title a:hover { color: var(--brand-dark); text-decoration: none; }
.rd .rd-course-row__text {
    color: var(--ink-soft);
    font-size: var(--rd-fs-sm);
    line-height: 1.5;
    margin-top: 4px;
}
.rd .rd-course-row__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: var(--rd-fs-xs);
    color: var(--ink-faint);
}
.rd .rd-course-row__meta span {
    background: var(--rd-surface-2);
    border: 1px solid var(--rd-line);
    border-radius: 999px;
    padding: 3px 10px;
}
.rd .rd-course-row__action { justify-self: end; }
@media (max-width: 720px) {
    .rd .rd-course-row { grid-template-columns: 40px minmax(0, 1fr); }
    .rd .rd-course-row__action { grid-column: 2; justify-self: stretch; }
    .rd .rd-course-row__action .btn { width: 100%; }
}

/* Сетка, которая не оставляет пустых ячеек: одна карточка растягивается на всю ширину */
.rd .rd-grid--auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* ==========================================================================
   ТАРИФЫ
   ========================================================================== */
.rd .rd-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.rd .rd-plan {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-lg);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--rd-shadow);
}
.rd .rd-plan--featured {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand), var(--rd-shadow-hover);
}
.rd .rd-plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rd .rd-plan__title { font-size: var(--rd-fs-lg); font-weight: 800; letter-spacing: -.01em; }
.rd .rd-plan__price {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}
.rd .rd-plan__price small {
    font-size: var(--rd-fs-sm);
    font-weight: 600;
    color: var(--ink-faint);
    letter-spacing: 0;
    margin-left: 6px;
}
.rd .rd-plan__note { color: var(--ink-soft); font-size: var(--rd-fs-sm); line-height: 1.5; }
.rd .rd-plan .rd-list { flex: 1; }
.rd .rd-plan__cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   ШАПКА И ПОДВАЛ в новом стиле.
   Стили работают только на страницах с классом .rd на <body>, поэтому
   остальные разделы выглядят как раньше, пока их не переведём.
   ========================================================================== */
.rd .topbar {
    background: rgba(252, 251, 249, .92);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    color: var(--ink);
    border-bottom: 1px solid var(--rd-line);
    box-shadow: none;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 30;
}
.rd .topbar .container {
    max-width: var(--rd-container);
    padding-inline: 24px;
}
.rd .brand {
    color: var(--ink);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.015em;
    gap: 9px;
}
.rd .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.rd .topbar-links a {
    color: var(--ink);
    opacity: 1;
    font-size: var(--rd-fs-sm);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 10px;
}
.rd .topbar-links a:hover {
    background: var(--rd-surface-2);
    color: var(--brand-dark);
    text-decoration: none;
    opacity: 1;
}
.rd .topbar-links .nav-cta {
    background: var(--brand);
    color: #fff;
    padding: 9px 16px;
    font-weight: 700;
}
.rd .topbar-links .nav-cta:hover {
    background: var(--brand-dark);
    color: #fff;
}
.rd .nav-toggle { color: var(--ink); }
.rd .link-btn {
    background: none;
    border: none;
    color: var(--ink);
    font: inherit;
    font-size: var(--rd-fs-sm);
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
}
.rd .link-btn:hover { background: var(--rd-surface-2); }

.rd .footer {
    border-top: 1px solid var(--rd-line);
    background: var(--rd-surface);
    color: var(--ink-soft);
}
.rd .footer a { color: var(--ink-soft); }
.rd .footer a:hover { color: var(--brand-dark); }

@media (max-width: 1024px) {
    .rd .topbar .container { padding-inline: 20px; }
    .rd .brand { font-size: 1.05rem; }
    .rd .topbar-links a,
    .rd .topbar-links .link-btn { font-size: var(--rd-fs-base); padding: 10px 14px; }
}