/* Single course page — layout aligned with Vet Brain course design */

.vb-course-page {
    --vb-grey: #232929;
    --vb-cayman: #239cb1;
    --vb-coral: #f8485e;
    --vb-secondary-grey: #859494;
    --vb-cornflower: #6490e7;
    --vb-bg-soft: #f0f8fa;
    --vb-line: #b8cccc;
    --vb-white: #ffffff;
    padding-top: 20px;
    padding-bottom: 80px;
}

.vb-course-inner {
    width: 100%;
    max-width: 1760px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .vb-course-inner {
        padding-left: 32px;
        padding-right: 32px;
    }
}

.vb-course-inner--narrow {
    max-width: 1760px;
}

.vb-course-inner--tariffs {
    max-width: 1760px;
}

/* Hero */
/* Hero — Block 1133:1269: база #232929 + Cayman-градиент, blend как в макете. */
.vb-course-hero-wrap {
    position: relative;
    isolation: isolate;
    background-color: rgb(35, 41, 41);
    background-image: linear-gradient(149.2006787756511deg, rgb(84, 191, 209) 0%, rgb(35, 156, 177) 80.895%);
    background-blend-mode: multiply;
    border-radius: 32px;
    margin-bottom: 80px;
    overflow: hidden;
    color: var(--vb-white);
}

/* Текстура: Figma imgBlock1, 183.2×245.2, 3%, repeat, left top (node 1133:1269). */
.vb-course-hero-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 32px;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("../images/main-page/course-hero-bg-pattern-1133-figma.png");
    background-size: 183.20000272989273px 245.20000365376472px;
    background-position: left top;
    background-repeat: repeat;
}

@media (max-width: 1200px) {
    .vb-course-hero-wrap {
        margin-left: 32px;
        margin-right: 32px;
    }
}

.vb-course-hero-inner {
    position: relative;
    z-index: 1;
    padding: 0;
}

.vb-course-hero-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 750px;
}

.vb-course-hero-info-top {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.vb-course-hero-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 960px) {
    .vb-course-hero-main {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

.vb-course-hero-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 42px 32px;
}

.vb-course-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vb-course-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 2px solid var(--vb-secondary-grey);
    border-radius: 100px;
    color: var(--vb-secondary-grey);
    font-family: Onest, system-ui, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

.vb-course-badge-icon {
    flex: 0 0 auto;
}

.vb-course-badge-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vb-course-badge--accent {
    background: var(--vb-cayman);
    border-color: var(--vb-cayman);
    color: var(--vb-white);
    font-weight: 700;
}

.vb-course-title {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--vb-white);
}

.vb-course-excerpt {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--vb-secondary-grey);
    max-width: 680px;
}

.vb-course-hero-cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.vb-course-price-line {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: Onest, system-ui, sans-serif;
    line-height: 1.4;
}

.vb-course-price-from {
    font-size: 32px;
    font-weight: 500;
    color: var(--vb-secondary-grey);
}

.vb-course-price-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--vb-white);
}

.vb-course-price-suffix {
    font-size: 32px;
    font-weight: 500;
    color: var(--vb-secondary-grey);
}

.vb-course-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 450px);
    padding: 24px 32px;
    border-radius: 12px;
    font-family: Onest, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.vb-course-btn:hover {
    opacity: 0.92;
}

.vb-course-btn--primary {
    background: var(--vb-coral);
    color: var(--vb-white);
}

.vb-course-btn--wide {
    min-width: 0;
}

.vb-course-btn--tariff {
    width: 100%;
    margin-top: 16px;
}

.vb-course-cta-note {
    margin: 0;
    max-width: 36rem;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.75);
}

.vb-course-hero-visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 32px;
    min-height: 750px;
    overflow: hidden;
}

/* Слои как в Figma (Image Container): декор imgImageContainer + data URL radial поверх всей колонки 880×750. */
.vb-course-hero-visual-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.vb-course-hero-visual-atmosphere::before {
    content: '';
    position: absolute;
    left: 14.43%;
    top: 3.14%;
    width: 71.14%;
    height: 93.73%;
    opacity: 0.05;
    background: url("../images/main-page/course-hero-shape-figma.png") center / contain no-repeat;
}

.vb-course-hero-visual-atmosphere::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("../images/main-page/course-hero-visual-glow.svg") no-repeat center / 100% 100%;
}

/* Кадр и масштаб фото — как в Figma (node 1133:1270 / imgImageContainer1): overflow + 103.56% × 186.8%, top -20.67%, left -0.02%. */
.vb-course-hero-img-frame {
    position: absolute;
    inset: 32px;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.vb-course-hero-img {
    display: block;
    position: absolute;
    left: -0.02%;
    top: -20.67%;
    width: 103.56%;
    height: 186.8%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
    object-position: 50% 50%;
}

.vb-course-trust-card {
    position: absolute;
    right: 0;
    bottom: 18px;
    max-width: 312px;
    padding: 24px;
    border-radius: 32px;
    background: var(--vb-cornflower);
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: Onest, system-ui, sans-serif;
    z-index: 3;
}

.vb-course-trust-count {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vb-white);
}

.vb-course-trust-label {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--vb-white);
}

.vb-course-next-start {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--vb-secondary-grey);
}

@media (max-width: 1320px) {
    .vb-course-hero-info {
        padding: 32px;
    }

    .vb-course-badge {
        font-size: 16px;
    }

    .vb-course-title {
        font-size: clamp(32px, 4vw, 44px);
    }

    .vb-course-excerpt {
        font-size: 20px;
    }

    .vb-course-price-from,
    .vb-course-price-suffix {
        font-size: 28px;
    }

    .vb-course-price-value {
        font-size: 36px;
    }

    .vb-course-btn {
        font-size: 22px;
    }

    .vb-course-next-start {
        font-size: 20px;
    }

    .vb-course-hero-visual,
    .vb-course-hero-main {
        min-height: 640px;
    }

    .vb-course-trust-label {
        font-size: 22px;
    }
}

@media (max-width: 960px) {
    .vb-course-hero-info {
        padding: 28px 24px 8px;
    }

    .vb-course-hero-visual {
        min-height: 480px;
        padding: 0 24px 24px;
    }

    .vb-course-hero-img-frame {
        inset: 24px 24px 80px;
    }

    .vb-course-hero-img {
        left: 0;
        top: -14%;
        width: 100%;
        height: 145%;
        object-position: 50% 32%;
    }

    .vb-course-btn {
        width: 100%;
    }

    .vb-course-trust-card {
        max-width: 280px;
        border-radius: 24px;
    }

    .vb-course-trust-count {
        font-size: 28px;
    }

    .vb-course-trust-label {
        font-size: 22px;
    }
}

/* Sections */
.vb-course-section {
    margin-bottom: 80px;
}

.vb-course-section--muted {
    background: var(--vb-bg-soft);
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
}

.vb-course-section--audience {
    background: var(--vb-bg-soft);
    margin-bottom: 100px;
}

.vb-course-section--audience .vb-course-inner {
    padding-left: 0;
    padding-right: 0;
}

.vb-course-section-title {
    margin: 0 0 24px;
    font-family: Onest, system-ui, sans-serif;
    font-size: clamp(26px, 3vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--vb-grey);
}

.vb-course-section-title--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
}

.vb-course-section-subtitle {
    margin: 0 auto 40px;
    max-width: 720px;
    text-align: center;
    font-family: Onest, system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.45;
    color: #4a5555;
}

.vb-course-section-subtitle--narrow {
    max-width: 560px;
}

/* Pathology */
.vb-course-pathology-layout {
    display: grid;
    grid-template-columns: 495px minmax(0, 1fr);
    gap: 20px;
    margin-top: 42px;
}

.vb-course-pathology-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 20px;
    height: 580px;
}

.vb-course-section--pathology .vb-course-section-title {
    margin-bottom: 0;
    font-size: 52px;
    line-height: 1.3;
    max-width: 980px;
}

.vb-course-pathology-hero-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(121.39deg, #54bfd1 0%, #239cb1 80.9%);
    height: 580px;
}

.vb-course-pathology-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vb-pathology-texture) left top / 183px 245px repeat;
    opacity: 0.07;
}

.vb-course-pathology-hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(115px 115px at 47% 85%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%);
}

.vb-course-pathology-hero-text {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 32px;
    max-width: 431px;
    font-family: Onest, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vb-white);
}

.vb-course-pathology-hero-image {
    position: absolute;
    z-index: 1;
    left: -40px;
    right: -18px;
    bottom: 0;
    width: calc(100% + 58px);
    height: 72%;
    object-fit: cover;
    object-position: center bottom;
}

.vb-course-pathology-cell {
    border-radius: 32px;
    background: var(--vb-white);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Onest, system-ui, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--vb-grey);
}

.vb-course-pathology-cell--cta {
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    background: linear-gradient(147.92deg, #54bfd1 0%, #239cb1 80.9%);
    color: var(--vb-white);
}

a.vb-course-pathology-cell--cta {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.vb-course-pathology-cell--cta:focus-visible {
    outline: 2px solid var(--vb-white, #fff);
    outline-offset: 4px;
}

.vb-course-pathology-cell--cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vb-pathology-texture) left top / 183px 245px repeat;
    opacity: 0.07;
}

.vb-course-pathology-cell--cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(150px 120px at 73% 70%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 100%);
}

.vb-course-pathology-cta-text {
    position: relative;
    z-index: 2;
    max-width: 190px;
    line-height: 1.2;
}

.vb-course-pathology-cta-image {
    position: absolute;
    z-index: 1;
    width: 53.96%;
    height: 165.87%;
    left: 55.05%;
    top: -19.43%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1480px) {
    .vb-course-section--pathology .vb-course-section-title {
        font-size: 44px;
    }

    .vb-course-pathology-layout {
        grid-template-columns: 420px minmax(0, 1fr);
    }

    .vb-course-pathology-hero-card,
    .vb-course-pathology-grid {
        height: 520px;
    }

    .vb-course-pathology-cell {
        font-size: 28px;
    }
}

@media (max-width: 1100px) {
    .vb-course-pathology-layout {
        grid-template-columns: 1fr;
    }

    .vb-course-pathology-hero-card {
        height: 480px;
    }

    .vb-course-pathology-grid {
        height: auto;
        grid-template-rows: none;
    }

    .vb-course-pathology-cell {
        min-height: 160px;
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .vb-course-section--pathology .vb-course-section-title {
        font-size: 34px;
    }

    .vb-course-pathology-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vb-course-pathology-hero-text {
        font-size: 20px;
        padding: 24px;
        max-width: 360px;
    }

    .vb-course-pathology-cell {
        border-radius: 24px;
        padding: 24px;
        font-size: 22px;
    }
}

/* Clinical cases */
.vb-course-section--clinical .vb-course-section-title {
    margin-bottom: 0;
    max-width: 980px;
    font-size: 52px;
    line-height: 1.3;
}

.vb-course-cases-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 52px;
}

@media (max-width: 1100px) {
    .vb-course-section--clinical .vb-course-section-title {
        font-size: 40px;
    }

    .vb-course-cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vb-course-section--clinical .vb-course-section-title {
        font-size: 34px;
    }
}

@media (max-width: 560px) {
    .vb-course-cases-grid {
        grid-template-columns: 1fr;
    }
}

.vb-course-case-card {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    background: var(--vb-white);
}

.vb-course-case-visual {
    position: relative;
    height: 300px;
    background: linear-gradient(135.36deg, #54bfd1 0%, #239cb1 80.895%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.vb-course-case-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("../images/main-page/catalog-card-texture.png") left top / 183.2px 245.2px repeat;
    opacity: 0.07;
}

.vb-course-case-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(21.25px 15px at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
}

.vb-course-case-visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.vb-course-case-visual--figma img {
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: 1;
    width: 300px;
    height: 371px;
    max-width: none;
    max-height: none;
    object-position: center bottom;
    object-fit: contain;
}

.vb-course-case-card--1 .vb-course-case-visual--figma img {
    width: 300px;
    height: 450px;
    top: -23px;
    bottom: auto;
}

.vb-course-case-card--2 .vb-course-case-visual--figma img {
    width: 278px;
    height: 425px;
    left: 50.5%;
    top: 0;
    bottom: auto;
}

.vb-course-case-card--3 .vb-course-case-visual--figma img {
    width: 262px;
    height: 393px;
    left: 50.8%;
    top: -5px;
    bottom: auto;
}

.vb-course-case-card--4 .vb-course-case-visual--figma img {
    width: 240px;
    height: 360px;
    left: 52%;
    top: 28px;
    bottom: auto;
}

.vb-course-case-placeholder {
    position: relative;
    z-index: 1;
    width: 70%;
    height: 80%;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.32);
    margin-bottom: 10px;
}

.vb-course-case-caption {
    margin: 0;
    padding: 10px 32px 52px;
    font-family: Onest, system-ui, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--vb-grey);
}

@media (max-width: 1480px) {
    .vb-course-case-caption {
        font-size: 28px;
    }
}

@media (max-width: 1100px) {
    .vb-course-case-caption {
        font-size: 24px;
        padding: 14px 24px 28px;
    }
}

@media (max-width: 560px) {
    .vb-course-case-caption {
        font-size: 22px;
        padding: 16px 20px 24px;
    }
}

/* Audiences */
.vb-course-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 27px;
}

@media (max-width: 1024px) {
    .vb-course-section--audience .vb-course-inner {
        padding-left: 32px;
        padding-right: 32px;
    }

    .vb-course-audience-grid {
        grid-template-columns: 1fr;
    }
}

.vb-course-audience-card {
    background: var(--vb-white);
    border-radius: 24px;
    padding: 32px 32px 24px;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Ряд карточек: общая высота строки заголовков (subgrid). Без поддержки — flex выше. */
@supports (grid-template-rows: subgrid) {
    .vb-course-audience-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 20px;
        column-gap: 0;
    }

    .vb-course-audience-title,
    .vb-course-audience-img,
    .vb-course-audience-img--placeholder,
    .vb-course-audience-list {
        align-self: start;
        width: 100%;
    }
}

.vb-course-audience-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--vb-grey);
}

.vb-course-audience-img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 0;
}

.vb-course-audience-img--figma {
    object-fit: contain;
    object-position: center bottom;
}

.vb-course-audience-img--uploaded {
    object-fit: cover;
    object-position: center;
}

.vb-course-audience-img--placeholder {
    min-height: 330px;
    background: #f2f2f2;
}

.vb-course-audience-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vb-course-audience-list li {
    position: relative;
    padding-left: 36px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--vb-grey);
}

.vb-course-audience-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 24px;
    height: 24px;
    background: url("../images/main-page/audience-check-figma.svg") center / contain no-repeat;
}

.vb-course-audience-section-title {
    margin-bottom: 0;
    font-size: 52px;
    line-height: 1.3;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    color: #232929;
    text-shadow: none;
    opacity: 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vb-course-audience-section-subtitle {
    margin-bottom: 0;
    max-width: 555px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: #859494;
    text-shadow: none;
    opacity: 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1480px) {
    .vb-course-audience-section-title {
        font-size: 44px;
    }

    .vb-course-audience-section-subtitle {
        font-size: 20px;
    }

    .vb-course-audience-title {
        font-size: 28px;
    }

    .vb-course-audience-list li {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .vb-course-section--audience {
        margin-top: 56px;
        margin-bottom: 56px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .vb-course-audience-card {
        padding: 24px;
    }

    .vb-course-audience-section-title {
        font-size: 34px;
    }

    .vb-course-audience-section-subtitle {
        font-size: 18px;
    }

    .vb-course-audience-title {
        font-size: 26px;
    }

    .vb-course-audience-img {
        height: 280px;
    }

    .vb-course-audience-img--placeholder {
        min-height: 280px;
    }

    .vb-course-audience-list li {
        font-size: 18px;
    }
}

/* Value pillars + salary (Figma «Price» 1119:1836) */
.vb-course-section--price .vb-course-price {
    display: flex;
    flex-direction: column;
    gap: 42px;
    font-family: Onest, system-ui, sans-serif;
}

.vb-course-section--price .vb-course-price-heading {
    margin: 0;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #232929;
}

.vb-course-section--price .vb-course-price-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vb-course-section--price .vb-course-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
}

@media (max-width: 900px) {
    .vb-course-section--price .vb-course-pillars {
        grid-template-columns: 1fr;
    }
}

.vb-course-section--price .vb-course-pillar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px;
    border-radius: 32px;
    background: #fff;
    border: none;
    box-sizing: border-box;
}

.vb-course-section--price .vb-course-pillar-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #232929;
}

.vb-course-section--price .vb-course-pillar-body {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #859494;
}

.vb-course-section--price .vb-course-salary {
    margin: 0;
    padding: 42px 32px;
    border-radius: 32px;
    background: #232929;
    border: none;
    box-sizing: border-box;
}

.vb-course-section--price .vb-course-salary-title {
    margin: 0 0 32px;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.vb-course-section--price .vb-course-salary-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vb-course-section--price .vb-course-salary-row {
    margin: 0;
}

.vb-course-section--price .vb-course-salary-track {
    min-height: 99px;
    border-radius: 20px;
    background: #272e2e;
    overflow: hidden;
}

.vb-course-section--price .vb-course-salary-fill {
    box-sizing: border-box;
    min-height: 99px;
    width: var(--vb-bar, 0%);
    max-width: 100%;
    border-radius: 20px;
    background: #239cb1;
}

.vb-course-section--price .vb-course-salary-fill-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    min-height: 99px;
    padding: 16px 24px;
    box-sizing: border-box;
}

.vb-course-section--price .vb-course-salary-amount-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
}

.vb-course-section--price .vb-course-salary-tilde {
    flex-shrink: 0;
}

.vb-course-section--price .vb-course-salary-amount {
    flex-shrink: 0;
}

.vb-course-section--price .vb-course-salary-tenure {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    color: #91cdd8;
    white-space: nowrap;
}

.vb-course-section--price .vb-course-salary-source {
    margin: 32px 0 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #859494;
}

/* Teachers */
.vb-course-section--teachers {
    margin-top: 40px;
}

.vb-course-teachers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

@media (max-width: 1100px) {
    .vb-course-teachers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vb-course-teacher-card {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    color: #232929;
    font-family: Onest, system-ui, sans-serif;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vb-course-teacher-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(31, 41, 51, 0.1);
}

.vb-course-teacher-hero {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    flex-shrink: 0;
}

.vb-course-teacher-hero-layers {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135.36deg, #54bfd1 0%, #239cb1 80.895%);
}

.vb-course-teacher-hero-layers::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: url('../images/main-page/teachers-card-texture.png');
    background-size: 183.2px 245.2px;
    background-position: top left;
    background-repeat: repeat;
}

.vb-course-teacher-hero-layers::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 425 300' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='0.699999988079071'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(1.3012e-15 15 -21.25 9.1849e-16 212.5 150)'><stop stop-color='rgba(255,255,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.vb-course-teacher-hero--white .vb-course-teacher-hero-layers {
    background: #fff;
}

.vb-course-teacher-hero--white .vb-course-teacher-hero-layers::before,
.vb-course-teacher-hero--white .vb-course-teacher-hero-layers::after {
    opacity: 0;
}

.vb-course-teacher-hero-photo {
    position: absolute;
    left: 3.35%;
    top: -11.33%;
    z-index: 1;
    width: 93.29%;
    height: 132.17%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    pointer-events: none;
}

.vb-course-teacher-hero-photo--empty {
    background-color: #dfecee;
    background-image: none !important;
}

/* Узкая карточка в сетке 4× (широкий viewport): меньше «зума» на лицо — видно плечи/верх тела */
@media (min-width: 1101px) {
    .vb-course-teacher-hero-photo {
        top: -4%;
        height: 122%;
        background-position: center 22%;
    }
}

.vb-course-teacher-card-body {
    padding: 24px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.vb-course-teacher-name {
    margin: 0;
    padding: 0;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.5;
    color: #232929;
}

.vb-course-teacher-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vb-course-teacher-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px 16px;
    border-radius: 24px;
    border: 2px solid #239cb1;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: #239cb1;
    background: transparent;
}

.vb-course-teacher-bio {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: #859494;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Program */
.vb-course-section--program {
    background: var(--vb-bg-soft);
    border-radius: 32px;
}

@media (max-width: 1200px) {
    .vb-course-section--program {
        margin-left: 32px;
        margin-right: 32px;
    }
}

.vb-course-program-stats {
    list-style: none;
    margin: 24px auto 40px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    max-width: 1100px;
}

.vb-course-program-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--vb-white);
    border: 1px solid var(--vb-line);
    font-size: 16px;
    font-weight: 500;
    color: var(--vb-grey);
}

.vb-course-program-highlight {
    margin-bottom: 32px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--vb-white);
    border: 1px solid rgba(184, 204, 204, 0.5);
}

.vb-course-program-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(35, 156, 177, 0.12);
    color: var(--vb-cayman);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.vb-course-program-lecture-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--vb-grey);
}

.vb-course-program-lecturer {
    margin: 0;
    font-size: 16px;
    color: #5a6565;
}

.vb-course-program-section {
    margin-bottom: 36px;
}

.vb-course-program-section-title {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(35, 41, 41, 0.06);
    font-size: 15px;
    font-weight: 600;
    color: var(--vb-grey);
}

.vb-course-program-item {
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 14px;
    background: var(--vb-white);
    border: 1px solid rgba(184, 204, 204, 0.45);
}

.vb-course-program-item-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    color: var(--vb-grey);
}

.vb-course-program-item-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: #4a5555;
}

/* Program — accordion / grid */
.vb-course-section--program-accordion,
.vb-course-section--program-grid {
    --vb-prog-accent: var(--vb-cayman);
    --vb-prog-accent-soft: rgba(35, 156, 177, 0.14);
}

/* Figma 3106:2734 — «Программа курса» (аккордеон-модули) */
.vb-course-section--program-accordion {
    --vb-prog-accent: #239cb1;
    --vb-prog-accent-soft: rgba(35, 156, 177, 0.14);
}


.vb-course-section--program-accordion .vb-course-program-title {
    font-size: 52px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
}

.vb-course-section--program-accordion .vb-course-program-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.vb-course-section--program-accordion .vb-course-program-head {
    margin-bottom: 42px;
}

.vb-course-section--program-accordion .vb-course-program-acc {
    gap: 42px;
    margin-top: 0;
}

.vb-course-section--program-accordion .vb-course-acc-module {
    border-radius: 12px;
    border: none;
    border-left: 6px solid var(--vb-cayman);
    box-shadow: none;
    background: var(--vb-white);
    overflow: visible;
}

.vb-course-section--program-accordion article.vb-course-acc-module {
    overflow: visible;
}

.vb-course-section--program-accordion .vb-course-acc-module__accent {
    display: none;
}

/* Figma 3106: плоская карточка — номер | колонка (заголовок + темы), без details и без полосы-разделителя */
.vb-course-section--program-accordion .vb-course-acc-module__shell {
    display: flex;
    align-items: flex-start;
    gap: 42px;
    box-sizing: border-box;
    padding: 32px 42px;
}

.vb-course-section--program-accordion .vb-course-acc-module__column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 3106:2737 — крупный номер: 142px / 200px */
.vb-course-section--program-accordion .vb-course-acc-module__num {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 200px;
    max-width: 100%;
    align-self: flex-start;
    display: block;
    font-size: 142px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    font-kerning: normal;
    color: rgba(35, 156, 177, 0.1);
    text-align: center;
}

.vb-course-section--program-accordion .vb-course-program-cert-text {
    color: var(--vb-prog-accent);
}

.vb-course-section--program-accordion .vb-course-acc-module__core {
    gap: 12px;
}

/* Мета модуля — только для скринридеров (в макете Figma строки «N тем» нет) */
.vb-course-section--program-accordion .vb-course-acc-module__meta.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 3106:2739 — заголовок модуля 32 ExtraBold */
.vb-course-section--program-accordion .vb-course-acc-module__title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--vb-grey);
}

.vb-course-section--program-accordion .vb-course-acc-module__body {
    overflow: visible;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    transition: none;
}

/* Figma 3106:2740 — list-disc, текст #859494, отступ пункта ms 36px */
.vb-course-section--program-accordion .vb-course-acc-module__list {
    margin: 0;
    padding: 0 0 0 42px;
    list-style: disc;
    list-style-position: outside;
}

.vb-course-section--program-accordion .vb-course-acc-module__list li:not(.vb-course-acc-module__more) {
    position: relative;
    padding-left: 0;
    margin-bottom: 0;
    margin-left: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--vb-secondary-grey);
}

.vb-course-section--program-accordion .vb-course-acc-module__list li:last-child {
    margin-bottom: 0;
}

.vb-course-section--program-accordion .vb-course-acc-module__list li:not(.vb-course-acc-module__more)::marker {
    color: var(--vb-secondary-grey);
}

/* Отключаем общий маркер из .vb-course-acc-module__list li::before — используем list-disc */
.vb-course-section--program-accordion .vb-course-acc-module__list li:not(.vb-course-acc-module__more)::before {
    content: none;
    display: none;
}

/* «Показать все темы (N)» / «Скрыть» — как в Figma 3106 */
.vb-course-section--program-accordion .vb-course-acc-module__more {
    list-style: none;
    margin-top: 0.35em;
    margin-bottom: 0;
    padding-left: 0;
}

.vb-course-section--program-accordion .vb-course-acc-module__more::before {
    content: none;
}

.vb-course-section--program-accordion .vb-course-acc-module__topics-more-btn {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: Onest, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--vb-cayman);
    text-align: left;
}

.vb-course-section--program-accordion .vb-course-acc-module__topics-more-btn:focus-visible {
    outline: 2px solid var(--vb-cayman);
    outline-offset: 3px;
}

.vb-course-section--program-accordion .vb-course-acc-module__topics-more-count {
    font-weight: 500;
}

.vb-course-section--program-accordion .vb-course-acc-module__list.is-topics-expanded .vb-course-acc-module__topics-more-count {
    display: none;
}

.vb-course-section--program-accordion .vb-course-acc-module__topics-more-chevron {
    display: flex;
    flex-shrink: 0;
}

.vb-course-section--program-accordion .vb-course-acc-module__topics-more-chevron svg {
    display: block;
    transition: transform 0.2s ease;
}

.vb-course-section--program-accordion .vb-course-acc-module__list.is-topics-expanded .vb-course-acc-module__topics-more-chevron svg {
    transform: rotate(180deg);
}

@media (max-width: 900px) and (min-width: 641px) {
    .vb-course-section--program-accordion .vb-course-acc-module__shell {
        gap: 24px;
        padding: 24px 28px;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__num {
        width: 140px;
        font-size: 88px;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__title {
        font-size: 26px;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__list li:not(.vb-course-acc-module__more) {
        font-size: 18px;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__topics-more-btn {
        font-size: 18px;
    }
}


.vb-course-section--program.vb-course-section--program-grid {
    background: var(--vb-bg-soft);
    border: none;
}

/* Figma 3105:2605 — шапка секции (сетка) */
.vb-course-section--program-grid .vb-course-program-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 42px;
    gap: 24px;
}

.vb-course-section--program-grid .vb-course-program-head-main {
    flex: 0 1 auto;
    max-width: 100%;
}

.vb-course-section--program-grid .vb-course-program-title {
    margin: 0;
    font-size: 52px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    color: var(--vb-grey);
}

.vb-course-section--program-grid .vb-course-program-subtitle {
    margin: 0 auto;
    max-width: 56em;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--vb-secondary-grey);
    text-align: center;
}

.vb-course-section--program-grid .vb-course-program-cert {
    align-self: center;
    max-width: 640px;
    text-align: left;
}

.vb-course-program-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px 32px;
    margin-bottom: 32px;
}

.vb-course-program-head-main {
    flex: 1 1 360px;
    min-width: 0;
}

.vb-course-program-title {
    margin: 0 0 12px;
    font-family: Onest, system-ui, sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--vb-grey);
    text-align: left;
}

.vb-course-program-subtitle {
    margin: 0;
    max-width: 640px;
    font-size: 17px;
    line-height: 1.45;
    color: #5a6565;
}

.vb-course-program-cert {
    flex: 0 1 340px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--vb-white);
    box-shadow: 0 8px 28px rgba(35, 41, 41, 0.06);
    border: 1px solid rgba(184, 204, 204, 0.45);
}

.vb-course-section--program-grid .vb-course-program-cert-icon {
    color: var(--vb-prog-accent);
}

.vb-course-section--program-accordion .vb-course-program-cert-icon {
    color: var(--vb-prog-accent);
}

.vb-course-program-cert-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--vb-grey);
}

.vb-course-program-acc {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.vb-course-acc-module {
    border-radius: 16px;
    background: var(--vb-white);
    box-shadow: 0 6px 24px rgba(35, 41, 41, 0.06);
    border: 1px solid rgba(184, 204, 204, 0.4);
    overflow: hidden;
}

.vb-course-acc-module > summary {
    list-style: none;
    display: grid;
    grid-template-columns: 4px 72px 1fr 48px;
    align-items: center;
    gap: 0 16px;
    padding: 24px 20px 24px 0;
    cursor: pointer;
    position: relative;
}

.vb-course-acc-module > summary::-webkit-details-marker {
    display: none;
}

.vb-course-acc-module__accent {
    display: block;
    width: 4px;
    height: 100%;
    min-height: 72px;
    background: var(--vb-prog-accent);
    border-radius: 0 4px 4px 0;
}

.vb-course-acc-module__num {
    font-family: Onest, system-ui, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: rgba(37, 112, 235, 0.18);
    text-align: center;
}

.vb-course-section--program-grid .vb-course-acc-module__num {
    color: rgba(35, 156, 177, 0.2);
}

.vb-course-acc-module__core {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.vb-course-acc-module__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--vb-grey);
    line-height: 1.25;
}

.vb-course-acc-module__meta {
    font-size: 15px;
    color: #5a6565;
}

.vb-course-acc-module__topics-count {
    color: var(--vb-prog-accent);
    font-weight: 600;
}

.vb-course-acc-module__dot {
    margin: 0 6px;
    color: #9aa9a9;
}

.vb-course-acc-module__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vb-prog-accent-soft);
    color: var(--vb-prog-accent);
}

.vb-course-acc-module[open] .vb-course-acc-module__toggle svg {
    transform: rotate(180deg);
}

.vb-course-acc-module__toggle svg {
    transition: transform 0.2s ease;
}

.vb-course-acc-module__body {
    padding: 0 24px 24px 108px;
    border-top: 1px solid rgba(184, 204, 204, 0.35);
}

.vb-course-acc-module__list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.vb-course-acc-module__list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--vb-grey);
}

.vb-course-acc-module__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vb-prog-accent);
}

.vb-course-acc-module__li-title {
    display: block;
    font-weight: 600;
}

.vb-course-acc-module__li-desc {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: #5a6565;
}

.vb-course-program-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.vb-course-section--program-grid .vb-course-program-tabs {
    margin-top: 12px;
    gap: 10px 14px;
}

.vb-course-section--program-grid .vb-course-program-tab {
    padding: 12px 22px;
    font-size: 15px;
    border-color: #d5e0e0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.vb-course-section--program-grid .vb-course-program-tab.is-active {
    box-shadow: none;
}

.vb-course-program-tab {
    appearance: none;
    border: 1px solid var(--vb-line);
    background: var(--vb-white);
    color: #5a6565;
    font-family: Onest, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vb-course-program-tab.is-active {
    background: var(--vb-prog-accent);
    border-color: var(--vb-prog-accent);
    color: var(--vb-white);
}

.vb-course-program-panels {
    margin-top: 8px;
}

.vb-course-program-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 0;
}

@media (max-width: 1200px) {
    .vb-course-program-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .vb-course-program-grid {
        grid-template-columns: 1fr;
    }

    .vb-course-acc-module > summary {
        grid-template-columns: 4px 56px 1fr 40px;
    }

    .vb-course-acc-module__num {
        font-size: 36px;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__shell {
        flex-direction: column;
        align-items: stretch;
        gap: 12px 16px;
        padding: 24px 24px 24px 20px;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__num {
        width: auto;
        max-width: none;
        align-self: flex-start;
        font-size: 72px;
        line-height: 1.1;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__body {
        padding-left: 0;
        padding-right: 0;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__title {
        font-size: 22px;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__list li:not(.vb-course-acc-module__more) {
        font-size: 17px;
    }

    .vb-course-section--program-accordion .vb-course-acc-module__topics-more-btn {
        font-size: 17px;
    }

    .vb-course-section--program-accordion .vb-course-program-title {
        font-size: 32px;
    }

    .vb-course-section--program-grid .vb-course-program-title {
        font-size: 32px;
    }

    .vb-course-section--program-grid .vb-course-program-subtitle {
        font-size: 17px;
    }

    .vb-course-section--program-grid .vb-course-program-card__title {
        font-size: 22px;
    }

    .vb-course-section--program-grid .vb-course-program-card__bg-num {
        font-size: 72px;
    }

    .vb-course-section--program-grid .vb-course-program-card__lecturers-row,
    .vb-course-section--program-grid .vb-course-program-card__lecturers-names {
        font-size: 17px;
    }
}

.vb-course-program-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--vb-white);
    border-radius: 16px;
    border: 1px solid rgba(184, 204, 204, 0.45);
    box-shadow: 0 6px 20px rgba(35, 41, 41, 0.05);
    padding: 22px 20px 20px;
    min-height: 204px;
    overflow: hidden;
}

/* Figma 3105:2605 — карточка модуля (только сетка программы) */
.vb-course-section--program-grid .vb-course-program-card {
    gap: 24px;
    padding: 20px;
    border-radius: 12px;
    border: none;
    box-shadow: none;
    min-height: 0;
    justify-content: center;
}

.vb-course-program-card__bg-num {
    position: absolute;
    left: 12px;
    top: 8px;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: rgba(35, 41, 41, 0.06);
    pointer-events: none;
    font-family: Onest, system-ui, sans-serif;
}

.vb-course-section--program-grid .vb-course-program-card__bg-num {
    position: relative;
    left: auto;
    top: auto;
    align-self: flex-start;
    margin: 0;
    padding: 0;
    font-size: 100px;
    line-height: 0.85;
    font-weight: 700;
    color: rgba(35, 156, 177, 0.1);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.vb-course-program-card__tag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vb-prog-accent);
    background: var(--vb-prog-accent-soft);
}

.vb-course-section--program-grid .vb-course-program-card__tag {
    top: 20px;
    right: 20px;
}

.vb-course-program-card__title {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    margin: 36px 0 0;
    padding-right: 120px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vb-grey);
}

.vb-course-section--program-grid .vb-course-program-card__title {
    flex: 0 1 auto;
    margin: 0;
    padding-right: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--vb-grey);
}

.vb-course-section--program-grid .vb-course-program-card:has(.vb-course-program-card__tag) .vb-course-program-card__title {
    padding-right: 120px;
}

.vb-course-section--program-grid .vb-course-program-card__core {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
}

.vb-course-program-card__foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
}

.vb-course-section--program-grid .vb-course-program-card__foot {
    display: block;
    margin-top: 0;
    padding-top: 0;
}

.vb-course-section--program-grid .vb-course-program-card__lecturer-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vb-course-section--program-grid .vb-course-program-card__lecturers-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--vb-secondary-grey);
}

.vb-course-section--program-grid .vb-course-program-card__lecturers-names {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--vb-secondary-grey);
}

/* Каждое ФИО — одна строка при переносе; запятая после лектора, без пробела (не отрывается от ФИО) */
.vb-course-section--program-grid .vb-course-program-card__lecturer-person {
    display: inline;
    white-space: nowrap;
}

.vb-course-section--program-grid .vb-course-program-card__lecturer-person:not(:last-child)::after {
    content: ',';
}

.vb-course-program-card__lect-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: var(--vb-prog-accent);
}

.vb-course-section--program-grid .vb-course-program-card__lect-icon {
    margin-top: 0;
}

.vb-course-section--program-grid .vb-course-program-card__lect-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.vb-course-program-card__lecturers {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #5a6565;
}

.vb-course-program-card__lecturers-label {
    color: var(--vb-prog-accent);
    font-weight: 600;
    margin-right: 4px;
}

.vb-course-section--program-grid .vb-course-program-card__lecturers-label {
    color: var(--vb-secondary-grey);
    font-weight: 500;
    margin-right: 0;
}

.vb-course-program-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 28px;
    margin-top: 40px;
    padding: 24px 28px;
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(35, 156, 177, 0.95) 0%, #239cb1 100%);
    color: var(--vb-white);
}

/* Figma 3106:2801 — фон карточки: только как в макете (градиент + текстура + SVG radial), без filter и без «своих» теней */
.vb-course-section--program .vb-course-program-footer {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    grid-template-areas:
        'diploma copy'
        'diploma cta';
    align-items: center;
    column-gap: 0;
    row-gap: 20px;
    margin-top: 42px;
    padding: 32px;
    border-radius: 32px;
    border: none;
    color: var(--vb-white);
    background: linear-gradient(163.864deg, #54bfd1 0%, #239cb1 80.895%);
    box-shadow: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.vb-course-section--program .vb-course-program-footer:not(:has(.vb-course-program-footer__btn)) {
    grid-template-areas: 'diploma copy';
}

.vb-course-section--program .vb-course-program-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: url('../images/main-page/hero-figma-texture.png') left top / 183px 245px repeat;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}

/*
 * Третий слой из Figma (node 3106:2801): rect + radialGradient, opacity 0.9, viewBox 1760×364, preserveAspectRatio none.
 * Идентификатор градиента уникален, чтобы не конфликтовать с другими data-URI на странице.
 */
.vb-course-section--program .vb-course-program-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201760%20364%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22vbProgQualGlow3106%22%20gradientUnits%3D%22userSpaceOnUse%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2210%22%20gradientTransform%3D%22matrix%28-10.481%2029.4%20-35.416%20-11.724%20382.92%20187.5%29%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22rgb%28255%2C255%2C255%29%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22rgb%28255%2C255%2C255%29%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23vbProgQualGlow3106%29%22%20opacity%3D%220.9%22/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.vb-course-section--program .vb-course-program-footer > * {
    position: relative;
    z-index: 1;
}

.vb-course-section--program .vb-course-program-footer__icon {
    grid-area: diploma;
    justify-self: center;
    align-self: center;
    width: 100%;
    max-width: none;
    height: 300px;
    min-height: 300px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: transparent;
}

/* Figma 3106:2803 — aspect 1120:870, crop как в макете */
.vb-course-section--program .vb-course-program-footer__diploma {
    position: relative;
    height: 100%;
    max-height: 300px;
    aspect-ratio: 1120 / 870;
    flex-shrink: 0;
    overflow: hidden;
}

.vb-course-section--program .vb-course-program-footer__diploma img {
    position: absolute;
    width: 137.14%;
    height: 117.7%;
    left: -18.66%;
    top: -9.43%;
    max-width: none;
}

.vb-course-section--program .vb-course-program-footer__icon svg {
    display: none;
}

.vb-course-section--program .vb-course-program-footer__text {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 300px;
    justify-content: center;
    align-self: stretch;
}

.vb-course-section--program .vb-course-program-footer__heading {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vb-white);
}

.vb-course-section--program .vb-course-program-footer__body {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    white-space: pre-wrap;
}

.vb-course-section--program .vb-course-program-footer__btn.vb-course-btn {
    grid-area: cta;
    align-self: start;
    justify-self: start;
    margin-left: 0;
}

@media (max-width: 900px) {
    .vb-course-section--program-grid .vb-course-program-title {
        font-size: clamp(28px, 5.5vw, 44px);
    }

    .vb-course-section--program-grid .vb-course-program-subtitle {
        font-size: clamp(17px, 2.2vw, 22px);
    }

    .vb-course-section--program-grid .vb-course-program-card__title {
        font-size: clamp(20px, 2.8vw, 28px);
    }

    .vb-course-section--program-grid .vb-course-program-card__bg-num {
        font-size: clamp(64px, 14vw, 100px);
    }

    .vb-course-section--program-grid .vb-course-program-card__lecturers-row,
    .vb-course-section--program-grid .vb-course-program-card__lecturers-names {
        font-size: clamp(16px, 2.2vw, 22px);
    }

    .vb-course-section--program .vb-course-program-footer {
        grid-template-columns: 1fr;
        grid-template-areas:
            'diploma'
            'copy'
            'cta';
    }

    .vb-course-section--program .vb-course-program-footer__icon {
        height: auto;
        min-height: 180px;
        max-width: 320px;
    }

    .vb-course-section--program .vb-course-program-footer__diploma {
        max-height: 220px;
    }

    .vb-course-section--program .vb-course-program-footer__text {
        min-height: 0;
    }

    .vb-course-section--program .vb-course-program-footer__heading {
        font-size: clamp(26px, 5vw, 42px);
    }

    .vb-course-section--program .vb-course-program-footer__body {
        font-size: 18px;
    }
}

.vb-course-program-footer__icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.95);
}

.vb-course-program-footer__text {
    flex: 1 1 280px;
    min-width: 0;
}

.vb-course-program-footer__heading {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--vb-white);
}

.vb-course-program-footer__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

.vb-course-program-footer__btn.vb-course-btn {
    flex-shrink: 0;
    margin-left: auto;
    background: var(--vb-coral);
    border-color: var(--vb-coral);
    color: var(--vb-white);
}

.vb-course-program-footer__btn.vb-course-btn:hover {
    filter: brightness(1.05);
}

/* Advantages — Figma 1101:3155 (как home-advantages: gap 52 title↔grid, ряд 2: 1fr + 571.667px + 574.167px @1200+) */
.vb-course-section--advantages .vb-course-inner {
    max-width: min(1760px, 100%);
}

.vb-course-section--advantages .vb-course-section-title--advantages {
    margin: 0;
    max-width: 100%;
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #232929;
}

.vb-course-advantages-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin-top: 52px;
}

.vb-course-advantages-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .vb-course-advantages-row--figma-second {
        grid-template-columns: minmax(0, 1fr) minmax(0, 571.667px) minmax(0, 574.167px);
    }
}

@media (max-width: 1100px) {
    .vb-course-advantages-row,
    .vb-course-advantages-row--figma-second {
        grid-template-columns: 1fr;
    }
}

.vb-course-advantage-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 32px;
    background: #fff;
    color: #232929;
    min-height: 0;
}

.vb-course-advantage-visual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #fff;
}

@media (max-width: 899px) {
    .vb-course-advantage-visual {
        height: clamp(220px, 52vw, 500px);
    }
}

.vb-course-advantage-visual--duplex {
    background: #f5f8f8;
}

.vb-course-advantage-stack {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #f5f8f8;
}

.vb-course-advantage-stack--white {
    background: #fff;
}

.vb-course-advantage-stack--soft {
    background: #f5f8f8;
}

.vb-course-advantage-stack--duplex .vb-course-advantage-photo--1a {
    z-index: 0;
}

.vb-course-advantage-stack--duplex .vb-course-advantage-photo--1b,
.vb-course-advantage-stack--duplex .vb-course-advantage-photo--4b {
    z-index: 1;
}

/* База только для кадров внутри stack: без width/height — иначе (0,2,0) перебивает модификаторы (0,1,0) и ломает позиционирование Figma */
.vb-course-advantage-stack .vb-course-advantage-photo {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    object-fit: cover;
}

/* Дефолтные кадры как на главной (Figma) — двойная специфичность, чтобы размеры не затирались */
.vb-course-advantage-stack .vb-course-advantage-photo.vb-course-advantage-photo--1a {
    width: 162.25%;
    height: 104.18%;
    left: -31.13%;
    top: -2.06%;
}

.vb-course-advantage-stack .vb-course-advantage-photo.vb-course-advantage-photo--1b {
    width: 141.63%;
    height: 110.87%;
    left: -11.07%;
    top: -8.19%;
}

.vb-course-advantage-stack .vb-course-advantage-photo.vb-course-advantage-photo--2 {
    width: 92.8%;
    height: 159.53%;
    left: 3.6%;
    top: -17.53%;
}

.vb-course-advantage-stack .vb-course-advantage-photo.vb-course-advantage-photo--3 {
    width: 143.52%;
    height: 109.6%;
    left: -0.04%;
    top: -1.22%;
}

.vb-course-advantage-stack .vb-course-advantage-photo.vb-course-advantage-photo--4b {
    width: 130.97%;
    height: 100%;
    left: -15.48%;
    top: 0;
}

.vb-course-advantage-stack .vb-course-advantage-photo.vb-course-advantage-photo--5 {
    width: 144.85%;
    height: 110.41%;
    left: -26.36%;
    top: -2%;
}

.vb-course-advantage-photo--upload {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
}

.vb-course-advantage-placeholderfill {
    position: absolute;
    inset: 0;
    background: #f5f8f8;
}

.vb-course-advantage-fade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 58%,
        rgba(255, 255, 255, 0.1) 66.132%,
        #fff 96.41%,
        #fff 100%
    );
}

.vb-course-advantage-foot-blur {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 117px;
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.05);
}

.vb-course-advantage-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 32px 52px;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
}

.vb-course-advantage-title {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #232929;
}

.vb-course-advantage-body {
    margin: 0;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    line-height: 1.4;
    color: #859494;
}

/* Accent card — Figma 1101:3195 */
.vb-course-advantage-card--accent {
    display: flex;
    flex-direction: column;
    background: transparent;
    color: #fff;
    isolation: isolate;
}

@media (min-width: 1200px) {
    .vb-course-advantage-card--accent {
        min-height: 727px;
    }
}

.vb-course-advantage-accent-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
}

.vb-course-advantage-accent-gradient {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(119.45deg, #54bfd1 0%, #239cb1 80.895%);
}

.vb-course-advantage-accent-texture {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.07;
    background-color: transparent;
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 183.2px 245.2px;
}

.vb-course-advantage-accent-radial {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 574.17 727' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23advCourseRad)' opacity='1'/><defs><radialGradient id='advCourseRad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(38.918 -4.3 3.4612 31.217 286.67 239)'><stop stop-color='rgba(255,255,255,1)' offset='0'/><stop stop-color='rgba(255,255,255,0)' offset='1'/></radialGradient></defs></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.vb-course-advantage-visual--accent {
    z-index: 1;
    flex: 0 0 auto;
    height: 500px;
    background: transparent;
}

@media (max-width: 899px) {
    .vb-course-advantage-visual--accent {
        height: clamp(220px, 52vw, 500px);
    }
}

.vb-course-advantage-accent-mask {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: url('../images/main-page/advantage-6-fade-mask.svg');
    mask-image: url('../images/main-page/advantage-6-fade-mask.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.vb-course-advantage-accent-photo {
    position: absolute;
    display: block;
    width: 119.1%;
    height: 102.4%;
    left: -11.35%;
    top: -2.4%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
}

.vb-course-advantage-accent-foot-blur {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 85px;
    pointer-events: none;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    background: rgba(255, 255, 255, 0.01);
}

.vb-course-advantage-text--accent {
    z-index: 2;
    flex: 1 1 auto;
    background: transparent;
}

.vb-course-advantage-card--accent .vb-course-advantage-title,
.vb-course-advantage-card--accent .vb-course-advantage-body {
    color: #fff;
}

/* Outcomes — Figma 1101:3203 */
.vb-course-section--outcomes {
    margin-top: 8px;
}

/* 1760px контент + 40px поля с каждой стороны (как в макете) */
.vb-course-section--outcomes .vb-course-inner--outcomes {
    box-sizing: border-box;
    width: 100%;
    max-width: 1840px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}

.vb-course-outcomes-panel {
    position: relative;
    background: #eaf6f8;
    border-radius: 48px;
    /* Вертикальные поля: заголовок не прилипает к верху, сетка — к низу */
    padding: 48px 0 56px;
    overflow: visible;
    box-sizing: border-box;
}

.vb-course-outcomes-panel__decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.vb-course-outcomes-panel__decor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vb-course-outcomes-panel__decor--a {
    width: 260px;
    height: 260px;
    right: 0;
    top: 0;
    transform: translate(18%, -12%);
}

.vb-course-outcomes-panel__decor--b {
    width: 340px;
    height: 340px;
    right: 0;
    top: 260px;
    transform: translate(22%, 0);
}

.vb-course-outcomes-title {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 0 24px;
    max-width: 1760px;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-align: center;
    color: #232929;
}

.vb-course-outcomes-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1760px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 44px;
}

.vb-course-outcomes-grid > .vb-course-outcome-card:nth-child(2) {
    margin-top: 36px;
}

.vb-course-outcomes-grid > .vb-course-outcome-card:nth-child(4) {
    margin-top: -28px;
}

.vb-course-outcome-card {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border-radius: 36px;
    padding: 131px 31px 32px;
    border-width: 1px;
    border-style: solid;
    isolation: isolate;
}

.vb-course-outcome-card__bar {
    position: absolute;
    left: -1px;
    top: 23px;
    width: 6px;
    border-radius: 999px;
    z-index: 2;
}

.vb-course-outcome-card__decor {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.vb-course-outcome-card__decor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top right;
}

.vb-course-outcome-card__tint {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}

.vb-course-outcome-card__tint img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

.vb-course-outcome-num {
    position: absolute;
    top: 27px;
    left: 31px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.vb-course-outcome-title {
    position: relative;
    z-index: 2;
    margin: 0 0 16px;
    max-width: 796px;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.32;
    letter-spacing: -0.02em;
}

.vb-course-outcome-body {
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: 796px;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 23px;
    line-height: 1.42;
}

/* Skin: teal panel + coral accents (card 1) */
.vb-course-outcome-card--skin-coral_teal {
    background: #2d9fb5;
    border-color: rgba(255, 255, 255, 0.16);
    min-height: 414px;
}

.vb-course-outcome-card--skin-coral_teal .vb-course-outcome-card__bar {
    height: 366px;
    background: #f8485e;
}

.vb-course-outcome-card--skin-coral_teal .vb-course-outcome-card__decor {
    width: 280px;
    height: 280px;
    transform: translate(12%, -11%);
}

.vb-course-outcome-card--skin-coral_teal .vb-course-outcome-num {
    background: #f8485e;
    color: #fff;
}

.vb-course-outcome-card--skin-coral_teal .vb-course-outcome-title,
.vb-course-outcome-card--skin-coral_teal .vb-course-outcome-body {
    color: #fff;
}

.vb-course-outcome-card--skin-coral_teal .vb-course-outcome-body {
    color: rgba(255, 255, 255, 0.84);
}

/* Skin: white + teal (card 2) */
.vb-course-outcome-card--skin-teal_light {
    background: #fff;
    border-color: rgba(35, 156, 177, 0.08);
    min-height: 378px;
}

.vb-course-outcome-card--skin-teal_light .vb-course-outcome-card__bar {
    height: 330px;
    background: #239cb1;
}

.vb-course-outcome-card--skin-teal_light .vb-course-outcome-card__decor {
    width: 220px;
    height: 220px;
    transform: translate(8%, -11%);
}

.vb-course-outcome-card--skin-teal_light .vb-course-outcome-card__tint {
    width: 260px;
    height: 260px;
    transform: translate(12%, 18%);
}

.vb-course-outcome-card--skin-teal_light .vb-course-outcome-num {
    background: #239cb1;
    color: #fff;
}

.vb-course-outcome-card--skin-teal_light .vb-course-outcome-title {
    color: #232929;
}

.vb-course-outcome-card--skin-teal_light .vb-course-outcome-body {
    color: rgba(35, 41, 41, 0.84);
}

/* Skin: white + coral (card 3) */
.vb-course-outcome-card--skin-coral_light {
    background: #fff;
    border-color: rgba(35, 156, 177, 0.08);
    min-height: 378px;
}

.vb-course-outcome-card--skin-coral_light .vb-course-outcome-card__bar {
    height: 330px;
    background: #f8485e;
}

.vb-course-outcome-card--skin-coral_light .vb-course-outcome-card__decor {
    width: 220px;
    height: 220px;
    transform: translate(8%, -11%);
}

.vb-course-outcome-card--skin-coral_light .vb-course-outcome-card__tint {
    width: 260px;
    height: 260px;
    transform: translate(12%, 18%);
}

.vb-course-outcome-card--skin-coral_light .vb-course-outcome-num {
    background: #f8485e;
    color: #fff;
}

.vb-course-outcome-card--skin-coral_light .vb-course-outcome-title {
    color: #232929;
}

.vb-course-outcome-card--skin-coral_light .vb-course-outcome-body {
    color: rgba(35, 41, 41, 0.84);
}

/* Skin: dark + mint (card 4) */
.vb-course-outcome-card--skin-mint_navy {
    background: #284b57;
    border-color: rgba(255, 255, 255, 0.16);
    min-height: 442px;
}

.vb-course-outcome-card--skin-mint_navy .vb-course-outcome-card__bar {
    height: 394px;
    background: #54bfd1;
}

.vb-course-outcome-card--skin-mint_navy .vb-course-outcome-card__decor {
    width: 280px;
    height: 280px;
    transform: translate(12%, -11%);
}

.vb-course-outcome-card--skin-mint_navy .vb-course-outcome-num {
    background: #54bfd1;
    color: #fff;
}

.vb-course-outcome-card--skin-mint_navy .vb-course-outcome-title,
.vb-course-outcome-card--skin-mint_navy .vb-course-outcome-body {
    color: #fff;
}

.vb-course-outcome-card--skin-mint_navy .vb-course-outcome-body {
    color: rgba(255, 255, 255, 0.84);
}

@media (max-width: 768px) {
    .vb-course-section--outcomes .vb-course-inner--outcomes {
        padding-left: 20px;
        padding-right: 20px;
    }

    .vb-course-outcomes-panel {
        padding: 36px 0 40px;
        border-radius: 32px;
    }

    .vb-course-outcomes-panel__decor--a,
    .vb-course-outcomes-panel__decor--b {
        opacity: 0.45;
    }

    .vb-course-outcomes-grid {
        grid-template-columns: 1fr;
        row-gap: 20px;
        margin-top: 28px;
    }

    .vb-course-outcomes-grid > .vb-course-outcome-card:nth-child(2),
    .vb-course-outcomes-grid > .vb-course-outcome-card:nth-child(4) {
        margin-top: 0;
    }

    .vb-course-outcome-card {
        min-height: 0;
        padding-top: 120px;
    }

    .vb-course-outcome-title {
        font-size: 26px;
    }

    .vb-course-outcome-body {
        font-size: 17px;
    }
}

/* Reviews — same masonry as home (Figma 1101:3226); home-page.css provides layout */
.vb-course-section--reviews.home-reviews {
    margin-bottom: 80px;
}

.vb-course-section--reviews.home-reviews .home-reviews__header {
    color: #232929;
}

.vb-course-section--reviews.home-reviews .home-reviews__mid {
    min-width: 0;
}

/* Tariffs — Figma 1101:3259 */
.vb-course-section--tariffs {
    margin-top: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: #f4f8fa;
    border-radius: 0;
    scroll-margin-top: 96px;
}

.vb-course-tariffs-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    box-sizing: border-box;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

.vb-course-tariffs-title {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: 52px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--vb-grey);
}

.vb-course-tariff-promo {
    display: grid;
    grid-template-columns: 187px minmax(0, 1fr) auto 187px;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 72px;
    padding: 0;
    border-radius: 32px;
    overflow: hidden;
    background:
        linear-gradient(175.88516268deg, #54bfd1 0%, #239cb1 80.895%),
        linear-gradient(90deg, #239cb1 0%, #239cb1 100%);
}

.vb-course-tariff-promo__decor--left {
    grid-column: 1;
}

.vb-course-tariff-promo__text {
    grid-column: 2;
    margin: 0;
    min-width: 0;
    padding: 0;
    text-align: center;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.vb-course-tariff-promo__btn,
.vb-course-tariff-promo__btn--disabled {
    grid-column: 3;
}

.vb-course-tariff-promo__decor--right {
    grid-column: 4;
}

.vb-course-tariff-promo__decor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 187px;
    min-width: 0;
}

.vb-course-tariff-promo__decor-inner {
    position: relative;
    width: 187px;
    height: 72px;
    flex-shrink: 0;
    overflow: hidden;
}

.vb-course-tariff-promo__decor-inner img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.vb-course-tariff-promo__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 24px;
    border-radius: 100px;
    border: 1px solid #fff;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.vb-course-tariff-promo__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.vb-course-tariff-promo__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.vb-course-tariff-promo__btn--disabled {
    pointer-events: none;
    opacity: 0.85;
}

.vb-course-tariff-promo__btn--modal {
    font: inherit;
    cursor: pointer;
    background: transparent;
}

.vb-tariff-promo-modal {
    box-sizing: border-box;
    width: min(720px, calc(100vw - 24px));
    max-width: calc(100vw - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    max-height: min(92dvh, calc(100vh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))));
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--vb-grey);
}

.vb-tariff-promo-modal.vb-tariff-promo-modal--discount {
    width: min(1104px, calc(100vw - 24px));
}

.vb-tariff-promo-modal::backdrop {
    background: rgba(35, 41, 41, 0.45);
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 4vw, 32px);
    padding: 32px 16px 32px 32px;
    min-width: 0;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 3vw, 24px);
    width: 100%;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__chip {
    box-sizing: border-box;
    margin: 0;
    padding: 8px 16px;
    border: 2px solid var(--vb-cayman);
    border-radius: 24px;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.2;
    color: var(--vb-cayman);
    white-space: normal;
    max-width: 100%;
    text-align: center;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__title {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 4.2vw, 42px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--vb-grey);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__title-line {
    display: block;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__title-accent {
    color: var(--vb-cayman);
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__lead {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 2.5vw, 24px);
    line-height: 1.45;
    color: var(--vb-secondary-grey);
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__mail {
    color: var(--vb-cayman);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    word-break: break-all;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__mail:hover {
    text-decoration-thickness: 2px;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__cta {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 450px;
    margin-top: auto;
    padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 32px);
    border-radius: 12px;
    background: var(--vb-coral);
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 2.5vw, 24px);
    line-height: 1.3;
    color: var(--vb-white);
    text-decoration: none;
    text-align: center;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__cta:hover {
    filter: brightness(1.03);
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__cta:focus-visible {
    outline: 2px solid var(--vb-cayman);
    outline-offset: 3px;
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__visual {
    position: relative;
    box-sizing: border-box;
    min-height: clamp(200px, 28vw, 360px);
    min-width: 0;
    background: var(--vb-white);
}

.vb-tariff-promo-modal--discount .vb-tariff-promo-modal__hero {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: clamp(200px, 28vw, 360px);
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1100px) and (min-width: 901px) {
    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__main {
        padding: 28px 12px 28px 24px;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__heading {
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .vb-tariff-promo-modal--discount {
        width: calc(100vw - 20px);
        max-width: none;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__visual {
        display: none;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__main {
        width: 100%;
        padding: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom));
        gap: 24px;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__cta {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__main {
        padding: 16px 16px 20px;
        gap: 20px;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__heading {
        gap: 16px;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__chip {
        padding: 6px 14px;
        border-radius: 20px;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__cta {
        padding: 18px 20px;
    }
}

@media (max-width: 400px) {
    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__main {
        padding: 12px 12px 16px;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__title {
        font-size: clamp(20px, 6.5vw, 26px);
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__lead {
        font-size: clamp(14px, 4vw, 17px);
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__visual {
        display: block;
        order: 0;
        margin: 0;
        padding: 10px 12px;
        min-height: 0;
        max-height: none;
        align-self: stretch;
        background: var(--vb-white);
        border-radius: 0;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__hero {
        height: 100%;
        min-height: 176px;
        max-height: none;
        border-radius: 10px;
        object-fit: contain;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__main {
        padding: 16px 12px 16px 20px;
        gap: 12px;
        overflow-y: auto;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__heading {
        gap: 10px;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__cta {
        padding: 12px 16px;
        font-size: 16px;
    }
}

@media (min-width: 901px) and (max-width: 1200px) and (max-height: 460px) and (orientation: landscape) {
    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__visual {
        display: none;
    }

    .vb-tariff-promo-modal--discount .vb-tariff-promo-modal__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.vb-tariff-promo-modal__card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: inherit;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 24px;
    background: var(--vb-white);
}

.vb-tariff-promo-modal__close,
.vb-course-signup-modal__close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--vb-secondary-grey);
}

.vb-tariff-promo-modal__close:hover,
.vb-course-signup-modal__close:hover {
    background: rgba(35, 41, 41, 0.06);
}

.vb-tariff-promo-modal__close:focus-visible,
.vb-course-signup-modal__close:focus-visible {
    outline: 2px solid var(--vb-cayman);
    outline-offset: 2px;
}

.vb-course-signup-modal__body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 32px);
    padding: 32px 56px 32px 32px;
    min-width: 0;
}

.vb-course-signup-modal__title {
    margin: 0;
    padding-right: 40px;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 5vw, 42px);
    line-height: 1.4;
    color: var(--vb-grey);
}

.vb-course-signup-modal__summary {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--vb-line);
    border-radius: 12px;
}

.vb-course-signup-modal__tariff-chip {
    box-sizing: border-box;
    margin: 0;
    padding: 8px 16px;
    border: 2px solid var(--vb-cayman);
    border-radius: 24px;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.2;
    color: var(--vb-cayman);
}

.vb-course-signup-modal__course-title {
    width: 100%;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2.8vw, 24px);
    line-height: 1.4;
    color: var(--vb-grey);
}

.vb-course-signup-modal__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.vb-course-signup-modal__price-current {
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.2;
    color: var(--vb-grey);
}

.vb-course-signup-modal__price-old-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vb-course-signup-modal__price-old {
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: var(--vb-secondary-grey);
    text-decoration: line-through;
}

.vb-course-signup-modal__discount {
    box-sizing: border-box;
    padding: 2px 4px;
    border-radius: 12px;
    background: #feeded;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #e10007;
}

.vb-course-signup-modal__installment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--vb-bg-soft);
}

.vb-course-signup-modal__installment-left {
    min-width: 0;
}

.vb-course-signup-modal__installment-line {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: var(--vb-grey);
}

.vb-course-signup-modal__installment-line .vb-course-tariff-installment-strong {
    font-weight: 700;
    color: var(--vb-grey);
}

.vb-course-signup-modal__installment-line .vb-course-tariff-installment-soft,
.vb-course-signup-modal__installment-line .vb-course-tariff-installment-plain {
    font-weight: 500;
    color: var(--vb-secondary-grey);
}

.vb-course-signup-modal__installment-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.vb-course-signup-modal__installment-note {
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: var(--vb-grey);
}

.vb-course-signup-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.vb-course-signup-modal__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.vb-course-signup-modal__field {
    display: block;
    width: 100%;
}

.vb-course-signup-modal__input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--vb-line);
    border-radius: 12px;
    background: var(--vb-bg-soft);
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: var(--vb-grey);
}

.vb-course-signup-modal__input::placeholder {
    color: var(--vb-secondary-grey);
}

.vb-course-signup-modal__input:focus {
    outline: 2px solid var(--vb-cayman);
    outline-offset: 1px;
}

.vb-course-signup-modal__consents {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.vb-course-signup-modal__check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: var(--vb-secondary-grey);
}

.vb-course-signup-modal__checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--vb-cayman);
    cursor: pointer;
}

.vb-course-signup-modal__check-text {
    flex: 1 1 auto;
    min-width: 0;
}

.vb-course-signup-modal__link {
    color: var(--vb-cayman);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.vb-course-signup-modal__link:hover {
    text-decoration-thickness: 2px;
}

.vb-course-signup-modal__feedback {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--vb-cayman);
}

.vb-course-signup-modal__feedback[data-vb-error="1"] {
    color: var(--vb-coral);
}

.vb-course-signup-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.vb-course-signup-modal__submit {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px 32px;
    border: none;
    border-radius: 12px;
    background: var(--vb-coral);
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 3vw, 24px);
    line-height: 1.4;
    color: var(--vb-white);
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.vb-course-signup-modal__submit:hover:not(:disabled) {
    filter: brightness(1.03);
}

.vb-course-signup-modal__submit:focus-visible {
    outline: 2px solid var(--vb-cayman);
    outline-offset: 3px;
}

.vb-course-signup-modal__submit:disabled {
    background: #e6eef0;
    color: var(--vb-secondary-grey);
    cursor: not-allowed;
    filter: none;
}

.vb-course-signup-modal__hint {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    color: var(--vb-secondary-grey);
}

@media (max-width: 900px) {
    .vb-tariff-promo-modal {
        width: calc(100vw - 20px);
        max-width: none;
        max-height: min(94dvh, calc(100vh - 16px));
    }

    .vb-tariff-promo-modal__card {
        border-radius: 20px;
    }

    .vb-course-signup-modal__body {
        padding: 28px 48px 24px 24px;
    }

    .vb-tariff-promo-modal__close,
    .vb-course-signup-modal__close {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
    }
}

@media (max-width: 600px) {
    .vb-tariff-promo-modal {
        width: calc(100vw - 16px);
        max-height: min(96dvh, calc(100vh - 12px));
    }

    .vb-tariff-promo-modal__card {
        border-radius: 16px;
    }

    .vb-course-signup-modal__body {
        padding: 24px 44px 20px 16px;
        gap: 20px;
    }

    .vb-course-signup-modal__title {
        font-size: clamp(22px, 6vw, 32px);
    }

    .vb-course-signup-modal__check {
        font-size: 16px;
    }
}

@media (max-width: 400px) {
    .vb-tariff-promo-modal {
        width: calc(100vw - 12px);
    }

    .vb-course-signup-modal__body {
        padding: 20px 40px 16px 12px;
    }
}

.vb-course-tariffs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

@media (max-width: 900px) {
    .vb-course-tariffs-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    .vb-course-tariff-promo {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
        row-gap: 12px;
        column-gap: 12px;
        padding: 16px 12px;
    }

    .vb-course-tariff-promo__decor--left {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
    }

    .vb-course-tariff-promo__decor--right {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
    }

    .vb-course-tariff-promo__text {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: clamp(18px, 4.5vw, 28px);
        padding: 0;
    }

    .vb-course-tariff-promo__btn,
    .vb-course-tariff-promo__btn--disabled {
        grid-column: 1 / -1;
        grid-row: 3;
        margin: 0;
    }

    .vb-course-tariff-promo__decor {
        width: 120px;
    }

    .vb-course-tariff-promo__decor-inner {
        width: 120px;
        height: 46px;
    }

    .vb-course-tariff-promo__decor-inner img {
        object-fit: contain;
    }

    .vb-course-tariffs-grid {
        grid-template-columns: 1fr;
    }

    .vb-course-tariffs-title {
        font-size: clamp(28px, 6vw, 44px);
    }
}

.vb-course-tariff-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 52px;
    padding: 32px 32px 52px;
    border-radius: 32px;
    border: none;
    background: var(--vb-white);
    overflow: hidden;
}

.vb-course-tariff-card__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vb-course-tariff-card__bottom {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vb-course-tariff-name {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--vb-grey);
}

.vb-course-tariff-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vb-course-tariff-feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.vb-course-tariff-feature__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.vb-course-tariff-feature__icon .vb-course-tariff-check {
    display: block;
    width: 24px;
    height: 24px;
}

.vb-course-tariff-feature__text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
    color: var(--vb-grey);
}

.vb-course-tariff-installment-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    padding: 16px 24px;
    border-radius: 12px;
    background: var(--vb-bg-soft);
}

.vb-course-tariff-installment-line {
    margin: 0;
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
    color: var(--vb-grey);
}

.vb-course-tariff-installment-strong {
    font-weight: 700;
}

.vb-course-tariff-installment-soft {
    font-weight: 500;
}

.vb-course-tariff-installment-plain {
    font-weight: 500;
}

.vb-course-tariff-installment-bar__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 4px 8px;
}

.vb-course-tariff-card-ico {
    display: block;
    flex-shrink: 0;
}

.vb-course-tariff-installment-note {
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
    color: var(--vb-grey);
    white-space: nowrap;
}

.vb-course-tariff-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    min-width: 0;
}

.vb-course-tariff-prices {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.vb-course-tariff-current {
    font-family: Onest, system-ui, sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--vb-grey);
}

.vb-course-tariff-old {
    font-family: Onest, system-ui, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-decoration: line-through;
    text-decoration-skip-ink: none;
    color: var(--vb-secondary-grey);
}

.vb-course-tariff-cta {
    flex: 1 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px 32px;
    border-radius: 12px;
    border: none;
    background: var(--vb-coral);
    font-family: Onest, system-ui, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.vb-course-tariff-cta:hover {
    filter: brightness(1.04);
    color: #fff;
}

.vb-course-tariff-cta.vb-course-tariff-cta--signup {
    cursor: pointer;
    font: inherit;
    width: 100%;
    max-width: none;
}

@media (max-width: 640px) {
    .vb-course-tariff-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .vb-course-tariff-cta {
        width: 100%;
    }

    .vb-course-tariff-name {
        font-size: 28px;
    }

    .vb-course-tariff-feature__text,
    .vb-course-tariff-installment-line,
    .vb-course-tariff-installment-note {
        font-size: 17px;
    }

    .vb-course-tariff-current {
        font-size: 28px;
    }

    .vb-course-tariff-old {
        font-size: 17px;
    }

    .vb-course-tariff-cta {
        font-size: 18px;
    }
}