/* =====================================================================
 Metareavr, metareavr.io
 AG-inspired editorial theme: white canvas, red brand, deep navy, gold
 Fonts loaded from Google in <head>: Inter + Montserrat
 ===================================================================== */

:root {
 /* Backgrounds - SkyCity dark theme */
 --bg: #1a1a1a; --bg-alt: #232428; --bg-soft: #1a1a1a;
 --surface: #343434; --surface-hover: #4f4f4f;
 --border: #4f4f4f; --border-strong: #656565;
 --text: #e8e8e8; --text-muted: #b0b0b0; --text-dim: #757575;

 /* Brand palette - gold primary (SkyCity #b38d2f) */
 --navy: #b38d2f; --navy-2: #c6a44a; --navy-deep: #9a7928;
 --red: #e94f3d; --red-2: #e94f3d; --red-deep: #c23e2e;
 --gold: #e4ce97; --gold-2: #f0dfb3;
 --success: #52ae32;

 /* Aliases kept for backward-compat with existing utility names */
 --pink: var(--red); --pink-2: var(--red-2); --pink-deep: var(--red-deep);
 --purple: var(--navy); --purple-2: var(--navy-2);
 --accent: var(--navy); --accent-2: var(--navy-2);
 --danger: var(--red); --teal: var(--navy-2); --teal-2: var(--navy-deep);
 --yellow: var(--gold); --yellow-deep: #c9a65f;
 --surface-2: var(--bg-alt);
 --pink-glow: rgba(233, 79, 61, .24);
 --purple-glow: rgba(179, 141, 47, .24);
 --gold-glow: rgba(228, 206, 151, .28);

 /* Shape + shadow - SkyCity feel */
 --radius-sm: 4px; --radius: 4px; --radius-lg: 10px;
 --button-radius: 44px;
 --shadow-1: 0 1px 1px 0 rgba(0,0,0,0.25), 0 0 1px 0 rgba(0,0,0,0.25);
 --shadow-2: 0 3px 4px 0 rgba(0,0,0,0.35), 0 0 1px 0 rgba(0,0,0,0.25);
 --shadow-3: 0 8px 10px 0 rgba(0,0,0,0.45), 0 0 1px 0 rgba(0,0,0,0.3);
 --shadow-strong: 0 18px 26px 0 rgba(0,0,0,0.55), 0 0 1px 0 rgba(0,0,0,0.3);
 --shadow-pink: 0 8px 22px rgba(233, 79, 61, .22);

 /* Layout */
 --max-w: 1344px;

 /* Typography - Montserrat across the board (SkyCity) */
 --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
 --font-head: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
 --font-display: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.6;font-size:16px;min-height:100vh;overflow-x:hidden}
body::before{content:none}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--red)}
h1, h2, h3, h4{font-family:var(--font-head);font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(2rem, 4.5vw, 3.4rem)}
h2{font-size:clamp(1.6rem, 3vw, 2.2rem)}
h3{font-size:1.15rem;font-weight:700}
p{color:var(--text-muted)}
button{cursor:pointer;font-family:inherit}
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px}

/* ---------- HEADER + NAV ---------- */
.top-strip{background:var(--navy-deep);color:#fff;font-family:var(--font-head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.top-strip .container{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.top-strip .strip-left{display:inline-flex;gap:14px;align-items:center;flex-wrap:wrap}
.top-strip .strip-left .pill{padding:3px 10px;border-radius:999px;background:rgba(255, 255, 255, .14);font-size:11px}
.top-strip a{color:var(--gold-2)}
.top-strip a:hover{color:#fff;text-decoration:underline}
@media (max-width:720px){.top-strip .strip-right{display:none}}

.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(0, 0, 0, .03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:18px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);flex:0 0 auto}
.logo img{height:56px;width:auto;display:block;max-width:100%}
.logo:hover{opacity:.9}
@media (max-width:640px){.logo img{height:44px}}

.nav{display:flex;align-items:center;gap:4px}
.nav a, .nav .dropdown-trigger{padding:10px 14px;border-radius:4px;color:var(--text);font-family:var(--font-head);font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:none;border:none;transition:color .15s, background .15s}
.nav a:hover, .nav .dropdown-trigger:hover{color:var(--red);background:var(--bg-alt)}
.nav a.active{color:var(--red);border-bottom:3px solid var(--red);border-radius:0;padding-bottom:7px}
.nav .has-dropdown{position:relative}
.nav .dropdown-trigger{display:inline-flex;align-items:center;gap:6px}
.nav .dropdown-trigger::after{content:"\25BE";font-size:10px;margin-top:2px;transition:transform .2s}
.nav .has-dropdown:hover .dropdown-trigger::after, .nav .has-dropdown.open .dropdown-trigger::after{transform:rotate(180deg)}
.nav .dropdown-menu{position:absolute;top:100%;left:0;min-width:280px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-2);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s}
.nav .has-dropdown:hover .dropdown-menu, .nav .has-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .dropdown-menu>a, .nav .dropdown-menu .submenu-parent{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13.5px;letter-spacing:.04em;text-transform:none;font-weight:600;color:var(--text);border-radius:0}
.nav .dropdown-menu>a:hover, .nav .dropdown-menu .submenu-parent:hover{background:var(--bg-alt);color:var(--red)}
.nav .flag-ico-img{width:20px;height:20px;border-radius:3px;flex-shrink:0}
.nav .has-submenu{position:relative}
.nav .submenu-caret{margin-left:auto;font-size:10px;color:var(--text-dim)}
.nav .dropdown-submenu{position:absolute;top:0;left:100%;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-2);padding:8px 0;opacity:0;visibility:hidden;transform:translateX(6px);transition:all .2s}
.nav .has-submenu:hover .dropdown-submenu{opacity:1;visibility:visible;transform:translateX(0)}
.nav .dropdown-submenu a{display:block;padding:9px 16px;font-size:13px;color:var(--text);font-family:var(--font-body);letter-spacing:0;text-transform:none;font-weight:500}
.nav .dropdown-submenu a:hover{background:var(--bg-alt);color:var(--red)}

.header-search{display:none !important}
.nav-toggle, .menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--text);cursor:pointer;padding:4px 8px}

@media (max-width:900px){
 .nav-toggle, .menu-toggle{display:block}
 .header-search{display:none}
 .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px;border-top:1px solid var(--border);box-shadow:var(--shadow-2);gap:0;max-height:calc(100vh - 60px);overflow-y:auto}
 .nav.open{display:flex}
 .nav a, .nav .dropdown-trigger{padding:12px 14px;width:100%;text-align:left;justify-content:flex-start}
 /* Collapse dropdowns/submenus by default on mobile — open only when parent has .open */
 .nav .dropdown-menu{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:4px 0 4px 12px;background:var(--bg-alt);border-radius:6px;margin:4px 0}
 .nav .has-dropdown.open > .dropdown-menu{display:block}
 .nav .dropdown-submenu{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:24px;background:#fff}
 .nav .has-submenu.open > .dropdown-submenu{display:block}
 /* Rotate caret when submenu is open for visual feedback */
 .nav .has-submenu > .submenu-parent .submenu-caret{transition:transform .18s}
 .nav .has-submenu.open > .submenu-parent .submenu-caret{transform:rotate(90deg)}
}

/* ---------- HERO ---------- */
.ag-hero{background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-2) 100%);color:#fff;text-align:center;padding:28px 20px 34px;position:relative;overflow:hidden}
@media (max-width:720px){
 .ag-hero{padding:14px 16px 18px}
 .ag-hero .kicker{display:none !important}
 .ag-hero h1{font-size:1.35rem;line-height:1.15;margin-bottom:8px}
 .ag-hero .lede{font-size:.85rem;line-height:1.45;margin-bottom:12px}
 .ag-hero .hero-ctas{gap:8px}
 .ag-hero .btn, .ag-hero .btn-primary, .ag-hero .btn-secondary,
 .ag-hero .btn-hero-primary, .ag-hero .btn-hero-secondary{padding:9px 14px;font-size:12px;letter-spacing:.04em}
}
.ag-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 100%, rgba(214, 40, 40, .20), transparent 70%);pointer-events:none}
.ag-hero .container{position:relative}
.ag-hero .kicker{display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);background:rgba(255, 255, 255, .08);padding:4px 11px;border-radius:999px;margin-bottom:10px;border:1px solid rgba(255, 255, 255, .14)}
.ag-hero h1{color:#fff;font-size:clamp(1.7rem, 3.4vw, 2.6rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin-bottom:10px}
.ag-hero h1 .grad{background:linear-gradient(90deg, var(--gold), var(--red-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-hero .lede{max-width:640px;margin:0 auto 16px;font-size:.95rem;color:rgba(255, 255, 255, .85);line-height:1.5}
.ag-hero .hero-ctas{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn-hero-primary{background:var(--red);color:#fff;padding:12px 22px;border-radius:6px;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:background .2s, transform .1s;border:none}
.btn-hero-primary:hover{background:var(--red-deep);color:#fff;transform:translateY(-1px)}
.btn-hero-secondary{background:transparent;color:#fff;border:2px solid rgba(255, 255, 255, .30);padding:10px 20px;border-radius:6px;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:background .2s, border-color .2s}
.btn-hero-secondary:hover{background:rgba(255, 255, 255, .08);border-color:#fff;color:#fff}

/* ---------- QUICK ACCESS ---------- */
.quick-access{background:var(--bg-alt);padding:40px 0;border-bottom:1px solid var(--border)}
.qa-grid{display:grid;grid-template-columns:repeat(7, minmax(0, 140px));gap:14px;justify-content:center}
.qa-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;background:#fff;border:1px solid var(--border);border-radius:10px;text-align:center;transition:transform .2s, box-shadow .2s, border-color .2s;color:var(--text)}
.qa-tile:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:var(--shadow-2);color:var(--red)}
.qa-tile .qa-ico{font-size:26px;line-height:1}
.qa-tile .qa-label{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:900px){.qa-grid{grid-template-columns:repeat(4, 1fr)}}
@media (max-width:480px){.qa-grid{grid-template-columns:repeat(2, 1fr);gap:10px}}

/* ---------- SECTION FRAME ---------- */
.section{padding:60px 0}
.section.tight{padding:32px 0 40px}
.section.alt{background:var(--bg-alt)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.6rem, 2.6vw, 2rem)}
.section-head p{max-width:680px;margin-top:8px;color:var(--text-muted);font-size:15px}
.section-head .see-all, .see-all{font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.section-head .see-all:hover, .see-all:hover{color:var(--red-deep)}

/* ---------- CASINO CARDS ---------- */
.casino-list{display:flex;flex-direction:column;gap:16px}
.casino-card{display:grid;grid-template-columns:60px 130px 1fr 240px 220px;align-items:center;gap:20px;padding:20px 24px;background:#fff;border:1px solid var(--border);border-radius:12px;transition:box-shadow .2s, border-color .2s, transform .2s;position:relative}
.casino-card:hover{border-color:var(--navy);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.casino-card.is-top{border-color:var(--red);border-width:2px;box-shadow:0 0 0 4px rgba(214, 40, 40, .08)}
.rank-badge{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:20px}
.casino-card.is-top .rank-badge{background:var(--red);box-shadow:0 4px 12px rgba(214, 40, 40, .35)}
.new-badge{background:var(--gold);color:var(--text);font-size:10px;font-weight:800;padding:3px 8px;border-radius:4px;letter-spacing:.05em;text-transform:uppercase}
.casino-thumb{display:flex;align-items:center;justify-content:center;height:70px}
.casino-thumb img{max-height:70px;max-width:130px;object-fit:contain}
.casino-info h3{font-size:1.05rem;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.casino-info .oc-flag{width:20px;height:20px;border-radius:3px}
.casino-info .rating{display:inline-flex;align-items:center;gap:4px;background:var(--gold);color:var(--text);padding:4px 10px;border-radius:6px;font-size:12px;font-weight:800;font-family:var(--font-head);margin-bottom:10px;margin-right:8px;letter-spacing:.02em;box-shadow:0 1px 2px rgba(0, 0, 0, .06)}
.casino-features{list-style:none;font-size:13px;color:var(--text-muted)}
.casino-features li{padding:2px 0 2px 18px;position:relative}
.casino-features li::before{content:"\2713";position:absolute;left:0;color:var(--success);font-weight:700}
.casino-bonus{text-align:center;padding:12px;background:var(--bg-alt);border-radius:8px}
.casino-bonus .bonus-label{display:block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.casino-bonus .bonus-amount{font-family:var(--font-head);font-weight:700;color:var(--text);font-size:15px;line-height:1.25}
.casino-cta{display:flex;flex-direction:column;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:6px;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;transition:all .2s;border:none;cursor:pointer}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-deep);color:#fff}
.btn-secondary{background:var(--bg-alt);color:var(--navy);border:1px solid var(--border)}
.btn-secondary:hover{background:#fff;border-color:var(--navy)}
.btn-block{width:100%}
.review-link{font-size:12.5px;font-weight:600;color:var(--navy);letter-spacing:.03em}
.review-link:hover{color:var(--red)}

@media (max-width:900px){
 .casino-card{grid-template-columns:44px 100px 1fr;grid-template-rows:auto auto;gap:12px 16px;padding:16px}
 .casino-bonus{grid-column:1/-1}
 .casino-cta{grid-column:1/-1;flex-direction:row;gap:12px}
 .casino-cta .btn{flex:1}
}
@media (max-width:520px){
 /* Full single-column stack, everything centered */
 .casino-card{grid-template-columns:1fr!important;grid-template-rows:none;gap:14px;padding:20px 16px;text-align:center;position:relative}
 .casino-card .rank-badge{position:absolute;top:12px;left:12px;width:34px;height:34px;font-size:14px;margin:0;grid-column:auto;grid-row:auto}
 .casino-card .casino-thumb{grid-column:1/-1;grid-row:auto;justify-content:center;align-items:center;min-width:0!important;height:auto;padding:6px 0 2px}
 .casino-card .casino-thumb img{max-height:64px;max-width:180px;margin:0 auto;display:block}
 .casino-card .casino-info{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
 .casino-card .casino-info h3{text-align:center;margin:0}
 .casino-card .casino-info .rating,
 .casino-card .casino-info .score-block,
 .casino-card .casino-info .badge,
 .casino-card .casino-info .tag{margin-left:auto;margin-right:auto}
 .casino-card .casino-features{display:inline-block;text-align:left;margin:2px auto 0;padding:0}
 .casino-card .casino-features li{padding-left:20px}
 .casino-card .payment-icons{justify-content:center;margin-left:auto;margin-right:auto}
 .casino-card .casino-bonus{grid-column:1/-1;text-align:center;width:100%}
 .casino-card .casino-cta{grid-column:1/-1;flex-direction:column;align-items:center;gap:8px;width:100%}
 .casino-card .casino-cta .btn{width:auto;min-width:200px;max-width:100%;margin:0 auto;display:inline-flex;align-items:center;justify-content:center}
 .casino-card .casino-cta .oc-terms,
 .casino-card .casino-cta small,
 .casino-card .casino-cta .fine{text-align:center;width:100%}
 /* Same treatment for the .oc-toplist card variant */
 .oc-toplist .casino-card .casino-cta .btn{width:auto;min-width:200px;max-width:100%;margin:0 auto}
}

/* ---------- PROMISE / MARKETS / ARTICLES ---------- */
.promise{background:var(--navy-deep);color:#fff;padding:60px 0;text-align:center}
.promise h2{color:#fff;margin-bottom:20px}
.promise .promise-body{max-width:780px;margin:0 auto;font-size:1.05rem;line-height:1.7;color:rgba(255, 255, 255, .85)}
.promise .promise-body strong{color:var(--gold-2)}

.market-tiles{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}
.market-tile{display:flex;align-items:center;gap:14px;padding:20px 22px;background:#fff;border:1px solid var(--border);border-radius:12px;transition:all .2s;color:var(--text)}
.market-tile:hover{border-color:var(--red);box-shadow:var(--shadow-2);transform:translateY(-2px);color:var(--text)}
.market-tile img{width:36px;height:36px;border-radius:4px;flex-shrink:0}
.market-tile .m-name{display:block;font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--text)}
.market-tile .m-sub{display:block;font-size:12px;color:var(--text-muted);margin-top:3px}
.market-tile .m-arrow{margin-left:auto;color:var(--red);font-weight:700;font-size:18px}
@media (max-width:900px){.market-tiles{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.market-tiles{grid-template-columns:1fr}}

.article-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px}
.article-grid.cols-4{grid-template-columns:repeat(4, 1fr)}
.article-grid.cols-5{grid-template-columns:repeat(5, 1fr)}
.article-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:all .2s;color:var(--text)}
.article-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--shadow-strong);color:var(--text)}
/* Card image box matches the source image aspect ratio (3:2 = 1536×1024)
   so the WHOLE image is visible AND fills the box — no crop, no side frame. */
.article-card .ac-image{aspect-ratio:3/2;height:auto;background:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--navy);padding:0}
.article-card .ac-image img{width:100%;height:100%;object-fit:contain;object-position:center;padding:0;margin:0;display:block;background:#fff}
.article-card .ac-image .ac-placeholder{padding:24px;text-align:center}
.article-card .ac-image .ac-placeholder{font-family:var(--font-head);font-weight:800;font-size:24px;color:var(--navy);opacity:.35;letter-spacing:.05em;text-transform:uppercase}
.article-card .ac-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.article-card .ac-tag{display:inline-block;align-self:flex-start;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);background:rgba(214, 40, 40, .08);padding:4px 10px;border-radius:4px}
.article-card .ac-tag.guide{color:var(--navy);background:rgba(0, 63, 136, .08)}
.article-card .ac-tag.payment{color:#059669;background:rgba(5, 150, 105, .08)}
.article-card .ac-tag.tool{color:#7c3aed;background:rgba(124, 58, 237, .08)}
.article-card h3{font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--text)}
.article-card .ac-meta{font-size:12px;color:var(--text-dim);margin-top:auto;padding-top:6px}
.article-card .ac-read{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red)}
@media (max-width:1200px){.article-grid.cols-5{grid-template-columns:repeat(3, 1fr)}}
@media (max-width:900px){.article-grid, .article-grid.cols-4, .article-grid.cols-5{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.article-grid, .article-grid.cols-4, .article-grid.cols-5{grid-template-columns:1fr}}

/* ---------- TRUST / COMPLAINT / BONUS / TEAM / FOOTER ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:22px}
.trust-block{padding:24px;background:#fff;border:1px solid var(--border);border-radius:12px}
.trust-block .t-ico{width:44px;height:44px;border-radius:8px;background:rgba(0, 63, 136, .08);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--navy);margin-bottom:14px}
.trust-block h3{color:var(--navy);font-size:1.05rem;margin-bottom:8px}
.trust-block p{font-size:14px;line-height:1.6}
@media (max-width:900px){.trust-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr}}

.complaint{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:linear-gradient(135deg, #fff 0%, var(--bg-alt) 100%);border:1px solid var(--border);border-radius:14px;padding:40px}
.complaint h2{margin-bottom:16px;color:var(--navy)}
.complaint p{margin-bottom:24px;line-height:1.65}
.complaint .cx-visual{background:var(--navy);color:#fff;border-radius:12px;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:220px}
.complaint .cx-visual .cx-ico{font-size:60px}
.complaint .cx-visual .cx-tagline{font-family:var(--font-head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;color:var(--gold-2);text-align:center}
@media (max-width:720px){.complaint{grid-template-columns:1fr;padding:28px}}

.bonus-types{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px}
.bonus-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px 22px;text-align:center;transition:all .2s}
.bonus-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-2)}
.bonus-card .b-ico{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg, var(--gold), var(--gold-2));display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--navy-deep)}
.bonus-card h3{color:var(--text);font-size:1.1rem;margin-bottom:10px}
.bonus-card p{font-size:13.5px;line-height:1.55;margin-bottom:14px}
.bonus-card .b-link{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red)}
@media (max-width:900px){.bonus-types{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.bonus-types{grid-template-columns:1fr}}

.team-stats{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-bottom:40px}
.team-stat{background:var(--navy);color:#fff;border-radius:12px;padding:24px;text-align:center}
.team-stat .ts-num{display:block;font-family:var(--font-head);font-weight:900;font-size:2.4rem;color:var(--gold);line-height:1}
.team-stat .ts-lbl{display:block;font-family:var(--font-head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-top:8px;color:rgba(255, 255, 255, .85)}
.team-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}
.team-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px;text-align:center}
.team-card .tc-avatar{width:90px;height:90px;border-radius:50%;margin:0 auto 14px;overflow:hidden;background:var(--bg-alt);border:3px solid var(--gold)}
.team-card .tc-avatar img{width:100%;height:100%;object-fit:cover}
.team-card h3{font-size:1.15rem;margin-bottom:4px}
.team-card .tc-role{display:block;font-family:var(--font-head);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:12px}
.team-card p{font-size:14px;line-height:1.55;margin-bottom:12px}
.team-card .tc-link{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
@media (max-width:900px){.team-stats{grid-template-columns:repeat(2, 1fr)}.team-grid{grid-template-columns:1fr}}

.site-footer{background:var(--navy-deep);color:rgba(255, 255, 255, .75);padding:60px 0 30px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-grid h4{color:#fff;font-size:14px;font-family:var(--font-head);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:8px}
.footer-grid a{color:rgba(255, 255, 255, .75);font-size:14px}
.footer-grid a:hover{color:var(--gold)}
.footer-brand p{color:rgba(255, 255, 255, .75);font-size:14px;line-height:1.6;margin-bottom:20px}
.footer-brand .fb-logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-brand .fb-logo img{height:48px;width:auto;max-width:100%;display:block;flex-shrink:0}
.footer-social{display:flex;gap:10px;margin-top:12px}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255, 255, 255, .10);display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff}
.footer-social a:hover{background:var(--red)}
.newsletter{padding:24px;background:rgba(255, 255, 255, .06);border-radius:12px;margin-bottom:30px;border:1px solid rgba(255, 255, 255, .10)}
.newsletter h4{color:#fff;font-family:var(--font-head);font-size:16px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.newsletter p{color:rgba(255, 255, 255, .75);font-size:14px;margin-bottom:14px;line-height:1.55}
.newsletter form{display:flex;gap:8px;max-width:480px}
.newsletter input{flex:1;padding:11px 14px;border:1px solid rgba(255, 255, 255, .15);background:rgba(255, 255, 255, .05);color:#fff;border-radius:6px;font-family:inherit}
.newsletter input::placeholder{color:rgba(255, 255, 255, .5)}
.newsletter button{background:var(--red);color:#fff;padding:11px 22px;border-radius:6px;font-family:var(--font-head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;border:none}
.newsletter button:hover{background:var(--red-deep)}
.footer-bottom{border-top:1px solid rgba(255, 255, 255, .10);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255, 255, 255, .55)}
.footer-bottom .fb-disc{max-width:640px;line-height:1.55}
.footer-bottom .fb-disc a{color:var(--gold-2)}
.age-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255, 255, 255, .10);color:#fff;font-weight:700;font-size:12px;font-family:var(--font-head);letter-spacing:.05em}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.newsletter form{flex-direction:column}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- LEGACY SUPPORT (market subpages, blog posts, etc.) ---------- */
.content{padding:40px 0}
.content section{margin-bottom:30px}
.section-title, .pu-section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:24px 0 20px;flex-wrap:wrap}
.section-title h2, .pu-section-title h2{font-size:1.8rem;color:var(--text)}

.hero, .editorial-hero, .page-hero, .article-hero{background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);color:#fff;padding:60px 20px 70px;text-align:center}
.hero h1, .editorial-hero h1, .page-hero h1, .article-hero h1{color:#fff}
.hero p, .editorial-hero p, .page-hero p, .article-hero p{color:rgba(255, 255, 255, .85)}
.hero .grad, .editorial-hero .grad, .page-hero .grad, .article-hero .grad{background:linear-gradient(90deg, var(--gold), var(--red-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{display:inline-block;font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin-bottom:16px}
.lede{max-width:680px;margin:0 auto 20px;font-size:1.1rem;line-height:1.55}
.fact-strip{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.fact-strip .fact{background:rgba(255, 255, 255, .08);border:1px solid rgba(255, 255, 255, .14);padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:16px;margin-top:24px;max-width:800px;margin-inline:auto}
.stat-row .stat, .stat-row>div{padding:14px}
.stat-row .num{display:block;font-family:var(--font-head);font-weight:800;font-size:1.8rem;color:var(--gold)}
.stat-row .lbl{display:block;font-family:var(--font-head);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255, 255, 255, .85);margin-top:4px}

.editorial-columns{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin:40px 0}
.editorial-columns .side{position:sticky;top:80px;align-self:start;padding:20px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px}
.editorial-columns .side h3{color:var(--navy);font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
@media (max-width:900px){.editorial-columns{grid-template-columns:1fr}.editorial-columns .side{position:static}}

.blog-grid, .oc-toplist{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;margin:20px 0}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s;color:var(--text)}
.blog-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--shadow-strong)}
.blog-card .b-img{height:170px;background:linear-gradient(135deg, var(--bg-soft), var(--bg-alt))}
.blog-card .b-img img{width:100%;height:100%;object-fit:cover}
.blog-card .b-body{padding:18px 20px}
.blog-card .tag{display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);background:rgba(214, 40, 40, .08);padding:4px 10px;border-radius:4px;margin-bottom:10px}
.blog-card .tag.guide{color:var(--navy);background:rgba(0, 63, 136, .08)}
.blog-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--text)}
.blog-card .meta{font-size:12px;color:var(--text-dim);margin-top:6px}
@media (max-width:900px){.blog-grid, .oc-toplist{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.blog-grid, .oc-toplist{grid-template-columns:1fr}}









@media (max-width:720px){
 
 
}

.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border);margin:20px 0}
table{width:100%;border-collapse:collapse;background:#fff}
th, td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
th{background:var(--bg-alt);font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg-alt)}

.toc{background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin:20px 0}
.toc .toc-title{font-family:var(--font-head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:12.5px;color:var(--navy);margin-bottom:12px}
.toc ol{list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;padding:4px 0;font-size:14px}
.toc li::before{content:counter(toc) ". ";color:var(--red);font-weight:700}
.toc a{color:var(--text)}
.toc a:hover{color:var(--red)}

.callout{padding:18px 22px;border-radius:10px;background:rgba(0, 63, 136, .06);border-left:4px solid var(--navy);margin:20px 0}
.callout.is-warning{background:rgba(255, 195, 0, .10);border-left-color:var(--gold)}
.callout.is-danger{background:rgba(214, 40, 40, .06);border-left-color:var(--red)}

.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.pros-cons>div{padding:20px;border-radius:10px;border:1px solid var(--border)}
.pros-cons .pros{background:rgba(22, 163, 74, .05);border-color:rgba(22, 163, 74, .2)}
.pros-cons .cons{background:rgba(214, 40, 40, .04);border-color:rgba(214, 40, 40, .2)}
.pros-cons h4{font-size:14px;margin-bottom:10px;letter-spacing:.05em;text-transform:uppercase}
.pros-cons .pros h4{color:var(--success)}
.pros-cons .cons h4{color:var(--red)}
.pros-cons ul{list-style:none}
.pros-cons li{padding:4px 0 4px 20px;position:relative;font-size:14px;color:var(--text-muted)}
.pros-cons .pros li::before{content:"\2713";position:absolute;left:0;color:var(--success);font-weight:700}
.pros-cons .cons li::before{content:"\2717";position:absolute;left:0;color:var(--red);font-weight:700}
@media (max-width:520px){.pros-cons{grid-template-columns:1fr}}

.country-rows{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin:20px 0}
.country-rows a{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:10px;color:var(--text);transition:all .2s}
.country-rows a:hover{border-color:var(--red);box-shadow:var(--shadow-2)}
.country-rows a img{width:30px;height:30px;border-radius:3px}
.country-rows .c-name{display:block;font-family:var(--font-head);font-weight:700;letter-spacing:.03em;font-size:14px;text-transform:uppercase}
.country-rows .c-sub{display:block;font-size:12px;color:var(--text-muted);margin-top:3px}
.country-rows .c-arrow{margin-left:auto;color:var(--red);font-weight:700}
@media (max-width:900px){.country-rows{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.country-rows{grid-template-columns:1fr}}

.pu-promo-strip{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0}
.pu-promo-strip .container{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--text-muted);align-items:center}
.pu-promo-strip .item{display:inline-flex;align-items:center;gap:6px}
.pu-promo-strip .yellow-dot{display:inline-block;width:8px;height:8px;background:var(--gold);border-radius:50%}
.pu-promo-strip .promo-howto{margin-left:auto;color:var(--red);font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}

.pu-stat-panels{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin:30px 0}
.pu-stat-panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px}
.sp-figure .sp-num{display:block;font-family:var(--font-head);font-weight:900;font-size:2.5rem;color:var(--navy);line-height:1}
.sp-figure .sp-num em{color:var(--red);font-style:normal;font-size:1.6rem}
.sp-figure .sp-lbl{display:block;font-family:var(--font-head);font-weight:700;color:var(--text);letter-spacing:.02em;margin-top:6px;font-size:14px}
.sp-figure .sp-sub{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
.sp-collage{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sp-collage .sp-chip{display:inline-flex;padding:4px 8px;background:var(--bg-alt);border:1px solid var(--border);border-radius:6px;transform:rotate(var(--r, 0deg))}
.sp-collage .sp-chip img{max-height:20px}
.sp-flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.flag-diamond{display:inline-flex;padding:4px;background:var(--bg-alt);border:1px solid var(--border);border-radius:6px}
.flag-diamond img{width:24px;height:24px;border-radius:3px}
.sp-motif{margin-top:14px;opacity:.7}
@media (max-width:900px){.pu-stat-panels{grid-template-columns:1fr}}

.win-ticker{background:rgba(0, 63, 136, .05);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text-muted);margin:12px 0;overflow:hidden}
.win-track{white-space:nowrap;display:flex;gap:20px}

.js-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.js-clamp.open{display:block;-webkit-line-clamp:unset}
.clamp-toggle{background:none;border:none;color:var(--red);font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 0;cursor:pointer}

.hidden, [hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---------- MARKET STRIP (redesigned) ---------- */
.markets-strip{padding:36px 0 44px;background:var(--bg)}
.ms-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.ms-head h2{font-size:clamp(1.5rem, 2.4vw, 1.9rem);margin-top:4px}
.ms-kicker{display:inline-block;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);background:rgba(214, 40, 40, .08);padding:4px 10px;border-radius:999px;margin-bottom:6px}
.market-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.market-card{display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s;color:var(--text);position:relative}
.market-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--navy);transition:background .2s}
.market-card:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:var(--shadow-2);color:var(--text)}
.market-card:hover::before{background:var(--red)}
.mc-flag{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 18px 0 22px;background:var(--bg-alt);border-right:1px solid var(--border)}
.mc-flag img{width:44px;height:44px;border-radius:6px;box-shadow:0 1px 3px rgba(0, 0, 0, .08)}
.mc-body{flex:1;padding:14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mc-body h3{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:.01em;margin:0}
.mc-tags{font-size:12px;color:var(--text-muted);margin:0;line-height:1.4}
.mc-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:8px;border-top:1px dashed var(--border);flex-wrap:wrap}
.mc-count{font-size:11.5px;color:var(--text-dim);font-weight:600;letter-spacing:.02em}
.mc-cta{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
@media (max-width:900px){.market-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:520px){.market-grid{grid-template-columns:1fr}}


/* ---------- Casino card rating descriptor + claimed-today (JS-injected) ---------- */
.oc-score-desc{
 display:inline-flex;align-items:center;gap:4px;
 padding:4px 10px;border-radius:6px;
 background:rgba(22, 163, 74, .10);color:var(--success);
 font-family:var(--font-head);font-size:11.5px;font-weight:700;
 letter-spacing:.06em;text-transform:uppercase;
 vertical-align:middle;margin-bottom:10px;
 border:1px solid rgba(22, 163, 74, .22);
}
.oc-score-desc::before{content:"●";font-size:8px;line-height:1;color:var(--success)}
/* Ratings 9.0-9.4 land as "Very good"/"Great", desaturate a bit */
.casino-card:has(.rating:not(:empty)) .oc-score-desc{}
/* Fallback for "Good" score (< 8.5), subtle navy pill */
.oc-claimed{
 display:inline-flex;align-items:center;gap:4px;
 font-size:11.5px;color:var(--text-muted);font-weight:600;
 margin-top:6px;letter-spacing:.02em;
}


/* ---------- Market/article/page hero compacting + breadcrumb fix (above-the-fold) ---------- */
.page-hero, .editorial-hero, .article-hero{
 background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-2) 100%)!important;
 color:#fff!important;
 padding:22px 20px 28px!important;
 text-align:left!important;
 position:relative!important;
 overflow:hidden!important;
}
.page-hero .container, .editorial-hero .container, .article-hero .container{position:relative;text-align:left}
.page-hero h1, .editorial-hero h1, .article-hero h1{
 color:#fff!important;
 font-size:clamp(1.4rem, 2.6vw, 2rem)!important;
 font-weight:800!important;
 line-height:1.15!important;
 letter-spacing:-.01em!important;
 margin:6px 0 8px!important;
 display:flex;
 align-items:center;
 gap:10px;
 flex-wrap:wrap;
}
.page-hero h1 img.flag-inline, .editorial-hero h1 img.flag-inline, .article-hero h1 img.flag-inline{
 width:26px;height:26px;border-radius:4px;box-shadow:0 1px 3px rgba(0, 0, 0, .2);flex-shrink:0
}
.page-hero .grad, .editorial-hero .grad, .article-hero .grad{
 background:linear-gradient(90deg, var(--gold), var(--red-2));-webkit-background-clip:text;background-clip:text;color:transparent;
 font-size:.85em
}
.page-hero .breadcrumbs, .editorial-hero .breadcrumbs, .article-hero .breadcrumbs,
.page-hero .crumbs, .editorial-hero .crumbs, .article-hero .crumbs{
 font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255, 255, 255, .55);margin-bottom:2px
}
.page-hero .breadcrumbs a, .editorial-hero .breadcrumbs a, .article-hero .breadcrumbs a,
.page-hero .crumbs a, .editorial-hero .crumbs a, .article-hero .crumbs a{color:var(--gold-2)!important}
.page-hero .breadcrumbs a:hover, .editorial-hero .breadcrumbs a:hover, .article-hero .breadcrumbs a:hover{color:#fff!important}
.page-hero .breadcrumbs .sep, .editorial-hero .breadcrumbs .sep{margin:0 4px;color:rgba(255, 255, 255, .35)}
.page-hero .lead, .editorial-hero .lede, .article-hero .lede, .page-hero .lede{color:rgba(255, 255, 255, .85)!important;font-size:.95rem!important;line-height:1.5!important;max-width:820px;margin:0!important}

.page-hero .blob, .editorial-hero .blob{display:none!important}
.page-hero .stat-row, .editorial-hero .stat-row{display:none!important}
.page-hero .fact-strip, .editorial-hero .fact-strip{display:none!important}
.page-hero .hero-ctas, .editorial-hero .hero-ctas{margin-top:12px}
.page-hero .kicker, .editorial-hero .kicker, .article-hero .kicker{
 display:inline-block;font-size:10px;padding:2px 8px;margin-bottom:6px;color:var(--gold-2);
 background:rgba(255, 255, 255, .08);border-radius:999px;border:1px solid rgba(255, 255, 255, .14)
}
/* also nail the tight article hero on posts */
.article-hero .kicker{font-size:11px}
/* list heading directly under hero, reduce top margin so casino list surfaces */
.list-heading{margin-top:20px!important;margin-bottom:16px!important;font-size:1.3rem}
/* also compact the standalone .hero if any market uses it */
.hero:not(.ag-hero){padding:22px 20px 28px!important}
.hero:not(.ag-hero) h1{font-size:clamp(1.4rem, 2.6vw, 2rem)!important;margin-bottom:8px!important}

/* Mobile: even tighter */
@media (max-width:720px){
 .page-hero, .editorial-hero, .article-hero{padding:16px 20px 22px!important}
 .page-hero h1, .editorial-hero h1, .article-hero h1{font-size:1.15rem!important}
 .page-hero .lead, .editorial-hero .lede, .article-hero .lede{-webkit-line-clamp:2;font-size:.85rem!important}
 .page-hero h1 img.flag-inline{width:20px;height:20px}
}


/* ---------- H1 domain suffix inline pill ---------- */
.h1-domain{
 font-family:var(--font-head);
 font-size:.6em;
 font-weight:700;
 letter-spacing:.03em;
 color:var(--gold-2);
 background:rgba(255, 255, 255, .10);
 border:1px solid rgba(255, 255, 255, .16);
 padding:3px 10px;
 border-radius:999px;
 text-transform:lowercase;
 vertical-align:middle;
 white-space:nowrap;
}
@media (max-width:520px){.h1-domain{font-size:.55em;padding:2px 8px}}

/* ---------- Legacy site-footer (used by market pages: h3 headings, different structure) ---------- */
.site-footer .container{position:relative}
.site-footer .footer-grid h3{
 color:#fff!important;
 font-family:var(--font-head)!important;
 font-size:13px!important;
 letter-spacing:.09em;
 text-transform:uppercase;
 font-weight:800;
 margin-bottom:14px;
 padding:0;
 border:0;
}
.site-footer .footer-grid p{color:rgba(255, 255, 255, .75)!important;font-size:14px;line-height:1.55;margin:0 0 12px}
.site-footer .footer-grid ul{list-style:none;padding:0;margin:0}
.site-footer .footer-grid li{margin-bottom:8px;line-height:1.35}
.site-footer .footer-grid a{color:rgba(255, 255, 255, .82)!important;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .15s}
.site-footer .footer-grid a:hover{color:var(--gold)!important}
.site-footer .footer-grid .flag-ico-img{width:20px;height:14px;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255, 255, 255, .15)}
.site-footer .footer-bottom{border-top:1px solid rgba(255, 255, 255, .10);padding-top:22px;margin-top:8px;display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:rgba(255, 255, 255, .55);flex-wrap:wrap}
.site-footer .responsible-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255, 255, 255, .10);color:#fff;font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1px solid rgba(255, 255, 255, .14)}

/* footer logo (image + wordmark inline) */
.site-footer .logo, .site-footer .footer-logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff!important;text-transform:uppercase;margin-bottom:14px;letter-spacing:.02em;background:none}
/* Footer uses the horizontal white-wordmark lockup — let it render at natural aspect ratio */
.site-footer .logo img, .site-footer .footer-logo img,
.site-footer .fb-logo img{height:48px;width:auto!important;max-width:100%;display:block}
.site-footer .logo span, .site-footer .footer-logo span{color:#fff!important;line-height:1;white-space:nowrap}













@media (max-width:720px){
 
 
 
}


/* ==================================================================
 MARKET SUBNAV, v4 single-line slim horizontal bar
 ================================================================== */
.market-subnav{
 display:flex;
 align-items:center;
 gap:0;
 margin:12px 0 20px;
 padding:0;
 background:transparent;
 border:0;
 border-top:1px solid var(--border);
 border-bottom:1px solid var(--border);
 overflow-x:auto;
 scrollbar-width:none;
 white-space:nowrap;
 height:42px;
}
.market-subnav::-webkit-scrollbar{display:none}
.market-subnav a{
 display:inline-flex;
 align-items:center;
 gap:0;
 padding:0 16px;
 height:100%;
 color:var(--text-muted);
 font-family:var(--font-head);
 font-size:11.5px;
 font-weight:700;
 letter-spacing:.10em;
 text-transform:uppercase;
 text-decoration:none;
 border:0;
 border-radius:0;
 background:transparent;
 transition:color .15s, background .15s;
 position:relative;
}
.market-subnav a + a{border-left:1px solid var(--border)}
.market-subnav a:hover{color:var(--text);background:var(--bg-alt)}
.market-subnav a.active{
 color:var(--red);
 background:transparent;
 font-weight:800;
}
.market-subnav a.active::after{
 content:"";
 position:absolute;
 left:0;right:0;bottom:-1px;
 height:2px;
 background:var(--red);
}
@media (max-width:720px){
 .market-subnav{height:38px}
 .market-subnav a{padding:0 12px;font-size:10.5px;letter-spacing:.08em}
}


/* ==================================================================
 ARTICLE PAGES (news + guides + payout log posts)
 ================================================================== */
.article-main{padding:20px 0 60px}
.article-layout{display:grid;grid-template-columns:1fr;gap:40px;max-width:820px;margin:0 auto}
.article-content{max-width:820px}
.article-content > .toc{margin:0 0 30px}
.article-body-section{margin:32px 0}
.article-body-section h2{font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--red);display:inline-block}
.article-body-section h3{font-size:1.1rem;margin:20px 0 8px;color:var(--navy)}
.article-body-section p{color:var(--text-muted);line-height:1.7;font-size:1.0rem;margin-bottom:14px}
.article-body-section ul, .article-body-section ol{margin:14px 0 14px 20px;color:var(--text-muted);line-height:1.7}
.article-body-section li{margin-bottom:6px}
.article-body-section strong{color:var(--text)}
.article-body-section a{color:var(--navy);border-bottom:1px solid rgba(0, 63, 136, .25);transition:color .15s, border-color .15s}
.article-body-section a:hover{color:var(--red);border-bottom-color:var(--red)}
.article-body-section .callout{background:rgba(0, 63, 136, .06);border-left:4px solid var(--navy);padding:16px 20px;border-radius:0 8px 8px 0;margin:18px 0;color:var(--text)}
.article-body-section .callout.is-warning{background:rgba(255, 195, 0, .12);border-left-color:var(--gold)}
.article-body-section .callout.is-danger{background:rgba(214, 40, 40, .06);border-left-color:var(--red)}
.article-body-section .callout p{margin:0;color:var(--text)}
.article-body-section .table-wrap{margin:18px 0}

.article-meta{display:flex;align-items:center;gap:10px;margin-top:14px;color:rgba(255, 255, 255, .75);font-size:13px;flex-wrap:wrap}
.article-meta .am-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;background:rgba(255, 255, 255, .15)}
.article-meta .am-author{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600}
.article-meta .am-dot{color:rgba(255, 255, 255, .35)}
.article-meta .am-date, .article-meta .am-read{color:rgba(255, 255, 255, .75)}

.faq-accordion{display:flex;flex-direction:column;gap:8px;margin-top:14px}
/* NOTE: base .faq-item styles live in the polished block further down (~line 1115).
   The old plain-text +/− rules were removed to prevent them cascading over the circle button. */

.author-box{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;margin:40px 0 30px}
.author-box .ab-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid var(--gold)}
.author-box .ab-role{display:block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:2px}
.author-box .ab-name{font-size:1.15rem;margin-bottom:6px;color:var(--text)}
.author-box p{font-size:14px;line-height:1.6;color:var(--text-muted);margin-bottom:6px}
.author-box .ab-link{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.author-box .ab-link:hover{color:var(--red)}

.related-posts{margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}
.related-posts h3{font-family:var(--font-head);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.rp-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.rp-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;color:var(--text);transition:all .2s}
.rp-card:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:var(--shadow-2);color:var(--text)}
.rp-card .rp-tag{font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.rp-card .rp-title{font-family:var(--font-head);font-size:14px;font-weight:700;line-height:1.35;color:var(--text)}
@media (max-width:720px){.rp-grid{grid-template-columns:1fr}}

/* Related-grid variant (site-wide, used on ~242 pages) */
.related-title{font-family:var(--font-head);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:var(--navy);margin:34px 0 14px;padding-top:24px;border-top:1px solid var(--border)}
.related-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-bottom:30px}
.related-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none;transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.related-card:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:var(--shadow-2);color:var(--text)}
.related-card .r-tag{display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.related-card .r-title{display:block;font-family:var(--font-head);font-size:14px;font-weight:700;line-height:1.35;color:var(--text)}
@media (max-width:900px){.related-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.related-grid{grid-template-columns:1fr}}

/* Footer flag icons, enforce sizing across all pages */
.site-footer .footer-grid .flag-ico-img,
.site-footer .footer-grid a img.flag-ico-img,
.site-footer .footer-grid li img{width:20px!important;height:14px!important;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255, 255, 255, .15);object-fit:cover;vertical-align:middle}
.site-footer .footer-grid li a{display:inline-flex!important;align-items:center;gap:8px}

/* TOC expand/collapse, button absolutely positioned in top-right */
.toc{position:relative;padding-right:56px!important}
.toc .toc-toggle{position:absolute!important;top:14px;right:14px;background:#fff;border:1px solid var(--border);color:var(--navy);cursor:pointer;width:34px;height:34px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:8px;padding:0;transition:background .15s, border-color .15s, color .15s;z-index:2}
.toc .toc-toggle:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.toc .toc-toggle svg{width:18px;height:18px;transition:transform .22s ease;display:block}
.toc.is-collapsed .toc-toggle svg{transform:rotate(-90deg)}
.toc.is-collapsed{padding-bottom:16px!important}
.toc.is-collapsed ol, .toc.is-collapsed ul{display:none!important}
.toc ol, .toc ul{margin-top:12px}
/* legacy .toc-head wrapper (from old JS pass), flatten, arrow goes top-right anyway */
.toc .toc-head{display:block;margin:0}

/* Casino card layout hardening, prevent thumb column collapse */
.casino-list .casino-card{grid-template-columns:60px 130px minmax(0, 1fr) 240px 220px}
.casino-list .casino-thumb{min-width:130px}
.casino-list .casino-thumb img{display:block;margin:0 auto}
@media (max-width:900px){
 .casino-list .casino-card{grid-template-columns:44px 100px minmax(0, 1fr)}
 .casino-list .casino-thumb{min-width:100px}
}

/* Demo hub, game showcase grid (Lucky Slots, Roulette, Blackjack, Plinko, Real) */
.demo-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px;margin:8px 0 4px}
.demo-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;color:var(--text);text-decoration:none;transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease}
.demo-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 18px 40px -20px rgba(0, 63, 136, .35), 0 6px 14px rgba(214, 40, 40, .10);color:var(--text)}
.demo-card .dc-visual{position:relative;height:140px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #343434 0%, #232428 100%);border-bottom:1px solid var(--border);overflow:hidden}
.demo-card .dc-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 180px at 50% 130%, rgba(214, 40, 40, .16), transparent 70%);pointer-events:none}
.demo-card .dc-ico{position:relative;font-size:64px;line-height:1;filter:drop-shadow(0 6px 12px rgba(0, 63, 136, .18))}
.demo-card .dc-badge{position:absolute;top:12px;left:12px;font-family:var(--font-head);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255, 255, 255, .85);color:var(--navy);border:1px solid var(--border);backdrop-filter:blur(4px)}
.demo-card.slot .dc-visual{background:linear-gradient(135deg, #2a2a2a 0%, #232428 100%)}
.demo-card.slot .dc-badge{background:var(--red);color:#fff;border-color:transparent}
.demo-card.wheel .dc-visual{background:linear-gradient(135deg, #343434 0%, #343434 100%)}
.demo-card.wheel .dc-badge{background:var(--navy);color:#fff;border-color:transparent}
.demo-card.table .dc-visual{background:linear-gradient(135deg, #232428 0%, #343434 100%)}
.demo-card.table .dc-badge{background:#2b4570;color:#fff;border-color:transparent}
.demo-card.new .dc-visual{background:linear-gradient(135deg, #232428 0%, #232428 100%)}
.demo-card.new .dc-badge{background:var(--gold);color:var(--text);border-color:transparent}
.demo-card.real .dc-visual{background:linear-gradient(135deg, #b38d2f 0%, #001e42 100%)}
.demo-card.real .dc-ico{filter:drop-shadow(0 6px 12px rgba(0, 0, 0, .35))}
.demo-card.real .dc-badge{background:var(--gold);color:var(--text);border-color:transparent}
.demo-card .dc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.demo-card .dc-body h3{font-family:var(--font-head);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--navy)}
.demo-card .dc-body p{font-size:.9rem;line-height:1.5;color:var(--text-muted);margin:0;flex:1}
.demo-card .dc-meta{display:flex;flex-wrap:wrap;gap:6px}
.demo-card .dc-meta .dc-tag{font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--bg-alt);border:1px solid var(--border);padding:3px 8px;border-radius:6px}
.demo-card .dc-cta{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--red);letter-spacing:.02em}
.demo-card .dc-cta span{transition:transform .18s ease;display:inline-block}
.demo-card:hover .dc-cta span{transform:translateX(4px)}
@media (max-width:960px){.demo-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}.demo-card .dc-visual{height:120px}.demo-card .dc-ico{font-size:52px}}
@media (max-width:540px){.demo-grid{grid-template-columns:1fr;gap:14px}.demo-card .dc-visual{height:110px}}

/* Bonus/toplist cards, vertical stacked layout when inside .oc-toplist grid */
.oc-toplist{grid-template-columns:repeat(2, minmax(0, 1fr))!important;gap:22px}
.oc-toplist .casino-card{display:flex!important;flex-direction:column;align-items:stretch;grid-template-columns:none;gap:0;padding:0;overflow:hidden;position:relative;text-align:center;height:100%}
.oc-toplist .casino-card .rank-badge{position:absolute;top:14px;left:14px;z-index:3;margin:0;width:36px;height:36px;font-size:15px}
.oc-toplist .casino-card .casino-thumb{display:flex;align-items:center;justify-content:center;height:120px;padding:20px 20px 8px;background:linear-gradient(180deg, #232428 0%, #ffffff 100%);border-bottom:1px solid var(--border);min-width:0;width:100%}
.oc-toplist .casino-card .casino-thumb img{max-height:80px;max-width:180px;object-fit:contain;margin:0 auto}
.oc-toplist .casino-card .casino-info{padding:18px 20px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.oc-toplist .casino-card .casino-info h3{font-family:var(--font-head);font-size:1.15rem;font-weight:800;color:var(--navy);margin:0;text-align:center;justify-content:center}
.oc-toplist .casino-card .casino-info .rating{margin:0}
.oc-toplist .casino-card .oc-accepts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:4px;font-size:12px;color:var(--text-muted)}
.oc-toplist .casino-card .oc-accepts .oc-accepts-lbl{font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-right:2px}
.oc-toplist .casino-card .oc-accepts img{width:20px!important;height:14px!important;border-radius:2px;box-shadow:0 0 0 1px rgba(0, 0, 0, .08);object-fit:cover;display:inline-block;vertical-align:middle}
.oc-toplist .casino-card .casino-bonus{margin:0;padding:14px 20px;background:linear-gradient(180deg, #232428 0%, #fff 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;border-radius:0}
.oc-toplist .casino-card .casino-bonus .bonus-label{display:block;font-family:var(--font-head);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.oc-toplist .casino-card .casino-bonus .bonus-amount{display:block;font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1rem;line-height:1.3}
.oc-toplist .casino-card .casino-cta{padding:14px 20px 18px;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.oc-toplist .casino-card .casino-cta .btn{width:100%;font-family:var(--font-head);font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:12px 16px;font-size:13px}
.oc-toplist .casino-card .casino-cta .oc-terms{font-size:11.5px;color:var(--text-muted);text-align:center}
.oc-toplist .casino-card.is-top{border:2px solid var(--red);box-shadow:0 0 0 5px rgba(214, 40, 40, .08), 0 12px 30px -12px rgba(214, 40, 40, .25)}
.oc-toplist .casino-card.is-top .rank-badge{background:var(--red);box-shadow:0 4px 12px rgba(214, 40, 40, .4)}
@media (max-width:720px){.oc-toplist{grid-template-columns:1fr!important;gap:16px}.oc-toplist .casino-card .casino-thumb{height:100px}.oc-toplist .casino-card .casino-thumb img{max-height:64px;max-width:150px}}

/* Footer trust bar, badge row above copyright */
.site-footer .footer-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;padding:20px 0 18px;margin-top:6px;border-top:1px solid rgba(255, 255, 255, .10)}
.site-footer .footer-trust .ft-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255, 255, 255, .04);border:1px solid rgba(255, 255, 255, .10);border-radius:999px;font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255, 255, 255, .82);line-height:1;white-space:nowrap;transition:background .15s, border-color .15s, color .15s}
.site-footer .footer-trust .ft-badge:hover{background:rgba(255, 255, 255, .08);border-color:rgba(255, 195, 0, .35);color:#fff}
.site-footer .footer-trust .ft-ico{width:15px;height:15px;flex-shrink:0;color:var(--gold-2);stroke:currentColor}
.site-footer .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:18px;margin-top:0;border-top:1px solid rgba(255, 255, 255, .08);font-size:12.5px;color:rgba(255, 255, 255, .55);line-height:1.55}
.site-footer .footer-bottom span:last-child{max-width:640px;text-align:right}
@media (max-width:720px){
 .site-footer .footer-trust{gap:6px 8px;padding:16px 0 14px}
 .site-footer .footer-trust .ft-badge{padding:6px 11px;font-size:10.5px}
 .site-footer .footer-trust .ft-ico{width:13px;height:13px}
 .site-footer .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}
 .site-footer .footer-bottom span:last-child{text-align:left;max-width:100%}
}

/* Casino card, payment icons row (fix vertical stack bug) */
.casino-card .payment-icons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:6px;max-width:220px}
.casino-card .payment-icons img{height:20px;width:auto;max-width:36px;object-fit:contain;opacity:.85;filter:grayscale(.15)}
.casino-card .payment-icons img:hover{opacity:1;filter:none}
.casino-list .casino-card{align-items:center}
@media (max-width:900px){
 .casino-card .payment-icons{max-width:100%}
}

/* Homepage featured shortcuts (SE + any market using .featured-cards) */
.featured-cards{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px;margin:8px 0 32px}
.feat-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 22px 22px;transition:transform .22s, border-color .22s, box-shadow .22s;overflow:hidden}
.feat-card:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:0 18px 40px -20px rgba(0, 63, 136, .35)}
.feat-card.is-hot{border:2px solid var(--red);box-shadow:0 0 0 5px rgba(214, 40, 40, .06), 0 12px 30px -16px rgba(214, 40, 40, .28)}
.feat-card.is-hot:hover{border-color:var(--red)}
.feat-flame{position:absolute;top:14px;right:14px;font-size:22px;line-height:1;filter:drop-shadow(0 2px 6px rgba(214, 40, 40, .35))}
.feat-thumb{display:flex;align-items:center;justify-content:center;height:120px;margin-bottom:14px;background:linear-gradient(180deg, #232428 0%, #ffffff 100%);border-radius:10px;padding:14px}
.feat-thumb img{max-height:96px;max-width:180px;width:auto;height:auto;object-fit:contain}
.feat-card h3{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;line-height:1.3;margin:0 0 12px;text-align:center}
.feat-list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.feat-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.35;color:var(--text)}
.feat-list li .ico{flex-shrink:0;font-size:16px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-alt);border-radius:6px}
.feat-card .btn{width:100%;font-family:var(--font-head);font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:12px 16px;font-size:13px;margin-top:auto}
@media (max-width:900px){.featured-cards{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}.feat-thumb{height:100px}.feat-thumb img{max-height:78px;max-width:150px}}
@media (max-width:560px){.featured-cards{grid-template-columns:1fr;gap:14px}}

/* Bluish tinted background on all image thumbs (list & feature cards, all markets) */
.casino-list .casino-thumb,
.oc-toplist .casino-card .casino-thumb,
.feat-thumb{
 background:linear-gradient(135deg, #343434 0%, #343434 55%, #4f4f4f 100%)!important;
 border-radius:10px;
 box-shadow:inset 0 0 0 1px rgba(0, 63, 136, .08);
 padding:8px 12px;
}
.casino-list .casino-thumb img,
.oc-toplist .casino-card .casino-thumb img,
.feat-thumb img{
 mix-blend-mode:normal;
 filter:drop-shadow(0 1px 2px rgba(0, 63, 136, .12));
}
/* Give the desktop 5-col row a bit more breathing room around the tinted panel */
@media (min-width:901px){
 .casino-list .casino-thumb{height:80px;margin:4px 0}
 .casino-list .casino-thumb img{max-height:64px}
}

/* MOBILE: single-column centered casino card. Everything stacked, thumb + text + bonus + CTA
   all centered horizontally. Compact hero kept so the button still lands close to the fold. */
@media (max-width:720px){
 /* 1) tighter hero on mobile - saves ~60-80px vertical */
 .page-hero, .editorial-hero, .article-hero{padding:14px 16px 18px!important}
 .page-hero .container, .editorial-hero .container, .article-hero .container{padding:0!important}
 .page-hero .breadcrumbs{font-size:11px;margin-bottom:6px}
 .page-hero h1{font-size:clamp(1.15rem, 4.5vw, 1.5rem)!important;line-height:1.15!important;margin-bottom:6px!important}
 .page-hero h1 .flag-inline{width:20px;height:14px;vertical-align:baseline}
 .page-hero h1 .h1-domain{font-size:.6em;padding:2px 8px}
 .page-hero .lead{font-size:.85rem!important;line-height:1.35!important;margin-bottom:0!important;-webkit-line-clamp:2}
 .page-hero .blob, .page-hero::before{display:none}
 /* 2) tighter list heading */
 .list-heading{font-size:1rem!important;margin:14px 0 12px!important;line-height:1.3}
 /* 3) tighter market subnav */
 .market-subnav{padding:0!important}
 .market-subnav .subnav-scroll{padding:6px 12px}
 .market-subnav a{padding:8px 10px!important;font-size:11px!important}

 /* 4) single-column, fully centered casino card */
 .casino-list .casino-card{
   display:flex!important;
   flex-direction:column!important;
   align-items:center!important;
   text-align:center!important;
   grid-template-columns:none!important;
   grid-template-rows:none!important;
   gap:14px!important;
   padding:22px 16px 20px!important;
   position:relative;
 }
 .casino-list .casino-card .rank-badge{
   position:absolute!important;top:12px;left:12px;
   width:32px;height:32px;font-size:13px;margin:0!important;
   grid-column:auto!important;grid-row:auto!important;
 }
 /* Thumb: tight inline-block box around the logo, not full width */
 .casino-list .casino-thumb{
   display:inline-flex!important;
   width:auto!important;min-width:0!important;max-width:220px;
   height:auto!important;
   padding:10px 18px!important;margin:0 auto!important;
   justify-content:center!important;align-items:center!important;
   border-radius:12px;
 }
 .casino-list .casino-thumb img{
   max-height:82px!important;max-width:170px!important;
   height:auto!important;width:auto!important;
   margin:0!important;display:block!important;
 }
 .casino-list .casino-info{
   display:flex!important;flex-direction:column!important;
   align-items:center!important;gap:8px;padding:0!important;width:100%;
 }
 .casino-list .casino-info h3{
   font-size:1.15rem!important;margin:0 0 2px!important;text-align:center;justify-content:center!important;
 }
 .casino-list .casino-info .rating{
   padding:4px 12px;font-size:13px;margin:0!important;
 }
 .casino-list .casino-info .oc-score-desc{font-size:11.5px;margin:0!important}
 /* Features list: block-centered, checkmark has enough room so text doesn't overlap it */
 .casino-list .casino-features{
   display:table!important;text-align:left;margin:6px auto 0!important;padding:0!important;
   font-size:13px;grid-column:auto!important;order:0!important;list-style:none!important;
 }
 .casino-list .casino-features li{padding:3px 0 3px 24px!important;position:relative}
 .casino-list .casino-features li::before{
   left:2px!important;top:3px!important;
 }
 .casino-list .casino-bonus{
   width:100%;margin:4px 0 0!important;padding:12px 14px!important;
   text-align:center!important;grid-column:auto!important;order:0!important;
 }
 .casino-list .casino-bonus .bonus-label{font-size:10.5px;margin-bottom:3px}
 .casino-list .casino-bonus .bonus-amount{font-size:1rem;line-height:1.25}
 /* CTA: strictly stacked column. Button on its own line centered.
    Claimed text on a new line below, also centered. */
 .casino-list .casino-cta{
   display:flex!important;flex-direction:column!important;
   align-items:center!important;justify-content:center!important;
   flex-wrap:wrap!important;
   width:100%;gap:10px!important;padding:0!important;margin:0!important;
   grid-column:auto!important;order:0!important;
 }
 .casino-list .casino-cta > *{flex:0 0 100%!important;max-width:100%!important}
 .casino-list .casino-cta .btn{
   flex:0 0 auto!important;width:auto!important;min-width:220px;max-width:100%;
   margin:0 auto!important;padding:14px 26px!important;font-size:14px!important;
   font-weight:800;display:inline-flex!important;align-items:center;justify-content:center;
   align-self:center!important;
 }
 .casino-list .casino-cta .oc-claimed{
   display:flex!important;align-self:center!important;
   justify-content:center!important;align-items:center;
   width:100%;text-align:center!important;font-size:11.5px;
   margin:2px 0 0!important;order:99!important;flex-basis:100%!important;
 }
 .casino-list .casino-cta .payment-icons{
   justify-content:center!important;flex-basis:100%;margin-top:4px;max-width:100%;
 }
}
/* Even smaller: keep everything centered, just tighter spacing */
@media (max-width:400px){
 .casino-list .casino-card{padding:20px 12px 18px!important}
 .casino-list .casino-thumb{padding:8px 14px!important;max-width:200px}
 .casino-list .casino-thumb img{max-height:74px!important;max-width:150px!important}
 .casino-list .casino-info h3{font-size:1.05rem!important}
 .casino-list .casino-cta .btn{min-width:200px;padding:13px 22px!important}
 .page-hero h1{font-size:1.1rem!important}
}

/* "Nieuw"/"New" flag badge, floats ABOVE the thumb panel, does not overlap image */
.casino-thumb{position:relative;overflow:visible}
.casino-thumb .new-flag{
 position:absolute;
 top:-9px;
 left:10px;
 z-index:3;
 display:inline-flex;
 align-items:center;
 gap:4px;
 padding:3px 9px 3px 8px;
 background:linear-gradient(135deg, var(--red) 0%, #c23e2e 100%);
 color:#fff;
 font-family:var(--font-head);
 font-size:9.5px;
 font-weight:800;
 letter-spacing:.09em;
 text-transform:uppercase;
 border-radius:4px;
 box-shadow:0 3px 8px rgba(214, 40, 40, .4), 0 0 0 2px #fff;
 line-height:1;
 white-space:nowrap;
 pointer-events:none;
}
.casino-thumb .new-flag::before{
 content:"★";
 font-size:9px;
 line-height:1;
 color:var(--gold);
}
/* Give the row a touch more top padding so the floating flag has clearance */
.casino-list .casino-card:has(.casino-thumb .new-flag),
.oc-toplist .casino-card:has(.casino-thumb .new-flag){padding-top:24px}
.casino-list .casino-thumb img,
.oc-toplist .casino-card .casino-thumb img{max-width:100%;object-fit:contain}
@media (max-width:720px){
 .casino-thumb .new-flag{top:-7px;left:8px;padding:2px 7px;font-size:8.5px}
}

/* ============================================================
 DEMO GAMES, shared shell + per-game (Slots, Roulette, Blackjack, Plinko)
 ============================================================ */
/* Shared cabinet */
.game-shell{max-width:720px;margin:16px auto 30px;display:grid;gap:18px}
.plinko-shell, .game-shell:has(.game-rail){grid-template-columns:minmax(0, 1fr) 220px;max-width:900px}
@media (max-width:820px){.plinko-shell, .game-shell:has(.game-rail){grid-template-columns:1fr}}
.game-cab{background:linear-gradient(180deg, #0b1f3a 0%, #1a1a1a 100%);border:1px solid rgba(255, 195, 0, .18);border-radius:16px;padding:18px 20px 20px;box-shadow:0 20px 50px -20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);color:#4f4f4f;position:relative;overflow:hidden}
.game-cab::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% 0%, rgba(255, 195, 0, .10), transparent 60%);pointer-events:none}
.game-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.game-title{font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:#fff;display:inline-flex;align-items:center;gap:10px}
.game-title .badge{font-size:9.5px;font-weight:800;letter-spacing:.12em;padding:3px 8px;border-radius:4px;background:var(--red);color:#fff;text-transform:uppercase}
.hud{display:flex;gap:8px}
.hud .cell{background:rgba(255, 255, 255, .06);border:1px solid rgba(255, 255, 255, .10);border-radius:8px;padding:6px 12px;min-width:66px;text-align:center;display:flex;flex-direction:column;gap:2px}
.hud .cell .l{font-family:var(--font-head);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255, 255, 255, .55)}
.hud .cell .v{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:#fff;line-height:1}
.hud .cell.win .v{color:var(--gold)}
.game-msg{text-align:center;padding:10px 14px;background:rgba(0, 0, 0, .25);border-radius:8px;font-size:14px;color:rgba(255, 255, 255, .88);margin:14px 0;min-height:20px;font-weight:500}
.game-msg.win{background:rgba(34, 197, 94, .20);color:#8fd278;font-weight:700}
.game-msg.lose{background:rgba(214, 40, 40, .20);color:#f09585}
.game-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.gbtn{background:rgba(255, 255, 255, .08);border:1px solid rgba(255, 255, 255, .14);color:#fff;padding:10px 18px;border-radius:8px;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.03em;cursor:pointer;transition:all .15s;min-width:52px}
.gbtn:hover{background:rgba(255, 255, 255, .14);border-color:rgba(255, 195, 0, .5);color:var(--gold)}
.gbtn:disabled{opacity:.35;cursor:not-allowed}
.gbtn-primary{background:linear-gradient(135deg, var(--red) 0%, #c23e2e 100%);border-color:transparent;padding:12px 30px;text-transform:uppercase;font-size:14px;font-weight:800;box-shadow:0 6px 16px rgba(214, 40, 40, .35)}
.gbtn-primary:hover{background:linear-gradient(135deg, #e94f3d 0%, #c23e2e 100%);border-color:transparent;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(214, 40, 40, .45)}
.gbtn-round{width:40px;height:40px;padding:0;font-size:18px;border-radius:50%}
.gbtn-ghost{background:transparent}
.game-note{text-align:center;font-size:11px;color:rgba(255, 255, 255, .45);margin-top:14px;font-family:var(--font-head);letter-spacing:.05em}
.win-banner{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0, 0, 0, .7);z-index:5;pointer-events:none}
.win-banner.show{display:flex;animation:winPop .5s ease}
.win-banner .box{text-align:center;color:var(--gold);text-shadow:0 4px 20px rgba(255, 195, 0, .6)}
.win-banner .big{font-family:var(--font-head);font-size:3rem;font-weight:900}
.win-banner .sub{font-size:1rem;letter-spacing:.2em;font-weight:800}
@keyframes winPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
/* Rail (Plinko sidebar cards) */
.game-rail{display:flex;flex-direction:column;gap:12px}
.rail-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.rail-card h3{font-family:var(--font-head);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.rail-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.rail-card li{display:flex;justify-content:space-between;color:var(--text-muted)}
.rail-card b{color:var(--navy);font-weight:800}

/* SLOT (Lucky Slots) */
.slot-window{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;background:linear-gradient(180deg, #070707 0%, #1a1a1a 100%);border:1px solid rgba(255, 195, 0, .30);border-radius:10px;padding:12px;box-shadow:inset 0 3px 20px rgba(0, 0, 0, .6);margin:10px 0}
.slot-window .reel{background:#fff;border-radius:6px;height:270px;overflow:hidden;position:relative}
.slot-window .reel .strip{display:flex;flex-direction:column;align-items:stretch;text-align:center;will-change:transform}
.slot-window .reel .sym{display:flex;align-items:center;justify-content:center;height:90px;font-size:56px;line-height:1;color:var(--text);flex-shrink:0}
.slot-window .reel .sym.win{background:radial-gradient(circle, rgba(255, 195, 0, .45), rgba(255, 195, 0, .10));animation:symPulse .8s ease infinite alternate}
@keyframes symPulse{0%{box-shadow:inset 0 0 0 2px rgba(255, 195, 0, .5)}100%{box-shadow:inset 0 0 0 3px rgba(255, 195, 0, .9)}}
.paytable{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;padding:10px;background:rgba(0, 0, 0, .25);border-radius:8px;font-size:13px;color:rgba(255, 255, 255, .85);margin:12px 0}
.paytable span{padding:3px 8px;background:rgba(255, 255, 255, .06);border-radius:6px;font-family:var(--font-head);font-weight:700}

/* ROULETTE (Mini) */
.rl-stage{display:flex;flex-direction:column;align-items:center;gap:14px;margin:8px 0}
.rl-wheelwrap{position:relative;width:220px;height:220px}
.rl-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid var(--gold);z-index:3;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, .5))}
.rl-wheel{width:220px;height:220px;filter:drop-shadow(0 6px 16px rgba(0, 0, 0, .4));transition:transform 3s cubic-bezier(.15, .9, .25, 1)}
.rl-hub{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:48px;height:48px;background:linear-gradient(135deg, #1a1a1a, #070707);border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--font-head);font-weight:800;font-size:18px;z-index:2;box-shadow:0 2px 8px rgba(0, 0, 0, .5)}
.rl-result{font-family:var(--font-head);font-size:13.5px;color:rgba(255, 255, 255, .75);text-align:center}
.rl-board{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:6px;width:100%;max-width:460px}
.rl-numrow{display:flex;gap:6px;width:100%;max-width:460px;margin-top:4px}
.rl-numin{flex:1;padding:9px 12px;border-radius:8px;background:rgba(255, 255, 255, .08);border:1px solid rgba(255, 255, 255, .14);color:#fff;font-family:var(--font-head);font-size:13px}
.rl-chip{padding:9px 8px;background:rgba(255, 255, 255, .06);border:1px solid rgba(255, 255, 255, .12);border-radius:8px;color:#fff;font-family:var(--font-head);font-size:11.5px;font-weight:700;cursor:pointer;transition:all .12s;text-align:center;line-height:1.15}
.rl-chip:hover{background:rgba(255, 255, 255, .14);border-color:var(--gold);color:var(--gold)}
.rl-chip.selected{background:var(--gold);color:var(--text);border-color:var(--gold)}
.rl-chip.red{background:linear-gradient(135deg, rgba(214, 40, 40, .28), rgba(214, 40, 40, .12));border-color:rgba(214, 40, 40, .5)}
.rl-chip.red:hover{background:var(--red);color:#fff;border-color:var(--red)}
.rl-chip.black{background:rgba(0, 0, 0, .5);border-color:rgba(255, 255, 255, .2)}
.rl-chip.black:hover{background:#000;color:var(--gold)}

/* BLACKJACK */
.bj-felt{background:radial-gradient(ellipse at 50% 40%, #116c34, #0a4a24 70%);border-radius:14px;border:2px solid rgba(255, 195, 0, .25);padding:22px 20px;margin:6px 0;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 60px rgba(0, 0, 0, .4)}
.bj-hand{color:#fff}
.bj-lbl{font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:rgba(255, 255, 255, .75);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.bj-lbl .score{background:rgba(0, 0, 0, .35);padding:3px 10px;border-radius:12px;font-size:13px;color:var(--gold)}
.bj-cards{display:flex;gap:8px;flex-wrap:wrap;min-height:88px}
.bj-cards .card{width:56px;height:80px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0, 0, 0, .35);color:var(--text);font-family:var(--font-head);font-weight:800;font-size:16px;padding:6px 8px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.bj-cards .card.red{color:var(--red)}
.bj-cards .card .rank{line-height:1}
.bj-cards .card .suit{font-size:22px;align-self:flex-end;line-height:1}
.bj-cards .card.back{background:linear-gradient(135deg, var(--navy), var(--navy-2));border:1px solid var(--gold);color:transparent}
.bj-cards .card.back::after{content:"?";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--gold);font-size:26px;font-weight:900}
.bj-divider{border-top:1px dashed rgba(255, 255, 255, .20);margin:16px 0}

/* PLINKO */
.plinko-stage{display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(180deg, #070707 0%, #1a1a1a 100%);border:1px solid rgba(255, 195, 0, .25);border-radius:10px;padding:14px;margin:10px 0}
.plinko-stage canvas{max-width:100%;height:auto;display:block;background:#020815;border-radius:6px}
.plinko-slots{display:grid;grid-template-columns:repeat(13, 1fr);gap:2px;width:100%;max-width:520px}
.plinko-slots .slot{background:rgba(255, 255, 255, .06);border:1px solid rgba(255, 195, 0, .15);border-radius:4px;padding:4px 2px;text-align:center;font-family:var(--font-head);font-size:10.5px;font-weight:800;color:var(--gold)}
.plinko-slots .slot.hi{background:rgba(214, 40, 40, .28);border-color:rgba(214, 40, 40, .55);color:#fff}
.risk-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.risk-row .gbtn.active{background:var(--gold);border-color:var(--gold);color:var(--text)}

/* Mobile tweaks */
@media (max-width:560px){
 .game-cab{padding:14px}
 .game-topbar{flex-direction:column;align-items:stretch}
 .hud{justify-content:space-between}
 .hud .cell{flex:1;min-width:0}
 .slot-window{gap:4px;padding:8px}
 .slot-window .reel{height:270px}
 .slot-window .reel .sym{font-size:44px}
 .rl-wheelwrap, .rl-wheel{width:180px;height:180px}
 .rl-board{grid-template-columns:repeat(2, minmax(0, 1fr))}
 .bj-cards .card{width:44px;height:64px;font-size:13px}
 .bj-cards .card .suit{font-size:16px}
 .gbtn-primary{padding:10px 20px;font-size:12.5px}
}

/* FAQ accordion, polished styling (site-wide) */
.faq-item{
 background:#fff;
 border:1px solid var(--border);
 border-radius:12px;
 margin-bottom:10px;
 overflow:hidden;
 transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.faq-item:hover{border-color:var(--navy);box-shadow:0 6px 20px -10px rgba(0, 63, 136, .25)}
.faq-item[open]{border-color:var(--red);box-shadow:0 8px 24px -12px rgba(214, 40, 40, .20)}
.faq-item summary{
 display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:16px 22px;
 font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.35;
 color:var(--navy);cursor:pointer;
 list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{display:none}
.faq-item summary::after{
 content:"";
 flex-shrink:0;
 width:26px;height:26px;
 border:1.5px solid var(--border);border-radius:50%;
 background:
 linear-gradient(currentColor, currentColor) center/10px 1.5px no-repeat,
 linear-gradient(currentColor, currentColor) center/1.5px 10px no-repeat;
 color:var(--navy);
 transition:transform .22s ease, background-color .18s, border-color .18s, color .18s;
}
.faq-item:hover summary::after{border-color:var(--navy)}
.faq-item[open] summary{color:var(--red)}
.faq-item[open] summary::after{
 transform:rotate(45deg);
 border-color:var(--red);color:var(--red);
 background-color:rgba(214, 40, 40, .06);
}
.faq-item .faq-answer{
 padding:0 22px 20px;
 color:var(--text-muted);
 line-height:1.65;
 font-size:14.5px;
 border-top:1px solid transparent;
 animation:faqSlide .25s ease-out;
}
.faq-item[open] .faq-answer{border-top-color:var(--border);padding-top:16px}
.faq-item .faq-answer p{margin:0 0 10px}
.faq-item .faq-answer p:last-child{margin-bottom:0}
.faq-item .faq-answer a{color:var(--navy);border-bottom:1px solid rgba(0, 63, 136, .30)}
.faq-item .faq-answer a:hover{color:var(--red);border-bottom-color:var(--red)}
@keyframes faqSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Wrap consecutive .faq-items in a subtle container feel */
.faq-item + .faq-item{margin-top:8px}
@media (max-width:560px){
 /* MOBILE FAQ: text on the left with fixed right padding so long questions
    wrap BEFORE reaching the button. Button is an absolutely-positioned circle
    on the right, vertically centered. Never overlaps text. */
 .faq-item summary{
   display:block !important;
   padding:14px 56px 14px 16px !important;
   font-size:14px !important;
   line-height:1.4 !important;
   position:relative !important;
   gap:0 !important;
 }
 .faq-item summary::after{
   content:"" !important;
   position:absolute !important;
   right:14px !important;
   top:50%;
   width:26px !important;
   height:26px !important;
   border:1.5px solid var(--border) !important;
   border-radius:50% !important;
   background:
     linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat,
     linear-gradient(currentColor, currentColor) center/1.5px 12px no-repeat !important;
   background-color:transparent;
   color:var(--navy) !important;
   font-size:0 !important;
   transform:translateY(-50%) !important;
   transition:transform .22s ease, border-color .18s, color .18s, background-color .18s;
 }
 .faq-item[open] summary::after{
   transform:translateY(-50%) rotate(45deg) !important;
   border-color:var(--red) !important;
   color:var(--red) !important;
   background-color:rgba(214, 40, 40, .06);
 }
 .faq-item .faq-answer{padding:0 16px 16px;font-size:13.5px}
 .faq-item[open] .faq-answer{padding-top:14px}
}

/* ---------- AUTHOR BOX (about-page person cards) ---------- */
.author-box .author-avatar{
  width:120px;height:120px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:3px solid var(--gold);
  box-shadow:0 4px 12px rgba(0,63,136,.12);
}
.author-box .author-eyebrow{
  display:block;font-family:var(--font-head);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:4px;
}
.author-box .author-name{
  font-size:1.25rem;margin:0 0 4px;color:var(--navy);font-weight:800;
}
.author-box .author-role{
  display:block;font-family:var(--font-head);font-size:12.5px;font-weight:700;
  letter-spacing:.04em;color:var(--text-muted);margin-bottom:10px;
}
.author-box .author-bio{
  font-size:14px;line-height:1.65;color:var(--text);margin:0;
}
/* Mobile: stack image on top, text below, all centered */
@media (max-width:640px){
  .author-box{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:14px !important;
    padding:22px 18px !important;
  }
  .author-box > div{width:100%}
  .author-box .author-avatar{width:104px;height:104px;margin:0 auto}
  .author-box .author-name{font-size:1.15rem}
  .author-box .author-bio{font-size:13.5px;text-align:left}
}

/* ---------- POST HERO IMAGE (news + guides) ---------- */
/* Show the WHOLE image, no cropping. Fit to width, keep aspect ratio. */
.post-hero{
  margin:0 0 28px;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(135deg,#343434 0%,#343434 55%,#4f4f4f 100%);
  box-shadow:0 8px 24px -14px rgba(0,63,136,.25);
  border:1px solid var(--border);
}
.post-hero img{
  display:block;
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  object-position:center;
  margin:0 auto;
}
@media (max-width:720px){
  .post-hero{margin:0 0 20px;border-radius:12px}
  .post-hero img{max-height:340px}
}

/* ---------- "NEW" badge on top casino cards (BE) ---------- */
.casino-thumb .thumb-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.oc-new-badge{
 position:absolute;top:-5px;right:-8px;
 background:#e94f3d;color:#fff;
 font-family:var(--font-head);font-weight:800;font-size:7.5px;
 padding:1px 5px;border-radius:3px;
 letter-spacing:.06em;text-transform:uppercase;
 box-shadow:0 1px 4px rgba(0,0,0,.22);
 z-index:3;pointer-events:none;white-space:nowrap;line-height:1.3;
}
@media (max-width:520px){
 .oc-new-badge{top:-3px;right:-6px;font-size:7px;padding:1px 4px;border-radius:3px}
}

/* ---------- Floating "Top Offer" bottom bar (auto-detected 2nd brand) ---------- */
.oc-top-offer{
 position:fixed;left:50%;
 bottom:calc(20px + env(safe-area-inset-bottom, 0px));
 transform:translate(-50%,140%);
 width:calc(100% - 24px);max-width:calc(var(--max-w) - 40px);
 z-index:9500;
 background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-2) 100%);
 color:#fff;
 border-radius:12px;
 box-shadow:0 8px 28px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);
 transform:translateY(140%);
 opacity:0;
 transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease;
 border:1px solid rgba(255,255,255,.08);
}
.oc-top-offer.visible{transform:translate(-50%,0);opacity:1}
.oc-top-offer-inner{
 display:grid;
 grid-template-columns:auto 60px 1fr auto auto;
 align-items:center;
 gap:14px;
 padding:12px 42px 12px 16px;
 position:relative;
}
.oc-to-badge{
 background:var(--gold);color:var(--navy-deep);
 font-family:var(--font-head);font-weight:800;
 font-size:10.5px;letter-spacing:.08em;
 padding:4px 9px;border-radius:4px;
 text-transform:uppercase;white-space:nowrap;
}
.oc-to-logo{
 width:60px;height:40px;
 object-fit:contain;
 background:rgba(255,255,255,.08);
 border-radius:6px;padding:4px;
 flex-shrink:0;
}
.oc-to-text{min-width:0;line-height:1.3}
.oc-to-name{
 font-family:var(--font-head);font-weight:800;font-size:15px;
 margin:0 0 2px;color:#fff;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
 overflow:hidden;line-height:1.2;
}
.oc-to-bonus{
 font-size:12.5px;color:rgba(255,255,255,.9);
 display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
 overflow:hidden;line-height:1.3;
}
.oc-to-cta{
 background:var(--red);color:#fff;
 font-family:var(--font-head);font-weight:800;font-size:12.5px;letter-spacing:.04em;
 padding:10px 18px;border-radius:6px;text-decoration:none;
 text-transform:uppercase;white-space:nowrap;
 box-shadow:0 2px 8px rgba(214,40,40,.4);
 transition:background .15s;
}
.oc-to-cta:hover{background:var(--red-deep)}
.oc-to-close{
 position:absolute;top:6px;right:8px;
 background:transparent;border:0;
 color:rgba(255,255,255,.6);
 font-size:20px;line-height:1;cursor:pointer;
 width:26px;height:26px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 transition:color .15s,background .15s;
}
.oc-to-close:hover{color:#fff;background:rgba(255,255,255,.1)}

/* Tablet */
@media (max-width:720px){
 .oc-top-offer{margin-top:12px}
 .oc-top-offer-inner{grid-template-columns:46px minmax(0,1fr) auto;gap:10px;padding:8px 32px 8px 10px}
 .oc-to-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:9px;padding:3px 8px;letter-spacing:.06em;box-shadow:0 2px 6px rgba(0,0,0,.25)}
 .oc-to-logo{width:46px;height:34px;padding:3px;grid-column:1;grid-row:1}
 .oc-to-text{grid-column:2;grid-row:1;min-width:0}
 .oc-to-name{font-size:13px;margin:0;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
 .oc-to-bonus{font-size:11px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
 .oc-to-cta{grid-column:3;grid-row:1;font-size:11px;padding:8px 12px}
 .oc-to-close{top:4px;right:6px;width:22px;height:22px;font-size:17px}
}
/* Phone */
@media (max-width:420px){
 .oc-top-offer{bottom:calc(28px + env(safe-area-inset-bottom, 0px));width:calc(100% - 16px);border-radius:10px}
 .oc-top-offer-inner{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:7px 28px 7px 8px}
 .oc-to-badge{top:-10px;left:50%;transform:translateX(-50%);font-size:8.5px;padding:2px 7px}
 .oc-to-logo{width:38px;height:28px;padding:2px;border-radius:5px}
 .oc-to-name{font-size:12px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
 .oc-to-bonus{font-size:10.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
 .oc-to-cta{font-size:10px;padding:7px 10px;border-radius:5px;letter-spacing:.02em}
 .oc-to-close{top:3px;right:5px;width:20px;height:20px;font-size:16px}
}

/* ---------- Idle-exit popup (10s inactivity, first brand) ---------- */
.oc-exit-overlay{
 position:fixed;inset:0;z-index:9800;
 background:rgba(0,30,70,.72);
 backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
 display:flex;align-items:center;justify-content:center;
 padding:20px;opacity:0;pointer-events:none;
 transition:opacity .3s ease;
}
.oc-exit-overlay.visible{opacity:1;pointer-events:auto}
.oc-exit-modal{
 position:relative;
 background:#fff;color:var(--text);
 border-radius:16px;
 width:100%;max-width:460px;
 padding:28px 22px 20px;
 box-shadow:0 20px 60px rgba(0,0,0,.4);
 transform:scale(.9) translateY(10px);
 transition:transform .35s cubic-bezier(.22,1,.36,1);
 text-align:center;
}
.oc-exit-overlay.visible .oc-exit-modal{transform:scale(1) translateY(0)}
.oc-ex-close{
 position:absolute;top:10px;right:10px;
 background:#fff;border:1px solid rgba(0,0,0,.12);
 width:34px;height:34px;border-radius:50%;
 color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer;
 display:flex;align-items:center;justify-content:center;
 transition:color .15s,border-color .15s,background .15s;
}
.oc-ex-close:hover{color:var(--red);border-color:var(--red)}
.oc-ex-title{
 font-family:var(--font-head);font-weight:900;
 color:var(--navy);
 font-size:26px;line-height:1.15;letter-spacing:.01em;
 margin:4px 0 10px;text-transform:uppercase;
}
.oc-ex-subtitle{
 font-size:15px;line-height:1.4;color:var(--text);
 margin:0 0 18px;
}
.oc-ex-bonus{
 background:linear-gradient(135deg,#232428 0%,#2a2a2a 100%);
 border:1px solid rgba(255,195,0,.4);
 border-radius:10px;
 padding:16px 14px;margin:0 0 16px;
}
.oc-ex-logo{display:block;margin:0 auto 12px;max-height:80px;max-width:220px;width:auto;height:auto;object-fit:contain;background:var(--navy-deep);border-radius:8px;padding:6px 10px}
.oc-ex-bonus-amount{
 font-family:var(--font-head);font-weight:900;
 color:var(--red);font-size:22px;line-height:1.2;
 margin:0;
}
.oc-ex-brand-note{
 font-size:12.5px;color:var(--text-muted);
 margin:0 0 18px;font-style:italic;
}
.oc-ex-cta{
 display:block;width:100%;
 background:var(--red);color:#fff;
 font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.03em;
 padding:14px 18px;border-radius:10px;
 text-decoration:none;text-transform:uppercase;
 box-shadow:0 4px 14px rgba(214,40,40,.4);
 transition:background .15s,transform .1s;
}
.oc-ex-cta:hover{background:var(--red-deep)}
.oc-ex-cta:active{transform:translateY(1px)}
.oc-ex-dismiss{
 display:inline-block;margin-top:12px;
 color:var(--text-muted);font-size:12.5px;
 text-decoration:underline;background:none;border:0;cursor:pointer;
 padding:4px 8px;font-family:inherit;
}
.oc-ex-dismiss:hover{color:var(--text)}

@media (max-width:480px){
 .oc-exit-modal{padding:22px 16px 16px;border-radius:14px}
 .oc-ex-title{font-size:21px}
 .oc-ex-subtitle{font-size:13.5px;margin-bottom:14px}
 .oc-ex-bonus{padding:12px 10px;margin-bottom:14px}
 .oc-ex-logo{max-height:64px;max-width:180px;padding:5px 8px}
 .oc-ex-bonus-amount{font-size:18px}
 .oc-ex-cta{font-size:14px;padding:12px 16px}
}

/* MOBILE OVERRIDE: rating + verdict badge on one line (must come AFTER the 720px block) */
@media (max-width:520px){
 .casino-card .casino-info,
 .casino-list .casino-info{
  flex-direction:row!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:6px 8px!important;
 }
 .casino-card .casino-info h3,
 .casino-list .casino-info h3,
 .casino-card .casino-info .casino-features,
 .casino-list .casino-features{flex:0 0 100%!important;width:100%!important}
 .casino-card .casino-info .rating,
 .casino-list .casino-info .rating,
 .casino-card .casino-info .oc-score-desc,
 .casino-list .casino-info .oc-score-desc{
  margin:0!important;
  flex:0 0 auto!important;
 }
}

/* MOBILE: remove white gap between market-subnav and hero (all markets) */
@media (max-width:720px){
 .market-subnav{margin:0!important}
 .page-hero,
 .editorial-hero,
 .article-hero{padding-top:16px!important;padding-bottom:22px!important}
}


/* ============================================
   SkyCity-inspired overrides (Metareavr)
   ============================================ */

/* Body background hardened */
body { background: var(--bg); color: var(--text); }

/* Pill buttons across all primary/secondary CTAs */
.btn, .btn-primary, .btn-secondary, .hero-ctas .btn,
.author-email-btn, .cta,
button.dropdown-trigger, .newsletter-form button {
  border-radius: var(--button-radius) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-family: var(--font-head);
}

/* Primary CTA = red (high-contrast conversion) */
.btn-primary, .cta-primary {
  background: linear-gradient(135deg, #e94f3d 0%, #c23e2e 100%);
  color: #fff;
  border: 0;
}
.btn-primary:hover, .cta-primary:hover {
  background: linear-gradient(135deg, #f26250 0%, #d14939 100%);
}

/* .casino-cta is a WRAPPER column, not a button - reset any inherited button chrome */
.casino-cta {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
}

/* Secondary CTA = outline on dark */
.btn-secondary, .cta-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-secondary:hover {
  background: rgba(179, 141, 47, 0.1);
}

/* Header + nav on dark */
header, .site-header { background: var(--bg); border-bottom: 1px solid var(--border); }
.nav a, .nav button { color: var(--text); }
.nav a:hover, .nav a.active { color: var(--navy); }
.dropdown-menu, .dropdown-submenu { background: var(--surface); border: 1px solid var(--border); }
.dropdown-menu a, .dropdown-submenu a { color: var(--text); }
.dropdown-menu a:hover, .dropdown-submenu a:hover { background: var(--surface-hover); color: var(--navy); }

/* Hero */
.ag-hero, .hero, section.hero {
  background: linear-gradient(135deg, #070707 0%, #1a1a1a 55%, #232428 100%);
  color: var(--text);
}
.ag-hero .kicker, .hero .kicker, .kicker {
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  font-size: 0.8rem;
}
.ag-hero h1, .hero h1 { color: #fff; }
.ag-hero .lede, .hero .lede, .lede { color: var(--text-muted); }

/* Market tiles / cards */
.market-card, .mc-flag, .market-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.market-card:hover { border-color: var(--navy); background: var(--surface-hover); }

/* Casino cards - keep layout but adjust surface + accent */
.casino-card {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.casino-card:hover { border-color: var(--navy); }
.rank-badge { background: var(--navy); color: #fff; }
.casino-features { color: var(--text-muted); }
.casino-bonus { color: var(--gold); }

/* Tables */
table { color: var(--text); }
thead { background: var(--surface); border-bottom: 1px solid var(--border); }
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:nth-child(even) { background: var(--bg-alt); }
th, td { color: var(--text); }

/* Author box on dark */
.author-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.author-name { color: #fff; }
.author-role { color: var(--navy); }
.author-bio { color: var(--text-muted); }

/* Footer */
.site-footer, .gr-footer {
  background: #070707;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.site-footer h4, .gr-footer h4 { color: #fff; }
.site-footer a, .gr-footer a { color: var(--text-muted); }
.site-footer a:hover, .gr-footer a:hover { color: var(--navy); }
.age-pill { background: var(--surface); color: var(--navy); border: 1px solid var(--navy); border-radius: var(--button-radius); padding: 6px 14px; font-weight: 700; font-size: .78rem; letter-spacing: .08em; }

/* FAQ / collapsibles */
.faq-item, details { background: var(--surface); border: 1px solid var(--border); }
.faq-item h3, details summary { color: #fff; }

/* Newsletter form */
.newsletter input[type="email"] { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: var(--button-radius); padding: 12px 20px; }
.newsletter input[type="email"]::placeholder { color: var(--text-dim); }

/* Headings default */
h1, h2, h3, h4, h5 { color: #fff; font-family: var(--font-head); font-weight: 800; letter-spacing: -0.015em; }

/* Links */
a { color: var(--navy); }
a:hover { color: var(--navy-2); }

/* Reveal class / animations - keep working against dark */
.reveal { background: transparent; }

/* Content section backgrounds */
section.content, section { background: transparent; }

/* ============================================
   Mobile breakpoints (Phase 10)
   ============================================ */

/* Tablet and down */
@media (max-width: 960px) {
  :root { --max-w: 100%; }
  .container { padding-left: 16px; padding-right: 16px; }
  .ag-hero h1, .hero h1 { font-size: 2rem; line-height: 1.15; }
  .market-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phone */
@media (max-width: 720px) {
  .ag-hero h1, .hero h1 { font-size: 1.65rem; }
  .ag-hero .lede, .hero .lede, .lede { font-size: 1rem; }
  .fact-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .market-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  /* Nav: compact mobile */
  .nav { gap: 6px; flex-wrap: wrap; }
  .nav a, .nav button { padding: 6px 10px; font-size: 14px; }
  /* Markets dropdown on mobile: flag + name tight-left */
  .dropdown-submenu a { justify-content: flex-start; gap: 10px; }
  /* Footer stack */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Casino card stacking */
  .casino-card { flex-direction: column; }
  .casino-thumb { width: 100%; max-height: 180px; }
  /* Tables responsive */
  table { font-size: 13px; }
  th, td { padding: 8px 10px; }
}

/* Small phone */
@media (max-width: 480px) {
  .btn, .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .ag-hero h1, .hero h1 { font-size: 1.4rem; }
  .fact-strip { grid-template-columns: 1fr 1fr; }
  .fnum { font-size: 1.5rem; }
}

/* Market subnav: single-row horizontal scroll (never wrap) */
.market-subnav .subnav-scroll {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(179,141,47,0.75) rgba(0,0,0,0.06) !important;
}
.market-subnav .subnav-scroll::-webkit-scrollbar {
  display: block !important;
  height: 8px !important;
}
.market-subnav .subnav-scroll::-webkit-scrollbar-thumb {
  background: rgba(179,141,47,0.75);
  border-radius: 4px;
}

/* ============================================
   SkyCity-style homepage layout (Metareavr)
   ============================================ */

body.sc-layout {
  display: flex;
  min-height: 100vh;
  background: #1a1a1a;
  margin: 0;
  padding: 0;
}

/* ---- Sidebar ---- */
.sc-sidebar {
  width: 240px;
  min-width: 240px;
  background: #070707;
  color: var(--text);
  padding: 24px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid #1a1a1a;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sc-logo { display: block; padding: 0 4px 6px; }
.sc-logo img { width: 100%; max-width: 180px; height: auto; display: block; }
.sc-ctas { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sc-ctas .btn { width: 100%; justify-content: center; padding: 11px 16px; font-size: 13px; }

.sc-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.sc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s;
}
.sc-item:hover { background: #1a1a1a; color: #fff; }
.sc-item.sc-active { color: var(--navy); background: rgba(179,141,47,0.08); }
.sc-item.sc-active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 20px;
  background: var(--navy);
  border-radius: 0 3px 3px 0;
  margin-left: -16px;
}
.sc-item { position: relative; }
.sc-ico { width: 20px; height: 20px; flex-shrink: 0; color: currentColor; }

.sc-section-head {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--text-dim);
  padding: 8px 12px 4px;
  margin-top: 10px;
  font-weight: 700;
}
.sc-markets { display: flex; flex-direction: column; gap: 1px; }
.sc-flag-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.15s;
}
.sc-flag-item:hover { background: #1a1a1a; color: #fff; }
.sc-flag-item img { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; }

/* ---- Mobile header (hidden on desktop) ---- */
.sc-mobile-head { display: none; }

/* ---- Main pane ---- */
.sc-main {
  flex: 1;
  min-width: 0;
  background: #1a1a1a;
  padding: 0;
  overflow-x: hidden;
}

/* ---- Hero ---- */
.sc-hero-pane {
  position: relative;
  padding: 72px 48px 56px;
  background: linear-gradient(135deg, #070707 0%, #1a1a1a 55%, #343434 100%);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
}
.sc-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 50%, rgba(179,141,47,0.25), transparent 55%),
    radial-gradient(circle at 15% 20%, rgba(233,79,61,0.10), transparent 50%);
  pointer-events: none;
}
.sc-hero-copy { position: relative; max-width: 720px; }
.sc-hero-kicker {
  display: inline-block;
  background: rgba(179,141,47,0.15);
  color: var(--navy);
  padding: 6px 14px;
  border-radius: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sc-hero-h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2.8rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 14px;
}
.sc-hero-lede {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 580px;
}
.sc-hero-lede strong { color: #fff; font-weight: 700; }
.sc-hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 11px 24px;
  border-radius: 44px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.05); }

/* ---- Search + tabs ---- */
.sc-tabs-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 48px;
  background: #1a1a1a;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sc-search {
  position: relative;
  flex: 0 0 320px;
  max-width: 320px;
}
.sc-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-dim);
}
.sc-search input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: #232428;
  border: 1px solid var(--border);
  border-radius: 44px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.sc-search input::placeholder { color: var(--text-dim); }
.sc-search input:focus { border-color: var(--navy); }

.sc-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-tab {
  padding: 8px 18px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: 44px;
  transition: all 0.15s;
}
.sc-tab:hover { color: #fff; background: #232428; }
.sc-tab.sc-tab-active { color: var(--navy); border-bottom: 2px solid var(--navy); border-radius: 0; padding-bottom: 6px; }

/* ---- Content sections ---- */
.sc-section { padding: 40px 48px; }
.sc-section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.sc-section-head-row h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.sc-see-all {
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sc-see-all:hover { color: var(--navy-2); }

/* Top-ranked tiles */
.sc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.sc-tile {
  background: #232428;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.sc-tile:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-3); }
.sc-tile-media {
  height: 100px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
}
.sc-tile-media img { width: 56px; height: 56px; border-radius: 10px; }
.sc-tile-body { padding: 14px 16px 16px; }
.sc-tile-kicker {
  display: block;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sc-tile-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.sc-tile-body p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
  line-height: 1.45;
}

/* Market card grid */
.sc-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.sc-market-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #232428;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s;
}
.sc-market-card:hover { border-color: var(--navy); background: #2a2a2a; }
.sc-market-card img { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; }
.sc-market-card .mc-name {
  display: block;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  margin-bottom: 2px;
}
.sc-market-card .mc-sub {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
}

/* News grid */
.sc-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.sc-news-card {
  display: block;
  padding: 18px;
  background: #232428;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s;
}
.sc-news-card:hover { border-color: var(--navy); }
.sc-news-tag {
  display: inline-block;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sc-news-card h3 {
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.35;
  font-weight: 700;
}
.sc-news-date { color: var(--text-dim); font-size: 12px; }

/* Promise strip */
.sc-promise {
  background: linear-gradient(180deg, #1a1a1a, #070707);
  border-top: 1px solid var(--border);
}
.sc-promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.sc-promise-card {
  padding: 24px;
  background: #232428;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sc-promise-num {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 10px;
}
.sc-promise-card h3 { color: #fff; font-size: 1.05rem; margin: 0 0 6px; }
.sc-promise-card p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0; }

/* Footer */
.sc-footer {
  background: #070707;
  padding: 48px 48px 20px;
  border-top: 1px solid var(--border);
}
.sc-footer-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.sc-footer-brand img { height: 36px; display: block; margin-bottom: 10px; }
.sc-footer-brand p { color: var(--text-muted); font-size: 13px; line-height: 1.5; max-width: 360px; }
.sc-footer-col h4 { color: #fff; font-size: 13px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.sc-footer-col a { display: block; color: var(--text-muted); font-size: 13px; text-decoration: none; padding: 3px 0; }
.sc-footer-col a:hover { color: var(--navy); }
.sc-footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 20px;
  color: var(--text-dim);
  font-size: 12px;
  gap: 16px;
  flex-wrap: wrap;
}
.sc-age {
  background: var(--surface); color: var(--navy);
  padding: 6px 12px; border: 1px solid var(--navy);
  border-radius: 44px; font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
}

/* ---- Tablet ---- */
@media (max-width: 1080px) {
  .sc-hero-pane { padding: 56px 32px 44px; }
  .sc-hero-h1 { font-size: 2.2rem; }
  .sc-tabs-row { padding: 20px 32px; }
  .sc-section { padding: 36px 32px; }
  .sc-footer { padding: 40px 32px 20px; }
  .sc-footer-row { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---- Mobile ---- */
@media (max-width: 760px) {
  body.sc-layout { flex-direction: column; }
  .sc-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 999;
    box-shadow: 10px 0 30px rgba(0,0,0,0.6);
  }
  .sc-sidebar.open { transform: translateX(0); }
  .sc-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #070707;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 10;
  }
  .sc-logo-m img { height: 32px; display: block; }
  .sc-burger {
    background: transparent;
    border: 1px solid var(--border);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
  }
  .sc-main { width: 100%; }
  .sc-hero-pane { padding: 40px 20px 32px; min-height: 240px; }
  .sc-hero-h1 { font-size: 1.7rem; }
  .sc-hero-lede { font-size: 0.95rem; }
  .sc-hero-cta-row { flex-direction: column; }
  .sc-hero-cta-row .btn { width: 100%; justify-content: center; }
  .sc-tabs-row { padding: 16px 20px; flex-direction: column; align-items: stretch; gap: 14px; }
  .sc-search { flex: 1; max-width: 100%; }
  .sc-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .sc-tab { white-space: nowrap; flex-shrink: 0; }
  .sc-section { padding: 28px 20px; }
  .sc-card-grid { grid-template-columns: 1fr; }
  .sc-market-grid { grid-template-columns: 1fr; }
  .sc-news-grid { grid-template-columns: 1fr; }
  .sc-footer { padding: 32px 20px 16px; }
  .sc-footer-row { grid-template-columns: 1fr; }
  .sc-footer-bottom { flex-direction: column; gap: 10px; }
}


/* bonus-type-card */
.bonus-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.bonus-type-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #232428;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s;
  align-items: flex-start;
}
.bonus-type-card:hover {
  border-color: var(--navy);
  background: #2a2a2a;
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.bonus-type-card .btc-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(179,141,47,0.12);
  border: 1px solid rgba(179,141,47,0.25);
  border-radius: 10px;
  color: var(--navy);
}
.bonus-type-card .btc-icon svg {
  width: 24px;
  height: 24px;
}
.bonus-type-card .btc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bonus-type-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.bonus-type-card p {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}
.bonus-type-card .btc-cta {
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  display: inline-block;
}
.bonus-type-card:hover .btc-cta { color: var(--navy-2); }

@media (max-width: 520px) {
  .bonus-type-card { padding: 16px; gap: 12px; }
  .bonus-type-card .btc-icon { flex: 0 0 40px; width: 40px; height: 40px; }
  .bonus-type-card .btc-icon svg { width: 20px; height: 20px; }
  .bonus-type-card h3 { font-size: 0.98rem; }
  .bonus-type-card p { font-size: 13px; }
}

/* ============================================
   Casino card CTA + thumb fixes (Phase post-launch)
   ============================================ */

/* Thumb needs a light background so logos with light fills (#E4EBED etc) show on the dark card */
.casino-card .casino-thumb {
  background: #f4f4f4;
  border-radius: 8px;
  padding: 8px;
  min-height: 70px;
  overflow: hidden;
}
.casino-card .casino-thumb img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  display: block;
}

/* Rank badge: ensure it never visually overlaps the thumb */
.casino-card .rank-badge {
  z-index: 2;
  flex-shrink: 0;
  margin: 0;
}

/* Casino info name: ensure no text spills under the badge */
.casino-card .casino-info h3 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 8px;
}
.casino-card .casino-info .rating {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 4px;
}
.casino-card .casino-features li { color: var(--text-muted); }
.casino-card .casino-features li::before { color: var(--success); }

/* Bonus column: clearer dark panel with legible text */
.casino-card .casino-bonus {
  background: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
  min-width: 0;
}
.casino-card .casino-bonus .bonus-label {
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.casino-card .casino-bonus .bonus-amount {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
}

/* CTA column: wider, pill button with better contrast and shadow */
.casino-card .casino-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 0 4px;
  min-width: 180px;
}
.casino-card .casino-cta .btn,
.casino-card .casino-cta .btn-primary {
  background: var(--navy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 44px !important;
  padding: 14px 20px !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(179, 141, 47, 0.35);
  transition: all 0.2s;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.casino-card .casino-cta .btn:hover,
.casino-card .casino-cta .btn-primary:hover {
  background: var(--navy-2) !important;
  box-shadow: 0 6px 18px rgba(179, 141, 47, 0.55);
  transform: translateY(-1px);
}
.casino-card .casino-cta .oc-terms,
.casino-card .casino-cta small,
.casino-card .casino-cta .fine {
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
}

/* Grow the CTA column on desktop so the button has breathing room */
@media (min-width: 1081px) {
  .casino-card {
    grid-template-columns: 56px 130px minmax(0, 1fr) 220px 220px !important;
    gap: 24px;
    padding: 20px 24px;
    align-items: center;
  }
}

/* Tablet (900-1080) - compact but still 2-col for bonus + cta */
@media (max-width: 1080px) and (min-width: 901px) {
  .casino-card {
    grid-template-columns: 50px 110px minmax(0, 1fr) 200px 190px !important;
    gap: 16px;
    padding: 18px 20px;
  }
  .casino-card .casino-cta .btn,
  .casino-card .casino-cta .btn-primary {
    padding: 12px 14px !important;
    font-size: 12.5px !important;
  }
}

/* Small-tablet (720-900): stack bonus/cta full width under info */
@media (max-width: 900px) and (min-width: 721px) {
  .casino-card {
    grid-template-columns: 44px 100px minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    gap: 14px;
    padding: 16px;
  }
  .casino-card .casino-bonus { grid-column: 2 / -1; }
  .casino-card .casino-cta {
    grid-column: 1 / -1;
    flex-direction: row;
    padding-top: 6px;
  }
  .casino-card .casino-cta .btn { flex: 1; }
}

/* Mobile already handled by existing 520px rules - ensure gold CTA stands out */
@media (max-width: 720px) {
  .casino-card .casino-cta .btn,
  .casino-card .casino-cta .btn-primary {
    font-size: 14px !important;
    padding: 14px 22px !important;
    min-width: 200px !important;
  }
}

/* ============================================
   Casino card CTA area - final polished layout
   ============================================ */

.casino-card .casino-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 4px 6px !important;
  min-width: 0;
  overflow: visible !important;
  box-sizing: border-box;
  width: 100%;
}

.casino-card .casino-cta .btn,
.casino-card .casino-cta .btn-primary {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 13px 12px !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 44px !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 3px 10px rgba(179, 141, 47, 0.30);
  transition: all 0.2s;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}
.casino-card .casino-cta .btn:hover,
.casino-card .casino-cta .btn-primary:hover {
  background: var(--navy-2) !important;
  box-shadow: 0 5px 14px rgba(179, 141, 47, 0.50);
  transform: translateY(-1px);
}

/* oc-claimed below the button - a plain line of text, centered, inside the card */
.casino-card .casino-cta .oc-claimed,
.casino-cta .oc-claimed {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--navy) !important;
  font-family: var(--font-head) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}

/* Card itself: give enough vertical room so the claimed row sits inside the border */
.casino-card {
  align-items: stretch !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* ============================================
   CTA buttons v3 - high-contrast red + visible claimed line
   ============================================ */

/* Primary casino CTA: red gradient, bold white, bigger */
.casino-card .casino-cta .btn,
.casino-card .casino-cta .btn-primary,
.casino-card .casino-cta a.btn,
.casino-card .casino-cta a.btn-primary {
  background: linear-gradient(135deg, #e94f3d 0%, #c23e2e 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 44px !important;
  padding: 15px 18px !important;
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(233, 79, 61, 0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
}
.casino-card .casino-cta .btn:hover,
.casino-card .casino-cta .btn-primary:hover,
.casino-card .casino-cta a.btn:hover,
.casino-card .casino-cta a.btn-primary:hover {
  background: linear-gradient(135deg, #f26250 0%, #d14939 100%) !important;
  box-shadow: 0 6px 20px rgba(233, 79, 61, 0.60), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  transform: translateY(-2px) !important;
}

/* The claimed-today line below the button: subtle dark pill, white text, clearly legible */
.casino-card .casino-cta .oc-claimed,
.casino-cta .oc-claimed {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 10px auto 0 !important;
  padding: 5px 12px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(179, 141, 47, 0.35) !important;
  border-radius: 44px !important;
  color: #ffffff !important;
  font-family: var(--font-head) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* On mobile, let claimed text wrap on 2 lines if needed */
@media (max-width: 720px) {
  .casino-card .casino-cta .oc-claimed,
  .casino-cta .oc-claimed {
    white-space: normal !important;
    text-overflow: clip !important;
  }
}

/* Any other CTA using .btn-primary on the site (hero CTAs, hub tabs, etc.) also gets the red primary */
.btn-primary,
a.btn-primary,
.hero-ctas .btn-primary,
.sc-cta.btn-primary {
  background: linear-gradient(135deg, #e94f3d 0%, #c23e2e 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(233, 79, 61, 0.40) !important;
}
.btn-primary:hover,
a.btn-primary:hover {
  background: linear-gradient(135deg, #f26250 0%, #d14939 100%) !important;
  box-shadow: 0 6px 20px rgba(233, 79, 61, 0.55) !important;
  transform: translateY(-1px);
}


/* ============================================
   Hero - new 2400x500 banner, full width visible, text on left
   ============================================ */
.sc-hero-pane.sc-hero-img-pane {
  position: relative;
  padding: 0;
  margin: 0;
  background: #0a0a0a;
  overflow: hidden;
  display: block;
  min-height: 0;
}
.sc-hero-pane.sc-hero-img-pane .sc-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: cover;
}
.sc-hero-pane.sc-hero-img-pane .sc-hero-copy {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 460px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
.sc-hero-pane.sc-hero-img-pane .sc-hero-kicker {
  background: rgba(10,10,10,0.55);
  color: var(--navy);
  padding: 5px 12px;
  border-radius: 44px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
  border: 1px solid rgba(179,141,47,0.4);
}
.sc-hero-pane.sc-hero-img-pane .sc-hero-h1 {
  font-size: 2rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 10px;
  font-weight: 900;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
}
.sc-hero-pane.sc-hero-img-pane .sc-hero-lede {
  color: #e8e8e8;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 14px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.85);
}
.sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .sc-hero-pane.sc-hero-img-pane .sc-hero-copy { max-width: 340px; left: 24px; }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.6rem; }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-lede { font-size: 0.82rem; }
}

@media (max-width: 760px) {
  .sc-hero-pane.sc-hero-img-pane { padding-bottom: 18px; }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-img { position: static; }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-copy {
    position: static; transform: none;
    margin: 18px 16px 0; max-width: 100%;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.5rem; }
}


/* AU market hero - full visible image, text overlay */
.page-hero.au-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.au-hero-bg .au-hero-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
}
.page-hero.au-hero-bg .container {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 540px;
  padding: 0;
  background: transparent;
}
.page-hero.au-hero-bg .breadcrumbs,
.page-hero.au-hero-bg h1,
.page-hero.au-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.au-hero-bg h1 {
  font-size: 1.9rem !important;
  line-height: 1.1 !important;
}
.page-hero.au-hero-bg .lead {
  font-size: 0.92rem !important;
  color: #e8e8e8 !important;
}
.page-hero.au-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.au-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.au-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.au-hero-bg .lead { font-size: 0.82rem !important; }
}

@media (max-width: 760px) {
  .page-hero.au-hero-bg { padding-bottom: 16px !important; }
  .page-hero.au-hero-bg .au-hero-img { position: static; }
  .page-hero.au-hero-bg .container {
    position: static;
    transform: none;
    margin: 14px 16px 0;
    max-width: 100%;
  }
  .page-hero.au-hero-bg h1 { font-size: 1.4rem !important; }
}


/* BE market hero background */
.page-hero.be-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.be-hero-bg .be-hero-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
}
.page-hero.be-hero-bg .container {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 540px;
  padding: 0;
  background: transparent;
}
.page-hero.be-hero-bg .breadcrumbs,
.page-hero.be-hero-bg h1,
.page-hero.be-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.be-hero-bg h1 {
  font-size: 1.9rem !important;
  line-height: 1.1 !important;
}
.page-hero.be-hero-bg .lead {
  font-size: 0.92rem !important;
  color: #e8e8e8 !important;
}
.page-hero.be-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.be-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.be-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.be-hero-bg .lead { font-size: 0.82rem !important; }
}

@media (max-width: 760px) {
  .page-hero.be-hero-bg { padding-bottom: 16px !important; }
  .page-hero.be-hero-bg .be-hero-img { position: static; }
  .page-hero.be-hero-bg .container {
    position: static;
    transform: none;
    margin: 14px 16px 0;
    max-width: 100%;
  }
  .page-hero.be-hero-bg h1 { font-size: 1.4rem !important; }
}


/* Any "th-hero-art" or decorative illustration beside the copy becomes irrelevant - hide */
.page-hero.th-hero.th-hero-bg .th-hero-art,
.page-hero.th-hero.th-hero-bg .th-hero-illustration,
.page-hero.th-hero.th-hero-bg .th-hero-image { display: none !important; }


/* TH market hero - <img>+overlay pattern (mirror AU/BE) */
.page-hero.th-hero.th-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.th-hero.th-hero-bg > .th-hero-img-el {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
}
.page-hero.th-hero.th-hero-bg .container {
  position: absolute !important;
  top: 50% !important;
  left: 5% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  max-width: 560px !important;
  width: auto !important;
  padding: 0 !important;
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  background: transparent !important;
}
.page-hero.th-hero.th-hero-bg .th-hero-copy {
  max-width: 560px !important;
  text-align: left !important;
}
.page-hero.th-hero.th-hero-bg .th-hero-copy h1,
.page-hero.th-hero.th-hero-bg .th-hero-copy .lead,
.page-hero.th-hero.th-hero-bg .th-hero-copy .breadcrumbs,
.page-hero.th-hero.th-hero-bg .th-hero-copy .th-badge {
  text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.th-hero.th-hero-bg .th-hero-copy h1 {
  font-size: 1.55rem !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}
.page-hero.th-hero.th-hero-bg .th-hero-copy .lead {
  font-size: 0.85rem !important;
  color: #e8e8e8 !important;
  margin: 0 0 10px !important;
}
.page-hero.th-hero.th-hero-bg .th-hero-copy .th-badge {
  display: inline-block;
  background: rgba(179,141,47,0.22) !important;
  color: var(--navy) !important;
  padding: 4px 10px !important;
  border-radius: 44px !important;
  border: 1px solid rgba(179,141,47,0.4) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 8px !important;
}
.page-hero.th-hero.th-hero-bg .th-hero-copy .th-hero-cta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.page-hero.th-hero.th-hero-bg .th-hero-copy .th-chips {
  display: none !important;
}
.page-hero.th-hero.th-hero-bg .blob { display: none !important; }
.page-hero.th-hero.th-hero-bg figure.th-hero-img,
.page-hero.th-hero.th-hero-bg .th-hero-copy figure,
.page-hero.th-hero.th-hero-bg .container > figure { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.th-hero.th-hero-bg .container { max-width: 400px !important; left: 24px !important; }
  .page-hero.th-hero.th-hero-bg .th-hero-copy h1 { font-size: 1.3rem !important; }
  .page-hero.th-hero.th-hero-bg .th-hero-copy .lead { font-size: 0.78rem !important; }
}

@media (max-width: 760px) {
  .page-hero.th-hero.th-hero-bg { padding-bottom: 16px !important; }
  .page-hero.th-hero.th-hero-bg > .th-hero-img-el { position: static; }
  .page-hero.th-hero.th-hero-bg .container {
    position: static !important;
    transform: none !important;
    margin: 14px 16px 0 !important;
    max-width: 100% !important;
  }
  .page-hero.th-hero.th-hero-bg .th-hero-copy h1 { font-size: 1.2rem !important; }
}


/* DK market hero background */
.page-hero.dk-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.dk-hero-bg .dk-hero-img {
  display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0;
}
.page-hero.dk-hero-bg .container {
  position: absolute; top: 50%; left: 5%; transform: translateY(-50%);
  z-index: 3; max-width: 540px; padding: 0; background: transparent;
}
.page-hero.dk-hero-bg .breadcrumbs,
.page-hero.dk-hero-bg h1,
.page-hero.dk-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.dk-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.dk-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.dk-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.dk-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.dk-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.dk-hero-bg .lead { font-size: 0.82rem !important; }
}
@media (max-width: 760px) {
  .page-hero.dk-hero-bg { padding-bottom: 16px !important; }
  .page-hero.dk-hero-bg .dk-hero-img { position: static; }
  .page-hero.dk-hero-bg .container {
    position: static; transform: none;
    margin: 14px 16px 0; max-width: 100%;
  }
  .page-hero.dk-hero-bg h1 { font-size: 1.4rem !important; }
}


/* FR market hero background */
.page-hero.fr-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.fr-hero-bg .fr-hero-img {
  display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0;
}
.page-hero.fr-hero-bg .container {
  position: absolute; top: 50%; left: 5%; transform: translateY(-50%);
  z-index: 3; max-width: 540px; padding: 0; background: transparent;
}
.page-hero.fr-hero-bg .breadcrumbs,
.page-hero.fr-hero-bg h1,
.page-hero.fr-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.fr-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.fr-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.fr-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.fr-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.fr-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.fr-hero-bg .lead { font-size: 0.82rem !important; }
}
@media (max-width: 760px) {
  .page-hero.fr-hero-bg { padding-bottom: 16px !important; }
  .page-hero.fr-hero-bg .fr-hero-img { position: static; }
  .page-hero.fr-hero-bg .container {
    position: static; transform: none;
    margin: 14px 16px 0; max-width: 100%;
  }
  .page-hero.fr-hero-bg h1 { font-size: 1.4rem !important; }
}


/* IE market hero background */
.page-hero.ie-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.ie-hero-bg .ie-hero-img {
  display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0;
}
.page-hero.ie-hero-bg .container {
  position: absolute; top: 50%; left: 5%; transform: translateY(-50%);
  z-index: 3; max-width: 540px; padding: 0; background: transparent;
}
.page-hero.ie-hero-bg .breadcrumbs,
.page-hero.ie-hero-bg h1,
.page-hero.ie-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.ie-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.ie-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.ie-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.ie-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.ie-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.ie-hero-bg .lead { font-size: 0.82rem !important; }
}
@media (max-width: 760px) {
  .page-hero.ie-hero-bg { padding-bottom: 16px !important; }
  .page-hero.ie-hero-bg .ie-hero-img { position: static; }
  .page-hero.ie-hero-bg .container {
    position: static; transform: none;
    margin: 14px 16px 0; max-width: 100%;
  }
  .page-hero.ie-hero-bg h1 { font-size: 1.4rem !important; }
}


/* NL market hero background */
.page-hero.nl-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.nl-hero-bg .nl-hero-img {
  display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0;
}
.page-hero.nl-hero-bg .container {
  position: absolute; top: 50%; left: 5%; transform: translateY(-50%);
  z-index: 3; max-width: 540px; padding: 0; background: transparent;
}
.page-hero.nl-hero-bg .breadcrumbs,
.page-hero.nl-hero-bg h1,
.page-hero.nl-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.nl-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.nl-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.nl-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.nl-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.nl-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.nl-hero-bg .lead { font-size: 0.82rem !important; }
}
@media (max-width: 760px) {
  .page-hero.nl-hero-bg { padding-bottom: 16px !important; }
  .page-hero.nl-hero-bg .nl-hero-img { position: static; }
  .page-hero.nl-hero-bg .container {
    position: static; transform: none;
    margin: 14px 16px 0; max-width: 100%;
  }
  .page-hero.nl-hero-bg h1 { font-size: 1.4rem !important; }
}


/* PT market hero background */
.page-hero.pt-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.pt-hero-bg .pt-hero-img {
  display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0;
}
.page-hero.pt-hero-bg .container {
  position: absolute; top: 50%; left: 5%; transform: translateY(-50%);
  z-index: 3; max-width: 540px; padding: 0; background: transparent;
}
.page-hero.pt-hero-bg .breadcrumbs,
.page-hero.pt-hero-bg h1,
.page-hero.pt-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.pt-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.pt-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.pt-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.pt-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.pt-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.pt-hero-bg .lead { font-size: 0.82rem !important; }
}
@media (max-width: 760px) {
  .page-hero.pt-hero-bg { padding-bottom: 16px !important; }
  .page-hero.pt-hero-bg .pt-hero-img { position: static; }
  .page-hero.pt-hero-bg .container {
    position: static; transform: none;
    margin: 14px 16px 0; max-width: 100%;
  }
  .page-hero.pt-hero-bg h1 { font-size: 1.4rem !important; }
}


/* PT market hero also for article-hero */
.article-hero.pt-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.article-hero.pt-hero-bg .pt-hero-img {
  display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0;
}
.article-hero.pt-hero-bg .container {
  position: absolute; top: 50%; left: 5%; transform: translateY(-50%);
  z-index: 3; max-width: 540px; padding: 0; background: transparent;
}
.article-hero.pt-hero-bg .breadcrumbs,
.article-hero.pt-hero-bg h1,
.article-hero.pt-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.article-hero.pt-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.article-hero.pt-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.article-hero.pt-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .article-hero.pt-hero-bg .container { max-width: 400px; left: 24px; }
  .article-hero.pt-hero-bg h1 { font-size: 1.55rem !important; }
  .article-hero.pt-hero-bg .lead { font-size: 0.82rem !important; }
}
@media (max-width: 760px) {
  .article-hero.pt-hero-bg { padding-bottom: 16px !important; }
  .article-hero.pt-hero-bg .pt-hero-img { position: static; }
  .article-hero.pt-hero-bg .container {
    position: static; transform: none;
    margin: 14px 16px 0; max-width: 100%;
  }
  .article-hero.pt-hero-bg h1 { font-size: 1.4rem !important; }
}


/* SE market hero background */
.page-hero.se-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.se-hero-bg .se-hero-img {
  display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0;
}
.page-hero.se-hero-bg .container {
  position: absolute; top: 50%; left: 5%; transform: translateY(-50%);
  z-index: 3; max-width: 540px; padding: 0; background: transparent;
}
.page-hero.se-hero-bg .breadcrumbs,
.page-hero.se-hero-bg h1,
.page-hero.se-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.se-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.se-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.se-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.se-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.se-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.se-hero-bg .lead { font-size: 0.82rem !important; }
}
@media (max-width: 760px) {
  .page-hero.se-hero-bg { padding-bottom: 16px !important; }
  .page-hero.se-hero-bg .se-hero-img { position: static; }
  .page-hero.se-hero-bg .container {
    position: static; transform: none;
    margin: 14px 16px 0; max-width: 100%;
  }
  .page-hero.se-hero-bg h1 { font-size: 1.4rem !important; }
}


/* UK market hero background */
.page-hero.uk-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.uk-hero-bg .uk-hero-img {
  display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0;
}
.page-hero.uk-hero-bg .container {
  position: absolute; top: 50%; left: 5%; transform: translateY(-50%);
  z-index: 3; max-width: 540px; padding: 0; background: transparent;
}
.page-hero.uk-hero-bg .breadcrumbs,
.page-hero.uk-hero-bg h1,
.page-hero.uk-hero-bg .lead {
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
  color: #fff !important;
}
.page-hero.uk-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.uk-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.uk-hero-bg .blob { display: none !important; }

@media (max-width: 1100px) {
  .page-hero.uk-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.uk-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.uk-hero-bg .lead { font-size: 0.82rem !important; }
}
@media (max-width: 760px) {
  .page-hero.uk-hero-bg { padding-bottom: 16px !important; }
  .page-hero.uk-hero-bg .uk-hero-img { position: static; }
  .page-hero.uk-hero-bg .container {
    position: static; transform: none;
    margin: 14px 16px 0; max-width: 100%;
  }
  .page-hero.uk-hero-bg h1 { font-size: 1.4rem !important; }
}

/* ---------- EMERALD GREEN CTA OVERRIDE (applies to every primary CTA button site-wide) ---------- */
:root {
  --cta-green: #18C98B;
  --cta-green-deep: #10a874;
}
.btn-primary,
a.btn-primary,
button.btn-primary,
.cta-primary,
.hero-ctas .btn-primary,
.sc-cta.btn-primary,
.casino-card .casino-cta .btn-primary,
.casino-card .casino-cta a.btn-primary,
.sc-hero-cta-row .btn-primary,
.gbtn-primary,
.oc-to-cta,
.oc-ex-cta {
  background: linear-gradient(135deg, #18C98B 0%, #10a874 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(24, 201, 139, .40) !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.cta-primary:hover,
.hero-ctas .btn-primary:hover,
.sc-cta.btn-primary:hover,
.casino-card .casino-cta .btn-primary:hover,
.casino-card .casino-cta a.btn-primary:hover,
.sc-hero-cta-row .btn-primary:hover,
.gbtn-primary:hover,
.oc-to-cta:hover,
.oc-ex-cta:hover {
  background: linear-gradient(135deg, #10a874 0%, #0d8f5f 100%) !important;
  box-shadow: 0 6px 18px rgba(24, 201, 139, .50) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active {
  transform: translateY(0);
}

/* ---------- MOBILE HERO: NO image, compact height, CTA lifted to top ---------- */
@media (max-width: 760px) {
  /* --- Homepage + Bonus Calculator (sc-hero): hide image, use dark gradient --- */
  .sc-hero-pane.sc-hero-img-pane {
    padding: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 55%, #232428 100%) !important;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-img {
    display: none !important;
  }
  .sc-hero-pane.sc-hero-img-pane::after {
    display: none !important;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-copy {
    position: relative !important;
    z-index: 3 !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 18px 20px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-kicker {
    margin-bottom: 0;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.55rem !important; margin: 0 !important; }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-lede { font-size: 0.88rem !important; margin: 0 !important; }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row .btn {
    width: auto !important;
    flex: 1 1 140px;
    min-width: 140px;
    justify-content: center;
  }

  /* --- All per-market hero: hide image, compact --- */
  .page-hero.au-hero-bg,
  .page-hero.at-hero-bg,
  .page-hero.be-hero-bg,
  .page-hero.de-hero-bg,
  .page-hero.th-hero-bg,
  .page-hero.dk-hero-bg,
  .page-hero.fr-hero-bg,
  .page-hero.ie-hero-bg,
  .page-hero.nl-hero-bg,
  .page-hero.pt-hero-bg,
  .page-hero.se-hero-bg,
  .page-hero.uk-hero-bg,
  .article-hero.pt-hero-bg {
    padding: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 55%, #232428 100%) !important;
  }
  .page-hero.au-hero-bg .au-hero-img,
  .page-hero.at-hero-bg .at-hero-img,
  .page-hero.be-hero-bg .be-hero-img,
  .page-hero.de-hero-bg .de-hero-img,
  .page-hero.th-hero-bg .th-hero-img,
  .page-hero.dk-hero-bg .dk-hero-img,
  .page-hero.fr-hero-bg .fr-hero-img,
  .page-hero.ie-hero-bg .ie-hero-img,
  .page-hero.nl-hero-bg .nl-hero-img,
  .page-hero.pt-hero-bg .pt-hero-img,
  .page-hero.se-hero-bg .se-hero-img,
  .page-hero.uk-hero-bg .uk-hero-img,
  .article-hero.pt-hero-bg .pt-hero-img {
    display: none !important;
  }
  .page-hero.au-hero-bg::after,
  .page-hero.at-hero-bg::after,
  .page-hero.be-hero-bg::after,
  .page-hero.de-hero-bg::after,
  .page-hero.th-hero-bg::after,
  .page-hero.dk-hero-bg::after,
  .page-hero.fr-hero-bg::after,
  .page-hero.ie-hero-bg::after,
  .page-hero.nl-hero-bg::after,
  .page-hero.pt-hero-bg::after,
  .page-hero.se-hero-bg::after,
  .page-hero.uk-hero-bg::after,
  .article-hero.pt-hero-bg::after {
    display: none !important;
  }
  .page-hero.au-hero-bg .container,
  .page-hero.at-hero-bg .container,
  .page-hero.be-hero-bg .container,
  .page-hero.de-hero-bg .container,
  .page-hero.th-hero-bg .container,
  .page-hero.dk-hero-bg .container,
  .page-hero.fr-hero-bg .container,
  .page-hero.ie-hero-bg .container,
  .page-hero.nl-hero-bg .container,
  .page-hero.pt-hero-bg .container,
  .page-hero.se-hero-bg .container,
  .page-hero.uk-hero-bg .container,
  .article-hero.pt-hero-bg .container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 3 !important;
    max-width: 100% !important;
    padding: 16px 20px 18px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .page-hero.au-hero-bg h1,
  .page-hero.at-hero-bg h1,
  .page-hero.be-hero-bg h1,
  .page-hero.de-hero-bg h1,
  .page-hero.th-hero-bg h1,
  .page-hero.dk-hero-bg h1,
  .page-hero.fr-hero-bg h1,
  .page-hero.ie-hero-bg h1,
  .page-hero.nl-hero-bg h1,
  .page-hero.pt-hero-bg h1,
  .page-hero.se-hero-bg h1,
  .page-hero.uk-hero-bg h1,
  .article-hero.pt-hero-bg h1 {
    font-size: 1.4rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  .page-hero.au-hero-bg .lead,
  .page-hero.at-hero-bg .lead,
  .page-hero.be-hero-bg .lead,
  .page-hero.de-hero-bg .lead,
  .page-hero.th-hero-bg .lead,
  .page-hero.dk-hero-bg .lead,
  .page-hero.fr-hero-bg .lead,
  .page-hero.ie-hero-bg .lead,
  .page-hero.nl-hero-bg .lead,
  .page-hero.pt-hero-bg .lead,
  .page-hero.se-hero-bg .lead,
  .page-hero.uk-hero-bg .lead,
  .article-hero.pt-hero-bg .lead {
    font-size: 0.82rem !important;
    color: #d8d8d8 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
}

/* ---------- Very narrow screens: stack hero CTAs & tighter H1 ---------- */
@media (max-width: 480px) {
  .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row {
    flex-direction: column !important;
    width: 100%;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row .btn {
    width: 100% !important;
    flex: none !important;
    max-width: 100%;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.45rem !important; }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-lede { font-size: 0.85rem !important; }
  .page-hero.au-hero-bg h1,
  .page-hero.at-hero-bg h1,
  .page-hero.be-hero-bg h1,
  .page-hero.de-hero-bg h1,
  .page-hero.th-hero-bg h1,
  .page-hero.dk-hero-bg h1,
  .page-hero.fr-hero-bg h1,
  .page-hero.ie-hero-bg h1,
  .page-hero.nl-hero-bg h1,
  .page-hero.pt-hero-bg h1,
  .page-hero.se-hero-bg h1,
  .page-hero.uk-hero-bg h1,
  .article-hero.pt-hero-bg h1 {
    font-size: 1.35rem !important;
  }
  .page-hero.au-hero-bg .lead,
  .page-hero.at-hero-bg .lead,
  .page-hero.be-hero-bg .lead,
  .page-hero.de-hero-bg .lead,
  .page-hero.th-hero-bg .lead,
  .page-hero.dk-hero-bg .lead,
  .page-hero.fr-hero-bg .lead,
  .page-hero.ie-hero-bg .lead,
  .page-hero.nl-hero-bg .lead,
  .page-hero.pt-hero-bg .lead,
  .page-hero.se-hero-bg .lead,
  .page-hero.uk-hero-bg .lead,
  .article-hero.pt-hero-bg .lead {
    font-size: 0.82rem !important;
  }
}

/* ---------- MARKETS DROPDOWN: dark background + bright text for readability ---------- */
.nav .dropdown-menu,
.nav .dropdown-submenu,
.nav .has-dropdown .dropdown-menu,
.nav .has-submenu .dropdown-submenu {
  background: #1f2024 !important;
  border: 1px solid #4f4f4f !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.55) !important;
}
.nav .dropdown-menu > a,
.nav .dropdown-menu .submenu-parent,
.nav .dropdown-submenu a {
  color: #f5f5f5 !important;
  font-weight: 600;
}
.nav .dropdown-menu > a:hover,
.nav .dropdown-menu .submenu-parent:hover,
.nav .dropdown-submenu a:hover {
  background: #343434 !important;
  color: #e4ce97 !important;
}
.nav .dropdown-menu .submenu-caret {
  color: #b38d2f !important;
  opacity: 0.8;
}
.nav .dropdown-menu > a:hover .submenu-caret,
.nav .dropdown-menu .submenu-parent:hover .submenu-caret {
  color: #e4ce97 !important;
  opacity: 1;
}

/* Mobile dropdown: keep dark theme (was overriding to bg-alt) */
@media (max-width: 960px) {
  .nav .dropdown-menu {
    background: #1f2024 !important;
    border: 1px solid #4f4f4f !important;
  }
  .nav .dropdown-submenu {
    background: #2a2b30 !important;
    border: 1px solid #4f4f4f !important;
  }
  .nav .dropdown-menu > a,
  .nav .dropdown-menu .submenu-parent,
  .nav .dropdown-submenu a {
    color: #f5f5f5 !important;
  }
}

/* ---------- MOBILE BURGER MENU: dark background + bright readable text ---------- */
@media (max-width: 900px) {
  .nav {
    background: #1a1a1a !important;
    border-top: 1px solid #343434 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.55) !important;
  }
  .nav a,
  .nav .dropdown-trigger,
  .nav button {
    color: #f5f5f5 !important;
    font-weight: 700;
  }
  .nav > a {
    border-bottom: 1px solid #2a2a2a;
  }
  .nav a:hover,
  .nav a:active,
  .nav .dropdown-trigger:hover,
  .nav .dropdown-trigger:active {
    color: #e4ce97 !important;
    background: #232428 !important;
  }
  .nav .has-dropdown.open > .dropdown-trigger {
    color: #e4ce97 !important;
    background: #232428 !important;
  }
  .nav .dropdown-menu {
    background: #232428 !important;
    border: 1px solid #343434 !important;
  }
  .nav .dropdown-submenu {
    background: #2d2e33 !important;
    border: 1px solid #3a3a3a !important;
  }
  .nav .dropdown-menu > a,
  .nav .dropdown-menu .submenu-parent,
  .nav .dropdown-submenu a {
    color: #f5f5f5 !important;
    font-weight: 600;
  }
  .nav .dropdown-menu > a:hover,
  .nav .dropdown-menu .submenu-parent:hover,
  .nav .dropdown-submenu a:hover {
    background: #343434 !important;
    color: #e4ce97 !important;
  }
  .nav .submenu-parent.open,
  .nav .has-submenu.open > .submenu-parent {
    color: #e4ce97 !important;
    background: #343434 !important;
  }
  .nav .submenu-caret {
    color: #b38d2f !important;
    opacity: 0.85;
  }
  .menu-toggle {
    color: #e4ce97 !important;
  }
}

/* ---------- DE market hero background ---------- */
.page-hero.de-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.de-hero-bg .de-hero-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.page-hero.de-hero-bg .container {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 540px;
  padding: 0;
}
.page-hero.de-hero-bg .breadcrumbs,
.page-hero.de-hero-bg h1,
.page-hero.de-hero-bg .lead {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
}
.page-hero.de-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.de-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.de-hero-bg .blob { display: none !important; }
@media (max-width: 1100px) {
  .page-hero.de-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.de-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.de-hero-bg .lead { font-size: 0.82rem !important; }
}

/* ---------- AT market hero background ---------- */
.page-hero.at-hero-bg {
  position: relative !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  overflow: hidden !important;
  min-height: 0 !important;
  display: block !important;
}
.page-hero.at-hero-bg .at-hero-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.page-hero.at-hero-bg .container {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 540px;
  padding: 0;
}
.page-hero.at-hero-bg .breadcrumbs,
.page-hero.at-hero-bg h1,
.page-hero.at-hero-bg .lead {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6);
}
.page-hero.at-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; }
.page-hero.at-hero-bg .lead { font-size: 0.92rem !important; color: #e8e8e8 !important; }
.page-hero.at-hero-bg .blob { display: none !important; }
@media (max-width: 1100px) {
  .page-hero.at-hero-bg .container { max-width: 400px; left: 24px; }
  .page-hero.at-hero-bg h1 { font-size: 1.55rem !important; }
  .page-hero.at-hero-bg .lead { font-size: 0.82rem !important; }
}

/* ---------- DE/AT casino-card: make .btn-secondary green like .btn-primary (consistent CTA) ---------- */
.casino-card .btn-secondary,
.casino-card a.btn-secondary,
.casino-card .btn-block,
article.casino-card .btn,
article.casino-card a.btn {
  background: linear-gradient(135deg, #18C98B 0%, #10a874 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(24, 201, 139, .40) !important;
}
.casino-card .btn-secondary:hover,
.casino-card a.btn-secondary:hover,
article.casino-card .btn:hover {
  background: linear-gradient(135deg, #10a874 0%, #0d8f5f 100%) !important;
  box-shadow: 0 6px 18px rgba(24, 201, 139, .50) !important;
  color: #fff !important;
}

/* top-pick badge positioning fix (zockercheck layout) */
.casino-card.top-pick .top-pick-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #18C98B;
  color: #fff;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(24, 201, 139, .35);
}

/* ---------- DE/AT pages: bigger casino-thumb to properly show logo images ---------- */
body.lesson-layout .casino-card .casino-thumb {
  height: auto !important;
  min-height: 108px !important;
  padding: 10px 14px !important;
  background: transparent !important;
  min-width: 160px !important;
}
body.lesson-layout .casino-card .casino-thumb img {
  max-height: 108px !important;
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
}
body.lesson-layout .casino-card .casino-thumb.th-mino img,
body.lesson-layout .casino-card .casino-thumb.has-new img {
  max-height: 120px !important;
  max-width: 200px !important;
  border-radius: 12px !important;
}
body.lesson-layout .casino-card .casino-thumb .new-flag {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e94f3d;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
body.lesson-layout .casino-card .casino-thumb.has-new {
  position: relative;
  overflow: visible !important;
}

/* ---------- CTA buttons: GREEN for both btn-primary and btn-secondary + .btn with maximum specificity ---------- */
body.lesson-layout .casino-card .btn,
body.lesson-layout .casino-card a.btn,
body.lesson-layout .casino-card .btn-primary,
body.lesson-layout .casino-card a.btn-primary,
body.lesson-layout .casino-card .btn-secondary,
body.lesson-layout .casino-card a.btn-secondary,
body.lesson-layout .casino-card .btn-block,
body.lesson-layout .casino-card a.btn-block,
body.lesson-layout .casino-list .casino-card .btn,
body.lesson-layout .casino-list .casino-card a.btn,
body.lesson-layout .casino-list .casino-card .btn-primary,
body.lesson-layout .casino-list .casino-card .btn-secondary {
  background: linear-gradient(135deg, #18C98B 0%, #10a874 100%) !important;
  color: #fff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(24, 201, 139, .40) !important;
  text-decoration: none !important;
}
body.lesson-layout .casino-card .btn:hover,
body.lesson-layout .casino-card a.btn:hover,
body.lesson-layout .casino-card .btn-primary:hover,
body.lesson-layout .casino-card a.btn-primary:hover,
body.lesson-layout .casino-card .btn-secondary:hover,
body.lesson-layout .casino-card a.btn-secondary:hover {
  background: linear-gradient(135deg, #10a874 0%, #0d8f5f 100%) !important;
  box-shadow: 0 6px 18px rgba(24, 201, 139, .50) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Remove the "→" arrow that zockercheck's .btn-secondary::after adds */
body.lesson-layout .casino-card .btn-secondary::after {
  content: "" !important;
}

/* ---------- DE/AT pages: expand casino-card layout so logo column doesn't bleed into info ---------- */
body.lesson-layout .casino-list .casino-card {
  grid-template-columns: 60px 200px minmax(0, 1fr) 240px 220px !important;
  gap: 24px !important;
  padding: 20px 24px !important;
  background: #1a1a1a !important;
  border: 1px solid #4f4f4f !important;
}
body.lesson-layout .casino-list .casino-card:hover {
  border-color: #18C98B !important;
}
body.lesson-layout .casino-card .casino-thumb {
  height: auto !important;
  min-height: 108px !important;
  max-height: 140px !important;
  padding: 8px !important;
  background: transparent !important;
  min-width: 0 !important;
  width: 200px !important;
  max-width: 200px !important;
  overflow: visible !important;
}
body.lesson-layout .casino-card .casino-thumb img {
  max-height: 120px !important;
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
}

/* Hide the "NEU" / "Neu" badge on Mino Casino thumb */
body.lesson-layout .casino-card .casino-thumb.has-new .new-flag,
body.lesson-layout .casino-card .casino-thumb .new-flag {
  display: none !important;
}

/* Ensure casino-info column (name, rating, features) is fully visible */
body.lesson-layout .casino-card .casino-info {
  min-width: 0 !important;
  overflow: visible !important;
  padding-left: 0 !important;
}
body.lesson-layout .casino-card .casino-info h3 {
  color: #fff !important;
  font-size: 1.15rem !important;
  margin: 0 0 6px !important;
}

body.lesson-layout .casino-card .casino-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.lesson-layout .casino-card .casino-features li {
  color: #e8e8e8 !important;
  font-size: 14px !important;
  padding-left: 20px !important;
  position: relative !important;
}
body.lesson-layout .casino-card .casino-features li::before {
  content: "✓" !important;
  color: #18C98B !important;
  font-weight: 700 !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

/* Bonus column styling — match AU style: subtle bg, no heavy border */
body.lesson-layout .casino-card .casino-bonus {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
  text-align: center !important;
  color: #e8e8e8 !important;
}
body.lesson-layout .casino-card .casino-bonus .bonus-label {
  display: block !important;
  color: #b38d2f !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
body.lesson-layout .casino-card .casino-bonus .bonus-amount {
  display: block !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}
body.lesson-layout .casino-card .casino-bonus .bonus-terms {
  display: block !important;
  color: #b0b0b0 !important;
  font-size: 11.5px !important;
}
body.lesson-layout .casino-card .casino-bonus .bonus-terms a {
  color: #b38d2f !important;
  text-decoration: none !important;
}

/* Rank badge styling for dark theme */
body.lesson-layout .casino-list .rank-badge {
  background: #b38d2f !important;
  color: #fff !important;
}

/* Mobile layout adjustments */
@media (max-width: 900px) {
  body.lesson-layout .casino-list .casino-card {
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 12px 14px !important;
    padding: 16px !important;
  }
  body.lesson-layout .casino-card .casino-thumb {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
  }
  body.lesson-layout .casino-card .casino-thumb img {
    max-height: 90px !important;
    max-width: 160px !important;
  }
  body.lesson-layout .casino-card .casino-info,
  body.lesson-layout .casino-card .casino-bonus,
  body.lesson-layout .casino-card .casino-cta {
    grid-column: 1 / -1 !important;
  }
}


/* ---------- Metareavr sticky promo bar (casino-card style) ---------- */
.metareavr-promo-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  border-top: 1px solid #4f4f4f;
  box-shadow: 0 -8px 24px rgba(0,0,0,.55);
  z-index: 998;
  display: grid;
  grid-template-columns: auto 100px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  transform: translateY(100%);
  transition: transform .35s ease;
}
.metareavr-promo-bar.is-open { transform: translateY(0); }
.metareavr-promo-bar__stars {
  color: #e4ce97;
  font-size: 13px;
  letter-spacing: 2px;
}
.metareavr-promo-bar__logo {
  width: 100px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.metareavr-promo-bar__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.metareavr-promo-bar__copy {
  min-width: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metareavr-promo-bar__kicker {
  color: #b38d2f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.metareavr-promo-bar__name {
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
.metareavr-promo-bar__terms {
  color: #b0b0b0;
  font-size: 12.5px;
  line-height: 1.3;
}
.metareavr-promo-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #18C98B 0%, #10a874 100%);
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(24, 201, 139, .4);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.metareavr-promo-bar__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(24, 201, 139, .55);
  color: #fff;
}
.metareavr-promo-bar__dismiss {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.55);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.metareavr-promo-bar__dismiss:hover { color: #fff; background: rgba(255,255,255,.08); }
@media (max-width: 720px) {
  .metareavr-promo-bar {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 14px 10px 12px;
  }
  .metareavr-promo-bar__stars { display: none; }
  .metareavr-promo-bar__logo { width: 56px; height: 44px; padding: 2px; }
  .metareavr-promo-bar__name { font-size: 14px; }
  .metareavr-promo-bar__terms { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .metareavr-promo-bar__kicker { font-size: 10px; }
  .metareavr-promo-bar__cta { padding: 9px 14px; font-size: 12px; }
  .metareavr-promo-bar__dismiss { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; font-size: 16px; }
}

/* ---------- Metareavr exit-intent modal (casino-card bonus box style) ---------- */
.metareavr-exit {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.metareavr-exit.is-open { display: flex; animation: metareavr-exit-fade .25s ease; }
@keyframes metareavr-exit-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.metareavr-exit__card {
  position: relative;
  background: #1a1a1a;
  border: 1px solid #4f4f4f;
  border-radius: 12px;
  max-width: 460px;
  width: 100%;
  padding: 32px 26px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  text-align: center;
}
.metareavr-exit__suits { display: none; }
.metareavr-exit__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.7);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.metareavr-exit__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.metareavr-exit__head {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0 0 6px;
  line-height: 1.15;
}
.metareavr-exit__sub {
  color: #b0b0b0;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 18px;
  line-height: 1.4;
}
.metareavr-exit__bonus {
  background: #232428;
  border: 1px solid #4f4f4f;
  border-radius: 10px;
  padding: 16px 12px;
  margin-bottom: 14px;
}
.metareavr-exit__bonus-label {
  display: block;
  color: #b38d2f;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.metareavr-exit__bonus-pct {
  color: #18C98B;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.metareavr-exit__bonus-amt {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}
.metareavr-exit__note {
  color: #b0b0b0;
  font-size: 12.5px;
  margin: 0 0 18px;
  line-height: 1.4;
}
.metareavr-exit__cta {
  display: inline-block;
  background: linear-gradient(135deg, #18C98B 0%, #10a874 100%);
  color: #fff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 13px 30px;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(24,201,139,.45);
  margin-bottom: 10px;
  transition: transform .15s ease;
}
.metareavr-exit__cta:hover { transform: translateY(-1px); color: #fff !important; }
.metareavr-exit__skip {
  display: block;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  margin: 0 auto;
  padding: 4px;
}
.metareavr-exit__skip:hover { color: #fff; }


/* ---------- AT/DE market cards: match AU visual style ---------- */
/* Keep rating as inline flex so verdict pill sits next to it */
body.lesson-layout .casino-card .casino-info .rating {
  background: transparent !important;
  color: #b38d2f !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
/* Rating "★" prefix shown by zockercheck markup — keep natural inline flow */
body.lesson-layout .casino-card .casino-info .rating::before {
  content: "";
}

/* oc-score-desc verdict pill — matches AU green outline pill */
body.lesson-layout .casino-card .casino-info .oc-score-desc {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  color: #18C98B !important;
  border: 1px solid #18C98B !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
}
body.lesson-layout .casino-card .casino-info .oc-score-desc::before {
  content: "●" !important;
  font-size: 7px !important;
  line-height: 1 !important;
  color: #18C98B !important;
}

/* Hide the Umsatz/AGB/Min line to match AU's simpler bonus display */
body.lesson-layout .casino-card .casino-bonus .bonus-terms,
body.lesson-layout .casino-card .casino-bonus span.bonus-terms,
body.lesson-layout .casino-list .casino-card .casino-bonus .bonus-terms {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Bonus column cleanup for AU-style look */
body.lesson-layout .casino-card .casino-bonus .bonus-label {
  color: #b38d2f !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}
body.lesson-layout .casino-card .casino-bonus .bonus-amount {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* oc-claimed below CTA button — AU-style dark pill with fire emoji */
body.lesson-layout .casino-card .casino-cta .oc-claimed {
  display: inline-flex !important;
  align-items: center !important;
  background: #1a1a1a !important;
  color: #e4ce97 !important;
  border: 1px solid #4f4f4f !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin: 8px auto 0 !important;
  width: fit-content !important;
  white-space: nowrap !important;
}

/* ---------- DE/AT mobile: smaller logos + tighter card so CTA shows up higher ---------- */
@media (max-width: 900px) {
  body.lesson-layout .casino-list .casino-card {
    padding: 14px 14px 16px !important;
    gap: 8px 12px !important;
  }
  body.lesson-layout .casino-card .casino-thumb,
  body.lesson-layout .casino-card .casino-thumb.has-new,
  body.lesson-layout .casino-card .casino-thumb.th-mino {
    padding: 2px 10px !important;
    min-height: 60px !important;
    max-height: 70px !important;
    margin-bottom: 0 !important;
  }
  body.lesson-layout .casino-card .casino-thumb img,
  body.lesson-layout .casino-card .casino-thumb.has-new img,
  body.lesson-layout .casino-card .casino-thumb.th-mino img {
    max-height: 60px !important;
    max-width: 130px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 6px !important;
  }
  body.lesson-layout .casino-card .casino-info h3 {
    font-size: 1.05rem !important;
    margin: 2px 0 4px !important;
    text-align: center !important;
  }
  body.lesson-layout .casino-card .casino-info .rating {
    font-size: 14px !important;
  }
  body.lesson-layout .casino-card .casino-info .oc-score-desc {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    margin-left: 6px !important;
  }
  body.lesson-layout .casino-card .casino-bonus {
    padding: 10px 12px !important;
    margin: 0 !important;
  }
  body.lesson-layout .casino-card .casino-bonus .bonus-label {
    margin-bottom: 4px !important;
    font-size: 10.5px !important;
  }
  body.lesson-layout .casino-card .casino-bonus .bonus-amount {
    font-size: 14px !important;
  }
  body.lesson-layout .casino-card .casino-cta {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.lesson-layout .casino-card .casino-cta .btn,
  body.lesson-layout .casino-card .casino-cta .btn-primary {
    padding: 11px 16px !important;
    font-size: 13.5px !important;
  }
  body.lesson-layout .casino-card .casino-cta .oc-claimed {
    margin-top: 6px !important;
    padding: 3px 10px !important;
    font-size: 10.5px !important;
  }
  /* Casino features: smaller text and tighter spacing */
  body.lesson-layout .casino-card .casino-features {
    margin: 4px 0 0 !important;
    gap: 2px !important;
  }
  body.lesson-layout .casino-card .casino-features li {
    font-size: 12.5px !important;
    padding-left: 18px !important;
    line-height: 1.3 !important;
  }
  /* Grid rows: logo + info + bonus + cta tight */
  body.lesson-layout .casino-list .casino-card {
    grid-template-columns: 36px 1fr !important;
  }
  body.lesson-layout .casino-list .casino-card .rank-badge {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
  }
}

/* ---------- SE feat-card: TOPP 1 badge (replaces the fire emoji) ---------- */
.feat-card .feat-top-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #18C98B 0%, #10a874 100%);
  color: #fff;
  font-family: var(--font-head, Montserrat, sans-serif);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(24, 201, 139, .45), 0 0 0 2px #1a1a1a;
  z-index: 5;
  white-space: nowrap;
  line-height: 1;
}
.feat-card.is-hot { position: relative; overflow: visible !important; }
@media (max-width: 720px) {
  .feat-card .feat-top-badge {
    font-size: 11px;
    padding: 5px 14px;
    top: -10px;
  }
}

/* ---------- Content page tables (disclosure, responsible gambling, etc.): readable on dark theme ---------- */
.content table,
main table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 18px 0 !important;
  background: #1a1a1a !important;
  border: 1px solid #4f4f4f !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  color: #f0f0f0 !important;
}
.content table thead,
main table thead {
  background: #232428 !important;
}
.content table thead tr,
main table thead tr {
  background: #232428 !important;
}
.content table thead th,
main table thead th {
  background: #232428 !important;
  color: #e4ce97 !important;
  font-weight: 800 !important;
  text-align: left !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid #4f4f4f !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 12.5px !important;
}
.content table tbody tr,
main table tbody tr {
  background: #1a1a1a !important;
  border-bottom: 1px solid #343434 !important;
}
.content table tbody tr:nth-child(even),
main table tbody tr:nth-child(even) {
  background: #232428 !important;
}
.content table tbody td,
main table tbody td {
  color: #f0f0f0 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #343434 !important;
  vertical-align: top !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.content table tbody td strong,
main table tbody td strong {
  color: #fff !important;
  font-weight: 800 !important;
}
.content table tbody td a,
main table tbody td a {
  color: #18C98B !important;
  text-decoration: underline !important;
}
.content table tbody tr:last-child td,
main table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* ---------- Red text → green (brand button color) everywhere ---------- */
a:hover,
.nav a:hover,
.nav a.active,
.nav .dropdown-trigger:hover,
.nav .dropdown-menu > a:hover,
.nav .dropdown-menu .submenu-parent:hover,
.nav .dropdown-submenu a:hover,
.qa-tile:hover,
.section-head .see-all,
.see-all,
.section-head .see-all:hover,
.see-all:hover,
.casino-bonus .bonus-label,
.review-link:hover,
.market-tile .m-arrow,
.article-card .ac-tag,
.article-card .ac-read,
.bonus-card .b-link,
.team-card .tc-role,
.blog-card .tag,
.toc li::before,
.toc a:hover,
.pros-cons .cons h4,
.pros-cons .cons li::before,
.country-rows .c-arrow,
.pu-promo-strip .promo-howto,
.sp-figure .sp-num em,
.clamp-toggle,
.ms-kicker,
.blog-card .tag,
.ac-tag,
.article-card .ac-tag {
  color: #18C98B !important;
}
.nav a.active {
  border-bottom-color: #18C98B !important;
}

/* Market subnav active tab: green instead of red */
.market-subnav a.active {
  color: #18C98B !important;
}
.market-subnav a.active::after {
  background: #18C98B !important;
}

/* Footer top-offer bar: green background (brand button color) */
.oc-top-offer {
  background: linear-gradient(135deg, #18C98B 0%, #10a874 55%, #0d8f5f 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 28px rgba(24,201,139,.35), 0 2px 6px rgba(0,0,0,.25) !important;
}
.oc-to-badge {
  background: #0a2a1d !important;
  color: #e4ce97 !important;
}
.oc-to-logo {
  background: #0a2a1d !important;
}
.oc-to-cta {
  background: #0a2a1d !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}
.oc-to-cta:hover {
  background: #000 !important;
  color: #e4ce97 !important;
}

/* DE/AT: allow oc-claimed pill to wrap on 2 lines so long German text ("Mal heute beansprucht") isn't clipped */
body.lesson-layout .casino-card .casino-cta .oc-claimed {
  white-space: normal !important;
  max-width: 100% !important;
  text-align: center !important;
  padding: 5px 10px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.3 !important;
}

/* DE/AT: Mino Casino top-pick card — always green border (same as hover) */
body.lesson-layout .casino-list .casino-card.top-pick {
  border: 2px solid #18C98B !important;
  box-shadow: 0 0 0 4px rgba(24, 201, 139, .08), 0 8px 24px -8px rgba(24, 201, 139, .35) !important;
}
body.lesson-layout .casino-list .casino-card.top-pick:hover {
  border-color: #18C98B !important;
  box-shadow: 0 0 0 4px rgba(24, 201, 139, .14), 0 10px 28px -8px rgba(24, 201, 139, .5) !important;
}


/* SE market: .feat-card.is-hot (Mino/top-pick on feat-card markets) — green border instead of red */
.feat-card.is-hot {
  border: 2px solid #18C98B !important;
  box-shadow: 0 0 0 5px rgba(24, 201, 139, .06), 0 12px 30px -16px rgba(24, 201, 139, .28) !important;
}
.feat-card.is-hot:hover {
  border-color: #18C98B !important;
  box-shadow: 0 0 0 5px rgba(24, 201, 139, .14), 0 14px 32px -12px rgba(24, 201, 139, .5) !important;
}

/* DE/AT: Wild Tokyo logo gets a white outline so the dark lettering shows on dark card bg */
body.lesson-layout .casino-card .casino-thumb.th-wildtokyo img,
body.lesson-layout .casino-card .casino-thumb img[alt="Wild Tokyo"],
body.lesson-layout .casino-card .casino-thumb img[src*="wild-tokyo"] {
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff);
}

/* BE: Winolot logo — add white outline so the dark "Win" text shows on dark card bg */
body.lesson-layout .casino-card .casino-thumb img[src*="winolot"],
body.lesson-layout .casino-card .casino-thumb img[alt="Winolot"] {
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff);
}

/* BE: NIEUW badge in casino list — green (brand button color) instead of red */
.casino-thumb .oc-new-badge,
.casino-card .oc-new-badge,
body .oc-new-badge {
  background: linear-gradient(135deg, #18C98B 0%, #10a874 100%) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  letter-spacing: 0.1em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  box-shadow: 0 2px 6px rgba(24, 201, 139, .5), 0 0 0 1.5px #0a0a0a !important;
  top: -14px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 520px) {
  .casino-thumb .oc-new-badge,
  .casino-card .oc-new-badge,
  body .oc-new-badge {
    font-size: 9px !important;
    padding: 2px 7px !important;
    top: -11px !important;
  }
}

/* FR market: NorseMania logo — extra-large for better visibility */
body.lesson-layout .casino-card .casino-thumb img[src*="norsemania"],
body.lesson-layout .casino-card .casino-thumb img[alt="NorseMania"] {
  max-width: 290px !important;
  max-height: 200px !important;
  width: auto !important;
  height: auto !important;
  transform: scale(1.15) !important;
  transform-origin: center !important;
}
body.lesson-layout .casino-card .casino-thumb:has(img[src*="norsemania"]),
body.lesson-layout .casino-card .casino-thumb:has(img[alt="NorseMania"]) {
  min-height: 180px !important;
  padding: 10px 6px !important;
}

/* FR market: VipLuck logo — gold outline around the letters (drop-shadow stacking) */
body.lesson-layout .casino-card .casino-thumb img[src*="vipluck"],
body.lesson-layout .casino-card .casino-thumb img[alt="VipLuck Casino"] {
  filter:
    drop-shadow(1px 0 0 #b38d2f)
    drop-shadow(-1px 0 0 #b38d2f)
    drop-shadow(0 1px 0 #b38d2f)
    drop-shadow(0 -1px 0 #b38d2f)
    drop-shadow(1px 1px 0 #b38d2f)
    drop-shadow(-1px -1px 0 #b38d2f)
    drop-shadow(1px -1px 0 #b38d2f)
    drop-shadow(-1px 1px 0 #b38d2f);
}

/* FR market: NorseMania footer-bar logo — swap to tight-cropped version so letters fill the box */
html[lang^="fr"] .oc-top-offer .oc-to-logo[src*="norsemania"] {
  content: url("images/norsemania-casino-logo-tight.webp") !important;
  object-fit: contain !important;
  padding: 2px !important;
}

/* FR + BE markets: mobile — NEW/NIEUW/NOUVEAU badge in TOP-RIGHT corner of the entire casino-card, outside the logo area */
@media (max-width: 720px) {
  html[lang^="fr"] .casino-card,
  html[lang^="nl-BE"] .casino-card,
  html[lang^="nl"] .casino-card,
  html[lang^="fr-BE"] .casino-card {
    position: relative !important;
    overflow: visible !important;
  }
  html[lang^="fr"] .casino-card .thumb-wrap,
  html[lang^="nl-BE"] .casino-card .thumb-wrap,
  html[lang^="nl"] .casino-card .thumb-wrap,
  html[lang^="fr-BE"] .casino-card .thumb-wrap {
    position: static !important;
  }
  html[lang^="fr"] .casino-card .oc-new-badge,
  html[lang^="nl-BE"] .casino-card .oc-new-badge,
  html[lang^="nl"] .casino-card .oc-new-badge,
  html[lang^="fr-BE"] .casino-card .oc-new-badge {
    position: absolute !important;
    top: -10px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    font-size: 10px !important;
    padding: 3px 9px !important;
    letter-spacing: 0.08em !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, #18C98B 0%, #10a874 100%) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    box-shadow: 0 2px 6px rgba(24, 201, 139, .5), 0 0 0 1.5px #0a0a0a !important;
  }
}

/* All markets: footer top-offer bar — narrower on desktop, less empty space */
@media (min-width: 721px) {
  .oc-top-offer {
    max-width: 640px !important;
    width: auto !important;
    left: 50% !important;
  }
  .oc-top-offer-inner {
    grid-template-columns: auto 60px minmax(0, auto) auto auto !important;
    gap: 12px !important;
    padding: 10px 40px 10px 14px !important;
  }
  .oc-to-name {
    white-space: nowrap !important;
    -webkit-line-clamp: 1 !important;
    max-width: 240px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .oc-to-bonus {
    white-space: nowrap !important;
    max-width: 240px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* All markets: lead paragraph with Read more / Collapse toggle */
.lead.lead-clampable {
  position: relative;
  margin-bottom: 8px;
}
.lead.lead-clampable.is-clamped {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.4em;
}
@media (max-width: 720px) {
  .lead.lead-clampable.is-clamped {
    -webkit-line-clamp: 3;
    max-height: 5.1em;
  }
}
.lead-toggle {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  color: #18C98B;
  font-family: var(--font-head, inherit);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lead-toggle:hover,
.lead-toggle:focus {
  color: #10a874;
  outline: none;
}

/* AT/DE markets only: Mino Casino top-pick card — mobile fix so the UNSER TOP-TIPP badge
   no longer clips the horns of the Mino logo. Shrinks the badge's frame, slims the card's
   outer frame, and gives the thumb a little clearance below the badge.
   Scoped via :has(.casino-thumb.th-mino) so FR/other-market top-pick cards are untouched. */
@media (max-width: 720px) {
  body.lesson-layout .casino-list .casino-card.top-pick:has(.casino-thumb.th-mino) {
    padding-top: 30px !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 2px rgba(24, 201, 139, .10), 0 6px 18px -8px rgba(24, 201, 139, .35) !important;
  }
  body.lesson-layout .casino-list .casino-card.top-pick:has(.casino-thumb.th-mino):hover {
    box-shadow: 0 0 0 2px rgba(24, 201, 139, .18), 0 8px 22px -8px rgba(24, 201, 139, .5) !important;
  }
  body.lesson-layout .casino-list .casino-card.top-pick:has(.casino-thumb.th-mino) .top-pick-badge {
    top: -11px;
    padding: 3px 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(24, 201, 139, .3);
  }
  body.lesson-layout .casino-list .casino-card.top-pick .casino-thumb.th-mino {
    padding-top: 4px !important;
  }
}

/* BE/BE-FR: Crusado logo renders smaller than peers because its artwork sits
   inside extra transparent padding. Scale it up so it reads at the same visual
   weight as Tower, Atefia, etc. Applies on desktop and mobile. */
.casino-list .casino-card .casino-thumb img[src*="crusado-logo"] {
  transform: scale(1.5);
  transform-origin: center center;
}
@media (max-width: 720px) {
  .casino-list .casino-card .casino-thumb img[src*="crusado-logo"] {
    transform: scale(1.55);
    transform-origin: center center;
  }
}

/* ============================================================
   Three-in-one UI pass
   1) Exit pop-up — brighter text so all copy is legible
   2) Remaining red text under the logo → CTA button green
   3) Mobile hero — compact so the first CTA lifts higher on screen
   ============================================================ */

/* ---------- 1) Exit pop-up readability ---------- */
.metareavr-exit__sub   { color: #f0f0f0 !important; }
.metareavr-exit__note  { color: #e8e8e8 !important; }
.metareavr-exit__skip  { color: rgba(255,255,255,.85) !important; }
.metareavr-exit__skip:hover { color: #fff !important; }
.metareavr-exit__bonus-label { color: #f0dfb3 !important; }
.metareavr-exit__bonus-amt   { color: #ffffff !important; }

/* ---------- 2) Red text under the logo → CTA green ---------- */
.author-box .author-eyebrow,
.related-card .r-tag { color: #18C98B !important; }

/* ---------- 3) Mobile hero: trim vertical space so the CTA lifts ---------- */
@media (max-width: 720px) {
  /* Market/article/page hero: tighten padding, hide redundant chip + inline flag, clamp lead */
  .page-hero, .editorial-hero, .article-hero {
    padding: 8px 18px 12px !important;
  }
  .page-hero h1, .editorial-hero h1, .article-hero h1 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin: 2px 0 4px !important;
    gap: 4px !important;
  }
  /* H1 already carries an emoji flag + domain in text; drop the redundant chip and inline flag img */
  .page-hero h1 .h1-domain,
  .editorial-hero h1 .h1-domain,
  .article-hero h1 .h1-domain,
  .page-hero h1 img.flag-inline,
  .editorial-hero h1 img.flag-inline,
  .article-hero h1 img.flag-inline { display: none !important; }
  .page-hero .lead, .page-hero .lede,
  .editorial-hero .lead, .editorial-hero .lede,
  .article-hero .lead, .article-hero .lede {
    font-size: .80rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }
  .lead.lead-clampable.is-clamped {
    -webkit-line-clamp: 2 !important;
    max-height: 2.8em !important;
  }
  .lead-toggle {
    margin-top: 2px !important;
    font-size: 12.5px !important;
  }
  .page-hero .breadcrumbs, .editorial-hero .breadcrumbs, .article-hero .breadcrumbs,
  .page-hero .crumbs, .editorial-hero .crumbs {
    font-size: 10.5px !important;
    margin-bottom: 0 !important;
  }
  .list-heading { margin-top: 14px !important; font-size: 1.15rem !important; }

  /* Homepage / Bonus Calculator / News sc-hero: tighter copy stack */
  .sc-hero-pane.sc-hero-img-pane .sc-hero-copy {
    padding: 12px 18px 14px !important;
    gap: 6px !important;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 {
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-lede {
    font-size: 0.80rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row {
    margin-top: 2px !important;
  }
  .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row .btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  /* News page "article-hero" variant uses the sc-hero pattern after our rewrite:
     keep breadcrumbs visible but tight */
  .sc-hero-pane.sc-hero-img-pane .sc-hero-copy .breadcrumbs {
    font-size: 10.5px !important;
    margin-bottom: 0 !important;
  }
}

/* Mobile burger menu: market parent links navigate directly to their market page.
   The horizontal fly-out submenu can't lay out correctly inside the vertical
   burger nav (its contents push the whole row off-screen), so hide it here. Users
   reach a market's sub-topics from that market's own page. The caret is hidden
   too since there is nothing to toggle open any more. */
@media (max-width: 900px) {
  .nav .dropdown-submenu,
  .nav .has-submenu.open > .dropdown-submenu { display: none !important; }
  .nav .has-submenu > .submenu-parent .submenu-caret { display: none !important; }
  /* Ensure the .has-dropdown menu items stretch to the nav's full width
     and stack cleanly without horizontal overflow. */
  .nav .has-dropdown .dropdown-menu { width: auto !important; min-width: 0 !important; }
  .nav .has-submenu { width: auto !important; min-width: 0 !important; }
  .nav .has-submenu > .submenu-parent {
    width: 100% !important;
    justify-content: flex-start !important;
    white-space: normal !important;
  }
}

/* ---------- Market page byline (author + last update) ---------- */
.page-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  text-align: left;
  max-width: 820px;
}
.page-byline .pb-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(228, 206, 151, 0.30);
  display: block;
  background: #232428;
}
.page-byline .pb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-byline .pb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-byline .pb-by {
  color: #ffffff;
  font-weight: 600;
  line-height: 1.3;
}
.page-byline .pb-by a {
  color: #e4ce97;
  border-bottom: 1px solid rgba(228, 206, 151, 0.40);
  transition: color .15s, border-color .15s;
}
.page-byline .pb-by a:hover {
  color: #f0dfb3;
  border-bottom-color: #f0dfb3;
}
.page-byline .pb-role {
  color: rgba(255,255,255,0.60);
  font-weight: 500;
}
.page-byline .pb-updated {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 720px) {
  .page-byline {
    padding: 6px 10px;
    gap: 8px;
    font-size: 11.5px;
    margin-top: 6px;
    border-radius: 8px;
  }
  .page-byline .pb-avatar { width: 30px; height: 30px; }
  .page-byline .pb-by { font-size: 11.5px; line-height: 1.3; }
  .page-byline .pb-updated { font-size: 10.5px; }
  .page-byline .pb-role { display: block; font-size: 10.5px; margin-top: 1px; }
}

/* About page: when jumped to via anchor (#author-slug), position the card right
   below the sticky site-header (desktop ~81px, mobile ~69px). Also highlight the
   targeted card briefly so the eye lands on the right person. */
.author-box[id] { scroll-margin-top: 90px; }
@media (max-width: 720px) { .author-box[id] { scroll-margin-top: 78px; } }
.author-box[id]:target {
  box-shadow: 0 0 0 2px #e4ce97, 0 10px 30px -10px rgba(228,206,151,0.35);
}