/*
 * =========================================================
 * D2C GAME
 * SECTION 05 — D2C OS
 *
 * DESKTOP ONLY
 * Mobile remains unchanged.
 * =========================================================
 */

/*
 * Desktop-only elements.
 * Never shown on mobile.
 */

.os-side,
.os-section__background,
.os-section__background-shade {
    display: none;
}

@media (min-width: 1024px) {

.os-side,
.os-section__background,
.os-section__background-shade {
    display: block;
}

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

    .os-section {
        position: relative;

        margin: 0;
        padding: 0;

        background: #ffffff;

        overflow: hidden;
    }


    /*
     * Width comes from desktop-layout.css:
     * 1440px maximum.
     */

    .os-section .home-shell {
        position: relative;

        padding: 0;

        overflow: hidden;

        background: #ffffff;
    }



    /* =====================================================
       DARK TOP AREA
       ===================================================== */

     .os-section .home-shell {
        position: relative;

        min-height: 900px;

        overflow: hidden;

        background: #080d15;
    }


    /* uploaded background */

    .os-section__background {
        position: absolute;

        z-index: 0;

        top: 0;
        left: 0;

        width: 100%;
        height: 650px;

        overflow: hidden;
    }


    .os-section__background img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;
    }


    /*
     * This shade makes text readable
     * even if administrator uploads a bright image.
     */

    .os-section__background-shade {
        position: absolute;

        z-index: 1;

        top: 0;
        left: 0;

        width: 100%;
        height: 650px;

        background:

            linear-gradient(
                90deg,
                rgba(5,9,15,.82) 0%,
                rgba(5,9,15,.48) 31%,
                rgba(5,9,15,.30) 55%,
                rgba(5,9,15,.42) 77%,
                rgba(5,9,15,.58) 100%
            ),

            linear-gradient(
                180deg,
                rgba(5,9,15,.20) 0%,
                rgba(5,9,15,.05) 58%,
                rgba(5,9,15,.30) 100%
            );

        pointer-events: none;
    }


    /* content must sit above background */

    .os-heading,
    .os-dashboard,
    .os-side {
        position: relative;

        z-index: 3;
    }


    .os-process,
    .os-footer-line {
        position: relative;

        z-index: 4;
    }

.os-side-lines {
    display: grid;

    gap: 2px;
}


.os-side-lines span {
    display: block;

    color: #d5d8df;

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

    font-weight: 400;
}



    /*
     * Make everything above process row
     * appear above dark background.
     */

    .os-heading,
    .os-dashboard,
    .os-side {
        position: relative;

        z-index: 3;
    }



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

    .os-heading {
        width: 100%;
        max-width: 1050px;

        margin:
            0 auto;

        padding:
            35px 0
            0;

        text-align: center;
    }


    .os-heading .home-kicker {
        margin:
            0 0
            16px;

        color: #9a4eff;

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

        font-weight: 800;

        letter-spacing: .38em;

        text-transform: uppercase;
    }


    .os-heading h2 {
        margin: 0;

        color: #ffffff;

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

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .os-heading h2 .purple-text,
    .os-heading h2 .os-title-accent {
        color: #772fff;
    }


    /*
     * Complexity → Clarity → Execution
     */

    .os-heading h2 span {
        white-space: nowrap;
    }


    .os-heading h3 {
        max-width: none;

        margin:
            13px auto
            0;

        color: #ffffff;

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

        font-weight: 800;

        letter-spacing: -.03em;
    }


    .os-heading > p:last-of-type {
        max-width: 710px;

        margin:
            9px auto
            0;

        color: #d8dce4;

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

        font-weight: 400;
    }



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

    .os-heading .gold-button {
        display: inline-flex;

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

        gap: 18px;

        width: 290px;

        height: 50px;
        min-height: 50px;

        margin:
            15px 12px
            0 0;

        padding:
            0 20px;

        border: 0;

        border-radius: 7px;

        background:
            linear-gradient(
                90deg,
                #ffc229,
                #ffca36
            );

        color: #090c10;

        text-decoration: none;

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

        font-weight: 900;

        box-shadow:
            0 8px 22px
            rgba(255, 192, 35, .13);
    }


    .os-heading .gold-button svg {
        width: 19px;
        height: 19px;
    }


    .training-link {
        display: inline-flex;

        align-items: center;

        gap: 11px;

        margin:
            15px 0
            0 10px;

        color: #ffffff;

        text-decoration: none;

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

        font-weight: 500;

        border-bottom:
            1px solid
            rgba(255,255,255,.48);

        padding-bottom: 5px;
    }


    .training-link svg {
        width: 27px;
        height: 27px;
    }



    /* =====================================================
       LEFT SIDE — COMPLEXITY
       ===================================================== */

    .os-side {
        position: absolute;

        top: 245px;

        color: #ffffff;
    }


    .os-side--left {
        left: 105px;

        width: 200px;
    }


    .os-side small {
        display: block;

        margin-bottom: 8px;

        color: #d2d5dc;

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

        font-weight: 700;

        letter-spacing: .25em;

        text-transform: uppercase;
    }


    .os-side h3 {
        margin:
            0 0
            12px;

        color: #ffffff;

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

        font-weight: 800;

        letter-spacing: .13em;

        text-transform: uppercase;
    }


    .os-side > p {
        margin: 0;

        color: #d5d8df;

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

        font-weight: 400;
    }



    /* =====================================================
       RIGHT SIDE — EXECUTION
       ===================================================== */

    .os-side--right {
        right: 75px;

        width: 245px;
    }


    .os-execution-list {
        display: grid;

        gap: 12px;

        margin:
            20px 0
            0;

        padding: 0;

        list-style: none;
    }


    .os-execution-list li {
        display: grid;

        grid-template-columns:
            25px 1fr;

        gap: 10px;

        align-items: center;

        color: #ffffff;

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


    .os-execution-list b {
        display: grid;

        place-items: center;

        width: 25px;
        height: 25px;

        border-radius: 50%;

        background: #7731ff;

        color: #ffffff;

        font-size: 13px;

        box-shadow:
            0 0 12px
            rgba(119, 49, 255, .40);
    }



    /* =====================================================
       DASHBOARD / LAPTOP
       ===================================================== */

    .os-dashboard {
        display: block;

        width: 730px;
        max-width: 730px;

        height: 390px;

        margin:
            21px auto
            0;

        border-radius: 15px;

        overflow: hidden;

        object-fit: contain;

        object-position:
            center bottom;

        filter:
            drop-shadow(
                0 18px 35px
                rgba(0,0,0,.35)
            );
            border: 0;
    box-shadow: none;
}
    }


    picture.os-dashboard {
        display: block;
    }


    picture.os-dashboard img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;

        object-position:
            center bottom;
    }



    /* =====================================================
       PROCESS ROW — WHITE PART
       ===================================================== */

    .os-process {
        position: relative;

        z-index: 4;

        display: grid;

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

        gap: 0;

        width: 100%;
        max-width:100%;
        margin: 0;

        padding:
            21px 75px
            12px;

        background: #ffffff;

        border: 0;
    }


    .os-process__row {
        position: relative;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: flex-start;

        gap: 0;

        min-width: 0;

        padding:
            0 23px;

        border: 0;

        text-align: center;
    }



    /* =====================================================
       ARROWS BETWEEN PROCESS ITEMS
       ===================================================== */

    .os-process__row:not(:last-child)::after {
        content: "→";

        position: absolute;

        top: 25px;
        right: -8px;

        color: #8290a6;

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

        font-weight: 300;
    }



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

    .os-process__icon {
        display: grid;

        place-items: center;

        width: 58px;
        height: 58px;

        margin:
            0 0
            10px;

        border: 0;

        border-radius: 50%;

        background: #f2eaff;

        color: #6728ff;
    }


    .os-process__icon svg {
        display: block;

        width: 31px;
        height: 31px;
    }



    /* Hide mobile step numbers */

    .os-process__row > small {
        display: none;
    }



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

    .os-process__row h3 {
        margin: 0;

        color: #07090d;

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

        font-weight: 900;

        letter-spacing: -.025em;
    }


    .os-process__row p {
        max-width: 190px;

        margin:
            5px auto
            0;

        color: #536079;

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

        font-weight: 400;
    }



    /* =====================================================
       FOOTER LINE
       ===================================================== */

    .os-footer-line {
        position: relative;

        z-index: 4;

        margin: 0;

        padding:
            22px 0
            31px;

        background: #ffffff;

        color: #6429ff;

        border: 0;

        text-align: center;

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

        font-weight: 800;

        letter-spacing: .42em;

        text-transform: uppercase;
    }


    .os-footer-line::after {
        content: "";

        display: block;

        width: 58px;
        height: 2px;

        margin:
            18px auto
            0;

        background: #7633ff;
    }

}



/* =========================================================
   LAPTOP DESKTOP
   Still desktop only.
   ========================================================= */

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

    .os-heading h2 {
        font-size: 51px;
    }


    .os-heading h3 {
        font-size: 25px;
    }


    .os-side--left {
        left: 55px;
    }


    .os-side--right {
        right: 45px;

        width: 220px;
    }


    .os-dashboard {
        width: 670px;

        max-width: 670px;
    }


    .os-process {
        padding-left: 45px;
        padding-right: 45px;
    }

}