/* ======================================================================
   D2C GAME
   MASTERCLASS

   01 — HERO
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       HERO
       ================================================================== */

    .masterclass-page .mc-hero {
        position: relative;

        overflow: hidden;

        width: 100%;

        min-height: 900px;

        background:
            radial-gradient(
                circle at 92% 13%,
                rgba(100, 39, 255, .54),
                transparent 32%
            ),
            linear-gradient(
                90deg,
                #060b13 0%,
                #080d16 48%,
                #0b0d18 100%
            );

        color: #ffffff;
    }


    .masterclass-page .mc-hero::after {
        content: "";

        position: absolute;

        z-index: 0;

        right: -70px;
        bottom: -140px;

        width: 620px;
        height: 390px;

        border-radius: 50%;

        background:
            rgba(91, 38, 255, .30);

        filter:
            blur(95px);

        pointer-events: none;
    }



    /* ==================================================================
       INNER
       ================================================================== */

    .masterclass-page .mc-hero__inner {
        position: relative;

        z-index: 2;

        width: min(
            1440px,
            calc(100% - 96px)
        );

        max-width: none;

        min-height: 900px;

        margin:
            0 auto;

        padding:
            112px
            420px
            80px
            0;
    }



    /* ==================================================================
       COPY
       ================================================================== */

    .masterclass-page .mc-hero__copy {
        position: relative;

        z-index: 6;

        width: 560px;

        padding-top: 45px;
    }


    .masterclass-page
    .mc-hero
    .mc-eyebrow {
        margin:
            0 0
            19px;

        color:
            #9a4dff;

        font-size:
            15px;

        line-height:
            1;

        font-weight:
            800;

        letter-spacing:
            .19em;

        text-transform:
            uppercase;
    }


    .masterclass-page
    .mc-hero h1 {
        max-width:
            590px;

        margin:
            0;

        color:
            #ffffff;

        font-size:
            clamp(
                56px,
                4.2vw,
                72px
            );

        line-height:
            .95;

        letter-spacing:
            -.055em;

        font-weight:
            900;
    }


    .masterclass-page
    .mc-hero h1 span {
        display: inline;

        margin: 0;

        color:
            #7d31ff;
    }


    .masterclass-page
    .mc-hero__intro {
        max-width:
            545px;

        margin:
            27px 0
            0;

        color:
            #c2c6d0;

        font-size:
            18px;

        line-height:
            1.45;

        font-weight:
            400;
    }



    /* ==================================================================
       ROMAN PORTRAIT
       ================================================================== */

    .masterclass-page
    .mc-hero__portrait {
        position:
            absolute;

        z-index:
            2;

        top:
            0;

        right:
            265px;

        width:
            770px;

        height:
            900px;

        pointer-events:
            none;
    }


    .masterclass-page
    .mc-hero__portrait-picture,
    .masterclass-page
    picture.mc-hero__portrait-picture {
        display:
            block;

        width:
            100%;

        height:
            100%;
    }


    .masterclass-page
    .mc-hero__portrait-picture img,
    .masterclass-page
    img.mc-hero__portrait-picture {
        display:
            block;

        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

        object-position:
            center top;
    }



    /* ==================================================================
       BUSINESS SYSTEM STRIP
       ================================================================== */

    .masterclass-page
    .mc-system-strip {
        position:
            absolute;

        z-index:
            7;

        left:
            0;

        bottom:
            -222px;

        display:
            flex;

        align-items:
            flex-start;

        justify-content:
            flex-start;

        gap:
            13px;

        width:
            770px;

        margin:
            0;
    }


    .masterclass-page
    .mc-system-strip__item {
        display:
            flex;

        flex:
            0 0
            79px;

        flex-direction:
            column;

        align-items:
            center;

        color:
            #ffffff;

        text-align:
            center;
    }


    .masterclass-page
    .mc-system-strip__item svg {
        width:
            31px;

        height:
            31px;

        margin-bottom:
            11px;

        color:
            #e6e7eb;

        stroke-width:
            1.6;
    }


    .masterclass-page
    .mc-system-strip__item span {
        display:
            block;

        color:
            #ffffff;

        font-size:
            12px;

        line-height:
            1.15;

        font-weight:
            700;

        white-space:
            nowrap;
    }


    .masterclass-page
    .mc-system-strip__item:last-of-type,
    .masterclass-page
    .mc-system-strip__item:last-of-type svg,
    .masterclass-page
    .mc-system-strip__item:last-of-type span {
        color:
            #8738ff;
    }


    .masterclass-page
    .mc-system-strip__arrow {
        flex:
            0 0 auto;

        margin-top:
            8px;

        color:
            #a4a9b2;

        font-size:
            18px;

        line-height:
            1;
    }



    /* ==================================================================
       REGISTRATION CARD
       ================================================================== */

    .masterclass-page
    .mc-registration-card {
        position:
            absolute;

        z-index:
            12;

        top:
            115px;

        right:
            0;

        width:
            420px;

        min-height:
            545px;

        margin:
            0;

        padding:
            32px;

        border:
            0;

        border-radius:
            15px;

        background:
            #ffffff;

        color:
            #0b0d13;

        box-shadow:
            0 30px 80px
            rgba(0, 0, 0, .22);
    }



    /* purple calendar */

    .masterclass-page
    .mc-registration-card__heading {
        display:
            flex;

        align-items:
            flex-start;

        gap:
            18px;

        margin:
            0 0
            27px;
    }


    .masterclass-page
    .mc-registration-card__heading > svg {
        flex:
            0 0
            52px;

        width:
            52px;

        height:
            52px;

        padding:
            13px;

        border-radius:
            8px;

        background:
            #f0e8ff;

        color:
            #7130ef;
    }


    .masterclass-page
    .mc-registration-card__heading h2 {
        margin:
            6px 0 0;

        color:
            #0b0d13;

        font-size:
            29px;

        line-height:
            1.05;

        letter-spacing:
            -.04em;

        font-weight:
            900;
    }



    /* ==================================================================
       WEBINARKIT
       ================================================================== */

    .masterclass-page
    .mc-webinarkit {
        width:
            100%;
    }


    .masterclass-page
    .mc-webinarkit
    .wk_root,
    .masterclass-page
    .mc-webinarkit
    #wk_element_d94017575195c57e80b94bab113f9bdc,
    .masterclass-page
    .mc-webinarkit
    #wk_element_399409224331983c0bb3717d18e66cc0 {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    .masterclass-page
    .mc-webinarkit
    .wk_registration_timer {
        display:
            none !important;
    }


    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_element {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            12px !important;

        width:
            100% !important;
    }



    /* ==================================================================
       REAL WEBINARKIT FIELDS
       ================================================================== */

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_date,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_first_name,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_email {
        box-sizing:
            border-box !important;

        display:
            block !important;

        grid-column:
            1 !important;

        width:
            100% !important;

        height:
            52px !important;

        margin:
            0 !important;

        padding:
            0 17px !important;

        border:
            1px solid
            #d8dbe2 !important;

        border-radius:
            7px !important;

        outline:
            none !important;

        background:
            #ffffff !important;

        color:
            #161922 !important;

        box-shadow:
            none !important;

        font-family:
            inherit !important;

        font-size:
            14px !important;

        line-height:
            52px !important;
    }


    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_date:focus,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_first_name:focus,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_email:focus {
        border-color:
            #7130ef !important;

        box-shadow:
            0 0 0 3px
            rgba(113, 48, 239, .08) !important;
    }


    .masterclass-page
    .mc-webinarkit
    input::placeholder {
        color:
            #a5a9b5 !important;

        opacity:
            1 !important;
    }



    /* ==================================================================
       HIDE UNUSED WEBINARKIT FIELDS
       ================================================================== */

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_last_name,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_phone,

    .masterclass-page
    .mc-webinarkit
    .iti,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_custom_field_1,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_custom_field_2,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_custom_field_3,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_custom_field_4,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_custom_field_5,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_checkbox {
        display:
            none !important;
    }



    /* ==================================================================
       CTA
       ================================================================== */

    .masterclass-page
    .mc-webinarkit
    #wk_element_6aef8c2761d05f7a7fee01f707ee3d9f {
        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-height:
            56px !important;

        margin:
            7px 0
            0 !important;

        padding:
            0 22px !important;

        border:
            0 !important;

        border-radius:
            7px !important;

        background:
            linear-gradient(
                90deg,
                #ffc43b,
                #ffd25b
            ) !important;

        color:
            #080a0d !important;

        cursor:
            pointer !important;

        font-family:
            inherit !important;

        font-size:
            17px !important;

        font-weight:
            900 !important;
    }


    .masterclass-page
    .mc-webinarkit
    #wk_element_6aef8c2761d05f7a7fee01f707ee3d9f
    p {
        position:
            relative;

        margin:
            0 !important;

        padding-right:
            29px !important;

        color:
            #080a0d !important;
    }


    .masterclass-page
    .mc-webinarkit
    #wk_element_6aef8c2761d05f7a7fee01f707ee3d9f
    p::after {
        content:
            "→";

        position:
            absolute;

        top:
            50%;

        right:
            0;

        transform:
            translateY(-52%);

        font-size:
            21px;

        font-weight:
            500;
    }



    /* WebinarKit spacing */

    .masterclass-page
    .mc-webinarkit
    .mb-3 {
        margin-bottom:
            0 !important;
    }


    .masterclass-page
    .mc-webinarkit
    .shadow {
        box-shadow:
            none !important;
    }


    .masterclass-page
    .mc-webinarkit
    .bg-light {
        background:
            #ffffff !important;
    }

}
/* ======================================================================
   MASTERCLASS
   02 — IS THIS FOR YOU?
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-audience {
        position: relative;
        overflow: hidden;

        width: 100%;

        padding:
            78px 0
            96px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(113, 48, 239, .055),
                transparent 30%
            ),
            radial-gradient(
                circle at 0% 0%,
                rgba(113, 48, 239, .035),
                transparent 28%
            ),
            #fcfcfe;

        color: #080a11;
    }


    .masterclass-page
    .mc-audience > .home-shell {
        width: min(
            1440px,
            calc(100% - 96px)
        );

        max-width: none;

        margin-left: auto;
        margin-right: auto;
    }



    /* ==================================================================
       HEADING
       ================================================================== */

    .masterclass-page
    .mc-audience
    .mc-heading {
        width: 100%;
        max-width: 1080px;

        margin:
            0 auto
            46px;

        text-align: center;
    }


    /*
     * Existing PHP uses .mc-section-pill here.
     * Desktop reference shows it as simple eyebrow text,
     * not a rounded pill.
     */

    .masterclass-page
    .mc-audience
    .mc-section-pill {
        display: block;

        width: auto;
        min-height: 0;

        margin:
            0 0
            28px;

        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;

        color: #7230ed;

        font-size: 14px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .42em;

        text-transform: uppercase;
    }



    /* ==================================================================
       TITLE
       ================================================================== */

    .masterclass-page
    .mc-audience
    .mc-heading h2 {
        max-width: 1050px;

        margin:
            0 auto;

        color: #070910;

        font-size:
            clamp(
                58px,
                4.7vw,
                78px
            );

        line-height: .91;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .masterclass-page
    .mc-audience
    .mc-heading h2 span {
        display: block;

        margin-top: 5px;

        color: #7029ec;
    }



    /* intro */

    .masterclass-page
    .mc-audience
    .mc-heading > p {
        max-width: 910px;

        margin:
            25px auto
            0;

        color: #626c80;

        font-size: 20px;
        line-height: 1.35;

        font-weight: 400;
    }



    /* ==================================================================
       CARD GRID
       ================================================================== */

    .masterclass-page
    .mc-audience-list {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        align-items: stretch;

        gap: 16px;

        width: 100%;
    }



    /* ==================================================================
       CARD
       ================================================================== */

    .masterclass-page
    .mc-audience-card {
        position: relative;

        display: flex;

        min-width: 0;
        min-height: 500px;

        flex-direction: column;

        padding:
            31px 29px
            28px;

        border:
            1px solid
            #dfe1e8;

        border-radius: 13px;

        background:
            rgba(
                255,
                255,
                255,
                .86
            );

        box-shadow:
            0 12px 34px
            rgba(
                28,
                17,
                56,
                .025
            );
    }



    /* middle card */

    .masterclass-page
    .mc-audience-card:nth-child(2) {
        border-color:
            #eee4c8;

        background:
            linear-gradient(
                145deg,
                #fffdf7,
                #fff9e9
            );
    }



    /* ==================================================================
       CARD COPY
       ================================================================== */

    .masterclass-page
    .mc-audience-card__copy {
        position: relative;

        min-height: 230px;

        padding-top: 63px;
    }



    /* ==================================================================
       NUMBER
       ================================================================== */

    .masterclass-page
    .mc-audience-card
    .mc-number {
        position: absolute;

        top: 0;
        left: 0;

        display: flex;

        align-items: center;

        color: #7030ed;

        font-size: 25px;
        line-height: 1;

        font-weight: 900;
    }


    /*
     * horizontal line after 01 / 02 / 03
     */

    .masterclass-page
    .mc-audience-card
    .mc-number::after {
        content: "";

        display: block;

        width: 66px;
        height: 1px;

        margin-left: 18px;

        background: #9a6bef;
    }



    /* card 2 gold */

    .masterclass-page
    .mc-audience-card:nth-child(2)
    .mc-number {
        color: #efb51d;
    }


    .masterclass-page
    .mc-audience-card:nth-child(2)
    .mc-number::after {
        background: #e5bc4d;
    }



    /* ==================================================================
       EXISTING CARD EYEBROW → STAGE PILL
       ================================================================== */

    .masterclass-page
    .mc-audience-card__copy > small {
        position: absolute;

        top: -6px;
        right: 0;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-height: 32px;

        max-width: 190px;

        padding:
            7px 16px;

        border-radius: 8px;

        background:
            #f0e9ff;

        color:
            #6527df;

        font-size: 10px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .02em;

        text-align: center;

        text-transform: uppercase;
    }


    .masterclass-page
    .mc-audience-card:nth-child(2)
    .mc-audience-card__copy > small {
        background: #fff0bd;

        color: #b38304;
    }



    /* ==================================================================
       CARD TITLE
       ================================================================== */

    .masterclass-page
    .mc-audience-card__copy h3 {
        max-width: 400px;

        margin: 0;

        color: #0a0c12;

        font-size:
            clamp(
                25px,
                1.75vw,
                31px
            );

        line-height: 1.03;

        font-weight: 900;

        letter-spacing: -.04em;
    }



    /* ==================================================================
       CARD DESCRIPTION
       ================================================================== */

    .masterclass-page
    .mc-audience-card__copy p {
        max-width: 405px;

        margin:
            18px 0
            0;

        color: #626b7d;

        font-size: 15px;
        line-height: 1.42;

        font-weight: 400;
    }



    /* ==================================================================
       FOUR-STEP FLOW
       Existing HTML:
       step -> b -> step -> b -> step -> b -> step
       ================================================================== */

    .masterclass-page
    .mc-audience
    .mc-mini-flow {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            18px
            minmax(0, 1fr)
            18px
            minmax(0, 1fr)
            18px
            minmax(0, 1fr);

        align-items: start;

        gap: 3px;

        width: 100%;

        margin-top: auto;
    }



    /* ==================================================================
       FLOW STEP
       ================================================================== */

    .masterclass-page
    .mc-audience
    .mc-mini-flow__step {
        display: flex;

        min-width: 0;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }



    /* ==================================================================
       ICON BOX
       Existing PHP uses:
       .mc-mini-flow__step > span
       ================================================================== */

    .masterclass-page
    .mc-audience
    .mc-mini-flow__step > span {
        display: grid;

        place-items: center;

        width: 70px;
        height: 70px;

        margin-bottom: 12px;

        border:
            1px solid
            #e0e2e8;

        border-radius: 10px;

        background:
            rgba(
                255,
                255,
                255,
                .85
            );

        color: #5320ca;
    }


    .masterclass-page
    .mc-audience
    .mc-mini-flow__step > span svg {
        width: 35px;
        height: 35px;

        stroke-width: 1.75;
    }



    /* final icon gets accent background */

    .masterclass-page
    .mc-audience
    .mc-mini-flow__step:last-of-type > span {
        border-color: transparent;

        background: #eee5ff;

        color: #6e28ea;
    }



    /* second card final step */

    .masterclass-page
    .mc-audience-card:nth-child(2)
    .mc-mini-flow__step:last-of-type > span {
        background: #fff0bd;

        color: #b88609;
    }



    /* ==================================================================
       STEP TITLE
       ================================================================== */

    .masterclass-page
    .mc-audience
    .mc-mini-flow__step > strong {
        display: block;

        max-width: 100px;

        color: #11131a;

        font-size: 12px;
        line-height: 1.1;

        font-weight: 900;
    }



    /* ==================================================================
       STEP DESCRIPTION
       ================================================================== */

    .masterclass-page
    .mc-audience
    .mc-mini-flow__step > small {
        display: block;

        max-width: 98px;

        margin-top: 7px;

        color: #687184;

        font-size: 10px;
        line-height: 1.25;

        font-weight: 400;
    }



    /* ==================================================================
       FLOW ARROWS
       Existing PHP uses <b>
       ================================================================== */

    .masterclass-page
    .mc-audience
    .mc-mini-flow > b {
        display: block;

        margin-top: 25px;

        color: #292e39;

        text-align: center;

        font-size: 19px;
        line-height: 1;

        font-weight: 400;
    }



    /* ==================================================================
       OLD MOBILE BOTTOM MESSAGE
       Screenshot does not use this on desktop.
       Keep it on mobile, hide only desktop.
       ================================================================== */

    .masterclass-page
    .mc-audience-bottom {
        display: none;
    }

}



/* ======================================================================
   TABLET / SMALL DESKTOP
   1024px — 1199px
   ====================================================================== */

@media
    (min-width: 1024px)
    and
    (max-width: 1199px) {


    .masterclass-page
    .mc-audience {
        padding:
            64px 0
            76px;
    }


    .masterclass-page
    .mc-audience > .home-shell {
        width:
            calc(
                100% - 48px
            );
    }


    .masterclass-page
    .mc-audience
    .mc-heading h2 {
        font-size: 56px;
    }


    .masterclass-page
    .mc-audience-card {
        min-height: 475px;

        padding:
            25px 19px;
    }


    .masterclass-page
    .mc-audience-card__copy {
        min-height: 225px;

        padding-top: 56px;
    }


    .masterclass-page
    .mc-audience-card
    .mc-number {
        font-size: 21px;
    }


    .masterclass-page
    .mc-audience-card
    .mc-number::after {
        width: 38px;

        margin-left: 10px;
    }


    .masterclass-page
    .mc-audience-card__copy > small {
        max-width: 135px;

        padding:
            6px 9px;

        font-size: 8px;
    }


    .masterclass-page
    .mc-audience-card__copy h3 {
        font-size: 22px;
    }


    .masterclass-page
    .mc-audience-card__copy p {
        font-size: 12px;
    }


    .masterclass-page
    .mc-audience
    .mc-mini-flow {
        grid-template-columns:
            minmax(0, 1fr)
            11px
            minmax(0, 1fr)
            11px
            minmax(0, 1fr)
            11px
            minmax(0, 1fr);

        gap: 1px;
    }


    .masterclass-page
    .mc-audience
    .mc-mini-flow__step > span {
        width: 52px;
        height: 52px;

        margin-bottom: 9px;
    }


    .masterclass-page
    .mc-audience
    .mc-mini-flow__step > span svg {
        width: 27px;
        height: 27px;
    }


    .masterclass-page
    .mc-audience
    .mc-mini-flow__step > strong {
        font-size: 9px;
    }


    .masterclass-page
    .mc-audience
    .mc-mini-flow__step > small {
        font-size: 7px;
    }


    .masterclass-page
    .mc-audience
    .mc-mini-flow > b {
        margin-top: 18px;

        font-size: 14px;
    }

}
/* ======================================================================
   MASTERCLASS
   03 — THE PROBLEM
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-problem {
        position: relative;
        overflow: hidden;

        width: 100%;

        padding:
            72px 0
            88px;

        background:
            radial-gradient(
                circle at 95% 10%,
                rgba(65, 78, 200, .16),
                transparent 30%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(98, 38, 255, .35),
                transparent 25%
            ),
            radial-gradient(
                circle at 100% 100%,
                rgba(98, 38, 255, .32),
                transparent 26%
            ),
            linear-gradient(
                180deg,
                #060b14 0%,
                #070c15 55%,
                #080d17 100%
            );

        color: #ffffff;
    }


    .masterclass-page
    .mc-problem > .home-shell {
        position: relative;
        z-index: 2;

        width: min(
            1440px,
            calc(100% - 96px)
        );

        max-width: none;

        margin:
            0 auto;
    }



    /* ==================================================================
       HEADING
       ================================================================== */

    .masterclass-page
    .mc-problem
    .mc-heading {
        width: 100%;
        max-width: 1020px;

        margin:
            0 auto
            20px;

        text-align: center;
    }


    .masterclass-page
    .mc-problem
    .mc-eyebrow {
        margin:
            0 0
            20px;

        color: #a153ff;

        font-size: 14px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .34em;

        text-transform: uppercase;
    }



    /* title */

    .masterclass-page
    .mc-problem
    .mc-heading h2 {
        max-width: 1000px;

        margin:
            0 auto;

        color: #ffffff;

        font-size:
            clamp(
                60px,
                4.8vw,
                78px
            );

        line-height: .92;

        font-weight: 900;

        letter-spacing: -.052em;
    }


    .masterclass-page
    .mc-problem
    .mc-heading h2 span {
        display: block;

        margin-top: 5px;

        color: #762cf3;
    }



    /* intro */

    .masterclass-page
    .mc-problem
    .mc-heading > p {
        max-width: 900px;

        margin:
            22px auto
            0;

        color: #c3c6d0;

        font-size: 18px;
        line-height: 1.45;

        font-weight: 400;
    }



    /* ==================================================================
       PROBLEM MAP
       ================================================================== */

    .masterclass-page
    .mc-problem-map {
        position: relative;

        width: 100%;
        height: 440px;

        margin:
            4px auto
            0;
    }



    /* ==================================================================
       CENTER VISUAL
       ================================================================== */

    .masterclass-page
    .mc-problem-map__visual {
        position: absolute;

        z-index: 2;

        top: 0;
        left: 50%;

        width: 760px;
        height: 430px;

        transform:
            translateX(-50%);

        display: flex;

        align-items: center;
        justify-content: center;

        pointer-events: none;
    }


    .masterclass-page
    .mc-problem-map__visual img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;

        filter:
            drop-shadow(
                0 24px 40px
                rgba(0, 0, 0, .35)
            );
    }



    /* fallback if image not uploaded */

    .masterclass-page
    .mc-problem-orb {
        width: 520px;
        height: 340px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(106, 42, 255, .28),
                rgba(15, 16, 31, .75) 52%,
                transparent 72%
            );

        filter:
            blur(2px);
    }



    /* ==================================================================
       PROBLEM CHIPS
       ================================================================== */

    .masterclass-page
    .mc-problem-chip {
        position: absolute;

        z-index: 5;

        display: grid;

        grid-template-columns:
            50px
            minmax(0, 1fr);

        align-items: start;

        gap: 16px;

        width: 270px;
        min-height: 112px;

        padding:
            19px 19px;

        border:
            1px solid
            rgba(128, 139, 175, .28);

        border-radius: 13px;

        background:
            linear-gradient(
                145deg,
                rgba(15, 21, 34, .96),
                rgba(11, 16, 28, .94)
            );

        box-shadow:
            0 15px 36px
            rgba(0, 0, 0, .18);

        color: #ffffff;
    }



    /* icon */

    .masterclass-page
    .mc-problem-chip > svg {
        width: 42px;
        height: 42px;

        margin-top: 2px;

        color: #8a42ff;

        stroke-width: 1.75;
    }



    /* text */

    .masterclass-page
    .mc-problem-chip > span {
        display: block;

        color: #ffffff;

        font-size: 17px;
        line-height: 1.18;

        font-weight: 800;
    }



    /*
     * Your PHP currently has only one <span>,
     * so descriptions are part of the CMS text.
     * Preserve line wrapping cleanly.
     */

    .masterclass-page
    .mc-problem-chip {
        font-size: 13px;
        line-height: 1.35;
    }



    /* ==================================================================
       LEFT SIDE
       PHP order:
       1 = Too much information
       2 = Tactics without system
       3 = Conflicting advice
       ================================================================== */

    .masterclass-page
    .mc-problem-chip--1 {
        top: 20px;
        left: 0;
    }


    .masterclass-page
    .mc-problem-chip--3 {
        top: 160px;
        left: -10px;
    }


    .masterclass-page
    .mc-problem-chip--2 {
        top: 300px;
        left: -20px;
    }



    /* ==================================================================
       RIGHT SIDE
       4 = Wasted time / money
       6 = Inconsistent results
       5 = Not sure what to do next
       ================================================================== */

    .masterclass-page
    .mc-problem-chip--4 {
        top: 20px;
        right: 0;
    }


    .masterclass-page
    .mc-problem-chip--6 {
        top: 160px;
        right: -10px;
    }


    .masterclass-page
    .mc-problem-chip--5 {
        top: 300px;
        right: -20px;
    }



    /* ==================================================================
       CONNECTOR LINES — LEFT
       ================================================================== */

    .masterclass-page
    .mc-problem-chip--1::after,
    .masterclass-page
    .mc-problem-chip--2::after,
    .masterclass-page
    .mc-problem-chip--3::after {
        content: "";

        position: absolute;

        top: 50%;
        left: 100%;

        width: 95px;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                #7c39f4,
                rgba(124, 57, 244, .25)
            );

        transform:
            translateY(-50%);
    }


    .masterclass-page
    .mc-problem-chip--1::before,
    .masterclass-page
    .mc-problem-chip--2::before,
    .masterclass-page
    .mc-problem-chip--3::before {
        content: "";

        position: absolute;

        z-index: 2;

        top: 50%;
        right: -101px;

        width: 8px;
        height: 8px;

        border-radius: 50%;

        background: #eee4ff;

        box-shadow:
            0 0 12px
            rgba(129, 55, 255, .95);

        transform:
            translateY(-50%);
    }



    /* ==================================================================
       CONNECTOR LINES — RIGHT
       ================================================================== */

    .masterclass-page
    .mc-problem-chip--4::after,
    .masterclass-page
    .mc-problem-chip--5::after,
    .masterclass-page
    .mc-problem-chip--6::after {
        content: "";

        position: absolute;

        top: 50%;
        right: 100%;

        width: 95px;
        height: 1px;

        background:
            linear-gradient(
                270deg,
                #7c39f4,
                rgba(124, 57, 244, .25)
            );

        transform:
            translateY(-50%);
    }


    .masterclass-page
    .mc-problem-chip--4::before,
    .masterclass-page
    .mc-problem-chip--5::before,
    .masterclass-page
    .mc-problem-chip--6::before {
        content: "";

        position: absolute;

        z-index: 2;

        top: 50%;
        left: -101px;

        width: 8px;
        height: 8px;

        border-radius: 50%;

        background: #eee4ff;

        box-shadow:
            0 0 12px
            rgba(129, 55, 255, .95);

        transform:
            translateY(-50%);
    }



    /* ==================================================================
       QUOTE
       ================================================================== */

    .masterclass-page
    .mc-problem-quote {
        position: relative;

        z-index: 6;

        width: 100%;
        max-width: 740px;

        margin:
            -3px auto
            0;

        padding:
            0 0
            72px;

        border: 0;

        background: transparent;

        text-align: center;
    }


    .masterclass-page
    .mc-problem-quote p {
        margin: 0;

        color: #d5d7df;

        font-size: 27px;
        line-height: 1.2;

        font-weight: 400;

        letter-spacing: -.025em;
    }


    .masterclass-page
    .mc-problem-quote p:first-child {
        margin-bottom: 5px;

        color: #ffffff;

        font-weight: 800;
    }


    .masterclass-page
    .mc-problem-quote strong {
        display: block;

        margin-top: 2px;

        color: #7d31f7;

        font-size: 31px;

        line-height: 1.08;

        font-weight: 900;
    }



    /* down arrow */

    .masterclass-page
    .mc-problem-quote::after {
        content: "↓";

        position: absolute;

        left: 50%;
        bottom: 0;

        color: #742df1;

        font-size: 48px;
        line-height: 1;

        font-weight: 300;

        transform:
            translateX(-50%);
    }

}



/* ======================================================================
   SMALL DESKTOP / TABLET LANDSCAPE
   ====================================================================== */

@media
    (min-width: 1024px)
    and
    (max-width: 1199px) {


    .masterclass-page
    .mc-problem > .home-shell {
        width:
            calc(100% - 48px);
    }


    .masterclass-page
    .mc-problem
    .mc-heading h2 {
        font-size: 58px;
    }


    .masterclass-page
    .mc-problem-map {
        height: 410px;
    }


    .masterclass-page
    .mc-problem-map__visual {
        width: 620px;
        height: 390px;
    }


    .masterclass-page
    .mc-problem-chip {
        width: 220px;
        min-height: 100px;

        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 11px;

        padding:
            16px;
    }


    .masterclass-page
    .mc-problem-chip > svg {
        width: 34px;
        height: 34px;
    }


    .masterclass-page
    .mc-problem-chip > span {
        font-size: 14px;
    }


    .masterclass-page
    .mc-problem-chip--1,
    .masterclass-page
    .mc-problem-chip--4 {
        top: 20px;
    }


    .masterclass-page
    .mc-problem-chip--3,
    .masterclass-page
    .mc-problem-chip--6 {
        top: 145px;
    }


    .masterclass-page
    .mc-problem-chip--2,
    .masterclass-page
    .mc-problem-chip--5 {
        top: 270px;
    }


    .masterclass-page
    .mc-problem-chip--1::after,
    .masterclass-page
    .mc-problem-chip--2::after,
    .masterclass-page
    .mc-problem-chip--3::after,

    .masterclass-page
    .mc-problem-chip--4::after,
    .masterclass-page
    .mc-problem-chip--5::after,
    .masterclass-page
    .mc-problem-chip--6::after {
        width: 55px;
    }


    .masterclass-page
    .mc-problem-chip--1::before,
    .masterclass-page
    .mc-problem-chip--2::before,
    .masterclass-page
    .mc-problem-chip--3::before {
        right: -61px;
    }


    .masterclass-page
    .mc-problem-chip--4::before,
    .masterclass-page
    .mc-problem-chip--5::before,
    .masterclass-page
    .mc-problem-chip--6::before {
        left: -61px;
    }

}
/* ======================================================================
   MASTERCLASS
   04 — THE D2C BUSINESS SYSTEM
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-solution {
        position: relative;
        overflow: hidden;

        width: 100%;

        padding:
            82px 0
            66px;

        background:
            radial-gradient(
                circle at 72% 35%,
                rgba(118, 48, 239, .045),
                transparent 34%
            ),
            #fdfdff;

        color: #090b12;
    }


    .masterclass-page
    .mc-solution > .home-shell {
        display: grid;

        grid-template-columns:
            365px
            minmax(0, 1fr);

        grid-template-rows:
            auto
            auto;

        column-gap: 48px;

        width: min(
            1440px,
            calc(100% - 96px)
        );

        max-width: none;

        margin:
            0 auto;
    }



    /* ==================================================================
       LEFT HEADING
       ================================================================== */

    .masterclass-page
    .mc-solution
    .mc-heading {
        grid-column: 1;
        grid-row: 1;

        align-self: center;

        width: 100%;
        max-width: none;

        margin: 0;

        text-align: left;
    }



    /* SECTION 04 */

    .masterclass-page
    .mc-solution
    .mc-section-pill {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-height: 31px;

        margin:
            0 0
            37px;

        padding:
            6px 20px;

        border: 0;
        border-radius: 999px;

        background: #f0e8ff;

        color: #6d2ce7;

        font-size: 10px;
        line-height: 1;

        font-weight: 850;

        letter-spacing: .18em;

        text-transform: uppercase;
    }



    /* THE SOLUTION */

    .masterclass-page
    .mc-solution
    .mc-eyebrow {
        margin:
            0 0
            28px;

        color: #687185;

        font-size: 12px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .34em;

        text-transform: uppercase;
    }



    /* ==================================================================
       TITLE
       ================================================================== */

    .masterclass-page
    .mc-solution
    .mc-heading h2 {
        max-width: 365px;

        margin: 0;

        color: #070910;

        font-size:
            clamp(
                58px,
                4.2vw,
                72px
            );

        line-height: .91;

        font-weight: 900;

        letter-spacing: -.058em;
    }


    .masterclass-page
    .mc-solution
    .mc-heading h2 span {
        display: block;

        margin-top: 5px;

        color: #6e28ed;
    }



    /* ==================================================================
       INTRO
       ================================================================== */

    .masterclass-page
    .mc-solution__intro {
        max-width: 355px;

        margin:
            35px 0
            0 !important;

        color:
            #687184 !important;

        font-size:
            17px !important;

        line-height:
            1.5 !important;
    }



    /* desktop supporting line */

    .masterclass-page
    .mc-solution__intro::after {
        content:
            "Not random tactics. One connected system.";

        display: block;

        margin-top: 30px;

        color: #586173;

        font-size: 14px;

        line-height: 1.4;

        font-weight: 500;
    }



    /* ==================================================================
       SYSTEM MAP
       ================================================================== */

    .masterclass-page
    .mc-system-map {
        position: relative;

        grid-column: 2;
        grid-row: 1;

        width: 100%;
        height: 675px;

        max-width: 910px;

        margin:
            0 0
            0 auto;
    }



    /* ==================================================================
       REMOVE MOBILE ROW LAYOUT
       ================================================================== */

    .masterclass-page
    .mc-system-map__row {
        position: static;

        display: contents;
    }


    .masterclass-page
    .mc-system-map__row--top,
    .masterclass-page
    .mc-system-map__row--bottom {
        width: auto;
        max-width: none;

        margin: 0;
    }


    .masterclass-page
    .mc-system-map__arrow,
    .masterclass-page
    .mc-system-map__connector {
        display: none;
    }



    /* ==================================================================
       CENTRAL D2C SYSTEM CIRCLE
       ================================================================== */

    .masterclass-page
    .mc-system-map::before {
        content:
            "THE\A D2C\A BUSINESS\A SYSTEM";

        position: absolute;

        z-index: 1;

        top: 50%;
        left: 50%;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 286px;
        height: 286px;

        border:
            1px solid
            rgba(111, 43, 236, .25);

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                #ffffff 0%,
                #fbf9ff 68%,
                #f5f0ff 100%
            );

        color: #080a10;

        text-align: center;

        white-space: pre-line;

        font-size: 32px;
        line-height: .95;

        font-weight: 900;

        letter-spacing: -.035em;

        box-shadow:
            0 0 0 17px
            rgba(111, 43, 236, .025),
            0 0 0 19px
            rgba(111, 43, 236, .11),
            0 20px 60px
            rgba(62, 35, 111, .05);

        transform:
            translate(
                -50%,
                -50%
            );
    }


    /* purple SYSTEM word illusion / underline */

    .masterclass-page
    .mc-system-map::after {
        content: "";

        position: absolute;

        z-index: 2;

        top: calc(50% + 92px);
        left: 50%;

        width: 35px;
        height: 2px;

        border-radius: 999px;

        background: #7931ef;

        transform:
            translateX(-50%);
    }



    /* ==================================================================
       ALL STEP CARDS
       ================================================================== */

    .masterclass-page
    .mc-system-map__step {
        position: absolute;

        z-index: 5;

        display: grid;

        grid-template-columns:
            39px
            minmax(0, 1fr);

        grid-template-areas:
            "number title"
            "text text"
            "icon icon";

        align-content: start;

        width: 195px;
        height: 180px;

        min-width: 0;

        padding:
            18px 19px
            15px;

        border:
            1px solid
            #e5e4eb;

        border-radius: 12px;

        background:
            rgba(
                255,
                255,
                255,
                .96
            );

        box-shadow:
            0 13px 34px
            rgba(41, 31, 70, .07);

        text-align: left;
    }



    /* ==================================================================
       NUMBER
       ================================================================== */

    .masterclass-page
    .mc-system-map__step > small {
        grid-area: number;

        align-self: start;

        display: block;

        margin: 2px 0 0;

        color: #6928e9;

        font-size: 16px;
        line-height: 1;

        font-weight: 900;
    }



    /* ==================================================================
       TITLE
       ================================================================== */

    .masterclass-page
    .mc-system-map__step h3 {
        grid-area: title;

        align-self: start;

        margin: 0;

        color: #11131a;

        font-size: 17px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: -.025em;
    }



    /* ==================================================================
       DESCRIPTION
       ================================================================== */

    .masterclass-page
    .mc-system-map__step p {
        grid-area: text;

        max-width: none;

        margin:
            6px 0
            0;

        color: #687184;

        font-size: 10px;
        line-height: 1.25;
    }



    /* ==================================================================
       ICON VISUAL AREA
       ================================================================== */

    .masterclass-page
    .mc-system-map__icon {
        grid-area: icon;

        align-self: end;

        display: grid;

        place-items: center;

        width: 100%;
        height: 75px;

        margin:
            10px 0
            0;

        border-radius: 8px;

        background:
            linear-gradient(
                145deg,
                #faf9ff,
                #f2edff
            );

        color: #6626e9;
    }


    .masterclass-page
    .mc-system-map__icon svg {
        width: 43px;
        height: 43px;

        stroke-width: 1.7;
    }



    /* ==================================================================
       STEP POSITIONS
       ================================================================== */


    /* 01 MARKET — top */

    .masterclass-page
    .mc-system-map__step--1 {
        top: 0;
        left: 50%;

        transform:
            translateX(-50%);
    }



    /* 02 PRODUCT — upper right */

    .masterclass-page
    .mc-system-map__step--2 {
        top: 90px;
        right: 10px;
    }



    /* 03 OFFER — right middle */

    .masterclass-page
    .mc-system-map__step--3 {
        top: 310px;
        right: 0;
    }



    /* 04 FUNNEL — bottom right */

    .masterclass-page
    .mc-system-map__step--4 {
        right: 150px;
        bottom: 0;
    }



    /* 05 TRAFFIC — bottom left */

    .masterclass-page
    .mc-system-map__step--5 {
        bottom: 0;
        left: 140px;
    }



    /* 06 ECONOMICS — middle left */

    .masterclass-page
    .mc-system-map__step--6 {
        top: 325px;
        left: 0;
    }



    /* 07 SCALE — upper left */

    .masterclass-page
    .mc-system-map__step--7 {
        top: 100px;
        left: 20px;
    }



    /* ==================================================================
       CONNECTION LINES
       ================================================================== */

    .masterclass-page
    .mc-system-map__step::after {
        content: "";

        position: absolute;

        z-index: -1;

        width: 72px;
        height: 1.5px;

        background:
            linear-gradient(
                90deg,
                rgba(113, 45, 239, .25),
                #7130ef
            );

        transform-origin: left center;
    }



    /* 01 → 02 */

    .masterclass-page
    .mc-system-map__step--1::after {
        top: 56px;
        left: calc(100% + 3px);

        width: 105px;

        transform:
            rotate(27deg);
    }



    /* 02 → 03 */

    .masterclass-page
    .mc-system-map__step--2::after {
        top: calc(100% + 5px);
        left: 135px;

        width: 74px;

        transform:
            rotate(83deg);
    }



    /* 03 → 04 */

    .masterclass-page
    .mc-system-map__step--3::after {
        top: calc(100% + 4px);
        left: 85px;

        width: 100px;

        transform:
            rotate(122deg);
    }



    /* 04 → 05 */

    .masterclass-page
    .mc-system-map__step--4::after {
        top: 82px;
        right: calc(100% + 1px);
        left: auto;

        width: 108px;

        transform:
            rotate(180deg);
    }



    /* 05 → 06 */

    .masterclass-page
    .mc-system-map__step--5::after {
        top: 12px;
        left: 5px;

        width: 90px;

        transform:
            rotate(224deg);
    }



    /* 06 → 07 */

    .masterclass-page
    .mc-system-map__step--6::after {
        top: -3px;
        left: 70px;

        width: 88px;

        transform:
            rotate(266deg);
    }



    /* 07 → 01 */

    .masterclass-page
    .mc-system-map__step--7::after {
        top: 5px;
        left: calc(100% - 4px);

        width: 110px;

        transform:
            rotate(-32deg);
    }



    /* ==================================================================
       SMALL ARROW HEADS
       ================================================================== */

    .masterclass-page
    .mc-system-map__step::before {
        content: "";

        position: absolute;

        z-index: 1;

        width: 7px;
        height: 7px;

        border-top:
            2px solid
            #7130ef;

        border-right:
            2px solid
            #7130ef;
    }


    .masterclass-page
    .mc-system-map__step--1::before {
        top: 84px;
        right: -107px;

        transform:
            rotate(70deg);
    }


    .masterclass-page
    .mc-system-map__step--2::before {
        right: 46px;
        bottom: -82px;

        transform:
            rotate(135deg);
    }


    .masterclass-page
    .mc-system-map__step--3::before {
        right: 55px;
        bottom: -79px;

        transform:
            rotate(165deg);
    }


    .masterclass-page
    .mc-system-map__step--4::before {
        top: 77px;
        left: -112px;

        transform:
            rotate(-135deg);
    }


    .masterclass-page
    .mc-system-map__step--5::before {
        top: -62px;
        left: -30px;

        transform:
            rotate(-90deg);
    }


    .masterclass-page
    .mc-system-map__step--6::before {
        top: -89px;
        left: 61px;

        transform:
            rotate(-45deg);
    }


    .masterclass-page
    .mc-system-map__step--7::before {
        top: -47px;
        right: -93px;

        transform:
            rotate(15deg);
    }



    /* ==================================================================
       BOTTOM MESSAGE
       ================================================================== */

    .masterclass-page
    .mc-system-complete {
        position: relative;

        grid-column:
            1 / -1;

        grid-row: 2;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 1040px;

        min-height: 0;

        margin:
            52px auto
            0;

        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;

        box-shadow: none;
    }



    /* lines */

    .masterclass-page
    .mc-system-complete::before,
    .masterclass-page
    .mc-system-complete::after {
        content: "";

        flex:
            1 1 auto;

        height: 1px;

        background: #aeb2bd;
    }


    .masterclass-page
    .mc-system-complete::before {
        margin-right: 32px;
    }


    .masterclass-page
    .mc-system-complete::after {
        position: static;

        width: auto;
        height: 1px;

        margin-left: 32px;

        border-radius: 0;

        background: #aeb2bd;

        transform: none;
    }



    /* remove mobile icon */

    .masterclass-page
    .mc-system-complete__icon {
        display: none;
    }



    /* text wrapper */

    .masterclass-page
    .mc-system-complete > div:last-child {
        display: flex;

        align-items: center;

        gap: 7px;

        padding: 0;

        border: 0;
    }


    .masterclass-page
    .mc-system-complete strong,
    .masterclass-page
    .mc-system-complete span {
        display: inline;

        margin: 0;

        font-size: 22px;
        line-height: 1;

        font-weight: 700;

        letter-spacing: -.025em;

        text-transform: none;
    }


    .masterclass-page
    .mc-system-complete strong {
        color: #11131a;
    }


    .masterclass-page
    .mc-system-complete span {
        color: #6e28ed;

        font-weight: 850;
    }

}



/* ======================================================================
   COMPACT DESKTOP
   ====================================================================== */

@media
    (min-width: 1024px)
    and
    (max-width: 1199px) {


    .masterclass-page
    .mc-solution > .home-shell {
        grid-template-columns:
            300px
            minmax(0, 1fr);

        column-gap: 25px;

        width:
            calc(100% - 48px);
    }


    .masterclass-page
    .mc-solution
    .mc-heading h2 {
        font-size: 55px;
    }


    .masterclass-page
    .mc-solution__intro {
        font-size:
            14px !important;
    }


    .masterclass-page
    .mc-system-map {
        height: 600px;

        transform:
            scale(.89);

        transform-origin:
            center center;
    }


    .masterclass-page
    .mc-system-map__step {
        width: 180px;
        height: 170px;
    }

}
/* ======================================================================
   MASTERCLASS
   05 — A DIFFERENT APPROACH
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-shift {
        position: relative;
        overflow: hidden;

        width: 100%;

        padding:
            70px 0
            78px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(112, 48, 239, .055),
                transparent 33%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(112, 48, 239, .035),
                transparent 32%
            ),
            #fcfcfe;

        color: #090b12;
    }


    .masterclass-page
    .mc-shift > .home-shell {
        width: min(
            1180px,
            calc(100% - 96px)
        );

        max-width: none;

        margin-left: auto;
        margin-right: auto;
    }



    /* ==================================================================
       EYEBROW
       Existing HTML:
       strong = 05
       span   = line
       small  = eyebrow

       Desktop design only shows A DIFFERENT APPROACH.
       Mobile remains unchanged.
       ================================================================== */

    .masterclass-page
    .mc-shift
    .mc-section-label {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;

        margin:
            0 0
            22px;

        text-align: center;
    }


    .masterclass-page
    .mc-shift
    .mc-section-label strong,

    .masterclass-page
    .mc-shift
    .mc-section-label > span {
        display: none;
    }


    .masterclass-page
    .mc-shift
    .mc-section-label small {
        color: #6d7189;

        font-size: 14px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .34em;

        text-transform: uppercase;
    }



    /* ==================================================================
       HEADING
       ================================================================== */

    .masterclass-page
    .mc-shift
    .mc-heading {
        width: 100%;
        max-width: 950px;

        margin:
            0 auto
            31px;

        text-align: center;
    }


    .masterclass-page
    .mc-shift
    .mc-heading h2 {
        max-width: 930px;

        margin:
            0 auto;

        color: #070910;

        font-size:
            clamp(
                58px,
                4.6vw,
                74px
            );

        line-height: .90;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .masterclass-page
    .mc-shift
    .mc-heading h2 span {
        display: block;

        margin-top: 5px;

        color: #6f27ee;
    }


    .masterclass-page
    .mc-shift
    .mc-heading > p {
        max-width: 820px;

        margin:
            22px auto
            0;

        color: #626b7e;

        font-size: 18px;
        line-height: 1.35;

        font-weight: 400;
    }



    /* ==================================================================
       FOUR TRANSFORMATION ROWS
       ================================================================== */

    .masterclass-page
    .mc-shift-list {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        width: 100%;
        max-width: 1120px;

        margin:
            0 auto;
    }



    /* ==================================================================
       ONE ROW
       LEFT CARD → ARROW → RIGHT CARD
       ================================================================== */

    .masterclass-page
    .mc-shift-row {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            78px
            minmax(0, 1fr);

        align-items: center;

        gap: 18px;

        width: 100%;
    }



    /* ==================================================================
       CARDS
       ================================================================== */

    .masterclass-page
    .mc-shift-row article {
        display: grid;

        grid-template-columns:
            76px
            minmax(0, 1fr);

        align-items: center;

        gap: 20px;

        min-width: 0;
        min-height: 104px;

        padding:
            16px 24px;

        border:
            1px solid
            #e2e3e9;

        border-radius: 10px;

        background:
            linear-gradient(
                105deg,
                #fafafe,
                #f9f9fd
            );

        box-shadow:
            0 8px 24px
            rgba(27, 17, 54, .018);
    }


    /* positive / right card */

    .masterclass-page
    .mc-shift-row article.is-positive {
        border-color:
            #e4dcf6;

        background:
            linear-gradient(
                105deg,
                #fcfaff,
                #faf7ff
            );
    }



    /* ==================================================================
       ICON
       ================================================================== */

    .masterclass-page
    .mc-shift-row article > svg {
        width: 65px;
        height: 65px;

        padding: 16px;

        border-radius: 50%;

        background:
            #f1f1f7;

        color:
            #343947;

        stroke-width:
            1.65;
    }


    .masterclass-page
    .mc-shift-row article.is-positive > svg {
        background:
            #f0e9ff;

        color:
            #7029ef;
    }



    /* ==================================================================
       CARD COPY
       ================================================================== */

    .masterclass-page
    .mc-shift-row article > div {
        min-width: 0;
    }


    .masterclass-page
    .mc-shift-row h3 {
        margin: 0;

        color:
            #0a0c12;

        font-size: 21px;
        line-height: 1.05;

        font-weight: 900;

        letter-spacing: -.035em;
    }


    .masterclass-page
    .mc-shift-row article.is-positive h3 {
        color:
            #6928e8;
    }


    .masterclass-page
    .mc-shift-row p {
        margin:
            7px 0
            0;

        color:
            #626b7e;

        font-size: 14px;
        line-height: 1.32;

        font-weight: 400;
    }



    /* ==================================================================
       CENTER ARROW
       ================================================================== */

    .masterclass-page
    .mc-shift-arrow {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;

        color:
            #6d29ed;

        font-size: 42px;
        line-height: 1;

        font-weight: 300;
    }



    /* ==================================================================
       QUOTE
       Reference has no card / no brain icon on desktop.
       Keep the icon/card on mobile only.
       ================================================================== */

    .masterclass-page
    .mc-shift-quote {
        display: block;

        width: 100%;
        max-width: 920px;

        margin:
            27px auto
            0;

        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;

        box-shadow: none;

        text-align: center;
    }


    .masterclass-page
    .mc-shift-quote > svg {
        display: none;
    }


    .masterclass-page
    .mc-shift-quote p {
        margin: 0;

        color:
            #0b0d13;

        font-size: 25px;
        line-height: 1.15;

        font-weight: 900;

        letter-spacing: -.03em;
    }


    .masterclass-page
    .mc-shift-quote strong {
        display: block;

        margin-top: 3px;

        color:
            #6d29ed;

        font-size: 27px;
        line-height: 1.12;

        font-weight: 900;

        letter-spacing: -.035em;
    }



    /* ==================================================================
       "THAT'S WHERE EXPERIENCE COMES IN."
       ================================================================== */

    .masterclass-page
    .mc-shift
    .mc-next-label {
        position: relative;

        display: flex;

        flex-direction: column;

        align-items: center;

        margin:
            13px auto
            0;

        color:
            #656e81;

        text-align: center;

        font-size: 16px;
        line-height: 1.2;

        font-weight: 400;

        letter-spacing: 0;

        text-transform: none;
    }


    .masterclass-page
    .mc-shift
    .mc-next-label::after {
        content: "↓";

        display: block;

        margin-top: 14px;

        color:
            #702bef;

        font-size: 45px;
        line-height: 1;

        font-weight: 300;
    }

}



/* ======================================================================
   SMALL DESKTOP
   1024 — 1199
   ====================================================================== */

@media
    (min-width: 1024px)
    and
    (max-width: 1199px) {


    .masterclass-page
    .mc-shift > .home-shell {
        width:
            calc(100% - 48px);
    }


    .masterclass-page
    .mc-shift
    .mc-heading h2 {
        font-size: 56px;
    }


    .masterclass-page
    .mc-shift-row {
        grid-template-columns:
            minmax(0, 1fr)
            55px
            minmax(0, 1fr);

        gap: 11px;
    }


    .masterclass-page
    .mc-shift-row article {
        grid-template-columns:
            58px
            minmax(0, 1fr);

        gap: 13px;

        min-height: 96px;

        padding:
            14px 17px;
    }


    .masterclass-page
    .mc-shift-row article > svg {
        width: 54px;
        height: 54px;

        padding: 13px;
    }


    .masterclass-page
    .mc-shift-row h3 {
        font-size: 18px;
    }


    .masterclass-page
    .mc-shift-row p {
        font-size: 12px;
    }


    .masterclass-page
    .mc-shift-arrow {
        font-size: 32px;
    }


    .masterclass-page
    .mc-shift-quote p {
        font-size: 22px;
    }


    .masterclass-page
    .mc-shift-quote strong {
        font-size: 24px;
    }

}
/* ======================================================================
   MASTERCLASS
   06A — EXPERIENCE BUILDS PATTERN RECOGNITION
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-experience {
        position: relative;
        overflow: hidden;

        width: 100%;

        padding:
            58px 0
            72px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(115, 48, 239, .04),
                transparent 31%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(115, 48, 239, .025),
                transparent 32%
            ),
            #fdfdff;

        color: #080a11;
    }


    .masterclass-page
    .mc-experience > .home-shell {
        width: min(
            1320px,
            calc(100% - 96px)
        );

        max-width: none;

        margin:
            0 auto;
    }



    /* ==================================================================
       SHARED HEADING
       ================================================================== */

    .masterclass-page
    .mc-experience
    .mc-heading {
        width: 100%;
        max-width: 950px;

        margin:
            0 auto
            27px;

        text-align: center;
    }



    /* SECTION 06A */

    .masterclass-page
    .mc-experience
    .mc-section-pill {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-height: 29px;

        margin:
            0 0
            21px;

        padding:
            6px 22px;

        border: 0;
        border-radius: 999px;

        background: #f0e9ff;

        color: #6f2ceb;

        font-size: 10px;
        line-height: 1;

        font-weight: 850;

        letter-spacing: .20em;

        text-transform: uppercase;
    }



    /* THE MECHANISM */

    .masterclass-page
    .mc-experience
    .mc-eyebrow {
        margin:
            0 0
            16px;

        color: #636c80;

        font-size: 12px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .38em;

        text-transform: uppercase;
    }



    /* title */

    .masterclass-page
    .mc-experience
    .mc-heading h2 {
        max-width: 950px;

        margin:
            0 auto;

        color: #070910;

        font-size:
            clamp(
                58px,
                4.4vw,
                74px
            );

        line-height: .89;

        font-weight: 900;

        letter-spacing: -.057em;
    }


    .masterclass-page
    .mc-experience
    .mc-heading h2 span {
        display: block;

        margin-top: 5px;

        color: #6526eb;
    }



    /* intro */

    .masterclass-page
    .mc-experience__intro {
        max-width: 850px;

        margin:
            20px auto
            0 !important;

        color:
            #616b7f !important;

        font-size:
            18px !important;

        line-height:
            1.35 !important;
    }



    /* ==================================================================
       HIDE MOBILE BODY ON DESKTOP
       ================================================================== */

    .masterclass-page
    .mc-experience > .home-shell > .mc-industries,

    .masterclass-page
    .mc-experience > .home-shell > .mc-experience-flow,

    .masterclass-page
    .mc-experience > .home-shell > .mc-experience-bottom {
        display: none;
    }



    /* ==================================================================
       DESKTOP 3-PANEL SYSTEM
       ================================================================== */

    .masterclass-page
    .mc-experience-desktop {
        display: grid;

        grid-template-columns:
            minmax(0, 1.26fr)
            34px
            minmax(0, .96fr)
            34px
            minmax(0, .98fr);

        align-items: stretch;

        gap: 12px;

        width: 100%;

        margin:
            23px auto
            0;
    }



    /* ==================================================================
       PANEL
       ================================================================== */

    .masterclass-page
    .mc-experience-desktop__panel {
        min-width: 0;

        padding:
            22px 21px
            19px;

        border:
            1px solid
            #e2e3e9;

        border-radius: 11px;

        background:
            rgba(
                255,
                255,
                255,
                .9
            );

        box-shadow:
            0 10px 30px
            rgba(26, 16, 54, .025);
    }



    /* ==================================================================
       PANEL HEADING
       ================================================================== */

    .masterclass-page
    .mc-experience-desktop__panel-copy h3 {
        margin: 0;

        color: #090b11;

        font-size: 27px;
        line-height: .98;

        font-weight: 900;

        letter-spacing: -.045em;
    }


    .masterclass-page
    .mc-experience-desktop__panel-copy > p {
        margin:
            12px 0
            0;

        color: #626c80;

        font-size: 14px;
        line-height: 1.38;
    }



    /* ==================================================================
       BIG BETWEEN-PANEL ARROWS
       ================================================================== */

    .masterclass-page
    .mc-experience-desktop__arrow {
        display: flex;

        align-items: center;
        justify-content: center;

        color: #6f2bea;

        font-size: 42px;
        line-height: 1;

        font-weight: 300;
    }



    /* ==================================================================
       LEFT PANEL — INDUSTRIES
       ================================================================== */

    .masterclass-page
    .mc-experience-desktop__industries {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 11px;

        margin-top: 20px;
    }


    .masterclass-page
    .mc-experience-desktop__industry {
        min-width: 0;
    }



    /* image */

    .masterclass-page
    .mc-experience-desktop__industry-image {
        display: grid;

        place-items: center;

        width: 100%;
        height: 119px;

        overflow: hidden;

        border-radius: 8px;

        background:
            #f0f0f3;

        color:
            #722fed;
    }


    .masterclass-page
    .mc-experience-desktop__industry-image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }


    .masterclass-page
    .mc-experience-desktop__industry-image span {
        display: grid;

        place-items: center;

        width: 60px;
        height: 60px;

        border-radius: 50%;

        background: #f0e9ff;
    }


    .masterclass-page
    .mc-experience-desktop__industry-image svg {
        width: 34px;
        height: 34px;
    }



    /* industry title */

    .masterclass-page
    .mc-experience-desktop__industry h4 {
        margin:
            12px 0
            0;

        color: #11131a;

        font-size: 11px;
        line-height: 1.05;

        font-weight: 900;

        text-transform: uppercase;
    }



    /* industry description */

    .masterclass-page
    .mc-experience-desktop__industry > p {
        margin:
            9px 0
            0;

        color: #657083;

        font-size: 10px;
        line-height: 1.35;
    }



    /* ==================================================================
       MIDDLE PANEL — PATTERNS
       ================================================================== */

    .masterclass-page
    .mc-pattern-list {
        display: grid;

        gap: 7px;

        margin-top: 18px;
    }


    .masterclass-page
    .mc-pattern-row {
        display: grid;

        grid-template-columns:
            51px
            minmax(0, 1fr);

        align-items: center;

        min-height: 43px;

        overflow: hidden;

        border-radius: 8px;

        background:
            linear-gradient(
                90deg,
                #f8f6fd,
                #f5f1fd
            );
    }


    .masterclass-page
    .mc-pattern-row > span {
        display: grid;

        place-items: center;

        height: 100%;

        color: #343b49;
    }


    .masterclass-page
    .mc-pattern-row svg {
        width: 24px;
        height: 24px;

        stroke-width: 1.7;
    }


    .masterclass-page
    .mc-pattern-row strong {
        color: #626c80;

        font-size: 12px;
        line-height: 1.1;

        font-weight: 500;
    }



    /* ==================================================================
       RIGHT PANEL — JUDGMENT
       ================================================================== */

    .masterclass-page
    .mc-judgment-list {
        display: grid;

        gap: 9px;

        margin-top: 20px;
    }


    .masterclass-page
    .mc-judgment-row {
        display: grid;

        grid-template-columns:
            66px
            35px
            minmax(0, 1fr);

        align-items: center;

        min-height: 69px;

        padding:
            5px 13px
            5px 8px;

        border:
            1px solid
            #ecebf1;

        border-radius: 8px;

        background: #ffffff;
    }



    /* purple icon circle */

    .masterclass-page
    .mc-judgment-row > span {
        display: grid;

        place-items: center;

        width: 53px;
        height: 53px;

        border-radius: 50%;

        background:
            #f2ecff;

        color:
            #313846;
    }


    .masterclass-page
    .mc-judgment-row svg {
        width: 29px;
        height: 29px;

        stroke-width: 1.7;
    }



    /* arrow */

    .masterclass-page
    .mc-judgment-row > b {
        color: #7130ec;

        font-size: 26px;
        line-height: 1;

        font-weight: 300;
    }



    /* result */

    .masterclass-page
    .mc-judgment-row > strong {
        color: #11131a;

        font-size: 14px;
        line-height: 1.12;

        font-weight: 750;
    }



    /* ==================================================================
       BOTTOM STATEMENT
       ================================================================== */

    .masterclass-page
    .mc-experience-desktop-bottom {
        display: grid;

        grid-template-columns:
            minmax(80px, 1fr)
            auto
            minmax(80px, 1fr);

        align-items: center;

        gap: 31px;

        width: 100%;
        max-width: 1120px;

        margin:
            59px auto
            0;
    }


    .masterclass-page
    .mc-experience-desktop-bottom > span {
        display: block;

        width: 100%;
        height: 1px;

        background:
            #b4b7c1;
    }


    .masterclass-page
    .mc-experience-desktop-bottom p {
        margin: 0;

        color: #0a0c12;

        text-align: center;

        white-space: nowrap;

        font-size: 27px;
        line-height: 1;

        font-weight: 500;

        letter-spacing: -.035em;
    }


    .masterclass-page
    .mc-experience-desktop-bottom strong {
        color: #6928ec;

        font-weight: 900;
    }

}



/* ======================================================================
   SMALL DESKTOP
   1024 — 1199
   ====================================================================== */

@media
    (min-width: 1024px)
    and
    (max-width: 1199px) {


    .masterclass-page
    .mc-experience > .home-shell {
        width:
            calc(100% - 48px);
    }


    .masterclass-page
    .mc-experience
    .mc-heading h2 {
        font-size: 55px;
    }


    .masterclass-page
    .mc-experience-desktop {
        grid-template-columns:
            minmax(0, 1.15fr)
            24px
            minmax(0, 1fr)
            24px
            minmax(0, 1fr);

        gap: 8px;
    }


    .masterclass-page
    .mc-experience-desktop__panel {
        padding:
            17px 15px;
    }


    .masterclass-page
    .mc-experience-desktop__panel-copy h3 {
        font-size: 22px;
    }


    .masterclass-page
    .mc-experience-desktop__panel-copy > p {
        font-size: 11px;
    }


    .masterclass-page
    .mc-experience-desktop__industry-image {
        height: 89px;
    }


    .masterclass-page
    .mc-experience-desktop__industry h4 {
        font-size: 8px;
    }


    .masterclass-page
    .mc-experience-desktop__industry > p {
        font-size: 8px;
    }


    .masterclass-page
    .mc-pattern-row {
        grid-template-columns:
            42px
            minmax(0, 1fr);
    }


    .masterclass-page
    .mc-pattern-row strong {
        font-size: 10px;
    }


    .masterclass-page
    .mc-judgment-row {
        grid-template-columns:
            50px
            25px
            minmax(0, 1fr);
    }


    .masterclass-page
    .mc-judgment-row > span {
        width: 42px;
        height: 42px;
    }


    .masterclass-page
    .mc-judgment-row > strong {
        font-size: 11px;
    }


    .masterclass-page
    .mc-experience-desktop-bottom p {
        font-size: 22px;
    }

}
/* ======================================================================
   MASTERCLASS
   07 — ABOUT ROMAN
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-about {
        position: relative;
        overflow: hidden;

        width: 100%;

        padding:
            0 0
            28px;

        background:
            radial-gradient(
                circle at 95% 100%,
                rgba(88, 31, 220, .22),
                transparent 29%
            ),
            linear-gradient(
                105deg,
                #070d16 0%,
                #08101a 48%,
                #060b13 100%
            );

        color: #ffffff;
    }


    .masterclass-page
    .mc-about > .home-shell {
        display: grid;

        grid-template-columns:
            minmax(420px, .40fr)
            minmax(0, .60fr);

        grid-template-rows:
            auto
            auto
            auto
            auto
            auto;

        column-gap: 42px;

        width: min(
            1440px,
            calc(100% - 48px)
        );

        max-width: none;

        margin:
            0 auto;
    }



    /* ==================================================================
       IMPORTANT:
       Remove the mobile TOP wrapper as a layout container.
       Its children become part of the main desktop grid.
       ================================================================== */

    .masterclass-page
    .mc-about__top {
        display: contents;
    }



    /* ==================================================================
       SECTION LABEL
       07 — ABOUT ROMAN
       ================================================================== */

    .masterclass-page
    .mc-about
    .mc-section-label {
        grid-column: 2;
        grid-row: 1;

        display: flex;

        align-items: center;

        gap: 15px;

        width: 100%;

        margin:
            47px 0
            18px;
    }


    .masterclass-page
    .mc-about
    .mc-section-label strong {
        color: #a34dff;

        font-size: 14px;
        line-height: 1;

        font-weight: 900;

        letter-spacing: .08em;
    }


    .masterclass-page
    .mc-about
    .mc-section-label > span {
        display: block;

        width: 24px;
        height: 1px;

        background:
            #9299aa;
    }


    .masterclass-page
    .mc-about
    .mc-section-label small {
        color: #aeb5c2;

        font-size: 12px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .32em;

        text-transform: uppercase;
    }



    /* ==================================================================
       ROMAN IMAGE — LEFT
       ================================================================== */

    .masterclass-page
    .mc-about__visual {
        position: relative;

        grid-column: 1;
        grid-row:
            1 / 4;

        align-self: stretch;

        width: 100%;
        height: 650px;

        min-width: 0;

        overflow: hidden;
    }


    .masterclass-page
    .mc-about__image {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;

        border-radius: 0;
    }


    .masterclass-page
    picture.mc-about__picture {
        display: block;

        width: 100%;
        height: 100%;
    }


    .masterclass-page
    .mc-about__picture img,

    .masterclass-page
    img.mc-about__picture {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position:
            center center;
    }



    /* soften image into page at right edge */

    .masterclass-page
    .mc-about__visual::after {
        content: "";

        position: absolute;

        z-index: 2;

        top: 0;
        right: -1px;

        width: 80px;
        height: 100%;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                rgba(7, 13, 22, 0),
                #07101a
            );
    }



    /* old mobile side statement is not in desktop reference */

    .masterclass-page
    .mc-about__side {
        display: none;
    }



    /* ==================================================================
       COPY — RIGHT
       ================================================================== */

    .masterclass-page
    .mc-about__copy {
        position: relative;

        z-index: 3;

        grid-column: 2;
        grid-row: 2;

        align-self: start;

        width: 100%;

        padding: 0;
    }



    /* title */

    .masterclass-page
    .mc-about__copy h2 {
        max-width: 830px;

        margin: 0;

        color: #ffffff;

        font-size:
            clamp(
                55px,
                4.25vw,
                70px
            );

        line-height: .91;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .masterclass-page
    .mc-about__copy h2 span {
        display: block;

        margin-top: 6px;

        color: #7c30f4;
    }



    /* intro */

    .masterclass-page
    .mc-about__copy > p {
        max-width: 815px;

        margin:
            24px 0
            0;

        color: #bec4d0;

        font-size: 19px;
        line-height: 1.45;

        font-weight: 400;
    }



    /* ==================================================================
       FOUR CARDS
       ================================================================== */

    .masterclass-page
    .mc-about-grid {
        grid-column: 2;
        grid-row: 3;

        display: grid;

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        align-items: stretch;

        gap: 13px;

        width: 100%;

        margin:
            20px 0
            28px;
    }



    /* card */

    .masterclass-page
    .mc-about-grid article {
        position: relative;

        display: flex;

        min-width: 0;
        min-height: 270px;

        flex-direction: column;

        padding:
            20px 18px
            22px;

        border:
            1px solid
            rgba(122, 137, 166, .24);

        border-radius: 12px;

        background:
            linear-gradient(
                145deg,
                rgba(11, 18, 29, .96),
                rgba(8, 15, 25, .96)
            );

        box-shadow:
            0 15px 35px
            rgba(0, 0, 0, .08);
    }



    /* ==================================================================
       CARD ICON
       ================================================================== */

    .masterclass-page
    .mc-about-grid article > span {
        display: grid;

        place-items: center;

        width: 58px;
        height: 58px;

        margin-bottom: 17px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(110, 42, 240, .34),
                rgba(80, 31, 171, .18)
            );

        color: #9148ff;
    }


    .masterclass-page
    .mc-about-grid article > span svg {
        width: 34px;
        height: 34px;

        stroke-width: 1.9;
    }



    /* ==================================================================
       CARD TITLE
       ================================================================== */

    .masterclass-page
    .mc-about-grid h3 {
        margin: 0;

        color: #ffffff;

        font-size: 17px;
        line-height: 1.17;

        font-weight: 850;

        letter-spacing: -.025em;
    }



    /* ==================================================================
       CARD TEXT
       ================================================================== */

    .masterclass-page
    .mc-about-grid p {
        margin:
            17px 0
            0;

        color: #adb4c2;

        font-size: 14px;
        line-height: 1.35;

        font-weight: 400;
    }



    /* ==================================================================
       QUOTE BAND
       ================================================================== */

    .masterclass-page
    .mc-about-quote {
        position: relative;

        grid-column:
            1 / -1;

        grid-row: 4;

        display: block;

        width: 100%;

        min-height: 180px;

        margin:
            0 auto;

        padding:
            37px 40px
            62px;

        overflow: hidden;

        border:
            1px solid
            rgba(121, 58, 244, .34);

        border-radius: 12px;

        background:
            radial-gradient(
                circle at 100% 100%,
                rgba(90, 35, 230, .75),
                transparent 34%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(90, 35, 230, .45),
                transparent 27%
            ),
            linear-gradient(
                100deg,
                #16112e,
                #101126 56%,
                #17113d
            );

        box-shadow: none;

        text-align: center;
    }



    /* remove mobile quote mark */

    .masterclass-page
    .mc-about-quote::before {
        content: none;
    }


    .masterclass-page
    .mc-about-quote > div {
        padding: 0;
    }



    /* first line */

    .masterclass-page
    .mc-about-quote p {
        margin: 0;

        color: #ffffff;

        font-size: 29px;
        line-height: 1.1;

        font-weight: 900;

        letter-spacing: -.035em;
    }



    /* purple line */

    .masterclass-page
    .mc-about-quote strong {
        display: block;

        max-width: 980px;

        margin:
            9px auto
            0;

        color: #8337fb;

        font-size: 27px;
        line-height: 1.12;

        font-weight: 900;

        letter-spacing: -.035em;
    }



    /* attribution does not appear in new desktop reference */

    .masterclass-page
    .mc-about-quote footer {
        display: none;
    }



    /* ==================================================================
       ARROW UNDER QUOTE TEXT
       Existing .mc-about-next is reused.
       ================================================================== */

    .masterclass-page
    .mc-about-next {
        position: relative;

        z-index: 10;

        grid-column:
            1 / -1;

        grid-row: 5;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;

        height: 0;

        margin:
            -53px 0
            0;
    }


    .masterclass-page
    .mc-about-next > span {
        display: block;

        color: #8c39ff;

        font-size: 45px;
        line-height: 1;

        font-weight: 300;
    }


    /* screenshot only has arrow */

    .masterclass-page
    .mc-about-next small {
        display: none;
    }

}



/* ======================================================================
   COMPACT DESKTOP
   1024 — 1199
   ====================================================================== */

@media
    (min-width: 1024px)
    and
    (max-width: 1199px) {


    .masterclass-page
    .mc-about > .home-shell {
        grid-template-columns:
            minmax(330px, .38fr)
            minmax(0, .62fr);

        column-gap: 28px;

        width:
            calc(100% - 48px);
    }


    .masterclass-page
    .mc-about__visual {
        height: 590px;
    }


    .masterclass-page
    .mc-about
    .mc-section-label {
        margin-top: 37px;
    }


    .masterclass-page
    .mc-about__copy h2 {
        font-size: 52px;
    }


    .masterclass-page
    .mc-about__copy > p {
        font-size: 15px;
    }


    .masterclass-page
    .mc-about-grid {
        gap: 8px;
    }


    .masterclass-page
    .mc-about-grid article {
        min-height: 235px;

        padding:
            16px 13px;
    }


    .masterclass-page
    .mc-about-grid article > span {
        width: 49px;
        height: 49px;

        margin-bottom: 13px;
    }


    .masterclass-page
    .mc-about-grid article > span svg {
        width: 28px;
        height: 28px;
    }


    .masterclass-page
    .mc-about-grid h3 {
        font-size: 14px;
    }


    .masterclass-page
    .mc-about-grid p {
        margin-top: 12px;

        font-size: 11px;
    }


    .masterclass-page
    .mc-about-quote {
        min-height: 165px;

        padding:
            33px 30px
            58px;
    }


    .masterclass-page
    .mc-about-quote p {
        font-size: 24px;
    }


    .masterclass-page
    .mc-about-quote strong {
        font-size: 23px;
    }

}
/* ======================================================================
   MASTERCLASS
   08 — FAQ
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-faq {
        position: relative;
        overflow: hidden;

        width: 100%;

        padding:
            64px 0
            88px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(111, 45, 239, .045),
                transparent 30%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(111, 45, 239, .03),
                transparent 30%
            ),
            #fdfdff;

        color: #090b12;
    }


    .masterclass-page
    .mc-faq > .home-shell {
        width: min(
            1080px,
            calc(100% - 96px)
        );

        max-width: none;

        margin:
            0 auto;
    }



    /* ==================================================================
       HEADING
       ================================================================== */

    .masterclass-page
    .mc-faq
    .mc-heading {
        width: 100%;
        max-width: 850px;

        margin:
            0 auto
            35px;

        text-align: center;
    }



    /* desktop label = 08 — FAQ */

    .masterclass-page
    .mc-faq
    .mc-eyebrow {
        margin:
            0 0
            18px;

        color: transparent;

        font-size: 0;

        line-height: 1;
    }


    .masterclass-page
    .mc-faq
    .mc-eyebrow::after {
        content: "08 — FAQ";

        color: #5f6980;

        font-size: 13px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .32em;

        text-transform: uppercase;
    }



    /* ==================================================================
       TITLE
       ================================================================== */

    .masterclass-page
    .mc-faq
    .mc-heading h2 {
        margin: 0;

        color: #070910;

        font-size:
            clamp(
                56px,
                4.2vw,
                72px
            );

        line-height: .89;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .masterclass-page
    .mc-faq
    .mc-heading h2 span {
        display: block;

        margin-top: 5px;

        color: #6626ec;
    }



    /* intro */

    .masterclass-page
    .mc-faq
    .mc-heading > p {
        margin:
            20px auto
            0;

        color: #687185;

        font-size: 18px;
        line-height: 1.35;
    }



    /* ==================================================================
       FAQ LIST
       ================================================================== */

    .masterclass-page
    .mc-faq-list {
        counter-reset: faq-counter;

        display: grid;

        grid-template-columns: 1fr;

        gap: 13px;

        width: 100%;
    }



    /* ==================================================================
       FAQ ITEM
       ================================================================== */

    .masterclass-page
    .mc-faq-item {
        counter-increment: faq-counter;

        width: 100%;

        margin: 0;

        overflow: hidden;

        border:
            1px solid
            #e0e2e9;

        border-radius: 11px;

        background:
            rgba(
                255,
                255,
                255,
                .90
            );

        box-shadow:
            0 7px 24px
            rgba(31, 21, 58, .018);
    }



    /* ==================================================================
       SUMMARY
       ================================================================== */

    .masterclass-page
    .mc-faq-item summary {
        position: relative;

        display: grid;

        grid-template-columns:
            74px
            1px
            minmax(0, 1fr)
            52px;

        align-items: center;

        column-gap: 20px;

        width: 100%;

        min-height: 105px;

        padding:
            15px 23px;

        cursor: pointer;

        list-style: none;

        color: #090b12;
    }


    .masterclass-page
    .mc-faq-item summary::-webkit-details-marker {
        display: none;
    }



    /* ==================================================================
       NUMBER
       ================================================================== */

    .masterclass-page
    .mc-faq-item summary::before {
        content:
            counter(
                faq-counter,
                decimal-leading-zero
            );

        grid-column: 1;

        justify-self: center;

        color: #6c29ec;

        font-size: 20px;
        line-height: 1;

        font-weight: 900;
    }



    /* vertical divider */

    .masterclass-page
    .mc-faq-item summary::after {
        content: "";

        grid-column: 2;

        justify-self: center;

        width: 1px;
        height: 60px;

        background:
            #e0e2e9;
    }



    /* ==================================================================
       HIDE OLD MOBILE ICON
       ================================================================== */

    .masterclass-page
    .mc-faq-item__icon {
        display: none;
    }



    /* ==================================================================
       QUESTION
       ================================================================== */

    .masterclass-page
    .mc-faq-item summary > strong {
        grid-column: 3;

        grid-row: 1;

        align-self: center;

        margin: 0;

        color: #090b12;

        font-size: 20px;
        line-height: 1.16;

        font-weight: 900;

        letter-spacing: -.025em;
    }



    /* ==================================================================
       ROUND ARROW BUTTON
       ================================================================== */

    .masterclass-page
    .mc-faq-item__toggle {
        grid-column: 4;

        grid-row: 1;

        display: grid;

        place-items: center;

        width: 45px;
        height: 45px;

        justify-self: end;

        border-radius: 50%;

        background:
            #f2edff;

        color: transparent;

        font-size: 0;

        transition:
            transform .2s ease,
            background .2s ease;
    }


    .masterclass-page
    .mc-faq-item__toggle::after {
        content: "";

        width: 10px;
        height: 10px;

        border-right:
            3px solid
            #6324e9;

        border-bottom:
            3px solid
            #6324e9;

        transform:
            translateY(-2px)
            rotate(45deg);

        transition:
            transform .2s ease;
    }



    /* open state */

    .masterclass-page
    .mc-faq-item[open]
    .mc-faq-item__toggle::after {
        transform:
            translateY(2px)
            rotate(225deg);
    }



    /* ==================================================================
       ANSWER
       Native DETAILS keeps this hidden until opened.
       ================================================================== */

    .masterclass-page
    .mc-faq-item__answer {
        padding:
            0 95px
            23px
            138px;
    }


    .masterclass-page
    .mc-faq-item__answer p {
        max-width: 820px;

        margin: 0;

        color: #657084;

        font-size: 15px;
        line-height: 1.45;

        font-weight: 400;
    }



    /* opened item */

    .masterclass-page
    .mc-faq-item[open] summary {
        min-height: 82px;

        padding-bottom: 8px;
    }



    /* ==================================================================
       OPTIONAL:
       Show a short answer preview like design only while opened.
       ================================================================== */

    .masterclass-page
    .mc-faq-item[open] {
        border-color:
            #dcd8e8;

        background: #ffffff;
    }



    /* ==================================================================
       HELP CARD
       Not present in desktop reference.
       Keep it on mobile only.
       ================================================================== */

    .masterclass-page
    .mc-faq
    .mc-help-card {
        display: none;
    }

}



/* ======================================================================
   SMALL DESKTOP
   1024 — 1199
   ====================================================================== */

@media
    (min-width: 1024px)
    and
    (max-width: 1199px) {


    .masterclass-page
    .mc-faq > .home-shell {
        width:
            calc(100% - 48px);
    }


    .masterclass-page
    .mc-faq
    .mc-heading h2 {
        font-size: 56px;
    }


    .masterclass-page
    .mc-faq-item summary {
        grid-template-columns:
            62px
            1px
            minmax(0, 1fr)
            48px;

        column-gap: 16px;

        min-height: 96px;

        padding:
            14px 20px;
    }


    .masterclass-page
    .mc-faq-item summary > strong {
        font-size: 18px;
    }


    .masterclass-page
    .mc-faq-item__toggle {
        width: 42px;
        height: 42px;
    }


    .masterclass-page
    .mc-faq-item__answer {
        padding:
            0 80px
            20px
            120px;
    }

}
/* ======================================================================
   MASTERCLASS
   09 — FINAL REGISTRATION
   DESKTOP ONLY
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-final {
        position: relative;
        overflow: hidden;

        width: 100%;

        padding:
            55px 0
            70px;

        background:
            radial-gradient(
                circle at 96% 2%,
                rgba(85, 32, 225, .45),
                transparent 31%
            ),
            radial-gradient(
                circle at 2% 100%,
                rgba(90, 34, 240, .34),
                transparent 28%
            ),
            linear-gradient(
                110deg,
                #070b14 0%,
                #070c15 48%,
                #0a0b18 100%
            );

        color: #ffffff;
    }



    /* ==================================================================
       LARGE DECORATIVE PURPLE CURVES
       ================================================================== */

    .masterclass-page
    .mc-final::before {
        content: "";

        position: absolute;

        z-index: 0;

        left: -345px;
        bottom: -375px;

        width: 670px;
        height: 670px;

        border:
            1px solid
            rgba(107, 43, 255, .76);

        border-radius: 50%;

        box-shadow:
            0 0 65px
            rgba(93, 31, 242, .22);

        pointer-events: none;
    }


    .masterclass-page
    .mc-final::after {
        content: "";

        position: absolute;

        z-index: 0;

        right: -410px;
        bottom: -350px;

        width: 760px;
        height: 760px;

        border:
            1px solid
            rgba(107, 43, 255, .68);

        border-radius: 50%;

        box-shadow:
            0 0 90px
            rgba(92, 32, 245, .25);

        pointer-events: none;
    }



    /* ==================================================================
       INNER
       ================================================================== */

    .masterclass-page
    .mc-final > .home-shell {
        position: relative;

        z-index: 2;

        width: min(
            1120px,
            calc(100% - 96px)
        );

        max-width: none;

        margin:
            0 auto;
    }



    /* ==================================================================
       HEADING
       ================================================================== */

    .masterclass-page
    .mc-final
    .mc-heading {
        width: 100%;
        max-width: 850px;

        margin:
            0 auto
            25px;

        text-align: center;
    }



    /* 09 — READY TO TAKE THE NEXT STEP? */

    .masterclass-page
    .mc-final
    .mc-eyebrow {
        margin:
            0 0
            16px;

        color: #b4bac8;

        font-size: 11px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: .36em;

        text-transform: uppercase;
    }



    /* ==================================================================
       TITLE
       ================================================================== */

    .masterclass-page
    .mc-final
    .mc-heading h2 {
        max-width: 850px;

        margin:
            0 auto;

        color: #ffffff;

        font-size:
            clamp(
                47px,
                3.7vw,
                62px
            );

        line-height: .92;

        font-weight: 900;

        letter-spacing: -.052em;
    }


    .masterclass-page
    .mc-final
    .mc-heading h2 span {
        display: block;

        margin-top: 5px;

        color: #7a31f4;
    }



    /* intro */

    .masterclass-page
    .mc-final
    .mc-heading > p {
        margin:
            17px auto
            0;

        color: #b7bdca;

        font-size: 17px;
        line-height: 1.3;

        font-weight: 400;
    }



    /* ==================================================================
       MAIN WHITE REGISTRATION CARD
       ================================================================== */

    .masterclass-page
    .mc-final-card {
        position: relative;

        z-index: 4;

        width: 100%;
        max-width: 590px;

        margin:
            0 auto;

        padding:
            23px 27px
            24px;

        border:
            1px solid
            rgba(255, 255, 255, .28);

        border-radius: 12px;

        background: #ffffff;

        color: #0b0d13;

        box-shadow:
            0 25px 65px
            rgba(0, 0, 0, .28);
    }



    /* ==================================================================
       STEPS
       ================================================================== */

    .masterclass-page
    .mc-final-step {
        width: 100%;
    }



    /* ==================================================================
       STEP HEADING
       ================================================================== */

    .masterclass-page
    .mc-final-step__heading {
        display: flex;

        align-items: center;

        width: 100%;

        gap: 14px;

        margin-bottom: 16px;
    }



    /* 1 / 2 purple circle */

    .masterclass-page
    .mc-final-step__number {
        display: grid;

        flex:
            0 0
            35px;

        place-items: center;

        width: 35px;
        height: 35px;

        border-radius: 50%;

        background:
            #eee7ff;

        color:
            #6928ea;

        font-size: 14px;
        line-height: 1;

        font-weight: 900;
    }



    /* step heading */

    .masterclass-page
    .mc-final-step__heading h3 {
        margin: 0;

        color: #101219;

        font-size: 17px;
        line-height: 1.1;

        font-weight: 900;

        letter-spacing: -.025em;
    }



    /* ==================================================================
       TIMEZONE
       ================================================================== */

    .masterclass-page
    .mc-final-timezone {
        display: flex;

        align-items: center;

        gap: 6px;

        margin-left: auto;

        color: #5f6879;

        font-size: 10px;
        line-height: 1.15;

        white-space: nowrap;
    }


    .masterclass-page
    .mc-final-timezone__globe {
        display: grid;

        place-items: center;

        color: #4d5668;
    }


    .masterclass-page
    .mc-final-timezone__globe svg {
        width: 17px;
        height: 17px;

        stroke-width: 1.7;
    }


    .masterclass-page
    .mc-final-timezone > strong {
        color: #222733;

        font-size: 9px;

        font-weight: 700;
    }



    /* ==================================================================
       SESSION DATE AREA
       ================================================================== */

    .masterclass-page
    .mc-final-date-row {
        display: flex;

        align-items: stretch;

        gap: 7px;

        width: 100%;
    }


    .masterclass-page
    .mc-final-dates {
        display: grid;

        flex: 1 1 auto;

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(100px, 1fr)
            );

        gap: 7px;

        width: 100%;
    }



    /* generated date buttons */

    .masterclass-page
    .mc-final-dates button {
        min-width: 0;
        min-height: 44px;

        padding:
            7px 12px;

        border:
            1px solid
            #d9dde5;

        border-radius: 6px;

        background: #ffffff;

        color: #50596c;

        cursor: pointer;

        font: inherit;

        font-size: 11px;
        line-height: 1.2;

        transition:
            border-color .18s ease,
            background .18s ease,
            color .18s ease;
    }


    .masterclass-page
    .mc-final-dates button:hover {
        border-color:
            #8a4af6;
    }



    /* selected date */

    .masterclass-page
    .mc-final-dates button.is-selected,

    .masterclass-page
    .mc-final-dates button.active,

    .masterclass-page
    .mc-final-dates button[aria-pressed="true"] {
        border-color:
            #7430ef;

        background:
            #f1ebff;

        color:
            #6324df;
    }



    /* next dates */

    .masterclass-page
    .mc-final-date-next {
        display: grid;

        flex:
            0 0
            44px;

        place-items: center;

        width: 44px;
        height: 44px;

        padding: 0;

        border:
            1px solid
            #dfdae9;

        border-radius: 50%;

        background:
            #f1edfb;

        color:
            #6928e9;

        cursor: pointer;

        font-size: 22px;
    }


    .masterclass-page
    .mc-final-date-next[hidden] {
        display: none;
    }



    /* ==================================================================
       TIMES
       ================================================================== */

    .masterclass-page
    .mc-final-times {
        display: grid;

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        gap: 7px;

        width: 100%;

        margin-top: 8px;
    }


    .masterclass-page
    .mc-final-times button,
    .masterclass-page
    .mc-final-other-times {
        min-height: 40px;

        padding:
            7px 10px;

        border:
            1px solid
            #dfe1e7;

        border-radius: 6px;

        background:
            #ffffff;

        color:
            #545d6e;

        cursor: pointer;

        font: inherit;

        font-size: 11px;
        line-height: 1;

        transition:
            border-color .18s ease,
            background .18s ease,
            color .18s ease;
    }


    .masterclass-page
    .mc-final-times button:hover,
    .masterclass-page
    .mc-final-other-times:hover {
        border-color:
            #8140f2;
    }



    /* selected time */

    .masterclass-page
    .mc-final-times button.is-selected,

    .masterclass-page
    .mc-final-times button.active,

    .masterclass-page
    .mc-final-times button[aria-pressed="true"] {
        border-color:
            #7130eb;

        background:
            #f0e9ff;

        color:
            #6526e6;

        font-weight: 700;
    }


    .masterclass-page
    .mc-final-other-times {
        width: 100%;

        margin-top: 7px;
    }


    .masterclass-page
    .mc-final-other-times[hidden] {
        display: none;
    }



    /* ==================================================================
       SESSION MESSAGE
       ================================================================== */

    .masterclass-page
    .mc-final-session-message {
        margin-top: 9px;

        padding:
            8px 11px;

        border-radius: 6px;

        background:
            #f7f4fd;

        color:
            #626b7d;

        font-size: 10px;
        line-height: 1.35;
    }


    .masterclass-page
    .mc-final-session-message[hidden] {
        display: none;
    }



    /* ==================================================================
       DIVIDER
       ================================================================== */

    .masterclass-page
    .mc-final-divider {
        width: 100%;
        height: 1px;

        margin:
            19px 0;

        background:
            #e5e6eb;
    }



    /* ==================================================================
       STEP 2 HEADING
       ================================================================== */

    .masterclass-page
    .mc-final-step--details
    .mc-final-step__heading {
        margin-bottom: 13px;
    }



    /* ==================================================================
       INPUTS
       ================================================================== */

    .masterclass-page
    .mc-final-fields {
        display: grid;

        grid-template-columns:
            1fr;

        gap: 8px;

        width: 100%;
    }


    .masterclass-page
    .mc-final-field {
        position: relative;

        display: block;

        width: 100%;
    }


    .masterclass-page
    .mc-final-field input {
        box-sizing: border-box;

        display: block;

        width: 100%;
        height: 46px;

        padding:
            0 15px;

        border:
            1px solid
            #d9dde5;

        border-radius: 6px;

        outline: none;

        background:
            #ffffff;

        color:
            #161922;

        box-shadow: none;

        font: inherit;

        font-size: 12px;

        transition:
            border-color .18s ease,
            box-shadow .18s ease;
    }


    .masterclass-page
    .mc-final-field input::placeholder {
        color:
            #9299a8;

        opacity: 1;
    }


    .masterclass-page
    .mc-final-field input:focus {
        border-color:
            #7330ee;

        box-shadow:
            0 0 0 3px
            rgba(115, 48, 238, .08);
    }



    /* ==================================================================
       SUBMIT
       ================================================================== */

    .masterclass-page
    .mc-final-submit {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 15px;

        width: 100%;
        min-height: 51px;

        margin:
            16px 0
            0;

        padding:
            0 20px;

        border: 0;
        border-radius: 6px;

        background:
            linear-gradient(
                90deg,
                #ffc63f,
                #ffd15a
            );

        color:
            #080a0e;

        cursor: pointer;

        box-shadow:
            0 8px 20px
            rgba(241, 175, 29, .12);

        font: inherit;

        transition:
            transform .18s ease,
            box-shadow .18s ease;
    }


    .masterclass-page
    .mc-final-submit:hover {
        transform:
            translateY(-1px);

        box-shadow:
            0 11px 24px
            rgba(241, 175, 29, .18);
    }


    .masterclass-page
    .mc-final-submit span {
        font-size: 13px;
        line-height: 1;

        font-weight: 900;

        text-transform: uppercase;
    }


    .masterclass-page
    .mc-final-submit svg {
        width: 19px;
        height: 19px;

        stroke-width: 2;
    }



    /* ==================================================================
       ERROR
       ================================================================== */

    .masterclass-page
    .mc-final-error {
        margin:
            9px 0
            0;

        color:
            #c73131;

        text-align: center;

        font-size: 10px;
        line-height: 1.3;
    }


    .masterclass-page
    .mc-final-error[hidden] {
        display: none;
    }



    /* ==================================================================
       NOTE
       ================================================================== */

    .masterclass-page
    .mc-final-note {
        display: block;

        margin:
            10px auto
            0;

        color:
            #747d8d;

        text-align: center;

        font-size: 10px;
        line-height: 1.35;

        font-weight: 400;
    }

}



/* ======================================================================
   COMPACT DESKTOP
   1024 — 1199
   ====================================================================== */

@media
    (min-width: 1024px)
    and
    (max-width: 1199px) {


    .masterclass-page
    .mc-final {
        padding:
            50px 0
            62px;
    }


    .masterclass-page
    .mc-final > .home-shell {
        width:
            calc(100% - 48px);
    }


    .masterclass-page
    .mc-final
    .mc-heading h2 {
        font-size: 50px;
    }


    .masterclass-page
    .mc-final-card {
        max-width: 570px;
    }

}
/* ======================================================================
   MASTERCLASS
   09 — FINAL REGISTRATION
   DESKTOP ONLY

   IMPORTANT:
   - DOES NOT TOUCH MOBILE
   - DOES NOT CHANGE WEBINARKIT
   - KEEPS THE SAME IFRAME USED ON MOBILE
   ====================================================================== */

@media (min-width: 1024px) {


    /* ==================================================================
       SECTION
       ================================================================== */

    .masterclass-page .mc-final {
        position: relative;

        overflow: hidden;

        width: 100%;

        padding:
            72px 0
            82px;

        background:
            radial-gradient(
                circle at 0% 100%,
                rgba(105, 40, 255, .36) 0%,
                rgba(105, 40, 255, .12) 19%,
                transparent 42%
            ),
            radial-gradient(
                circle at 100% 30%,
                rgba(93, 33, 255, .30) 0%,
                rgba(93, 33, 255, .08) 24%,
                transparent 48%
            ),
            linear-gradient(
                135deg,
                #080b15 0%,
                #070b14 48%,
                #0d0b23 100%
            );

        color: #ffffff;
    }


    .masterclass-page
    .mc-final > .home-shell {
        position: relative;

        z-index: 2;

        width:
            min(
                1440px,
                calc(100% - 96px)
            );

        max-width: none;

        margin:
            0 auto;
    }



    /* ==================================================================
       SUBTLE BACKGROUND SHAPES
       ================================================================== */

    .masterclass-page
    .mc-final::before {
        content: "";

        position: absolute;

        left: -220px;
        bottom: -340px;

        width: 760px;
        height: 760px;

        border:
            1px solid
            rgba(120, 55, 255, .35);

        border-radius: 50%;

        box-shadow:
            0 0 90px
            rgba(103, 38, 255, .10);

        pointer-events: none;
    }


    .masterclass-page
    .mc-final::after {
        content: "";

        position: absolute;

        right: -240px;
        top: 80px;

        width: 720px;
        height: 720px;

        border:
            1px solid
            rgba(122, 55, 255, .22);

        border-radius: 50%;

        transform:
            rotate(-20deg);

        pointer-events: none;
    }



    /* ==================================================================
       HEADING
       ================================================================== */

    .masterclass-page
    .mc-final
    .mc-heading {
        width: 100%;

        max-width: 900px;

        margin:
            0 auto
            30px;

        text-align: center;
    }


    .masterclass-page
    .mc-final
    .mc-eyebrow {
        margin:
            0 0
            13px;

        color:
            rgba(232, 232, 245, .76);

        font-size: 11px;

        line-height: 1;

        font-weight: 800;

        letter-spacing: .32em;

        text-transform: uppercase;
    }


    .masterclass-page
    .mc-final
    .mc-heading h2 {
        margin: 0;

        color: #ffffff;

        font-size:
            clamp(
                48px,
                4vw,
                64px
            );

        line-height: .98;

        font-weight: 900;

        letter-spacing: -.05em;
    }


    .masterclass-page
    .mc-final
    .mc-heading h2 span {
        display: block;

        margin-top: 2px;

        color: #7935ff;
    }


    .masterclass-page
    .mc-final
    .mc-heading > p:last-child {
        margin:
            14px auto
            0;

        color:
            rgba(226, 229, 239, .78);

        font-size: 18px;

        line-height: 1.35;

        font-weight: 400;
    }



    /* ==================================================================
       WEBINAR CARD

       CRITICAL:
       Keep this narrow so /webinar-form.php continues using the same
       responsive version that already works correctly on mobile.
       ================================================================== */

    .masterclass-page
    .mc-final-webinar-card {
        position: relative;

        width: 560px;

        max-width: 100%;

        margin:
            0 auto;

        padding:
            18px 20px
            20px;

        overflow: hidden;

        border: 0;

        border-radius: 14px;

        background: #ffffff;

        box-shadow:
            0 22px 55px
            rgba(0, 0, 0, .28);
    }



    /* ==================================================================
       CARD HEADING
       Fixes the gigantic calendar from your screenshot
       ================================================================== */

    .masterclass-page
    .mc-final-webinar-card__heading {
        display: flex;

        align-items: center;

        gap: 12px;

        width: 100%;

        margin:
            0 0
            12px;

        padding: 0;
    }


    .masterclass-page
    .mc-final-webinar-card__heading > svg {
        display: block;

        flex:
            0 0
            26px;

        width: 26px !important;
        height: 26px !important;

        min-width: 26px;
        max-width: 26px;

        margin: 0 !important;
        padding: 0 !important;

        color: #7132f5;

        stroke-width: 1.8;
    }


    .masterclass-page
    .mc-final-webinar-card__heading h3 {
        margin: 0;

        color: #0b0d13;

        font-size: 18px;

        line-height: 1.15;

        font-weight: 800;

        letter-spacing: -.025em;
    }



    /* ==================================================================
       IFRAME

       KEY FIX:
       iframe viewport stays 520px wide.
       Therefore its existing mobile/responsive WebinarKit layout is used.
       ================================================================== */

    .masterclass-page
    .mc-final
    .mc-webinar-frame {
        display: block;

        width: 100%;

        max-width: 520px;

        height: 350px;

        margin:
            0 auto;

        padding: 0;

        border: 0;

        border-radius: 8px;

        background: transparent;
    }



    /* ==================================================================
       BOTTOM NOTE
       ================================================================== */

    .masterclass-page
    .mc-final-note {
        display: block;

        width: 100%;

        max-width: 560px;

        margin:
            13px auto
            0;

        color:
            rgba(223, 226, 236, .70);

        text-align: center;

        font-size: 11px;

        line-height: 1.4;
    }

}