/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-288 {
        /* centers button */
        text-align: center;
        /* 116px - 164px top */
        /* 60px - 100px  bottom */
        padding: clamp(7.25rem, 16.82vw, 10.25rem) 1rem
            clamp(3.75rem, 7.82vw, 6.25rem);
        position: relative;
        /* The decorative .cs-waves graphic is sized `49vw` and offset from the
           50% mark, so on desktop it ran ~186px past the viewport and put a
           horizontal scrollbar on the whole page. `clip` (not `hidden`) avoids
           turning this into a scroll container, which would otherwise force
           overflow-y to `auto`. */
        overflow-x: clip;
    }
    #hero-288 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hero-288 .cs-content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #hero-288 .cs-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 5vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: center;
        max-width: 43.75rem;
        margin: 0 auto 1rem;
        color: var(--headerColor);
        position: relative;
    }
    #hero-288 .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        max-width: 33.1875rem;
        margin: 0 auto;
        /* 28px - 40px */
        margin-bottom: clamp(1.75rem, 3.92vw, 2.5rem);
        color: var(--bodyTextColor);
    }
    #hero-288 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: auto;
        color: #1a1a1a;
        min-width: 9.375rem;
        margin: 0;
        padding: 0 1.5rem;
        background-color: var(--secondary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition: color 0.3s;
    }
    #hero-288 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--primary);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #hero-288 .cs-button-solid:hover {
        color: #fff;
    }
    #hero-288 .cs-button-solid:hover:before {
        width: 100%;
    }
    #hero-288 .cs-stats-group {
        max-width: 32.625rem;
        margin: 0;
        /* 40px - 98px */
        margin-top: clamp(2.5rem, calc(7.3vw), 6.125rem);
        /* 40px - 48px */
        margin-bottom: clamp(2.5rem, 10vw, 3rem);
        padding: 0;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        /* 20px - 40px */
        column-gap: clamp(1.25rem, 5.9vw, 2.5rem);
    }
    #hero-288 .cs-item {
        list-style: none;
        width: auto;
    }
    #hero-288 .cs-number {
        /* 25px - 49px */
        font-size: clamp(1.5625rem, 3.8vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 700;
        color: var(--headerColor);
        display: block;
    }
    #hero-288 .cs-desc {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 2.1vw, 1rem);
        line-height: 1.5em;
        color: #767676;
    }
    #hero-288 .cs-picture {
        width: 100%;
        max-width: 36.5625rem;
        /* 380px - 453px */
        height: clamp(23.75rem, 59vw, 28.3215rem);
        border-radius: 1rem;
        /* clips the img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #hero-288 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes image act as a background image */
        object-fit: cover;
    }
    #hero-288 .cs-waves {
        width: 100%;
        height: 30%;
        background-color: var(--primary);
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
    }
    #hero-288 .cs-waves img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes image act as a background image */
        object-fit: cover;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #hero-288 {
        text-align: left;
    }
    #hero-288 .cs-container {
        flex-direction: row;
        justify-content: space-between;
        column-gap: 6.25rem;
    }
    #hero-288 .cs-content {
        /* 46% (was 40%): the headline used to wrap onto four lines in a 40%
           column, pushing the calculator + CTA past the fold on shorter
           laptop screens. */
        width: 46%;
        /* prevents flex-box from squishing it */
        flex: none;
        align-items: flex-start;
    }
    #hero-288 .cs-title {
        /* Capped below the global hero size for the same reason — keeps the
           headline to three lines so the CTA stays above the fold. */
        font-size: clamp(2.4375rem, 4vw, 3.25rem);
    }
    #hero-288 .cs-title,
    #hero-288 .cs-text {
        text-align: left;
        /* Both carry `margin: 0 auto` from the mobile (centred) rules, which
           on desktop centred them inside the column and left the subhead
           visibly indented from the headline. */
        margin-left: 0;
        margin-right: 0;
    }
    #hero-288 .cs-picture {
        max-width: 39.375rem;
        /* 623px - 814px */
        height: clamp(38.9375rem, 60vw, 50.875rem);
    }
    #hero-288 .cs-waves {
        height: 100%;
        width: calc(49vw);
        left: 50%;
        margin-left: 12.5rem;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #hero-288 .cs-title,
    body.dark-mode #hero-288 .cs-text,
    body.dark-mode #hero-288 .cs-number,
    body.dark-mode #hero-288 .cs-desc {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #hero-288 .cs-waves {
        opacity: 0.5;
        filter: brightness(160%);
    }
}

        /* you can copy and paste this into your global stylesheet to be used everywhere there's a cs-topper in your site */
.cs-topper {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 1rem 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}
.cs-topper .cs-icon {
    width: 100%;
    height: auto;
    display: block;
}
/* Dark Mode */
body.dark-mode .cs-topper {
    color: var(--bodyTextColorWhite);
}

                                                        
#hero-288 .cs-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

#hero-288 .cs-button-secondary {
    background-color: transparent;
    color: var(--headerColor);
    border: 2px solid currentColor;
}

#hero-288 .cs-disclaimer {
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.8;
    max-width: 42rem;
    margin-top: 1rem;
}

body.dark-mode #hero-288 .cs-button-secondary {
    color: var(--bodyTextColorWhite);
    border-color: var(--bodyTextColorWhite);
}

/*-- -------------------------- -->
<---   Hero Earning Calculator  -->
<--- -------------------------- -*/
/* Lives inside the hero (replaces the old static stats row) so the live
   estimate sits above the fold without adding any extra section/scroll. */

.text-primary { color: var(--primary); }

.hero-calculator {
    width: 100%;
    max-width: 32.625rem;
    /* .cs-text already carries a bottom margin; a big top margin here stacked
       on top of it and wasted fold space. */
    margin: 0 auto;
    padding: 1rem 1.15rem 1.15rem;
    background: var(--blackjackSoft);
    border: 1px solid rgba(255, 106, 62, 0.2);
    border-radius: 0.85rem;
    text-align: center;
}

.hero-calculator__prompt {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--bodyTextColor);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.hero-calculator__select-wrap select {
    font: inherit;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--primary);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff6a3e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.6rem;
    border: 1px solid rgba(255, 106, 62, 0.35);
    border-radius: 2rem;
    padding: 0.2rem 1.7rem 0.2rem 0.75rem;
    max-width: 10rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.hero-calculator__result {
    margin: 0.65rem 0 0;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255, 106, 62, 0.18);
    border-bottom: 1px solid rgba(255, 106, 62, 0.18);
    font-size: 1rem;
    font-weight: 700;
    color: var(--headerColor);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 3vw, 1.5rem);
}

/* The two headline numbers. Sized up hard: this is the moment the abstract
   promise becomes a personal figure, so it should read before anything else. */
.hero-calculator__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.hero-calculator__result strong {
    font-weight: 900;
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    letter-spacing: -0.02em;
}

.hero-calculator__figure-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
    margin-top: 0.2rem;
    white-space: nowrap;
}

.hero-calculator__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 106, 62, 0.25);
    flex: none;
}

/* Primary conversion target. Full-width inside the card so the eye lands on
   it immediately after reading the numbers above it. */
.hero-calculator__cta {
    margin-top: 0.85rem;
    padding: 0.85rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.0625rem;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
    /* --primaryDeep, not --primary: white on #ff6a3e is 2.84:1 and this label
       is below the WCAG large-text threshold, so it needs the 4.5:1 shade. */
    background: var(--primaryDeep);
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.2s, background-color 0.2s;
}

/* Flat fill: depth comes from a darker hover + a small lift, not a halo. */
.hero-calculator__cta:hover,
.hero-calculator__cta:focus-visible {
    transform: translateY(-2px);
    background: #b83610;
}

.hero-calculator__cta svg { transition: transform 0.2s; }
.hero-calculator__cta:hover svg { transform: translateX(0.2rem); }

/* Restriction caveat for the selected state. Muted red — informational,
   not an error state. */
.hero-calculator__restricted {
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    border-left: 3px solid #dc2626;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

body.dark-mode .hero-calculator__restricted {
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}

/* Risk reversal, directly beneath the button where hesitation happens. */
.hero-calculator__reassure {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    opacity: 0.75;
    color: var(--bodyTextColor);
}

/* ---- Trust bar ---- */
.hero-trust {
    list-style: none;
    margin: clamp(1rem, 3vw, 1.35rem) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem clamp(0.85rem, 3vw, 1.5rem);
    max-width: 32.625rem;
}

.hero-trust li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bodyTextColor);
    opacity: 0.9;
}

.hero-trust svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--primary);
}

.hero-trust strong { color: var(--headerColor); font-weight: 800; }

/* ---- Collapsible compliance disclosure ---- */
#hero-288 .cs-disclaimer--collapsible {
    margin-top: clamp(1rem, 3vw, 1.35rem);
    text-align: left;
}

#hero-288 .cs-disclaimer--collapsible summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.8125rem;
    line-height: 1.5;
}

#hero-288 .cs-disclaimer--collapsible summary::-webkit-details-marker { display: none; }

#hero-288 .cs-disclaimer--collapsible summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

.cs-disclaimer__more {
    display: inline-block;
    margin-left: 0.15rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
}

#hero-288 .cs-disclaimer--collapsible[open] .cs-disclaimer__more { display: none; }

#hero-288 .cs-disclaimer--collapsible p {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* ---- Dark mode ---- */
body.dark-mode .hero-calculator__result {
    color: var(--bodyTextColorWhite);
    border-top-color: rgba(255, 186, 67, 0.22);
    border-bottom-color: rgba(255, 186, 67, 0.22);
}
body.dark-mode .hero-calculator__divider { background: rgba(255, 186, 67, 0.28); }
body.dark-mode .hero-calculator__reassure { color: var(--bodyTextColorWhite); }
body.dark-mode .hero-trust li { color: var(--bodyTextColorWhite); }
body.dark-mode .hero-trust strong { color: var(--bodyTextColorWhite); }
body.dark-mode .hero-trust svg { color: var(--blackjackGold); }
body.dark-mode .cs-disclaimer__more { color: var(--blackjackGold); }

@media (prefers-reduced-motion: reduce) {
    .hero-calculator__cta,
    .hero-calculator__cta svg { transition: none; }
    .hero-calculator__cta:hover,
    .hero-calculator__cta:focus-visible { transform: none; }
    .hero-calculator__cta:hover svg { transform: none; }
}

/* ---- Secondary path for unconvinced visitors ---- */
.hero-secondary-link {
    margin: clamp(0.85rem, 2.5vw, 1.1rem) 0 0;
    font-size: 0.875rem;
    color: var(--bodyTextColor);
    opacity: 0.85;
}

.hero-secondary-link a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.dark-mode .hero-secondary-link { color: var(--bodyTextColorWhite); }
body.dark-mode .hero-secondary-link a { color: var(--blackjackGold); }

/* <details>/<summary> aren't covered by the global `body.dark-mode p` rule,
   so the disclosure inherited near-black body text on a near-black hero. */
body.dark-mode #hero-288 .cs-disclaimer--collapsible,
body.dark-mode #hero-288 .cs-disclaimer--collapsible summary,
body.dark-mode #hero-288 .cs-disclaimer--collapsible p {
    color: var(--bodyTextColorWhite);
}

/*-- -------------------------- -->
<---         Closing CTA        -->
<--- -------------------------- -*/

#final-cta {
    padding: var(--sectionPadding);
}

#final-cta .cs-container {
    width: 100%;
    max-width: 46rem;
    margin: auto;
    padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    /* Flat solid fill — no gradient, no coloured halo. */
    background: var(--primaryDeep);
    border-radius: 1.25rem;
    text-align: center;
}

#final-cta .cs-title {
    color: #fff;
    max-width: 100%;
    margin: 0 0 0.75rem;
}

#final-cta .cs-text {
    color: #fff;
    opacity: 0.95;
    max-width: 34rem;
    margin: 0 auto clamp(1.5rem, 4vw, 2rem);
}

.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Scoped under #final-cta so the ID beats the global `body.dark-mode a`
   rule (specificity 0-1-2), which was repainting the primary button's label
   white-on-white and making it vanish in dark mode. */
#final-cta .final-cta__primary,
#final-cta .final-cta__secondary {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    padding: 1rem 1.75rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.2s, background-color 0.2s;
}

#final-cta .final-cta__primary {
    background: #fff;
    color: var(--headerColor);
}

#final-cta .final-cta__secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

/* The band keeps its solid brand fill in both themes, so the buttons on top
   of it must NOT follow the global dark-mode link colour. */
body.dark-mode #final-cta .final-cta__primary { color: var(--headerColor); }
body.dark-mode #final-cta .final-cta__secondary { color: #fff; }

#final-cta .final-cta__primary:hover,
#final-cta .final-cta__primary:focus-visible,
#final-cta .final-cta__secondary:hover,
#final-cta .final-cta__secondary:focus-visible {
    transform: translateY(-2px);
}

#final-cta .final-cta__secondary:hover,
#final-cta .final-cta__secondary:focus-visible {
    background: rgba(255, 255, 255, 0.16);
}

#final-cta .final-cta__primary svg { transition: transform 0.2s; }
#final-cta .final-cta__primary:hover svg { transform: translateX(0.2rem); }

/* Responsible-gambling copy — kept at full opacity deliberately. This is the
   one line on the page that must stay legible, so it doesn't get dimmed for
   the sake of visual hierarchy. */
.final-cta__note {
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    #final-cta .final-cta__primary,
    #final-cta .final-cta__secondary,
    #final-cta .final-cta__primary svg { transition: none; }
    #final-cta .final-cta__primary:hover,
    #final-cta .final-cta__primary:focus-visible,
    #final-cta .final-cta__secondary:hover,
    #final-cta .final-cta__secondary:focus-visible { transform: none; }
    #final-cta .final-cta__primary:hover svg { transform: none; }
}

body.dark-mode .hero-calculator {
    background: rgba(255, 186, 67, 0.08);
    border-color: rgba(255, 186, 67, 0.25);
}
body.dark-mode .hero-calculator__prompt { color: var(--bodyTextColorWhite); }
body.dark-mode .hero-calculator__result { color: var(--bodyTextColorWhite); }
body.dark-mode .hero-calculator__select-wrap select {
    color: var(--blackjackGold);
    background-color: #1f1f1f;
    border-color: rgba(255, 186, 67, 0.35);
}

/* Small Desktop - 1024px: hero content is left-aligned, so the calculator
   should hug the left edge like everything else in .cs-content. */
@media only screen and (min-width: 64rem) {
    .hero-calculator { margin-left: 0; margin-right: 0; text-align: left; }
    .hero-calculator__prompt { justify-content: flex-start; }
    .hero-calculator__result { justify-content: flex-start; }
    .hero-calculator__reassure { text-align: left; }
    .hero-trust { justify-content: flex-start; }
}

/*-- -------------------------- -->
<---             FAQ            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #faq-326 {
        padding: var(--sectionPadding);
    }

    #faq-326 .cs-container {
        width: 100%;
        max-width: 43.75rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(3rem, 6vw, 4rem);
    }

    #faq-326 .cs-content {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #faq-326 .cs-title {
        margin: 0;
    }

    #faq-326 .cs-faq-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.75rem;
    }

    #faq-326 .cs-faq-item {
        list-style: none;
        width: 100%;
        background-color: #f7f7f7;
        border: 1px solid transparent;
        border-radius: 0.75rem;
        overflow: hidden;
        box-shadow: 0 0.25rem 1rem rgba(18, 18, 18, 0.04);
        transition:
            background-color 0.3s,
            border-color 0.3s,
            box-shadow 0.3s,
            transform 0.3s;
    }

    #faq-326 .cs-faq-item:hover {
        border-color: rgba(255, 106, 62, 0.24);
    }

    #faq-326 .cs-faq-item.active {
        background-color: var(--blackjackSoft);
        border-color: rgba(255, 106, 62, 0.38);
        /* Solid inset accent bar only — the outer coloured halo was dropped. */
        box-shadow: inset 0.25rem 0 0 var(--primary);
    }

    #faq-326 .cs-faq-item.active .cs-button {
        background-color: transparent;
        color: var(--blackjackInk);
    }

    #faq-326 .cs-faq-item.active .cs-button-text {
        color: var(--blackjackInk);
    }

    #faq-326 .cs-faq-item.active .cs-button:before {
        background-color: var(--primary);
        transform: rotate(315deg);
    }

    #faq-326 .cs-faq-item.active .cs-button:after {
        background-color: var(--primary);
        transform: rotate(-315deg);
    }

    #faq-326 .cs-faq-item.active .cs-item-p {
        height: auto;
        padding:
            clamp(1.25rem, 1.3vw, 1.5rem)
            clamp(1rem, 2vw, 1.5rem);
        opacity: 1;
        color: var(--bodyTextColor);
    }

    #faq-326 .cs-button {
        font-size: 1rem;
        line-height: 1.2em;
        text-align: left;
        font-weight: 700;
        padding: clamp(1rem, 1.3vw, 1.25rem);
        padding-right: 3.75rem;
        background-color: transparent;
        border: none;
        color: var(--headerColor);
        display: block;
        width: 100%;
        position: relative;
        transition:
            background-color 0.3s,
            color 0.3s;
    }

    #faq-326 .cs-button:hover {
        cursor: pointer;
    }

    #faq-326 .cs-button:focus-visible {
        outline: 3px solid rgba(255, 106, 62, 0.35);
        outline-offset: -3px;
    }

    #faq-326 .cs-button:before {
        content: "";
        width: 0.5rem;
        height: 0.125rem;
        background-color: var(--headerColor);
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.5rem;
        transform: rotate(45deg);
        transform-origin: left center;
        transition:
            transform 0.5s,
            background-color 0.3s;
    }

    #faq-326 .cs-button:after {
        content: "";
        width: 0.5rem;
        height: 0.125rem;
        background-color: var(--headerColor);
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.3125rem;
        transform: rotate(-45deg);
        transform-origin: right center;
        transition:
            transform 0.5s,
            background-color 0.3s;
    }

    #faq-326 .cs-button-text {
        width: 100%;
        display: block;
        transition: color 0.3s;
    }

    #faq-326 .cs-item-p {
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        width: 100%;
        height: 0;
        margin: 0;
        padding: 0 clamp(1rem, 2vw, 1.5rem);
        opacity: 0;
        color: var(--bodyTextColor);
        overflow: hidden;
        transition:
            opacity 0.3s,
            padding-top 0.3s,
            padding-bottom 0.3s,
            color 0.3s;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #faq-326 .cs-topper {
        color: var(--blackjackGold);
    }

    body.dark-mode #faq-326 .cs-title {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #faq-326 .cs-faq-item {
        background-color: var(--medium);
        border-color: rgba(255, 255, 255, 0.07);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    }

    body.dark-mode #faq-326 .cs-faq-item:hover {
        border-color: rgba(255, 186, 67, 0.28);
    }

    body.dark-mode #faq-326 .cs-faq-item.active {
        background-color: var(--blackjackGreenDark);
        border-color: rgba(255, 186, 67, 0.5);
        box-shadow: inset 0.25rem 0 0 var(--blackjackGold);
    }

    body.dark-mode #faq-326 .cs-button {
        background-color: transparent;
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #faq-326 .cs-button-text {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #faq-326 .cs-button:before,
    body.dark-mode #faq-326 .cs-button:after {
        background-color: var(--bodyTextColorWhite);
    }

    body.dark-mode #faq-326 .cs-item-p {
        color: #d8d6de;
    }

    body.dark-mode #faq-326 .cs-faq-item.active .cs-button {
        background-color: transparent;
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #faq-326 .cs-faq-item.active .cs-button-text {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #faq-326 .cs-faq-item.active .cs-button:before,
    body.dark-mode #faq-326 .cs-faq-item.active .cs-button:after {
        background-color: var(--blackjackGold);
    }

    body.dark-mode #faq-326 .cs-faq-item.active .cs-item-p {
        color: #e8e5df;
    }

    body.dark-mode #faq-326 .cs-button:focus-visible {
        outline-color: rgba(255, 186, 67, 0.5);
    }
}
                                /*-- -------------------------- -->
<---          How It Works       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #how-it-works-1821 {
        padding: var(--sectionPadding);
        background:
            radial-gradient(
                circle at 15% 15%,
                rgba(255, 186, 67, 0.12),
                transparent 28rem
            ),
            linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
        overflow: hidden;
        position: relative;
    }

    #how-it-works-1821 .cs-container {
        width: 100%;
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(3rem, 8vw, 5rem);
    }

    #how-it-works-1821 .cs-content {
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #how-it-works-1821 .cs-title {
        max-width: 39rem;
    }

    #how-it-works-1821 .cs-text {
        max-width: 39rem;
        margin-bottom: 2rem;
    }

    #how-it-works-1821 .cs-steps {
        width: 100%;
        margin: 0 0 1.5rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        list-style: none;
    }

    #how-it-works-1821 .cs-step {
        display: grid;
        grid-template-columns: 3rem 1fr;
        align-items: flex-start;
        gap: 1rem;
        position: relative;
    }

    #how-it-works-1821 .cs-step:not(:last-child):after {
        content: "";
        width: 2px;
        height: calc(100% - 2rem);
        background: linear-gradient(
            to bottom,
            rgba(255, 106, 62, 0.42),
            rgba(255, 186, 67, 0.12)
        );
        position: absolute;
        top: 3.5rem;
        left: 1.4375rem;
    }

    #how-it-works-1821 .cs-number {
        font-size: 1rem;
        font-weight: 900;
        color: #fff;
        width: 3rem;
        height: 3rem;
        background: linear-gradient(
            135deg,
            var(--primary),
            var(--primaryLight)
        );
        border: 4px solid #fff4e8;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    #how-it-works-1821 .cs-step-content {
        padding-top: 0.25rem;
    }

    #how-it-works-1821 .cs-h3 {
        font-size: clamp(1.125rem, 3vw, 1.25rem);
        line-height: 1.3em;
        font-weight: 800;
        color: var(--headerColor);
        margin: 0 0 0.375rem;
    }

    #how-it-works-1821 .cs-step-text {
        font-size: 0.9375rem;
        line-height: 1.6em;
        color: var(--bodyTextColor);
        margin: 0;
    }

    #how-it-works-1821 .cs-filter-note {
        width: 100%;
        max-width: 39rem;
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: rgba(255, 186, 67, 0.12);
        border: 1px solid rgba(255, 186, 67, 0.35);
        border-radius: 0.75rem;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

    #how-it-works-1821 .cs-filter-icon {
        color: var(--primary);
        flex: none;
    }

    #how-it-works-1821 .cs-filter-note p {
        font-size: 0.875rem;
        line-height: 1.55em;
        color: var(--bodyTextColor);
        margin: 0;
    }

    #how-it-works-1821 .cs-filter-note strong {
        color: var(--headerColor);
    }

    #how-it-works-1821 .cs-button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 800;
        color: #fff;
        min-width: 13rem;
        padding: 0 1.5rem;
        background: var(--primary);
        border-radius: 0.5rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        position: relative;
        z-index: 1;
        overflow: hidden;
        transition:
            transform 0.3s,
            box-shadow 0.3s;
    }

    #how-it-works-1821 .cs-button-solid:before {
        content: "";
        width: 0;
        height: 100%;
        background: var(--blackjackGreenDark);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }

    #how-it-works-1821 .cs-button-solid:hover,
    #how-it-works-1821 .cs-button-solid:focus-visible {
        transform: translateY(-2px);
    }

    #how-it-works-1821 .cs-button-solid:hover:before,
    #how-it-works-1821 .cs-button-solid:focus-visible:before {
        width: 100%;
    }

    #how-it-works-1821 .cs-button-solid svg {
        transition: transform 0.3s;
    }

    #how-it-works-1821 .cs-button-solid:hover svg {
        transform: translateX(0.25rem);
    }

    #how-it-works-1821 .cs-button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }

    #how-it-works-1821 .cs-button-secondary {
        background: transparent;
        color: var(--headerColor);
        border: 2px solid currentColor;
        box-shadow: none;
    }

    #how-it-works-1821 .cs-button-secondary:before {
        display: none;
    }

    #how-it-works-1821 .cs-button-secondary:hover,
    #how-it-works-1821 .cs-button-secondary:focus-visible {
        transform: translateY(-2px);
        box-shadow: none;
    }

    #how-it-works-1821 .cs-disclaimer {
        font-size: 0.75rem;
        line-height: 1.5em;
        max-width: 32rem;
        margin: 0.875rem 0 0;
        color: #777389;
    }

    #how-it-works-1821 .cs-visual {
        width: 100%;
        min-height: 36rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    /* Decorative blurred colour orbs behind the phone mockup — switched off
       in favour of a flat treatment. The markup is left in place so this is a
       one-line revert if the glow is ever wanted back. */
    #how-it-works-1821 .cs-glow {
        display: none;
    }

    #how-it-works-1821 .cs-phone {
        width: min(18.5rem, 82vw);
        padding: 0.55rem;
        background: #171717;
        border: 1px solid #383838;
        border-radius: 2.25rem;
        position: relative;
        z-index: 2;
        box-shadow:
            0 2rem 4rem rgba(18, 18, 18, 0.25),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        transform: rotate(2deg);
    }

    #how-it-works-1821 .cs-phone-top {
        height: 2rem;
        color: #fff;
        padding: 0 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    #how-it-works-1821 .cs-phone-time {
        font-size: 0.625rem;
        font-weight: 700;
    }

    #how-it-works-1821 .cs-phone-notch {
        width: 5.5rem;
        height: 1.35rem;
        background: #070707;
        border-radius: 0 0 0.875rem 0.875rem;
        position: absolute;
        top: -0.55rem;
        left: 50%;
        transform: translateX(-50%);
    }

    #how-it-works-1821 .cs-phone-status {
        display: flex;
        align-items: flex-end;
        gap: 2px;
    }

    #how-it-works-1821 .cs-phone-status span {
        width: 3px;
        background: #fff;
        border-radius: 2px;
    }

    #how-it-works-1821 .cs-phone-status span:nth-child(1) {
        height: 4px;
    }

    #how-it-works-1821 .cs-phone-status span:nth-child(2) {
        height: 6px;
    }

    #how-it-works-1821 .cs-phone-status span:nth-child(3) {
        width: 8px;
        height: 5px;
    }

    #how-it-works-1821 .cs-phone-screen {
        min-height: 31rem;
        padding: 1.25rem 0.875rem 1rem;
        background: #f7f7f4;
        border-radius: 1.75rem;
        overflow: hidden;
    }

    #how-it-works-1821 .cs-dashboard-heading {
        margin-bottom: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #how-it-works-1821 .cs-eyebrow {
        font-size: 0.5625rem;
        line-height: 1.2em;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 800;
        color: var(--primary);
        display: block;
    }

    #how-it-works-1821 .cs-dashboard-heading h3 {
        font-size: 1.125rem;
        line-height: 1.2em;
        color: #171717;
        margin: 0.2rem 0 0;
    }

    #how-it-works-1821 .cs-streak {
        font-size: 0.75rem;
        font-weight: 800;
        color: #ad521b;
        padding: 0.4rem 0.55rem;
        background: #ffead1;
        border-radius: 2rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    #how-it-works-1821 .cs-streak svg {
        width: 0.875rem;
        height: 0.875rem;
        color: var(--primary);
    }

    #how-it-works-1821 .cs-filter-row {
        margin-bottom: 0.875rem;
        display: flex;
        gap: 0.375rem;
        overflow: hidden;
    }

    #how-it-works-1821 .cs-filter-row span {
        font-size: 0.5625rem;
        font-weight: 700;
        color: #474457;
        padding: 0.4rem 0.55rem;
        background: #fff;
        border: 1px solid #dfdde5;
        border-radius: 2rem;
        white-space: nowrap;
    }

    #how-it-works-1821 .cs-reward-card {
        min-height: 4.5rem;
        margin-bottom: 0.625rem;
        padding: 0.7rem;
        background: #fff;
        border: 1px solid #e5e3e9;
        border-radius: 0.875rem;
        display: grid;
        grid-template-columns: 2.5rem 1fr auto;
        align-items: center;
        gap: 0.625rem;
        box-shadow: 0 0.5rem 1.25rem rgba(18, 18, 18, 0.05);
    }

    #how-it-works-1821 .cs-reward-card.cs-ready {
        border-color: rgba(15, 107, 79, 0.35);
        box-shadow: 0 0.5rem 1.25rem rgba(15, 107, 79, 0.09);
    }

    #how-it-works-1821 .cs-brand {
        font-size: 0.6875rem;
        font-weight: 900;
        color: #fff;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #how-it-works-1821 .cs-brand-gold {
        background: linear-gradient(135deg, #e99f1b, #ffca62);
    }

    #how-it-works-1821 .cs-brand-green {
        background: linear-gradient(135deg, #0f6b4f, #35aa7f);
    }

    #how-it-works-1821 .cs-brand-red {
        background: linear-gradient(135deg, #a82020, #e45050);
    }

    #how-it-works-1821 .cs-brand-purple {
        background: linear-gradient(135deg, #543792, #8b6ad1);
    }

    #how-it-works-1821 .cs-reward-info {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    #how-it-works-1821 .cs-casino-name {
        font-size: 0.6875rem;
        line-height: 1.2em;
        font-weight: 800;
        color: #171717;
    }

    #how-it-works-1821 .cs-bonus {
        font-size: 0.5625rem;
        line-height: 1.3em;
        color: #6b6878;
    }

    #how-it-works-1821 .cs-collect {
        font-size: 0.625rem;
        line-height: 1em;
        text-decoration: none;
        font-weight: 800;
        color: #fff;
        padding: 0.65rem 0.7rem;
        background: var(--blackjackGreen);
        border-radius: 0.5rem;
        transition:
            background-color 0.3s,
            transform 0.3s;
    }

    #how-it-works-1821 .cs-collect:hover,
    #how-it-works-1821 .cs-collect:focus-visible {
        background: var(--blackjackGreenDark);
        transform: translateY(-1px);
    }

    #how-it-works-1821 .cs-countdown {
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    #how-it-works-1821 .cs-countdown-label {
        font-size: 0.5rem;
        color: #777389;
    }

    #how-it-works-1821 .cs-countdown-time {
        font-size: 0.75rem;
        font-weight: 900;
        color: var(--primary);
        font-variant-numeric: tabular-nums;
    }

    #how-it-works-1821 .cs-countdown.cs-countdown-ready {
        align-items: flex-end;
    }

    #how-it-works-1821 .cs-small-timer {
        font-size: 0.5625rem;
        font-weight: 800;
        color: #625e70;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-variant-numeric: tabular-nums;
    }

    #how-it-works-1821 .cs-small-timer svg {
        width: 0.75rem;
        height: 0.75rem;
        color: #8a8794;
    }

    #how-it-works-1821 .cs-phone-message {
        font-size: 0.625rem;
        line-height: 1.4em;
        color: #4e4b66;
        margin-top: 1rem;
        padding: 0.75rem;
        background: #e7f6ef;
        border: 1px solid #c8e8da;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    #how-it-works-1821 .cs-phone-message strong {
        color: #155f48;
        display: block;
    }

    #how-it-works-1821 .cs-check {
        width: 1.75rem;
        height: 1.75rem;
        color: #fff;
        background: var(--blackjackGreen);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: none;
    }

    #how-it-works-1821 .cs-check svg {
        width: 1rem;
        height: 1rem;
    }

    #how-it-works-1821 .cs-floating-card {
        font-size: 0.625rem;
        line-height: 1.35em;
        color: #5c5968;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(229, 227, 233, 0.95);
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        position: absolute;
        z-index: 3;
        box-shadow: 0 1rem 2.5rem rgba(18, 18, 18, 0.14);
        backdrop-filter: blur(12px);
    }

    #how-it-works-1821 .cs-floating-card strong {
        font-size: 0.6875rem;
        color: #171717;
        display: block;
    }

    #how-it-works-1821 .cs-floating-top {
        top: 3rem;
        right: -0.25rem;
        animation: csFloat 4s ease-in-out infinite;
    }

    #how-it-works-1821 .cs-floating-bottom {
        bottom: 2.5rem;
        left: -0.25rem;
        animation: csFloat 4s ease-in-out 1s infinite;
    }

    #how-it-works-1821 .cs-floating-icon,
    #how-it-works-1821 .cs-flame {
        width: 2rem;
        height: 2rem;
        border-radius: 0.625rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: none;
    }

    #how-it-works-1821 .cs-floating-icon {
        color: #fff;
        background: var(--blackjackGreen);
    }

    #how-it-works-1821 .cs-flame {
        color: var(--primary);
        background: #fff0df;
    }

    #how-it-works-1821 .cs-floating-icon svg,
    #how-it-works-1821 .cs-flame svg {
        width: 1rem;
        height: 1rem;
    }

    @keyframes csFloat {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-0.5rem);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #how-it-works-1821 .cs-floating-card {
            animation: none;
        }

        #how-it-works-1821 *,
        #how-it-works-1821 *:before,
        #how-it-works-1821 *:after {
            scroll-behavior: auto !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #how-it-works-1821 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        gap: clamp(3.5rem, 7vw, 7rem);
    }

    #how-it-works-1821 .cs-content {
        width: 50%;
        max-width: 38.5rem;
    }

    #how-it-works-1821 .cs-visual {
        width: 43%;
        min-height: 40rem;
        flex: none;
    }

    #how-it-works-1821 .cs-phone {
        width: clamp(18.5rem, 25vw, 21rem);
    }

    #how-it-works-1821 .cs-floating-top {
        right: -1rem;
    }

    #how-it-works-1821 .cs-floating-bottom {
        left: -1rem;
    }
}

/* Large Desktop - 1200px */
@media only screen and (min-width: 75rem) {
    #how-it-works-1821 .cs-floating-top {
        right: -2rem;
    }

    #how-it-works-1821 .cs-floating-bottom {
        left: -2rem;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #how-it-works-1821 {
        background:
            radial-gradient(
                circle at 15% 15%,
                rgba(255, 186, 67, 0.08),
                transparent 28rem
            ),
            #121212;
    }

    body.dark-mode #how-it-works-1821 .cs-h3,
    body.dark-mode #how-it-works-1821 .cs-filter-note strong {
        color: var(--bodyTextColorWhite);
    }

    body.dark-mode #how-it-works-1821 .cs-step-text,
    body.dark-mode #how-it-works-1821 .cs-filter-note p,
    body.dark-mode #how-it-works-1821 .cs-disclaimer {
        color: #c9c7d0;
    }

    body.dark-mode #how-it-works-1821 .cs-number {
        border-color: #352a25;
    }

    body.dark-mode #how-it-works-1821 .cs-filter-note {
        background: rgba(255, 186, 67, 0.08);
        border-color: rgba(255, 186, 67, 0.2);
    }

    body.dark-mode #how-it-works-1821 .cs-button-secondary {
        color: var(--bodyTextColorWhite);
        border-color: var(--bodyTextColorWhite);
    }

    /*
     * The dashboard preview intentionally remains light to resemble an
     * application interface and maintain contrast inside the dark section.
     */
}