/*
 * =========================================================
 * D2C GAME
 * 07 PROOF FROM THE REAL WORLD
 *
 * DESKTOP ONLY
 *
 * Mobile is intentionally untouched.
 * Width comes from desktop-layout.css.
 * =========================================================
 */


@media (min-width: 1024px) {


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

    .real-proof-section {

        position: relative;

        padding:
            56px 0
            0;

        overflow: hidden;

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

        color: #080a0e;
    }



    /*
     * IMPORTANT:
     * No width here.
     *
     * desktop-layout.css controls
     * .home-shell = 1440px.
     */


    .real-proof-section .home-shell {

        position: relative;

        z-index: 2;
    }



    /* =====================================================
       VERY SUBTLE BACKGROUND GEOMETRY
       ===================================================== */

    .real-proof-section::before,
    .real-proof-section::after {

        content: "";

        position: absolute;

        z-index: 0;

        pointer-events: none;
    }


    .real-proof-section::before {

        top: -150px;
        left: -220px;

        width: 700px;
        height: 480px;

        transform:
            rotate(-12deg);

        background:
            linear-gradient(
                145deg,
                rgba(239,241,246,.56),
                rgba(255,255,255,0)
            );
    }


    .real-proof-section::after {

        top: -100px;
        right: -220px;

        width: 670px;
        height: 470px;

        transform:
            rotate(12deg);

        background:
            linear-gradient(
                215deg,
                rgba(239,241,246,.52),
                rgba(255,255,255,0)
            );
    }



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

    .real-proof-section
    .home-heading {

        width: 100%;

        max-width: 1120px;

        margin:
            0 auto
            30px;

        text-align: center;
    }


    .real-proof-section
    .home-kicker {

        margin:
            0 0
            17px;

        color: #556176;

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

        font-weight: 800;

        letter-spacing: .35em;

        text-transform: uppercase;
    }


    .real-proof-section
    .home-heading h2 {

        margin: 0;

        color: #05070b;

        font-size: 57px;
        line-height: .96;

        font-weight: 900;

        letter-spacing: -.055em;
    }


    .real-proof-section
    .home-heading > p:last-child {

        max-width: 1040px;

        margin:
            13px auto
            0;

        color: #566278;

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

        font-weight: 400;

        letter-spacing: -.012em;
    }



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

    .proof-case-stack {

        display: grid;

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

        gap: 10px;

        width: 100%;

        margin:
            26px 0
            22px;

        align-items: stretch;
    }



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

    .proof-case {

        position: relative;

        display: block;

        min-width: 0;

        height: 392px;

        overflow: hidden;

        border-radius: 7px;

        background: #0a1018;

        color: #ffffff;

        text-decoration: none;

        box-shadow:
            0 5px 18px
            rgba(14,22,35,.08);
    }



    /* image wrapper generated by home_picture */

    .proof-case picture {

        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;
    }


    .proof-case picture img,
    .proof-case > img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;

        transition:
            transform .35s ease;
    }



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

    .proof-case__shade {

        position: absolute;

        z-index: 1;

        inset: 0;

        background:

            linear-gradient(
                180deg,
                rgba(4,8,13,.02) 0%,
                rgba(4,8,13,.04) 37%,
                rgba(4,8,13,.54) 62%,
                rgba(4,8,13,.95) 100%
            );

        pointer-events: none;
    }



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

    .proof-case__copy {

        position: absolute;

        z-index: 3;

        left: 0;
        right: 0;
        bottom: 0;

        padding:
            0 24px
            21px;
    }


    .proof-case__copy small {

        display: block;

        margin:
            0 0
            8px;

        color: #d8dde6;

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

        font-weight: 500;
    }


    .proof-case__copy h3 {

        max-width: 370px;

        margin:
            0 0
            11px;

        color: #ffffff;

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

        font-weight: 900;

        letter-spacing: -.045em;
    }


    .proof-case__copy p {

        max-width: 390px;

        margin:
            0 0
            16px;

        color: #d9dde4;

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

        font-weight: 400;
    }



    /* line above tags */

    .proof-case__copy p::after {

        content: "";

        display: block;

        width:
            calc(100% - 48px);

        height: 1px;

        margin-top: 16px;

        background:
            rgba(255,255,255,.18);
    }



    /* tags */

    .proof-case__copy > span {

        display: block;

        max-width: 80%;

        color: #e2e5ea;

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

        font-weight: 700;

        letter-spacing: .13em;

        text-transform: uppercase;

        white-space: nowrap;
    }



    /* =====================================================
       CIRCLE ARROW
       ===================================================== */

    .proof-case__arrow {

        position: absolute;

        z-index: 4;

        right: 20px;
        bottom: 17px;

        display: grid;

        place-items: center;

        width: 42px;
        height: 42px;

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

        border-radius: 50%;

        color: #ffffff;

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

        font-weight: 400;

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



    /* =====================================================
       HOVER — DESKTOP
       ===================================================== */

    .proof-case:hover picture img,
    .proof-case:hover > img {

        transform:
            scale(1.025);
    }


    .proof-case:hover
    .proof-case__arrow {

        transform:
            translateX(3px);

        background:
            rgba(255,255,255,.09);
    }



    /* =====================================================
       DARK STATS BAND
       ===================================================== */

    .proof-stats-band {

        position: relative;

        min-height: 260px;

        margin: 0;

        padding:
            38px 42px
            27px;

        overflow: hidden;

        background:
            linear-gradient(
                180deg,
                #101925 0%,
                #071019 100%
            );

        color: #ffffff;
    }



    /* uploaded background */

    .proof-stats-band__background {

        position: absolute;

        z-index: 0;

        inset: 0;

        overflow: hidden;
    }


    .proof-stats-band__background img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position:
            center bottom;
    }



    /* background shade */

    .proof-stats-band__shade {

        position: absolute;

        z-index: 1;

        inset: 0;

        background:

            linear-gradient(
                180deg,
                rgba(6,14,23,.67) 0%,
                rgba(5,12,20,.82) 58%,
                rgba(4,10,17,.93) 100%
            );

        pointer-events: none;
    }



    /* =====================================================
       FOUR STAT ITEMS
       ===================================================== */

    .proof-stats-grid {

        position: relative;

        z-index: 2;

        display: grid;

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

        width: 100%;

        max-width: 1280px;

        margin:
            0 auto;

        align-items: stretch;
    }


    .proof-stats-grid > div {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        min-width: 0;

        min-height: 135px;

        padding:
            8px 32px;

        text-align: center;

        border-left:
            1px solid
            rgba(255,255,255,.23);
    }


    .proof-stats-grid > div:first-child {

        border-left: 0;
    }



    /* icons */

    .proof-stats-grid svg {

        display: block;

        width: 36px;
        height: 36px;

        margin:
            0 0
            13px;

        color: #e6e9ee;
    }



    /* value */

    .proof-stats-grid strong {

        display: block;

        margin: 0;

        color: #ffffff;

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

        font-weight: 900;

        letter-spacing: -.035em;
    }



    /* description */

    .proof-stats-grid span {

        display: block;

        margin-top: 7px;

        color: #d9dde4;

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

        font-weight: 400;
    }



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

    .proof-stats-band > p {

        position: relative;
        width:100%;
        z-index: 2;

        margin:
            23px auto
            0;

        color: #e2e5eb;

        text-align: center;

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

        font-weight: 700;

        letter-spacing: .38em;

        text-transform: uppercase;
    }


    .proof-stats-band > p::after {

        content: "";

        display: block;

        width: 20px;
        height: 1px;

        margin:
            21px auto
            0;

        background: #ffffff;
    }

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

    .real-proof-section
    .home-heading h2 {

        font-size: 50px;
    }


    .real-proof-section
    .home-heading > p:last-child {

        font-size: 16px;
    }


    .proof-case {

        height: 350px;
    }


    .proof-case__copy h3 {

        font-size: 26px;
    }


    .proof-case__copy p {

        font-size: 14px;
    }


    .proof-stats-grid strong {

        font-size: 26px;
    }


    .proof-stats-grid span {

        font-size: 13px;
    }

}