/*
 * D2C GAME
 * THE D2C BUSINESS SYSTEM
 * DESKTOP ONLY
 *
 * Mobile remains untouched.
 */

@media (min-width: 1024px) {

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

    .system-section {
        position: relative;

        padding:
            48px 0
            52px;

        overflow: hidden;

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

        color: #090b10;
    }


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

        z-index: 2;

        width:
            min(
                1740px,
                calc(100% - 90px)
            );

        max-width: none;

        margin:
            0 auto;
    }


    /* subtle background polygons */

    .system-section::before {
        content: "";

        position: absolute;

        top: -120px;
        left: -180px;

        width: 720px;
        height: 420px;

        background:
            linear-gradient(
                145deg,
                rgba(241, 243, 250, .62),
                rgba(255,255,255,0)
            );

        transform: rotate(-7deg);

        pointer-events: none;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .system-heading {
        max-width: 1220px;

        margin:
            0 auto
            30px;

        text-align: center;
    }


    .system-heading .home-kicker {
        margin:
            0 0
            24px;

        color: #692bff;

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

        font-weight: 800;

        letter-spacing: .36em;

        text-transform: uppercase;
    }


    .system-heading h2 {
        margin: 0;

        color: #06080c;

        font-size: 64px;
        line-height: 1.01;

        font-weight: 900;

        letter-spacing: -.052em;
    }


    .system-heading h2 .purple-text,
    .system-heading h2 .system-title-accent {
        color: #702aff;
    }


    .system-heading > p:last-child {
        max-width: 940px;

        margin:
            20px auto
            0;

        color: #526078;

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

        font-weight: 400;

        letter-spacing: -.016em;
    }


    /* =====================================================
       OLD / NEW WAY ROW
       ===================================================== */

    .system-section .system-comparison {
        display: grid;

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

        gap: 34px;

        align-items: center;

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

        margin:
            34px auto
            0;
    }


    /* If your PHP does not have .system-comparison,
       the following also works when cards/transition
       are direct children of .home-shell. */

    .system-section .way-card {
        position: relative;

        width: 100%;
        max-width: none;

        min-height: 300px;

        margin: 0;

        padding:
            38px 45px
            34px;

        border-radius: 15px;

        background: #fff;

        box-shadow:
            0 10px 30px
            rgba(23, 33, 52, .035);
    }


    /* OLD WAY */

    .way-card--old {
        border:
            1px solid
            #dfe3e9;
    }


    /* NEW WAY */

    .way-card--new {
        border:
            2px solid
            #b684ff;

        box-shadow:
            0 9px 26px
            rgba(111, 43, 255, .08);
    }


    /* Pills */

    .way-pill {
        display: inline-flex;

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

        min-height: 36px;

        margin: 0;

        padding:
            0 17px;

        border-radius: 999px;

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

        font-weight: 800;

        letter-spacing: .09em;
    }


    .way-card--old
    .way-pill {
        background: #eef0f3;

        color: #27303e;
    }


    .way-card--new
    .way-pill {
        background: #eee5ff;

        color: #6421ff;
    }


    /* Card titles */

    .way-card h3 {
        margin:
            18px 0
            19px;

        color: #090b0f;

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

        font-weight: 900;

        letter-spacing: -.045em;
    }


    /* divider below title */

    .way-card h3::after {
        content: "";

        display: block;

        width: 100%;
        height: 0px;

        margin-top: 19px;

        background: #dde1e7;
    }


    .way-card--new h3::after {
        background: #dccaff;
    }


    /* lists */

    .way-list {
        display: grid;
        gap: 0px;
        margin: 0;
        padding: 0;
        border-top:0;
        list-style: none;
    }


    .way-list li {
        display: grid;
        padding: 5px 0;
        grid-template-columns:
            30px 1fr;

        gap: 14px;

        align-items: center;

        margin: 0;

        color: #354157;

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

        font-weight: 450;
    }


    .way-list svg {
        width: 30px;
        height: 30px;

        display: block;
    }


    .way-card--old
    .way-list svg {
        color: #aeb6c2;
    }


    .way-card--new
    .way-list svg {
        color: #6928ff;
    }


    /* =====================================================
       ARROW BETWEEN OLD + NEW
       ===================================================== */

    .system-transition {
        display: grid;

        place-items: center;

        width: 86px;

        margin: 0;

        padding: 0;
    }


    .system-transition > span {
        display: none;
    }


    .system-transition b {
        display: grid;

        place-items: center;

        width: 68px;
        height: 68px;

        margin: 0;

        border:
            1px solid
            #dfe2e8;

        border-radius: 50%;

        background: #fff;

        color: #6827ff;

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

        font-weight: 400;

        box-shadow:
            0 4px 16px
            rgba(30, 40, 60, .025);

        transform: rotate(-90deg);
    }


    /*
     * Your existing mobile arrow appears vertical.
     * Rotate it for desktop so it points right.
     */


    /* =====================================================
       SYSTEM DIVIDER
       ===================================================== */

    .system-divider {
        display: grid;

        grid-template-columns:
            1fr auto 1fr;

        gap: 32px;

        align-items: center;

        width: 100%;

        margin:
            44px 0
            25px;
    }


    .system-divider::before,
    .system-divider::after {
        content: "";

        display: block;

        height: 1px;

        background:
            #d5d8df;
    }


    .system-divider b {
        color: #6525ff;

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

        font-weight: 800;

        letter-spacing: .30em;

        white-space: nowrap;
    }


    /* =====================================================
       8 STEPS
       ===================================================== */

    .eight-steps {
        display: grid;

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

        gap: 52px;

        width: 100%;

        margin: 0;

        padding: 0;
    }


    .system-step {
        position: relative;

        display: flex;

        flex-direction: column;

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

        min-width: 0;

        height: 142px;
        min-height: 142px;

        padding:
            18px 10px;

        border:
            1px solid
            #dfe3e8;

        border-radius: 10px;

        background: #fff;

        text-align: center;

        box-shadow:
            0 4px 14px
            rgba(19, 27, 44, .025);
    }


    /*
     * Hide icons/descriptions on desktop
     * because reference only has:
     *
     * 1
     * Market
     */

    .system-step__icon,
    .system-step p {
        display: none;
    }


    .system-step small {
        display: block;

        margin: 0 0 11px;

        color: #6628ff;

        font-size: 42px;
        line-height: .9;

        font-weight: 900;

        letter-spacing: -.05em;
    }


    .system-step strong {
        display: block;

        color: #172034;

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

        font-weight: 800;

        letter-spacing: -.025em;
    }


    /* arrows between step boxes */

    .system-step:not(:last-child)::after {
        content: "→";

        position: absolute;

        top: 50%;
        right: -41px;

        transform:
            translateY(-52%);

        color: #6727ff;

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

        font-weight: 400;

        pointer-events: none;
    }


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

    .system-section
    .gold-button {
        display: flex;

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

        gap: 30px;

        width: 515px;

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

        margin:
            28px auto
            0;

        padding:
            0 30px;

        border: 0;

        border-radius: 9px;

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

        color: #080b0e;

        text-decoration: none;

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

        font-weight: 900;

        letter-spacing: -.025em;

        box-shadow:
            0 10px 28px
            rgba(255, 191, 30, .14);
    }


    .system-section
    .gold-button svg {
        width: 26px;
        height: 26px;
    }


    /* small text below button */

    .system-section
    .micro-tagline {
        margin:
            16px auto
            0;

        color: #788397;

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

        font-weight: 700;

        letter-spacing: .32em;

        text-align: center;
    }
}


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

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

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


    .system-heading h2 {
        font-size: 54px;
    }


    .system-heading
    > p:last-child {
        font-size: 19px;
    }


    .system-section
    .system-comparison {
        width: 1100px;

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

        gap: 25px;
    }


    .system-section
    .way-card {
        min-height: 270px;

        padding:
            31px 34px;
    }


    .way-card h3 {
        font-size: 30px;
    }


    .way-list li {
        font-size: 15px;
    }


    .eight-steps {
        gap: 42px;
    }


    .system-step {
        height: 126px;
        min-height: 126px;
    }


    .system-step small {
        font-size: 35px;
    }


    .system-step strong {
        font-size: 18px;
    }


    .system-step:not(:last-child)::after {
        right: -34px;

        font-size: 26px;
    }
}