/* =====================================================================
   new-design.css  —  consolidated stylesheet for the gaffg redesign.
   Build everything new HERE. Loaded globally via NewDesignAsset on every
   FrontController page. NO old style.css / style.min.css is loaded.
   Sections below are the former new-header / new-footer / casino-cards /
   casinos-page / casino-review files, merged in cascade order.
   ===================================================================== */

/* ============================ base reset ============================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Reserve the scrollbar gutter always, so the position:fixed header and the
       normal-flow content/footer center on the same width (no ~15px scrollbar drift). */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Constrain replaced/embedded media to the content width. `iframe` (YouTube &
   other embeds) and `input[type=image]` (legacy editor image inserts) were
   missing here, so hard-coded widths like <iframe width="560"> or an inline
   style="width:500px" pushed pages wider than the mobile viewport. */
img, svg, video, iframe, input[type="image"] {
    max-width: 100%;
}

/* Layout container (was in the old style.css, now lives here). */
.container {
    /* 1232px content column to match the new design system (1232 + 2*40 gutter). */
    max-width: 1312px;
    margin: auto;
    padding: 0 40px;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    .container {
        padding: 0 16px;
    }
}

/* Shared section eyebrow ("01 — TOP RATED"): number is SemiBold, text is Medium.
   Used inside every .section-*__badge wrapper. */
.section-eyebrow__num {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* The "dash" after the number is a clean 16px line (Figma Rectangle 1688),
   not an em-dash glyph (which renders too long/uneven). */
.section-eyebrow__num::after {
    content: '';
    width: 16px;
    height: 1px;
    background: currentColor;
}

.section-eyebrow__text {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.04em;
    color: #111827;
}

/* ===================================================================== */
/* ===========================GAFFG New Header =========================== */

:root {
    --gf-header-bg: #111827;
    --gf-header-height: 72px;
    --gf-accent: #2DD4BF;
    --gf-register-bg: #4F46E5;
    --gf-text: #ffffff;
    --gf-text-muted: rgba(255, 255, 255, 0.6);
    --gf-border: rgba(255, 255, 255, 0.1);
    --gf-dropdown-bg: #1F2937;
    --gf-dropdown-border: #4B5563;
}

.gf-header {
    background: var(--gf-header-bg);
    height: var(--gf-header-height);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--gf-border);
}

.gf-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1232px;
    margin: 0 auto;
    /* Figma Container gap is 8px (32px belongs to Main Nav, between links).
       32px here + the wide search field overflowed 1232 and pushed Register out. */
    gap: 8px;
}

.gf-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
    text-decoration: none !important;
}

.gf-header__logo img {
    height: 36px;
    width: auto;
}

.gf-header__logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 0;
    color: #ffffff;
    vertical-align: middle;
}

/* ---- Nav ---- */
.gf-header__nav {
    display: flex;
    list-style: none;
    margin: 0 0 0 24px;
    padding: 0;
    /* 8px gap + 12px link padding each side = 32px between labels (Figma Main Nav). */
    gap: 8px;
    flex: 1;
}

.gf-header__nav-item {
    position: relative;
}

.gf-header__nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--gf-text);
    text-decoration: none !important;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    transition: color 0.15s;
    letter-spacing: 0;
    white-space: nowrap;
}

.gf-header__nav-link:hover,
.gf-header__nav-item--open > .gf-header__nav-link,
.gf-header__nav-item--dropdown:hover > .gf-header__nav-link {
    color: var(--gf-accent);
}

.gf-header__chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.gf-header__nav-item--dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
}

.gf-header__nav-item--open .gf-header__chevron {
    transform: rotate(180deg);
}

/* ---- Dropdown ---- */
.gf-header__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--gf-dropdown-bg);
    border: 1px solid #4B5563;
    border-radius: 8px;
    width: 225px;
    max-height: 480px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1001;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.gf-header__nav-item--open .gf-header__dropdown,
.gf-header__nav-item--dropdown:hover .gf-header__dropdown {
    display: block;
}

.gf-header__dropdown-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 16px;
    color: var(--gf-text);
    text-decoration: none !important;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    border-bottom: 1px solid #374151;
    transition: color 0.15s;
}

.gf-header__dropdown-item:last-child a {
    border-bottom: none;
}

.gf-header__dropdown-item a:hover {
    color: var(--gf-accent);
}

.gf-header__dropdown-item--accent a {
    color: #2DD4BF;
}

.gf-header__dropdown-divider {
    border-top: 1px solid var(--gf-border);
    margin: 4px 0;
}

/* ---- Actions ---- */
.gf-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.gf-header__search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gf-border);
    border-radius: 8px;
    padding: 0 16px;
    height: 44px;
    width: 133px;
    gap: 8px;
}

.gf-header__search-input {
    background: none;
    border: none;
    outline: none;
    color: var(--gf-text);
    font-size: 14px;
    flex: 1;
    min-width: 0;
}

.gf-header__search-input::placeholder {
    color: var(--gf-text-muted);
}

.gf-header__search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gf-text-muted);
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.gf-header__search-btn:hover {
    color: var(--gf-text);
}

/* Vertical separator between search and Login (Figma 1px divider). */
.gf-header__divider {
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.gf-header__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border: 1px solid #6B7280;
    border-radius: 8px;
    color: #EEF2FF !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 700;
    transition: border-color 0.15s;
    white-space: nowrap;
}

.gf-header__login:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.gf-header__register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    background: var(--gf-register-bg);
    border: none;
    border-radius: 8px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 700;
    transition: background 0.15s;
    white-space: nowrap;
}

.gf-header__register:hover {
    background: #4338CA;
}

/* ---- Hamburger ---- */
.gf-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
}

.gf-header__hamburger span {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--gf-text);
    border-radius: 2px;
}

/* ---- Mobile overlay ---- */
.gf-header__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

.gf-header__overlay.is-open {
    display: block;
}

/* ---- Mobile menu ---- */
.gf-header__mobile {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100 dvh;
    background: #111827;
    z-index: 1002;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.gf-header__mobile.is-open {
    transform: translateX(0);
}

.gf-header__mobile-inner {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.gf-header__mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    margin-bottom: 16px;
}

.gf-header__mobile-close {
    background: none;
    border: none;
    color: var(--gf-text);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Mobile Search ---- */
.gf-header__mobile-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    height: 44px;
    gap: 24px;
    margin-bottom: 0;
}

.gf-header__mobile-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--gf-text);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
}

.gf-header__mobile-search-input::placeholder {
    color: var(--gf-text);
}

/* ---- Mobile Nav ---- */
.gf-header__mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gf-header__mobile-link-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 12px;
    height: 48px;
    border-bottom: 1px solid #374151;
    box-sizing: border-box;
}

.gf-header__mobile-link {
    display: block;
    color: var(--gf-text) !important;
    text-decoration: none !important;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    flex: 1;
    white-space: nowrap;
}

.gf-header__mobile-link:hover,
.gf-header__mobile-link.is-active {
    color: var(--gf-accent) !important;
}

.gf-header__mobile-link.is-active + .gf-header__mobile-toggle,
.gf-header__mobile-toggle.is-open {
    color: var(--gf-accent);
}

.gf-header__mobile-toggle {
    background: none;
    border: none;
    color: var(--gf-text);
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.gf-header__mobile-toggle.is-open {
    transform: rotate(180deg);
}

/* ---- Mobile Sub-menu ---- */
.gf-header__mobile-sub {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #1F2937;
}

.gf-header__mobile-sub.is-open {
    display: block;
}

.gf-header__mobile-sub li a {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    color: var(--gf-text) !important;
    text-decoration: none !important;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    border-bottom: 1px solid #374151;
    white-space: nowrap;
}

.gf-header__mobile-sub li a:hover {
    color: var(--gf-accent) !important;
}

.gf-header__mobile-sub li.accent a {
    color: #2DD4BF !important;
}

/* ---- Mobile Actions ---- */
.gf-header__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    flex-shrink: 0;
    border-top: 1px solid #374151;
}

.gf-header__mobile-login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 11px 20px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #374151 !important;
    text-decoration: none !important;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
}

.gf-header__mobile-register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 11px 20px;
    background: #4F46E5;
    border-radius: 8px;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
}

/* ---- Section Hero ---- */
.section-hero {
    width: 100%;
    height: 694px;
    background-color: #111827;
    position: relative;
    padding: 48px 24px 176px;
    box-sizing: border-box;
    overflow: hidden;
}

.section-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/bg-hero-pattern.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
}

.section-hero__bg {
    /* Figma: the artwork sits at its natural 1920×800 size, horizontally centred
       (not scaled-to-height and pinned right) — keeps the lighthouse + beam large
       and toward the right. The dark fade is handled by the ::before vignette. */
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1920px;
    height: auto;
    max-width: none;
    pointer-events: none;
    z-index: 0;
    /* lift the artwork a touch (desktop + mobile) so the lighthouse/beam reads */
    filter: brightness(1.0);
}

/* Dark vignette over the artwork (Figma gradients): darken the left 55% so the
   heading/text stay readable, plus the right edge and the bottom. */
.section-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #0E1125 0%, rgba(14, 17, 37, 0) 55%),
    linear-gradient(270deg, #0E1125 0%, rgba(14, 17, 37, 0) 16%),
    linear-gradient(0deg, #0E1125 0%, rgba(14, 17, 37, 0) 50%);
}

.section-hero__inner {
    position: relative;
    z-index: 3;
    max-width: 1232px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-hero__content {
    width: 720px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section-hero__text-col {
    width: 560px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 8px;
    background: #1F2937;
    border: 1px solid #4B5563;
    border-radius: 9999px;
    width: fit-content;
}

.section-hero__badge-dot {
    width: 16px;
    height: 16px;
    background-image: url('../img/icons/material-symbols_shield.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.section-hero__badge-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0;
    color: #2DD4BF;
}

.section-hero__heading {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -0.04em;
    color: #ffffff;
    margin: 0;
}

.section-hero__period {
    color: #2DD4BF;
}

.section-hero__desc {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #E5E7EB;
    margin: 0;
}

.section-hero__search-area {
    width: 720px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-hero__search-bar {
    display: flex;
    align-items: center;
    width: 92%;
    height: 56px;
    background: #1F2937;
    border-radius: 8px;
    border: 1px solid #0D9488;
    padding: 16px 20px;
    box-sizing: border-box;
    gap: 16px;
}

.section-hero__search-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    color: #ffffff !important;
    background: transparent !important;
    width: 640px;
    -webkit-text-fill-color: #ffffff;
}

.section-hero__search-input::placeholder {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    opacity: 1;
}

/* Browser autofill / autocomplete paints a light blue/white background that hides
   the white text — repaint the dark bar bg via an inset shadow and keep text white. */
.section-hero__search-input:-webkit-autofill,
.section-hero__search-input:-webkit-autofill:hover,
.section-hero__search-input:-webkit-autofill:focus,
.section-hero__search-input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #1F2937 inset;
    box-shadow: 0 0 0 1000px #1F2937 inset;
    transition: background-color 5000s ease-in-out 0s;
}

.section-hero__search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.section-hero__popular {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.section-hero__popular-label {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0.04em;
    color: #E5E7EB;
    white-space: nowrap;
}

.section-hero__popular-tags {
    display: flex;
    gap: 8px;
}

.section-hero__tag {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 8px 12px;
    background: #1F2937;
    border: 1px solid #4B5563;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: #E5E7EB;
    text-decoration: none !important;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.section-hero__tag:hover {
    border-color: #2DD4BF;
    color: #2DD4BF;
}

/* ---- Body offset ---- */
main {
    padding-top: var(--gf-header-height);
}

.body-padding {
    display: none;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .gf-header {
        height: 48px;
    }

    .gf-header__inner {
        padding: 12px 16px;
    }

    main {
        padding-top: 48px;
    }

    .gf-header__logo-text {
        font-size: 20px;
        line-height: 21px;
    }

    .gf-header__logo img {
        height: 24px;
    }

    .gf-header__mobile-inner {
        gap: 8px;
    }

    .gf-header__nav,
    .gf-header__actions {
        display: none;
    }

    .gf-header__hamburger {
        display: flex;
    }
}

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */

/* ---- Stars ---- */
.hp-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    width: 90px;
    height: 18px;
}

.hp-star {
    color: #0D9488;
    flex-shrink: 0;
}

.hp-star--empty {
    color: #D1D5DB;
}

.hp-star--half {
    color: #0D9488;
    opacity: 0.5;
}

/* ---- Stats Bar ---- */
.section-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 4;
}

.section-stats__inner {
    max-width: 1232px;
    margin: 0 auto;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    height: 96px;
    box-sizing: content-box;
}

.section-stats__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.section-stats__divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.section-stats__number {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 40px;
    color: #ffffff;
}

.section-stats__accent {
    color: #2DD4BF;
}

.section-stats__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.section-stats__label-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0;
    color: #ffffff;
}

.section-stats__label-sub {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.65);
}

/* ---- Media Mentions ---- */
.section-mentions {
    background: #ffffff;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    padding: 18px 24px;
}

.section-mentions__inner {
    max-width: 1232px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 40px;
}

.section-mentions__label {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #374151;;
    white-space: nowrap;
    flex-shrink: 0;
}

.section-mentions__logos {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.section-mentions__logo-text {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #9CA3AF;
    letter-spacing: 0.03em;
    transition: color 0.15s;
}

.section-mentions__logo-text:hover {
    color: #4B5563;
}

.section-mentions__logo-item {
    display: flex;
    align-items: center;
    opacity: 0.55;
    transition: opacity 0.2s;
    text-decoration: none;
}

.section-mentions__logo-item:hover {
    opacity: 1;
}

.section-mentions__logo-img {
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: brightness(0);
}

.section-mentions__bar-img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0);
}

/* ---- Shared heading row ---- */
.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.section-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0;
}

/* Sub-section heading (Latest Reviews, Upcoming Events) — smaller variant. */
.section-subtitle {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0;
}

.section-title--white {
    color: #ffffff;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #4F46E5;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.section-link:hover {
    color: #4338CA;
}

.section-link--white {
    color: rgba(255, 255, 255, 0.65);
}

.section-link--white:hover {
    color: #ffffff;
}

/* ---- Section pattern image (used in programs + spotlight) ---- */
.section-pattern-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
    opacity: 0.6;
}

/* ---- Featured Programs ---- */
.section-programs {
    background: #F9FAFB;
    padding: 64px 24px;
    position: relative;
    overflow: hidden;
}

/* Latest Reviews as its own section (extracted from Programs so it can be
   reordered / hidden independently). Same light bg for visual continuity. */
.section-reviews {
    background: #F9FAFB;
    padding: 0 24px 64px;
    position: relative;
    overflow: hidden;
}
.section-reviews .latest-reviews {
    margin-top: 0;
}

.section-programs__inner {
    max-width: 1232px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.section-programs__header {
    margin-bottom: 28px;
}

.section-programs__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0d9488;
    background: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 14px;
}

/*.section-programs__badge::after {*/
/*content: '';*/
/*display: inline-block;*/
/*width: 40px;*/
/*height: 1px;*/
/*background: #0d9488;*/
/*}*/

.section-programs__header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.section-programs__header-left {
    flex: 1;
    min-width: 0;
}

.section-programs__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0 0 10px;
}

.section-programs__desc {
    font-size: 16px;
    line-height: 24px;
    font-weight: 450;
    letter-spacing: 1%;
    color: #1F2937;
    margin: 0;
    max-width: 600px;
}

.section-programs__header-links {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;
}

.section-programs__hlink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: -0.02em;
    color: #111827 !important;
    text-decoration: none !important;
    transition: opacity 0.15s;
}

.section-programs__hlink:hover {
    opacity: 0.75;
}

.section-programs__hlink--muted {
    color: #1F2937 !important;
    font-weight: 700;
}

.section-programs__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- Latest Reviews row ---- */
.latest-reviews {
    margin-top: 24px;
    padding-top: 32px;
    border-top: 1px solid #E5E7EB;
}

.latest-reviews__label {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #172B4D;;
    margin: 0 0 20px;
}

.latest-reviews__row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.latest-reviews__row::-webkit-scrollbar {
    display: none;
}

.rev-card {
    scroll-snap-align: start;
    flex: 0 0 calc(25% - 12px);
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 0;
}

.latest-reviews__row .rev-card {
    scroll-snap-align: start;
    flex: 0 0 calc(25% - 12px);
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 0;
}

.rev-card:hover {
    border-color: #4F46E5;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.08);
}

.rev-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rev-card__logo-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rev-card__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rev-card__main {
    flex: 1;
    min-width: 0;
}

.rev-card__name {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.latest-reviews .rev-card__name {
    font-weight: 700;
    font-style: bold;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -2%;
    vertical-align: bottom;
}

.latest-reviews .rev-card__cat {
    font-weight: 500;
    font-style: medium;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0%;
    color: #0F766E;

}

.rev-card__stars {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rev-card__score {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.rev-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
}

.rev-card__cat {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0D9488;
}

.rev-card__link {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #4F46E5;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.01em;
}

@media (max-width: 900px) {
    .rev-card {
        flex: 0 0 calc(50% - 8px);
    }
}

@media (max-width: 600px) {
    .rev-card {
        flex: 0 0 calc(100% - 0px);
    }
}

.section-dot {
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.section-dot:hover {
    background: #6b7280;
}

.section-dot--active {
    background: #0D9488;
    transform: scale(1.2);
}

.section-programs__sep {
    max-width: 1232px;
    margin: 24px auto 0;
    height: 1px;
    background: #E5E7EB;
}

.section-programs__footer {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* The duplicate footer "All Affiliate Programs" link only appears on phones
   (under Load More); on desktop the header copy is used instead. */
.section-programs__footer-link {
    display: none;
}

/* ---- Section dots (pagination indicators) ---- */
.section-dots, .section-dots-right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 12px;
    margin-top: 20px;
}

.section-trust__left .section-dots {
    justify-content: flex-start;
    height: 52px;
    gap: 12px;
    margin-top: 0;
}

.section-trust__left .section-dots-right {
    justify-content: flex-end;
    height: 52px;
    gap: 12px;
    margin-top: 0;
}

.section-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 99999px;
    background: #E5E7EB;
    flex-shrink: 0;
}

.section-dot--active {
    background: #0D9488;
}

/* ---- Program Card (Figma design) ---- */
.prog-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 170px;
    transition: box-shadow 0.15s, border-color 0.15s;
    position: relative;
}

.prog-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    border-color: #D1D5DB;
}

/* When a brands dropdown is open, let it escape the card's overflow clip and
   stack above neighbouring cards (corners stay rounded via the panel radius). */
.prog-card:has(.prog-card__brands-dropdown.is-open) {
    overflow: visible;
    z-index: 50;
}

/* Top 3 — teal accent border (mirrors cc-card--featured on casinos page) */
.prog-card--top {
    border: 2px solid #0D9488;
}

.prog-card--top:hover {
    border-color: #0D9488;
}

/* Rank badge */
.prog-card--regular .prog-card__rank-tri::before {
    border-color: #D1D5DB transparent transparent transparent;
}

.prog-card--regular .prog-card__rank-num {
    color: #6B7280;
}

/* Left panel */
.prog-card__panel {
    width: 156px;
    min-width: 156px;
    background: #F9FAFB;
    border-right: 1px solid #E5E7EB;
    border-radius: 8px 0 0 8px; /* keep left corners rounded when the card overflows */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    position: relative;
    gap: 14px;
    flex-shrink: 0;
}

.prog-card__rank-tri {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    /* No own corner radius: the card's overflow:hidden already clips this to the
       card's (inner) rounded corner. Rounding it here too rounds tighter than the
       card's inner border, exposing a thin white arc between the two. */
    pointer-events: none;
}

.prog-card__rank-tri::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-width: 40px 40px 0 0;
    border-color: #0D9488 transparent transparent transparent;
}

.prog-card__rank-num {
    position: absolute;
    left: 6px;
    top: 5px;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #ffffff;
    z-index: 1;
    line-height: 1;
}

.prog-card__logo-wrap {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prog-card__logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    background: #ffffff;
}

.prog-card__rating-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}


.prog-card__score {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    color: #172B4D;
}

/* Middle: name + deals */
.prog-card__mid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    width: 400px;
    min-width: 400px;
    flex-shrink: 0;
    gap: 12px;
}

/* Brand listing cards carry only a logo/name/CTA (no deals or info panel), so
   let the name area grow to fill the row and keep the button flush right. */
.prog-card--brand .prog-card__mid {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.prog-card__name-area {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.prog-card__name-link {
    text-decoration: none !important;
}

.prog-card__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    color: #172b4d;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prog-card__name:hover {
    color: #4F46E5;
}

.prog-card__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prog-card__year {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    vertical-align: bottom;
}

.prog-card__new-badge {
    display: inline-flex;
    align-items: center;
    height: 17px;
    padding: 0 7px;
    border-radius: 20px;
    background: #059669;
    font-family: 'Manrope', sans-serif;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.prog-card__deals-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 10px 8px;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
}

.prog-card__deals-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.prog-card__deal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.prog-card__deal-sep-v {
    width: 1px;
    height: 28px;
    background: #E5E7EB;
    flex-shrink: 0;
}

.prog-card__deal-lbl {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -0.02em;
    color: #374151;
}

.prog-card__deal-lbl--green {
    color: #0F766E;
}

.prog-card__deal-val {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #111827;
    text-align: left;
    white-space: nowrap;
}

/* Only numbers / % / currency are green inside a deal value. */
.prog-card__deal-num {
    color: #0F766E;
}

.prog-card__deal-val--green {
    color: #0F766E;
}

.prog-card__deal-na {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: #9CA3AF;
    font-style: italic;
}

/* Exclusive-offer note below the deals box (badge icon + text). */
.prog-card__deal-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: #1F2937;
}

.prog-card__deal-note-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Outer vertical separator */
.prog-card__vsep {
    width: 1px;
    background: #F0F0F0;
    align-self: stretch;
    margin: 16px 0;
    flex-shrink: 0;
}

/* Info panel: Brands / Payments / Software */
.prog-card__info-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
    min-width: 0;
}

.prog-card__info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    min-width: 0;
}

.prog-card__hsep {
    height: 1px;
    background: #F0F0F0;
}

.prog-card__info-lbl {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    letter-spacing: 0;
    min-width: 72px;
    flex-shrink: 0;
}

.prog-card__info-lbl::after {
    content: ':';
}

.prog-card__brands-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    max-height: 28px; /* one chip row when collapsed */
    overflow: hidden;
    position: relative;
    transition: max-height 0.2s ease;
}

/* Expanded: reveal every brand chip wrapping onto further rows. */
.prog-card__brands-wrap.is-expanded .prog-card__brands-chips {
    max-height: 1000px;
}

/* Initial-letter placeholder shown in a chip when the brand has no logo file. */
.prog-card__brand-logo--ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E5E7EB;
    color: #6B7280;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.prog-card__brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 4px 6px 4px 4px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #1F2937 !important;
    white-space: nowrap;
    text-decoration: none !important;
}

.prog-card__brand-chip span {
    color: #1F2937 !important;
}

.prog-card__brand-chip:visited,
.prog-card__brand-chip:visited span {
    color: #1F2937 !important;
}

.prog-card__brand-chip:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    color: #111827 !important;
}

.prog-card__brand-chip:hover span {
    color: #111827 !important;
}

.prog-card__brand-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.prog-card__brand-more {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #6B7280;
}

/* Brands row wrap */
.prog-card__brands-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.prog-card__brands-toggle {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px;
    border: none;
    background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    cursor: pointer;
    width: 64px;
    height: 28px;
    border-radius: 4px;
    z-index: 1;
}

.prog-card__brands-toggle:hover {
    opacity: 0.75;
}

.prog-card__brands-toggle svg {
    transition: transform 0.2s ease;
}

/* Expanded: drop the fade-out gradient and flip the chevron. */
.prog-card__brands-wrap.is-expanded .prog-card__brands-toggle {
    background: none;
}

.prog-card__brands-wrap.is-expanded .prog-card__brands-toggle svg {
    transform: rotate(180deg);
}

/* Keep the "Brands:" label and chevron on the first row as chips wrap downward. */
.prog-card__brands-row {
    align-items: flex-start;
}

.prog-card__brands-row .prog-card__info-lbl {
    line-height: 28px;
}

.prog-card__brands-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4F46E5;
    flex-shrink: 0;
}

/* Dropdown */
.prog-card__brands-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 16px;
    width: 312px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
    gap: 12px;
}

.prog-card__brands-dropdown.is-open {
    display: flex;
    flex-direction: column;
}

.prog-card__brands-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.prog-card__brands-dropdown-title {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    line-height: 18px;
}

.prog-card__brands-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6B7280;
    padding: 0;
    flex-shrink: 0;
}

.prog-card__brands-close svg {
    width: 9.33px;
    height: 9.33px;
}

.prog-card__brands-close:hover {
    color: #111827;
}

.prog-card__brands-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    color: #1F2937;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    flex-shrink: 0;
}

a.prog-card__brands-dropdown-item:hover {
    color: #0D9488;
}

.prog-card__brands-dropdown-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.prog-card__brands-dropdown-logo-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #E5E7EB;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #6B7280;
}

.prog-card__info-txt {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #1F2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Expandable text rows (Payments): clamp to one line, chevron reveals the rest. */
.prog-card__expand-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.prog-card__expand-txt {
    display: block;
}

.prog-card__expand-row.is-expanded {
    align-items: flex-start;
}

.prog-card__expand-row.is-expanded .prog-card__info-lbl {
    line-height: 18px;
}

.prog-card__expand-row.is-expanded .prog-card__expand-txt {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.prog-card__expand-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px;
    border: none;
    background: linear-gradient(270deg, #FFFFFF 40%, rgba(255, 255, 255, 0) 100%);
    cursor: pointer;
    width: 48px;
    height: 18px;
    z-index: 1;
}

.prog-card__expand-toggle:hover {
    opacity: 0.75;
}

.prog-card__expand-toggle svg {
    transition: transform 0.2s ease;
}

.prog-card__expand-row.is-expanded .prog-card__expand-toggle {
    top: 0;
    transform: none;
    background: none;
}

.prog-card__expand-row.is-expanded .prog-card__expand-toggle svg {
    transform: rotate(180deg);
}

/* Sign-up button link-out icon (replaces the inline SVG). */
.prog-card__btn-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Actions */
.prog-card__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 20px;
    gap: 8px;
    flex-shrink: 0;
    min-width: 220px;
}

.prog-card__btn-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #111827 !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.prog-card__btn-signup:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.prog-card__btn-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.prog-card__btn-review:hover {
    opacity: 0.9;
}

.prog-card__btn-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 12px 48px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #111827;
    text-decoration: none !important;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.prog-card__btn-all:hover {
    border-color: #9CA3AF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.cc-card.cc-card--framed {
    border: 2px solid #0D9488;
}

/* ---- Latest Articles ---- */
.section-articles {
    background: #ffffff;
    padding: 48px 24px;
}

.section-articles__inner {
    max-width: 1232px;
    margin: 0 auto;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.articles-grid::-webkit-scrollbar {
    display: none;
}

.article-card {
    background: #ffffff;
    overflow: hidden;
    text-decoration: none !important;
    transition: box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 5px 5px 5px 0;
}

.article-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: #D1D5DB;
}

.article-card__img-wrap {
    width: 180px;
    min-width: 180px;
    height: 100px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
}

.article-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-card__body {
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.article-card__category {
    font-family: 'Manrope', sans-serif;
    color: #0D9488;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0%;
}

.article-card__meta-sep {
    color: #D1D5DB;
    font-size: 11px;
}

.article-card__title {
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: bold;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -2%;

}

.article-card__excerpt {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #6B7280;
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card__date {
    font-family: 'Manrope', sans-serif;
    color: #374151;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0%;
}

@media (max-width: 768px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }

    .article-card__img-wrap {
        width: 120px;
        min-width: 120px;
    }
}

/* ---- Trust Section ---- */
.section-trust {
    background: #ffffff;
    padding: 48px 24px;
    position: relative;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

.section-trust__inner {
    max-width: 1232px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Mobile-only divider between the About Us button and the review card. */
.section-trust__m-rule {
    display: none;
}

/* Mobile-only "All X" CTA that drops to the bottom of each home section
   (desktop keeps the top-right link instead). */
.section-mcta {
    display: none;
}

.section-trust__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0d9488;
    margin-bottom: 14px;
}


.section-trust__title {
    font-weight: 700;
    font-size: 36px;
    line-height: 1.15;
    color: #172B4D;
    margin: 0 0 16px;
}

.section-trust__desc {
    font-weight: 450;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: normal;

}

.section-trust__btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    text-decoration: none !important;
    background: #ffffff;
    transition: border-color 0.2s, color 0.2s;
}

.section-trust__btn:hover {
    border-color: #0d9488;
    color: #0d9488;
}

.section-trust__testimonial {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-trust__stars {
    display: flex;
    gap: 2px;
    width: 90px;
    height: 18px;
    align-items: center;
}

.section-trust__quote {
    color: #1F2937;
    margin: 0;
    font-weight: 500;
    font-style: medium;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
}

.section-trust__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.section-trust__author-logo {
    height: 24px;
    width: auto;
    opacity: 0.8;
}

.section-trust__author-name {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.section-trust__author-role {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: #6B7280;
    margin: 0;
}

/* Review methodology card */
.review-method {
    background: #F9FAFB;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-method__title {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #111827;
    margin: 0;
}

.review-method__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-method__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
    border-bottom: 1px solid #E5E7EB;
}

.review-method__item:last-child {
    border-bottom: none;
}

.review-method__item-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-method__pct {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #0F766E;
    width: 44px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.review-method__name {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #111827;
}

.review-method__detail {
    font-size: 16px;
    font-weight: 450;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #1F2937;
    margin: 0;
    padding-left: 56px;
}

/* ---- Casino Brands ---- */
.section-casinos, .section-spotlight {
    background: #F9FAFB;
    padding: 48px 24px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

.section-casinos__inner {
    max-width: 1232px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Casino section header — same pattern as spotlight */
.section-casinos__hdr {
    margin-bottom: 40px;
}

.section-casinos__badge, .section-articles__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0d9488;
    margin-bottom: 12px;
}


.section-casinos__hdr-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.section-casinos__hdr-left {
    flex: 1;
}

.section-casinos__title {
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
    line-height: 42px;
    letter-spacing: -0.02em;
}

.section-casinos__desc {
    font-weight: 450;
    font-style: regular;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1%;
    color: var(--Neutral-800, #1F2937);
    margin: 0;
    max-width: 52%;
}

/* Casino cards grid — scroll carousel */
.casino-cards-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.casino-cards-grid::-webkit-scrollbar {
    display: none;
}

.casino-card-new {
    scroll-snap-align: start;
    flex: 0 0 calc(33.333% - 11px);
    min-width: 280px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid #0D9488;
    border-radius: 8px;
    padding: 20px;
    min-height: 387px;
    transition: box-shadow 0.2s;
    overflow: hidden;
}

.casino-card-new:hover {
    box-shadow: 0 6px 28px rgba(13, 148, 136, 0.15);
}

/* Top header (logo + name + stars + rating): grey background + bottom divider,
   full-bleed to the card edges (offsets the card's 20px padding). */
.casino-card-new__header {
    margin: -20px -20px 14px;
    padding: 16px 10px;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 6px 6px 0 0;
}

.casino-card-new__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
}

.casino-card-new__rank {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.casino-card-new__rank::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 0;
    border-color: #0D9488 transparent transparent transparent;
}

.casino-card-new__rank-num {
    position: absolute;
    left: 5px;
    top: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
    line-height: 1;
    z-index: 1;
}

.casino-card-new__logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    border: 0.25px solid #D1D5DB;
    opacity: 1;
    flex-shrink: 0;
    /* Keep clear of the green rank triangle in the top-left corner. */
    margin: 6px 0 0 14px;
}

.casino-card-new__id {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.casino-card-new__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #172B4D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.casino-card-new__est {
    font-weight: 500;
    font-size: 15px;
    color: #374151;
    display: block;
}

.casino-card-new__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.casino-card-new__rating .hp-stars {
    margin-bottom: 0;
}

.casino-card-new__score {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #172B4D;
}

.casino-card-new__affil {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.casino-card-new__affil-lbl {
    font-weight: 500;
    font-style: medium;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0px;
    vertical-align: bottom;
    color: #374151;
}

.casino-card-new__affil-val {
    color: #1F2937;
    font-weight: 600;
    font-style: semiBold;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    vertical-align: bottom;
}

.casino-card-new__sep {
    height: 1px;
    background: #e5e7eb;
    margin-bottom: 12px;
}

.casino-card-new__bonus {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.casino-card-new__bonus-sep {
    height: 1px;
    background: #E5E7EB;
    margin: 10px 0;
}

.casino-card-new__bonus-lbl {
    font-weight: 500;
    font-style: medium;
    font-size: 14px;
    line-height: 7px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #374151;
}

.casino-card-new__bonus-hl {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #111827;
    margin: 0 0 4px;
    line-height: 1.3;
}

/* Numbers / % / currency in the bonus headline go green (matches prog-card). */
.casino-card-new__bonus-hl b {
    color: #0F766E;
    font-weight: 800;
}

.casino-card-new__bonus-tc {
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    color: #374151;
}

.casino-card-new__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    color: #1F2937;
}

.casino-card-new__meta-lbl {
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0px;
    vertical-align: bottom;
    color: #1F2937;
}

/* Grey vertical divider between the two meta items (Wagering | Min. Deposit). */
.casino-card-new__meta-sep {
    width: 1px;
    height: 14px;
    background: #E5E7EB;
    flex-shrink: 0;
}

/* Value after the colon: same colour as the label, slightly heavier. */
.casino-card-new__meta-val {
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: #1F2937;
}

.casino-card-new__actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.casino-card-new__btn-review {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #F3F4F6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #111827;
    text-decoration: none !important;
    transition: border-color 0.15s;
    cursor: pointer;
}

.casino-card-new__btn-review:hover {
    border-color: #9ca3af;
    color: #111827 !important;
}

.casino-card-new__btn-register {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    background: #4f46e5;
    border: none;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: background 0.15s;
    cursor: pointer;
}

.casino-card-new__btn-register:hover {
    background: #4338ca;
}

.casino-card-new__btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: brightness(0) invert(1); /* render the PNG white on the purple button */
}

/* ---- Events ---- */
.section-events {
    background: #ffffff;
    padding: 0 24px;
}

.section-events__inner {
    max-width: 1232px;
    margin: 0 auto;
    padding: 60px 0;
    border-top: 1px solid #E5E7EB;
}

.events-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.events-grid::-webkit-scrollbar {
    display: none;
}

.event-card-hp {
    scroll-snap-align: start;
    flex: 0 0 calc(33.333% - 10px);
    min-width: 280px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 16px;
    /* logo spans both rows on desktop (date sits under the info, beside the logo);
       mobile re-maps the areas so the date is a full-width bottom row. */
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas: "logo info" "logo meta";
    align-items: center;
    gap: 4px 14px;
    text-decoration: none !important;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.event-card-hp__logo {
    grid-area: logo;
}

.event-card-hp__info {
    grid-area: info;
}

.event-card-hp__meta {
    grid-area: meta;
}

.event-card-hp:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    border-color: #D1D5DB;
}

.event-card-hp__logo {
    box-sizing: border-box;
    width: 120px;
    height: 120px;
    /* 120px grey box; the logo itself renders at 80x80, centred. */
    padding: 20px;
    object-fit: contain;
    border-radius: 8px;
    background: #F3F4F6;
    flex-shrink: 0;
}

.event-card-hp__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-card-hp__type {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    color: #0D9488;
}

.event-card-hp__location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #374151;
    margin: 0;
    min-width: 0;
}

.event-card-hp__location span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card-hp__loc-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    object-fit: contain;
}

.event-card-hp__meta-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #D1D5DB;
    flex-shrink: 0;
}

.event-card-hp__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    color: #111827;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-card-hp__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 450;
    line-height: 20px;
    color: #374151;
    margin: 0;
    white-space: nowrap;
}

/* ---- Homepage responsive ---- */


.section-spotlight {
    background: #F9FAFB;
    padding: 48px 24px;
    position: relative;
    overflow: hidden;
}

.section-spotlight__inner {
    max-width: 1232px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.section-spotlight__header {
    margin-bottom: 40px;
}

.section-spotlight__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0d9488;
    margin-bottom: 12px;
}


.section-spotlight__header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.section-spotlight__header-left {
    flex: 1;
}

.section-spotlight__title {
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0 0 10px;
}

.section-spotlight__desc {
    color: #1F2937;
    margin: 0;
    max-width: 500px;
    font-weight: 450;
    font-style: Regular;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1%;
}

.section-spotlight__link, .section-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: -0.02em;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
    flex-shrink: 0;
    margin-top: 8px;
}

.section-spotlight__link:hover {
    color: #4f46e5;
}

.section-programs__header-links .section-spotlight__link {
    margin-top: 0;
}

.spotlight-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.spotlight-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.spotlight-card:hover {
    border-color: #0d9488;
    box-shadow: 0 4px 20px rgba(13, 148, 136, 0.1);
    transform: translateY(-2px);
}

.spotlight-card__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.spotlight-card__author-img,
.spotlight-card__author-avatar {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.spotlight-card__author-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    color: #6B7280;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 24px;
}

.spotlight-card__author-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.spotlight-card__author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #111827;
}

.spotlight-card__author-title {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #6B7280;
}

/* Affiliate-program badge (placeholder logo for now). */
.spotlight-card__author-prog {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #ffffff;
    width: fit-content;
}

.spotlight-card__author-prog img {
    height: 16px;
    width: auto;
    object-fit: contain;
    display: block;
}

.spotlight-card__body {
    flex: 1;
}

.spotlight-card__tag {
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0d9488;
    margin-bottom: 12px;
}

.spotlight-card__title {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
    line-height: 1.4;
}

.spotlight-card__excerpt {
    color: #1F2937;
    margin: 0 0 16px;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
}

.spotlight-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
}

.spotlight-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spotlight-card__meta-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #D1D5DB;
    flex-shrink: 0;
}

.spotlight-card__date,
.spotlight-card__readtime {
    color: #161B39;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0;
}

.spotlight-card__read {
    font-size: 14px;
    font-weight: 700;
    color: #4f46e5;
    font-style: bold;
}

/* =============================================
   §06 GUIDES & RESOURCES
   ============================================= */
.section-guides {
    background: #ffffff;
    padding: 64px 24px;
}

.section-guides__inner {
    max-width: 1232px;
    margin: 0 auto;
}

.section-guides__header {
    margin-bottom: 40px;
}

.section-guides__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0d9488;
    margin-bottom: 12px;
}


.section-guides__header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.section-guides__header-left {
    flex: 1;
}

.section-guides__title {
    color: #111827;
    margin: 0 0 8px;
    font-weight: 700;
    font-style: Bold;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -2%;
}

.section-guides__desc {
    color: #1F2937;
    margin: 0;
    max-width: 616px;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.section-guides__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 16px;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s;
    margin-top: 8px;
}

.section-guides__link:hover {
    color: #0d9488;
}

.guides-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.guide-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 20px 20px 16px 20px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 231px;
}

.guide-card:hover {
    border-color: #0d9488;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.1);
}

.guide-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guide-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #0F766E;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0%;
}

.guide-card__title {
    color: #111827;
    margin: 0;
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -2%;
}

.guide-card__excerpt {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: #1F2937;
    line-height: 1.55;
    margin: 0;
}

.guide-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
}

.guide-card__date {
    font-size: 12px;
    color: #374151;
    font-weight: 500;
    font-style: Medium;
    line-height: 12px;
    letter-spacing: 0%;
}

.guide-card__read {
    color: #4F46E5;
    font-weight: 700;
    font-style: Bold;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 16px;
    letter-spacing: 0%;
    text-align: right;
}

@media (max-width: 1100px) {
    .spotlight-cards {
        grid-template-columns: 1fr 1fr;
    }

    .guides-cards {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================
   AFFILIATE SINGLE PAGE v2 (asp2-)
   ============================================ */
.asp2-hero {
    background: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    position: relative;
    overflow: hidden;
}

.asp2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* `100% auto`, NOT `cover`: cover rescales with the hero's HEIGHT, so expanding the
       description via "Read more" zoomed the hex pattern. `100% auto` is width-driven —
       it fills the full width (no side gutters) and is independent of the hero's height,
       so the pattern stays put as the hero grows. Anchored top; the dark gradient fills
       any taller area below. (Mobile drops to native `auto` — see media query below.) */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50.23%),
    url('../img/icons/background_casino_review.png') center top / 100% auto no-repeat;
    z-index: 0;
}
/* On phones 100% auto would shrink the hex cells to ~11px; use native size instead
   (the image is wider than the viewport, so it still fills the width edge-to-edge). */
@media (max-width: 991px) {
    .asp2-hero::before { background-size: auto; }
}

.asp2-hero__inner {
    position: relative;
    z-index: 1;
    /* 1232 content + 16px gutter (1264) → aligns with header + .asp2-container cards. */
    max-width: 1264px;
    margin: 0 auto;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.asp2-hero__row {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
}

.asp2-hero__left {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.asp2-logo-wrap {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    background: #161B39;
    border: 1.5px solid #9CA3AF;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.asp2-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.asp2-hero__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asp2-hero__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.02em;
    color: #F9FAFB;
    margin: 0 0 8px;
    line-height: 1.11;
}

.asp2-hero__desc {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #E5E7EB;
    margin: 0;
    line-height: 1.5;
    /* Teaser clamp (Figma): 3 lines; "Read more" toggles .is-expanded to reveal the rest. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.asp2-hero__desc.is-expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
    overflow: visible;
}

/* "Read more" toggle under the hero description — shown on mobile only (Figma). */
.asp2-hero__readmore {
    display: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #E5E7EB;
    text-align: left;
    text-decoration: none;
}

.asp2-hero__btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
    width: 240px;
    flex-shrink: 0;
    align-items: stretch;
}

.asp2-hero__sep {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0;
}

.asp2-btn-signup {
    background: #4F46E5;
    color: #fff !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    border-radius: 8px;
    padding: 14px 48px;
    height: 48px;
    border: none;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
}

.asp2-btn-signup:hover {
    background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
    color: #fff !important;
    text-decoration: none !important;
}

.asp2-btn-review {
    color: #fff !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 12px 24px;
    text-decoration: none !important;
    display: block;
    background: transparent;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}

.asp2-btn-review:hover {
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff !important;
    text-decoration: none !important;
}

.asp2-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.asp2-stat-card {
    flex: 1;
    min-width: 140px;
    background: #1F2937;
    border: 1px solid #4B5563;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asp2-stat-label {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #E5E7EB;
}

/* Affiliate Score label row: label left, info (i) icon right (Figma: white 50%) */
.asp2-stat-label--info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.asp2-stat-info {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
}

.asp2-stat-value {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #F9FAFB;
}

.asp2-stat-value--teal {
    color: #2DD4BF;
}

.asp2-stat-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.asp2-star {
    font-size: 17px;
    line-height: 1;
    font-family: Arial, 'Helvetica Neue', sans-serif;
    display: inline-block;
}

.asp2-star--full {
    color: #2DD4BF;
}

.asp2-star--half {
    color: #2DD4BF;
}

.asp2-star--empty {
    color: rgba(45, 212, 191, 0.25);
}

.asp2-stat-rating__score {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #D1FAE5;
    white-space: nowrap;
    margin-left: 4px;
}

/* Section Post Meta bar */
.asp2-post-meta {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: 12px 0;
}

.asp2-post-meta__inner {
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.asp2-post-meta__author {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.asp2-post-meta__avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #D1D5DB;
    background: #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: #6B7280;
    font-size: 20px;
}

.asp2-post-meta__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asp2-post-meta__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

.asp2-post-meta__date {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #374151;
    line-height: 20px;
}

.asp2-post-meta__links {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.asp2-post-meta__link {
    border-radius: 8px;
    border: none;
    padding: 12px 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #161B39 !important;
    text-decoration: none !important;
    background: #F3F4F6;
    line-height: 1;
    white-space: nowrap;
}

.asp2-post-meta__link:hover {
    background: #E5E7EB;
    text-decoration: none !important;
}

.asp2-info-panel {
    background: #F9FAFB;
    border-bottom: 1px solid #D1D5DB;
}

.asp2-info-panel__inner {
    max-width: 1232px;
    margin: 0 auto;
    display: flex;
    padding: 32px 16px;
    gap: 0;
}

/* Figma: 3 equal columns separated by a 1px #E5E7EB vertical divider, centred with 20px each side */
.asp2-info-col {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 20px;
    border-right: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.asp2-info-col:first-child {
    padding-left: 0;
}

.asp2-info-col:last-child {
    border-right: none;
    padding-right: 0;
}

.asp2-info-col__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E5E7EB;
    text-transform: none;
}

.asp2-info-row {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
}

/* Figma: a 1px #E5E7EB horizontal divider only between row GROUPS, not every row */
.asp2-info-row--group {
    border-top: 1px solid #E5E7EB;
    margin-top: 8px;
    padding-top: 16px;
}

.asp2-info-label {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.asp2-info-tip {
    display: inline-block;
    flex-shrink: 0;
}

.asp2-info-value {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1F2937;
    text-align: right;
    word-break: break-word;
}

.asp2-info-value--green {
    color: #0F766E;
}

/* Stacked rows (Languages / Games / Exclusive) — value left-aligned, full width */
.asp2-info-row--stack .asp2-info-value,
.asp2-info-value--left {
    text-align: left;
    width: 100%;
}

/* Info panel — stacked row with chips (Figma: Payment Methods) */
.asp2-info-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.asp2-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.asp2-info-chip {
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    padding: 6px 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #111827;
}

.asp2-brands-content {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #1F2937;
    line-height: 1.6;
}

.asp2-brands-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.asp2-brands-content ul li {
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.asp2-brands-content ul li::after {
    content: '›';
    color: #9CA3AF;
    font-size: 16px;
}

.asp2-brands-content ul li:last-child {
    border-bottom: none;
}

.asp2-brands-content a {
    color: #111827 !important;
    text-decoration: none !important;
}

.asp2-brands-content a:hover {
    color: #0D9488 !important;
}

/* Brand items with logo — Figma: light bg #F9FAFB, separator border */
.asp2-brands-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.asp2-brand-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 48px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #D1D5DB !important;
}

.asp2-brand-item:last-child,
.asp2-brands-show-all + .asp2-brand-item {
    border-bottom: none !important;
}

.asp2-brand-item--extra {
    display: none !important;
}

.asp2-brands-list--expanded .asp2-brand-item--extra {
    display: flex !important;
}

.asp2-brand-item__logo {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #111827 !important;
    border: 0.125px solid #D1D5DB !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.asp2-brand-item__logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.asp2-brand-item__name {
    flex: 1 !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    color: #111827 !important;
}

.asp2-brand-item:hover .asp2-brand-item__name {
    color: #0D9488 !important;
}

.asp2-brand-item__chevron {
    color: #4F46E5 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.asp2-brands-show-all {
    width: 100%;
    margin-top: 20px;
    padding: 8px 0;
    background: transparent;
    border: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #4F46E5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.asp2-brands-show-all:hover {
    color: #4338CA;
}

.asp2-body {
    background: #fff;
    padding: 32px 16px;
}

.asp2-container {
    max-width: 1232px;
    margin: 0 auto;
}

.asp2-breadcrumbs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    gap: 0;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #6B7280;
}

.asp2-breadcrumbs li {
    display: flex;
    align-items: center;
}

.asp2-breadcrumbs li + li::before {
    content: '/';
    margin: 0 8px;
    color: #D1D5DB;
}

.asp2-breadcrumbs a {
    color: #6B7280;
    text-decoration: none;
}

.asp2-breadcrumbs a:hover {
    color: #0D9488;
}

.asp2-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.asp2-main {
    flex: 1;
    min-width: 0;
    /* override global `main { padding-top: var(--gf-header-height) }` —
       this is a nested content <main>, not the page's top-level main */
    padding-top: 0;
}

.asp2-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.asp2-section-card {
    background: #F9F9F9;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.asp2-section-card__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #111827;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.asp2-section-card__body {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: #374151;
    line-height: 1.7;
}

.asp2-section-card__body ul {
    margin: 0;
    padding-left: 20px;
}

.asp2-section-card__body h2,
.asp2-section-card__body h3 {
    font-size: 17px;
    color: #111827;
    margin-top: 16px;
}

.asp2-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.asp2-tag-list li {
    background: #EEF2FF;
    color: #4F46E5;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
}

.asp2-tag-list a {
    color: #4F46E5;
    text-decoration: none;
}

.asp2-tag-list a:hover {
    text-decoration: underline;
}

/* ============================================
   CLOSED PROGRAM HERO — badge + "Try these instead"
   (Figma: Affiliate Single - Desktop, Hero Top closed state)
   ============================================ */
.asp2-hero--closed {
    /* Short hero — cards live in .asp2-alts-section. No full-width borders; the
       hero->alts divider is a CONTAINED 1px line on the row, matching the casino. */
    overflow: hidden;
}

/* Mirror the casino review hero spacing exactly: 24px from nav to breadcrumb
   (.cr-hero padding-top 24px) and a 1px divider contained to the content width
   on the row bottom (.cr-hero__row border-bottom 1px #374151), 32px above the
   hero edge — instead of the old full-width 2px hero border. */
.asp2-hero--closed .asp2-hero__inner {
    padding-top: 24px;
    padding-bottom: 32px;
}

.asp2-hero--closed .asp2-hero__row {
    border-bottom: 1px solid #374151;
    padding-bottom: 32px;
}

/* The closed/not-recommended hero is now SHORT — the "Try these instead" cards moved
   out to their own .asp2-alts-section — so it just reuses the base .asp2-hero::before
   `cover` hex. On a short hero `cover` resolves width-driven (~1.09x), identical to the
   casino review .cr-hero at every width. No override needed. */

.asp2-hero__closed-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 4px;
    padding: 8px 14px;
    background: rgba(17, 24, 39, 0.55);
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #F9FAFB;
}

.asp2-hero__closed-badge svg {
    flex-shrink: 0;
    color: #9CA3AF;
}

/* The closed badge lives under the H1 on desktop, but moves to its own
   full-width row above the logo on mobile (Figma mobile). Two instances in the
   markup; only one shows per breakpoint. */
.asp2-hero__closed-badge--mobile {
    display: none;
}

@media (max-width: 992px) {
    .asp2-hero__closed-badge--desktop {
        display: none;
    }

    /* Figma mobile: solid #1F2937 pill, #D1D5DB border, radius 4, 6/8 padding,
       gap 4, 14/500 text, full-width centered row above the logo. */
    .asp2-hero__closed-badge--mobile {
        display: inline-flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        gap: 4px;
        padding: 6px 8px;
        background: #1F2937;
        border-radius: 4px;
        font-weight: 500;
    }

    .asp2-hero__closed-badge--mobile svg {
        width: 20px;
        height: 20px;
        color: #E5E7EB;
    }
}

/* "Not recommended" (low rating) variant — red border + red warning icon, white
   text. Mirrors the casino review .cr-closed-badge--warn. Placed after the mobile
   rules so the red icon wins over the mobile #E5E7EB icon color. */
.asp2-hero__closed-badge--warn {
    border-color: #DC2626;
}

.asp2-hero__closed-badge--warn svg {
    color: #DC2626;
}

.asp2-hero__alts {
    margin-top: 8px;
}

/* "Try these instead" shares ONE dark surface with the hero via .asp2-dark so the hex
   pattern fades continuously down through the cards (Figma's single dark frame), 1:1
   with the casino review .cr-dark. The hero + alts go transparent; the wrapper owns the
   hex/gradient (so the hero's own ::before hex is disabled to avoid doubling). The inner
   matches .asp2-hero__inner's width/gutter so the cards align with the hero content. */
.asp2-dark {
    /* See .cr-dark — masked hex ::before over the dark gradient + sheen. */
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50.23%),
                linear-gradient(180deg, #1F2937 0%, #111827 100%);
}
.asp2-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('../img/icons/background_hero_faded.png') center top / cover no-repeat;
    /* See .cr-dark — fade out by ~60% of the hero. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 60%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 60%);
}
.asp2-dark > .asp2-hero {
    position: relative;
    z-index: 1;
    background: none;
}
.asp2-dark > .asp2-hero::before {
    content: none;
}
.asp2-dark > .asp2-alts-section {
    position: relative;
    z-index: 1;
    background: none;
}
.asp2-alts-section {
    padding: 8px 0 44px;
}

.asp2-alts-section__inner {
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 16px;
}

.asp2-hero__alts-title {
    font-family: 'Manrope', sans-serif;
    font-size: 28px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0 0 16px;
}

/* The grid defines 4 shared row tracks (header / stats / info / cta). Each card
   spans all 4 and uses `subgrid`, so every section lines up across the 3 cards
   regardless of differing content (rating present or not, brand counts, etc.). */
.asp2-hero__alts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto 1fr auto; /* header / stats / info / cta */
    column-gap: 16px;
    row-gap: 0;
    align-items: stretch;
}

.asp2-alt-card {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    position: relative;
    background: #fff;
    border: 2px solid #0D9488;
    border-radius: 8px;
}

/* ---- Header (gray block: logo + name/established/rating) ---- */
.asp2-alt-card__header {
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: center; /* center the 80px row in the header */
    /* Figma padding is 16px, but Figma's 2px border is an "inside" stroke that
       does NOT push content; our real 2px border (box-sizing:border-box) does.
       14px here = Figma 16 − our 2px border, so the logo lands at 16px from the
       card's outer corner exactly like Figma and tucks ~8px under the rank
       triangle (instead of only ~4px at 16px padding). */
    padding: 14px 16px 16px 14px;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 6px 6px 0 0;
}

.asp2-alt-card__rank {
    position: absolute;
    /* Sit on the card's true outer corner (over the 2px border), like Figma's
       "Number" at (0,0) — the -2px offsets cancel the header's inset so the
       triangle fills the corner with no gap; radius 8px matches the card. */
    left: -2px;
    top: -2px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 6px 0 0 7px;
    background: #0D9488;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 16px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    border-radius: 8px 0 0 0;
}

.asp2-alt-card__hrow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.asp2-alt-card__logo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: #111827;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.asp2-alt-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.asp2-alt-card__title {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.asp2-alt-card__namewrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asp2-alt-card__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #172B4D !important;
    text-decoration: none !important;
}

.asp2-alt-card__name:hover {
    color: #0D9488 !important;
}

.asp2-alt-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.asp2-alt-card__est {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #374151;
}

.asp2-alt-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.asp2-alt-card__stars {
    display: flex;
    gap: 1px;
}

.asp2-alt-card__score {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    color: #172B4D;
}

/* ---- Stats (Revshare / CPA / Hybrid) ---- */
.asp2-alt-card__stats {
    grid-row: 2;
    padding: 16px 16px 0;
}

.asp2-alt-card__stats-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px 16px;
}

.asp2-alt-card__stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asp2-alt-card__stat-label {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #374151;
}

.asp2-alt-card__stat-val {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #1F2937;
}

.asp2-alt-card__stat-val.is-accent {
    color: #0F766E;
}

/* Numbers inside any stat value are teal (Figma Secondary-700) — e.g. the "40%"
   in Revshare "Up to 40%" stays teal while the "Up to" prefix stays dark. */
.asp2-alt-card__num {
    color: #0F766E;
}

.asp2-alt-card__stat-div {
    width: 1px;
    align-self: stretch;
    background: #E5E7EB;
    flex-shrink: 0;
}

/* ---- Info (Brands / Payments / Software) ---- */
.asp2-alt-card__info {
    grid-row: 3;
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asp2-alt-card__info-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.asp2-alt-card__brands-row {
    align-items: center;
}

.asp2-alt-card__brands-row .prog-card__brands-wrap {
    flex: 1;
    min-width: 0;
}

.asp2-alt-card__info-label {
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #374151;
}

.asp2-alt-card__info-value {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #1F2937;
}

.asp2-alt-card__info-txt {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asp2-alt-card__hdiv {
    height: 1px;
    background: #E5E7EB;
}

/* ---- CTA (Sign Up / Full Review) ---- */
.asp2-alt-card__cta {
    grid-row: 4;
    display: flex;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid #E5E7EB;
}

.asp2-alt-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s;
}

.asp2-alt-btn--signup {
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #111827 !important;
}

.asp2-alt-btn--signup:hover {
    background: #E5E7EB;
    border-color: #D1D5DB;
}

.asp2-alt-btn--review {
    background: #4F46E5;
    border: none;
    color: #fff !important;
}

.asp2-alt-btn--review:hover {
    background: #4338CA;
}

/* Mobile-only content (categories + description) — hidden on desktop. */
.asp2-alt-card__mobile {
    display: none;
}

.asp2-alt-card__cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #1F2937;
}

.asp2-alt-card__cat-dot {
    color: #CCCCCC;
}

.asp2-alt-card__desc {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 450;
    font-size: 14px;
    line-height: 20px;
    color: #1F2937;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile: cards stack full-width; drop subgrid so each flows on its own, and
   swap the desktop body (stats/brands/payments) for the Figma mobile card
   (categories + description). Rank badge moves to the top-right corner. */
@media (max-width: 992px) {
    /* Tighter hero padding on mobile (Figma: 16px, not the desktop 40px). */
    .asp2-hero--closed .asp2-hero__inner {
        padding: 16px;
    }

    /* The shared .asp2-hero__row flips to flex-direction:column but keeps the
       base align-items:center — on the closed hero (no buttons) that shrinks the
       logo+name block to content width and centers it, so it no longer lines up
       with the full-width badge / "Try these instead". Force it full-width left. */
    .asp2-hero--closed .asp2-hero__row {
        align-items: stretch;
    }

    /* Hero (Figma mobile): logo 80x80 radius 8, H1 28/32. Scoped to closed so
       the open-state mobile hero is untouched. Figma Frame 1686562888: row,
       gap 16, title vertically CENTERED against the 80px logo (not top-aligned). */
    .asp2-hero--closed .asp2-hero__left {
        align-items: center;
        gap: 16px;
    }

    .asp2-hero--closed .asp2-hero__info {
        justify-content: center;
    }

    .asp2-hero--closed .asp2-logo-wrap {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .asp2-hero--closed .asp2-hero__name {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 0;
    }

    /* "Try these instead:" is 24/28 on mobile (28/32 on desktop). */
    .asp2-hero__alts-title {
        font-size: 24px;
        line-height: 28px;
    }

    .asp2-hero__alts-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 16px;
    }

    .asp2-alt-card {
        grid-row: auto;
        grid-template-rows: none;
        display: flex;
        flex-direction: column;
    }

    .asp2-alt-card__stats,
    .asp2-alt-card__info {
        display: none;
    }

    /* Figma mobile card is ALL WHITE — no gray header band, no border-bottom.
       Sections carry their own padding (card padding stays 0 so the rank
       triangle keeps sitting on the true card corner). */
    .asp2-alt-card__header {
        background: transparent;
        border-bottom: none;
        border-radius: 0;
        padding: 16px 16px 0;
        align-items: center;
    }

    /* Figma mobile card: logo 64x64, name 20/22, no "Established"/NEW line. */
    .asp2-alt-card__logo {
        width: 64px;
        height: 64px;
    }

    .asp2-alt-card__name {
        font-size: 20px;
        line-height: 22px;
    }

    .asp2-alt-card__meta {
        display: none;
    }

    .asp2-alt-card__mobile {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px 0;
    }

    .asp2-alt-card__cta {
        border-top: none;
        padding: 16px;
    }

    .asp2-alt-card__rank {
        left: auto;
        right: -2px;
        padding: 6px 7px 0 0;
        text-align: right;
        border-radius: 0 8px 0 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }
}

.asp2-review-item {
    padding: 16px 0;
    border-bottom: 1px solid #F3F4F6;
}

.asp2-review-item:last-child {
    border-bottom: none;
}

.asp2-review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 4px;
}

.asp2-review-user {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #111827;
}

.asp2-review-date {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #9CA3AF;
}

.asp2-review-text {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
}

.asp2-stars {
    color: #FBBF24;
    font-size: 13px;
    margin-bottom: 4px;
}

/* FAQ accordion (Figma: bordered container r4 #D1D5DB; gray #F3F4F6 question rows, white answers) */
.asp2-faq-wrap {
    margin-bottom: 24px;
}

.asp2-faq {
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    overflow: hidden;
}

.asp2-faq__item + .asp2-faq__item {
    border-top: 1px solid #D1D5DB;
}

.asp2-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px;
    background: #F3F4F6;
    border: none;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #111827;
}

/* Details Btn (Figma): 24×24 white box, border 1px #D1D5DB, r4, chevron inside */
.asp2-faq__toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    color: #161B39;
}

.asp2-faq__chevron {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.asp2-faq__item.is-open .asp2-faq__chevron {
    transform: rotate(180deg);
}

.asp2-faq__a {
    display: none;
    padding: 16px;
    background: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1F2937;
}

.asp2-faq__item.is-open .asp2-faq__a {
    display: block;
}

.asp2-faq__a p {
    margin: 0 0 12px;
}

.asp2-faq__a p:last-child {
    margin-bottom: 0;
}

/* Author / "Written By" box (Figma: white box, border 1px #D1D5DB r4, pad16, avatar 72×72) */
.asp2-author {
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #fff;
    padding: 16px;
    margin-bottom: 24px;
}

.asp2-author__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.asp2-author__avatar {
    width: 72px;
    height: 72px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.asp2-author__lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Manrope', sans-serif;
}

.asp2-author__label {
    font-size: 14px;
    line-height: 20px;
    color: #1F2937;
}

.asp2-author__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.asp2-author__name {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #0D9488 !important;
    text-decoration: none !important;
}

.asp2-author__icon {
    display: inline-flex;
    align-items: center;
    color: #0D9488;
}

.asp2-author__icon svg {
    display: block;
}

.asp2-author__title {
    font-size: 14px;
    line-height: 20px;
    color: #6B7280;
}

.asp2-vote-stars {
    display: flex;
    gap: 6px;
    margin: 12px 0;
}

.asp2-vote-stars .fa {
    font-size: 26px;
    color: #FBBF24;
    cursor: pointer;
}

.asp2-sd-banner {
    display: block;
    margin-top: 24px;
}

.asp2-sd-banner img {
    width: 100%;
    border-radius: 6px;
}

.asp2-success-msg {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
    padding: 12px 16px;
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    margin-bottom: 16px;
}

/* Hero breadcrumbs */
.asp2-hero-bc {
    margin-bottom: 8px;
}

.asp2-hero-bc__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #FFFFFF;
}

.asp2-hero-bc__list li {
    display: flex;
    align-items: center;
}

.asp2-hero-bc__list li + li::before {
    content: '/';
    margin: 0 6px 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.asp2-hero-bc__list a {
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
}

.asp2-hero-bc__list a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.asp2-hero-bc__list li:last-child {
    color: #FFFFFF;
}

/* Info panel — contact link */
.asp2-info-contact-link {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #4F46E5 !important;
    text-decoration: none !important;
    text-align: right;
    word-break: break-all;
}

.asp2-info-contact-link:hover {
    text-decoration: underline !important;
}

/* Info panel — show all toggle (Figma: indigo text + chevron icon) */
.asp2-info-show-all {
    background: none;
    border: none;
    padding: 0;
    margin-top: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: 600;
    color: #4F46E5;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.asp2-info-show-all:hover {
    color: #4338CA;
}

.asp2-sa-chevron {
    transition: transform .2s ease;
}

.asp2-info-show-all.is-open .asp2-sa-chevron,
.asp2-brands-show-all.is-open .asp2-sa-chevron {
    transform: rotate(180deg);
}

.asp2-info-lang-overflow {
    display: none;
}

/* Info panel — exclusive offer (Figma: tag icon + full-width claim button image) */
.asp2-info-exclusive-offer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
}

.asp2-info-exclusive-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.asp2-info-claim-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 48px;
    box-sizing: border-box;
    background: #F3F4F6;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 14px;
    color: #4F46E5 !important;
    text-decoration: none !important;
}

.asp2-info-claim-btn:hover {
    background: #E5E7EB;
}

.asp2-info-claim-btn img {
    flex-shrink: 0;
}

/* Table of Contents sidebar */
.asp2-toc {
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 24px;
}

.asp2-toc__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.02em;
    color: #172B4D;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #E5E7EB;
}

.asp2-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.asp2-toc__item {
    display: flex;
    align-items: flex-start;
}

.asp2-toc__link {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #172B4D !important;
    text-decoration: none !important;
    line-height: 20px;
}

.asp2-toc__link:hover,
.asp2-toc__link.active {
    color: #0F766E !important;
    font-weight: 700;
}

/* ============================================================ */
/* Affiliate Archive (listing) — Figma "Affiliate Archive"      */
/* ============================================================ */
.asp2-hero--archive .asp2-hero__inner {
    padding: 48px 16px;
    gap: 8px;
    align-items: flex-start;
}

.asp2-archive {
    background: #F9FAFB;
    padding: 40px 16px;
}

/* SEO/article content below the cards — white background (Figma). */
.asp2-archive-content {
    background: #fff;
    padding: 40px 16px;
}

.asp2-archive__head {
    margin-bottom: 24px;
}

.asp2-archive__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0 0 16px;
}

.asp2-archive__intro,
.asp2-archive__intro p {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #1F2937;
    margin: 0;
}

.asp2-archive__intro h1,
.asp2-archive__intro h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0 0 16px;
}

.asp2-archive__intro p {
    margin: 0 0 12px;
}

.asp2-archive__intro p:last-child {
    margin-bottom: 0;
}

/* Mobile: collapse the intro and reveal it with a "Read more" toggle (Figma mobile).
   Distinct class from the load-more button (.asp2-archive__more) to avoid its styling. */
.asp2-archive__readmore {
    display: none;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #4F46E5;
}

@media (max-width: 640px) {
    /* Clamp the first intro paragraph to 3 lines (clean cut, no gap) and hide the
       rest while collapsed; the heading + toggle button stay visible. */
    .asp2-archive__intro.is-clamped p:first-of-type {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0;
    }

    .asp2-archive__intro.is-clamped p:first-of-type ~ * {
        display: none;
    }
}

/* Filter bar */
.asp2-archive-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.asp2-archive-filters__selects {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Custom multi-select dropdown — Figma "Dropdown filter" */
.asp2-filter {
    position: relative;
}

.asp2-filter__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 240px;
    height: 44px;
    padding: 12px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #1F2937;
    cursor: pointer;
    box-sizing: border-box;
}

.asp2-filter--wide .asp2-filter__btn {
    min-width: 280px;
}

.asp2-filter__btn:hover {
    border-color: #9CA3AF;
}

.asp2-filter__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asp2-filter__chevron {
    flex-shrink: 0;
    transition: transform .15s ease;
}

.asp2-filter.is-open .asp2-filter__chevron {
    transform: rotate(180deg);
}

.asp2-filter__panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
    z-index: 30;
}

.asp2-filter.is-open .asp2-filter__panel {
    display: block;
}

.asp2-filter__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: #1F2937;
}

.asp2-filter__opt:hover {
    background: #F3F4F6;
}

.asp2-filter__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.asp2-filter__box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: background .12s ease, border-color .12s ease;
}

.asp2-filter__input:checked ~ .asp2-filter__box {
    background: #4F46E5;
    border-color: #4F46E5;
}

.asp2-filter__input:checked ~ .asp2-filter__box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.asp2-filter__input:focus-visible ~ .asp2-filter__box {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.asp2-filter__empty {
    display: block;
    padding: 10px 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #9CA3AF;
}

.asp2-select {
    position: relative;
}

.asp2-select__field {
    appearance: none;
    -webkit-appearance: none;
    min-width: 240px;
    height: 44px;
    padding: 12px 44px 12px 12px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #1F2937;
    cursor: pointer;
}

.asp2-select--wide .asp2-select__field {
    min-width: 280px;
}

.asp2-select__chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.asp2-archive-search {
    position: relative;
    flex: 1;
    min-width: 280px;
    max-width: 480px;
}

.asp2-archive-search__input {
    width: 100%;
    height: 44px;
    padding: 12px 48px 12px 16px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #1F2937;
}

.asp2-archive-search__btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: inline-flex;
}

.asp2-archive__divider {
    height: 1px;
    background: #E5E7EB;
    margin: 0 0 16px;
}

.asp2-archive__count {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #1F2937;
    margin: 0 0 16px;
}

.asp2-archive__count strong {
    font-weight: 700;
}

.asp2-archive__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.asp2-archive__more {
    display: flex;
    justify-content: center;
    padding: 24px 0 0;
}

.asp2-archive__more-btn {
    height: 44px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #161B39;
    cursor: pointer;
}

.asp2-archive__more-btn:hover {
    background: #F3F4F6;
}

.asp2-archive__content {
    margin-top: 32px;
}

/* Card — Figma "Card - Affiliate Programme" */
.asp2-aff-card {
    display: flex;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    /* no overflow:hidden — the brands popover must be able to escape the card */
}

.asp2-aff-card--featured {
    border: 2px solid #0D9488;
}

.asp2-aff-card__rail {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px 12px;
    background: #F9FAFB;
    border-right: 1px solid #E5E7EB;
    border-radius: 8px 0 0 8px;
}

.asp2-aff-card__rank {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 3px 0 0 5px;
    background: #0D9488;
    color: #fff;
    text-align: left;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 15px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.asp2-aff-card:not(.asp2-aff-card--featured) .asp2-aff-card__rank {
    background: #E5E7EB;
    color: #111827;
}

.asp2-aff-card__logo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: #111827;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.asp2-aff-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.asp2-aff-card__rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.asp2-aff-card__stars {
    display: flex;
    gap: 1px;
}

.asp2-aff-star {
    color: rgba(13, 148, 136, 0.25);
    font-size: 18px;
    line-height: 1;
}

.asp2-aff-star.is-on {
    color: #0D9488;
}

.asp2-aff-card__score {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    color: #172B4D;
}

.asp2-aff-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px;
}

.asp2-aff-card__bonus {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.asp2-aff-card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.asp2-aff-card__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #172B4D !important;
    text-decoration: none !important;
}

.asp2-aff-card__name:hover {
    color: #0F766E !important;
}

.asp2-aff-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asp2-aff-card__est {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #374151;
}

.asp2-aff-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    background: #0D9488;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 10px;
    line-height: 12px;
    color: #fff;
}

.asp2-aff-card__stats {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.asp2-aff-card__stats-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.asp2-aff-card__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.asp2-aff-card__stat-label {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.02em;
    color: #374151;
}

.asp2-aff-card__stat-val {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #1F2937;
}

.asp2-aff-card__stat-val.is-accent {
    color: #0F766E;
}

.asp2-aff-card__stat-div {
    width: 1px;
    align-self: stretch;
    background: #E5E7EB;
    flex-shrink: 0;
}

.asp2-aff-card__offer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.01em;
    color: #1F2937;
}

.asp2-aff-card__vdiv {
    width: 1px;
    align-self: stretch;
    background: #E5E7EB;
    flex-shrink: 0;
}

.asp2-aff-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asp2-aff-card__info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.asp2-aff-card__info-label {
    flex-shrink: 0;
    width: 70px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #374151;
}

.asp2-aff-card__info-value {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #1F2937;
    word-break: break-word;
}

.asp2-aff-card__hdiv {
    height: 1px;
    background: #E5E7EB;
}

.asp2-aff-card__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.asp2-aff-brand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 4px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
}

.asp2-aff-brand__logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: #111827;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.asp2-aff-brand__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.asp2-aff-brand__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #1F2937;
}

.asp2-aff-brand--more {
    font-weight: 700;
    color: #4F46E5;
}

/* Brands cell uses the homepage popover dropdown (.prog-card__brands-*). */
.asp2-aff-card__brands-row {
    align-items: center;
}

.asp2-aff-card__brands-row .prog-card__brands-wrap {
    flex: 1;
    min-width: 0;
}

/* Payments: truncated single line, same as the homepage cards. */
.asp2-aff-card__info-txt {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asp2-aff-card__cta {
    flex-shrink: 0;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asp2-aff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.asp2-aff-btn--signup {
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #111827 !important;
}

.asp2-aff-btn--signup:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.asp2-aff-btn--review {
    background: #4F46E5;
    border: none;
    color: #fff !important;
}

.asp2-aff-btn--review:hover {
    opacity: 0.9;
}

/* Prose for SEO content block below the cards */
.asp2-prose {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #1F2937;
}

.asp2-prose h2 {
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    color: #111827;
    margin: 24px 0 16px;
}

.asp2-prose h3 {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #111827;
    margin: 20px 0 12px;
}

.asp2-prose h4 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #111827;
    margin: 16px 0 8px;
}

.asp2-prose p {
    margin: 0 0 16px;
}

.asp2-prose a {
    color: #4F46E5;
}

.asp2-prose ul, .asp2-prose ol {
    margin: 0 0 16px;
    padding-left: 20px;
}

.asp2-prose li {
    margin-bottom: 8px;
}

/* Affiliate Archive — responsive */
@media (max-width: 992px) {
    .asp2-aff-card__body {
        flex-wrap: wrap;
        gap: 16px;
    }

    .asp2-aff-card__bonus {
        width: 100%;
    }

    .asp2-aff-card__info {
        flex-basis: 100%;
    }

    .asp2-aff-card__cta {
        width: 100%;
        flex-direction: row;
    }

    .asp2-aff-card__cta .asp2-aff-btn {
        flex: 1;
    }

    .asp2-aff-card__body > .asp2-aff-card__vdiv {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Filters: full-width stacked (Figma mobile) */
    .asp2-archive-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .asp2-archive-filters__selects {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

    .asp2-filter, .asp2-filter__btn {
        width: 100%;
        min-width: 0;
    }

    .asp2-filter--wide .asp2-filter__btn {
        min-width: 0;
    }

    .asp2-archive-search {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    /* Hero: tighten to the Figma mobile spec — compact dark band (padding 16/16/24,
       gap 16 breadcrumb→H1) instead of the 48px desktop padding. */
    .asp2-hero--archive .asp2-hero__inner {
        padding: 16px 16px 24px;
        gap: 16px;
    }

    /* H1: cap to the Figma text width (343px) so long titles wrap to 2 lines on phones. */
    .asp2-hero__name {
        max-width: 343px;
        margin-bottom: 0;
    }

    /* Card: vertical stack — logo + name on one row, then rating, stats, info, buttons.
       display:contents flattens the rail/body/bonus wrappers so all parts become grid items. */
    /* Card — Figma "Card - Affiliate Programme" (mobile): grey header band
       (logo 80 + name/est/NEW + rating) over a white body (stats, info, CTA).
       display:contents flattens rail/body/bonus so the parts become grid items. */
    .asp2-aff-card {
        position: relative;
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-areas: "logo   head" "logo   rating" "stats  stats" "info   info" "cta    cta";
        align-items: start;
        column-gap: 12px;
        row-gap: 16px;
        padding: 16px;
    }

    /* Grey header band behind logo/name/rating, bled over the 16px padding to the card edges. */
    .asp2-aff-card::before {
        content: "";
        grid-row: 1 / 3;
        grid-column: 1 / -1;
        margin: -16px -16px 0;
        background: #F9FAFB;
        border-bottom: 1px solid #E5E7EB;
        border-radius: 8px 8px 0 0;
        z-index: 0;
    }

    .asp2-aff-card__rail,
    .asp2-aff-card__body,
    .asp2-aff-card__bonus {
        display: contents;
    }

    /* Header content sits above the band */
    .asp2-aff-card__logo,
    .asp2-aff-card__head,
    .asp2-aff-card__rating {
        position: relative;
        z-index: 1;
    }

    .asp2-aff-card__rail {
        border: none;
        border-radius: 0;
    }

    .asp2-aff-card__logo {
        grid-area: logo;
        width: 80px;
        height: 80px;
        align-self: center;
    }

    .asp2-aff-card__head {
        grid-area: head;
        align-self: end;
    }

    .asp2-aff-card__rating {
        grid-area: rating;
        align-self: start;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
    }

    .asp2-aff-card__stats {
        grid-area: stats;
    }

    .asp2-aff-card__info {
        grid-area: info;
    }

    .asp2-aff-card__cta {
        grid-area: cta;
        width: 100%;
        flex-direction: row;
    }

    .asp2-aff-card__cta .asp2-aff-btn {
        flex: 1;
    }

    /* Dividers between the (now stacked) sections are not needed */
    .asp2-aff-card__body > .asp2-aff-card__vdiv,
    .asp2-aff-card .asp2-aff-card__vdiv {
        display: none;
    }

    .asp2-aff-card__stats-row {
        flex-wrap: wrap;
    }

    /* Keep the brands popover within the viewport */
    .prog-card__brands-dropdown {
        max-width: calc(100vw - 40px);
    }
}

@media (max-width: 1024px) {
    .asp2-layout {
        flex-direction: column;
    }

    .asp2-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .asp2-toc {
        position: static;
    }
}

@media (max-width: 768px) {
    .asp2-hero__row {
        flex-direction: column;
    }

    .asp2-hero__btns {
        width: 100%;
    }

    /* Single program review hero (Figma mobile): stat boxes come BEFORE the CTA
       buttons. Flatten the row so .asp2-hero__left + .asp2-hero__btns become direct
       flex items of .asp2-hero__inner, then reorder. The dark divider isn't in the
       mobile design. Scoped to the normal review hero (not closed/archive). */
    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__row {
        display: contents;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero-bc {
        order: 0;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__left {
        order: 1;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-stats {
        order: 2;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__btns {
        order: 3;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__sep {
        display: none;
    }

    /* Hero left (Figma mobile): logo 80 + H1 on row 1, description FULL-WIDTH on
       row 2 (not beside the logo), Read more on row 3. display:contents flattens
       .asp2-hero__info so its H1/desc/readmore become grid items of __left. */
    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__left {
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-areas: "logo name" "desc desc" "more more";
        column-gap: 16px;
        row-gap: 12px;
        align-items: start;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__info {
        display: contents;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-logo-wrap {
        grid-area: logo;
        width: 80px;
        height: 80px;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__name {
        grid-area: name;
        align-self: center;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__desc {
        grid-area: desc;
    }

    .asp2-hero:not(.asp2-hero--closed):not(.asp2-hero--archive) .asp2-hero__readmore {
        grid-area: more;
        display: block;
    }

    .asp2-hero__name {
        font-size: 28px;
        line-height: 32px;
    }

    .asp2-stats {
        gap: 8px;
    }

    .asp2-stat-card {
        min-width: calc(50% - 4px);
    }

    .asp2-post-meta__inner {
        flex-wrap: wrap;
    }

    /* Byline: stack to an author row + a full-width row of two equal buttons (Figma mobile). */
    .asp2-post-meta__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .asp2-post-meta__links {
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .asp2-post-meta__link {
        flex: 1 1 0;
        text-align: center;
        padding: 12px;
    }

    .asp2-info-panel__inner {
        flex-direction: column;
        padding: 24px 16px;
        gap: 0;
    }

    .asp2-info-col {
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
        padding: 16px 0;
        border-radius: 0;
    }

    .asp2-info-col:last-child {
        border-bottom: none;
    }

    .asp2-sidebar {
        flex-direction: column;
    }

    .asp2-body {
        padding: 24px 16px;
    }

    .asp2-toc {
        position: static;
    }

    .asp2-btn-signup {
        padding: 14px 24px;
    }
}

/* ===================================================================== */
/* =========================== GAFFG New Footer =========================== */

.gf-footer {
    background: #111827;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.gf-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 350px;
    background-image: url('../images/bg-pattern.png');
    background-repeat: repeat;
    background-size: auto;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 40%, transparent 100%);
    mask-image: linear-gradient(180deg, black 0%, black 40%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.gf-footer__inner {
    /* 1232 content + 16px gutter (1264) so the footer aligns with the 1232 header. */
    max-width: 1264px;
    margin: 0 auto;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
}

/* ---- Top row ---- */
.gf-footer__top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}

/* ---- Brand column ---- */
.gf-footer__brand {
    width: 340px;
    flex-shrink: 0;
    padding-right: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gf-footer__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
}

.gf-footer__logo img {
    width: 30px;
    height: 48px;
    object-fit: contain;
}

.gf-footer__logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 42px;
    color: #ffffff;
}

.gf-footer__description {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #F9FAFB;
    margin: 0;
}

.gf-footer__social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gf-footer__social-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #F9FAFB;
    margin: 0;
}

.gf-footer__social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.gf-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #374151;
    border: 1px solid #374151;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none !important;
    transition: background 0.15s;
}

.gf-footer__social-link:hover {
    background: #4B5563;
}

.gf-footer__social-link svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

/* ---- Nav columns ---- */
.gf-footer__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.gf-footer__col-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #F9FAFB;
    margin: 0;
}

.gf-footer__col-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gf-footer__col-links li a {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #E5E7EB !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

.gf-footer__col-links li a:hover {
    color: #2DD4BF !important;
}

/* ---- Divider ---- */
.gf-footer__divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* ---- Bottom section ---- */
.gf-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.gf-footer__responsible {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #F9FAFB;
    text-align: center;
    margin: 0;
}

.gf-footer__badges {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gf-footer__badges-img {
    height: 32px;
    width: auto;
    max-width: 100%;
}

.gf-footer__age-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding-left: 1px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    font-family: 'Figtree', 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.gf-footer__gambler-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.gf-footer__disclaimer {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #E5E7EB;
    text-align: center;
    margin: 0;
    max-width: 1150px;
}

.gf-footer__copyright {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #E5E7EB;
    text-align: center;
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .gf-footer__inner {
        padding: 32px 16px;
    }

    .gf-footer__top {
        flex-direction: column;
        gap: 24px;
    }

    .gf-footer__brand {
        width: 100%;
        padding-right: 0;
    }

    .gf-footer__col {
        width: 100%;
    }

    /* The 2nd Affiliate Programs column only carries a blank placeholder title to
       align its links with col 1 on desktop. Stacked on mobile that placeholder
       leaves an empty gap, so drop it and pull the column up to read as one list. */
    .gf-footer__col--merge .gf-footer__col-title--hidden {
        display: none;
    }

    .gf-footer__col--merge {
        margin-top: -8px;
    }
}

.cc-list,
.cc-list * {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

.cc-list {
    --cc-accent: #0D9488;
    --cc-text: #172B4D;
    --cc-text-sec: #374151;
    --cc-border: #E5E7EB;
    --cc-white: #ffffff;
    --cc-bg-light: #F9FAFB;
    --cc-cta: #6D28D9;
    --cc-dark-bg: #111827;
    --cc-radius: 8px;
    --cc-radius-sm: 8px;
    --cc-bg-light-2: #F3F4F6;
    --cc-border-2: #E3E3E3;
}

.cc-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
    list-style: none;
    padding: 0;
    max-width: 1232px;
}

.cc-list--empty {
    color: var(--cc-text-sec);
    padding: 24px 0;
    margin: 0;
}

.cc-card {
    position: relative;
    background: var(--cc-white);
    border: 1px solid #D1D5DB;
    border-radius: var(--cc-radius);
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: hidden;
}

/* `is_featured` no longer drives the border or rank colour — only the top-3
   rank does (see .cc-card.cc-card--framed). Featured just hides bonus terms. */


.cc-card--featured .cc-card__bonus-terms {
    display: none !important;
}

.cc-card__rank {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background: #0D9488;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    font-family: 'Manrope', sans-serif;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5px 0 0 7px;
}

/* Only the top-3 (framed) cards get the teal rank badge; the rest are gray,
   matching the affiliate cards on the other pages. */
.cc-card:not(.cc-card--framed) .cc-card__rank {
    background: #E5E7EB;
    color: #111827 !important;
}

.cc-card__col-a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 8px;
    width: 116px;
    padding: 12px 12px 12px 0;
    margin-right: 16px;
    border-right: 1px solid var(--cc-border);
    background: var(--cc-white);
}

.cc-card__logo {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    background: var(--cc-dark-bg);
    flex-shrink: 0;
}

.cc-card__logo--placeholder {
    display: block;
    width: 80px;
    height: 80px;
    background: var(--cc-dark-bg);
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    flex-shrink: 0;
}

.cc-card__stars-area {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.cc-card__col-b {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.cc-card .cc-card__name {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    color: var(--cc-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Manrope', sans-serif !important;
}

.cc-card .cc-card__est {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    color: var(--cc-text-sec) !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-family: 'Manrope', sans-serif !important;
}

.cc-card__stars-mob {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.cc-card__info-sep {
    border: none !important;
    border-top: 1px solid var(--cc-border) !important;
    margin: 12px 0 !important;
    background: none !important;
}

.cc-card .cc-card__prog {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--cc-text-sec) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Manrope', sans-serif !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cc-card .cc-card__prog-name {
    color: #1F2937 !important;
    font-weight: 600 !important;
}

.cc-card .cc-card__prog-name--green {
    color: #1F2937 !important;
}

.cc-card__stars {
    display: inline-flex;
    gap: 2px;
}

.cc-star {
    display: inline-flex;
    width: 18px;
    height: 18px;
    font-size: 20px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    font-style: normal;
}

.cc-star--full {
    color: var(--cc-accent) !important;
}

.cc-star--half {
    color: var(--cc-accent) !important;
    opacity: 0.55;
}

.cc-star--empty {
    color: #D1D5DB !important;
}

.cc-card .cc-card__rating-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    height: 20px;
    letter-spacing: 0 !important;
    color: var(--cc-text) !important;
    font-family: 'Manrope', sans-serif !important;
}

.cc-card__col-c {
    flex: 0 0 100%;
    margin-top: 12px;
}

.cc-card .cc-card__bonus {
    background: var(--cc-bg-light) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius-sm) !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.cc-card .cc-card__bonus-lbl {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: var(--cc-text-sec) !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.cc-card .cc-card__bonus-hl {
    font-family: 'Manrope', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    letter-spacing: -0.02em !important;
    color: #0F766E !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.cc-card .cc-card__bonus-hl b,
.cc-card .cc-card__bonus-hl strong {
    color: #0F766E !important;
    font-weight: 700 !important;
}

.cc-card .cc-card__bonus-terms {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    color: var(--cc-text-sec) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Manrope', sans-serif !important;
}

.cc-card__bonus-sep {
    border: none !important;
    border-top: 1px solid var(--cc-border) !important;
    margin: 10px 0 !important;
    background: none !important;
}

.cc-card .cc-card__bonus-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    font-size: 14px !important;
    color: var(--cc-text-sec) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Manrope', sans-serif !important;
}

.cc-card .cc-card__bonus-meta strong {
    color: #1F2937 !important;
    font-weight: 600 !important;
}

.cc-card__bonus-pipe {
    margin: 0 12px;
    color: #D1D5DB;
    font-weight: 400;
}

.cc-card__col-d {
    flex: 0 0 100%;
    margin-top: 10px;
    display: flex;
    align-items: stretch;
}

.cc-card__actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
}

.cc-card .cc-card__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 1 !important;
    padding: 11px 16px !important;
    border-radius: var(--cc-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
    white-space: nowrap !important;
    font-family: 'Manrope', sans-serif !important;
    line-height: 1.2 !important;
}

.cc-card .cc-card__btn:hover {
    opacity: 0.85 !important;
    text-decoration: none !important;
}

.cc-card .cc-card__btn--review {
    background: #F3F4F6 !important;
    border: 1px solid #F3F4F6 !important;
    color: #111827 !important;
}

.cc-card .cc-card__btn--register {
    background: #4F46E5 !important;
    border: 1px solid #4F46E5 !important;
    color: #fff !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
}

.cc-card__ext-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (min-width: 1200px) {
    .cc-list--casinos .cc-card__col-b,
    .cc-list--brands .cc-card__col-b {
        flex: 1 1 0;
        min-width: 0;
        max-width: 300px;
    }

    .cc-list--casinos .cc-card__col-c {
        flex: 1.5 1 0;
        min-width: 0;
    }

    .cc-card {
        flex-wrap: nowrap;
        align-items: stretch;
        min-height: 184px;
        padding: 20px;
        background: linear-gradient(to right, var(--cc-bg-light) 164px, var(--cc-white) 164px);
    }

    .cc-card__col-a {
        width: 144px;
        padding: 12px 16px;
        margin-right: 0;
        border-right: 1px solid var(--cc-border);
        gap: 8px;
        background: transparent;
    }

    .cc-card__stars-area {
        display: flex;
    }

    .cc-card__stars-mob {
        display: none;
    }

    .cc-card__col-b {
        flex: 0 0 300px;
        min-width: 0;
        padding: 0 16px;
        border-right: 1px solid var(--cc-border);
        justify-content: center;
        gap: 0;
    }

    .cc-card__col-c {
        flex: 1;
        min-width: 0;
        margin: 0 0 0 16px;
        padding-right: 16px;
        border-right: 1px solid var(--cc-border);
        display: flex;
        align-items: stretch;
    }

    .cc-card .cc-card__bonus {
        width: 100% !important;
    }


    .cc-card__col-d {
        flex: 0 0 182px;
        margin-top: 0;
        padding-left: 16px;
        align-items: stretch;
    }

    .cc-card__actions {
        flex-direction: column;
        gap: 8px;
        height: 100%;
        justify-content: center;
    }

    .cc-card .cc-card__btn {
        flex: none !important;
        width: 100% !important;
    }
}

.cc-card__prog-row {
    flex: 0 0 100%;
    margin-top: 16px;
}

/* Mobile-only aff row in _casino_card.php — hidden at desktop */
.cc-card__prog-mob {
    display: none;
}

.cc-card--vertical {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    max-width: 400px;
    min-height: 0 !important;
    background: var(--cc-white) !important;
    padding: 0 !important;
}

.cc-card__vert-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    /* Figma: logo sits at the normal padding; the 40px corner rank triangle laps
       over its top-left corner (z-index keeps the triangle on top). */
    padding: 20px;
}

.cc-card--vertical .cc-card__col-a {
    width: auto !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-right: none !important;
    background: transparent !important;
    gap: 0 !important;
    justify-content: flex-start !important;
}

.cc-card--vertical .cc-card__stars-area {
    display: none !important;
}

.cc-card--vertical .cc-card__stars-mob {
    display: flex !important;
    margin-top: 6px !important;
}


.cc-card--vertical .cc-card__col-b {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-right: none !important;
    justify-content: center !important;
}


.cc-card--vertical .cc-card__prog-row {
    flex: 0 0 auto !important;
    padding: 12px 20px !important;
    margin: 0 !important;
}

.cc-card--vertical .cc-card__col-c {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border-right: none !important;
    display: block !important;
    align-items: initial !important;
}

/* margin-top:auto pins the divider + CTA to the bottom so the Register/Full
   Review buttons line up across cards of unequal content height. */
.cc-card--vertical .cc-card__sep--vert {
    flex: 0 0 auto;
    margin: auto 20px 12px !important;
}

.cc-card--vertical .cc-card__col-d {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 20px 20px !important;
    align-items: stretch !important;
}

.cc-card--vertical .cc-card__actions {
    flex-direction: row !important;
    height: auto !important;
    justify-content: stretch !important;
}

.cc-card--vertical .cc-card__btn {
    flex: 1 !important;
    width: auto !important;
}


.cc-card--vertical .cc-card__btn--review {
    background: #F3F4F6 !important;
    border: 1px solid #F3F4F6 !important;
    color: #111827 !important;
}

/* Rank triangle sits at the padding box, i.e. 2px inside the framed teal border;
   the 8px rounded-corner clip then exposes the light header bg in that 2px gap
   (a "shine" in the corner). Shift it out by the border width so the solid teal
   triangle covers the corner and the card clip rounds it cleanly. */
.cc-card--vertical.cc-card--framed .cc-card__rank {
    top: -2px;
    left: -2px;
    padding: 7px 0 0 9px;
}

/* Bonus box — Figma "Card - Casino" (vertical alt cards on closed/blocked pages).
   Scoped to --vertical so the approved horizontal listing card is untouched. */
.cc-card--vertical .cc-card__bonus {
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

.cc-card--vertical .cc-card__bonus-lbl {
    font-size: 14px !important;
    line-height: 18px !important;
    color: #374151 !important;
}

.cc-card--vertical .cc-card__bonus-hl,
.cc-card--vertical .cc-card__bonus-hl b,
.cc-card--vertical .cc-card__bonus-hl strong {
    font-size: 20px !important;
    line-height: 24px !important;
    color: #0F766E !important;
}

.cc-card--vertical .cc-card__bonus-terms {
    color: #374151 !important;
}

.cc-card--vertical .cc-card__bonus-meta {
    font-size: 12px !important;
    line-height: 14px !important;
    color: #374151 !important;
}

.cc-card--vertical .cc-card__bonus-meta strong {
    color: #1F2937 !important;
}

/* Header text + CTA — Figma vertical "Card - Casino" spec (scoped to --vertical). */
.cc-card--vertical .cc-card__est {
    color: #374151 !important;
    margin-top: 4px !important;
}

.cc-card--vertical .cc-card__stars-mob {
    margin-top: 8px !important;
}

/* Figma rating: 5 stars span 80px (16px pitch, ~0 gap). Glyph stars fill ~75%
   of their box, so use a larger glyph in a tighter 16px box with no gap. */
.cc-card--vertical .cc-card__stars-mob .cc-card__stars {
    gap: 0 !important;
}

.cc-card--vertical .cc-card__stars-mob .cc-star {
    font-size: 18px !important;
    width: 16px !important;
    height: 16px !important;
}

.cc-card--vertical .cc-card__prog {
    font-weight: 500 !important;
    color: #374151 !important;
}

.cc-card--vertical .cc-card__logo {
    background: #111827 !important;
    border: 1px solid #D1D5DB !important;
}

.cc-card--vertical .cc-card__btn {
    font-size: 16px !important;
    line-height: 16px !important;
    padding: 12px !important;
    gap: 8px !important;
}

.cc-card--vertical .cc-card__btn--review {
    font-weight: 700 !important;
}


@media (min-width: 900px) and (max-width: 1199px) {
    .cc-list {
        display: grid;
        grid-template-columns: repeat(2, 400px);
        justify-content: center;
        gap: 16px;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 899px) {
    .cc-list {
        display: grid;
        grid-template-columns: 400px;
        justify-content: center;
        gap: 16px;
        max-width: 100%;
    }
}

@media (max-width: 1199px) {

    .cc-card:not(.cc-card--vertical) {
        max-width: 400px;
        padding: 0;
        background: #F9FAFB;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-a {
        width: auto;
        flex-shrink: 0;
        padding: 20px 0 20px 20px;
        margin-right: 0;
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
        background: transparent;
        gap: 0;
        justify-content: flex-start;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-b {
        flex: 1 !important;
        min-width: 0;
        padding: 20px 20px 20px 16px;
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
        justify-content: center;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-b .cc-card__info-sep {
        display: none !important;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-b .cc-card__prog {
        display: none !important;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__prog-mob {
        display: flex;
        align-items: center;
        flex: 0 0 100%;
        background: white;
        padding: 12px 20px;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__prog-mob .cc-card__prog {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-c {
        flex: 0 0 100%;
        background: white;
        margin: 0;
        padding: 0 20px 12px;
        border-right: none;
        display: block;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-d {
        flex: 0 0 100%;
        background: white;
        margin: 0;
        padding: 12px 20px 20px;
        border-top: 1px solid var(--cc-border);
        align-items: stretch;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__actions {
        flex-direction: row !important;
        height: auto;
        justify-content: flex-start;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__btn {
        flex: 1 !important;
        width: auto !important;
    }

    .cc-card:not(.cc-card--vertical):not(.cc-card--featured) .cc-card__btn--review {
        background: #F3F4F6 !important;
        border: 1px solid #F3F4F6 !important;
        color: #111827 !important;
    }

    .cc-card .cc-star {
        width: 16px;
        height: 16px;
        font-size: 16px;
        line-height: 16px;
    }

    .cc-card .cc-card__bonus-lbl {
        font-size: 14px !important;
    }

    .cc-card .cc-card__bonus-hl {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    .cc-card .cc-card__bonus-pipe {
        display: inline-block;
        width: 1px;
        height: 14px;
        background: #D1D5DB;
        margin: 0 12px;
        font-size: 0;
        flex-shrink: 0;
    }

    .cc-card .cc-card__btn {
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {
    .cc-list {
        align-items: center;
    }
}

@media (max-width: 430px) {
    .cc-list {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .cc-card--vertical {
        max-width: 345px;
        width: 100%;
    }

    .cc-card--vertical .cc-card__vert-header {
        padding: 16px;
    }

    .cc-card--vertical .cc-card__prog-row {
        padding: 10px 16px !important;
    }

    .cc-card--vertical .cc-card__col-c {
        padding: 0 16px !important;
    }

    .cc-card--vertical .cc-card__sep--vert {
        flex: 0 0 auto;
        margin: auto 16px 12px !important;
    }

    .cc-card--vertical .cc-card__col-d {
        padding: 0 16px 16px !important;
    }

    .cc-card:not(.cc-card--vertical) {
        max-width: none;
        width: 100%;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-a {
        padding: 16px 0 16px 16px;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-b {
        padding: 16px 16px 16px 12px;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__prog-mob {
        padding: 10px 16px;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-c {
        padding: 0 16px 10px;
    }

    .cc-card:not(.cc-card--vertical) .cc-card__col-d {
        padding: 10px 16px 16px;
    }

    .cc-card .cc-star {
        width: 16px;
        height: 16px;
        font-size: 16px;
        line-height: 16px;
    }

    .cc-card .cc-card__bonus-lbl {
        font-size: 14px !important;
    }

    .cc-card .cc-card__bonus-hl {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    .cc-card .cc-card__bonus-meta {
        font-size: 12px !important;
        line-height: 14px !important;
    }

    .cc-card .cc-card__btn {
        font-size: 14px !important;
    }
}

.ic-card {
    font-family: 'Inter', sans-serif;
    background: #fff;
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ic-card__top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ic-card__photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.ic-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ic-card__label {
    font-size: 11px;
    font-weight: 600;
    color: #0D9488;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ic-card__person {
    font-size: 14px;
    font-weight: 700;
    color: #172B4D;
    margin: 0;
}

.ic-card__title-small {
    font-size: 12px;
    color: #667085;
    margin: 0;
}

.ic-card__logo {
    max-height: 20px;
    width: auto;
    margin-top: 4px;
}

.ic-card__headline {
    font-size: 15px;
    font-weight: 700;
    color: #172B4D;
    line-height: 1.4;
    margin: 0;
}

.ic-card__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #667085;
}

.ic-card__footer a {
    color: #0D9488;
    font-weight: 600;
    text-decoration: none;
    margin-left: auto;
}

.ic-card__footer a:hover {
    text-decoration: underline;
}


/* New casino pages: small footer gap on desktop, flush on mobile (drops the big
   decorative gap). body.page-casino .footer (0,2,1) beats the global .footer (0,1,0). */
body.page-casino .footer {
    margin-top: 30px;
}

.casinos-header {
    /* Same stack as .asp2-hero / .cr-hero for a consistent dark hero. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50.23%),
    url('../img/icons/background_casino_review.png') center center / cover no-repeat,
    linear-gradient(180deg, #1F2937 0%, #111827 100%);
    color: #fff;
}

.casinos-header__inner {
    /* 1232 content column + 40px gutter (1232 + 2*40 = 1312) to match header. */
    max-width: 1312px;
    margin: 0 auto;
    padding: 48px 40px;
    box-sizing: border-box;
}

.casinos-header__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 18px;
    opacity: 0.9;
}

.casinos-header__breadcrumb a {
    color: #fff !important;
    text-decoration: none;
    transition: color .15s ease;
}

.casinos-header__breadcrumb a:hover {
    text-decoration: underline;
}

.casinos-header__breadcrumb span {
    color: #fff !important;
}

.casinos-header__sep {
    font-size: 0;
    vertical-align: middle;
}

.casinos-header__sep::after {
    content: '/';
    font-size: 12px;
    color: #fff;
    vertical-align: middle;
    line-height: 18px;
}

.casinos-header__h1 {
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0;
}

.casinos-header__content {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 450;
    line-height: 24px;
    letter-spacing: 0;
    color: #E5E7EB !important;
    margin: 12px 0 0;
    opacity: 1;
    width: auto;
}

.casinos-page {
    background: #F9FAFB;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.casinos-page__body {
    /* Override the generic .container so cards/TOC align with header + byline (1232). */
    max-width: 1312px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 40px 48px;
    box-sizing: border-box;
}

/* Byline (author row) under the header */
.casino-byline {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
}

.casino-byline__inner {
    max-width: 1312px;
    margin: 0 auto;
    padding: 15px 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.casino-byline__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.casino-byline__avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #D1D5DB;
    object-fit: cover;
    flex-shrink: 0;
}

.casino-byline__lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.casino-byline__names {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #1F2937;
}

.casino-byline__names a {
    color: #4F46E5;
    font-weight: 500;
    text-decoration: underline;
}

.casino-byline__names a:hover {
    text-decoration: none;
}

.casino-byline__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #374151;
}

.casino-byline__sub svg {
    color: #0D9488;
    flex-shrink: 0;
}

.casino-byline__dot {
    color: #D7D7DB;
}

.casino-byline__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.casino-byline__btn {
    display: inline-flex;
    align-items: center;
    background: #F3F4F6;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #161B39;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}

.casino-byline__btn:hover {
    color: #161B39;
    text-decoration: none;
}

.casino-byline__btn:hover {
    background: #E5E7EB;
}

/* Mobile byline (Figma Section Post Meta mobile): 16px gutter to align with the
   body .container, smaller avatar/text, full-width split buttons. */
@media (max-width: 576px) {
    .casino-byline__inner {
        padding: 12px 16px;
    }

    .casino-byline__avatar {
        width: 32px;
        height: 32px;
    }

    .casino-byline__names {
        font-size: 12px;
        line-height: 16px;
    }

    .casino-byline__sub {
        font-size: 12px;
    }

    .casino-byline__actions {
        width: 100%;
        gap: 8px;
    }

    .casino-byline__btn {
        flex: 1;
        justify-content: center;
    }
}

/* Editable content blocks (CKEditor output from the admin) */
.casinos-page__above {
    margin: 24px 0;
}

/* H2 on the casino pages — overrides the global `.article-html>h2` from style.min.css.
   Compound `.article-html` selectors raise specificity above (0,1,1) so they win. */
.casinos-page__above h2,
.casinos-page__above.article-html h2,
.casinos-page__below-content h2,
.casinos-page__below-content.article-html h2,
.casinos-page h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    color: #111827;
    margin: 0 0 16px;
}

.casinos-page__below-content h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #111827;
    margin: 20px 0 12px;
}

.casinos-page__above p,
.casinos-page__below-content p {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #1F2937;
}

/* Two-column below section: sticky Table of Contents + content */
/* SEO/article content below the cards sits on its own white band — matches
   .cr-editorial (review) and .asp2-archive-content (affiliate). */
.casinos-page__seo {
    background: #fff;
    padding: 40px 0;
}

.casinos-page__seo .casinos-page__below {
    margin-top: 0;
}

.casinos-page__below {
    margin: 48px 0 0;
}

.casinos-page__below--has-toc {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
}

.casinos-page__toc {
    position: sticky;
    top: 24px;
}

/* Table of Contents box */
.casino-toc {
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    padding: 20px 22px;
    background: #fff;
}

.casino-toc h3 {
    font-size: 16px;
    font-weight: 800;
    color: #101828;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E4E7EC;
}

.casino-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}

.casino-toc li {
    counter-increment: toc;
    margin: 0 0 12px;
    line-height: 1.4;
}

.casino-toc li:last-child {
    margin-bottom: 0;
}

.casino-toc a {
    font-size: 14px;
    font-weight: 500;
    color: #667085;
    text-decoration: none;
    transition: color .15s ease;
}

.casino-toc a::before {
    content: counter(toc) ". ";
    font-weight: 600;
}

.casino-toc a:hover,
.casino-toc li.is-active a {
    color: #0D9488;
}

/* Content column (Best list + mini reviews) */
.casinos-page__below-content ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 18px;
}

.casinos-page__below-content li {
    margin-bottom: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #1F2937 !important;
}

.casinos-page__below-content li a {
    color: #4F46E5;
    font-weight: 600;
    text-decoration: underline;
}

.casinos-page__below-content li a:hover {
    text-decoration: none;
}

@media (max-width: 991px) {
    /* Mobile: footer flush (desktop keeps the 30px gap above) */
    body.page-casino .footer {
        margin-top: 0;
    }

    .casinos-page__below--has-toc {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .casinos-page__toc {
        position: static;
    }

    /* Mobile: keep the heading, hide only the intro content below it */
    .casinos-page__above.article-html > :not(h2) {
        display: none;
    }

    .casinos-page__above {
        margin: 16px 0 0;
    }

    .casinos-header__sep::after {
        content: '≫';
        font-size: 11px;
    }
}

/* Load More button */
.cc-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin: 28px 0 8px;
}

.cc-loadmore {
    background: #fff;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    padding: 12px 48px;
    font-size: 14px;
    font-weight: 600;
    color: #344054;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.cc-loadmore:hover {
    background: #F9FAFB;
    border-color: #98A2B3;
}

.cc-loadmore.is-loading {
    opacity: .6;
    cursor: default;
}

/* ===== Casino Review page ===== */
.casino-review-page {
    --cr-accent: #0D9488;
    --cr-cta: #4F46E5;
    --cr-text: #172B4D;
    --cr-sec: #667085;
    --cr-border: #D1D5DB;
    --cr-bg: #F9FAFB;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.casino-review-page * {
    box-sizing: border-box;
}

/* ---- HERO (dark) ---- */
.cr-hero {
    /* Same stack as .asp2-hero so every dark hero matches: white-fade grid +
       hex pattern over the Dark Bg gradient. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50.23%),
    url('../img/icons/background_casino_review.png') center center / cover no-repeat,
    linear-gradient(180deg, #1F2937 0%, #111827 100%);
    color: #fff;
    padding: 24px 0 32px;
}

.cr-hero__crumbs {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 24px;
}

.cr-hero__crumbs a {
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
}

.cr-hero__crumbs a:hover {
    text-decoration: underline;
}

.cr-hero__crumbs span {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.5);
}

/* The last span is the current page name (not a separator) — white, like Figma. */
.cr-hero__crumbs span:last-child {
    margin: 0;
    color: #FFFFFF;
}

.cr-hero__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 58px;
    flex-wrap: wrap;
}

.cr-hero__main {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas: "logo title" "logo rating" "logo desc";
    column-gap: 20px;
    row-gap: 12px;
    align-content: start;
    flex: 1;
    min-width: 280px;
}

.cr-hero__logo, .cr-hero__logo--ph {
    grid-area: logo;
    align-self: start;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: contain;
    background: #161B39;
    border: 1.5px solid #9CA3AF;
}

.casino-review-page .cr-hero__title {
    grid-area: title;
    align-self: start;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.02em;
    margin: 0;
    color: #F9FAFB;
}

.cr-hero__rating {
    grid-area: rating;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.cr-hero__rating-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #fff !important;
}

.cr-hero__rating .cc-star {
    font-size: 20px;
}

.cr-hero__rating .cc-star--full,
.cr-hero__rating .cc-star--half {
    color: #2DD4BF !important;
}

.cr-hero__rating .cc-star--empty {
    color: rgba(255, 255, 255, .25) !important;
}

.cr-hero__desc-wrap {
    grid-area: desc;
    max-width: 620px;
}

.cr-hero__desc {
    font-weight: 450;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #E5E7EB !important;
    margin: 0;
}

.cr-hero__more {
    background: none;
    border: none;
    padding: 6px 0 0;
    color: #0D9488 !important;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

/* Bonus box (right) */
.cr-hero__bonus {
    background: #1F2937;
    border: 1px solid #4B5563;
    border-radius: 8px;
    padding: 16px;
    width: 360px;
    flex-shrink: 0;
}

.cr-hero__bonus-lbl {
    font-size: 16px;
    font-weight: 500;
    color: #F3F4F6 !important;
    margin: 0 0 8px;
}

.cr-hero__bonus-hl {
    font-size: 20px;
    font-weight: 700;
    color: #2DD4BF !important;
    margin: 0 0 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
}

.cr-hero__bonus-hl b {
    color: #2DD4BF !important;
    font-weight: 800;
}

.cr-hero__cta {
    display: block;
    background: var(--cr-cta);
    color: #fff;
    text-align: center;
    padding: 14px 48px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    text-decoration: none;
}

.cr-hero__cta:hover {
    opacity: .9;
    color: #fff;
}

.cr-hero__bonus-terms {
    font-size: 10px;
    line-height: 12px;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 8px 0 0;
    text-align: center;
}

/* ---- Blocked state (closed / not recommended) ---- */
.cr-closed-head {
    display: flex;
    align-items: center;
    gap: 24px;
}

.cr-closed-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.cr-closed-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
}

.cr-closed-badge svg {
    flex-shrink: 0;
}

.cr-closed-badge--warn {
    border-color: #DC2626;
    border-radius: 4px;
    padding: 6px 8px;
    gap: 4px;
    color: #fff !important;
}

/* Keep the warning icon red even though the label text is white */
.cr-closed-badge--warn svg {
    color: #DC2626;
}

/* Not-recommended hero: the warning badge is its own grid cell so it can sit
   under the stars on desktop and jump above the logo/title on mobile. */
.cr-hero__warn {
    grid-area: warn;
    align-self: start;
}


/* Desktop layout: logo spans, title → stars → warning badge stacked on the right */
.casino-review-page--not_recommended .cr-hero__main {
    grid-template-areas: "logo title" "logo rating" "logo warn";
}

/* Closed: no stars row, badge sits under the title */
.casino-review-page--closed .cr-hero__main {
    grid-template-areas: "logo title" "logo warn";
}

/* Not-recommended state: red border on the logo, hide the description (bonus box
   is removed in PHP). The double-class --not_recommended targets this state only. */
.casino-review-page--not_recommended .cr-hero__logo,
.casino-review-page--not_recommended .cr-hero__logo--ph {
    border: 2px solid #DC2626;
}

.casino-review-page--blocked .cr-hero__desc-wrap {
    display: none;
}

.cr-closed-sep {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin: 28px 0;
}

.cr-closed-title {
    color: #fff !important;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 24px;
}

/* Divider between the hero and the alternatives band (blocked pages only).
   Spans the container width (centered), not edge-to-edge. */
.casino-review-page--blocked .cr-hero__row {
    border-bottom: 1px solid var(--Neutral-700, #374151);
    padding-bottom: 32px;
}

/* Blocked / not-recommended pages wrap the hero + alternatives in .cr-dark so the
   hex pattern + dark gradient render as ONE continuous surface and the pattern fades
   smoothly down through the cards (matching Figma's single dark frame), instead of
   being cut off at the hero edge with a flat band below. The hero + alts are made
   transparent and inherit this background. */
.cr-dark {
    /* Figma "Hero Top": dark gradient base (#1F2937→#111827) + a subtle white sheen.
       The hex "Background Pattern Faded" (1920×720, but exported UNIFORM) lives on the
       ::before and is faded by the "Background Grid" gradient (#FFFFFF 0% → transparent
       100%) applied as a mask — so the cells dissolve toward the bottom like Figma. */
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50.23%),
                linear-gradient(180deg, #1F2937 0%, #111827 100%);
}
.cr-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('../img/icons/background_hero_faded.png') center top / cover no-repeat;
    /* Hexagons fully visible at the top, fading out by ~60% of the hero (just into the
       cards) — Figma "Background Grid" mask, nudged a touch lower than its 50.23%. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 60%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 60%);
}
.cr-dark > .cr-hero,
.cr-dark > .cr-alts-section {
    position: relative;
    z-index: 1;
    background: none;
}

.cr-alts-section {
    padding: 8px 0 44px;
}

.cr-alts {
    /* card CSS vars (normally provided by .cc-list) so cards render outside a list */
    --cc-accent: #0D9488;
    --cc-text: #172B4D;
    --cc-text-sec: #374151;
    --cc-border: #E5E7EB;
    --cc-white: #ffffff;
    --cc-bg-light: #F9FAFB;
    --cc-cta: #6D28D9;
    --cc-dark-bg: #111827;
    --cc-radius: 8px;
    --cc-radius-sm: 8px;
    --cc-bg-light-2: #F3F4F6;
    --cc-border-2: #E3E3E3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

.cr-alts .cc-card, .cr-alts .cc-card--vertical {
    max-width: none;
    width: 100%;
}

/* ---- BODY ---- */
.cr-section {
    background: var(--cr-bg);
    padding: 40px 0 56px;
}

/* 4-column info grid */
.cr-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 16px;
}

/* Thin vertical dividers between columns (1px spans in the markup). */
.cr-divider {
    width: 1px;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--cr-border);
}

.cr-col {
    flex: 1 1 0;
    min-width: 0;
}

.cr-col__title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cr-border);
}

.cr-aff {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0;
}

.cr-aff__logo {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: contain;
    background: #161B39;
    border: 1px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.cr-aff__lbl {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #374151;
}

.cr-aff__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #1F2937;
}

.cr-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Divider between the Aff. Programme block and the rows — General Info only.
   Without this scope the rows-as-first-child columns (e.g. Bonus Info) got a
   double line under the title + a 16px offset, misaligning the first row. */
.cr-aff + .cr-rows {
    border-top: 1px solid var(--cr-border);
    padding-top: 16px;
}

.cr-rows li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    font-size: 14px;
}

.cr-rows li:last-child {
    border-bottom: none;
}

.cr-rows li span {
    color: #374151 !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
}

.cr-rows li strong {
    color: #1F2937;
    font-weight: 600;
    line-height: 18px;
    text-align: right;
}

.cr-langs {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cr-border);
}

.cr-langs__lbl {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.cr-langs p {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
    line-height: 18px;
}

/* Pros & Cons */
.cr-pc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cr-pc li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #1F2937;
    line-height: 20px;
}

.cr-pc__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    width: 16px;
}

.cr-pc__pro .cr-pc__ic {
    color: #0D9488 !important;
}

.cr-pc__con .cr-pc__ic {
    color: #C02B0A !important;
}

/* Divider between the pros and cons groups (1px #E5E7EB), drawn via ::before so
   it doesn't add a flex row. Sits centered in the 12px gap above the first con. */
.cr-pc__con--first {
    position: relative;
    margin-top: 12px;
}

.cr-pc__con--first::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 1px;
    background: var(--cr-border);
}

/* Features */
.cr-feat {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cr-feat li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    font-size: 14px;
}

.cr-feat li:last-child {
    border-bottom: none;
}

.cr-feat__left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cr-feat__icon {
    display: inline-flex;
    align-items: center;
    color: #0D9488 !important;
    flex-shrink: 0;
}

.cr-feat__img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.cr-feat__label {
    color: var(--cr-text);
}

.cr-feat__ic {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.cr-feat__ic-img {
    display: block;
    width: auto;
    height: auto;
}

/* style.min.css has a global `div,li,p,span,ul{color:#777!important;font-weight:400}`
   reset that degrades our text — re-assert the design typography for casino content. */
/* Reset also forces font-family:WorkSans onto li/p/span — re-inherit the page font. */
.casino-review-page li,
.casino-review-page p,
.casino-review-page span,
.casino-review-page strong,
.casino-review-page a,
.casino-review-page h1,
.casino-review-page h2,
.casino-review-page h3 {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.casino-review-page li {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
}

.casino-review-page .cr-pc li,
.casino-review-page .casinos-page__below-content li {
    color: #1F2937 !important;
}

.casino-review-page .cr-feat__label {
    color: #1F2937 !important;
}

/* Casino Features labels are SemiBold per design */
.casino-review-page .cr-feat__label {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
    vertical-align: middle;
}

/* Providers + Bonuses two-column */
.cr-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 40px;
}

.cr-block__title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px;
}

.cr-block {
    min-width: 0;
}

.cr-providers, .cr-bonuses, .cr-pay-col {
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    padding: 16px;
}

.cr-providers__search {
    position: relative;
    margin-bottom: 16px;
}

.cr-providers__input {
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    padding: 12px 40px 12px 16px;
    font-size: 16px;
}

.cr-providers__search svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.cr-providers__tags, .cr-pay-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cr-tag {
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    background: #fff;
    white-space: nowrap;
}

.cr-tag--hidden {
    display: none;
}

.cr-providers__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    cursor: pointer;
    margin-top: 14px;
    padding: 0;
}

/* Plain indigo text link (Figma) — override style.min.css `span{color:#777!important}`. */
.cr-providers__more,
.cr-providers__more .cr-providers__more-txt {
    color: #4F46E5 !important;
}

.cr-providers__more-chev {
    transition: transform .2s ease;
}

.cr-providers__more.is-expanded .cr-providers__more-chev {
    transform: rotate(180deg);
}

/* Bonus cards */
.cr-bonuses {
    padding: 16px;
}

.cr-bonus {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    border-bottom: 1px solid #D1D5DB;
}

.cr-bonus:last-of-type {
    border-bottom: none;
}

.cr-bonus__logo {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: contain;
    background: #161B39;
    border: 1px solid #4F46E5;
    flex-shrink: 0;
}

.cr-bonus__info {
    flex: 1;
    min-width: 0;
}

.cr-bonus__title {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin: 0;
    line-height: 18px;
}

.cr-bonus__hl {
    font-size: 18px;
    font-weight: 700;
    color: #0F766E;
    margin: 2px 0 0;
    line-height: 20px;
    letter-spacing: -0.02em;
}

.cr-bonus__hl b {
    color: #0F766E;
}

.cr-bonus__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cr-bonus__terms {
    font-size: 10px;
    line-height: 10px;
    color: #4B5563;
    margin: 0;
    text-align: center;
}

.cr-bonus__cta {
    background: var(--cr-cta);
    color: #fff;
    text-decoration: none;
    padding: 10px 31px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.cr-bonus__cta:hover {
    opacity: .9;
    color: #fff;
}

.cr-bonuses__more-wrap {
    text-align: center;
    padding: 16px 0 4px;
}

.cr-bonuses__more {
    display: inline-block;
    background: #F0F0F0;
    color: var(--cr-cta);
    padding: 12px 31px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

/* Payments */
.cr-payments {
    margin-top: 40px;
}

.cr-payments__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cr-pay-col__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #111827;
    margin: 0 0 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid #D1D5DB;
}

.cr-pay-cat__head {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.cr-pay-cat__name {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cr-pay-cat__line {
    flex: 1;
    height: 1px;
    background: #D1D5DB;
}

.cr-pay-cat__chev {
    display: inline-flex;
    align-items: center;
    color: #374151 !important;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.cr-pay-cat.is-open .cr-pay-cat__chev {
    transform: rotate(180deg);
    color: #4F46E5 !important;
}

/* Payment tags stretch to 4 equal columns per row (Figma), unlike the
   auto-width provider tags. */
.cr-pay-tags .cr-tag {
    flex: 1 1 calc(25% - 6px);
    text-align: center;
}

.cr-pay-cat__body {
    display: none;
    padding: 0 0 16px;
}

.cr-pay-cat.is-open .cr-pay-cat__body {
    display: block;
}

/* Editorial (Best Online Casinos) — white band like the byline */
.cr-editorial {
    background: #fff;
    border-bottom: 1px solid #E4E7EC;
    padding: 40px 0;
}

.cr-editorial .casinos-page__below {
    margin-top: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .cr-section {
        padding: 20px 0 0;
    }

    .cr-grid {
        flex-wrap: wrap;
        gap: 32px;
    }

    /* No vertical dividers when columns wrap */
    .cr-divider {
        display: none;
    }

    .cr-col {
        flex: 0 0 calc(50% - 16px);
    }

    .cr-two, .cr-payments__cols {
        grid-template-columns: 1fr;
    }

    .cr-hero__bonus {
        width: 100%;
    }

    /* Bonuses appear before Game Providers when stacked */
    .cr-block--bonuses {
        order: -1;
    }
}

@media (max-width: 767px) {
    /* Tighter hero on mobile */
    .cr-hero {
        padding: 16px 0;
    }

    .cr-hero__crumbs {
        font-size: 12px;
        margin-bottom: 16px;
    }

    /* Mobile hero: logo + name on one row, stars then description below (full width) */
    .cr-hero__main {
        grid-template-columns: auto 1fr;
        grid-template-areas: "logo title" "logo rating" "desc desc";
        align-items: start;
        column-gap: 14px;
        row-gap: 6px;
    }

    /* Not-recommended: warning badge jumps above the logo + title on mobile */
    .casino-review-page--not_recommended .cr-hero__main {
        grid-template-areas: "warn warn" "logo title" "logo rating";
        row-gap: 12px;
    }

    /* Closed: badge above the logo + title on mobile */
    .casino-review-page--closed .cr-hero__main {
        grid-template-areas: "warn warn" "logo title";
        row-gap: 12px;
    }

    /* Mobile only: badge border edge-to-edge (full content width). Desktop stays fit-content. */
    .cr-closed-badge.cr-hero__warn {
        width: 100%;
        justify-content: center;
        padding: 5px 65px;
    }

    .cr-hero__logo, .cr-hero__logo--ph {
        width: 80px;
        height: 80px;
        border-width: 1px;
        align-self: start;
    }

    .casino-review-page .cr-hero__title {
        font-size: 24px;
        line-height: 28px;
    }

    /* Description truncates to 3 lines + "See more" only on mobile */
    .cr-hero__desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cr-hero__desc-wrap.is-expanded .cr-hero__desc {
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    /* Bonus card: logo + text on top row, Claim Bonus full-width centered below */
    .cr-bonus {
        flex-wrap: wrap;
    }

    .cr-bonus__action {
        width: 100%;
        align-items: stretch;
    }

    .cr-bonus__cta {
        width: 100%;
        text-align: center;
    }

    /* Tags (Game Providers + Payment Methods) two per row */
    .cr-providers__tags, .cr-pay-tags {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .cr-tag {
        text-align: center;
    }

    /* Alternatives stack on mobile */
    .cr-alts {
        grid-template-columns: 1fr;
    }

    .cr-closed-head {
        gap: 14px;
    }
}

@media (max-width: 575px) {
    .cr-col {
        flex: 0 0 100%;
    }
}

/* ---- Brands listing filter bar ---- */
.brands-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

.brands-filter__label {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #1F2937;
    margin: 0;
}

.brands-filter__select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
}

/* ============================================================================
   INTERVIEW / NEWS SINGLE — new design (Figma "Interview Single")
   Container = .container (1232 content). All tokens mapped 1:1 from Figma.
   ============================================================================ */
.iv-page {
    background: #fff;
}

/* ---------- HERO ---------- */
.iv-hero {
    /* 1:1 Figma "Section Hero": uniform hex pattern over the Dark Bg gradient
       (#1F2937 -> #111827). Uses bg-hero-pattern.png (full uniform tile) instead
       of background_casino_review.png (a top-fading strip that bands on this
       tall hero). No white-fade overlay — Figma has only gradient + pattern. */
    background: url('../images/bg-hero-pattern.png') top center / auto repeat,
    linear-gradient(180deg, #1F2937 0%, #111827 100%);
    padding: 48px 0;
    position: relative;
    overflow: hidden;
}

.iv-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.iv-hero__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.iv-crumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: .9;
}

.iv-crumbs li {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 18px;
}

.iv-crumbs a, .iv-crumbs__current {
    color: #fff !important;
    font-weight: 500 !important;
    text-decoration: none;
}

.iv-crumbs a:hover {
    text-decoration: underline;
}

.iv-crumbs__current {
    font-weight: 400 !important;
}

.iv-crumbs__sep {
    color: rgba(255, 255, 255, .5) !important;
    font-weight: 400 !important;
}

.iv-hero__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #fff !important;
    margin: 0;
}

.iv-hero__intro {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 24px;
    color: #E5E7EB !important;
    margin: 0;
}

/* Guest / Interviewer cards */
.iv-people {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.iv-person {
    flex: 1 1 0;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #1F2937;
    border: 1px solid #4B5563;
    border-radius: 8px;
}

.iv-person__top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.iv-person__avatar {
    display: block;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border: 1px solid #9CA3AF;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
}

.iv-person__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.iv-person__label {
    font-family: 'Manrope', sans-serif;
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 20px;
    color: #2DD4BF !important;
}

.iv-person__namerow {
    display: flex;
    align-items: center;
    gap: 4px;
}

.iv-person__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 24px;
    line-height: 30px;
    color: #fff !important;
}

.iv-person__ic {
    display: inline-flex;
    color: #2DD4BF !important;
}

.iv-person__ic svg {
    width: 24px;
    height: 24px;
}

.iv-person__role {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 18px;
    color: #fff !important;
}

.iv-person__bio {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 20px;
    color: #E5E7EB !important;
    margin: 0;
}

/* ---------- POST META (byline) ---------- */
.iv-meta {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: 12px 0;
}

.iv-meta__inner {
    display: flex;
    align-items: center;
    gap: 24px;
}

.iv-meta__author {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.iv-meta__avatar {
    width: 40px;
    height: 40px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    object-fit: cover;
    flex: 0 0 40px;
}

.iv-meta__lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.iv-meta__by {
    font-family: 'Manrope', sans-serif;
    font-weight: 500 !important;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #1F2937 !important;
}

.iv-meta__sub {
    display: flex;
    align-items: center;
    gap: 6px;
}

.iv-meta__date, .iv-meta__read {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500 !important;
    font-size: 14px;
    line-height: 20px;
    color: #374151 !important;
}

.iv-meta__cal {
    display: inline-flex;
    color: #0D9488;
}

.iv-meta__dot {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: #D7D7DB;
    flex: 0 0 4px;
}

.iv-meta__actions {
    display: flex;
    gap: 12px;
}

.iv-meta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #F3F4F6;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600 !important;
    font-size: 14px;
    line-height: 14px;
    color: #161B39 !important;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- BODY (content + sidebar) ---------- */
.iv-body {
    border-bottom: 1px solid #E5E7EB;
    padding: 40px 0 48px;
}

.iv-body__inner {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.iv-content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.iv-sidebar {
    flex: 0 0 320px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* article typography */
.iv-content h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 32px;
    line-height: 36px;
    color: #111827 !important;
    margin: 8px 0 0;
}

.iv-content h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 18px;
    line-height: 28px;
    color: #111827 !important;
    margin: 0;
}

.iv-content p {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 26px;
    color: #1F2937 !important;
    margin: 0;
}

.iv-content ul, .iv-content ol {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iv-content li {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 24px;
    color: #1F2937 !important;
}

.iv-content img {
    max-width: 100%;
    height: auto;
    /*border-radius: 8px;*/
}

.iv-content a {
    color: #0D9488 !important;
}

/* Share box */
.iv-share {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 16px;
}

.iv-share__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.iv-share__head {
    display: flex;
    align-items: center;
    gap: 4px;
}

.iv-share__ic {
    display: inline-flex;
    color: #0D9488;
}

.iv-share__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600 !important;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.04em;
    color: #111827 !important;
}

.iv-share__sub {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 18px;
    color: #374151 !important;
    margin: 0;
}

.iv-share__icons {
    display: flex;
    gap: 8px;
}

.iv-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #0D9488 !important;
}

/* "Copy link" button — copies the page URL to clipboard; shows a brief "Copied!" tooltip. */
.iv-share__btn--copy {
    position: relative;
}

.iv-share__copied {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}

.iv-share__btn--copy.is-copied .iv-share__copied {
    opacity: 1;
}

/* Sidebar — Popular Affiliate Programs */
.iv-pop {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.iv-pop__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.02em;
    color: #172B4D !important;
    margin: 0;
}

.iv-pop__list {
    display: flex;
    flex-direction: column;
}

.iv-pop__row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 12px 0;
    border-top: 1px solid #E5E7EB;
}

.iv-pop__logo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #161B39;
    border: 0.75px solid #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.iv-pop__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.iv-pop__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.iv-pop__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: #172B4D !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iv-pop__rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.iv-pop__stars {
    display: inline-flex;
    color: #0D9488;
}

.iv-pop__score {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 14px;
    line-height: 14px;
    color: #374151 !important;
}

.iv-pop__chev {
    display: inline-flex;
    color: #4F46E5;
    align-self: center;
    flex: 0 0 16px;
}

.iv-pop__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-top: 1px solid #E5E7EB;
    padding-top: 12px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 16px;
    color: #111827 !important;
    text-decoration: none;
}

.iv-pop__all svg {
    color: #111827;
}

.iv-sidebar__ad {
    display: block;
}

.iv-sidebar__ad img {
    width: 100%;
    border-radius: 8px;
    display: block;
}

/* ---------- OTHER INTERVIEWS ---------- */
.iv-more {
    background: #F9FAFB;
    padding: 40px 0 48px;
    border-bottom: 1px solid #E5E7EB;
}

.iv-more__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.iv-more__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.02em;
    color: #111827 !important;
    margin: 0;
}

.iv-more__all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 16px;
    color: #111827 !important;
    text-decoration: none;
}

.iv-more__all svg {
    color: #111827;
}

.iv-more__grid {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.iv-card {
    flex: 1 1 0;
    box-sizing: border-box;
    text-decoration: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    padding: 20px 20px 16px;
}

.iv-card__top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.iv-card__avatar {
    display: block;
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    background: #161B39;
    background-size: cover;
    background-position: center;
    border: 1px solid #D1D5DB;
    overflow: hidden;
}

.iv-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.iv-card__who {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.iv-card__with {
    font-family: 'Manrope', sans-serif;
    font-weight: 500 !important;
    font-size: 14px;
    line-height: 18px;
    color: #0F766E !important;
}

.iv-card__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #111827 !important;
}

.iv-card__role {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 18px;
    color: #374151 !important;
}

.iv-card__divider {
    height: 1px;
    background: #F3F4F6;
}

.iv-card__heading {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #111827 !important;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iv-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.iv-card__meta > span:not(.iv-card__cta) {
    font-family: 'Manrope', sans-serif;
    font-weight: 500 !important;
    font-size: 14px;
    line-height: 16px;
    color: #161B39 !important;
}

.iv-card__sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #F3F4F6 !important;
}

.iv-card__cta {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0;
    color: #4F46E5 !important;
}

.iv-card__cta svg {
    color: #4F46E5;
}

/* Bottom CTA — desktop uses the top "All News" link; on mobile (Figma) this
   becomes a full-width button under the cards. Hidden on desktop. */
.iv-more__btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 24px;
    box-sizing: border-box;
    background: #F3F4F6;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 16px;
    color: #161B39 !important;
    text-decoration: none;
}

/* ---------- ARCHIVE (Figma "Gaffg Interviews" listing) ---------- */
/* Section Cards: light-grey bg + 40px padding (Figma "Section Cards"). */
.iv-page--archive .iv-body {
    background: #F9FAFB;
    border-bottom: 0;
    padding: 40px 0;
}

/* Cards column: H2 -> grid -> Load More all 24px apart (Figma gap 24). */
.iv-page--archive .iv-content {
    gap: 24px;
}

/* Hero: archive H1 is 36/40; breadcrumb -> H1 = 8, H1 -> intro = 16. */
.iv-page--archive .iv-hero__title {
    line-height: 40px;
}

.iv-page--archive .iv-hero__head {
    gap: 8px;
}

.iv-page--archive .iv-hero__intro {
    margin-top: 8px;
}

.iv-archive__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.02em;
    color: #111827 !important;
    margin: 0;
}

.iv-archive__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.iv-archive__grid .iv-card {
    flex: none;
    width: auto;
}

.iv-archive__grid .iv-card__sep {
    background: #F3F4F6 !important;
}

/* AFFPAPA company badge — boxed logo placeholder (Figma 92x40 / border .77 #E5E7EB). */
.iv-card__badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 4px;
    height: 40px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 0.77px solid #E5E7EB;
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.06em;
    color: #374151 !important;
}

.iv-archive__morewrap {
    display: flex;
    justify-content: center;
}

.iv-archive__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 48px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 16px;
    color: #161B39 !important;
    cursor: pointer;
}

.iv-archive__more:hover {
    background: #F9FAFB;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .iv-people {
        flex-direction: column;
    }

    .iv-body__inner {
        flex-direction: column;
    }

    .iv-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }

    /* When a left sidebar exists, keep the content first on mobile, then the
       left widgets, then the right rail. (No-op when there's no left sidebar.) */
    .iv-content {
        order: 0;
    }

    .iv-sidebar--left {
        order: 1;
    }

    .iv-sidebar:not(.iv-sidebar--left) {
        order: 2;
    }

    .iv-more__grid {
        flex-wrap: wrap;
    }

    .iv-card {
        flex: 1 1 280px;
    }
}

/* ===== MOBILE 1:1 (Figma "Interviews - Mobile", 375px frame) ===== */
@media (max-width: 640px) {
    /* Interview-page gutters: 16px each side -> 343px content on a 375 viewport. */
    .iv-page .container {
        padding: 0 16px;
    }

    /* ---- HERO ---- */
    .iv-hero {
        padding: 16px 0;
    }

    .iv-hero__inner {
        gap: 16px;
    }

    .iv-hero__head {
        gap: 12px;
    }

    .iv-hero__title {
        font-size: 32px;
        line-height: 40px;
        color: #F9FAFB !important;
    }

    .iv-hero__intro {
        font-size: 16px;
        line-height: 24px;
    }

    /* Guest / Interviewer cards — mobile token set (translucent white card). */
    .iv-people {
        gap: 16px;
    }

    .iv-person {
        padding: 12px;
        gap: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.15);
        border-radius: 4px;
    }

    .iv-person__name {
        font-size: 20px;
        line-height: 24px;
    }

    .iv-person__role {
        font-size: 12px;
        line-height: 14px;
    }

    .iv-person__bio {
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF !important;
    }

    /* ---- POST META (byline) ---- */
    .iv-meta {
        padding: 12px 0;
    }

    .iv-meta__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .iv-meta__author {
        flex: none;
    }

    .iv-meta__avatar {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .iv-meta__by {
        font-weight: 400 !important;
        font-size: 12px;
        line-height: 16px;
    }

    .iv-meta__date, .iv-meta__read {
        font-size: 12px;
        line-height: 16px;
        color: #333333 !important;
    }

    .iv-meta__actions {
        width: 100%;
        gap: 8px;
    }

    .iv-meta__btn {
        flex: 1 1 0;
        padding: 12px 24px;
    }

    /* ---- BODY (content + sidebar stacked) ---- */
    .iv-body {
        padding: 16px 0;
    }

    .iv-body__inner {
        gap: 16px;
    }

    .iv-content {
        gap: 16px;
    }

    .iv-content h2 {
        font-size: 28px;
        line-height: 32px;
    }

    .iv-sidebar {
        gap: 16px;
    }

    /* ---- OTHER INTERVIEWS (Section Cards) ---- */
    .iv-more {
        padding: 16px 0;
    }

    .iv-more__head {
        margin-bottom: 16px;
    }

    .iv-more__all {
        display: none;
    }

    /* replaced by bottom button */
    .iv-more__title {
        font-size: 24px;
        line-height: 30px;
    }

    .iv-more__grid {
        flex-direction: column;
        gap: 12px;
    }

    .iv-card {
        flex: 1 1 auto;
        width: 100%;
        padding: 16px;
    }

    .iv-more__btn {
        display: flex;
    }

    /* full-width CTA under the cards */
    /* ---- ARCHIVE (single column) ---- */
    /* Month group title: 24/30 on mobile (Figma). Needs `.iv-content h2` in the
       selector to beat the generic `.iv-content h2` rule (= 28px) — same
       specificity trap as the card description below. */
    .iv-content h2.iv-archive__title {
        font-size: 24px;
        line-height: 30px;
    }

    .iv-archive__grid {
        grid-template-columns: 1fr;
    }

    .iv-archive__more {
        width: 100%;
    }
}

/* ---- Carousel drag-to-scroll ---- */
.latest-reviews__row[data-carousel-track] {
    cursor: grab;
}

[data-carousel-track].is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
}

/* Right-arrow icon used in section "view all" links. */
.section-link-arrow {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}


/* Shared typography for the new blocks (Pros & Cons + custom sections). */
.pros-cons__title,
.page-section__title {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: 0;
    color: #111827;
}

.pros-cons__intro,
.page-section__body {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #1F2937;
}

/* ---- Pros & Cons ---- */
.pros-cons-block {
    margin: 28px 0;
}

.pros-cons__intro {
    margin: 0 0 18px;
}

.pros-cons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pros-cons__col {
    width: 428px;
    max-width: 100%;
    min-height: 220px;
    padding: 16px;
    border: 1px solid #D1D5DB; /* Neutral-300 */
    border-radius: 4px;
    opacity: 1;
    background: #fff;
}

/* Scoped above .article-html h3 so the generic heading scale never overrides it. */
.pros-cons-block .pros-cons__heading {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: #1f2a44;
}

.pros-cons__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pros-cons__list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1F2937;
}

.pros-cons__list li:last-child {
    margin-bottom: 0;
}

.pros-cons__list li::before {
    position: absolute;
    left: 0;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.pros-cons__col--pros .pros-cons__list li::before {
    content: "+";
    background: #0aa6a6; /* teal */
}

.pros-cons__col--cons .pros-cons__list li::before {
    content: "\2212"; /* minus sign */
    background: #dc2626;
}

/* ---- Custom sections ---- */
.page-section {
    margin: 28px 0;
}

/* ---- Heading scale for entered article content (all front article wrappers) ---- */
.article-html h3,
.blog-detail__content h3,
.guides-content h3,
.asp2-prose h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0;
    color: #111827;
}

.article-html h4,
.blog-detail__content h4,
.guides-content h4,
.asp2-prose h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    color: #111827;
}

.article-html h5,
.blog-detail__content h5,
.guides-content h5,
.asp2-prose h5 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    vertical-align: middle;
}

.article-html h6,
.blog-detail__content h6,
.guides-content h6,
.asp2-prose h6 {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    vertical-align: middle;
}

.article-html p,
.blog-detail__content p,
.guides-content p,
.asp2-prose p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
}

/* Images & tables inserted into article content get a neutral border. */
.article-html img,
.blog-detail__content img,
.guides-content img,
.asp2-prose img,
.article-html table,
.blog-detail__content table,
.guides-content table,
.asp2-prose table {
    border: 1px solid #D1D5DB; /* Neutral-300 */
    border-radius: 4px;
}

.article-html table,
.blog-detail__content table,
.guides-content table,
.asp2-prose table {
    border-collapse: collapse;
}

.article-html table th,
.article-html table td,
.blog-detail__content table th,
.blog-detail__content table td,
.guides-content table th,
.guides-content table td,
.asp2-prose table th,
.asp2-prose table td {
    border: 1px solid #D1D5DB; /* Neutral-300 */
    padding: 8px 12px;
}

.faq-accordion {
    max-width: 872px;
    margin: 28px 0;
}

.faq-accordion__title {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: 0;
    color: #111827;
}

/* One continuous rounded block; rows stack flush with dividers between them. */
.faq-accordion__list {
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    overflow: hidden;
}

.faq-item:not(:first-child) {
    border-top: 1px solid #D1D5DB; /* Neutral-300 */
}

/* Closed row (stays grey when open; only the answer is white). */
.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 56px;
    padding: 16px;
    background: #F3F4F6; /* Neutral-100 */
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #111827;
    cursor: pointer;
    list-style: none;
}

.faq-item__q::-webkit-details-marker {
    display: none;
}

.faq-item__q:hover {
    background: #E5E7EB;
}

/* Chevron inside a small bordered box; points down (closed) / up (open). */
.faq-item__q::after {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
    transition: transform 0.2s ease;
}

.faq-item[open] .faq-item__q::after {
    transform: rotate(180deg);
}

.faq-item__a {
    padding: 16px;
    background: #FFFFFF;
    border-top: 1px solid #D1D5DB;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #1F2937;
}

/* ---- Table of Contents (auto, from a page's custom sections) ---- */
html {
    scroll-behavior: smooth;
}

/* Offset anchored scroll so sections aren't hidden under the fixed header. */
.page-section {
    scroll-margin-top: 90px;
}

/* Adaptive content layout: optional left and/or right sidebar around the content.
   Empty side → its column is absent and the content fills the freed space. */
.content-layout {
    display: grid;
    gap: 48px;
    align-items: start;
}

.content-layout--has-left {
    grid-template-columns: 240px minmax(0, 1fr);
}

.content-layout--has-right {
    grid-template-columns: minmax(0, 1fr) 280px;
}

.content-layout--has-left.content-layout--has-right {
    grid-template-columns: 240px minmax(0, 1fr) 280px;
}

.content-side {
    position: sticky;
    top: 24px;
    padding-top: 35px;
}

.page-toc {
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    padding: 20px 22px;
    background: #fff;
}

.page-toc__title {
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E4E7EC;
    font-size: 16px;
    font-weight: 800;
    color: #101828;
}

.page-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: page-toc;
}

.page-toc__list li {
    counter-increment: page-toc;
    margin: 0 0 12px;
    line-height: 1.4;
}

.page-toc__list li:last-child {
    margin-bottom: 0;
}

.page-toc__list a {
    font-size: 14px;
    font-weight: 500;
    color: #667085;
    text-decoration: none;
    transition: color 0.15s ease;
}

.page-toc__list a::before {
    content: counter(page-toc) ". ";
    font-weight: 600;
}

.page-toc__list a:hover {
    color: #0D9488;
}

@media (max-width: 991px) {
    .content-layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .content-side {
        position: static;
    }
}

/* ---- Sidebar widgets (banner image + Popular Affiliate Programs) ---- */
.sb-banner {
    margin-top: 16px;
    overflow: hidden;
}

.sb-banner__img {
    display: block;
    width: 100%;
    height: auto;
}

.sb-programs {
    margin-top: 16px;
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.sb-programs__title {
    margin: 0;
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 800;
    color: #101828;
    border-bottom: 1px solid #E4E7EC;
}

.sb-prog {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    text-decoration: none;
    color: #101828;
    border-bottom: 1px solid #E4E7EC;
    transition: background 0.15s ease;
}

.sb-prog:last-child {
    border-bottom: none;
}

.sb-prog:hover {
    background: #F9FAFB;
}

.sb-prog__logo {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 6px;
}

.sb-prog__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-prog__name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-prog__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #667085;
}

.sb-stars {
    letter-spacing: 1px;
}

.sb-star {
    color: #D1D5DB;
}

.sb-star--on {
    color: #0D9488; /* teal */
}

.sb-prog__chev {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #9CA3AF;
}

/* ===================================================================
   HOME-PAGE MOBILE OVERRIDES
   Moved to the end of the file so they win over the base/desktop rules
   above (equal specificity => later source order wins).
   =================================================================== */

@media (max-width: 991px) {
    .section-hero {
        height: auto;
        padding-bottom: 40px;
    }

    /* Mobile/tablet: the 1920px-wide artwork can't be centred (only a slim middle
       slice would show). Cover the hero and show the lighthouse on the right. */
    .section-hero__bg {
        left: 0;
        top: 0;
        bottom: auto;
        transform: none;
        width: 100%;
        height: 55%;
        object-fit: cover;
        object-position: 60% center;
    }

    .section-stats {
        position: relative;
        z-index: 5;
        border-top-color: rgb(255 255 255 / 54%);
        margin-top: 20px;
    }

    .section-stats__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 16px 0;
        height: auto;
    }

    .section-stats__divider {
        display: none;
    }

    .section-stats__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 0;
    }

    .section-stats__number {
        font-size: 28px;
        line-height: 32px;
    }

    .section-stats__label-title {
        font-size: 14px;
        line-height: 16px;
    }

    .section-stats__label-sub {
        font-size: 12px;
        line-height: 16px;
    }

    .prog-card__deal-lbl {
        font-family: 'Manrope', sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.02em;
        color: #374151;
    }

    .latest-reviews__row .rev-card {
        padding: 16px;
    }

    .rev-card__logo-wrap {
        width: 64px;
        height: 64px;
    }

    .casino-card-new {
        flex: 0 0 calc(50% - 8px);
    }

    .article-card {
        flex: 0 0 calc(50% - 8px);
    }

    .events-grid {
        grid-template-columns: 1fr 1fr;
    }

    .section-trust__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Defensive: let the single column shrink to the viewport. */
    .section-trust__left,
    .section-trust__right {
        min-width: 0;
    }


    .section-programs__title,
    .section-casinos__title {
        font-size: 30px;
    }

    .section-casinos__hdr-row,
    .section-programs__header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-programs__header-row {
        gap: 12px;
    }

    .prog-card {
        flex-wrap: wrap;
    }

    .prog-card__panel,
    .prog-card__mid,
    .prog-card__info-panel,
    .prog-card__actions {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
    }

    .prog-card__panel {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 16px;
        gap: 12px;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
        border-radius: 8px 8px 0 0;
    }

    .prog-card__logo-wrap, .prog-card__logo {
        width: 80px;
        height: 80px;
    }

    .prog-card__rating-wrap {
        align-items: flex-start;
    }

    .prog-card__mid {
        width: 100%;
        min-width: 0;
        padding: 12px 16px 8px;
    }

    .prog-card__deals-row {
        gap: 8px;
    }

    .prog-card__deal-val {
        font-size: 15px;
        white-space: normal;
        word-break: break-word;
    }

    .prog-card__vsep {
        display: none;
    }

    .prog-card__info-panel {
        padding: 8px 16px;
    }

    .prog-card__actions {
        flex-direction: row;
        padding: 8px 16px 16px;
        min-width: 0;
    }

    .prog-card__actions .prog-card__btn-signup,
    .prog-card__actions .prog-card__btn-review {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 12px;
    }
}

@media (max-width: 767px) {
    .prog-card {
        display: grid;
        grid-template-columns: 96px 1fr; /* 16px left pad + 80px logo | rest */
        column-gap: 0;
        row-gap: 0;
        /* default stretch: header cells fill their rows so the light band and its
           bottom border stay continuous regardless of which side is taller. */
    }

    .prog-card__panel,
    .prog-card__mid {
        display: contents;
    }

    /* ---- Header band: logo + (name → rating) on a single light #F9FAFB strip
       that bleeds to the card edges, divided from the body by one bottom border
       (restores the look of the old .prog-card__panel header). ---- */
    .prog-card__logo-wrap {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: auto;
        height: auto;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 16px 0 16px 16px;
        background: #F9FAFB;
        border-bottom: 1px solid #E5E7EB;
    }

    .prog-card__name-area {
        grid-column: 2;
        grid-row: 1;
        padding: 16px 16px 0 12px;
        background: #F9FAFB;
        gap: 8px;
    }

    .prog-card__rating-wrap {
        grid-column: 2;
        grid-row: 2;
        /* score sits inline, right after the stars */
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 4px 16px 16px 12px;
        background: #F9FAFB;
        border-bottom: 1px solid #E5E7EB;
    }

    .prog-card__mid > .prog-card__deals-box,
    .prog-card__deals-box {
        grid-column: 1 / -1;
        margin: 16px 16px 0;
    }

    .prog-card__info-panel {
        grid-column: 1 / -1;
        padding: 8px 16px;
    }

    /* Last info row (Software) has no following hsep — add a matching line below
       it so it reads like the Brands / Payments rows above. */
    .prog-card__info-panel .prog-card__info-row:last-child {
        border-bottom: 1px solid #F0F0F0;
    }

    .prog-card__actions {
        grid-column: 1 / -1;
        padding: 8px 16px 16px;
    }

    .prog-card__brands-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .prog-card__brands-row .prog-card__info-lbl {
        line-height: 18px;
    }

    .prog-card__brands-wrap {
        width: 100%;
    }

    .prog-card__brands-dropdown {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
    }

    .section-programs__header-links .section-spotlight__link {
        display: none;
    }

    .section-programs__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .section-programs__footer .prog-card__btn-all,
    .section-programs__footer-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 40px;
        padding: 12px 24px;
        border-radius: 4px;
        border: 1px solid #E5E7EB;
        background: #F3F4F6;
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
        color: #111827;
        text-decoration: none;
        margin-top: 0;
        white-space: nowrap;
    }

    .section-hero {
        height: auto;
        padding: 24px 16px;
        align-items: center;
    }

    .section-hero__inner {
        width: 100%;
        max-width: 100%;
    }

    .section-hero__content {
        width: 100%;
        gap: 12px;
        align-items: flex-start;
    }

    .section-hero__text-col {
        width: 100%;
        gap: 8px;
    }

    .section-hero__badge {
        height: 26px;
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .section-hero__badge-dot {
        width: 14px;
        height: 14px;
    }

    .section-hero__badge-text {
        font-size: 14px;
        line-height: 14px;
    }

    .section-hero__heading {
        font-size: 40px;
        line-height: 44px;
        letter-spacing: -0.04em;
    }

    .section-hero__desc {
        font-size: 14px;
        line-height: 20px;
        font-weight: 450;
        letter-spacing: 0.01em;
    }

    .section-hero__search-area {
        width: 100%;
        gap: 16px;
    }

    .section-hero__search-bar {
        width: 100%;
        height: 48px;
        padding: 12px 16px;
    }

    .section-hero__search-input {
        width: auto;
        min-width: 0;
    }

    .section-hero__popular {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .section-hero__popular-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .section-hero__popular-tags::-webkit-scrollbar {
        display: none;
    }

    .section-hero__tag {
        flex-shrink: 0;
        font-size: 14px;
        letter-spacing: 0.02em;
        color: #ffffff;
    }

    .section-programs,
    .section-articles,
    .section-trust,
    .section-casinos,
    .section-events {
        padding: 24px 16px;
    }

    /* Pattern bg: the global `img{max-width:100%}` shrinks the 1728×721 tile to
       375px wide, collapsing the cubes to an invisible density. Show it at its
       natural scale instead (overflow:hidden clips the right side) so the cubes
       match the design and cover the header. */
    .section-pattern-img {
        width: auto;
        height: auto;
        max-width: none;
    }

    /* Every section's top-right "All X" link drops to the bottom of its section
       as a full-width neutral button (same treatment as All Affiliate Programs). */
    .section-casinos__hdr-row .section-spotlight__link,
    .section-articles .section-heading-row .section-spotlight__link,
    .section-events .section-heading-row .section-link,
    .section-spotlight__header-row .section-spotlight__link,
    .section-guides__header-row .section-guides__link {
        display: none;
    }

    .section-mcta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 40px;
        margin-top: 24px;
        padding: 12px 24px;
        border-radius: 4px;
        border: 1px solid #E5E7EB;
        background: #F3F4F6;
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
        color: #111827;
        text-decoration: none;
        white-space: nowrap;
    }

    .section-trust__inner {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .section-trust__left,
    .section-trust__right {
        display: contents;
    }

    /* #E3E3E3 divider between the About Us button and the review-method card */
    .section-trust__m-rule {
        display: block;
        order: 1;
        flex: 0 0 1px;
        align-self: stretch;
        height: 1px;
        min-height: 1px;
        background: #E3E3E3;
    }

    .section-trust .review-method {
        order: 2;
    }

    /* divider after the card title (Figma #E5E7EB), before the criteria rows */
    .section-trust .review-method__list {
        border-top: 1px solid #E5E7EB;
        padding-top: 4px;
    }

    /* #E3E3E3 divider above the testimonial */
    .section-trust__left [data-carousel] {
        order: 3;
        border-top: 1px solid #E3E3E3;
        padding-top: 24px;
    }

    /* Drop the testimonial's own desktop top-border so it isn't doubled. */
    .section-trust__testimonial {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    /* Gray line below the testimonial, above the carousel dots. */
    .section-trust__testimonials {
        border-bottom: 1px solid #E3E3E3;
        padding-bottom: 24px;
    }

    .section-trust__title {
        font-size: 28px;
        line-height: 32px;
        margin: -24px 0 -24px;
    }

    /*.section-trust__desc{*/
    /*margin-bottom: -5px;*/
    /*}*/
    .section-trust .prog-card__btn-all {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 40px;
        padding: 12px 24px;
        border-radius: 4px;
        border: 1px solid #EBEBEB;
        background: #F3F4F6;
        color: #161B39;
    }

    .section-trust__left .section-dots-right {
        justify-content: center;
    }


    .section-mentions {
        padding: 16px;
        border-bottom-color: #D1D5DB;
    }

    .section-mentions__inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        height: auto;
    }

    .section-mentions__label {
        letter-spacing: 0.04em;
    }

    .section-mentions__logos {
        width: 100%;
        justify-content: flex-start;
        gap: 16px;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .section-mentions__logos::-webkit-scrollbar {
        display: none;
    }

    .section-mentions__bar-img {
        height: 32px;
        max-width: none;
        flex-shrink: 0;
    }

    .section-programs__header-links {
        display: flex;
        gap: 12px;
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .section-programs__header {
        margin-bottom: 16px;
    }

    .casino-card-new {
        flex: 0 0 calc(100% - 0px);
        min-width: 0;
    }

    /* Trim the news section's bottom padding so the "All News" button sits close
       to the divider above Upcoming Events (the events section provides the line). */
    .section-articles {
        padding-bottom: 0;
    }

    .articles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .article-card {
        flex: 0 0 100%;
        min-width: 0;
        align-items: flex-start;
        gap: 12px;
        padding: 0;
    }

    .article-card__img-wrap {
        width: 120px;
        min-width: 120px;
        height: 67px;
    }

    .article-card__body {
        gap: 4px;
        justify-content: flex-start;
    }

    .article-card__meta {
        margin-bottom: 0;
        gap: 8px;
    }

    .article-card__category,
    .article-card__date {
        font-size: 12px;
        line-height: 12px;
    }

    .article-card__title {
        font-size: 16px;
        line-height: 20px;
    }

    /* ---- Upcoming Events (Figma): stacked bordered cards, NOT a carousel ----
       Keep the divider line above the section, just trim the big 60px padding so
       it sits tight like "Our latest guides". */
    .section-events__inner {
        padding: 24px 0 0;
    }

    .events-grid {
        flex-direction: column;
        overflow-x: visible;
        gap: 12px;
    }

    .event-card-hp {
        flex: none;
        width: 100%;
        min-width: 0;
        grid-template-columns: 80px 1fr;
        grid-template-areas: "logo info" "meta meta";
        align-items: start;
        gap: 12px;
        padding: 12px;
        border-color: #D1D5DB;
        border-radius: 8px;
    }

    .event-card-hp__logo {
        width: 80px;
        height: 80px;
        padding: 12px;
    }

    .event-card-hp__type {
        font-size: 14px;
        line-height: 14px;
        color: #0F766E;
    }

    .event-card-hp__name {
        font-size: 18px;
        line-height: 20px;
        white-space: normal;
    }

    .event-card-hp__location {
        font-size: 14px;
        line-height: 16px;
    }

    .event-card-hp__meta {
        font-size: 14px;
        line-height: 14px;
    }

    /* Show only the first three events on mobile. */
    .events-grid .event-card-hp:nth-child(n+4) {
        display: none;
    }

    /* Date row sits full-width under the logo + text, with a chevron at the end. */
    .event-card-hp__meta {
        justify-content: flex-start;
        gap: 8px;
    }

    .event-card-hp__meta::after {
        content: '';
        margin-left: auto;
        width: 16px;
        height: 16px;
        background: #4F46E5;
        -webkit-mask: url("../img/icons/mingcute_right-fill.png") center/contain no-repeat;
        mask: url("../img/icons/mingcute_right-fill.png") center/contain no-repeat;
    }

    /* Not a carousel on mobile → the swipe dots are meaningless. */
    .section-events .section-dots {
        display: none;
    }

    .section-programs__title,
    .section-casinos__title {
        font-size: 28px;
        line-height: 32px;
    }

    .section-casinos__desc {
        max-width: 100%;
    }

    .section-spotlight__header {
        margin-bottom: 20px;
    }

    .section-guides__header {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .section-spotlight,
    .section-guides {
        padding: 24px 16px;
    }

    .spotlight-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Guides (Figma): horizontal scroll row of 270px cards, not a grid. */
    .guides-cards {
        display: flex;
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .guides-cards::-webkit-scrollbar {
        display: none;
    }

    .guide-card {
        flex: 0 0 270px;
        scroll-snap-align: start;
        min-height: 0;
        padding: 16px 16px 12px;
    }

    .section-spotlight__header-row,
    .section-guides__header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-spotlight__title,
    .section-guides__title {
        font-size: 28px;
        line-height: 32px;
    }

    /* Interview cards (Figma): tighter padding, photo top-aligned next to info. */
    .spotlight-card {
        padding: 16px;
        gap: 12px;
    }

    .spotlight-card__author {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 0;
    }
}

/* ============================================================
   EVENTS LISTING — Figma "List of iGaming events"
   Reuses the iv-* archive shell; adds month groups + event cards.
   ============================================================ */
.ev-page .iv-content {
    gap: 24px;
}

.ev-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Gray divider between month groups (after each month). */
.ev-group + .ev-group {
    border-top: 1px solid #E5E7EB;
    padding-top: 24px;
}

.ev-group--collapsed {
    display: none;
}

/* whole month past the initial cutoff */
.ev-card--hidden {
    display: none;
}

/* revealed by "Load More" (desktop) */
.ev-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ev-empty {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 26px;
    color: #374151 !important;
    margin: 0;
}

/* Event Card (Figma "Event Card Archive Page").
   One DOM, two layouts via CSS grid:
   desktop → logo (col 1, spans both rows) | head (row 1) / meta (row 2)
   mobile  → logo + head on row 1, meta full-width on row 2 with a top divider. */
.ev-card {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
}

.ev-card__logo {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 160px;
    height: 160px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #F3F4F6;
    border: 1.33px solid #E5E7EB;
    border-radius: 10.67px;
    overflow: hidden;
}

.ev-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.ev-card__logo-ph {
    width: 80px;
    height: 80px;
    opacity: .85;
}

.ev-card__head {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

/* .iv-content a is teal site-wide; the card title must stay dark (Figma) —
   raise specificity to beat it. */
.ev-page .iv-content a.ev-card__title {
    order: 0;
    flex: 1;
    min-width: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 24px;
    line-height: 30px;
    color: #111827 !important;
    text-decoration: none;
}

.ev-page .iv-content a.ev-card__title:hover {
    text-decoration: underline;
}

.ev-card__type {
    order: 1;
    flex: 0 0 auto;
    padding-top: 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 16px;
    color: #0F766E !important;
    text-align: right;
    white-space: nowrap;
}

/* Event description: its own full-width grid row under the title, above the meta
   row (a real grid item, NOT a flex child of the head — see ev-card--has-desc). */
.ev-card__desc {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1F2937;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* When a description is present the right column is 3 rows (head / desc / meta);
   the logo spans all three and the meta drops to row 3. */
.ev-card--has-desc .ev-card__logo {
    grid-row: 1 / 4;
}

.ev-card--has-desc .ev-card__meta {
    grid-row: 3;
}

.ev-card__meta {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ev-card__loc, .ev-card__date, .ev-card__dur {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500 !important;
    font-size: 16px;
    line-height: 20px;
    color: #374151 !important;
}

.ev-card__ic {
    display: inline-flex;
    color: #374151;
}

.ev-card__sep {
    width: 1px;
    height: 20px;
    background: #E5E7EB;
    flex: 0 0 1px;
}

.ev-card__loc--head {
    display: none;
}

/* location lives in the meta row on desktop */

@media (max-width: 640px) {
    /* Figma mobile spacing: month title ↔ cards = 16, between cards = 12. */
    .ev-group + .ev-group {
        padding-top: 15px;
    }
    .ev-group {
        gap: 16px;
    }

    .ev-list {
        gap: 12px;
    }

    .ev-card {
        grid-template-columns: 80px 1fr;
        gap: 12px;
        padding: 12px;
    }

    .iv-page--archive .iv-body {
        padding: 10px 0;
    }

    .ev-card__logo {
        grid-row: 1;
        width: 80px;
        height: 80px;
        padding: 12px;
        border-width: 1px;
        border-radius: 8px;
    }

    .ev-card__logo-ph {
        width: 48px;
        height: 48px;
    }

    /* Head: type on top, then title, then location (Figma mobile). */
    .ev-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ev-page .iv-content a.ev-card__title {
        order: 1;
        font-size: 18px;
        line-height: 20px;
    }

    .ev-card__type {
        order: 0;
        padding-top: 0;
        text-align: left;
        font-size: 14px;
        line-height: 14px;
    }

    .ev-card__loc--head {
        display: inline-flex;
        order: 2;
        font-size: 14px;
        line-height: 14px;
    }

    /* Description: full-width row under the logo + head, above the meta row.
       Figma mobile: Manrope 450, 14/22, #000, full text (no clamp). Selector
       carries `.iv-content p` so it beats the generic `.iv-content p`
       (16/26/400 !important) that would otherwise win on specificity. */
    .iv-content p.ev-card__desc {
        grid-column: 1 / -1;
        grid-row: 2;
        display: block;
        overflow: visible;
        -webkit-line-clamp: none;
        font-weight: 450 !important;
        font-size: 14px !important;
        line-height: 22px !important;
        color: #000 !important;
    }

    .ev-card--has-desc .ev-card__logo {
        grid-row: 1;
    }

    /* no row-span on mobile */
    /* Meta: full-width row under logo+head, divider on top, location hidden here. */
    .ev-card__meta {
        grid-column: 1 / -1;
        grid-row: 2;
        border-top: 1px solid #E5E7EB;
        padding-top: 12px;
    }

    .ev-card__loc--meta, .ev-card__sep--loc {
        display: none;
    }

    .ev-card__date, .ev-card__dur {
        font-weight: 450 !important;
        font-size: 14px;
        line-height: 14px;
        color: #111827 !important;
    }

    /* Indigo "go" chevron at the right end of the meta row — same masked icon as
       the home-page event cards (.event-card-hp__meta::after); mobile only. */
    .ev-card__meta::after {
        content: '';
        margin-left: auto;
        width: 16px;
        height: 16px;
        background: #4F46E5;
        -webkit-mask: url("../img/icons/mingcute_right-fill.png") center/contain no-repeat;
        mask: url("../img/icons/mingcute_right-fill.png") center/contain no-repeat;
    }

    .ev-card__sep {
        height: 16px;
    }

    /* Mobile (Figma) shows every event up-front — no Load More. */
    .ev-card--hidden {
        display: grid;
    }

    .ev-group--collapsed {
        display: flex;
    }

    .ev-loadmore-wrap {
        display: none;
    }
}

/* ===========================================================================
   About page — testimonials: drop the legacy blue box (#eef4fc) for the Figma
   neutral palette. Only /about/ uses this inline-styled block (verified), so
   the attribute selector is effectively page-scoped. Background + colours only
   (no structural / content change).
   =========================================================================== */
.article-html div[style*="eef4fc"] {
    background: #F9F9F9 !important;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    color: #1F2937;
}

.article-html div[style*="eef4fc"] blockquote,
.article-html div[style*="eef4fc"] p,
.article-html div[style*="eef4fc"] em {
    color: #1F2937;
}

/* ---------------------------------------------------------------------------
   "Connect with Us on Social Media" — reusable social-card row for an
   admin-managed custom Section. Paste the .about-social markup into a Section's
   Content field (see ONBOARDING / the snippet handed over). Figma: 4 white
   cards, 1px #EBEBEB border, radius 4, 40px dark icon, centred handle text.
   --------------------------------------------------------------------------- */
.about-social {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.about-social__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 0;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1F2937 !important; /* beat the global .article-html a teal rule */
}

/* Icon via CSS (not inline <svg>) so the admin CKEditor can't strip it on save. */
.about-social__card::before {
    content: "";
    width: 40px;
    height: 40px;
    background: center / contain no-repeat;
}

.about-social__card--linkedin::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23161B39'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

.about-social__card--x::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23161B39'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.259 5.632 5.905-5.632zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.about-social__card--facebook::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23161B39'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.about-social__card--youtube::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23161B39'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.about-social__handle {
    color: #1F2937 !important;
}

/* Section heading ("Connect with Us…") rendered by PagesContentSection. */
.article-html .page-section__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.02em;
    color: #111827;
}

@media (max-width: 640px) {
    .about-social {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Page sections (PagesContentSection {{page_section}}) — mobile typography.
   Kept at the END so it overrides the desktop `.article-html .page-section__title`
   rule above (equal specificity → later source wins within the media query). */
@media (max-width: 768px) {
    .article-html .page-section__title {
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 30px;
        letter-spacing: 0;
    }

    .article-html .page-section__body {
        font-family: 'Manrope', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0;
    }
}

/* =========================================================================
   Byline modals — "Affiliate Disclosure" + "Why Trust Us" (Figma 1:1)
   Opened site-wide by .casino-byline__btn / .asp2-post-meta__link /
   .iv-meta__btn buttons carrying data-modal-target. Markup: views/parts/byline_modals.php
   ========================================================================= */
.bl-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(17, 24, 39, 0.5);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.bl-modal-overlay.is-open {
    display: flex;
}

body.bl-modal-open {
    overflow: hidden;
}

.bl-modal {
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    width: 311px;
    max-width: 100%;
    max-height: 360px;          /* grows with the text (hug), then scrolls */
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
}

.bl-modal__title {
    align-self: stretch;
    padding-right: 24px;        /* clear of the close icon */
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #172B4D;
}

.bl-modal__divider {
    align-self: stretch;
    height: 1px;
    background: #E5E7EB;
}

.bl-modal__body {
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    /* Figma: scrollbar track is always visible beside the text (Frame 1686560959),
       so the text width stays a constant 273px and never reflows when it overflows. */
    overflow-y: scroll;
    padding-right: 8px;                       /* 8px gap to the scrollbar (Figma) */
    font-family: 'Manrope', sans-serif;
    font-weight: 450;
    font-size: 16px;
    line-height: 26px;
    color: #111827;
    scrollbar-width: thin;                    /* Firefox */
    scrollbar-color: #D1D5DB #F3F4F6;
}

.bl-modal__body::-webkit-scrollbar {
    width: 6px;
}

.bl-modal__body::-webkit-scrollbar-track {
    background: #F3F4F6;                       /* Neutral/100 */
    border-radius: 0 0 12px 12px;             /* Figma track: bottom corners only */
}

.bl-modal__body::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 100px;
}

.bl-modal__body p {
    margin: 0 0 12px;
}

.bl-modal__body p:last-child {
    margin-bottom: 0;
}

.bl-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: #000000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.bl-modal__close svg {
    display: block;
    width: 16px;
    height: 16px;
}