/*
 * D2C GAME
 * CHOOSE YOUR PATH
 *
 * DESKTOP ONLY
 *
 * Target:
 * supplied 1920 × 1080 design
 *
 * Mobile is intentionally untouched.
 */

@media (min-width: 1024px) {

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

    .path-section {
        position: relative;

        padding:
            60px 0
            104px;

        overflow: hidden;

        background:
            linear-gradient(
                180deg,
                #f9f9fc 0%,
                #ffffff 22%,
                #ffffff 78%,
                #faf8ff 100%
            );

        color: #090b10;
    }
    .path-section
#paths-title
.paths-title-accent {
    color: #762eff;
}


    /*
     * Very subtle diagonal background shapes
     * visible in the reference.
     */

    .path-section::before,
    .path-section::after {
        content: "";

        position: absolute;

        pointer-events: none;

        z-index: 0;
    }

    .path-section::before {
        top: -130px;
        left: -80px;

        width: 900px;
        height: 360px;

        background:
            linear-gradient(
                150deg,
                rgba(236, 239, 255, .68),
                rgba(255,255,255,0)
            );

        transform: rotate(-5deg);
    }

    .path-section::after {
        right: -120px;
        bottom: -160px;

        width: 900px;
        height: 380px;

        background:
            linear-gradient(
                320deg,
                rgba(239, 232, 255, .70),
                rgba(255,255,255,0)
            );

        transform: rotate(4deg);
    }


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

        z-index: 1;

        width:
            min(
                1600px,
                calc(100% - 160px)
            );

        max-width: none;

        margin:
            0 auto;
    }


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

    .path-section .home-heading {
        max-width: 1210px;

        margin:
            0 auto
            26px;

        text-align: center;
    }


    .path-section .home-kicker {
        margin:
            0 0
            25px;

        color: #7030ff;

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

        font-weight: 800;

        letter-spacing: .36em;

        text-transform: uppercase;
    }


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

        color: #05070b;

        font-size: 68px;

        line-height: .93;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    /*
     * Only the Results. part should be purple.
     */

    .path-section .home-heading h2 .purple-text {
        color: #762eff;
    }


    .path-section .home-heading > p:last-child {
        max-width: 1120px;

        margin:
            18px auto
            0;

        color: #4d586b;

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

        font-weight: 400;

        letter-spacing: -.018em;
    }


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

    .path-stack {
        display: grid;

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

        gap: 18px;

        align-items: stretch;

        margin-top: 20px;
    }


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

    .path-card {
        position: relative;

        min-width: 0;

        height: 500px;
        min-height: 500px;
        padding: 25px 25px 25px;
        overflow: hidden;
        border-radius: 14px;
        box-shadow:
            0 12px 34px
            rgba(19, 28, 45, .07);
    }


    .path-card__copy {
        position: relative;

        z-index: 3;

        width: 56%;
        max-width: 440px;
    }


    /* =====================================================
       LEFT / DARK CARD
       ===================================================== */

    .path-card--dark {
        color: #fff;

        background:

            radial-gradient(
                circle at 88% 20%,
                rgba(65,72,81,.45),
                rgba(65,72,81,0) 36%
            ),

            linear-gradient(
                135deg,
                #071017 0%,
                #0b1219 60%,
                #171d23 100%
            );

        border:
            1px solid
            rgba(255,255,255,.06);
    }
    
    .path-card--dark .check-list li svg path{
        stroke: black;
    }

    /* =====================================================
       RIGHT / LIGHT CARD
       ===================================================== */

    .path-card--light {
        color: #07090d;

        background:

            radial-gradient(
                circle at 88% 18%,
                rgba(226,228,233,.92),
                rgba(226,228,233,0) 48%
            ),

            linear-gradient(
                135deg,
                #ffffff 0%,
                #fbfbfc 58%,
                #eceef2 100%
            );

        border:
            1px solid
            #e8eaef;
    }


    /* =====================================================
       PATH LABEL
       ===================================================== */

    .path-card__label {
        display: block;

        margin: 0;

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

        font-weight: 800;

        letter-spacing: .18em;

        text-transform: uppercase;
    }


    .path-card--dark
    .path-card__label {
        color: #d3cee1;
    }


    .path-card--light
    .path-card__label {
        color: #7435ff;
    }


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

    .path-card h3 {
        margin:
            20px 0
            14px;

        font-size: 50px;

        line-height: .94;

        font-weight: 900;

        letter-spacing: -.052em;
    }


    .path-card--dark h3 {
        color: #fff;
    }


    .path-card--light h3 {
        color: #07090d;
    }


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

    .path-card__copy > p {
        max-width: 405px;

        margin: 0;

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

        font-weight: 400;

        letter-spacing: -.018em;
    }


    .path-card--dark
    .path-card__copy > p {
        color: #e0e2e6;
    }


    .path-card--light
    .path-card__copy > p {
        color: #4d586b;
    }


    /* =====================================================
       CHECK LIST
       ===================================================== */

    .path-card .check-list {
        display: grid;

        gap: 15px;

        margin:
            27px 0
            31px;

        padding: 0;

        list-style: none;
    }


    .path-card .check-list li {
        display: grid;

        grid-template-columns:
            25px 1fr;

        gap: 12px;

        align-items: start;

        margin: 0;

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

        font-weight: 450;

        letter-spacing: -.012em;
    }


    .path-card--dark
    .check-list li {
        color: #f2f3f5;
    }


    .path-card--light
    .check-list li {
        color: #4e596b;
    }


    .path-card
    .check-list svg {
        display: block;

        width: 25px;
        height: 25px;

        flex:
            0 0
            25px;
    }


    /*
     * Left checks yellow
     */

    .path-card--dark
    .check-list svg {
        color: #ffc329;
    }


    /*
     * Right checks purple
     */

    .path-card--light
    .check-list svg {
        color: #712cff;
    }


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

    .path-card
    .gold-button {


        z-index: 4;

        display: flex;

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

        width: 375px;

        height: 70px;
        min-height: 70px;

        padding:
            0 26px;

        border: 0;

        border-radius: 9px;

        background:

            linear-gradient(
                90deg,
                #ffc328 0%,
                #ffca36 100%
            );

        color: #090c10;

        box-shadow:
            0 10px 25px
            rgba(255, 191, 26, .14);

        text-decoration: none;

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

        font-weight: 900;

        letter-spacing: -.026em;
    }


    .path-card
    .gold-button svg {
        width: 25px;
        height: 25px;
    }


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

    /*
     * Because we're using <picture>,
     * style both picture and image.
     */

    .path-card__person {
        position: absolute;

        z-index: 2;

        right: -4px;
        bottom: 0;

        display: block;

        width: 46%;
        height: 95%;

        pointer-events: none;
    }


    .path-card__person img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;

        object-position:
            center bottom;
    }


    /* Build & Scale person */

    .path-card--dark
    .path-card__person {
    
    }


    /*
     * AI Operations person is slightly
     * taller / wider in the reference.
     */

    .path-card--light
    .path-card__person {
    width:100%;
    }


    /* =====================================================
       PERSON LIGHT / BLENDING
       ===================================================== */

    /*
     * subtle blend on the left edge of
     * the portrait area
     */

    .path-card::after {
        content: "";

        position: absolute;

        z-index: 1;

        top: 0;
        bottom: 0;

        right: 31%;

        width: 18%;

        pointer-events: none;
    }


    .path-card--dark::after {

        background:

            linear-gradient(
                90deg,
                #0b1218 0%,
                rgba(11,18,24,.72) 32%,
                rgba(11,18,24,0) 100%
            );
    }


    .path-card--light::after {

        background:

            linear-gradient(
                90deg,
                #fbfbfc 0%,
                rgba(251,251,252,.62) 36%,
                rgba(251,251,252,0) 100%
            );
    }
}


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

   Still desktop.
   Mobile remains completely untouched.
   ========================================================= */

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

    .path-section {
        padding:
            55px 0
            80px;
    }


    .path-section .home-shell {
        width:
            calc(100% - 80px);
    }


    .path-section
    .home-heading h2 {
        font-size: 58px;
    }


    .path-section
    .home-heading > p:last-child {
        max-width: 950px;

        font-size: 19px;
    }


    .path-card {
        height: 555px;
        min-height: 555px;

        padding:
            36px 30px;
    }


    .path-card__copy {
        width: 57%;
    }


    .path-card h3 {
        font-size: 43px;
    }


    .path-card__copy > p {
        font-size: 17px;
    }


    .path-card
    .check-list li {
        font-size: 14px;
    }


    .path-card
    .gold-button {
        left: 30px;
        bottom: 29px;

        width: 310px;

        height: 62px;
        min-height: 62px;

        font-size: 17px;
    }
}