/*
 * =========================================================
 * D2C GAME
 * SECTION 04
 *
 * ONE CONNECTED SYSTEM
 * +
 * THREE STARTING POINTS
 *
 * DESKTOP ONLY >= 1024px
 *
 * Mobile styles remain untouched.
 * =========================================================
 */


@media (min-width: 1024px) {


    /* =====================================================
       04A — ONE CONNECTED SYSTEM
       ===================================================== */

    .connected-visual {
        position: relative;

        margin: 0;
        padding: 0;

        background: #ffffff;

        overflow: hidden;
    }


    /*
     * Dark framed area.
     * The .home-shell width comes from desktop-layout.css.
     */

    .connected-visual .home-shell {
        position: relative;

        padding:
            28px 44px
            0;

        overflow: hidden;

        background:
            radial-gradient(
                ellipse at 0% 0%,
                rgba(102, 39, 255, .43) 0%,
                rgba(102, 39, 255, .10) 18%,
                transparent 37%
            ),

            radial-gradient(
                ellipse at 100% 0%,
                rgba(102, 39, 255, .40) 0%,
                rgba(102, 39, 255, .08) 18%,
                transparent 37%
            ),

            linear-gradient(
                180deg,
                #080818 0%,
                #050612 100%
            );

        color: #ffffff;
    }


    /*
     * Corner purple curves.
     */

    .connected-visual .home-shell::before,
    .connected-visual .home-shell::after {
        content: "";

        position: absolute;

        z-index: 0;

        top: -310px;

        width: 520px;
        height: 520px;

        border-radius: 50%;

        border:
            2px solid
            rgba(115, 48, 255, .62);

        box-shadow:
            0 0 44px
            rgba(109, 43, 255, .32);

        pointer-events: none;
    }


    .connected-visual .home-shell::before {
        left: -270px;
    }


    .connected-visual .home-shell::after {
        right: -270px;
    }


    /* =====================================================
       DARK SECTION HEADING
       ===================================================== */

    .connected-visual .home-heading {
        position: relative;

        z-index: 3;

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

        margin:
            0 auto
            12px;

        text-align: center;
    }


    .connected-visual .home-kicker {
        margin:
            0 0
            14px;

        color: #aa63ff;

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

        font-weight: 800;

        letter-spacing: .42em;

        text-transform: uppercase;
    }


    .connected-visual .home-heading h2 {
        margin: 0;

        color: #ffffff;

        font-size: 52px;
        line-height: .93;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .connected-visual
    .home-heading h2
    .purple-text,

    .connected-visual
    .home-heading h2
    .connected-title-accent {
        color: #9344ff;
    }


    .connected-visual
    .home-heading > p:last-child {
        max-width: 760px;

        margin:
            11px auto
            0;

        color: #e5e5ec;

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

        font-weight: 400;

        letter-spacing: -.01em;
    }


    /* =====================================================
       CONNECTED SYSTEM GRAPHIC
       ===================================================== */

    .connected-diagram {
        position: relative;

        z-index: 2;

        display: block;

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

        height: 300px;

        margin:
            7px auto
            0;

        overflow: hidden;
    }


    picture.connected-diagram {
        display: block;
    }


    .connected-diagram img,
    img.connected-diagram {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;

        object-position:
            center bottom;
    }



    /* =====================================================
       04B — THREE STARTING POINTS
       ===================================================== */

    .starting-section {
        position: relative;

        margin: 0;

        padding:
            27px 0
            62px;

        overflow: hidden;

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #ffffff 84%,
                #fbf9ff 100%
            );

        color: #080a0e;
    }


    /*
     * Keep same 1440px section width.
     */

    .starting-section .home-shell {
        position: relative;
    }


    /* =====================================================
       STARTING POINTS HEADING
       ===================================================== */

    .starting-section .home-heading {
        width: 100%;
        max-width: 900px;

        margin:
            0 auto
            18px;

        text-align: center;
    }


    .starting-section .home-kicker {
        margin:
            0 0
            12px;

        color: #6428ff;

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

        font-weight: 800;

        letter-spacing: .40em;

        text-transform: uppercase;
    }


    .starting-section .home-heading h2 {
        margin: 0;

        color: #06080c;

        font-size: 46px;
        line-height: .94;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .starting-section
    .home-heading h2
    .purple-text,

    .starting-section
    .home-heading h2
    .starting-title-accent {
        color: #6728ff;
    }


    .starting-section
    .home-heading > p:last-child {
        max-width: 770px;

        margin:
            11px auto
            0;

        color: #536078;

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

        font-weight: 400;
    }



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

    .starting-stack {
        display: grid;

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

        gap: 28px;

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

        margin:
            22px auto
            0;

        align-items: stretch;
    }



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

    .starting-card {
        position: relative;

        display: flex;

        flex-direction: column;

        min-width: 0;

        overflow: hidden;

        border:
            1px solid
            #e1e5ec;

        border-radius: 10px;

        background: #ffffff;

        box-shadow:
            0 8px 24px
            rgba(20, 29, 48, .07);
    }



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

    .starting-card__visual {
        position: relative;

        width: 100%;
        height: 150px;

        min-height: 150px;

        overflow: hidden;

        background: #10151c;
    }


    .starting-card__visual picture {
        display: block;

        width: 100%;
        height: 100%;
    }


    .starting-card__visual picture img,
    .starting-card__visual > img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;
    }


    /*
     * Image dark shade.
     */

    .starting-card__visual::after {
        content: "";

        position: absolute;

        z-index: 1;

        inset: 0;

        background:
            linear-gradient(
                90deg,
                rgba(5, 8, 13, .70) 0%,
                rgba(5, 8, 13, .30) 48%,
                rgba(5, 8, 13, .04) 100%
            );

        pointer-events: none;
    }


    /*
     * Text over photo.
     */

    .starting-card__visual strong {
        position: absolute;

        z-index: 2;

        top: 24px;
        left: 22px;

        max-width: 155px;

        margin: 0;

        color: #ffffff;

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

        font-weight: 800;

        letter-spacing: .17em;

        text-transform: uppercase;
    }



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

    .starting-card__body {
        display: flex;

        flex-direction: column;

        flex: 1;

        min-height: 310px;

        padding:
            16px 20px
            18px;
    }



    /* =====================================================
       ICON + STARTING POINT + TITLE
       ===================================================== */

    .starting-card__head {
        display: grid;

        grid-template-columns:
            50px 1fr;

        column-gap: 14px;

        align-items: start;
    }


    .starting-icon {
        display: grid;

        place-items: center;

        width: 48px;
        height: 48px;

        border-radius: 50%;

        background: #f0e8ff;

        color: #6728ff;
    }


    .starting-icon svg {
        display: block;

        width: 27px;
        height: 27px;
    }


    .starting-card__head small {
        display: block;

        margin:
            3px 0
            6px;

        color: #6728ff;

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

        font-weight: 800;

        letter-spacing: .17em;

        text-transform: uppercase;
    }


    .starting-card h3 {
        margin: 0;

        color: #080a0e;

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

        font-weight: 900;

        letter-spacing: -.035em;
    }



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

    .starting-card__body > p {
        margin:
            6px 0
            0
            64px;

        color: #566278;

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

        font-weight: 400;
    }


    .starting-card__body > p::after {
        content: "";

        display: block;

        width: 100%;
        height: 1px;

        margin-top: 11px;

        background: #e2e6ec;
    }



    /* =====================================================
       BULLETS
       ===================================================== */

    .starting-card
    .mini-check-list {
        display: grid;

        gap: 7px;

        margin:
            12px 0
            16px;

        padding: 0;

        list-style: none;
    }


    .starting-card
    .mini-check-list li {
        display: grid;

        grid-template-columns:
            17px 1fr;

        column-gap: 9px;

        align-items: start;

        margin: 0;

        color: #354057;

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

        font-weight: 450;
    }


    .starting-card
    .mini-check-list svg {
        display: block;

        width: 16px;
        height: 16px;

        color: #6528ff;
    }



    /* =====================================================
       GOLD BUTTON
       ===================================================== */

    .starting-card
    .gold-button {
        display: flex;

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

        gap: 18px;

        width: 100%;

        height: 44px;
        min-height: 44px;

        margin-top: auto;

        padding:
            0 16px;

        border: 0;

        border-radius: 7px;

        background:
            linear-gradient(
                90deg,
                #ffc127 0%,
                #ffca37 100%
            );

        color: #080b0e;

        text-decoration: none;

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

        font-weight: 900;

        letter-spacing: -.018em;

        box-shadow:
            0 5px 13px
            rgba(255, 191, 24, .10);
    }


    .starting-card
    .gold-button svg {
        width: 16px;
        height: 16px;
    }



    /* =====================================================
       SECTION BOTTOM MICRO TEXT
       ===================================================== */

    .starting-section
    .micro-tagline {
        margin:
            22px auto
            0;

        color: #6828ff;

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

        font-weight: 800;

        letter-spacing: .34em;

        text-align: center;

        text-transform: uppercase;
    }

}



/* =========================================================
   LAPTOP DESKTOP
   Mobile remains unchanged.
   ========================================================= */

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

    .connected-visual
    .home-heading h2 {
        font-size: 46px;
    }


    .connected-diagram {
        height: 270px;

        max-width: 980px;
    }


    .starting-section
    .home-heading h2 {
        font-size: 41px;
    }


    .starting-stack {
        width: 1100px;

        gap: 22px;
    }


    .starting-card__visual {
        height: 138px;

        min-height: 138px;
    }

}