/* =====================================================================
   CHUM 2.0
   HOW IT WORKS
   PRODUCTION ECOMMERCE / LIQUID GLASS
   FILE: public/assets/css/how-it-works.css
   ===================================================================== */


/* =====================================================================
   PAGE
   ===================================================================== */

.chum-how-page {
    --how-primary: var(--chum-primary, #e84164);
    --how-primary-dark: #d9365a;
    --how-navy: var(--chum-navy, #1b1c64);

    --how-text: #111820;
    --how-copy: #5f6b75;
    --how-muted: #87919a;

    --how-line:
        rgba(
            29,
            43,
            54,
            0.09
        );

    --how-glass:
        rgba(
            255,
            255,
            255,
            0.26
        );

    --how-glass-strong:
        rgba(
            255,
            255,
            255,
            0.48
        );

    --how-glass-border:
        rgba(
            255,
            255,
            255,
            0.95
        );

    --how-glass-outline:
        rgba(
            29,
            43,
            54,
            0.11
        );

    width: 100%;

    overflow: hidden;

    color:
        var(--how-text);

    background:
        linear-gradient(
            180deg,
            #f8fbfc 0%,
            #f5f8fa 100%
        );
}


/* =====================================================================
   CONTAINER
   ===================================================================== */

.chum-how-container {
    width:
        min(
            1540px,
            calc(
                100% - 72px
            )
        );

    margin:
        0
        auto;
}


/* =====================================================================
   HERO
   ===================================================================== */

.chum-how-hero {
    position: relative;

    padding:
        52px
        0
        54px;

    overflow: hidden;

    background:
        radial-gradient(
            680px
            420px
            at
            0%
            0%,
            rgba(
                77,
                210,
                245,
                0.10
            ),
            transparent
            68%
        ),
        radial-gradient(
            620px
            400px
            at
            100%
            15%,
            rgba(
                126,
                164,
                255,
                0.055
            ),
            transparent
            70%
        ),
        #f8fbfc;
}


.chum-how-hero::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width:
        min(
            1540px,
            calc(
                100% - 72px
            )
        );

    height: 1px;

    transform:
        translateX(
            -50%
        );

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                27,
                41,
                52,
                0.11
            ),
            transparent
        );
}


/* =====================================================================
   HERO GRID
   ===================================================================== */

.chum-how-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items:
        center;

    gap:
        clamp(
            52px,
            7vw,
            110px
        );
}


/* =====================================================================
   HERO COPY
   ===================================================================== */

.chum-how-hero-copy {
    max-width:
        720px;
}


.chum-how-eyebrow {
    width:
        fit-content;

    min-height:
        27px;

    margin-bottom:
        13px;

    padding:
        0
        10px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px
        solid
        rgba(
            232,
            65,
            100,
            0.16
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    color:
        var(--how-primary);

    font-size:
        9px;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.chum-how-hero-copy h1 {
    max-width:
        650px;

    margin:
        0;

    color:
        #0c141b;

    font-size:
        clamp(
            46px,
            4.8vw,
            68px
        );

    font-weight:
        820;

    line-height:
        0.98;

    letter-spacing:
        -0.057em;
}


.chum-how-hero-copy p {
    max-width:
        620px;

    margin:
        20px
        0
        0;

    color:
        var(--how-copy);

    font-size:
        15px;

    line-height:
        1.68;
}


/* =====================================================================
   HERO ACTIONS
   ===================================================================== */

.chum-how-actions {
    margin-top:
        26px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        11px;
}


/* =====================================================================
   COMMON GLASS BUTTON
   ===================================================================== */

.chum-how-primary,
.chum-how-secondary,
.chum-how-bottom-card button {
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    min-height:
        48px;

    padding:
        0
        18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1.5px
        solid
        var(--how-glass-border);

    border-radius:
        13px;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        780;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        transform
        180ms
        ease,
        box-shadow
        180ms
        ease,
        background
        180ms
        ease,
        color
        180ms
        ease;
}


/* top liquid highlight */

.chum-how-primary::before,
.chum-how-secondary::before,
.chum-how-bottom-card button::before {
    content: "";

    position:
        absolute;

    z-index:
        -1;

    top:
        1px;

    left:
        12px;

    right:
        12px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.95
            ),
            transparent
        );
}


/* =====================================================================
   PRIMARY BUTTON
   ===================================================================== */

.chum-how-primary {
    background:
        linear-gradient(
            135deg,
            rgba(
                239,
                66,
                105,
                0.97
            ),
            rgba(
                217,
                54,
                90,
                0.97
            )
        );

    color:
        #ffffff;

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.28
        ),
        0
        9px
        22px
        rgba(
            222,
            54,
            92,
            0.20
        );
}


.chum-how-primary svg {
    width:
        17px;

    height:
        17px;

    transition:
        transform
        180ms
        ease;
}


.chum-how-primary:hover {
    transform:
        translateY(
            -2px
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.34
        ),
        0
        13px
        28px
        rgba(
            222,
            54,
            92,
            0.25
        );
}


.chum-how-primary:hover svg {
    transform:
        translateX(
            3px
        );
}


/* =====================================================================
   SECONDARY LIQUID GLASS BUTTON
   ===================================================================== */

.chum-how-secondary {
    background:
        rgba(
            255,
            255,
            255,
            0.16
        );

    color:
        #17222b;

    -webkit-backdrop-filter:
        blur(
            18px
        )
        saturate(
            185%
        );

    backdrop-filter:
        blur(
            18px
        )
        saturate(
            185%
        );

    box-shadow:
        0
        0
        0
        1px
        var(--how-glass-outline),

        inset
        0
        1px
        0
        #ffffff,

        inset
        0
        -1px
        0
        rgba(
            255,
            255,
            255,
            0.35
        ),

        0
        8px
        18px
        rgba(
            18,
            33,
            44,
            0.08
        );
}


.chum-how-secondary:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.34
        );

    color:
        var(--how-primary);

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            31,
            47,
            59,
            0.15
        ),

        inset
        0
        1px
        0
        #ffffff,

        0
        11px
        23px
        rgba(
            18,
            33,
            44,
            0.10
        );
}


/* =====================================================================
   HERO VISUAL
   ===================================================================== */

.chum-how-visual {
    min-width:
        0;
}


/* =====================================================================
   COMPARISON DEMO
   ===================================================================== */

.chum-how-demo {
    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

    padding:
        19px;

    overflow:
        hidden;

    border:
        1.5px
        solid
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.52
            ),
            rgba(
                231,
                243,
                248,
                0.26
            )
        );

    -webkit-backdrop-filter:
        blur(
            28px
        )
        saturate(
            180%
        );

    backdrop-filter:
        blur(
            28px
        )
        saturate(
            180%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            36,
            52,
            64,
            0.10
        ),

        inset
        0
        1px
        0
        #ffffff,

        inset
        0
        -1px
        0
        rgba(
            255,
            255,
            255,
            0.42
        ),

        0
        22px
        48px
        rgba(
            19,
            35,
            46,
            0.10
        );
}


/* glass highlight */

.chum-how-demo::before {
    content: "";

    position:
        absolute;

    top:
        1px;

    left:
        8%;

    width:
        58%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            transparent
        );

    pointer-events:
        none;
}


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

.chum-how-demo-head {
    position:
        relative;

    z-index:
        2;

    margin-bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


.chum-how-demo-head > span {
    color:
        #17212a;

    font-size:
        12px;

    font-weight:
        780;
}


.chum-how-demo-head small {
    min-height:
        25px;

    padding:
        0
        9px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.95
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.25
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            35,
            52,
            64,
            0.07
        ),
        inset
        0
        1px
        0
        #ffffff;

    color:
        #65717b;

    font-size:
        8px;

    font-weight:
        650;
}


/* =====================================================================
   DEMO SEARCH
   ===================================================================== */

.chum-how-demo-search {
    min-height:
        50px;

    padding:
        0
        14px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border:
        1.5px
        solid
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

    -webkit-backdrop-filter:
        blur(
            17px
        )
        saturate(
            175%
        );

    backdrop-filter:
        blur(
            17px
        )
        saturate(
            175%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            34,
            51,
            63,
            0.10
        ),

        inset
        0
        1px
        0
        #ffffff;

    color:
        #26323b;

    font-size:
        11px;

    font-weight:
        690;
}


.chum-how-demo-search svg {
    width:
        18px;

    height:
        18px;

    flex:
        0
        0
        18px;

    color:
        var(--how-primary);
}


/* =====================================================================
   DEMO RETAILER RESULTS
   ===================================================================== */

.chum-how-demo-results {
    margin-top:
        12px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.chum-how-demo-result {
    min-height:
        59px;

    padding:
        9px
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    border:
        1px
        solid
        rgba(
            38,
            54,
            66,
            0.08
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.42
        );

    transition:
        border-color
        180ms
        ease,
        background
        180ms
        ease,
        transform
        180ms
        ease;
}


.chum-how-demo-result:hover {
    transform:
        translateX(
            2px
        );

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );
}


.chum-how-demo-result.is-best {
    border-color:
        rgba(
            21,
            155,
            103,
            0.24
        );

    background:
        linear-gradient(
            90deg,
            rgba(
                232,
                249,
                241,
                0.76
            ),
            rgba(
                255,
                255,
                255,
                0.52
            )
        );
}


.chum-how-demo-result > div {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.chum-how-store-dot {
    width:
        8px;

    height:
        8px;

    flex:
        0
        0
        8px;

    border-radius:
        50%;

    background:
        #159b67;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            21,
            155,
            103,
            0.10
        );
}


.chum-how-demo-result strong {
    display:
        block;

    color:
        #27333c;

    font-size:
        10px;

    font-weight:
        760;
}


.chum-how-demo-result small {
    display:
        block;

    margin-top:
        2px;

    color:
        #7c8790;

    font-size:
        8px;
}


.chum-how-demo-price {
    flex:
        0
        0
        auto;

    color:
        #151e26 !important;

    font-size:
        13px !important;

    font-weight:
        820 !important;

    white-space:
        nowrap;
}


.chum-how-demo-result.is-best
.chum-how-demo-price {
    color:
        #117451 !important;
}


/* =====================================================================
   DEMO FOOTER
   ===================================================================== */

.chum-how-demo-footer {
    margin-top:
        11px;

    padding:
        13px
        2px
        1px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px
        solid
        var(--how-line);
}


.chum-how-demo-footer span {
    color:
        #77828b;

    font-size:
        9px;

    font-weight:
        650;
}


.chum-how-demo-footer strong {
    color:
        #111820;

    font-size:
        21px;

    font-weight:
        830;

    letter-spacing:
        -0.035em;
}


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

.chum-how-process {
    padding:
        55px
        0;
}


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

.chum-how-section-heading {
    max-width:
        730px;

    margin-bottom:
        28px;
}


.chum-how-section-heading > span {
    width:
        fit-content;

    min-height:
        25px;

    margin-bottom:
        9px;

    padding:
        0
        9px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px
        solid
        rgba(
            232,
            65,
            100,
            0.14
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.48
        );

    color:
        var(--how-primary);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.chum-how-section-heading h2 {
    margin:
        0;

    color:
        #0d151c;

    font-size:
        clamp(
            31px,
            3vw,
            43px
        );

    font-weight:
        810;

    line-height:
        1.05;

    letter-spacing:
        -0.043em;
}


.chum-how-section-heading p {
    max-width:
        620px;

    margin:
        11px
        0
        0;

    color:
        var(--how-copy);

    font-size:
        12px;

    line-height:
        1.62;
}


/* =====================================================================
   FOUR STEP FLOW
   ===================================================================== */

.chum-how-steps {
    position:
        relative;

    display:
        grid;

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

    overflow:
        hidden;

    border:
        1px
        solid
        #e0e7eb;

    border-radius:
        18px;

    background:
        #e0e7eb;

    box-shadow:
        0
        9px
        28px
        rgba(
            20,
            35,
            46,
            0.045
        );
}


/* =====================================================================
   STEP
   ===================================================================== */

.chum-how-step {
    position:
        relative;

    min-height:
        175px;

    padding:
        22px;

    border:
        0;

    border-radius:
        0;

    background:
        #ffffff;

    cursor:
        pointer;

    transition:
        background
        170ms
        ease,
        transform
        170ms
        ease;
}


.chum-how-step:hover,
.chum-how-step.is-selected {
    z-index:
        2;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fafb
        );

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            232,
            65,
            100,
            0.18
        );
}


/* =====================================================================
   STEP NUMBER
   ===================================================================== */

.chum-how-step-number {
    position:
        absolute;

    top:
        18px;

    right:
        18px;

    color:
        #9ba4ab;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        0.06em;
}


/* =====================================================================
   STEP ICON
   ===================================================================== */

.chum-how-step-icon {
    width:
        42px;

    height:
        42px;

    margin-bottom:
        20px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        #e3e9ed;

    border-radius:
        12px;

    background:
        #f5f8fa;

    color:
        var(--how-navy);

    box-shadow:
        inset
        0
        1px
        0
        #ffffff;
}


.chum-how-step.is-selected
.chum-how-step-icon {
    border-color:
        rgba(
            232,
            65,
            100,
            0.16
        );

    background:
        #fff3f6;

    color:
        var(--how-primary);
}


.chum-how-step-icon svg {
    width:
        21px;

    height:
        21px;
}


/* =====================================================================
   STEP TEXT
   ===================================================================== */

.chum-how-step h3 {
    margin:
        0
        0
        7px;

    color:
        #17212a;

    font-size:
        16px;

    font-weight:
        790;
}


.chum-how-step p {
    max-width:
        260px;

    margin:
        0;

    color:
        #67737d;

    font-size:
        10px;

    line-height:
        1.55;
}


/* =====================================================================
   CATEGORIES
   ===================================================================== */

.chum-how-categories {
    padding:
        54px
        0
        58px;

    border-top:
        1px
        solid
        var(--how-line);

    border-bottom:
        1px
        solid
        var(--how-line);

    background:
        #ffffff;
}


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

.chum-how-category-header {
    margin-bottom:
        28px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;
}


.chum-how-category-header > div {
    max-width:
        600px;
}


.chum-how-category-header h2 {
    margin:
        0;

    color:
        #0e161d;

    font-size:
        clamp(
            31px,
            3vw,
            42px
        );

    font-weight:
        810;

    line-height:
        1.05;

    letter-spacing:
        -0.043em;
}


.chum-how-category-header > p {
    max-width:
        470px;

    margin:
        0;

    color:
        #67737d;

    font-size:
        12px;

    line-height:
        1.62;
}


/* =====================================================================
   CATEGORY CARDS
   ===================================================================== */

.chum-how-category-cards {
    display:
        grid;

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

    gap:
        13px;
}


/* =====================================================================
   ONE CATEGORY
   ===================================================================== */

.chum-how-category-card {
    position:
        relative;

    min-height:
        190px;

    padding:
        21px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px
        solid
        #e1e7eb;

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fafb
        );

    color:
        #17212a;

    text-decoration:
        none;

    box-shadow:
        0
        5px
        16px
        rgba(
            18,
            32,
            43,
            0.035
        );

    transition:
        transform
        180ms
        ease,
        box-shadow
        180ms
        ease,
        border-color
        180ms
        ease;
}


.chum-how-category-card::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                232,
                65,
                100,
                0.55
            ),
            transparent
        );

    opacity:
        0;

    transition:
        opacity
        180ms
        ease;
}


.chum-how-category-card:hover {
    transform:
        translateY(
            -4px
        );

    border-color:
        rgba(
            232,
            65,
            100,
            0.23
        );

    box-shadow:
        0
        17px
        34px
        rgba(
            18,
            32,
            43,
            0.08
        );
}


.chum-how-category-card:hover::before {
    opacity:
        1;
}


.chum-how-category-card > span {
    color:
        var(--how-primary);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.chum-how-category-card h3 {
    margin:
        9px
        0
        7px;

    color:
        #151e26;

    font-size:
        21px;

    font-weight:
        800;

    letter-spacing:
        -0.025em;
}


.chum-how-category-card p {
    max-width:
        280px;

    margin:
        0;

    color:
        #69757e;

    font-size:
        10px;

    line-height:
        1.55;
}


.chum-how-category-card strong {
    margin-top:
        auto;

    padding-top:
        20px;

    color:
        var(--how-navy);

    font-size:
        10px;

    font-weight:
        760;

    transition:
        color
        170ms
        ease,
        transform
        170ms
        ease;
}


.chum-how-category-card:hover strong {
    color:
        var(--how-primary);
}


/* =====================================================================
   TRUST / IMPORTANT NOTE
   ===================================================================== */

.chum-how-trust {
    padding:
        48px
        0;
}


/* =====================================================================
   TRUST PANEL
   ===================================================================== */

.chum-how-trust-panel {
    padding:
        25px
        28px;

    display:
        grid;

    grid-template-columns:
        minmax(
            300px,
            0.75fr
        )
        minmax(
            0,
            1.25fr
        );

    align-items:
        center;

    gap:
        55px;

    border:
        1px
        solid
        #e0e7eb;

    border-radius:
        17px;

    background:
        #ffffff;

    box-shadow:
        0
        6px
        18px
        rgba(
            18,
            32,
            43,
            0.04
        );
}


.chum-how-trust-panel
.chum-how-eyebrow {
    margin-bottom:
        8px;
}


.chum-how-trust-panel h2 {
    max-width:
        420px;

    margin:
        0;

    color:
        #111a22;

    font-size:
        27px;

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;
}


.chum-how-trust-panel > p {
    max-width:
        670px;

    margin:
        0;

    color:
        #606c76;

    font-size:
        11px;

    line-height:
        1.67;
}


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

.chum-how-bottom {
    padding:
        0
        0
        52px;
}


.chum-how-bottom-card {
    position:
        relative;

    min-height:
        150px;

    padding:
        29px
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius:
        20px;

    background:
        radial-gradient(
            430px
            250px
            at
            92%
            15%,
            rgba(
                87,
                203,
                243,
                0.15
            ),
            transparent
            70%
        ),
        linear-gradient(
            120deg,
            #171c50,
            #262c69
        );

    color:
        #ffffff;

    box-shadow:
        0
        17px
        38px
        rgba(
            21,
            27,
            71,
            0.16
        );
}


.chum-how-bottom-card > div,
.chum-how-bottom-card > button {
    position:
        relative;

    z-index:
        2;
}


.chum-how-bottom-card > div > span {
    color:
        #d3ecf7;

    font-size:
        9px;

    font-weight:
        780;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.chum-how-bottom-card h2 {
    margin:
        6px
        0
        0;

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        800;

    line-height:
        1.06;

    letter-spacing:
        -0.038em;
}


/* =====================================================================
   CTA GLASS BUTTON
   ===================================================================== */

.chum-how-bottom-card button {
    min-width:
        170px;

    flex-shrink:
        0;

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

    -webkit-backdrop-filter:
        blur(
            20px
        )
        saturate(
            185%
        );

    backdrop-filter:
        blur(
            20px
        )
        saturate(
            185%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            0.18
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.70
        ),

        0
        9px
        20px
        rgba(
            0,
            0,
            0,
            0.12
        );

    color:
        #ffffff;
}


.chum-how-bottom-card button:hover {
    transform:
        translateY(
            -2px
        );

    background:
        rgba(
            255,
            255,
            255,
            0.24
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            0.22
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.84
        ),

        0
        13px
        25px
        rgba(
            0,
            0,
            0,
            0.16
        );
}


/* =====================================================================
   FOCUS
   ===================================================================== */

.chum-how-primary:focus-visible,
.chum-how-secondary:focus-visible,
.chum-how-category-card:focus-visible,
.chum-how-bottom-card button:focus-visible {
    outline:
        3px
        solid
        rgba(
            232,
            65,
            100,
            0.20
        );

    outline-offset:
        3px;
}


/* =====================================================================
   LARGE LAPTOP
   ===================================================================== */

@media (
    max-width:
    1280px
) {

    .chum-how-container {
        width:
            calc(
                100% - 48px
            );
    }


    .chum-how-hero-grid {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            minmax(
                390px,
                0.8fr
            );

        gap:
            45px;
    }


    .chum-how-category-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (
    max-width:
    900px
) {

    .chum-how-container {
        width:
            calc(
                100% - 30px
            );
    }


    .chum-how-hero {
        padding:
            40px
            0
            42px;
    }


    .chum-how-hero-grid {
        grid-template-columns:
            1fr;

        gap:
            34px;
    }


    .chum-how-hero-copy {
        max-width:
            720px;
    }


    .chum-how-hero-copy h1 {
        max-width:
            620px;

        font-size:
            52px;
    }


    .chum-how-visual {
        max-width:
            620px;
    }


    .chum-how-steps {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .chum-how-category-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;
    }


    .chum-how-category-header > p {
        max-width:
            640px;
    }


    .chum-how-trust-panel {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }

}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (
    max-width:
    575px
) {

    .chum-how-container {
        width:
            100%;

        padding:
            0
            13px;
    }


    .chum-how-hero {
        padding:
            30px
            0
            34px;
    }


    .chum-how-hero::after {
        width:
            calc(
                100% - 26px
            );
    }


    .chum-how-hero-grid {
        gap:
            26px;
    }


    .chum-how-hero-copy h1 {
        font-size:
            40px;
    }


    .chum-how-hero-copy p {
        margin-top:
            15px;

        font-size:
            13px;
    }


    .chum-how-actions {
        margin-top:
            21px;

        align-items:
            stretch;
    }


    .chum-how-primary,
    .chum-how-secondary {
        min-height:
            46px;
    }


    .chum-how-demo {
        padding:
            14px;

        border-radius:
            18px;
    }


    .chum-how-demo-result {
        min-height:
            56px;
    }


    .chum-how-demo-price {
        font-size:
            12px !important;
    }


    .chum-how-process {
        padding:
            39px
            0;
    }


    .chum-how-section-heading {
        margin-bottom:
            20px;
    }


    .chum-how-section-heading h2 {
        font-size:
            31px;
    }


    .chum-how-steps {
        grid-template-columns:
            1fr;
    }


    .chum-how-step {
        min-height:
            142px;

        padding:
            18px;
    }


    .chum-how-step-icon {
        margin-bottom:
            14px;
    }


    .chum-how-categories {
        padding:
            40px
            0;
    }


    .chum-how-category-header {
        margin-bottom:
            20px;
    }


    .chum-how-category-header h2 {
        font-size:
            30px;
    }


    .chum-how-category-cards {
        grid-template-columns:
            1fr;
    }


    .chum-how-category-card {
        min-height:
            160px;
    }


    .chum-how-trust {
        padding:
            38px
            0;
    }


    .chum-how-trust-panel {
        padding:
            21px
            18px;
    }


    .chum-how-trust-panel h2 {
        font-size:
            24px;
    }


    .chum-how-bottom {
        padding-bottom:
            38px;
    }


    .chum-how-bottom-card {
        min-height:
            0;

        padding:
            24px
            20px;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            21px;
    }


    .chum-how-bottom-card h2 {
        font-size:
            27px;
    }


    .chum-how-bottom-card button {
        width:
            100%;
    }

}


/* =====================================================================
   SMALL MOBILE
   ===================================================================== */

@media (
    max-width:
    390px
) {

    .chum-how-hero-copy h1 {
        font-size:
            36px;
    }


    .chum-how-demo-result {
        align-items:
            flex-start;
    }


    .chum-how-demo-footer strong {
        font-size:
            18px;
    }

}


/* =====================================================================
   REDUCE TRANSPARENCY FALLBACK
   ===================================================================== */

@supports not (
    (
        backdrop-filter:
        blur(
            10px
        )
    )
    or
    (
        -webkit-backdrop-filter:
        blur(
            10px
        )
    )
) {

    .chum-how-demo,
    .chum-how-secondary {
        background:
            rgba(
                248,
                251,
                252,
                0.98
            );
    }


    .chum-how-bottom-card button {
        background:
            rgba(
                255,
                255,
                255,
                0.20
            );
    }

}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .chum-how-primary,
    .chum-how-secondary,
    .chum-how-step,
    .chum-how-category-card,
    .chum-how-demo-result,
    .chum-how-bottom-card button {
        transition:
            none !important;
    }

}