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

   01 — HERO
   MOBILE ONLY
   ====================================================================== */

@media (max-width: 1023px) {


    /* ==================================================================
       PAGE
       ================================================================== */

    .masterclass-page {
        overflow-x: hidden;

        background: #ffffff;

        font-family:
            Inter,
            "Helvetica Neue",
            Arial,
            sans-serif;

        color: #ffffff;
    }


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

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

        width: 100%;

        min-height: 930px;

        overflow: hidden;

        background:
            radial-gradient(
                circle at 82% 19%,
                rgba(104, 38, 255, .48) 0%,
                rgba(67, 29, 168, .28) 17%,
                rgba(9, 13, 24, 0) 37%
            ),
            linear-gradient(
                180deg,
                #080c16 0%,
                #060a12 46%,
                #05090f 100%
            );

        color: #ffffff;
    }


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

        position: absolute;

        z-index: 0;

        right: -85px;
        top: 75px;

        width: 330px;
        height: 420px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(109, 44, 255, .38),
                rgba(109, 44, 255, .12) 38%,
                transparent 70%
            );

        filter: blur(20px);

        pointer-events: none;
    }


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

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

        z-index: 2;

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

        margin: 0 auto;

        padding:
            37px
            24px
            54px;
    }


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

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

        z-index: 4;

        width: 61%;

        min-width: 0;
    }


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

        color: #9c57ff;

        font-size: 11px;

        line-height: 1.2;

        font-weight: 800;

        letter-spacing: .08em;

        text-transform: uppercase;
    }


    .masterclass-page .mc-hero h1 {
        margin: 0;

        max-width: 225px;

        color: #ffffff;

        font-size: clamp(
            29px,
            8vw,
            35px
        );

        line-height: .96;

        letter-spacing: -.055em;

        font-weight: 900;
    }


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

        margin-top: 4px;

        color: #7b31ff;
    }


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

        margin:
            14px
            0
            0;

        color: #bec4d0;

        font-size: 12px;

        line-height: 1.42;

        font-weight: 400;
    }


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

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

        z-index: 2;

        top: 34px;
        right: -17px;

        width: 58%;
        height: 385px;

        pointer-events: none;
    }


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

        width: 100%;
        height: 100%;
    }


    .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: contain;

        object-position:
            center
            top;
    }


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

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

        z-index: 5;

        display: flex;

        align-items: flex-start;

        justify-content: space-between;

        gap: 3px;

        width: calc(100vw - 48px);
        max-width: 512px;

        margin-top: 29px;
    }


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

        flex: 0 0 auto;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        width: 38px;

        color: #aeb6c7;

        text-align: center;
    }


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

        width: 19px;
        height: 19px;

        margin-bottom: 7px;

        stroke-width: 1.65;
    }


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

        color: #aeb6c7;

        font-size: 7px;

        line-height: 1.15;

        white-space: nowrap;
    }


    .masterclass-page
    .mc-system-strip__item:last-of-type {
        color: #8a34ff;
    }


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


    .masterclass-page
    .mc-system-strip__arrow {
        display: block;

        flex: 0 0 auto;

        padding-top: 4px;

        color: #81899a;

        font-size: 11px;

        line-height: 1;
    }


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

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

        z-index: 8;

        width: 100%;

        margin-top: 26px;

        padding:
            14px
            14px
            15px;

        border:
            1px solid
            rgba(123, 139, 167, .14);

        border-radius: 10px;

        background:
            linear-gradient(
                145deg,
                rgba(11, 17, 28, .97),
                rgba(9, 14, 24, .96)
            );

        box-shadow:
            0 22px 45px
            rgba(0, 0, 0, .19);
    }


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

        align-items: center;

        gap: 13px;

        margin:
            0
            0
            13px;
    }


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

        width: 25px;
        height: 25px;

        color: #873cff;

        stroke-width: 1.9;
    }


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

        color: #ffffff;

        font-size: 17px;

        line-height: 1.15;

        letter-spacing: -.025em;

        font-weight: 800;
    }


    /* ==================================================================
       WEBINARKIT — RESET
       ================================================================== */

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


    .masterclass-page
    .mc-webinarkit .wk_root {
        width: 100% !important;

        border-radius: 0 !important;

        background: transparent !important;
    }


    .masterclass-page
    .mc-webinarkit
    #wk_element_d94017575195c57e80b94bab113f9bdc {
        width: 100% !important;
        max-width: none !important;

        min-height: 0 !important;

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

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }


    /* Hide WebinarKit's timer above the form.
       We only need the registration controls here. */

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


    .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_form_element {
        display: grid !important;

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

        gap: 8px !important;

        width: 100% !important;
    }


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

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

        width: 100% !important;
        max-width: none !important;

        height: 44px !important;

        margin: 0 !important;

        padding:
            0
            15px !important;

        border:
            1px solid
            #253044 !important;

        border-radius:
            7px !important;

        outline: none !important;

        background:
            #101926 !important;

        color:
            #e8ebf1 !important;

        box-shadow:
            none !important;

        font-family:
            inherit !important;

        font-size:
            12px !important;

        line-height:
            44px !important;

        transition:
            border-color .2s ease,
            box-shadow .2s ease !important;
    }


    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_first_name:focus,
    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_email:focus,
    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_date:focus {
        border-color:
            #7132f5 !important;

        box-shadow:
            0 0 0 2px
            rgba(113, 50, 245, .12) !important;
    }


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

        opacity: 1 !important;
    }


    /* Name and email are full width */

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_first_name {
        grid-column:
            1 / -1;
    }


    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_email {
        grid-column:
            1 / -1;
    }


    /* Session selector */

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_date {
        grid-column:
            1 / -1;

        cursor: pointer !important;

        appearance: auto !important;
    }


    /* ==================================================================
       HIDE FIELDS NOT IN DESIGN
       ================================================================== */

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_last_name,

    .masterclass-page
    .mc-webinarkit
    .wk_registration_form_phone,

    .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 {
        grid-column:
            1 / -1;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 49px !important;

        margin:
            3px
            0
            0 !important;

        padding:
            0
            18px !important;

        border: 0 !important;

        border-radius:
            7px !important;

        background:
            linear-gradient(
                90deg,
                #ffc63d,
                #ffd158
            ) !important;

        color:
            #080a0d !important;

        box-shadow:
            0 9px 22px
            rgba(255, 195, 41, .12) !important;

        cursor: pointer !important;

        font-family:
            inherit !important;

        font-size:
            15px !important;

        font-weight:
            800 !important;

        line-height: 1 !important;
    }


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

        width: auto !important;

        margin: 0 !important;

        padding-right: 25px !important;

        color:
            #080a0d !important;

        font-family:
            inherit !important;

        font-size:
            inherit !important;

        font-weight:
            800 !important;
    }


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

        position: absolute;

        top: 50%;
        right: 0;

        transform:
            translateY(-52%);

        font-size:
            18px;

        font-weight:
            500;
    }


    /* ==================================================================
       WEBINARKIT INTERNAL BOOTSTRAP 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:
            #101926 !important;
    }


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

@media (max-width: 1023px) {


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

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

        overflow: hidden;

        width: 100%;

        padding:
            42px 0
            46px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(113, 48, 255, .055),
                transparent 34%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(113, 48, 255, .045),
                transparent 32%
            ),
            #ffffff;

        color: #070910;
    }


    .masterclass-page
    .mc-audience > .home-shell {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;

        padding:
            0 23px;
    }



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

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

        margin:
            0 auto
            28px;

        text-align: center;
    }


    /* SECTION 02 pill */

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

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

        min-height: 27px;

        margin-bottom: 15px;

        padding:
            5px 20px;

        border:
            1px solid
            #9b59f7;

        border-radius: 999px;

        color: #7b32ef;

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

        font-weight: 800;

        letter-spacing: .22em;

        text-transform: uppercase;
    }


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

        color: #070910;

        font-size: clamp(
            38px,
            9.5vw,
            51px
        );

        line-height: .92;

        font-weight: 900;

        letter-spacing: -.055em;
    }


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

        color: #7a31ef;
    }


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

        margin:
            13px auto
            0;

        color: #646d80;

        font-size: 14px;

        line-height: 1.35;

        font-weight: 400;
    }



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

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

        gap: 13px;

        width: 100%;
    }



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

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

        grid-template-columns:
            minmax(0, .88fr)
            minmax(0, 1.12fr);

        align-items: center;

        gap: 14px;

        width: 100%;

        min-height: 190px;

        padding:
            15px 13px
            15px 18px;

        border:
            1px solid
            #e2e3e9;

        border-radius: 10px;

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

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



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

    .masterclass-page
    .mc-audience-card__copy {
        align-self: start;

        min-width: 0;
    }


    .masterclass-page
    .mc-audience-card
    .mc-number {
        display: block;

        margin-bottom: 7px;

        color: #782ff1;

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

        font-weight: 700;
    }


    .masterclass-page
    .mc-audience-card__copy small {
        display: block;

        margin-bottom: 6px;

        color: #646d80;

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

        font-weight: 800;

        letter-spacing: .13em;

        text-transform: uppercase;
    }


    .masterclass-page
    .mc-audience-card__copy h3 {
        margin: 0;

        color: #090b12;

        font-size: clamp(
            17px,
            4.25vw,
            22px
        );

        line-height: .96;

        font-weight: 900;

        letter-spacing: -.045em;
    }


    .masterclass-page
    .mc-audience-card__copy p {
        margin:
            8px 0
            0;

        color: #5f687a;

        font-size: 10.5px;

        line-height: 1.32;
    }



    /* ==================================================================
       MINI FLOW
       ================================================================== */

    .masterclass-page
    .mc-mini-flow {
        display: flex;

        align-items: flex-start;

        justify-content: space-between;

        min-width: 0;

        gap: 3px;
    }


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

        flex:
            1 1 0;

        min-width: 0;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    /* icon square */

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

        place-items: center;

        width: 47px;
        height: 47px;

        margin-bottom: 6px;

        border-radius: 7px;

        background:
            linear-gradient(
                145deg,
                #f3f3f7,
                #f7f7fa
            );

        color: #232a39;
    }


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

        stroke-width: 1.9;
    }


    /* final step purple */

    .masterclass-page
    .mc-mini-flow__step:last-of-type > span {
        background:
            linear-gradient(
                145deg,
                #f0e9ff,
                #eee6ff
            );

        color: #762ff0;
    }


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

        width: 100%;

        color: #151820;

        font-size: 7.5px;

        line-height: 1.05;

        font-weight: 850;
    }


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

        width: 100%;

        margin-top: 3px;

        color: #737b8c;

        font-size: 6.4px;

        line-height: 1.18;
    }



    /* arrows */

    .masterclass-page
    .mc-mini-flow > b {
        flex:
            0 0 auto;

        align-self: flex-start;

        margin-top: 19px;

        color: #772ff0;

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

        font-weight: 500;
    }



    /* ==================================================================
       SECOND CARD — subtle visual difference
       ================================================================== */

    .masterclass-page
    .mc-audience-card:nth-child(2)
    .mc-mini-flow__step:first-of-type
    > span {
        background:
            linear-gradient(
                145deg,
                #f7f7f8,
                #f1f2f5
            );
    }



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

    .masterclass-page
    .mc-audience-card:nth-child(3)
    .mc-mini-flow__step:last-of-type
    > span {
        background:
            linear-gradient(
                145deg,
                #f1eaff,
                #eee5ff
            );

        color: #762ff0;
    }



    /* ==================================================================
       BOTTOM LINE
       ================================================================== */

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

        display: flex;

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

        gap: 4px;

        margin-top: 25px;

        color: #171920;

        text-align: center;

        font-size: 14px;

        font-weight: 800;
    }


    .masterclass-page
    .mc-audience-bottom::before,
    .masterclass-page
    .mc-audience-bottom::after {
        content: "";

        flex:
            1 1 auto;

        max-width: 78px;

        height: 1px;

        margin:
            0 17px;

        background:
            #aeb1ba;
    }


    .masterclass-page
    .mc-audience-bottom span {
        color: #171920;
    }


    .masterclass-page
    .mc-audience-bottom strong {
        color: #772ff0;
    }

}



/* ======================================================================
   SMALL MOBILE
   ====================================================================== */

@media (max-width: 480px) {


    .masterclass-page
    .mc-audience {
        padding:
            36px 0
            39px;
    }


    .masterclass-page
    .mc-audience > .home-shell {
        padding:
            0 16px;
    }


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


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

        font-size: 12px;
    }


    /*
     * At real 390px phone widths we give
     * the copy slightly less space.
     */

    .masterclass-page
    .mc-audience-card {
        grid-template-columns:
            minmax(0, .8fr)
            minmax(0, 1.2fr);

        gap: 8px;

        min-height: 172px;

        padding:
            13px 9px
            13px 13px;
    }


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


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


    .masterclass-page
    .mc-mini-flow {
        gap: 1px;
    }


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

        margin-bottom: 5px;
    }


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


    .masterclass-page
    .mc-mini-flow__step strong {
        font-size: 6px;
    }


    .masterclass-page
    .mc-mini-flow__step small {
        font-size: 5px;
    }


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

        font-size: 9px;
    }


    .masterclass-page
    .mc-audience-bottom {
        font-size: 11px;
    }


    .masterclass-page
    .mc-audience-bottom::before,
    .masterclass-page
    .mc-audience-bottom::after {
        margin:
            0 8px;
    }

}
/* ======================================================================
   MASTERCLASS
   03 — THE PROBLEM
   MOBILE
   ====================================================================== */

@media (max-width: 1023px) {


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

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

        overflow: hidden;

        width: 100%;

        min-height: 850px;

        padding:
            51px 0
            58px;

        background:
            radial-gradient(
                circle at 50% 40%,
                rgba(82, 36, 160, .14) 0%,
                rgba(20, 17, 42, .10) 25%,
                transparent 52%
            ),
            linear-gradient(
                180deg,
                #12131a 0%,
                #0d0f15 48%,
                #0b0d13 100%
            );

        color: #ffffff;
    }


    /*
     * subtle curved white transition at bottom
     */

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

        position: absolute;

        left: -5%;
        right: -5%;
        bottom: -53px;

        height: 82px;

        border-radius:
            50% 50% 0 0 /
            100% 100% 0 0;

        background: #ffffff;
    }


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

        z-index: 2;

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

        margin: 0 auto;

        padding:
            0 22px;
    }



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

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

        margin:
            0 auto
            28px;

        text-align: center;
    }


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

        color: #9e59ff;

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

        font-weight: 800;

        letter-spacing: .32em;

        text-transform: uppercase;
    }


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

        margin:
            0 auto;

        color: #ffffff;

        font-size: clamp(
            39px,
            9.8vw,
            52px
        );

        line-height: .91;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .masterclass-page
    .mc-problem
    .mc-heading h2 span {
        color: #9b4dff;
    }


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

        margin:
            17px auto
            0;

        color: #aeb4c2;

        font-size: 13px;
        line-height: 1.42;
    }



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

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

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

        height: 330px;

        margin:
            8px auto
            0;
    }



    /* ==================================================================
       CENTRAL VISUAL
       ================================================================== */

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

        z-index: 2;

        left: 50%;
        top: 50%;

        width: 230px;
        height: 230px;

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

        display: grid;

        place-items: center;
    }


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

        width: 100%;
        height: 100%;

        object-fit: contain;

        filter:
            drop-shadow(
                0 0 22px
                rgba(121, 62, 255, .30)
            );
    }



    /* fallback only */

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

        width: 190px;
        height: 190px;

        border-radius: 50%;

        background:
            repeating-radial-gradient(
                circle at 50% 50%,
                transparent 0 8px,
                rgba(137, 76, 255, .13) 9px 11px,
                transparent 12px 18px
            ),
            radial-gradient(
                circle,
                rgba(116, 54, 233, .22),
                rgba(45, 31, 94, .13) 42%,
                transparent 70%
            );

        box-shadow:
            0 0 55px
            rgba(112, 55, 240, .15);
    }


    .masterclass-page
    .mc-problem-orb::before,
    .masterclass-page
    .mc-problem-orb::after {
        content: "";

        position: absolute;

        inset: 25px;

        border:
            1px solid
            rgba(147, 88, 255, .35);

        border-radius:
            44% 56% 62% 38%;

        transform:
            rotate(35deg);
    }


    .masterclass-page
    .mc-problem-orb::after {
        inset: 42px;

        transform:
            rotate(-47deg);

        border-color:
            rgba(185, 145, 255, .25);
    }



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

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

        z-index: 5;

        display: grid;

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

        align-items: center;

        gap: 9px;

        width: 137px;
        min-height: 48px;

        padding:
            8px 10px;

        border:
            1px solid
            rgba(127, 132, 154, .32);

        border-radius: 9px;

        background:
            linear-gradient(
                145deg,
                rgba(25, 27, 39, .92),
                rgba(18, 20, 30, .91)
            );

        box-shadow:
            0 8px 20px
            rgba(0,0,0,.18);

        color: #ffffff;
    }


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

        color: #c2c7d4;

        stroke-width: 1.7;
    }


    .masterclass-page
    .mc-problem-chip span {
        color: #e6e8ee;

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

        font-weight: 550;
    }



    /* ==================================================================
       CHIP POSITIONS
       ================================================================== */

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


    .masterclass-page
    .mc-problem-chip--2 {
        right: 0;
        top: 14px;
    }


    .masterclass-page
    .mc-problem-chip--3 {
        left: -6px;
        top: 118px;
    }


    .masterclass-page
    .mc-problem-chip--4 {
        right: -6px;
        top: 124px;
    }


    .masterclass-page
    .mc-problem-chip--5 {
        left: 0;
        bottom: 21px;
    }


    .masterclass-page
    .mc-problem-chip--6 {
        right: 0;
        bottom: 18px;
    }



    /* ==================================================================
       CONNECTOR LINES
       ================================================================== */

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

        position: absolute;

        z-index: -1;

        top: 50%;

        width: 59px;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                rgba(123,67,242,.25),
                rgba(132,74,255,.90)
            );

        box-shadow:
            0 0 6px
            rgba(125,63,245,.50);
    }


    .masterclass-page
    .mc-problem-chip:nth-child(odd)::after {
        left: 100%;
    }


    .masterclass-page
    .mc-problem-chip:nth-child(even)::after {
        right: 100%;

        transform:
            rotate(180deg);
    }



    /* endpoint dots */

    .masterclass-page
    .mc-problem-chip::before {
        content: "";

        position: absolute;

        z-index: 3;

        top: 50%;

        width: 6px;
        height: 6px;

        margin-top: -3px;

        border-radius: 50%;

        background: #8640ff;

        box-shadow:
            0 0 10px
            rgba(132,64,255,.92);
    }


    .masterclass-page
    .mc-problem-chip:nth-child(odd)::before {
        right: -62px;
    }


    .masterclass-page
    .mc-problem-chip:nth-child(even)::before {
        left: -62px;
    }



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

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

        max-width: 500px;

        margin:
            32px auto
            0;

        padding:
            34px 24px;

        border:
            1px solid
            rgba(121, 67, 204, .38);

        border-radius: 15px;

        background:
            linear-gradient(
                135deg,
                rgba(28, 25, 47, .86),
                rgba(17, 19, 30, .93)
            );

        box-shadow:
            inset 0 0 28px
            rgba(113, 54, 224, .05);

        text-align: center;
    }


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

        color: #e9eaf0;

        font-size: 18px;

        line-height: 1.28;

        font-weight: 400;
    }


    .masterclass-page
    .mc-problem-quote p + p {
        margin-top: 3px;
    }


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

        color: #9b4eff;

        font-weight: 800;
    }



    /* ==================================================================
       DOWN ARROW
       ================================================================== */

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

        position: absolute;

        left: 50%;
        bottom: -113px;

        transform:
            translateX(-50%);

        color: #9650ff;

        font-size: 34px;

        font-weight: 300;
    }


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

        position: absolute;

        left: 50%;
        bottom: -89px;

        width: 1px;
        height: 54px;

        transform:
            translateX(-50%);

        background:
            linear-gradient(
                180deg,
                rgba(142,69,255,0),
                rgba(142,69,255,.82)
            );
    }

}



/* ======================================================================
   SMALL MOBILE — ~390PX
   ====================================================================== */

@media (max-width: 480px) {


    .masterclass-page .mc-problem {
        min-height: 800px;

        padding-top: 42px;
    }


    .masterclass-page
    .mc-problem > .home-shell {
        padding:
            0 14px;
    }


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


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

        font-size: 11px;
    }


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


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


    .masterclass-page
    .mc-problem-chip {
        width: 112px;
        min-height: 43px;

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

        gap: 6px;

        padding:
            7px 7px;

        border-radius: 7px;
    }


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


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


    .masterclass-page
    .mc-problem-chip::after {
        width: 44px;
    }


    .masterclass-page
    .mc-problem-chip:nth-child(odd)::before {
        right: -47px;
    }


    .masterclass-page
    .mc-problem-chip:nth-child(even)::before {
        left: -47px;
    }


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


    .masterclass-page
    .mc-problem-chip--2 {
        right: 0;
        top: 10px;
    }


    .masterclass-page
    .mc-problem-chip--3 {
        left: -2px;
        top: 105px;
    }


    .masterclass-page
    .mc-problem-chip--4 {
        right: -2px;
        top: 108px;
    }


    .masterclass-page
    .mc-problem-chip--5 {
        left: 0;
        bottom: 18px;
    }


    .masterclass-page
    .mc-problem-chip--6 {
        right: 0;
        bottom: 16px;
    }


    .masterclass-page
    .mc-problem-quote {
        margin-top: 24px;

        padding:
            29px 18px;
    }


    .masterclass-page
    .mc-problem-quote p {
        font-size: 15px;
    }

}
/* ======================================================================
   MASTERCLASS
   05 — THE SHIFT
   MOBILE
   ====================================================================== */

@media (max-width: 1023px) {


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

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

        overflow: hidden;

        width: 100%;

        padding:
            34px 0
            52px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(113, 48, 255, .055),
                transparent 34%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(113, 48, 255, .04),
                transparent 35%
            ),
            #fbfbfd;

        color: #080a11;
    }


    .masterclass-page
    .mc-shift > .home-shell {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;

        padding:
            0 24px;
    }



    /* ==================================================================
       SECTION LABEL
       05 — THE SHIFT
       ================================================================== */

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

        align-items: center;

        gap: 12px;

        margin-bottom: 16px;
    }


    .masterclass-page
    .mc-shift
    .mc-section-label strong {
        color: #7130ee;

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

        font-weight: 850;
    }


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

        width: 34px;
        height: 1px;

        background: #9a6de7;
    }


    .masterclass-page
    .mc-shift
    .mc-section-label small {
        color: #646d7e;

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

        font-weight: 800;

        letter-spacing: .23em;

        text-transform: uppercase;
    }



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

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

        margin:
            0 0
            18px;

        text-align: left;
    }


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

        margin: 0;

        color: #070910;

        font-size: clamp(
            43px,
            10.5vw,
            58px
        );

        line-height: .86;

        font-weight: 900;

        letter-spacing: -.06em;
    }


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

        margin-top: 5px;

        color: #7430ef;
    }


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

        margin:
            14px 0
            0;

        color: #343945;

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

        font-weight: 450;
    }



    /* ==================================================================
       SHIFT LIST
       ================================================================== */

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

        gap: 10px;

        width: 100%;

        margin-top: 22px;
    }



    /* ==================================================================
       EACH ROW
       ================================================================== */

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

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

        align-items: stretch;

        gap: 6px;

        width: 100%;
    }



    /* ==================================================================
       LEFT / RIGHT CARD
       ================================================================== */

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

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

        align-items: center;

        gap: 10px;

        min-height: 80px;

        padding:
            12px 11px;

        border:
            1px solid
            rgba(231, 229, 239, .82);

        border-radius: 8px;

        background:
            linear-gradient(
                145deg,
                #f5f4f8,
                #f8f7fa
            );

        box-shadow:
            0 5px 16px
            rgba(22, 15, 47, .018);
    }


    .masterclass-page
    .mc-shift-row article.is-positive {
        background:
            linear-gradient(
                145deg,
                #f7f3ff,
                #f1ecff
            );

        border-color:
            rgba(218, 206, 248, .55);
    }



    /* ==================================================================
       ICONS
       ================================================================== */

    .masterclass-page
    .mc-shift-row article > svg {
        display: block;

        width: 39px;
        height: 39px;

        padding: 7px;

        border-radius: 50%;

        background:
            #ececf1;

        color: #222938;

        stroke-width: 1.65;
    }


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

        color: #722eee;
    }



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

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

        color: #0a0c13;

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

        font-weight: 900;

        letter-spacing: -.025em;
    }


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

        color: #545d6f;

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

        font-weight: 450;
    }



    /* ==================================================================
       ARROW BETWEEN STATES
       ================================================================== */

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

        place-items: center;

        align-self: center;

        color: #762ff0;

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

        font-weight: 300;
    }



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

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

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

        align-items: start;

        gap: 14px;

        width: 100%;

        margin-top: 16px;

        padding:
            20px 18px
            19px;

        border:
            1px solid
            #ddd2fa;

        border-radius: 11px;

        background:
            linear-gradient(
                135deg,
                #f8f4ff 0%,
                #f1ebff 100%
            );
    }


    .masterclass-page
    .mc-shift-quote > svg {
        width: 48px;
        height: 48px;

        padding: 7px;

        color: #7330ee;

        stroke-width: 1.75;
    }


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

        color: #11131b;

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

        font-weight: 900;

        letter-spacing: -.04em;
    }


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

        margin-top: 5px;

        color: #7730ef;

        font-weight: 900;
    }



    /* ==================================================================
       BOTTOM LABEL
       ================================================================== */

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

        max-width: 220px;

        margin:
            27px auto
            0;

        padding-bottom: 57px;

        color: #5f687b;

        text-align: center;

        font-size: 8px;
        line-height: 1.5;

        font-weight: 800;

        letter-spacing: .24em;

        text-transform: uppercase;
    }



    /* round arrow */

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

        position: absolute;

        left: 50%;
        bottom: 0;

        display: grid;

        place-items: center;

        width: 34px;
        height: 34px;

        transform:
            translateX(-50%);

        border:
            1px solid
            #ddd6ed;

        border-radius: 50%;

        background: #ffffff;

        color: #7430ef;

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

        font-weight: 500;

        box-shadow:
            0 4px 12px
            rgba(50, 24, 100, .03);
    }

}



/* ======================================================================
   SMALL MOBILE
   ====================================================================== */

@media (max-width: 480px) {


    .masterclass-page
    .mc-shift {
        padding:
            30px 0
            42px;
    }


    .masterclass-page
    .mc-shift > .home-shell {
        padding:
            0 16px;
    }


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


    .masterclass-page
    .mc-shift
    .mc-heading > p {
        font-size: 13px;
    }


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

        gap: 4px;
    }


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

        gap: 7px;

        min-height: 72px;

        padding:
            9px 8px;
    }


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

        padding: 6px;
    }


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


    .masterclass-page
    .mc-shift-row p {
        margin-top: 3px;

        font-size: 7.5px;
    }


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


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

        gap: 10px;

        padding:
            16px 14px;
    }


    .masterclass-page
    .mc-shift-quote > svg {
        width: 40px;
        height: 40px;
    }


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

}/* ======================================================================
   MASTERCLASS
   06A — REAL-WORLD EXPERIENCE
   MOBILE
   ====================================================================== */

@media (max-width: 1023px) {


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

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

        overflow: hidden;

        width: 100%;

        padding:
            31px 0
            45px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(115, 48, 239, .045),
                transparent 34%
            ),
            #ffffff;

        color: #080a11;
    }


    .masterclass-page
    .mc-experience > .home-shell {
        width: 100%;
        max-width: 680px;

        margin:
            0 auto;

        padding:
            0 22px;
    }



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

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

        margin:
            0 auto
            21px;

        text-align: center;
    }


    /* SECTION 06A PILL */

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

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

        min-height: 26px;

        margin-bottom: 19px;

        padding:
            5px 21px;

        border: 0;

        border-radius: 999px;

        background: #f0e9ff;

        color: #7330ef;

        font-size: 9px;

        line-height: 1;

        font-weight: 800;

        letter-spacing: .21em;

        text-transform: uppercase;
    }



    /* EYEBROW */

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

        color: #7430ef;

        font-size: 9px;

        line-height: 1;

        font-weight: 800;

        letter-spacing: .34em;

        text-transform: uppercase;
    }



    /* TITLE */

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

        color: #080a11;

        font-size:
            clamp(
                40px,
                9.7vw,
                53px
            );

        line-height: .90;

        font-weight: 900;

        letter-spacing: -.057em;
    }


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

        margin-top: 4px;

        color: #7430ef;
    }



    /* INTRO */

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

        margin:
            15px auto
            0 !important;

        color:
            #687184 !important;

        font-size:
            13px !important;

        line-height:
            1.42 !important;
    }



    /* ==================================================================
       INDUSTRY STACK
       ================================================================== */

    .masterclass-page .mc-industries {
        display: grid;

        grid-template-columns:
            1fr;

        gap: 8px;

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

        margin:
            0 auto;
    }



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

    .masterclass-page
    .mc-industry {
        display: grid;

        grid-template-columns:
            41%
            minmax(0, 59%);

        min-height: 121px;

        overflow: hidden;

        padding: 0;

        border:
            1px solid
            #e2e1e8;

        border-radius: 9px;

        background:
            linear-gradient(
                110deg,
                #ffffff,
                #faf8ff
            );
    }



    /* ==================================================================
       IMAGE
       ================================================================== */

    .masterclass-page
    .mc-industry__image {
        width: 100%;
        height: 100%;

        min-height: 121px;

        overflow: hidden;

        background: #eeeeF2;
    }


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

        width: 100%;
        height: 100%;

        min-height: 121px;

        object-fit: cover;

        object-position: center;
    }



    /* ==================================================================
       CONTENT
       ================================================================== */

    .masterclass-page
    .mc-industry__content {
        display: grid;

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

        align-items: center;

        gap: 12px;

        min-width: 0;

        padding:
            14px 15px;
    }



    /* icon */

    .masterclass-page
    .mc-industry__icon {
        display: grid;

        place-items: center;

        width: 56px;
        height: 56px;

        border-radius: 50%;

        background:
            #f0e9ff;

        color:
            #7030ed;
    }


    .masterclass-page
    .mc-industry__icon svg {
        width: 31px;
        height: 31px;

        stroke-width: 1.8;
    }



    /* copy */

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


    .masterclass-page
    .mc-industry__copy small {
        display: block;

        margin-bottom: 4px;

        color: #742fee;

        font-size: 10px;

        line-height: 1;

        font-weight: 900;
    }


    .masterclass-page
    .mc-industry__copy h3 {
        margin: 0;

        color: #101219;

        font-size: 13px;

        line-height: 1.1;

        font-weight: 900;

        letter-spacing: -.01em;
    }


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

        color: #667084;

        font-size: 10px;

        line-height: 1.27;
    }



    /* ==================================================================
       EXPERIENCE FLOW
       ================================================================== */

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

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

        align-items: center;

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

        min-height: 128px;

        margin:
            15px auto
            0;

        padding:
            14px 18px;

        border-radius: 9px;

        background:
            linear-gradient(
                110deg,
                #f7f3ff,
                #f2edff
            );
    }



    /* item */

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

        min-width: 0;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }



    /* circle */

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

        place-items: center;

        width: 58px;
        height: 58px;

        margin-bottom: 8px;

        border-radius: 50%;

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

        color:
            #7430ef;
    }


    .masterclass-page
    .mc-experience-flow__icon svg {
        width: 34px;
        height: 34px;

        stroke-width: 1.75;
    }



    /* label */

    .masterclass-page
    .mc-experience-flow__item strong {
        max-width: 100px;

        color: #11131a;

        font-size: 12px;

        line-height: 1.08;

        font-weight: 900;
    }



    /* arrow */

    .masterclass-page
    .mc-experience-flow__arrow {
        color: #7430ef;

        text-align: center;

        font-size: 25px;

        line-height: 1;

        font-weight: 400;
    }



    /* ==================================================================
       BOTTOM PURPLE BAND
       ================================================================== */

    .masterclass-page
    .mc-experience-bottom {
        position: relative;

        overflow: hidden;

        display: grid;

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

        align-items: center;

        gap: 18px;

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

        min-height: 100px;

        margin:
            8px auto
            0;

        padding:
            15px 22px;

        border-radius: 8px;

        background:
            radial-gradient(
                circle at 100% 100%,
                rgba(117, 54, 255, .58),
                transparent 41%
            ),
            linear-gradient(
                110deg,
                #32245f,
                #40267d
            );

        color: #ffffff;
    }



    /* decorative wave */

    .masterclass-page
    .mc-experience-bottom::after {
        content: "";

        position: absolute;

        z-index: 0;

        right: -32px;
        bottom: -43px;

        width: 245px;
        height: 81px;

        border-radius: 50%;

        background:
            rgba(155, 92, 255, .16);

        transform:
            rotate(-10deg);
    }



    /* target circle */

    .masterclass-page
    .mc-experience-bottom__icon {
        position: relative;

        z-index: 2;

        display: grid;

        place-items: center;

        width: 64px;
        height: 64px;

        border-radius: 50%;

        background:
            rgba(114, 67, 198, .55);

        color:
            #c89cff;
    }


    .masterclass-page
    .mc-experience-bottom__icon svg {
        width: 36px;
        height: 36px;

        stroke-width: 1.9;
    }



    /* divider */

    .masterclass-page
    .mc-experience-bottom__divider {
        position: relative;

        z-index: 2;

        width: 1px;
        height: 61px;

        background:
            rgba(207, 183, 255, .55);
    }



    /* copy */

    .masterclass-page
    .mc-experience-bottom__copy {
        position: relative;

        z-index: 2;
    }


    .masterclass-page
    .mc-experience-bottom__copy strong,
    .masterclass-page
    .mc-experience-bottom__copy span {
        display: block;

        font-size: 20px;

        line-height: 1.04;

        font-weight: 900;

        letter-spacing: -.035em;
    }


    .masterclass-page
    .mc-experience-bottom__copy strong {
        color: #ffffff;
    }


    .masterclass-page
    .mc-experience-bottom__copy span {
        margin-top: 5px;

        color: #a76aff;
    }

}



/* ======================================================================
   SMALL MOBILE — ~390PX
   ====================================================================== */

@media (max-width: 480px) {


    .masterclass-page
    .mc-experience {
        padding:
            28px 0
            39px;
    }


    .masterclass-page
    .mc-experience > .home-shell {
        padding:
            0 14px;
    }



    /* heading */

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


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

        font-size:
            10.5px !important;
    }



    /* industry cards */

    .masterclass-page
    .mc-industry {
        grid-template-columns:
            41%
            minmax(0,59%);

        min-height: 105px;
    }


    .masterclass-page
    .mc-industry__image,
    .masterclass-page
    .mc-industry__image img {
        min-height: 105px;
    }


    .masterclass-page
    .mc-industry__content {
        grid-template-columns:
            47px
            minmax(0,1fr);

        gap: 8px;

        padding:
            10px 9px;
    }


    .masterclass-page
    .mc-industry__icon {
        width: 44px;
        height: 44px;
    }


    .masterclass-page
    .mc-industry__icon svg {
        width: 25px;
        height: 25px;
    }


    .masterclass-page
    .mc-industry__copy small {
        font-size: 8px;
    }


    .masterclass-page
    .mc-industry__copy h3 {
        font-size: 10px;
    }


    .masterclass-page
    .mc-industry__copy p {
        margin-top: 5px;

        font-size: 7.5px;
    }



    /* flow */

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

        min-height: 111px;

        padding:
            12px 10px;
    }


    .masterclass-page
    .mc-experience-flow__icon {
        width: 48px;
        height: 48px;

        margin-bottom: 6px;
    }


    .masterclass-page
    .mc-experience-flow__icon svg {
        width: 28px;
        height: 28px;
    }


    .masterclass-page
    .mc-experience-flow__item strong {
        font-size: 9px;
    }


    .masterclass-page
    .mc-experience-flow__arrow {
        font-size: 19px;
    }



    /* purple band */

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

        gap: 13px;

        min-height: 85px;

        padding:
            12px 15px;
    }


    .masterclass-page
    .mc-experience-bottom__icon {
        width: 52px;
        height: 52px;
    }


    .masterclass-page
    .mc-experience-bottom__icon svg {
        width: 29px;
        height: 29px;
    }


    .masterclass-page
    .mc-experience-bottom__divider {
        height: 50px;
    }


    .masterclass-page
    .mc-experience-bottom__copy strong,
    .masterclass-page
    .mc-experience-bottom__copy span {
        font-size: 15px;
    }

}
/* ======================================================================
   MASTERCLASS
   07 — ABOUT ROMAN
   MOBILE
   ====================================================================== */

@media (max-width: 1023px) {


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

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

        overflow: hidden;

        width: 100%;

        padding:
            32px 0
            41px;

        background:
            radial-gradient(
                circle at 100% 5%,
                rgba(93, 33, 255, .19),
                transparent 31%
            ),
            radial-gradient(
                circle at 14% 100%,
                rgba(87, 26, 255, .25),
                transparent 34%
            ),
            linear-gradient(
                180deg,
                #07101a 0%,
                #06101a 55%,
                #070d19 100%
            );

        color: #ffffff;
    }


    .masterclass-page
    .mc-about > .home-shell {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;

        padding:
            0 22px;
    }



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

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

        align-items: center;

        gap: 11px;

        margin-bottom: 15px;
    }


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

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

        font-weight: 850;
    }


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

        width: 35px;
        height: 1px;

        background: #833cf0;
    }


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

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

        font-weight: 800;

        letter-spacing: .22em;

        text-transform: uppercase;
    }



    /* ==================================================================
       TOP
       ================================================================== */

    .masterclass-page
    .mc-about__top {
        display: grid;

        grid-template-columns:
            minmax(0, .88fr)
            minmax(0, 1.12fr);

        align-items: start;

        gap: 13px;
    }



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

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

        z-index: 3;

        padding-top: 2px;
    }


    .masterclass-page
    .mc-about__copy h2 {
        margin: 0;

        color: #ffffff;

        font-size: clamp(
            38px,
            9.3vw,
            51px
        );

        line-height: .89;

        font-weight: 900;

        letter-spacing: -.058em;
    }


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

        margin-top: 6px;

        color: #8d3cff;
    }


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

        margin:
            15px 0
            0;

        color: #c2c8d3;

        font-size: 12px;

        line-height: 1.38;
    }



    /* ==================================================================
       IMAGE
       ================================================================== */

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

        min-width: 0;

        height: 255px;
    }


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

        left: 0;
        top: -47px;

        width: 100%;
        height: 295px;

        overflow: hidden;

        border-radius:
            0 0 8px 8px;
    }


    .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 top;
    }



    /* side statement */

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

        z-index: 4;

        right: 3px;
        top: -35px;

        width: 76px;

        margin: 0;

        padding-left: 11px;

        border-left:
            1px solid
            #8f46f8;

        color: #d2d6df;

        font-size: 6.5px;

        line-height: 1.8;

        font-weight: 800;

        letter-spacing: .20em;

        text-transform: uppercase;
    }



    /* ==================================================================
       4 EXPERIENCE CARDS
       ================================================================== */

    .masterclass-page
    .mc-about-grid {
        display: grid;

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

        gap: 10px;

        margin-top: 20px;
    }


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

        min-height: 148px;

        padding:
            15px 13px;

        border:
            1px solid
            rgba(93, 111, 141, .25);

        border-radius: 8px;

        background:
            linear-gradient(
                145deg,
                rgba(8, 19, 31, .90),
                rgba(7, 16, 28, .95)
            );

        box-shadow:
            inset 0 0 25px
            rgba(86, 37, 180, .025);
    }



    /* ICON */

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

        place-items: center;

        width: 48px;
        height: 48px;

        margin-bottom: 11px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(111, 38, 244, .35),
                rgba(68, 23, 147, .18)
            );

        color: #9442ff;

        box-shadow:
            inset 0 0 0 1px
            rgba(128, 60, 246, .20);
    }


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

        stroke-width: 1.9;
    }



    /* TEXT */

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

        color: #ffffff;

        font-size: 13px;

        line-height: 1.15;

        font-weight: 850;

        letter-spacing: -.025em;
    }


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

        color: #abb3c1;

        font-size: 10px;

        line-height: 1.35;
    }



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

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

        display: grid;

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

        gap: 15px;

        align-items: center;

        margin:
            16px 0
            0;

        padding:
            17px 18px;

        border:
            1px solid
            rgba(128, 58, 255, .55);

        border-radius: 9px;

        background:
            radial-gradient(
                circle at 100% 100%,
                rgba(116, 37, 255, .40),
                transparent 46%
            ),
            linear-gradient(
                135deg,
                #1d1140,
                #211046
            );

        box-shadow:
            0 12px 35px
            rgba(40, 8, 93, .18);
    }



    /* quote mark */

    .masterclass-page
    .mc-about-quote::before {
        content: "“";

        position: absolute;

        left: 16px;
        top: 8px;

        color: #9346ff;

        font-family: Georgia, serif;

        font-size: 65px;

        line-height: 1;

        font-weight: 900;

        opacity: .92;
    }



    /* quote content */

    .masterclass-page
    .mc-about-quote > div {
        padding-left: 47px;
    }


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

        color: #ffffff;

        font-size: 17px;

        line-height: 1.08;

        font-weight: 850;

        letter-spacing: -.035em;
    }


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

        margin-top: 4px;

        color: #9949ff;

        font-size: 17px;

        line-height: 1.08;

        font-weight: 900;
    }



    /* author */

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

        min-height: 70px;

        flex-direction: column;

        justify-content: center;

        padding-left: 13px;

        border-left:
            1px solid
            rgba(185, 135, 255, .55);
    }


    .masterclass-page
    .mc-about-quote footer b {
        color: #d5d7e0;

        font-size: 7px;

        line-height: 1;

        font-weight: 800;

        letter-spacing: .19em;
    }


    .masterclass-page
    .mc-about-quote footer span {
        margin-top: 7px;

        color: #d5d7e0;

        font-size: 7px;

        line-height: 1.5;

        font-weight: 650;

        letter-spacing: .18em;
    }



    /* ==================================================================
       NEXT
       ================================================================== */

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

        display: flex;

        flex-direction: column;

        align-items: center;

        margin-top: 18px;

        text-align: center;
    }


    .masterclass-page
    .mc-about-next::before {
        content: "";

        width: 1px;
        height: 24px;

        background:
            linear-gradient(
                180deg,
                #7939ed,
                #6e2ddd
            );
    }


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

        place-items: center;

        width: 35px;
        height: 35px;

        border:
            1px solid
            rgba(140, 98, 218, .62);

        border-radius: 50%;

        color: #be99ff;

        font-size: 17px;
    }


    .masterclass-page
    .mc-about-next small {
        max-width: 220px;

        margin-top: 9px;

        color: #bbc0cd;

        font-size: 7px;

        line-height: 1.6;

        font-weight: 800;

        letter-spacing: .20em;

        text-transform: uppercase;
    }

}



/* ======================================================================
   SMALL MOBILE — ~390PX
   ====================================================================== */

@media (max-width: 480px) {


    .masterclass-page
    .mc-about {
        padding:
            28px 0
            35px;
    }


    .masterclass-page
    .mc-about > .home-shell {
        padding:
            0 15px;
    }


    .masterclass-page
    .mc-about__top {
        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.1fr);

        gap: 8px;
    }


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


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


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


    .masterclass-page
    .mc-about__image {
        top: -43px;

        height: 270px;
    }


    .masterclass-page
    .mc-about__side {
        width: 61px;

        padding-left: 8px;

        font-size: 5.2px;
    }



    /* cards */

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

        margin-top: 15px;
    }


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

        padding:
            12px 10px;
    }


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


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


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


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

        font-size: 8px;
    }



    /* quote */

    .masterclass-page
    .mc-about-quote {
        grid-template-columns:
            minmax(0,1fr)
            82px;

        gap: 9px;

        padding:
            14px 12px;
    }


    .masterclass-page
    .mc-about-quote::before {
        left: 10px;
        top: 6px;

        font-size: 53px;
    }


    .masterclass-page
    .mc-about-quote > div {
        padding-left: 39px;
    }


    .masterclass-page
    .mc-about-quote p,
    .masterclass-page
    .mc-about-quote strong {
        font-size: 14px;
    }


    .masterclass-page
    .mc-about-quote footer {
        padding-left: 9px;
    }


    .masterclass-page
    .mc-about-quote footer b,
    .masterclass-page
    .mc-about-quote footer span {
        font-size: 5.7px;
    }

}
/* ======================================================================
   MASTERCLASS
   08 — FREQUENT QUESTIONS
   MOBILE
   ====================================================================== */

@media (max-width: 1023px) {


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

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

        overflow: hidden;

        width: 100%;

        padding:
            45px 0
            48px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(111, 45, 255, .05),
                transparent 34%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(111, 45, 255, .04),
                transparent 33%
            ),
            #fcfcfe;

        color: #080a11;
    }


    .masterclass-page
    .mc-faq > .home-shell {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;

        padding:
            0 22px;
    }



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

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

        margin:
            0 auto
            28px;

        text-align: center;
    }


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

        color: #7a31ef;

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

        font-weight: 800;

        letter-spacing: .34em;

        text-transform: uppercase;
    }


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

        color: #080a11;

        font-size: clamp(
            40px,
            9.8vw,
            53px
        );

        line-height: .91;

        font-weight: 900;

        letter-spacing: -.058em;
    }


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

        margin-top: 5px;

        color: #7430ef;
    }


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

        color: #697184;

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



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

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

        gap: 11px;

        width: 100%;
    }



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

    .masterclass-page .mc-faq-item {
        overflow: hidden;

        width: 100%;

        margin: 0;

        border:
            1px solid
            #e4e5ea;

        border-radius: 9px;

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

        box-shadow:
            0 5px 18px
            rgba(24, 17, 48, .018);
    }


    /*
     * IMPORTANT:
     * collapsed by default
     */

    .masterclass-page
    .mc-faq-item:not([open])
    .mc-faq-item__answer {
        display: none;
    }



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

    .masterclass-page
    .mc-faq-item summary {
        display: grid;

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

        align-items: center;

        gap: 14px;

        min-height: 87px;

        padding:
            12px 14px;

        cursor: pointer;

        list-style: none;

        -webkit-tap-highlight-color:
            transparent;
    }


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



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

    .masterclass-page
    .mc-faq-item__icon {
        display: grid;

        place-items: center;

        width: 52px;
        height: 52px;

        border-radius: 50%;

        background:
            #f0ebff;

        color: #6225e8;
    }


    .masterclass-page
    .mc-faq-item__icon svg {
        width: 27px;
        height: 27px;

        stroke-width: 1.75;
    }



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

    .masterclass-page
    .mc-faq-item summary strong {
        min-width: 0;

        color: #101219;

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

        font-weight: 900;

        letter-spacing: -.025em;
    }



    /* ==================================================================
       PLUS BUTTON
       ================================================================== */

    .masterclass-page
    .mc-faq-item__toggle {
        display: grid;

        place-items: center;

        width: 34px;
        height: 34px;

        border-radius: 50%;

        background:
            #f0ebff;

        color: #6729eb;

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

        font-weight: 400;

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


    .masterclass-page
    .mc-faq-item[open]
    .mc-faq-item__toggle {
        transform:
            rotate(180deg);

        background:
            #eae2ff;
    }



    /* ==================================================================
       ANSWER
       ================================================================== */

    .masterclass-page
    .mc-faq-item__answer {
        padding:
            0 66px
            18px
            82px;
    }


    .masterclass-page
    .mc-faq-item__answer p {
        margin: 0;

        color: #646d80;

        font-size: 12px;
        line-height: 1.42;
    }



    /* ==================================================================
       OPEN STATE
       ================================================================== */

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

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #faf7ff
            );
    }



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

    .masterclass-page .mc-help-card {
        display: grid;

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

        align-items: center;

        gap: 14px;

        width: 100%;

        min-height: 78px;

        margin-top: 17px;

        padding:
            11px 17px;

        border:
            1px solid
            #e8e2f6;

        border-radius: 9px;

        background:
            linear-gradient(
                100deg,
                #f5f1ff,
                #f7f4ff
            );

        color: #11131a;

        text-decoration: none;
    }


    .masterclass-page
    .mc-help-card > svg {
        width: 49px;
        height: 49px;

        padding: 12px;

        border-radius: 50%;

        background:
            #eee7ff;

        color:
            #7030ec;
    }


    .masterclass-page
    .mc-help-card div {
        min-width: 0;

        padding-left: 10px;

        border-left:
            1px solid
            #cfc2ec;
    }


    .masterclass-page
    .mc-help-card small {
        display: block;

        margin-bottom: 5px;

        color: #72798a;

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

        font-weight: 800;

        letter-spacing: .20em;

        text-transform: uppercase;
    }


    .masterclass-page
    .mc-help-card strong {
        display: block;

        color: #101219;

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

        font-weight: 900;
    }


    .masterclass-page
    .mc-help-card > span {
        color: #7430ef;

        text-align: right;

        font-size: 24px;
        line-height: 1;
    }

}



/* ======================================================================
   SMALL MOBILE
   ====================================================================== */

@media (max-width: 480px) {


    .masterclass-page .mc-faq {
        padding:
            38px 0
            41px;
    }


    .masterclass-page
    .mc-faq > .home-shell {
        padding:
            0 15px;
    }


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


    .masterclass-page
    .mc-faq
    .mc-heading > p {
        font-size: 12px;
    }


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

        gap: 10px;

        min-height: 75px;

        padding:
            10px 11px;
    }


    .masterclass-page
    .mc-faq-item__icon {
        width: 44px;
        height: 44px;
    }


    .masterclass-page
    .mc-faq-item__icon svg {
        width: 23px;
        height: 23px;
    }


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


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

        font-size: 20px;
    }


    .masterclass-page
    .mc-faq-item__answer {
        padding:
            0 48px
            15px
            67px;
    }


    .masterclass-page
    .mc-faq-item__answer p {
        font-size: 10px;
    }


    .masterclass-page
    .mc-help-card {
        grid-template-columns:
            49px
            minmax(0,1fr)
            23px;

        gap: 9px;

        min-height: 70px;

        padding:
            9px 12px;
    }


    .masterclass-page
    .mc-help-card > svg {
        width: 42px;
        height: 42px;

        padding: 10px;
    }


    .masterclass-page
    .mc-help-card strong {
        font-size: 14px;
    }

}/* ======================================================================
   MASTERCLASS
   09 — FINAL REGISTRATION
   MOBILE
   ====================================================================== */

@media (max-width: 1023px) {


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

        overflow: hidden;

        width: 100%;

        padding:
            47px 0
            52px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(112, 44, 255, .05),
                transparent 36%
            ),
            #fcfcfe;

        color: #080a11;
    }


    .masterclass-page
    .mc-final > .home-shell {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;

        padding:
            0 22px;
    }



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

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

        margin:
            0 auto
            27px;

        text-align: center;
    }


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

        color: #7430ef;

        font-size: 9px;

        font-weight: 800;

        letter-spacing: .34em;

        text-transform: uppercase;
    }


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

        color: #070910;

        font-size:
            clamp(
                39px,
                9.7vw,
                52px
            );

        line-height: .91;

        font-weight: 900;

        letter-spacing: -.058em;
    }


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

        margin-top: 5px;

        color: #7430ef;
    }


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

        color: #667084;

        font-size: 15px;

        line-height: 1.3;
    }



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

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

        padding:
            16px;

        border:
            1px solid
            #e1e3e9;

        border-radius: 11px;

        background:
            #ffffff;

        box-shadow:
            0 16px 38px
            rgba(21, 14, 47, .035);
    }



    /* heading */

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

        align-items: center;

        gap: 12px;

        margin-bottom: 10px;
    }


    .masterclass-page
    .mc-final-webinar-card__heading > svg {
        width: 25px;
        height: 25px;

        color: #7430ef;
    }


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

        color: #101219;

        font-size: 17px;

        line-height: 1.15;

        font-weight: 850;
    }



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

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

        width: 100%;

        height: 390px;

        margin: 0;

        border: 0;

        background: transparent;
    }



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

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

        margin-top: 13px;

        color: #687184;

        text-align: center;

        font-size: 10px;

        line-height: 1.35;
    }

}



/* ======================================================================
   SMALL MOBILE
   ====================================================================== */

@media (max-width: 480px) {


    .masterclass-page
    .mc-final {
        padding:
            39px 0
            43px;
    }


    .masterclass-page
    .mc-final > .home-shell {
        padding:
            0 15px;
    }


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


    .masterclass-page
    .mc-final-webinar-card {
        padding:
            12px;
    }


    .masterclass-page
    .mc-final-webinar-card__heading h3 {
        font-size: 15px;
    }


    .masterclass-page
    .mc-webinar-frame {
        height: 370px;
    }

}
/* =========================================================
   WEBINARKIT — HIDE OPTIONAL PHONE INPUT
   ========================================================= */

.masterclass-page .mc-webinarkit .wk_registration_form_phone,
.masterclass-page .mc-webinarkit .iti,
.masterclass-page .mc-webinarkit form > .iti {
    display: none !important;
}
/* ======================================================================
   MASTERCLASS
   04 — THE SOLUTION
   MOBILE
   ====================================================================== */

@media (max-width: 1023px) {


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

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

        overflow: hidden;

        width: 100%;

        padding:
            37px 0
            47px;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(113, 48, 255, .045),
                transparent 34%
            ),
            radial-gradient(
                circle at 0% 100%,
                rgba(113, 48, 255, .035),
                transparent 35%
            ),
            #ffffff;

        color: #080a11;
    }


    .masterclass-page
    .mc-solution > .home-shell {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;

        padding:
            0 22px;
    }



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

    .masterclass-page
    .mc-solution
    .mc-heading {
        width: 100%;
        max-width: 540px;

        margin:
            0 auto
            25px;

        text-align: center;
    }



    /* SECTION 04 */

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

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

        min-height: 27px;

        margin-bottom: 18px;

        padding:
            5px 21px;

        border: 0;

        border-radius: 999px;

        background:
            #f0e9ff;

        color:
            #7330ef;

        font-size: 9px;

        line-height: 1;

        font-weight: 800;

        letter-spacing: .20em;

        text-transform: uppercase;
    }



    /* THE SOLUTION */

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

        color:
            #7430ef;

        font-size: 9px;

        line-height: 1;

        font-weight: 800;

        letter-spacing: .34em;

        text-transform: uppercase;
    }



    /* TITLE */

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

        margin:
            0 auto;

        color:
            #070910;

        font-size:
            clamp(
                42px,
                10.2vw,
                56px
            );

        line-height: .89;

        font-weight: 900;

        letter-spacing: -.058em;
    }


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

        margin-top: 4px;

        color:
            #7430ef;
    }



    /* INTRO */

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

        margin:
            18px auto
            0 !important;

        color:
            #687184 !important;

        font-size: 14px !important;

        line-height: 1.38 !important;
    }



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

    .masterclass-page
    .mc-system-map {
        width: 100%;

        max-width: 560px;

        margin:
            0 auto;
    }



    /* ==================================================================
       ROWS
       ================================================================== */

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

        align-items: flex-start;

        justify-content: center;

        width: 100%;
    }



    /* first row */

    .masterclass-page
    .mc-system-map__row--top {
        gap: 6px;
    }



    /* second row */

    .masterclass-page
    .mc-system-map__row--bottom {
        gap: 14px;

        max-width: 470px;

        margin:
            0 auto;
    }



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

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

        flex:
            1 1 0;

        min-width: 0;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }



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

    .masterclass-page
    .mc-system-map__icon {
        display: grid;

        place-items: center;

        width: 81px;
        height: 81px;

        margin-bottom: 9px;

        border-radius: 8px;

        background:
            linear-gradient(
                145deg,
                #f4f0ff,
                #f7f4ff
            );

        color:
            #5820e7;
    }


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

        stroke-width: 1.8;
    }



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

    .masterclass-page
    .mc-system-map__step > small {
        display: block;

        margin-bottom: 4px;

        color:
            #6c2aec;

        font-size: 9px;

        line-height: 1;

        font-weight: 900;
    }



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

    .masterclass-page
    .mc-system-map__step h3 {
        margin: 0;

        color:
            #11131a;

        font-size: 14px;

        line-height: 1.05;

        font-weight: 900;

        letter-spacing: -.025em;
    }



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

    .masterclass-page
    .mc-system-map__step p {
        max-width: 100px;

        margin:
            6px auto
            0;

        color:
            #687184;

        font-size: 8.5px;

        line-height: 1.25;
    }



    /* ==================================================================
       ARROWS
       ================================================================== */

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

        margin-top: 32px;

        color:
            #6728e9;

        font-size: 21px;

        line-height: 1;
    }



    /* ==================================================================
       CONNECTOR
       top row -> bottom row
       ================================================================== */

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

        width: 78%;

        height: 47px;

        margin:
            5px auto
            -2px;
    }


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

        position: absolute;

        top: 6px;
        right: 3px;
        left: 6px;

        height: 20px;

        border-top:
            1.5px solid
            #7831ef;

        border-right:
            1.5px solid
            #7831ef;

        border-radius:
            0 9px 0 0;
    }


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

        position: absolute;

        left: 5px;
        top: 24px;

        width: 1.5px;
        height: 17px;

        background:
            #7831ef;
    }


    .masterclass-page
    .mc-system-map__connector > span {
        position: absolute;

        left: 1px;
        bottom: 1px;

        width: 8px;
        height: 8px;

        border-left:
            1.5px solid
            #7831ef;

        border-bottom:
            1.5px solid
            #7831ef;

        transform:
            rotate(-45deg);
    }



    /* ==================================================================
       BOTTOM COMPLETE SYSTEM CARD
       ================================================================== */

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

        overflow: hidden;

        display: grid;

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

        align-items: center;

        gap: 17px;

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

        min-height: 107px;

        margin:
            30px auto
            0;

        padding:
            17px 22px;

        border:
            1px solid
            #e3dcf7;

        border-radius:
            9px;

        background:
            linear-gradient(
                105deg,
                #f8f4ff,
                #f1ebff
            );
    }



    /* decorative wave */

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

        position: absolute;

        right: -25px;
        bottom: -38px;

        width: 250px;
        height: 80px;

        border-radius: 50%;

        background:
            rgba(127, 68, 244, .07);

        transform:
            rotate(-8deg);
    }



    /* icon */

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

        z-index: 2;

        display: grid;

        place-items: center;

        width: 62px;
        height: 62px;

        border-radius: 50%;

        background:
            #eee7ff;

        color:
            #7030ec;
    }


    .masterclass-page
    .mc-system-complete__icon svg {
        width: 34px;
        height: 34px;
    }



    /* text */

    .masterclass-page
    .mc-system-complete > div:last-child {
        position: relative;

        z-index: 2;

        padding-left: 17px;

        border-left:
            1px solid
            #cab7ef;
    }


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

        font-size: 15px;

        line-height: 1.2;

        font-weight: 900;

        letter-spacing: .20em;

        text-transform: uppercase;
    }


    .masterclass-page
    .mc-system-complete strong {
        color:
            #7430ef;
    }


    .masterclass-page
    .mc-system-complete span {
        margin-top: 7px;

        color:
            #11131a;
    }

}



/* ======================================================================
   SMALL MOBILE — 390PX
   ====================================================================== */

@media (max-width: 480px) {


    .masterclass-page
    .mc-solution {
        padding:
            33px 0
            41px;
    }


    .masterclass-page
    .mc-solution > .home-shell {
        padding:
            0 14px;
    }


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


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

        font-size:
            11.5px !important;
    }



    /* row */

    .masterclass-page
    .mc-system-map__row--top {
        gap: 3px;
    }


    .masterclass-page
    .mc-system-map__row--bottom {
        gap: 9px;

        max-width: 350px;
    }



    /* icons */

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

        margin-bottom: 7px;
    }


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



    /* arrow */

    .masterclass-page
    .mc-system-map__arrow {
        margin-top: 24px;

        font-size: 17px;
    }



    /* labels */

    .masterclass-page
    .mc-system-map__step > small {
        font-size: 7px;
    }


    .masterclass-page
    .mc-system-map__step h3 {
        font-size: 11px;
    }


    .masterclass-page
    .mc-system-map__step p {
        max-width: 75px;

        font-size: 6.5px;
    }



    /* connector */

    .masterclass-page
    .mc-system-map__connector {
        height: 40px;

        margin-top: 2px;
    }



    /* bottom */

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

        gap: 12px;

        min-height: 91px;

        margin-top: 25px;

        padding:
            14px 16px;
    }


    .masterclass-page
    .mc-system-complete__icon {
        width: 49px;
        height: 49px;
    }


    .masterclass-page
    .mc-system-complete__icon svg {
        width: 27px;
        height: 27px;
    }


    .masterclass-page
    .mc-system-complete > div:last-child {
        padding-left: 13px;
    }


    .masterclass-page
    .mc-system-complete strong,
    .masterclass-page
    .mc-system-complete span {
        font-size: 11px;

        letter-spacing: .17em;
    }
.masterclass-page
.mc-experience-desktop,

.masterclass-page
.mc-experience-desktop-bottom {
    display: none;
}
}
/* =========================================================
   STICKY CTA
   ========================================================= */

.mc-sticky-cta {
    position: fixed;
    z-index: 1300;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .24s ease,
        transform .24s ease,
        visibility .24s ease;
}

.mc-sticky-cta.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mc-sticky-cta__inner {
    display: grid;
    align-items: center;

    background: linear-gradient(135deg, #060b16 0%, #050913 52%, #0b0a1f 100%);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, .22),
        0 1px 0 rgba(255, 255, 255, .04) inset;

    color: #ffffff;
}

.mc-sticky-cta__brand {
    min-width: 0;
}

.mc-sticky-cta__logo {
    margin: 0;

    color: #ffffff;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.mc-sticky-cta__sub {
    margin-top: 4px;

    color: rgba(255, 255, 255, .82);
    line-height: 1.1;
    font-weight: 500;
}

.mc-sticky-cta__divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, .12);
}

.mc-sticky-cta__copy {
    min-width: 0;
}

.mc-sticky-cta__title {
    color: #ffffff;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mc-sticky-cta__text {
    margin-top: 4px;

    color: rgba(255, 255, 255, .74);
    line-height: 1.15;
    font-weight: 500;
}

.mc-sticky-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    text-decoration: none;
    white-space: nowrap;

    border: 0;
    border-radius: 16px;

    background: #f4c645;
    color: #111111;

    font-weight: 800;
    letter-spacing: -.01em;

    box-shadow:
        0 8px 20px rgba(244, 198, 69, .18),
        0 1px 0 rgba(255, 255, 255, .25) inset;

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

.mc-sticky-cta__button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 26px rgba(244, 198, 69, .24),
        0 1px 0 rgba(255, 255, 255, .25) inset;
}

.mc-sticky-cta__button:focus-visible {
    outline: 2px solid #7c43ff;
    outline-offset: 3px;
}

.mc-sticky-cta__arrow {
    line-height: 1;
    font-size: 1.05em;
}

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

@media (min-width: 1024px) {

    .mc-sticky-cta {
        top: 16px;
        left: 50%;

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

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

    .mc-sticky-cta.is-visible {
        transform: translate(-50%, 0);
    }

    .mc-sticky-cta__inner {
        grid-template-columns: auto auto minmax(0, 1fr) auto;

        min-height: 72px;
        padding: 10px 14px 10px 32px;

        border-radius: 20px;
    }

    .mc-sticky-cta__logo {
        font-size: 18px;
    }

    .mc-sticky-cta__sub {
        font-size: 14px;
    }

    .mc-sticky-cta__copy {
        padding-right: 20px;
    }

    .mc-sticky-cta__title {
        font-size: 17px;
    }

    .mc-sticky-cta__text {
        font-size: 14px;
    }

    .mc-sticky-cta__button {
        min-width: 260px;
        height: 56px;
        padding: 0 28px;

        font-size: 18px;
        border-radius: 16px;
    }
}

/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .mc-sticky-cta {
        left: 16px;
        right: 16px;
        bottom: calc(12px + env(safe-area-inset-bottom));

        transform: translateY(18px);
    }

    .mc-sticky-cta.is-visible {
        transform: translateY(0);
    }

    .mc-sticky-cta__inner {
        grid-template-columns: minmax(0, 1fr) auto;

        min-height: 56px;
        padding: 8px 10px 8px 16px;

        border-radius: 18px;
    }

    .mc-sticky-cta__divider,
    .mc-sticky-cta__copy {
        display: none;
    }

    .mc-sticky-cta__logo {
        font-size: 15px;
    }

    .mc-sticky-cta__sub {
        font-size: 11px;
        margin-top: 3px;
    }

    .mc-sticky-cta__button {
        min-width: 142px;
        height: 40px;
        padding: 0 16px;

        font-size: 15px;
        border-radius: 12px;
        gap: 8px;
    }
}