.programming-basics-main {
    overflow-x: clip;
    overflow-y: visible;
}

.top-screen-section {
    min-height: calc(100svh - var(--premium-header-height));
    padding: clamp(56px, 10vh, 118px) 0 72px;
    display: grid;
    align-content: center;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 150, 56, .22), transparent 24rem),
        radial-gradient(circle at 84% 16%, rgba(52, 144, 255, .24), transparent 23rem),
        radial-gradient(circle at 72% 76%, rgba(137, 226, 78, .12), transparent 24rem),
        linear-gradient(145deg, rgba(4, 9, 21, .96) 0%, rgba(6, 16, 30, .98) 46%, rgba(3, 8, 20, 1) 100%);
}

#top_screen {
    --stage-top: -26px;
    --stage-left: 2%;
    --stage-right: auto;
}

.top-screen-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(300px, .74fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    margin-bottom: 34px;
}

.top-screen-copy,
.top-screen-visual {
    min-width: 0;
}

.top-screen-kicker {
    margin-bottom: 22px;
}

.top-screen-title {
    display: grid;
    gap: 6px;
    max-width: 10ch;
    margin: 0 0 24px;
    font-size: clamp(2rem, 5.15vw, 3.5rem);
    letter-spacing: -.03em;
    line-height: .9;
}

.top-screen-title span {
    display: block;
    overflow-wrap: normal;
    word-break: normal;
}

.top-screen-title span:first-child {
    color: transparent;
    background: linear-gradient(135deg, #ffcf98 0%, #ff9638 42%, #ffe200 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.top-screen-title span:last-child {
    max-width: 10ch;
    font-size: .78em;
}

.top-screen-lead {
    max-width: 700px;
    margin: 0 0 28px;
}

.top-screen-track-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 720px;
}

.top-screen-track-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: center;
}

.top-screen-visual {
    position: relative;
    display: grid;
    place-items: center;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)),
        rgba(4, 9, 21, .76);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .3);
    overflow: hidden;
    isolation: isolate;
}

.top-screen-visual::before,
.top-screen-visual::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
    z-index: 0;
}

.top-screen-visual::before {
    inset: auto -8% -18% auto;
    width: min(72%, 360px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(52, 144, 255, .3) 0%, rgba(52, 144, 255, .08) 42%, transparent 72%);
}

.top-screen-visual::after {
    inset: -12% auto auto -10%;
    width: min(58%, 250px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 150, 56, .22) 0%, rgba(255, 150, 56, .06) 48%, transparent 74%);
}

.top-screen-orbit {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    gap: 6px;
    width: min(250px, 58vw);
    aspect-ratio: 1;
    margin: 0 auto;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .12), rgba(7, 17, 31, .94));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: center;
}

.top-screen-orbit::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: 50%;
}

.top-screen-orbit span,
.top-screen-orbit small {
    position: relative;
    z-index: 1;
}

.top-screen-orbit span {
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.top-screen-orbit strong {
    position: relative;
    z-index: 1;
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.7rem);
    line-height: .9;
    color: transparent;
    background: linear-gradient(135deg, #ffffff 0%, #d4e6ff 36%, var(--owu-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.top-screen-orbit small {
    color: rgba(255, 255, 255, .9);
    font-size: 16px;
    font-weight: 700;
}

.top-screen-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.top-screen-fact {
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 22px 54px rgba(0, 0, 0, .18);
    backdrop-filter: blur(14px);
}

.top-screen-fact strong {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.2;
}

.top-screen-fact span {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    line-height: 1.6;
}

@media screen and (max-width: 980px) {
    #top_screen {
        --stage-top: -18px;
        --stage-left: 0;
    }

    .top-screen-shell {
        grid-template-columns: 1fr;
    }

    .top-screen-title {
        font-size: clamp(2.7rem, 8vw, 4.8rem);
    }

    .top-screen-facts {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 720px) {
    .top-screen-section {
        padding: 42px 0 50px;
    }

    #top_screen {
        --stage-top: -8px;
    }

    .top-screen-title {
        font-size: clamp(1.95rem, 8.8vw, 2.9rem);
        line-height: .98;
    }

    .top-screen-lead {
        font-size: 16px;
    }

    .top-screen-track-list span {
        min-height: 38px;
        font-size: 13px;
    }

    .top-screen-visual {
        padding: 22px;
    }

    .top-screen-orbit {
        width: min(100%, 230px);
    }
}

@media screen and (max-width: 480px) {
    .top-screen-kicker {
        margin-bottom: 18px;
    }

    .top-screen-title {
        margin-bottom: 20px;
        font-size: clamp(1.4rem, 8.4vw, 2.2rem);
    }

    .top-screen-title span:last-child {
        font-size: .74em;
    }

    .top-screen-visual,
    .top-screen-fact {
        border-radius: 22px;
    }

    .top-screen-fact {
        padding: 20px;
    }
}

.basics-section-heading {
    align-items: start;
}

.basics-section-heading--compact {
    margin-bottom: 26px;
}

.basics-proof-section {
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 150, 56, .16), transparent 20rem),
        radial-gradient(circle at 84% 18%, rgba(52, 144, 255, .14), transparent 20rem),
        linear-gradient(180deg, #050c17 0%, #08111f 100%);
}

#school-proof {
    --stage-top: -16px;
    --stage-left: 2%;
    --stage-right: auto;
}

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

.basics-feature-card,
.basics-feature-visual,
.basics-step-card,
.basics-split-visual,
.basics-benefit-card,
.employer-proof-card,
.basics-roadmap-card,
.basics-offers-intro,
.basics-offer-card,
.basics-chat-panel,
.basics-unique-visual,
.basics-unique-grid span {
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    box-shadow: 0 26px 80px rgba(0, 0, 0, .24);
    backdrop-filter: blur(18px);
}

.basics-feature-card,
.basics-step-card,
.basics-benefit-card,
.basics-roadmap-card,
.basics-offers-intro,
.basics-offer-card {
    padding: 26px;
    border-radius: 28px;
}

.basics-feature-card {
    min-width: 0;
}

.basics-feature-card h3,
.basics-step-card h3,
.basics-benefit-card h3,
.employer-proof-body h3,
.basics-roadmap-card h3,
.basics-offers-intro h3,
.basics-offer-card h3,
.basics-chat-panel h2,
.basics-unique-section .premium-title {
    margin: 12px 0;
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    line-height: 1.18;
}

.basics-feature-card p,
.basics-step-card p,
.basics-benefit-card p,
.employer-proof-body p,
.basics-roadmap-card p,
.basics-offers-intro p,
.basics-offer-subtitle,
.basics-chat-panel .premium-copy {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    line-height: 1.72;
}

.basics-feature-index,
.basics-step-number,
.basics-offer-track,
.basics-roadmap-track,
.employer-proof-label,
.basics-offers-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .84);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.basics-feature-index,
.basics-step-number {
    margin-bottom: 18px;
}

.basics-feature-visual {
    position: relative;
    grid-column: 3;
    grid-row: 1 / span 2;
    border-radius: 32px;
    overflow: hidden;
}

.basics-feature-visual img,
.basics-split-visual img,
.basics-unique-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 24px;
}

.basics-feature-visual img {
    position: absolute;
    top: 18px;
    right: 18px;
    bottom: 18px;
    left: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
}

.basics-start-section {
    background:
        radial-gradient(circle at 76% 18%, rgba(255, 150, 56, .12), transparent 18rem),
        linear-gradient(180deg, #07101d 0%, #0a1526 100%);
}

.basics-split-shell {
    display: grid;
    gap: 26px;
}

.basics-split-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.basics-card-stack,
.basics-benefit-grid {
    display: grid;
    gap: 20px;
}

.basics-step-card {
    position: relative;
}

.basics-step-card::before,
.basics-benefit-card::before,
.basics-roadmap-card::before,
.basics-offer-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--owu-orange), rgba(255, 150, 56, 0));
}

.basics-split-visual {
    display: flex;
    min-height: 460px;
    padding: 18px;
    border-radius: 32px;
    overflow: hidden;
}

.basics-split-visual--warm {
    background:
        radial-gradient(circle at top left, rgba(255, 226, 0, .16), transparent 24%),
        linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
}

.basics-why-section {
    background:
        radial-gradient(circle at 16% 24%, rgba(52, 144, 255, .16), transparent 18rem),
        linear-gradient(180deg, #040b14 0%, #081220 100%);
}

.basics-split-layout--reverse {
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
}

.basics-split-visual--cool {
    background:
        radial-gradient(circle at top right, rgba(52, 144, 255, .22), transparent 26%),
        linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
}

.basics-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basics-benefit-card {
    position: relative;
    padding: 24px;
    border-radius: 28px;
}

.employer-proof-section {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 150, 56, .16), transparent 20rem),
        radial-gradient(circle at 82% 18%, rgba(52, 144, 255, .15), transparent 22rem),
        linear-gradient(180deg, #07111f 0%, #091423 100%);
}

#employer-proof {
    --stage-top: 0;
    --stage-left: auto;
    --stage-right: 2%;
}

.employer-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.employer-proof-card {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 28px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.employer-proof-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, .18);
    background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));
}

.employer-proof-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #07111f;
    overflow: hidden;
}

.employer-proof-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 17, 31, .04), rgba(7, 17, 31, .76));
}

.employer-proof-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-proof-play {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
    z-index: 1;
}

.employer-proof-play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-34%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #ffffff;
}

.employer-proof-body {
    display: grid;
    gap: 14px;
    padding: 24px;
}

.employer-proof-tags,
.basics-offers-signals,
.basics-roadmap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.employer-proof-tags span,
.basics-offers-signals span,
.basics-roadmap-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
}

.employer-proof-brand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}

.employer-proof-brand-row span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 22px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .84);
    font-family: 'Unbounded', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.direction-showcase-card--html {
    background:
        radial-gradient(circle at top right, rgba(255, 150, 56, .18), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)),
        rgba(5, 13, 25, .9);
}

.basics-roadmap-section {
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 226, 0, .08), transparent 16rem),
        radial-gradient(circle at 82% 14%, rgba(52, 144, 255, .14), transparent 18rem),
        linear-gradient(180deg, #050d18 0%, #091321 100%);
}

#program-online-course {
    --stage-top: -6px;
    --stage-left: 1.5%;
    --stage-right: auto;
}

.basics-roadmap-shell {
    display: grid;
    gap: 28px;
}

.basics-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.basics-roadmap-card {
    position: relative;
    display: grid;
    gap: 18px;
    min-width: 0;
}

.basics-roadmap-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
}

.basics-roadmap-duration {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(52, 144, 255, .12);
    border: 1px solid rgba(52, 144, 255, .24);
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    white-space: nowrap;
}

.basics-roadmap-list,
.basics-offer-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.basics-roadmap-list li,
.basics-offer-list li {
    position: relative;
    padding-left: 22px;
    color: rgba(255, 255, 255, .76);
    line-height: 1.55;
}

.basics-roadmap-list li::before,
.basics-offer-list li::before {
    content: '';
    position: absolute;
    top: .7em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--owu-blue), var(--owu-green));
    box-shadow: 0 0 14px rgba(52, 144, 255, .42);
}

.basics-offers-section {
    background:
        radial-gradient(circle at 14% 18%, rgba(137, 226, 78, .13), transparent 20rem),
        radial-gradient(circle at 86% 14%, rgba(255, 150, 56, .14), transparent 18rem),
        linear-gradient(180deg, #07111f 0%, #0a1525 100%);
}

#forms {
    --stage-top: -10px;
    --stage-left: auto;
    --stage-right: 2%;
}

.basics-offers-layout {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    gap: 22px;
    align-items: start;
}

.basics-offers-intro {
    position: sticky;
    top: calc(var(--premium-header-height) + 24px);
    display: grid;
    gap: 18px;
}

/* .basics-offers-intro h3 {
    max-width: 11ch;
} */

.basics-offers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.basics-offer-card {
    position: relative;
    display: grid;
    gap: 18px;
}

.basics-offer-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.basics-offer-head .basics-offer-title {
    margin-bottom: 0;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: bold;
}

.basics-offer-seats {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .84);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.basics-offer-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.basics-offer-price-old {
    color: rgba(255, 255, 255, .44);
    font-size: 14px;
    text-decoration: line-through;
}

.basics-offer-price strong {
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    line-height: 1;
}

.basics-offer-card--html strong {
    color: #ffcb8f;
}

.basics-offer-card--javascript strong {
    color: #ffe35d;
}

.basics-offer-card--frontend strong {
    color: #99d0ff;
}

.basics-offer-card--python strong {
    color: #9fea6e;
}

.basics-offers-section .premium-button {
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #89e24e, #3490ff);
    color: #fff;
    box-shadow: 0 18px 30px rgba(52, 144, 255, .22);
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.basics-offers-section .premium-button:hover,
.basics-offers-section .premium-button:focus-visible {
    background: linear-gradient(90deg, #89e24e, #3490ff);
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 18px 30px rgba(137, 226, 78, .2);
    filter: brightness(1.04);
    outline: 0;
}

.basics-offers-intro .premium-button {
    background: linear-gradient(90deg, #ff9638, #ffe200);
    color: #fff;
    box-shadow: 0 18px 30px rgba(255, 150, 56, .22);
}

.basics-offers-intro .premium-button:hover,
.basics-offers-intro .premium-button:focus-visible {
    background: linear-gradient(90deg, #ff9638, #ffe200);
    box-shadow: 0 18px 30px rgba(255, 226, 0, .28);
}

.basics-chat-section {
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 150, 56, .16), transparent 18rem),
        linear-gradient(180deg, #081220 0%, #06101c 100%);
}

#manager-chat {
    --stage-top: 4px;
    --stage-left: 2%;
    --stage-right: auto;
}

.basics-chat-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 30px 34px;
    border-radius: 30px;
}

.basics-chat-panel .premium-title {
    max-width: 11ch;
}

.basics-chat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    flex: 0 0 auto;
}

.basics-chat-actions .premium-button {
    border: none;
    cursor: pointer;
}

.basics-unique-section {
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 226, 0, .1), transparent 18rem),
        linear-gradient(180deg, #040915 0%, #07111f 100%);
}

#unique-value {
    --stage-top: -6px;
    --stage-left: auto;
    --stage-right: 2%;
}

.basics-unique-layout {
    display: grid;
    grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
    gap: 22px;
    align-items: start;
}

.basics-unique-visual {
    min-height: 520px;
    padding: 18px;
    border-radius: 32px;
    overflow: hidden;
}

.basics-unique-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.basics-unique-grid span {
    min-height: 96px;
    padding: 18px 20px;
    border-radius: 24px;
    color: rgba(255, 255, 255, .84);
    font-size: 15px;
    line-height: 1.55;
}

@media screen and (max-width: 980px) {
    .basics-proof-grid,
    .basics-split-layout,
    .basics-roadmap-grid,
    .basics-offers-layout,
    .basics-unique-layout {
        grid-template-columns: 1fr;
    }

    .basics-feature-visual {
        grid-column: auto;
        grid-row: auto;
        min-height: 360px;
    }

    .basics-split-layout--reverse,
    .basics-benefit-grid,
    .employer-proof-grid,
    .basics-offers-grid,
    .basics-unique-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .basics-offers-intro {
        position: relative;
        top: auto;
    }

    .basics-chat-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .basics-chat-panel .premium-title {
        max-width: 100%;
    }
}

@media screen and (max-width: 820px) {
    .basics-split-layout,
    .basics-split-layout--reverse,
    .basics-benefit-grid,
    .employer-proof-grid,
    .basics-roadmap-grid,
    .basics-offers-grid,
    .basics-unique-grid {
        grid-template-columns: 1fr;
    }

    .basics-section-heading .premium-title,
    .basics-chat-panel .premium-title,
    .direction-showcase-heading .premium-title {
        max-width: 100%;
    }
}

@media screen and (max-width: 720px) {
    .basics-feature-card,
    .basics-step-card,
    .basics-benefit-card,
    .basics-roadmap-card,
    .basics-offers-intro,
    .basics-offer-card {
        padding: 22px 20px;
        border-radius: 24px;
    }

    .basics-feature-visual,
    .basics-split-visual {
        display: none;
    }

    .basics-feature-visual,
    .basics-split-visual,
    .basics-unique-visual {
        border-radius: 26px;
    }

    .basics-split-visual,
    .basics-unique-visual {
        padding: 14px;
    }

    .basics-feature-visual img {
        top: 14px;
        right: 14px;
        bottom: 14px;
        left: 14px;
        width: calc(100% - 28px);
        height: calc(100% - 28px);
    }

    .employer-proof-body {
        padding: 20px;
    }

    .employer-proof-brand-row span {
        width: 100%;
        box-sizing: border-box;
    }

    .basics-offer-head,
    .basics-roadmap-head {
        flex-direction: column;
    }

    .basics-chat-panel {
        padding: 24px 20px;
        border-radius: 26px;
    }

    .basics-chat-actions {
        flex-direction: column;
    }

    .basics-chat-actions .premium-button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .basics-feature-card h3,
    .basics-step-card h3,
    .basics-benefit-card h3,
    .employer-proof-body h3,
    .basics-roadmap-card h3,
    .basics-offers-intro h3,
    .basics-offer-card .basics-offer-title {
        font-size: 1rem;
    }

    .basics-feature-visual {
        min-height: 280px;
    }

    .employer-proof-play {
        width: 52px;
        height: 52px;
        top: 14px;
        right: 14px;
    }

    .basics-offer-seats,
    .basics-roadmap-duration {
        white-space: normal;
    }

    .basics-unique-grid span {
        min-height: auto;
    }
}