/* ==== Self-hosted Kanit (latin) — guarantees identical font on every page even if Google Fonts is blocked ==== */
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/kanit-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/kanit-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/kanit-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/kanit-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/kanit-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Kanit';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/kanit-400i.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ======================================================
   Keira — keira.fun
   PlayUSA-inspired editorial theme
   White canvas · red brand · deep navy · clean type
   Mobile-first, responsive
   ====================================================== */

h1 img.emoji,
h2 img.emoji,
.flag-emoji img.emoji {
  display: inline-block;
  height: 0.9em;
  width: auto;
  vertical-align: -0.12em;
  margin: 0 0.06em;
}

:root {
  /* Keira · exact casinomeister.com palette + Asul font
     Values sampled live via getComputedStyle 2026-08-27 */
  --bg-0: #ffffff;
  --bg-1: #f8fafc;    /* slate-50 */
  --bg-2: #f1f5f9;    /* slate-100 */
  --bg-3: #e2e8f0;    /* slate-200 */

  --surface: #ffffff;
  --surface-hover: #f8fafc;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;              /* slate-200 */
  --border-strong: #cbd5e1;       /* slate-300 */

  --text: #000000;                /* casinomeister pure black */
  --text-muted: #45556c;          /* slate-600 area */
  --text-dim: #62748e;

  /* Brand: navy header + GREEN CTA (real casinomeister) + blue links */
  --red: #dc2626;
  --navy: #0f172a;                /* slate-900 — actual header bg */
  --navy-2: #020618;               /* slate-950 */
  --teal: #0f172a;
  --teal-2: #020618;

  /* --pink slot repurposed as GREEN primary CTA (rgb 0,201,80) */
  --pink: #00c950;
  --pink-2: #16d660;
  --pink-deep: #00a840;
  --purple: #0f172a;
  --purple-2: #020618;
  --pink-glow: rgba(0,201,80,0.25);
  --purple-glow: rgba(15,23,42,0.18);

  --yellow: #f97316;              /* orange-500 kept as secondary tag */
  --yellow-deep: #ea580c;

  --gold: #f59e0b;
  --gold-2: #fbbf24;
  --gold-glow: rgba(245,158,11,0.28);
  --accent: #00c950;              /* casinomeister green */
  --accent-2: #00a840;

  --link: #111eee;                /* casinomeister link blue */
  --link-hover: #0044ff;

  --success: #00c950;
  --danger: #dc2626;

  --radius-sm: 4px;
  --radius: 8px;                  /* casinomeister rounded-lg */
  --radius-lg: 12px;

  --shadow-1: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-2: 0 4px 12px rgba(15,23,42,0.10);
  --shadow-pink: 0 4px 12px rgba(0,201,80,0.25);

  --max-w: 1200px;

  /* Fonts — Asul is casinomeister's actual body + heading face */
  --font-body: 'Asul', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-head: 'Asul', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Asul', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}

/* CLEAN LIGHT CANVAS */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.65;
  font-size: 16.5px;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }

/* TOP STRIP */
.top-strip {
  background: #0d2543;
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
}
.top-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 7px; padding-bottom: 7px; }
.top-strip .strip-left { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.top-strip .strip-left .pill { padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,0.14); font-size: 11px; }
.top-strip a { color: #ffcf80; opacity: 0.95; }
.top-strip a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 720px) { .top-strip { font-size: 11px; } .top-strip .strip-right { display: none; } }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(15, 25, 50, 0.03);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 14px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  font-size: 24px;
  color: var(--text);
  flex-shrink: 0;
  text-transform: uppercase;
}
.logo img {
  height: 42px;
  width: 42px;
  display: block;
  transition: transform 0.3s ease;
}
.logo:hover img { transform: rotate(-6deg) scale(1.05); }
.logo .logo-text { line-height: 1; white-space: nowrap; color: var(--text); }
.logo .logo-text .accent { color: var(--pink); }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a,
.nav .dropdown-trigger {
  padding: 9px 14px;
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s ease, background 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
}
.nav a:hover,
.nav .dropdown-trigger:hover { color: var(--pink); background: var(--surface-hover); }
.nav a.active { color: var(--pink); border-bottom: 3px solid var(--pink); border-radius: 0; padding-bottom: 6px; }

.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 0.2s ease;
}
.nav .has-dropdown.open .dropdown-trigger { color: var(--pink); }
.nav .has-dropdown.open .dropdown-trigger::after { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .nav .has-dropdown:hover .dropdown-trigger { color: var(--pink); }
}
.nav .dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--shadow-2);
  z-index: 50;
  animation: dropdownIn 0.18s ease;
}
.nav .has-dropdown.open .dropdown-menu { display: flex; }
@media (hover: hover) and (pointer: fine) {
  .nav .has-dropdown:hover .dropdown-menu { display: flex; }
}
.nav .dropdown-menu a {
  padding: 10px 14px; border-radius: 6px; font-size: 14px; text-transform: none;
  letter-spacing: 0; font-family: var(--font-body); white-space: nowrap; color: var(--text);
  display: flex; align-items: center; gap: 9px; font-weight: 500;
}
.nav .dropdown-menu a:hover { color: var(--pink); background: var(--surface-hover); }
.nav .dropdown-menu a.active { color: var(--pink); background: rgba(45, 212, 191, 0.10); border-bottom: none; padding-bottom: 10px; }
.nav .dropdown-menu .flag-ico { font-size: 17px; line-height: 1; }
.flag-ico-img { width: 20px; height: 20px; border-radius: 3px; display: inline-block; vertical-align: -5px; flex: 0 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.flag-inline { height: 0.78em; width: auto; border-radius: 3px; display: inline-block; vertical-align: middle; margin: 0 0.22em -0.14em; box-shadow: 0 1px 3px rgba(0,0,0,0.2); object-fit: cover; }
h1 .flag-inline, .page-hero h1 .flag-inline, .article-hero h1 .flag-inline, .editorial-hero h1 .flag-inline {
  height: 0.62em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.16em -0.1em;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.footer-grid li .flag-ico-img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }

@keyframes dropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
  width: 42px; height: 42px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 19px;
}

@media (max-width: 900px) {
  .logo img { height: 36px; width: 36px; }
  .logo { font-size: 20px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; padding: 12px;
    gap: 2px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    box-shadow: var(--shadow-2);
  }
  .nav.open { display: flex; }
  .nav a, .nav .dropdown-trigger { padding: 13px 14px; border-radius: 8px; width: 100%; text-align: left; justify-content: space-between; }
  .nav a.active { border-bottom: none; background: rgba(45, 212, 191, 0.10); padding-bottom: 13px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav .has-dropdown { width: 100%; }
  .nav .dropdown-menu {
    position: static; width: 100%; min-width: 0; margin: 4px 0 6px 10px;
    padding: 4px 0 4px 8px; box-shadow: none; background: transparent;
    border: none;
    border-left: 3px solid var(--pink); border-radius: 0; animation: none;
  }
  .nav .has-dropdown .dropdown-menu { display: none; }
  .nav .has-dropdown.open .dropdown-menu { display: flex; }
  .nav .dropdown-menu a {
    white-space: normal; padding: 11px 12px;
    justify-content: flex-start; gap: 10px; text-align: left;
  }
  .nav .dropdown-menu a .flag-ico-img { flex-shrink: 0; }
}

/* MARKET SUB-NAV */
.market-subnav {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.market-subnav .subnav-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.market-subnav .subnav-scroll::-webkit-scrollbar { height: 5px; }
.market-subnav .subnav-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.market-subnav a {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.market-subnav a:hover { color: var(--pink); border-color: var(--pink); }
.market-subnav a.active { color: #ffffff; background: var(--pink); border-color: var(--pink); font-weight: 700; }
@media (max-width: 600px) { .market-subnav .subnav-scroll { padding: 8px 0; } }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: transform 0.16s, box-shadow 0.2s, filter 0.2s, background 0.2s;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--pink);
  color: #ffffff;
  box-shadow: var(--shadow-pink);
}
.btn-primary:hover { background: var(--pink-2); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(45, 212, 191, 0.28); color: #ffffff; }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: #ffffff; color: var(--purple); border: 2px solid var(--purple);
}
.btn-secondary:hover { background: var(--purple); color: #ffffff; }
.btn-block { width: 100%; }

/* HERO */
.hero {
  position: relative;
  padding: 60px 0 40px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-1) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.98;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 16px;
  animation: fadeUp 0.7s ease both;
}
.hero h1 .grad { background: linear-gradient(100deg, #ffc14d 10%, #ff9d2e 45%, #ff6b57 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.subtitle {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 26px;
  animation: fadeUp 0.8s 0.08s ease both;
}
.hero .eyebrow, .eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; text-align: center; line-height: 1.35; max-width: 100%;
  padding: 6px 14px; border-radius: 4px;
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid rgba(45, 212, 191, 0.24);
  color: var(--pink);
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  margin-bottom: 18px;
  animation: fadeUp 0.6s ease both;
}
@media (max-width: 560px) {
  .hero .eyebrow, .eyebrow { font-size: 11px; letter-spacing: 0.06em; padding: 6px 13px; gap: 7px; }
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 3px rgba(28, 156, 90, 0.16);
  animation: pulse 1.8s infinite;
}

.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.14; pointer-events: none; z-index: 0; }
.blob.a { width: 380px; height: 380px; background: var(--pink); top: -140px; left: -120px; }
.blob.b { width: 320px; height: 320px; background: var(--purple); top: 20px; right: -120px; }

/* HOMEPAGE FLAG GRID */
.flag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 30px 0 8px;
}
.flag-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 16px 22px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
  transition: transform 0.24s, border-color 0.24s, box-shadow 0.24s;
  animation: fadeUp 0.7s ease both;
}
.flag-tile:hover { transform: translateY(-3px); border-color: var(--pink); box-shadow: var(--shadow-1); }
.flag-tile .flag-emoji { font-size: 56px; line-height: 1; transition: transform 0.3s ease; }
.flag-tile:hover .flag-emoji { transform: scale(1.06); }
.flag-tile .flag-img {
  width: 68px; height: 68px; border-radius: 8px;
  object-fit: cover; display: block;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}
.flag-tile:hover .flag-img { transform: scale(1.06); }
.flag-tile .country-name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text);
}
.flag-tile .go {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--pink);
  display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;
}
.flag-tile:hover .go { gap: 10px; }
@media (max-width: 860px) { .flag-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 560px) {
  .flag-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .flag-tile { padding: 22px 12px 18px; }
  .flag-tile .flag-emoji { font-size: 46px; }
  .flag-tile .flag-img { width: 56px; height: 56px; }
}

.countries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.country-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 16px; background: #ffffff; border: 1px solid var(--border);
  border-radius: var(--radius); text-align: center; transition: transform .24s, border-color .24s;
}
.country-card:hover { transform: translateY(-3px); border-color: var(--pink); }
.country-card .flag { font-size: 52px; line-height: 1; }
.country-card .country-name { font-family: var(--font-head); text-transform: uppercase; font-weight: 700; }
@media (max-width: 860px) { .countries { grid-template-columns: repeat(2, 1fr); } }

/* PAGE HERO */
.page-hero { padding: 44px 0 24px; text-align: center; position: relative; overflow: hidden; background: var(--bg-1); border-bottom: 1px solid var(--border); }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 400; letter-spacing: 0.005em; line-height: 1.04;
  color: var(--text); text-transform: uppercase; margin-bottom: 12px;
  animation: fadeUp 0.6s ease both;
}
.page-hero .lead {
  max-width: 820px; margin: 0 auto; color: var(--text-muted);
  font-size: 1.04rem; animation: fadeUp 0.7s 0.08s ease both;
}
.breadcrumbs {
  display: flex; gap: 8px; align-items: center; font-size: 13px;
  color: var(--text-dim); margin-bottom: 16px; justify-content: center; flex-wrap: wrap;
}
.breadcrumbs a { color: var(--purple); }
.breadcrumbs a:hover { color: var(--pink); }
.breadcrumbs .sep { opacity: 0.5; }
@media (max-width: 840px) { .page-hero { padding: 24px 0 16px; } }

.list-heading {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  line-height: 1.15; margin: 22px 0; text-align: center; color: var(--text);
}
.list-heading .accent { color: var(--pink); }

/* CASINO LIST */
.casino-list {
  display: grid;
  gap: 16px;
  margin: 26px 0 46px;
  padding: 22px;
  background: linear-gradient(180deg, #f7f8fa 0%, #191930 100%);
  border: 1px solid #30305a;
  border-radius: var(--radius-lg);
}
.casino-card {
  display: grid;
  grid-template-columns: 190px 1.4fr 1fr 1fr;
  gap: 22px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #30305a;
  border-left: 4px solid var(--purple);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
  animation: fadeUp 0.6s ease both;
  box-shadow: var(--shadow-1);
}
.casino-card:hover { transform: translateY(-2px); border-left-color: var(--pink); box-shadow: var(--shadow-2); }
.casino-card.is-top { border-left-color: var(--pink); background: linear-gradient(180deg, #1f1f38, #ffffff); }

.rank-badge {
  position: absolute; top: 12px; left: 12px; width: 28px; height: 28px; border-radius: 6px;
  background: var(--pink); color: #ffffff;
  font-family: var(--font-head); font-weight: 800; font-size: 14px; display: grid; place-items: center;
  box-shadow: var(--shadow-pink); z-index: 2;
}

/* PayID badge — desktop: absolute top-right of card; mobile: inline pill after rating */
.payid-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #143659, #ffffff);
  color: #ffffff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(45, 212, 191,0.28);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  margin: 0;
}
.payid-badge::before {
  content: "\2713";
  font-size: 11px;
  font-weight: 800;
}
/* Mobile: drop out of absolute positioning and sit inline after the rating */
@media (max-width: 900px) {
  .payid-badge {
    position: static;
    margin: 4px 0 8px 8px;
  }
}
@media (max-width: 540px) {
  .payid-badge {
    margin: 6px 0 8px 0;
    display: inline-flex;
  }
}
.casino-card { position: relative; }

.casino-thumb {
  width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, #9decdf 0%, #8ce8db 100%);
  border: 1px solid #8ce8db;
  display: grid; place-items: center; padding: 12px;
  mix-blend-mode: normal;
}
.casino-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
  display: block;
  border-radius: 6px;
}
.casino-thumb .new-flag {
  position: absolute; top: 5px; right: 5px; z-index: 3;
  background: var(--pink); color: #ffffff;
  font-family: var(--font-head); font-size: 8px; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
  text-transform: uppercase; padding: 2px 5px; border-radius: 3px;
}
.casino-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
  display: block;
  border-radius: 6px;
  transition: transform 0.4s ease;
}
.casino-card:hover .casino-thumb img { transform: scale(1.03); }

.casino-info h3 { font-family: var(--font-head); font-size: 1.28rem; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 4px; color: var(--text); }
.rating {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(45, 212, 191, 0.10);
  color: var(--pink); padding: 4px 11px; border-radius: 4px; font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.casino-features { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-muted); }
.casino-features li { display: flex; gap: 8px; align-items: flex-start; }
.casino-features li::before { content: "\2713"; color: var(--success); font-weight: 700; flex-shrink: 0; }

.casino-bonus { display: flex; flex-direction: column; align-items: flex-start; }
.bonus-label { font-family: var(--font-head); font-size: 11.5px; color: var(--pink); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; font-weight: 700; }
.bonus-amount { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }

.casino-cta { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.payment-icons { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.payment-icons img { height: 24px; width: auto; background: #ffffff; border: 1px solid var(--border); border-radius: 3px; opacity: 0.9; }
.casino-cta .review-link { font-size: 13px; color: var(--purple); border-bottom: 1px dashed var(--border-strong); padding: 2px 0; transition: color .2s, border-color .2s; }
.casino-cta .review-link:hover { color: var(--pink); border-bottom-color: var(--pink); }

@media (max-width: 900px) {
  .casino-card {
    grid-template-columns: 130px 1fr;
    grid-template-areas: "thumb info" "bonus bonus" "cta cta";
    gap: 14px;
  }
  .casino-thumb { grid-area: thumb; aspect-ratio: 16/9; }
  .casino-info { grid-area: info; }
  .casino-bonus { grid-area: bonus; }
  .casino-cta { grid-area: cta; margin-top: 12px; }
}
@media (max-width: 480px) {
  .casino-card {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "thumb features" "name features" "rating features" "bonus bonus" "cta cta";
    padding: 14px; column-gap: 12px; row-gap: 4px; align-items: start;
  }
  .casino-thumb { grid-area: thumb; aspect-ratio: 16/9; margin-bottom: 6px; }
  .casino-info { display: contents; }
  .casino-info h3 { grid-area: name; font-size: 1.08rem; margin: 0; }
  .casino-info .rating, .casino-info .rating-row { grid-area: rating; margin: 0; justify-self: start; }
  .casino-info .casino-features { grid-area: features; align-self: start; }
  .casino-bonus { grid-area: bonus; margin-top: 14px; align-items: center; text-align: center; }
  .casino-cta { grid-area: cta; margin-top: 14px; }
  .btn { font-size: 15px; padding: 13px 20px; }
  .rank-badge { width: 24px; height: 24px; font-size: 12px; top: 8px; left: 8px; }
}

/* CONTENT */
.content { padding: 24px 0 60px; background: #ffffff; }
.content section { margin-bottom: 44px; }

.content h2 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700; letter-spacing: 0.005em; text-transform: uppercase;
  margin: 0 0 16px; line-height: 1.15; position: relative; padding-bottom: 10px; color: var(--text);
}
.content h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px;
  background: var(--pink); border-radius: 2px;
}
.content h3 { font-family: var(--font-head); font-size: 1.28rem; font-weight: 600; letter-spacing: 0.01em; margin: 24px 0 10px; color: var(--text); }
.content h4 { font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; margin: 18px 0 8px; color: var(--text); }
.content p { margin-bottom: 14px; color: var(--text-muted); }
.content strong { color: var(--text); font-weight: 700; }
.content a { color: var(--purple); border-bottom: 1px solid rgba(45, 212, 191,0.28); transition: border-color 0.18s, color 0.18s; }
.content a:hover { color: var(--pink); border-color: var(--pink); }

.content ul, .content ol { margin: 8px 0 18px; padding-left: 22px; color: var(--text-muted); }
.content ul li, .content ol li { margin-bottom: 6px; }
.content ul li::marker { color: var(--pink); }

.prose-img { border-radius: var(--radius); border: 1px solid var(--border); margin: 8px 0 22px; overflow: hidden; }
.prose-img img { width: 100%; height: auto; display: block; }
.prose-img figcaption { font-size: 13px; color: var(--text-dim); padding: 10px 14px; background: var(--bg-1); }

/* TABLES */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); margin: 18px 0 26px; background: #ffffff; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
table thead { background: var(--bg-1); }
table th {
  text-align: left; padding: 12px 14px; font-family: var(--font-head); font-weight: 700; color: var(--pink);
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--pink);
}
table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
table tr:last-child td { border-bottom: none; }
table tbody tr { transition: background 0.15s ease; }
table tbody tr:hover { background: var(--bg-1); }
table td strong, table th strong { color: var(--pink); }
table td:first-child, table th:first-child { padding-left: 18px; }
table td strong { color: var(--text); }

.table-wrap { scrollbar-width: thin; }
@media (max-width: 720px) {
  table { min-width: 0; font-size: 13.5px; }
  table th, table td { padding: 10px 12px; line-height: 1.45; }
  table th { font-size: 11px; letter-spacing: 0.03em; }
  table td:first-child, table th:first-child { padding-left: 12px; }
  .table-wrap { border-radius: 8px; }
}
@media (max-width: 480px) {
  table { font-size: 12.5px; }
  table th, table td { padding: 8px 10px; }
  table th { font-size: 10.5px; }
}

@media (max-width: 600px) {
  .article-body p { font-size: 0.98rem; line-height: 1.65; }
  .article-body h2 { margin-top: 24px; font-size: 1.32rem; }
  .article-body h3 { margin-top: 18px; font-size: 1.08rem; }
  .content p { font-size: 15.5px; line-height: 1.62; }
  .toc { padding: 14px 14px 12px; }
  .toc li { padding-left: 30px; margin-bottom: 8px; }
  .toc a { font-size: 0.92rem; }
  .callout { padding: 16px; }
}

/* FEATURED CARDS */
.featured-cards { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin: 26px 0 44px; }
.feat-card {
  position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: var(--radius);
  background: #ffffff; border: 1px solid var(--border);
  overflow: hidden; transition: transform 0.24s, border-color 0.24s, box-shadow 0.24s; animation: fadeUp 0.6s ease both;
  box-shadow: var(--shadow-1);
}
.feat-card:hover { transform: translateY(-3px); border-color: var(--pink); box-shadow: var(--shadow-2); }
.feat-card.is-hot { background: linear-gradient(180deg, #f7f8fa, #ffffff); border-color: var(--pink); border-top: 3px solid var(--pink); }
.feat-flame { position: absolute; top: 12px; right: 14px; font-size: 20px; }
.feat-thumb { width: 82px; height: 82px; border-radius: 12px; background: var(--bg-1); display: grid; place-items: center; padding: 10px; margin-bottom: 14px; border: 1px solid var(--border); }
.feat-thumb img { width: 100%; height: 100%; object-fit: contain; }
.feat-card h3 { font-family: var(--font-head); font-size: 1.22rem; font-weight: 700; margin: 0 0 12px; letter-spacing: 0.01em; line-height: 1.2; color: var(--text); }
.feat-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--text-muted); }
.feat-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.feat-list li .ico { font-size: 16px; line-height: 1.2; flex-shrink: 0; color: var(--success); }
.feat-card .btn { margin-top: auto; }
@media (max-width: 900px) { .featured-cards { grid-template-columns: 1fr; } }

.review-banner { margin: 6px 0 22px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-1); position: relative; }
.review-banner img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.review-banner:hover img { transform: scale(1.02); }

/* CALLOUTS */
.callout { border: 1px solid var(--border); background: var(--bg-1); border-left: 4px solid var(--pink); border-radius: var(--radius); padding: 18px 22px; margin: 22px 0; position: relative; }
.callout.is-warning { border-left-color: #14D6B0; background: #f7f8fa; }
.callout.is-info { border-left-color: var(--purple); background: #f7f8fa; }
.callout h3, .callout h4 { font-family: var(--font-head); margin: 0 0 8px; font-size: 1.08rem; color: var(--text); font-weight: 700; padding-bottom: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.callout h3::after { display: none; }
.callout p:last-child { margin-bottom: 0; }
.callout p { color: var(--text); }

.badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 8px; }
.badge-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 4px; background: var(--bg-1); border: 1px solid var(--border); font-family: var(--font-head); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); font-weight: 600; }

.welcome-card { background: linear-gradient(180deg, #f7f8fa, #ffffff); border: 1px solid var(--pink); border-radius: var(--radius); padding: 26px; margin: 28px 0 36px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-1); }
.welcome-card .eyebrow-label { display: inline-block; font-family: var(--font-head); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pink); font-weight: 700; margin-bottom: 10px; }
.welcome-card h2 { font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin: 0 0 8px; padding-bottom: 0; font-weight: 700; text-transform: uppercase; color: var(--text); }
.welcome-card h2::after { display: none; }
.welcome-card .terms { font-size: 13.5px; color: var(--text-muted); margin: 12px auto 20px; max-width: 640px; }

.score-dashboard { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; margin: 18px 0 36px; box-shadow: var(--shadow-1); }
.score-overall { text-align: center; padding: 16px 12px; background: var(--bg-1); border-radius: 8px; }
.score-overall .num { font-family: var(--font-display); font-size: 3rem; color: var(--pink); line-height: 1; }
.score-overall .max { color: var(--text-dim); font-size: 14px; margin-top: 6px; }
.score-overall .stars { color: var(--pink); margin-top: 8px; letter-spacing: 2px; }
.score-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.score-item { display: flex; flex-direction: column; gap: 6px; }
.score-item .label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.score-item .bar { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin: 2px 0; }
.score-item .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); border-radius: 999px; }
.score-item .val { font-size: 14.5px; font-weight: 700; color: var(--text); }
@media (max-width: 720px) { .score-dashboard { grid-template-columns: 1fr; padding: 18px; } }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0 28px; }
.pros-cons > div { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.pros-cons .pros { border-top: 3px solid var(--success); background: #1f1f38; }
.pros-cons .cons { border-top: 3px solid var(--danger); background: #1f1f38; }
.pros-cons h3 { font-family: var(--font-head); margin: 0 0 10px; font-size: 1.08rem; padding-bottom: 0; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.pros-cons h3::after { display: none; }
.pros-cons ul { list-style: none; padding: 0; margin: 0; }
.pros-cons li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 14.5px; color: var(--text); border-bottom: 1px dashed var(--border); }
.pros-cons li:last-child { border-bottom: none; }
.pros-cons .pros li::before { content: "\2713"; color: var(--success); font-weight: 800; flex-shrink: 0; }
.pros-cons .cons li::before { content: "\2715"; color: var(--danger); font-weight: 800; flex-shrink: 0; }
@media (max-width: 720px) { .pros-cons { grid-template-columns: 1fr; } }

.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 30px; }
.step-box { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; box-shadow: var(--shadow-1); }
.step-box .step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--pink); color: #ffffff; font-family: var(--font-head); font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.step-box h3 { font-family: var(--font-head); font-size: 1.05rem; margin: 0 0 8px; padding-bottom: 0; text-transform: uppercase; letter-spacing: 0.02em; }
.step-box h3::after { display: none; }
.step-box p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.55; }

.feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0 28px; }
.feature-card { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: border-color .2s, transform .2s; }
.feature-card:hover { border-color: var(--pink); transform: translateY(-2px); }
.feature-card .ico { font-size: 24px; margin-bottom: 8px; display: block; }
.feature-card h3 { font-family: var(--font-head); font-size: 1.02rem; margin: 0 0 6px; padding-bottom: 0; text-transform: uppercase; letter-spacing: 0.02em; }
.feature-card h3::after { display: none; }
.feature-card p { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* CONTACT FORM */
.contact-form { max-width: 720px; margin: 16px 0 32px; display: flex; flex-direction: column; gap: 14px; }
.contact-form .form-row { display: flex; flex-direction: column; gap: 6px; }
.contact-form .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.03em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; background: #ffffff; border: 1px solid var(--border-strong); border-radius: 6px; padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 15px; transition: border-color .2s, background .2s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--pink); background: var(--surface-hover); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .form-check label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.contact-form .form-check input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--pink); }
.contact-form button[type="submit"] { align-self: flex-start; }
@media (max-width: 600px) { .contact-form .form-grid-2 { grid-template-columns: 1fr; } }

/* BLOG */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 26px 0 46px; }
.blog-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.24s, border-color 0.24s, box-shadow 0.24s; animation: fadeUp 0.6s ease both; box-shadow: var(--shadow-1); }
.blog-card:hover { transform: translateY(-4px); border-color: var(--pink); box-shadow: var(--shadow-2); }
.blog-card .thumb { aspect-ratio: 3/2; overflow: hidden; background: #0d2543; display: grid; place-items: center; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.5s ease; }
.blog-card:hover .thumb img { transform: none; }
.blog-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card .tag { display: inline-block; align-self: flex-start; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #ffffff; background: var(--pink); padding: 3px 10px; border-radius: 3px; margin-bottom: 12px; }
.blog-card h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin: 0 0 10px; color: var(--text); letter-spacing: 0.005em; }
.blog-card p { font-size: 14.5px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.55; }
.blog-card .meta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-dim); }
.blog-card .meta .read { color: var(--pink); font-weight: 700; margin-left: auto; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

.article { max-width: 800px; margin: 0 auto; }
.article-hero { padding: 36px 0 10px; }
.article-hero .tag { display: inline-block; font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #ffffff; background: var(--pink); padding: 4px 12px; border-radius: 3px; margin-bottom: 14px; }
.article-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); text-transform: uppercase; line-height: 1.05; color: var(--text); margin-bottom: 14px; font-weight: 400; }
.article-hero .article-meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-dim); flex-wrap: wrap; }
.article-hero .article-meta img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.article-cover { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin: 20px 0 26px; }
.article-cover img { width: 100%; height: auto; display: block; }
.article-body p { font-size: 1.05rem; color: var(--text); margin-bottom: 18px; }
.article-body h2 { margin-top: 32px; }
.article-body h3 { margin-top: 22px; }
.article-body img { border-radius: var(--radius); border: 1px solid var(--border); margin: 8px 0 22px; }

/* AUTHOR BOX */
.author-box { display: flex; gap: 20px; align-items: flex-start; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin: 8px 0; }
.author-box .author-avatar { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--border); }
.author-box .author-eyebrow { display: block; font-family: var(--font-head); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; font-weight: 600; }
.author-box .author-name { font-family: var(--font-head); margin: 0; font-size: 22px; color: var(--text); letter-spacing: 0.01em; }
.author-box .author-role { display: block; font-size: 14px; color: var(--pink); margin: 2px 0 10px; font-weight: 700; }
.author-box .author-bio { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.65; }
.author-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.author-email-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 4px; background: #ffffff; border: 1px solid var(--border-strong); color: var(--purple); text-decoration: none; }
.author-email-btn:hover { background: var(--purple); border-color: var(--purple); color: #ffffff; }
@media (max-width: 560px) { .author-box { flex-direction: column; align-items: center; text-align: center; } .author-name-row { justify-content: center; } }

.rating-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rating-row .rating { margin-bottom: 0; }
.new-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--pink); color: #ffffff; font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

/* FAQ */
.faq-accordion { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
details.faq-item { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .2s ease; }
details.faq-item:hover { border-color: var(--border-strong); }
details.faq-item[open] { border-color: var(--pink); }
details.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; letter-spacing: 0.01em; color: var(--text); }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--pink); transition: transform .2s ease; }
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item .faq-answer { padding: 0 18px 18px; color: var(--text-muted); line-height: 1.65; }
details.faq-item .faq-answer p { margin: 0 0 10px; }
details.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* FOOTER */
.site-footer { background: #0d2543; color: #1a1a30; border-top: 3px solid var(--pink); padding: 44px 0 28px; margin-top: 30px; }
.site-footer .logo .logo-text { color: #f2f3fb; }
.site-footer .logo .logo-text .accent { color: var(--pink-2); }
.site-footer p { color: #3a3a64; }
.site-footer a { color: #1a1a30; }
.site-footer a:hover { color: #ffcf80; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 30px; }
.footer-grid h3, .footer-grid h4 { font-family: var(--font-head); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #ffb54d; margin-bottom: 12px; font-weight: 700; padding-bottom: 0; }
.footer-grid h3::after { display: none; }
.footer-grid p, .footer-grid li { font-size: 14px; color: #3a3a64; margin-bottom: 8px; }
.footer-grid ul { list-style: none; }
.footer-grid .logo img { height: 36px; width: 36px; }
.footer-grid .logo { font-size: 20px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 13px; color: #26264a; }
.responsible-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); padding: 5px 12px; border-radius: 4px; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #f2f3fb; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 22px; } }

@media (max-width: 600px) {
  .content { padding-bottom: 20px; }
  .content section { margin-bottom: 26px; }
  .content section:last-child { margin-bottom: 8px; }
  .hero { padding-bottom: 22px; }
  .site-footer { margin-top: 4px; padding-top: 30px; }
  .editorial-hero { padding: 26px 0 18px; }
  .editorial-hero .stat-row { gap: 10px; }
  .editorial-hero .stat { padding: 12px; }
  .editorial-hero .stat .num { font-size: 1.5rem; }
  .section-title { font-size: 1.32rem; margin: 26px 0 14px; padding-bottom: 10px; }
  .section-title::before { height: 22px; }
  .top-strip { font-size: 10.5px; letter-spacing: 0.06em; }
  .top-strip .container { padding-top: 6px; padding-bottom: 6px; }
  .fact-strip .fact { font-size: 11px; padding: 6px 11px; letter-spacing: 0.04em; }
  .market-tile { padding: 12px 14px; }
  .market-tile img { width: 30px; height: 30px; }
  .market-tile .m-name { font-size: 14px; }
  .editorial-columns { gap: 22px; margin: 18px 0 28px; }
  .editorial-columns > aside { padding: 18px; }
}
@media (max-width: 400px) {
  .top-strip .strip-left span:not(.pill) { display: none; }
  .fact-strip { gap: 8px; }
}

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(28,156,90,0.16); } 50% { box-shadow: 0 0 0 6px rgba(28,156,90,0.04); } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* TABLE OF CONTENTS */
.toc {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--pink);
  border-radius: var(--radius);
  padding: 18px 60px 20px 22px;
  margin: 6px 0 26px;
  position: relative;
}
.toc .toc-title {
  display: block;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 10px;
  padding: 0;
  cursor: pointer;
  user-select: none;
  border: 0;
  line-height: 1.35;
}
/* Disable the .content h2 red underline bar on toc-title h2 */
.content .toc h2.toc-title,
.toc h2.toc-title {
  padding-bottom: 0;
  font-size: 0.82rem;
}
.content .toc h2.toc-title::after,
.toc h2.toc-title::after { background: none !important; content: none !important; }
/* Actual toggle button — always visible in top-right */
.toc::after {
  content: "\25BE";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  background: var(--pink);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(45, 212, 191,0.28);
}
.toc:hover::after { background: var(--pink-deep); box-shadow: 0 4px 10px rgba(45, 212, 191,0.38); }
.toc.is-collapsed::after { transform: rotate(-90deg); }
.toc .toc-title::after {
  content: none !important;
}
.toc.is-collapsed .toc-title { margin-bottom: 0; }
.toc.is-collapsed .toc-title::after { transform: rotate(-90deg); }
.toc.is-collapsed ol, .toc.is-collapsed ul { display: none; }
.toc ol, .toc ul {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 28px;
}
.toc li {
  margin: 0 0 8px;
  break-inside: avoid;
  counter-increment: toc;
  position: relative;
  padding-left: 32px;
}
.toc ol { counter-reset: toc; }
.toc ol li::before {
  content: counter(toc);
  position: absolute; left: 0; top: 0.1em;
  box-sizing: border-box;
  width: 22px; height: 18px;
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 700; color: #ffffff;
  background: var(--pink);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.toc a {
  color: var(--purple);
  border-bottom: 1px solid transparent;
  font-size: 0.96rem;
  line-height: 1.4;
  transition: color 0.18s, border-color 0.18s;
}
.toc a:hover { color: var(--pink); border-color: var(--pink); }
@media (max-width: 600px) {
  .toc { padding: 16px 16px 14px; }
  .toc ol, .toc ul { columns: 1; }
}

:where(h2, h3)[id] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* EDITORIAL BLOCKS */
.editorial-hero {
  position: relative;
  padding: 40px 0 30px;
  background: linear-gradient(180deg, var(--bg-1), #ffffff);
  border-bottom: 1px solid var(--border);
}
.editorial-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--text);
  margin: 8px 0 12px;
  letter-spacing: 0.005em;
}
.editorial-hero h1 .grad { background: linear-gradient(100deg, #ffc14d 10%, #ff9d2e 45%, #ff6b57 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.editorial-hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pink);
}
.editorial-hero .kicker::before {
  content: ""; width: 24px; height: 2px; background: var(--pink); display: inline-block;
}
.editorial-hero .lede {
  color: var(--text);
  max-width: 780px;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  margin-bottom: 18px;
}
.editorial-hero .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.editorial-hero .stat {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--pink);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
.editorial-hero .stat .num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--pink);
  line-height: 1;
}
.editorial-hero .stat .lbl {
  display: block; margin-top: 4px;
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 0.07em; font-size: 11.5px; color: var(--text-dim); font-weight: 600;
}
@media (max-width: 780px) {
  .editorial-hero .stat-row { grid-template-columns: repeat(2, 1fr); }
}

.section-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 700;
  color: var(--text);
  margin: 36px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  position: relative;
}
.section-title::before {
  content: ""; width: 5px; height: 24px; border-radius: 2px;
  background: var(--pink);
  display: inline-block;
}
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 80px; height: 2px; background: var(--pink);
}

.market-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 8px 0 26px;
}
.market-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.market-tile::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--pink);
  transform: scaleY(0); transform-origin: top; transition: transform .2s ease;
}
.market-tile:hover { transform: translateY(-2px); border-color: var(--pink); box-shadow: var(--shadow-2); }
.market-tile:hover::after { transform: scaleY(1); }
.market-tile img { width: 34px; height: 34px; border-radius: 4px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.market-tile .m-name {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); line-height: 1.15;
}
.market-tile .m-sub { display: block; font-family: var(--font-body); font-size: 11.5px; color: var(--text-dim); font-weight: 500; letter-spacing: 0; text-transform: none; margin-top: 2px; }
@media (max-width: 860px) { .market-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .market-tiles { grid-template-columns: 1fr; } }

.editorial-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: flex-start;
  margin: 22px 0 38px;
}
.editorial-columns > aside {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky;
  top: 88px;
}
.editorial-columns > aside h3 {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 13px; margin-bottom: 12px; color: var(--pink); font-weight: 700; padding-bottom: 0;
}
.editorial-columns > aside h3::after { display: none; }
.editorial-columns > aside ul { list-style: none; padding: 0; margin: 0; }
.editorial-columns > aside li { padding: 9px 0; border-bottom: 1px dashed var(--border-strong); font-size: 14px; }
.editorial-columns > aside li:last-child { border-bottom: none; }
.editorial-columns > aside li a { color: var(--text); }
.editorial-columns > aside li a:hover { color: var(--pink); }
@media (max-width: 900px) {
  .editorial-columns { grid-template-columns: 1fr; }
  .editorial-columns > aside { position: static; }
}

.fact-strip {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px;
}
.fact-strip .fact {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 4px;
  background: #ffffff; border: 1px solid var(--border);
  font-family: var(--font-head); font-size: 12.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text); font-weight: 600;
}
.fact-strip .fact strong { color: var(--pink); font-weight: 700; }
.fact-strip .fact .dot-red { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }

.blog-card .tag.guide,
.article-hero .tag.guide {
  background: var(--purple);
  color: #ffffff;
}
.blog-card .tag.tools,
.article-hero .tag.tools {
  background: var(--success);
  color: #ffffff;
}

.lead-clamp:not(.is-expanded) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-more-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 0; background: none; border: 0; color: var(--pink); font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; }
.read-more-btn::after { content: "\25BE"; font-size: 0.8em; transition: transform 0.2s ease; }
.read-more-btn.is-open::after { transform: rotate(180deg); }
.read-more-btn:hover { text-decoration: underline; }

/* PLAYUSA-STYLE NEWS ROW */
.news-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 22px;
  margin: 26px 0 42px;
}
.news-lead {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow .2s;
}
.news-lead:hover { box-shadow: var(--shadow-2); }
.news-lead .thumb { aspect-ratio: 3/2; overflow: hidden; background: #0d2543; display: grid; place-items: center; }
.news-lead .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.news-lead .body { padding: 20px 22px 22px; }
.news-lead .tag { display: inline-block; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #ffffff; background: var(--pink); padding: 3px 10px; border-radius: 3px; margin-bottom: 12px; }
.news-lead h2 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0 0 10px; padding-bottom: 0; color: var(--text); text-transform: none; letter-spacing: 0; }
.news-lead h2::after { display: none; }
.news-lead p { color: var(--text-muted); margin: 0; font-size: 15px; }

.news-side { display: flex; flex-direction: column; gap: 14px; }
.news-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color .2s, transform .2s;
}
.news-item:hover { border-color: var(--pink); transform: translateY(-1px); }
.news-item .tag { display: inline-block; font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); background: rgba(45, 212, 191, 0.10); padding: 2px 8px; border-radius: 3px; margin-bottom: 8px; }
.news-item h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin: 0 0 4px; color: var(--text); line-height: 1.3; }
.news-item p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }

@media (max-width: 900px) {
  .news-strip { grid-template-columns: 1fr; }
}

/* BRAND STRIP */
.brand-strip {
  background: var(--pink);
  color: #ffffff;
  padding: 12px 0;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  font-size: 13px;
}
.brand-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.brand-strip a { color: #9decdf; text-decoration: underline; }

/* ================================================================
   PLAYUSA-STYLE HOMEPAGE COMPONENTS
   ================================================================ */

/* DARK HERO */
.pu-hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(15,22,38,0.86) 0%, rgba(15,22,38,0.92) 100%),
    radial-gradient(ellipse at top left, rgba(45, 212, 191,0.32), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(28,50,96,0.55), transparent 55%),
    #0d2543;
  color: #ffffff;
  padding: 76px 0 84px;
  overflow: hidden;
  border-bottom: 4px solid var(--pink);
}
.pu-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='%23ffffff' fill-opacity='0.03'><path d='M0 0h1v40H0zm20 0h1v40h-1zM0 0v1h40V0zm0 20v1h40v-1z'/></g></svg>");
  pointer-events: none;
  opacity: 0.5;
}
.pu-hero .container { position: relative; z-index: 1; }
.pu-hero .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px;
  background: var(--pink);
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 3px;
  margin-bottom: 22px;
}
.pu-hero .kicker .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(45, 212, 191,0.28);
  animation: pulse 1.8s infinite;
}
.pu-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #ffffff;
  max-width: 960px;
  margin-bottom: 20px;
}
.pu-hero h1 .yellow { color: var(--yellow); }
.pu-hero h1 .red { color: var(--pink-2); }
.pu-hero .lede {
  color: #c9ccdf;
  max-width: 720px;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  margin-bottom: 30px;
  line-height: 1.6;
}
.pu-hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.pu-hero .btn-primary { background: var(--pink); }
.pu-hero .btn-secondary { background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,0.45); }
.pu-hero .btn-secondary:hover { background: rgba(255,255,255,0.12); color: #ffffff; border-color: #ffffff; }
.pu-hero .trust-row {
  display: inline-flex; align-items: center; gap: 22px;
  font-family: var(--font-head);
  font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: #BFAF8D; font-weight: 500;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.pu-hero .trust-row .item { display: inline-flex; align-items: center; gap: 8px; }
.pu-hero .trust-row .item strong { color: #ffffff; }
.pu-hero .trust-row .tick { color: var(--yellow); }
@media (max-width: 720px) { .pu-hero { padding: 50px 0 60px; } }

/* CATEGORY CHIP ROW */
.pu-chips {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  margin-top: -18px;
}
.pu-chips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pu-chips-grid.pu-chips-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pu-chips-grid.pu-chips-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pu-chips-grid.pu-chips-3 { grid-template-columns: 1fr; } }
.pu-chip {
  display: flex; align-items: center; gap: 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.pu-chip:hover { transform: translateY(-3px); border-color: var(--pink); box-shadow: var(--shadow-2); }
.pu-chip .ico-box {
  width: 46px; height: 46px; border-radius: 8px;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  display: grid; place-items: center;
  color: #ffffff; font-family: var(--font-display); font-size: 20px;
  flex-shrink: 0;
}
.pu-chip.is-red .ico-box { background: linear-gradient(135deg, var(--pink), var(--pink-deep)); }
.pu-chip.is-yellow .ico-box { background: linear-gradient(135deg, var(--yellow), var(--yellow-deep)); color: var(--text); }
.pu-chip.is-green .ico-box { background: linear-gradient(135deg, var(--success), #ffffff); }
.pu-chip .lbl { display: flex; flex-direction: column; gap: 2px; }
.pu-chip .lbl .name { font-family: var(--font-head); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); }
.pu-chip .lbl .sub { font-size: 12px; color: var(--text-dim); }
@media (max-width: 900px) { .pu-chips-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pu-chips-grid { grid-template-columns: 1fr; } }

/* SECTION TITLE (playusa style) */
.pu-section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin: 44px 0 20px;
  flex-wrap: wrap;
}
.pu-section-title h2 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--text);
  letter-spacing: 0.01em;
  padding-bottom: 8px;
  border-bottom: 4px solid var(--pink);
  display: inline-block;
}
.pu-section-title .see-all {
  font-family: var(--font-head);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--purple);
}
.pu-section-title .see-all:hover { color: var(--pink); }

/* BRAND CATEGORY ROWS (like playusa "objective reviews") */
.pu-market-block { margin-bottom: 26px; }
.pu-market-block h3 {
  font-family: var(--font-head);
  font-weight: 700; text-transform: uppercase;
  font-size: 1.02rem; letter-spacing: 0.04em;
  color: var(--purple); margin-bottom: 12px;
  padding-bottom: 0;
}
.pu-market-block h3::after { display: none; }
.pu-brand-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pu-brand-tile {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  box-shadow: var(--shadow-1);
  position: relative;
  min-height: 138px;
}
.pu-brand-tile:hover { transform: translateY(-3px); border-color: var(--pink); box-shadow: var(--shadow-2); }
.pu-brand-tile .flag {
  width: 44px; height: 44px; border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  object-fit: cover;
}
.pu-brand-tile .flag-emoji { font-size: 44px; line-height: 1; }
.pu-brand-tile .name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; color: var(--text); }
.pu-brand-tile .sub { font-size: 11px; color: var(--text-dim); }
.pu-brand-tile .badge-red {
  position: absolute; top: 6px; right: 6px;
  font-family: var(--font-head); font-size: 9.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  background: var(--pink); color: #ffffff;
  letter-spacing: 0.08em;
}
@media (max-width: 900px) { .pu-brand-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .pu-brand-row { grid-template-columns: repeat(1, 1fr); } .pu-brand-tile { min-height: 120px; } }

/* RESOURCE CARDS (icon + text) */
.pu-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pu-resource {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 20px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 190px;
}
.pu-resource:hover { transform: translateY(-3px); border-color: var(--pink); box-shadow: var(--shadow-2); }
.pu-resource .ico {
  width: 46px; height: 46px; border-radius: 10px;
  background: rgba(45, 212, 191,0.10);
  display: grid; place-items: center;
  font-size: 22px; color: var(--pink);
}
.pu-resource.is-tool { border-top: 3px solid var(--pink); }
.pu-resource.is-tool .ico { background: rgba(45, 212, 191,0.12); }
.pu-resource.is-blog { border-top: 3px solid var(--purple); }
.pu-resource.is-blog .ico { background: rgba(15, 25, 50,0.10); color: var(--purple); }
.pu-resource.is-blog .go { color: var(--purple); }
.pu-resource h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.25;
  padding-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 4px 0 2px;
}
.pu-resource h3::after { display: none; }
.pu-resource p { font-size: 14px; color: var(--text-muted); margin: 0; flex: 1; line-height: 1.5; }
.pu-resource .go { font-family: var(--font-head); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); margin-top: 4px; }
@media (max-width: 900px) { .pu-resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .pu-resource-grid { grid-template-columns: 1fr; } .pu-resource { min-height: 0; } }

/* EXPERT/AUTHOR CARD */
.pu-expert-block {
  background: linear-gradient(135deg, #ffffff 0%, #143659 100%);
  color: #ffffff;
  border-radius: 12px;
  padding: 36px 32px;
  margin: 36px 0 40px;
  position: relative;
  overflow: hidden;
}
.pu-expert-block::before {
  content: "";
  position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--pink), var(--yellow), var(--pink));
}
.pu-expert-block .inner {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 26px;
  align-items: center;
}
.pu-expert-avatar {
  width: 130px; height: 130px; border-radius: 12px;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  display: grid; place-items: center;
  color: #ffffff; font-family: var(--font-display); font-size: 52px;
  border: 3px solid rgba(255,255,255,0.14);
  flex-shrink: 0;
}
.pu-expert-block h3 {
  font-family: var(--font-head);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--yellow); font-weight: 700; margin-bottom: 6px; padding-bottom: 0;
}
.pu-expert-block h3::after { display: none; }
.pu-expert-block h4 {
  font-family: var(--font-display);
  font-weight: 400; font-size: 1.9rem; text-transform: uppercase;
  color: #ffffff; letter-spacing: 0.01em; margin-bottom: 4px;
}
.pu-expert-block .role {
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pink-2); font-weight: 700; margin-bottom: 12px;
}
.pu-expert-block p { color: #2a2a4a; font-size: 15px; margin: 0; line-height: 1.6; }
@media (max-width: 700px) {
  .pu-expert-block { padding: 26px 22px; }
  .pu-expert-block .inner { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .pu-expert-avatar { margin: 0 auto; }
}

/* CTA BAR */
.pu-cta-bar {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  color: #ffffff;
  border-radius: 12px;
  padding: 30px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  margin: 30px 0 20px;
  flex-wrap: wrap;
  box-shadow: 0 12px 32px rgba(45, 212, 191,0.28);
}
.pu-cta-bar h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #ffffff;
  padding-bottom: 0;
  margin: 0 0 4px;
  line-height: 1.15;
}
.pu-cta-bar h3::after { display: none; }
.pu-cta-bar p { color: rgba(255,255,255,0.9); margin: 0; font-size: 15px; }
.pu-cta-bar .btn-cta {
  background: #ffffff;
  color: var(--pink);
  padding: 14px 26px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 14.5px;
  transition: transform .16s, box-shadow .18s;
  flex-shrink: 0;
}
.pu-cta-bar .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.24); color: var(--pink-deep); }

/* NEWS FEED (playusa "latest industry news") */
.pu-news-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.pu-news-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.pu-news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.pu-news-card .thumb { aspect-ratio: 3/2; background: #0d2543; overflow: hidden; display: grid; place-items: center; }
.pu-news-card .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pu-news-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pu-news-card .tag { display: inline-block; font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #ffffff; background: var(--pink); padding: 3px 9px; border-radius: 3px; align-self: flex-start; }
.pu-news-card h3 { font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; color: var(--text); margin: 0; line-height: 1.25; padding-bottom: 0; }
.pu-news-card h3::after { display: none; }
.pu-news-card p { color: var(--text-muted); font-size: 14px; margin: 0; flex: 1; }
.pu-news-card .meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; display: flex; gap: 10px; }
@media (max-width: 900px) { .pu-news-row { grid-template-columns: 1fr; } }

/* MARKET COVERAGE MAP-STYLE ROW */
.pu-coverage {
  background: var(--bg-1);
  border-radius: 12px;
  padding: 30px 28px;
  margin: 30px 0;
  border: 1px solid var(--border);
}
.pu-coverage h2 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--pink);
  display: inline-block;
}
.pu-coverage h2::after { display: none; }
.pu-coverage > p { color: var(--text-muted); max-width: 720px; margin-bottom: 22px; }

/* PROMO STRIP */
.pu-promo-strip {
  background: var(--purple);
  color: #ffffff;
  padding: 14px 0;
  font-family: var(--font-head);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.pu-promo-strip .container { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; text-align: center; }
.pu-promo-strip .item { display: inline-flex; align-items: center; gap: 8px; }
.pu-promo-strip .yellow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }

/* TRUST BAND (Signals we take seriously) — colored with icons */
.pu-trust {
  background: linear-gradient(180deg, #1f1f38 0%, #ffffff 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 34px 0 36px;
  margin: 40px 0 0;
  position: relative;
}
.pu-trust::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--pink), var(--yellow), var(--purple), var(--pink));
}
.pu-trust h4 {
  font-family: var(--font-head);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pink); font-weight: 800; text-align: center;
  margin-bottom: 22px;
  padding-bottom: 0;
}
.pu-trust h4::after { display: none; }
.pu-trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.pu-trust-item {
  padding: 18px 12px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--pink);
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--purple);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .18s, box-shadow .18s;
}
.pu-trust-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pu-trust-item.is-yellow { border-top-color: var(--yellow); }
.pu-trust-item .ico {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(45, 212, 191,0.10);
  font-size: 22px;
  line-height: 1;
}
.pu-trust-item.is-yellow .ico { background: rgba(45, 212, 191,0.14); }
.pu-trust-item .lbl { line-height: 1.25; }
@media (max-width: 900px) { .pu-trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .pu-trust-grid { grid-template-columns: repeat(2, 1fr); } }

/* Yellow accent utility */
.text-yellow { color: var(--yellow); }
.text-red { color: var(--pink); }




/* NESTED SUBMENU — hover a country in Markets to reveal its sub-pages */
.nav .dropdown-menu .has-submenu { position: relative; display: flex; flex-direction: column; }
.nav .dropdown-menu .submenu-parent { justify-content: space-between; padding-right: 10px; }
.nav .dropdown-menu .submenu-caret { color: var(--text-muted); font-size: 11px; margin-left: 6px; transition: transform .18s ease; }
.nav .dropdown-menu .has-submenu:hover .submenu-parent,
.nav .dropdown-menu .has-submenu.open .submenu-parent { color: var(--pink); background: var(--surface-hover); }
.nav .dropdown-menu .has-submenu:hover .submenu-caret,
.nav .dropdown-menu .has-submenu.open .submenu-caret { color: var(--pink); }
.nav .dropdown-menu .dropdown-submenu {
  position: absolute; top: -8px; left: calc(100% + 4px);
  min-width: 220px; background: #ffffff;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; display: none; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-2); z-index: 60;
  animation: dropdownIn 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav .dropdown-menu .has-submenu:hover .dropdown-submenu { display: flex; }
}
.nav .dropdown-menu .has-submenu.open .dropdown-submenu { display: flex; }
.nav .dropdown-menu .dropdown-submenu a {
  padding: 9px 12px; border-radius: 6px; font-size: 13.5px;
  color: var(--text); white-space: nowrap; font-weight: 500;
}
.nav .dropdown-menu .dropdown-submenu a:hover { color: var(--pink); background: var(--surface-hover); }

@media (max-width: 900px) {
  .nav .dropdown-menu .has-submenu { display: block; }
  .nav .dropdown-menu .submenu-caret { transform: rotate(90deg); }
  .nav .dropdown-menu .has-submenu.open .submenu-caret { transform: rotate(270deg); }
  .nav .dropdown-menu .dropdown-submenu {
    position: static; width: 100%; min-width: 0;
    margin: 2px 0 4px 20px; padding: 2px 0 2px 8px;
    box-shadow: none; background: transparent;
    border: none; border-left: 2px solid var(--border-strong);
    border-radius: 0; animation: none; display: none;
  }
  .nav .dropdown-menu .has-submenu.open .dropdown-submenu { display: flex; }
  .nav .dropdown-menu .dropdown-submenu a { white-space: normal; }
}

/* ============ Keira.best additions ============ */

/* Collapsible TOC with arrow toggle in top-right */
.toc { position: relative; }
.toc .toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.toc .toc-header .toc-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.toc .toc-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--pink);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  padding: 0;
  line-height: 1;
}
.toc .toc-toggle:hover { background: var(--pink); color: #ffffff; border-color: var(--pink); }
.toc.is-collapsed .toc-list { display: none; }
.toc-list { list-style: decimal; margin: 0; padding-left: 22px; }
.toc-list li { padding: 3px 0; }
.toc-list li a { color: var(--text-muted); font-size: 0.94rem; }
.toc-list li a:hover { color: var(--pink); text-decoration: underline; }

/* Ensure the older ::after arrow doesn't fight our button */
.toc::after { display: none !important; }

/* Article hero + body + FAQ + author box (in case not fully covered) */
.article-hero {
  padding: 44px 0 30px;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border-bottom: 1px solid var(--border);
}
.article-hero .tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pink);
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.24);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.article-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.8vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 14px;
  text-transform: none;
  letter-spacing: 0.002em;
}
.article-hero .lede {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 780px;
  margin-bottom: 18px;
}
.article-hero .article-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text-dim);
  font-family: var(--font-head);
  letter-spacing: 0.02em;
}
.article-body { max-width: 780px; margin: 24px 0 20px; font-size: 1.02rem; line-height: 1.72; color: var(--text); }
.article-body h2 { font-family: var(--font-head); font-size: 1.5rem; letter-spacing: 0.01em; margin: 34px 0 12px; color: var(--text); }
.article-body h3 { font-family: var(--font-head); font-size: 1.2rem; margin: 24px 0 10px; color: var(--text); }
.article-body p { margin-bottom: 16px; }
.article-body a { color: var(--pink); text-decoration: underline; text-decoration-color: rgba(45, 212, 191, 0.4); }
.article-body a:hover { text-decoration-color: var(--pink); }

.faq { max-width: 780px; margin: 20px 0; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--surface);
  transition: border-color 0.2s;
}
.faq details[open] { border-color: var(--pink); }
.faq summary {
  font-family: var(--font-head);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-size: 1rem;
  padding-right: 20px;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--pink);
  font-weight: 700;
  font-size: 1.2rem;
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: 10px; color: var(--text-muted); font-size: 0.98rem; line-height: 1.65; }

.author-box {
  margin: 34px 0 20px;
  padding: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 780px;
}
.author-box .author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--pink);
  background: var(--bg-3);
}
.author-box .author-body { flex: 1; }
.author-box .author-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.author-box .author-role {
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 2px 0 8px;
}
.author-box .author-bio { font-size: 0.94rem; line-height: 1.65; color: var(--text-muted); }
.author-box .author-email-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid var(--pink);
  border-radius: 6px;
  color: var(--pink);
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.18s, color 0.18s;
}
.author-box .author-email-btn:hover { background: var(--pink); color: #ffffff; }

/* Page hero (blog/news hub) */
.page-hero {
  padding: 44px 0 28px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 0.002em;
  text-transform: none;
}
.page-hero h1 .grad { background: linear-gradient(100deg, #ffc14d 10%, #ff9d2e 45%, #ff6b57 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero .subtitle {
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.02rem;
}

/* Blog grid + card */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 30px 0 40px; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--pink);
  box-shadow: 0 14px 34px rgba(15, 25, 50, 0.10);
}
.blog-card .blog-thumb {
  aspect-ratio: 3 / 2;
  background: var(--ink);
  overflow: hidden;
}
.blog-card .blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card .blog-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.blog-card .tag {
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pink);
  background: rgba(45, 212, 191, 0.12);
  padding: 3px 9px;
  border-radius: 4px;
}
.blog-card h3 {
  font-family: var(--font-head);
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--text);
  margin: 2px 0 4px;
}
.blog-card p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.55; }
.blog-card .blog-meta { font-size: 0.82rem; color: var(--text-dim); display: flex; gap: 8px; margin-top: 6px; }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; gap: 14px; } }

/* Mobile refinements */
@media (max-width: 720px) {
  .article-hero { padding: 30px 0 22px; }
  .article-hero h1 { font-size: 1.55rem; }
  .article-hero .lede { font-size: 0.98rem; }
  .article-body h2 { font-size: 1.25rem; margin-top: 28px; }
  .article-body h3 { font-size: 1.05rem; }
  .author-box { flex-direction: column; text-align: left; padding: 16px; }
  .author-box .author-avatar { width: 60px; height: 60px; }
  .toc .toc-header .toc-title { font-size: 0.88rem; }
  .toc .toc-toggle { width: 28px; height: 28px; }
  .page-hero { padding: 30px 0 20px; }
  .page-hero h1 { font-size: 1.7rem; }
}
@media (max-width: 480px) {
  .article-body { font-size: 0.98rem; }
  .article-hero .article-meta { font-size: 0.82rem; }
}

/* ============ TOC number-badge overlap fix ============ */
/* The .toc ol li::before creates a numbered badge positioned absolute at left:0 with width 22px.
   The li elements need padding-left to clear it. This applies whether the list uses .toc-list class or not. */
.toc ol,
.toc ul,
.toc ol.toc-list,
.toc-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 28px;
  counter-reset: toc;
}
.toc ol li,
.toc ul li,
.toc-list li {
  position: relative;
  padding-left: 34px !important;
  margin: 0 0 8px !important;
  break-inside: avoid;
  counter-increment: toc;
  line-height: 1.4;
}
.toc ol li::before,
.toc-list li::before {
  content: counter(toc);
  position: absolute;
  left: 0;
  top: 0.15em;
  box-sizing: border-box;
  width: 24px;
  height: 20px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--pink);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toc-list li a {
  color: var(--text-muted);
  font-size: 0.94rem;
  display: inline-block;
  vertical-align: middle;
}
.toc-list li a:hover { color: var(--pink); text-decoration: underline; }

@media (max-width: 600px) {
  .toc ol, .toc ul, .toc-list { columns: 1; }
  .toc ol li, .toc ul li, .toc-list li { padding-left: 30px !important; }
  .toc ol li::before, .toc-list li::before { width: 22px; height: 18px; font-size: 0.68rem; }
}


/* ============ Post hero images + affiliate disclosure hero ============ */
.article-body .post-hero,
.post-hero {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 0 0 24px;
  display: block;
  box-shadow: 0 8px 24px rgba(15, 25, 50, 0.10);
  background: var(--bg-2);
}
.disclosure-hero-img {
  width: 100%;
  max-width: 780px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 20px auto 24px;
  display: block;
  box-shadow: 0 8px 24px rgba(15, 25, 50, 0.10);
  background: var(--bg-2);
}
@media (max-width: 720px) {
  .article-body .post-hero, .post-hero { margin-bottom: 18px; }
  .disclosure-hero-img { margin: 14px auto 18px; }
}


/* ============ SE feat-thumb — image fills box to the edge ============ */
.featured-cards .feat-thumb {
  width: 82px !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  aspect-ratio: auto !important;
  border-radius: 12px;
  background: var(--bg-1);
  display: block !important;
  padding: 0 !important;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.featured-cards .feat-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 12px;
}


/* reveal no-js fallback — always visible if JS didn't run within a second */
@keyframes revealFallback { to { opacity: 1; transform: none; } }
.reveal { animation: revealFallback 0.01s linear 1.5s forwards; }
.reveal.is-visible { animation: none; opacity: 1; transform: none; }


/* inline-hero image within article — full article width, natural aspect */
.inline-hero {
  margin: 22px 0 26px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 25, 50, 0.10);
  background: var(--bg-2);
  display: block;
}
.inline-hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 720px) {
  .inline-hero { margin: 16px 0 20px; border-radius: 10px; }
}


/* ================================================================
   POKEROLOGY THEME OVERRIDES v2 — keira.fun
   Light canvas · Kanit · NAVY #143659 brand · TEAL #2dd4bf · GOLD #ff6b57
   ================================================================ */

:root { --ink:#143659; --ink-text:#f2f3fb; --gold:#ffb54d; --gold-2:#ffcf80; --teal:#2dd4bf; --teal-2:#22b8a5; --teal-ink:#8ce8db; }

body::before { background: radial-gradient(1100px 620px at 12% -6%, rgba(255,138,94,0.16), transparent 60%), radial-gradient(950px 540px at 104% 2%, rgba(45,212,191,0.12), transparent 60%), linear-gradient(180deg, #161629 0%, #ffffff 100%) !important; }
body { background: #ffffff; }

/* Display headings: Kanit 600, mixed case */
.hero h1, .editorial-hero h1, .page-hero h1, .article-hero h1, .pu-hero h1,
.list-heading, .pu-expert-block h4, .score-overall .num,
.editorial-hero .stat .num, .logo {
  font-family: var(--font-display) !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}

/* Nav: mixed case, dark, teal hover/active */
.nav a, .nav .dropdown-trigger { text-transform: none; letter-spacing: 0.005em; font-weight: 500; font-size: 15px; }
.nav a:hover, .nav .dropdown-trigger:hover { color: var(--teal-ink); background: var(--surface-hover); }
.nav a.active { color: var(--ink); border-bottom-color: var(--teal); }
.logo .logo-text .accent { color: var(--teal-ink); }

/* Top strip -> navy */
.top-strip { background: var(--ink); color: #e8e9f5; }
.top-strip a { color: #ffcf80; }
.top-strip .strip-left .pill { background: rgba(45, 212, 191,0.18); color: var(--teal); }

/* Buttons / CTA -> teal with dark ink text */
.btn-primary, .pu-hero .btn-primary { background: var(--teal); color: #ffffff; box-shadow: 0 4px 14px rgba(45, 212, 191,0.35); }
.btn-primary:hover, .pu-hero .btn-primary:hover { background: var(--teal-2); color: #ffffff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(45, 212, 191,0.42); }
.btn-secondary { background:#ffffff; color: var(--ink); border:2px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color:#ffffff; }
.casino-cta .btn, .casino-cta .btn-primary { background: var(--teal); color:#ffffff; }
.casino-cta .btn:hover { background: var(--teal-2); color:#ffffff; }
.pu-cta-bar { background: linear-gradient(135deg, #2c2c56 0%, #143659 100%); box-shadow: 0 12px 32px rgba(15, 25, 50,0.28); border:1px solid rgba(45, 212, 191,0.25); }
.pu-cta-bar .btn-cta { background: var(--teal); color:#ffffff; }
.pu-cta-bar .btn-cta:hover { color:#ffffff; }

/* Section title bars -> navy block + TEAL end-square */
.pu-section-title { background: var(--ink); border-radius:4px; padding:0; margin:44px 0 22px; position:relative; overflow:hidden; align-items:stretch; gap:0; }
.pu-section-title h2 { background:transparent; color:#ffffff; border:0; padding:13px 22px; margin:0; font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:0.05em; display:inline-flex; align-items:center; }
.pu-section-title .see-all { color:#8ce8db; align-self:center; margin-left:auto; padding:0 62px 0 20px; opacity:0.9; }
.pu-section-title .see-all:hover { color: var(--teal); opacity:1; }
.pu-section-title::after { content:""; position:absolute; right:0; top:0; bottom:0; width:46px; background: var(--teal); }
.section-title { background: var(--ink); color:#ffffff; border-bottom:0; border-radius:4px; padding:12px 20px; gap:0; }
.section-title::before { display:none; }
.section-title::after { content:""; position:absolute; right:0; top:0; bottom:0; left:auto; width:42px; height:auto; background: var(--teal); }
.pu-coverage h2 { border-bottom-color: var(--teal); }
.content h2::after { background: var(--teal); }

/* Homepage hero -> NAVY band, teal accent word, gold ticks */
.pu-hero { background: linear-gradient(160deg, #2c2c56 0%, #22224a 55%, #1a1a36 100%); border-bottom:0; color:#eceefc; padding:60px 0 66px; }
.pu-hero::before { opacity:0.05; }
.pu-hero .kicker { background: rgba(45, 212, 191,0.14); color: var(--teal); }
.pu-hero .kicker .dot { background: var(--teal); box-shadow:0 0 0 3px rgba(45, 212, 191,0.30); }
.pu-hero h1 { color:#ffffff; max-width:1000px; }
.pu-hero h1 .yellow { color: var(--teal); }
.pu-hero h1 .red { color: var(--gold); }
.pu-hero .lede { color: rgba(255,255,255,0.92); }
.pu-hero .trust-row { color: rgba(255,255,255,0.85); border-top-color: rgba(255,255,255,0.18); }
.pu-hero .trust-row .item strong { color:#ffffff; }
.pu-hero .trust-row .tick { color: var(--gold); }
.pu-hero .btn-secondary { background:transparent; color:#ffffff; border:2px solid rgba(255,255,255,0.5); }
.pu-hero .btn-secondary:hover { background:#ffffff; color: var(--ink); border-color:#ffffff; }

/* Promo strip -> navy, teal dots */
.pu-promo-strip { background: var(--ink); }
.pu-promo-strip .yellow-dot { background: var(--teal); }

/* Expert / author block -> navy gradient, teal rule */
.pu-expert-block { background: linear-gradient(135deg, #2c2c56 0%, #143659 100%); }
.pu-expert-block::before { background: linear-gradient(90deg, var(--teal), var(--gold), var(--teal)); }
.pu-expert-block h3 { color: var(--teal); }
.pu-expert-block .role { color: var(--gold); }
.pu-expert-avatar { border-color: rgba(45, 212, 191,0.35); }

/* Trust band */
.pu-trust::before { background: linear-gradient(90deg, var(--teal), var(--gold), var(--ink), var(--teal)); }
.pu-trust h4 { color: var(--teal-ink); }
.pu-trust-item { border-top-color: var(--teal); }
.pu-trust-item.is-yellow { border-top-color: var(--gold); }

/* Brand strip -> navy */
.brand-strip { background: var(--ink); }

/* Content links -> navy, teal hover */
.content a { color: var(--ink); border-bottom:1px solid rgba(45, 212, 191,0.5); }
.content a:hover { color: var(--teal-ink); border-color: var(--teal-ink); }

/* Chips */
.pu-chip .ico-box { background: linear-gradient(135deg, var(--ink), #32325e); color:#ffffff; }
.pu-chip.is-red .ico-box { background: linear-gradient(135deg, var(--ink), #32325e); }
.pu-chip.is-yellow .ico-box { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color:#ffffff; }
.pu-chip:hover { border-color: var(--teal); }

/* Rank / rating / new badges -> GOLD accent */
.rank-badge { background: var(--gold); color:#ffffff; box-shadow:0 3px 10px rgba(240, 102, 58,0.4); }
.new-badge, .casino-thumb .new-flag, .pu-brand-tile .badge-red { background: var(--teal); color:#ffffff; }
.rating { background: rgba(240, 102, 58,0.16); color:#d94f2b; }
.bonus-label { color: var(--teal-ink); }
.score-overall .num, .score-overall .stars { color: var(--gold); }

/* Footer -> light, navy headings, teal hover, teal top rule */
.site-footer { background:#F4F5F7; color:#1a1a30; border-top:3px solid var(--teal); }
.site-footer .logo .logo-text { color: var(--ink); }
.site-footer .logo .logo-text .accent { color: var(--teal-ink); }
.site-footer p { color:#1f1f38; }
.site-footer a { color:#1a1a30; }
.site-footer a:hover { color: var(--teal-ink); }
.footer-grid h3, .footer-grid h4 { color: var(--ink); }
.footer-grid p, .footer-grid li { color:#1f1f38; }
.footer-bottom { border-top-color:#33335c; color:#26264a; }
.responsible-badge { background: rgba(15, 25, 50,0.05); border-color:#D0D1D6; color: var(--ink); }

/* Market sub-nav active -> teal */
.market-subnav a.active { background: var(--teal); border-color: var(--teal); color:#ffffff; }
.market-subnav a:hover { color: var(--teal-ink); border-color: var(--teal); }

/* Tags: navy default, teal guide, gold tools */
.blog-card .tag, .article-hero .tag, .pu-news-card .tag, .news-lead .tag, .news-item .tag { background: var(--ink); color:#ffffff; border:0; }
.blog-card .tag.guide, .article-hero .tag.guide { background: var(--teal); color:#ffffff; }
.blog-card .tag.tools, .article-hero .tag.tools { background: var(--gold); color:#ffffff; }

/* Thumb placeholders -> navy */
.blog-card .thumb, .news-lead .thumb, .pu-news-card .thumb { background: var(--ink); }

/* Casino list */
.casino-list { background: linear-gradient(180deg,#191930 0%,#EEF0F3 100%); border-color:#E4E6EA; }
.casino-card { border-left:4px solid var(--ink); }
.casino-card:hover { border-left-color: var(--teal); }
.casino-card.is-top { border-left-color: var(--gold); background: linear-gradient(180deg,#2c2140,#ffffff); }

/* Article body links */
.article-body a { color: var(--teal-ink); text-decoration-color: rgba(45, 212, 191,0.5); }
.article-body a:hover { text-decoration-color: var(--teal-ink); }

/* TOC / callouts accent tweaks */
.toc { border-left-color: var(--teal); }
.toc .toc-toggle { color: var(--teal-ink); }
.toc-list li a:hover, .toc a:hover { color: var(--teal-ink); }
.callout { border-left-color: var(--teal); }
.callout.is-warning { border-left-color: var(--gold); }
.market-tile::after { background: var(--teal); }
.market-tile:hover { border-color: var(--teal); }
.pu-brand-tile:hover, .pu-resource:hover, .blog-card:hover, .feat-card:hover, .flag-tile:hover, .country-card:hover, .feature-card:hover { border-color: var(--teal); }
.pu-resource.is-blog { border-top-color: var(--ink); }
.pu-resource.is-tool { border-top-color: var(--gold); }
.eyebrow, .hero .eyebrow { background: rgba(45, 212, 191,0.12); border-color: rgba(45, 212, 191,0.3); color: var(--teal-ink); }

/* ================= TOOLS / CALCULATOR WIDGETS ================= */
.calc {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 24px 24px 26px;
  margin: 6px 0 30px;
  box-shadow: var(--shadow-1);
}
.calc h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--text); margin: 0 0 4px; }
.calc .calc-sub { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 18px; }
.calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
@media (max-width: 620px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label { font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.calc-field input, .calc-field select {
  width: 100%; background: #ffffff; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 12px 14px; color: var(--text);
  font-family: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
.calc-field input:focus, .calc-field select:focus { outline: none; border-color: var(--teal-2); box-shadow: 0 0 0 3px rgba(45, 212, 191,0.18); }
.calc-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.calc-actions .btn { cursor: pointer; }
.calc-results { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 620px) { .calc-results { grid-template-columns: 1fr; } }
.calc-tile {
  background: var(--navy); color: #ffffff; border-radius: 12px; padding: 18px 16px; text-align: center;
  position: relative; overflow: hidden;
}
.calc-tile.is-accent { background: linear-gradient(135deg, #2a2c6b, #143659); border: 1px solid rgba(45, 212, 191,0.4); }
.calc-tile .num { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.05; color: var(--teal); word-break: break-word; }
.calc-tile .lbl { display: block; margin-top: 6px; font-family: var(--font-head); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: #9aa8c0; }
.calc-verdict { margin-top: 18px; padding: 14px 18px; border-radius: 10px; font-size: 0.98rem; line-height: 1.55; border-left: 4px solid var(--teal); background: #24244a; color: var(--text); }
.calc-verdict.warn { border-left-color: var(--red); background: #2c2140; }
.calc-note { font-size: 12.5px; color: var(--text-dim); margin-top: 14px; }


/* ================= HOMEPAGE (pokerology-style) v2 ================= */
.pu-hero-grid { display:grid; grid-template-columns: 1.15fr 0.85fr; gap:40px; align-items:center; }
.pu-hero-grid .hero-art { display:flex; justify-content:center; }
.pu-hero-grid .hero-art img { width:100%; max-width:520px; height:auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); }
@media (max-width:900px){ .pu-hero-grid{ grid-template-columns:1fr; gap:24px; } .pu-hero-grid .hero-art{ display:none; } }

/* News & Guides lead + numbered sidebar */
.home-lead-row { display:grid; grid-template-columns: 1.6fr 1fr; gap:24px; margin-bottom:20px; align-items:start; }
@media (max-width:900px){ .home-lead-row{ grid-template-columns:1fr; } }
.lead-story { background:#ffffff; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow: var(--shadow-1); display:flex; flex-direction:column; }
.lead-story .thumb { aspect-ratio:16/8; background: var(--ink); overflow:hidden; }
.lead-story .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.lead-story .body { padding:20px 22px 24px; }
.lead-story .tag { display:inline-block; font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:#ffffff; background:var(--ink); padding:4px 11px; border-radius:4px; margin-bottom:12px; }
.lead-story h3 { font-family:var(--font-head); font-weight:600; font-size:1.55rem; line-height:1.2; color:var(--text); margin:0 0 10px; }
.lead-story p { color:var(--text-muted); margin:0 0 16px; font-size:15px; }
.sidebar-box { background:#ffffff; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-1); }
.sidebar-box .sb-head { background:var(--ink); color:#ffffff; font-family:var(--font-head); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; font-size:14px; padding:12px 18px; position:relative; }
.sidebar-box .sb-head::after { content:""; position:absolute; right:0; top:0; bottom:0; width:34px; background:var(--teal); }
.latest-list { list-style:none; margin:0; padding:8px 6px; counter-reset:ll; }
.latest-list li { counter-increment:ll; display:flex; gap:14px; align-items:flex-start; padding:13px 14px; border-bottom:1px solid var(--border); }
.latest-list li:last-child { border-bottom:0; }
.latest-list li::before { content:counter(ll); flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:rgba(45, 212, 191,0.14); color:var(--teal-ink); font-family:var(--font-display); font-weight:600; font-size:16px; display:grid; place-items:center; }
.latest-list a { color:var(--text); font-family:var(--font-head); font-weight:500; font-size:14.5px; line-height:1.3; }
.latest-list a:hover { color:var(--teal-ink); }
.latest-list .meta { display:block; font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--text-dim); margin-top:3px; letter-spacing:0; text-transform:none; }

/* Country rows (Browse by market) */
.country-rows { display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin:6px 0 20px; }
@media (max-width:760px){ .country-rows{ grid-template-columns:1fr; } }
.country-rows a { display:flex; align-items:center; gap:16px; padding:16px 6px; border-bottom:2px solid var(--ink); transition:border-color .18s, padding-left .18s; }
.country-rows a:hover { border-bottom-color:var(--teal); padding-left:12px; }
.country-rows img { width:40px; height:40px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.15); flex:0 0 auto; }
.country-rows .c-name { font-family:var(--font-head); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; font-size:1.05rem; color:var(--text); }
.country-rows .c-sub { display:block; font-family:var(--font-body); font-weight:400; text-transform:none; letter-spacing:0; font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.country-rows .c-arrow { margin-left:auto; color:var(--teal-ink); font-size:22px; font-weight:700; transition:transform .18s; }
.country-rows a:hover .c-arrow { transform:translateX(4px); }


/* ===== Full-visible hero images (show whole banner, no crop) ===== */
.post-hero, .disclosure-hero-img {
  aspect-ratio: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.lead-story .thumb { aspect-ratio: auto; }
.lead-story .thumb img { height: auto; object-fit: contain; }


/* ================= LESSON LAYOUT (pokerology-style, scoped) ================= */
.lesson-layout main .container,
.lesson-layout main > section.container { max-width: 900px; }
.lesson-layout .page-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 30px 0 8px;
  text-align: left;
}
.lesson-layout .page-hero .breadcrumbs { justify-content: flex-start; }
.lesson-layout .page-hero h1 { text-align: left; }
.lesson-layout .page-hero .lead { margin: 0; text-align: left; max-width: 100%; }
.lesson-layout .list-heading { text-align: left; }
.lesson-layout .content h2 { letter-spacing: 0; }
.lesson-layout .content { padding-top: 20px; }
/* Related block */
.related-title {
  font-family: var(--font-head); font-weight: 600; font-size: 1.5rem;
  color: var(--text); margin: 8px 0 2px; padding-bottom: 10px;
  border-bottom: 2px solid var(--border); position: relative;
}
.related-title::after { content:""; position:absolute; left:0; bottom:-2px; width:60px; height:2px; background:var(--teal); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 8px; }
.related-card {
  display: block; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: 10px; background: #ffffff; box-shadow: var(--shadow-1);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.related-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.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: #7ef0e0; background: rgba(45,212,191,0.14); border: 1px solid rgba(45,212,191,0.30); border-radius: 999px; padding: 3px 10px; line-height: 1.4; }
.related-card .r-title { display:block; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--text); margin-top: 6px; line-height: 1.3; }
@media (max-width: 760px){ .related-grid { grid-template-columns: 1fr; } }


/* ---- PT market subnav pill row ---- */
.pt-subnav { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 4px; }
.pt-subnav .pt-pill { font-family: var(--font-head); font-weight:600; font-size:.86rem; letter-spacing:.01em; color: var(--ink); background:#ffffff; border:1px solid rgba(15, 25, 50,.14); border-radius:999px; padding:7px 15px; text-decoration:none; transition:all .15s ease; white-space:nowrap; }
.pt-subnav .pt-pill:hover { border-color: var(--teal); color: var(--teal-ink); box-shadow: var(--shadow-1); }
.pt-subnav .pt-pill.is-active { background: var(--ink); color:#ffffff; border-color: var(--ink); }
@media (max-width:640px){ .pt-subnav { gap:6px; } .pt-subnav .pt-pill { font-size:.8rem; padding:6px 12px; } }


/* ---- FIX: FAQ / section-title heading legible on navy bar ---- */
.section-title h2, .content .section-title h2 { color: #fff; margin: 0; }
.section-title h2::after, .content .section-title h2::after { display: none; }

/* ================================================================
   onlinecasinos.com-style structure components — keira.fun
   ================================================================ */

/* --- LIVE WIN TICKER --- */
.win-ticker{display:flex;align-items:center;gap:0;background:linear-gradient(90deg,#1d1d3a,#143659 55%,#1d1d3a);border-top:1px solid rgba(45, 212, 191,0.4);border-bottom:1px solid rgba(240,102,58,0.5);overflow:hidden;height:40px;}
.win-ticker-label{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:var(--gold);color:#ffffff;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:0 16px;height:100%;white-space:nowrap;}
.win-ticker-viewport{flex:1 1 auto;overflow:hidden;position:relative;height:100%;}
.win-track{display:flex;align-items:center;gap:34px;white-space:nowrap;position:absolute;left:0;top:0;height:100%;will-change:transform;animation:winscroll 60s linear infinite;}
.win-ticker:hover .win-track{animation-play-state:paused;}
.win-item{display:inline-flex;align-items:center;gap:8px;color:#26264e;font-family:var(--font-body);font-size:13px;}
.win-item img{width:18px;height:18px;border-radius:3px;flex:0 0 auto;}
.win-item .wi-name{font-weight:600;color:#ffffff;}
.win-item .wi-amt{font-weight:700;color:#7CF7A9;}
.win-item .wi-brand{color:#7de2d3;font-weight:600;}
.win-item .wi-game{color:#b7bad8;}
@keyframes winscroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* --- flags inline in casino card names / bonus cards --- */
.oc-flag{display:inline-block;vertical-align:middle;border-radius:3px;margin-left:4px;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.casino-info h3 .oc-flag{width:20px;height:20px;}
.casino-cta .review-link{display:inline-block;margin-top:2px;}

/* --- BEST BY CATEGORY table accents --- */
.oc-cat-table table td a{white-space:nowrap;}
.oc-cat-table table td:first-child strong{color:var(--text);}

/* --- BEST BONUSES cards --- */
.oc-bonus-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 20px;}
@media(max-width:900px){.oc-bonus-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.oc-bonus-cards{grid-template-columns:1fr;}}
.oc-bonus-card{display:flex;flex-direction:column;gap:8px;background:#ffffff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-1);transition:transform .18s,border-color .18s,box-shadow .18s;text-align:center;}
.oc-bonus-card:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--shadow-2);}
.oc-bc-top{display:flex;align-items:center;justify-content:center;gap:8px;height:64px;background:linear-gradient(160deg,#9decdf,#8ce8db);border:1px solid #8ce8db;border-radius:10px;padding:8px 12px;}
.oc-bc-top img:first-child{max-height:44px;max-width:130px;width:auto;object-fit:contain;}
.oc-bc-top .oc-flag{width:22px;height:22px;margin:0;}
.oc-bc-name{font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--text);}
.oc-bc-bonus{font-size:14px;color:var(--text-muted);line-height:1.4;flex:1 1 auto;min-height:40px;}
.oc-bc-terms{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;}

/* --- WHAT MAKES A TOP CASINO (criteria) --- */
.oc-criteria{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 20px;}
@media(max-width:900px){.oc-criteria{grid-template-columns:1fr;}}
.oc-crit{display:flex;gap:14px;align-items:flex-start;background:#ffffff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-1);}
.oc-crit .n{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--teal);flex:0 0 auto;line-height:1;}
.oc-crit h4{font-family:var(--font-head);font-weight:600;font-size:1.05rem;margin:0 0 4px;color:var(--text);}
.oc-crit p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.5;}

/* --- HOW WE RATE (info-box grid) --- */
.oc-infobox-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:6px 0 20px;}
@media(max-width:900px){.oc-infobox-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.oc-infobox-grid{grid-template-columns:1fr;}}
.oc-infobox{background:linear-gradient(160deg,#143659,#1d1d3a);color:#ffffff;border-radius:var(--radius-lg);padding:20px 18px;text-align:center;border:1px solid rgba(45, 212, 191,0.3);}
.oc-infobox .ico{font-size:26px;display:block;margin-bottom:8px;}
.oc-infobox h4{font-family:var(--font-head);font-weight:600;font-size:1rem;margin:0 0 6px;color:#ffffff;}
.oc-infobox p{margin:0;font-size:13px;color:#b7bad8;line-height:1.5;}

/* --- TRUSTED STATS --- */
.oc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 8px;padding:26px 18px;background:linear-gradient(135deg,#2c2c56,#143659);border-radius:var(--radius-lg);}
@media(max-width:640px){.oc-stats{grid-template-columns:repeat(2,1fr);gap:20px 16px;}}
.oc-stat{text-align:center;}
.oc-stat .num{display:block;font-family:var(--font-display);font-weight:700;font-size:2.2rem;line-height:1;color:var(--gold);}
.oc-stat .lbl{display:block;margin-top:6px;font-family:var(--font-head);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#b7bad8;}

/* --- FAQ --- */
.oc-faq{display:flex;flex-direction:column;gap:10px;margin:6px 0 20px;}
.oc-faq details{background:#ffffff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden;}
.oc-faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--text);position:relative;padding-right:44px;}
.oc-faq summary::-webkit-details-marker{display:none;}
.oc-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--teal);font-weight:400;transition:transform .2s;}
.oc-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.oc-faq details p{margin:0;padding:0 18px 16px;color:var(--text-muted);font-size:14.5px;line-height:1.6;}
.oc-faq details p a{color:var(--teal-ink);}

/* --- MEET THE DESK team --- */
.oc-team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 20px;}
@media(max-width:760px){.oc-team{grid-template-columns:1fr;}}
.oc-member{background:#ffffff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 18px;text-align:center;box-shadow:var(--shadow-1);}
.oc-member img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid rgba(45, 212, 191,0.3);margin-bottom:12px;background:#24244a;}
.oc-m-name{font-family:var(--font-head);font-weight:600;font-size:1.1rem;color:var(--text);}
.oc-m-role{font-size:13px;color:var(--teal-ink);font-weight:600;margin-bottom:8px;}
.oc-member p{margin:0;font-size:13.5px;color:var(--text-muted);line-height:1.5;}

/* --- FOOTER TRUST ROW --- */
.footer-trust{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;padding:18px 0;margin-top:8px;border-top:1px solid #33335c;}
.footer-trust span{font-size:13px;color:#1f1f38;font-weight:500;}
/* footer trust badges with icons */
.footer-trust .ft-badge{display:inline-flex;align-items:center;gap:6px;}
.footer-trust .ft-badge .ft-ico{color:var(--teal);flex:0 0 auto;}


/* --- Exclusive bonuses: accepted-markets flag row --- */
.oc-accepts{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px;}
.oc-accepts-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-weight:600;margin-right:2px;}
.oc-accepts img{width:22px;height:22px;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.22);}
.oc-terms{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;text-align:center;}

/* --- reference casino-card enhancements --- */
.oc-score-desc{display:inline-block;margin:0 0 10px 8px;font-size:12px;font-weight:600;color:var(--success);vertical-align:middle;}
.oc-claimed{display:block;margin-top:4px;font-size:11.5px;color:var(--text-dim);text-align:center;}

/* promo strip: right-aligned How-we-test link */
.pu-promo-strip .container{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;}
.pu-promo-strip .promo-howto{margin-left:auto;color:#ffffff;font-family:var(--font-head);font-weight:600;font-size:13px;opacity:.95;white-space:nowrap;}
.pu-promo-strip .promo-howto:hover{color:var(--gold);}

/* --- mobile tweaks for reference-style components --- */
@media (max-width:640px){
 .win-ticker{height:36px;}
 .win-ticker-label{font-size:10.5px;padding:0 10px;}
 .win-item{font-size:12px;gap:6px;}
 .oc-stat .num{font-size:1.7rem;}
 .oc-cat-table table{font-size:13px;}
 .oc-cat-table table td a{font-size:12px;}
 .footer-trust{gap:8px 14px;}
 .footer-trust span{font-size:12px;}
 .oc-score-desc{margin-left:6px;font-size:11px;}
}
@media (max-width:900px){
 .nav .dropdown-menu a{white-space:normal;justify-content:flex-start;gap:10px;text-align:left;}
}

/* --- nav CTA button (Exclusive bonuses) like reference --- */
.nav .nav-cta{background:var(--teal);color:#ffffff !important;border-radius:999px;padding:9px 18px;font-weight:700;margin-left:8px;border-bottom:0 !important;transition:background .15s,transform .1s;}
.nav .nav-cta:hover{background:var(--teal-2);color:#ffffff !important;transform:translateY(-1px);}
.nav .nav-cta.active{background:var(--teal-2);border-bottom:0 !important;}
@media(max-width:900px){.nav .nav-cta{display:inline-block;margin:6px 0;}}

/* --- shorter hero (reference-style compact) --- */
.pu-hero{padding:34px 0 40px !important;}
.pu-hero h1{font-size:clamp(1.9rem,3.2vw,2.8rem) !important;line-height:1.14 !important;max-width:640px;}
.pu-hero .lede{font-size:1rem;max-width:600px;}
.pu-hero .trust-row{display:none;}
.pu-hero-grid{align-items:center;}
.pu-hero-grid .hero-art img{max-width:460px;}

/* --- team 2-up centered --- */
.oc-team-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-left:auto;margin-right:auto;}
@media(max-width:760px){.oc-team-2{grid-template-columns:1fr;}}

/* --- Mobile: collapsible hero lede + tighter hero so markets show sooner --- */
.lede-toggle{display:none;}
@media (max-width:768px){
 .pu-hero, .pu-hero.pu-hero-centered{padding:12px 0 14px !important;}
 .pu-hero .hero-bg{opacity:.42;}
 .pu-hero .kicker{margin-bottom:6px !important;font-size:11px;padding:5px 12px;}
 .pu-hero h1{font-size:clamp(1.3rem,5.6vw,1.6rem) !important;line-height:1.14 !important;margin:2px auto 8px !important;}
 .pu-hero .lede{font-size:0.9rem;line-height:1.5;margin:0 auto 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
 .pu-hero .lede.expanded{-webkit-line-clamp:unset;overflow:visible;}
 .lede-toggle{display:inline-block;background:none;border:0;color:var(--gold);font-family:var(--font-head);font-weight:700;font-size:13px;padding:0 0 4px;cursor:pointer;}
 .pu-hero .cta-row{margin:8px 0 0 !important;gap:8px;}
 .pu-hero .cta-row .btn{padding:10px 14px;font-size:13.5px;}
 /* markets list sits right after the short intro */
 .pu-promo-strip{display:none;}
 .win-ticker{height:34px;}
}

/* ============ Polish round: pills, subnav align, payid, TOC arrow ============ */
/* Kicker / eyebrow pills: full text visible, even padding (Montserrat is wider) */
.pu-hero .kicker, .hero .eyebrow, .eyebrow{ white-space:nowrap; letter-spacing:0.08em !important; padding:6px 16px !important; line-height:1.4; }
@media (max-width:560px){ .pu-hero .kicker, .hero .eyebrow, .eyebrow{ white-space:normal; letter-spacing:0.05em !important; } }

/* Market sub-nav aligned with page content (lesson-layout content is 900px) */
.lesson-layout .market-subnav .container{ max-width:900px; }
.market-subnav .subnav-scroll{ justify-content:flex-start; }

/* PayID badge sits in the corner ABOVE the Claim Bonus button, never over it */
.casino-card:has(.payid-badge) .casino-cta{ padding-top:30px; }
.payid-badge{ top:12px; right:12px; }
@media (max-width:900px){ .casino-card:has(.payid-badge) .casino-cta{ padding-top:0; } }

/* Collapsible TOC: hide list when collapsed (works with <ol>/<ul>) */
.toc.is-collapsed ol, .toc.is-collapsed ul, .toc.is-collapsed .toc-list{ display:none !important; }
.toc .toc-header{ margin-bottom:12px; }

/* ============ New brand logo (full wordmark image) ============ */
.logo img{ height:42px !important; width:auto !important; border-radius:0 !important; }
.site-header .logo{ gap:0; }
.footer-grid .logo img{ height:38px !important; width:auto !important; }
.logo:hover img{ transform:none !important; }
@media (max-width:600px){ .logo img{ height:34px !important; } .footer-grid .logo img{ height:32px !important; } }

/* ================= PREMIUM DEMO GAMES (casino-app look) ================= */
.game-shell{max-width:760px;margin:0 auto;}
.game-cab{position:relative;background:radial-gradient(120% 140% at 50% -10%,#2a2d6e 0%,#1d1d3a 55%,#0d0e2a 100%);border:1px solid rgba(120,130,255,.35);border-radius:22px;padding:22px 22px 26px;box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;}
.game-cab::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 0%,rgba(240,102,58,.16),transparent 70%);pointer-events:none;}
.game-topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;position:relative;z-index:1;}
.game-title{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:#ffffff;letter-spacing:.02em;text-transform:uppercase;}
.game-title .badge{background:linear-gradient(135deg,#ff9d2e,#ff6b57);color:#ffffff;font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 9px;border-radius:999px;}
.hud{display:flex;gap:10px;}
.hud .cell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:7px 14px;text-align:center;min-width:78px;}
.hud .cell .l{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#7de2d3;}
.hud .cell .v{display:block;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:#ffc766;line-height:1.1;}
.hud .cell.win .v{color:#7CF7A9;}
.game-msg{text-align:center;min-height:26px;margin:14px 0 4px;font-family:var(--font-head);font-weight:700;color:#26264e;position:relative;z-index:1;}
.game-msg.win{color:#7CF7A9;} .game-msg.lose{color:#ffa585;}
.game-controls{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1;}
.gbtn{cursor:pointer;border:0;border-radius:12px;font-family:var(--font-head);font-weight:800;letter-spacing:.02em;transition:transform .08s,box-shadow .15s,filter .15s;}
.gbtn:active{transform:translateY(2px) scale(.98);}
.gbtn-primary{background:linear-gradient(180deg,#6d78ff,#22b8a5);color:#ffffff;padding:15px 40px;font-size:17px;box-shadow:0 8px 22px rgba(45, 212, 191,.5),inset 0 1px 0 rgba(255,255,255,.3);text-transform:uppercase;}
.gbtn-primary:hover{filter:brightness(1.08);}
.gbtn-primary:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3);}
.gbtn-go{background:linear-gradient(180deg,#ffc766,#ff6b57);color:#2a1400;box-shadow:0 8px 22px rgba(240,102,58,.45),inset 0 1px 0 rgba(255,255,255,.4);}
.gbtn-round{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#ffffff;font-size:20px;display:grid;place-items:center;}
.gbtn-round:hover{background:rgba(255,255,255,.18);}
.gbtn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#ffffff;padding:11px 18px;font-size:13px;text-transform:uppercase;}
.game-note{text-align:center;font-size:11.5px;color:#8a90c8;margin-top:14px;position:relative;z-index:1;}
/* win banner */
.win-banner{position:absolute;inset:0;display:none;place-items:center;background:rgba(10,11,30,.55);backdrop-filter:blur(2px);z-index:5;}
.win-banner.show{display:grid;animation:winpop .4s ease;}
.win-banner .box{background:linear-gradient(135deg,#ffc766,#ff6b57);color:#2a1400;font-family:var(--font-display);font-weight:800;padding:18px 34px;border-radius:16px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.win-banner .box .big{font-size:2rem;line-height:1;} .win-banner .box .sub{font-size:1rem;margin-top:6px;}
@keyframes winpop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
/* SLOT */
.slot-window{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:linear-gradient(180deg,#0a0b22,#12143a);border:3px solid;border-image:linear-gradient(135deg,#ffc766,#ff6b57) 1;border-radius:14px;padding:10px;position:relative;z-index:1;box-shadow:inset 0 0 40px rgba(0,0,0,.6);}
.reel{height:270px;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.03);position:relative;}
.reel .strip{display:flex;flex-direction:column;}
.sym{height:90px;display:grid;place-items:center;font-size:52px;border-bottom:1px solid rgba(255,255,255,.05);}
.sym.win{background:radial-gradient(circle,rgba(124,247,169,.35),transparent 70%);animation:symwin .6s ease infinite alternate;}
@keyframes symwin{to{transform:scale(1.12)}}
.reel.spinning .strip{filter:blur(3px);}
.paytable{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:12px;font-size:12px;color:#b7bad8;position:relative;z-index:1;}
.paytable span{display:inline-flex;align-items:center;gap:5px;}

/* ===== Mobile polish: market intro Read-more · score descriptor · PayID center ===== */
.lead-more-btn{display:none;}
@media (max-width:768px){
 .page-hero .lead.lead-clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
 .page-hero .lead.lead-clamp.lead-open{-webkit-line-clamp:unset;overflow:visible;}
 .lead-more-btn{display:inline-block;background:none;border:0;color:var(--pink);font-family:var(--font-head);font-weight:800;font-size:13px;padding:2px 0 8px;cursor:pointer;}
}
@media (max-width:900px){
 .casino-info .oc-score-desc{display:block;margin:2px 0 6px;}
}
@media (max-width:480px){
 .casino-card{grid-template-areas:"thumb features" "name features" "rating features" "desc features" "bonus bonus" "payid payid" "cta cta" !important;}
 .casino-info .oc-score-desc{grid-area:desc;justify-self:start;margin:0 0 2px;}
 .casino-card:has(.payid-badge) .casino-cta{padding-top:0;}
 .payid-badge{grid-area:payid !important;position:static !important;justify-self:center;margin:8px auto 2px !important;}
}

/* === Exclusive-bonuses: clean centered mobile card === */
@media (max-width:700px){
 .oc-bonuses .casino-card{
   display:flex !important;
   flex-direction:column;
   align-items:center;
   text-align:center;
   grid-template-areas:none !important;
   grid-template-columns:none !important;
   gap:6px;
   padding:20px 16px 22px;
 }
 .oc-bonuses .casino-card .rank-badge{ top:10px; left:10px; }
 .oc-bonuses .casino-thumb{
   grid-area:auto !important;
   width:100%;
   max-width:230px;
   aspect-ratio:16/9;
   margin:6px auto 4px;
 }
 .oc-bonuses .casino-info{
   display:block !important;
   width:100%;
   text-align:center;
 }
 .oc-bonuses .casino-info h3{ grid-area:auto !important; margin:0 0 4px; font-size:1.2rem; }
 /* rating + descriptor on one centered row */
 .oc-bonuses .casino-info .rating{
   grid-area:auto !important;
   display:inline-block;
   justify-self:center !important;
   margin:0;
   vertical-align:middle;
 }
 .oc-bonuses .casino-info .oc-score-desc{
   grid-area:auto !important;
   display:inline-block !important;
   margin:0 0 0 8px !important;
   vertical-align:middle;
 }
 /* accepted-in flags on their own centered row below */
 .oc-bonuses .oc-accepts{
   grid-area:auto !important;
   justify-content:center;
   margin:8px 0 2px;
 }
 .oc-bonuses .casino-bonus{
   grid-area:auto !important;
   align-items:center;
   text-align:center;
   margin-top:10px;
 }
 .oc-bonuses .casino-cta{
   grid-area:auto !important;
   width:100%;
   margin-top:12px;
 }
 .oc-bonuses .casino-cta .btn-block{ width:100%; }
}

/* === Best-by-category hub grid === */
.oc-cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:8px 0 4px;}
.oc-cat-card{display:flex;flex-direction:column;gap:8px;background:#ffffff;border:1px solid var(--border,#2b2b52);border-left:4px solid var(--teal);border-radius:14px;padding:20px 20px 18px;text-decoration:none;color:var(--text,#143659);box-shadow:var(--shadow-1,0 2px 10px rgba(20,20,60,.06));transition:transform .18s,box-shadow .18s,border-color .18s;}
.oc-cat-card:hover{transform:translateY(-3px);border-left-color:var(--gold);box-shadow:0 10px 26px rgba(20,20,60,.14);}
.oc-cat-label{font-family:var(--font-head);font-weight:800;font-size:1.18rem;color:var(--ink,#143659);}
.oc-cat-pick{font-size:14px;color:var(--text-dim,#1f1f38);}
.oc-cat-pick strong{color:var(--teal);}
.oc-cat-blurb{font-size:14px;line-height:1.5;color:var(--text-dim,#1f1f38);flex:1;}
.oc-cat-more{font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--gold);margin-top:2px;}

/* homepage hero eyebrow: white for contrast on dark band */
.pu-hero .kicker{ background: rgba(255,255,255,0.16) !important; color:#ffffff !important; }
.pu-hero .kicker .dot{ background:#ffffff !important; box-shadow:0 0 0 3px rgba(255,255,255,0.30) !important; }

/* center review-desk avatars (global img{display:block} was left-aligning them) */
.oc-member img{display:block;margin-left:auto;margin-right:auto;}

/* ================================================================
   PALMY.GG — TROPICAL SUNSET × SLOTOZILLA LAYER (final theme pass)
   Dark blue-purple base · gold #ff9d2e · coral #ff6b57 · turquoise #2dd4bf
   ================================================================ */

::selection { background: #ffb54d; color: #ffffff; }
html { scrollbar-color: #33335c #f7f8fa; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* ---------- Header (slotozilla dark bar) ---------- */
.site-header {
  background: rgba(16, 16, 30, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.site-header .nav > a, .site-header .dropdown-trigger {
  color: #d9dbee; font-weight: 600; font-family: var(--font-head);
}
.site-header .nav > a:hover, .site-header .dropdown-trigger:hover { color: #ffcf80; }
.site-header .nav > a.active { color: #ffb54d; border-bottom-color: var(--yellow); }
.dropdown-menu, .dropdown-submenu {
  background: #1d1d36; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.dropdown-menu a { color: #d9dbee; border-radius: 8px; }
.dropdown-menu a:hover { background: rgba(255,157,46,0.12); color: #ffcf80; }
.menu-toggle { color: #f2f3fb; }

/* nav CTA + big CTAs: sunset gradient (slotozilla SPECIAL OFFERS style) */
.nav-cta, .pu-cta-bar .btn-cta, .oc-bonus-card .btn {
  background: linear-gradient(135deg, #ff9d2e 0%, #ff6b57 100%) !important;
  color: #241104 !important; font-weight: 800; border: 0;
  box-shadow: 0 6px 18px rgba(255,124,67,0.35);
  text-transform: uppercase; letter-spacing: 0.04em; border-radius: 12px;
}
.nav-cta:hover, .pu-cta-bar .btn-cta:hover, .oc-bonus-card .btn:hover {
  background: linear-gradient(135deg, #ffb04d 0%, #ff7d67 100%) !important;
  transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,124,67,0.45);
  color: #241104 !important;
}

/* Play-now buttons: turquoise, dark ink (slotozilla green analogue) */
.btn-primary, .casino-cta .btn, .casino-cta .btn-primary {
  border-radius: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.btn { border-radius: 12px; }

/* ---------- Hero ---------- */
.pu-hero { background: transparent; padding: 58px 0 30px; }
.pu-hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,157,46,0.10); border: 1px solid rgba(255,157,46,0.35);
  color: #ffcf80; border-radius: 999px; padding: 6px 14px;
  font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
}
.pu-hero .kicker .dot { width: 8px; height: 8px; border-radius: 50%; }
.pu-hero .kicker .dot { background: linear-gradient(135deg,#ff9d2e,#ff6b57); box-shadow: 0 0 10px rgba(255,157,46,0.8); }
.pu-hero h1 { font-weight: 800; letter-spacing: -0.01em; line-height: 1.14; }
.pu-hero h1 .yellow, .page-hero h1 .yellow, h1 .grad {
  background: linear-gradient(100deg, #ffc14d 10%, #ff9d2e 45%, #ff6b57 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pu-hero .lede { color: #b9bcd8; }
.pu-hero .trust-row .item { color: #9598ba; }
.pu-hero .trust-row .tick { color: #2dd4bf; }
.hero-art img {
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,157,46,0.10), 0 0 80px rgba(255,107,87,0.15);
  transform: rotate(-1.2deg);
}

/* Hero stat cards (slotozilla 4500+/5000+ style) */
.pu-stat-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 34px 0 8px;
}
.pu-stat-card {
  background: linear-gradient(165deg, #ffffff 0%, #1c1c36 100%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 18px;
  padding: 22px 24px; position: relative; overflow: hidden;
}
.pu-stat-card::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255,157,46,0.22), transparent);
}
.pu-stat-card:nth-child(2)::after { background: radial-gradient(closest-side, rgba(255,107,87,0.20), transparent); }
.pu-stat-card:nth-child(3)::after { background: radial-gradient(closest-side, rgba(45,212,191,0.18), transparent); }
.pu-stat-card .num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1; color: #fff; display: block;
}
.pu-stat-card .num em { font-style: normal; background: linear-gradient(100deg,#ffc14d,#ff6b57); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pu-stat-card .lbl { color: #9598ba; font-weight: 600; font-size: 14px; margin-top: 6px; display: block; }

/* ---------- Section titles: plain bold white + sunset underline ---------- */
.pu-section-title { background: transparent !important; border: 0; border-radius: 0; margin: 46px 0 18px; overflow: visible; }
.pu-section-title::after { display: none; }
.pu-section-title h2 {
  padding: 0 0 10px; font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.01em; position: relative;
}
.pu-section-title h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #ff9d2e, #ff6b57);
}
.pu-section-title .see-all { padding: 0 0 10px; font-weight: 700; }
.pu-section-title .see-all:hover { color: #5ee8d5; }
.section-title, .list-heading {
  background: transparent; color: #fff; padding: 0 0 10px; border-radius: 0;
  font-weight: 800; position: relative;
}
.section-title::after, .list-heading::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #ff9d2e, #ff6b57);
}

/* ---------- Country rows ---------- */
.country-rows a {
  background: var(--surface); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px;
}
.country-rows a:hover { border-color: rgba(45,212,191,0.45); background: var(--surface-hover); box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
.country-rows .c-name { color: #fff; font-weight: 700; }
.country-rows .c-sub { color: #8b8fb0; }
.country-rows .c-arrow { color: #2dd4bf; }

/* ---------- Casino cards (slotozilla listing look) ---------- */
.casino-list .casino-card {
  background: linear-gradient(170deg, #222241 0%, #1d1d37 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.casino-list .casino-card:hover {
  border-color: rgba(255,157,46,0.40);
  box-shadow: 0 16px 42px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,157,46,0.18);
  transform: translateY(-3px);
}
.casino-card.is-top { border-color: rgba(255,181,77,0.55); box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 34px rgba(255,157,46,0.14); }
.casino-card .rank-badge {
  background: linear-gradient(135deg, #ff9d2e, #ff6b57); color: #241104;
  font-weight: 800; box-shadow: 0 4px 14px rgba(255,124,67,0.45);
}
.casino-card .casino-info h3 { color: #ffb54d; font-weight: 700; }
.casino-card .rating { color: #ffc766; font-weight: 700; }
.casino-card .casino-thumb {
  background: #15152a; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
}
.casino-card .casino-features li { color: #b9bcd8; }
.casino-card .casino-features li::before { color: #2dd4bf; }
.casino-card .bonus-label { color: #8b8fb0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; }
.casino-card .bonus-amount { color: #fff; font-weight: 700; }
.casino-card .review-link { color: #8ce8db; }
.casino-card .review-link:hover { color: #5ee8d5; }
.oc-score-desc { color: #ffc766; }
.oc-claimed { color: #ff9d7e; }

/* ---------- Tables ---------- */
.table-wrap { background: var(--surface-2); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; }
.table-wrap table thead th, table thead th {
  background: #143659; color: #ffcf80; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
table tbody tr:hover { background: rgba(45,212,191,0.05); }
table td { border-color: rgba(255,255,255,0.07); color: #c9cce4; }
table td strong { color: #fff; }
table a { color: #8ce8db; }

/* ---------- Bonus / criteria / info / stats blocks ---------- */
.oc-bonus-card { background: linear-gradient(170deg,#ffffff,#1d1d37); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; }
.oc-bonus-card:hover { border-color: rgba(255,157,46,0.45); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.oc-bc-name { color: #ffb54d; font-weight: 700; }
.oc-bc-bonus { color: #fff; }
.oc-bc-terms { color: #8b8fb0; }
.oc-crit { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; }
.oc-crit .n {
  background: linear-gradient(135deg,#ffc14d,#ff6b57);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.oc-crit h4 { color: #fff; }
.oc-crit p { color: #9ea1c0; }
.oc-infobox { background: var(--surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; }
.oc-infobox h4 { color: #fff; }
.oc-infobox p { color: #9ea1c0; }
.oc-stats { background: linear-gradient(160deg,#26264a,#1c1c36); border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; }
.oc-stat .num {
  background: linear-gradient(100deg,#ffc14d,#ff6b57);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; font-family: var(--font-display);
}
.oc-stat .lbl { color: #9598ba; }

/* ---------- News & guides cards ---------- */
.blog-card, .lead-story, .pu-news-card, .related-card, .oc-cat-card {
  background: linear-gradient(170deg,#222241,#1c1c36);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 18px;
}
.blog-card:hover, .lead-story:hover, .pu-news-card:hover, .related-card:hover, .oc-cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,181,77,0.45);
  box-shadow: 0 16px 42px rgba(0,0,0,0.55), 0 0 0 1px rgba(45,212,191,0.10);
}
.blog-card h3 a, .blog-card h3, .lead-story h3 { color: #fff; }
.blog-card p, .lead-story p { color: #9ea1c0; }
.blog-card .tag, .article-hero .tag, .news-lead .tag, .pu-news-card .tag, .lead-story .tag, .r-tag {
  background: linear-gradient(135deg,#ff9d2e,#ff6b57); color: #241104; border-radius: 6px; font-weight: 800;
}
.blog-card .tag.guide, .article-hero .tag.guide, .r-tag.guide {
  background: linear-gradient(135deg,#2dd4bf,#1aa38f); color: #06201b;
}
.sidebar-box { background: var(--surface); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; }
.sidebar-box .sb-head { color: #ffb54d; font-weight: 800; }
.latest-list a { color: #dfe1f5; }
.latest-list a:hover { color: #ffcf80; }
.latest-list .meta { color: #8b8fb0; }

/* ---------- FAQ ---------- */
.oc-faq details, .faq-accordion .faq-item {
  background: var(--surface); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px;
}
.oc-faq details[open], .faq-accordion .faq-item.open { border-color: rgba(45,212,191,0.40); }
.oc-faq summary { color: #f2f3fb; font-weight: 700; }
.oc-faq summary::marker { color: #ffb54d; }
.oc-faq p { color: #b9bcd8; }

/* ---------- Team / authors ---------- */
.oc-member { background: var(--surface); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; }
.oc-member img { border: 3px solid transparent; background: linear-gradient(#ffffff,#ffffff) padding-box, linear-gradient(135deg,#ff9d2e,#ff6b57,#2dd4bf) border-box; }
.oc-m-name { color: #fff; font-weight: 700; }
.oc-m-role { color: #8ce8db; }
.oc-member p { color: #9ea1c0; }
.author-box { background: var(--surface); border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; }
.author-box .author-avatar img, .author-avatar img { border: 3px solid transparent; background: linear-gradient(#ffffff,#ffffff) padding-box, linear-gradient(135deg,#ff9d2e,#ff6b57,#2dd4bf) border-box; }
.author-name { color: #fff; }
.author-role { color: #8ce8db; }
.author-bio { color: #b9bcd8; }
.author-email-btn { border-color: rgba(45,212,191,0.5); color: #8ce8db; }

/* ---------- Market subnav + breadcrumbs + page hero ---------- */
.market-subnav a { background: #1d1d36; border: 1px solid rgba(255,255,255,0.10); color: #c9cce4; border-radius: 999px; }
.market-subnav a:hover { border-color: rgba(255,157,46,0.5); color: #ffcf80; }
.market-subnav a.active { background: linear-gradient(135deg,#ff9d2e,#ff6b57); border-color: transparent; color: #241104; }
.breadcrumbs { color: #8b8fb0; }
.breadcrumbs a { color: #b9bcd8; }
.breadcrumbs a:hover { color: #ffcf80; }
.page-hero h1, .article-hero h1, .th-hero h1 { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
.page-hero .lead, .article-hero .lead { color: #b9bcd8; }

/* ---------- TOC ---------- */
.toc { background: var(--surface-2); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; }
.toc .toc-title { color: #ffb54d; }
.toc a { color: #c9cce4; }
.toc a:hover { color: #ffcf80; }

/* ---------- Promo strip + win ticker ---------- */
.pu-promo-strip { background: #15152a; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
.pu-promo-strip .item { color: #9ea1c0; }
.pu-promo-strip .yellow-dot { background: linear-gradient(135deg,#ff9d2e,#ff6b57); }
.pu-promo-strip .promo-howto { color: #8ce8db; }
.win-ticker { background: #191930; border: 1px solid rgba(255,255,255,0.08); }
.win-ticker-label { background: linear-gradient(135deg,#ffc14d,#ff9d2e 55%,#ff6b57); color: #241104; font-weight: 800; letter-spacing: .03em; box-shadow: 0 0 0 1px rgba(255,157,46,0.35), 0 2px 10px rgba(255,107,87,0.25); }
.win-ticker .win-item, .win-track { color: #b9bcd8; }
.win-ticker .win-item strong { color: #5ee8d5; }

/* ---------- CTA bar ---------- */
.pu-cta-bar {
  background:
    radial-gradient(600px 200px at 8% 0%, rgba(255,157,46,0.16), transparent 60%),
    radial-gradient(520px 200px at 100% 100%, rgba(45,212,191,0.14), transparent 60%),
    linear-gradient(160deg,#26264a,#1c1c36);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 18px;
}
.pu-cta-bar h3 { color: #fff; }
.pu-cta-bar p { color: #9ea1c0; }

/* ---------- Footer ---------- */
.site-footer { background: #131322; border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer p, .site-footer li, .site-footer span { color: #9598ba; }
.site-footer a { color: #b9bcd8; }
.ft-badge { border: 1px solid rgba(255,255,255,0.14); color: #b9bcd8; border-radius: 999px; background: rgba(255,255,255,0.03); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); color: #8b8fb0; }

/* ---------- Content links ---------- */
.content a:not(.btn):not(.btn-primary):not(.nav-cta), .article-body a:not(.btn) {
  color: #8ce8db; text-decoration-color: rgba(45,212,191,0.45);
}
.content a:not(.btn):not(.btn-primary):not(.nav-cta):hover, .article-body a:not(.btn):hover { color: #5ee8d5; }

/* ---------- Mobile pass (720/600/480/400 + dropdown alignment) ---------- */
@media (max-width: 900px) {
  .site-header .nav { background: #16162b; border-top: 1px solid rgba(255,255,255,0.08); }
  .nav .dropdown-menu a, .nav .dropdown-submenu a {
    white-space: normal; padding: 11px 12px;
    justify-content: flex-start; gap: 10px; text-align: left;
  }
  .nav .dropdown-menu a .flag-ico-img { flex-shrink: 0; }
}
@media (max-width: 720px) {
  table { min-width: 0; font-size: 13.5px; }
  table th, table td { padding: 11px 12px; line-height: 1.45; }
  table th { font-size: 11px; letter-spacing: 0.03em; }
  .table-wrap { border-radius: 12px; }
  .pu-stat-cards { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .content { padding-bottom: 20px; }
  .article-body p { font-size: 0.98rem; line-height: 1.65; }
  .article-body h2 { margin-top: 26px; font-size: 1.35rem; }
  .pu-hero { padding: 34px 0 18px; }
  .pu-section-title h2, .section-title { font-size: 1.3rem; }
  .pu-stat-card { padding: 16px 18px; }
  .pu-stat-card .num { font-size: 1.7rem; }
  .toc { padding: 14px 14px 12px; }
  .hero-art img { transform: none; }
}
@media (max-width: 480px) {
  table { font-size: 12.5px; }
  table th, table td { padding: 9px 10px; }
  table th { font-size: 10.5px; }
}
@media (max-width: 400px) {
  .pu-promo-strip .item:nth-child(n+3) { display: none; }
}

/* ---------- Keira polish 2: mixed-case headings (slotozilla), logo tiles ---------- */
.pu-section-title h2, .section-title, .list-heading,
.article-body h2, .content h2, .lesson-layout h2,
.pu-section-title .see-all, .oc-crit h4, .oc-infobox h4 {
  text-transform: none !important; letter-spacing: -0.01em !important;
}
.oc-bc-top { background: #15152a !important; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; }
.win-ticker-label { text-transform: none; }

/* ================================================================
   PALMY.GG — SLOTOZILLA-STRUCTURE PASS (header search, centered hero,
   big stat panels, flag diamonds)
   ================================================================ */

/* ---- Header: logo + search + Special Offers on row 1, nav on row 2 ---- */
.site-header .header-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding-top:12px; padding-bottom:10px; }
.site-header .logo{ order:1; margin-right:2px; }
.header-search{ order:2; flex:1 1 300px; max-width:540px; position:relative; display:flex; align-items:center; gap:10px;
  background:#12122a; border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:10px 14px; }
.header-search:focus-within{ border-color:rgba(45,212,191,0.55); box-shadow:0 0 0 3px rgba(45,212,191,0.14); }
.header-search .hs-ico{ opacity:.65; font-size:14px; line-height:1; }
.header-search .hs-input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:#f2f3fb; font:inherit; font-size:14px; }
.header-search .hs-input::placeholder{ color:#8b8fb0; }
.hs-results{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#1b1b36; border:1px solid rgba(255,255,255,0.12);
  border-radius:14px; box-shadow:0 22px 54px rgba(0,0,0,.6); padding:6px; z-index:120; max-height:360px; overflow:auto; }
.hs-results a{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:#d9dbee; text-decoration:none; font-size:14px; }
.hs-results a img{ width:20px; height:20px; border-radius:4px; flex:0 0 auto; object-fit:cover; }
.hs-results a:hover, .hs-results a.is-active{ background:rgba(255,157,46,0.12); color:#ffcf80; }
.hs-results .hr-tag{ margin-left:auto; font-size:10.5px; color:#8b8fb0; text-transform:uppercase; letter-spacing:.06em; }
.hs-results .hs-empty{ padding:12px 14px; color:#8b8fb0; font-size:13px; }
.special-offers{ order:3; display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#ff9d2e,#ff5a4d);
  color:#241104; font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:12.5px; padding:11px 18px;
  border-radius:12px; box-shadow:0 6px 18px rgba(255,110,70,.4); white-space:nowrap; text-decoration:none; }
.special-offers:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(255,110,70,.5); color:#241104; }
.site-header .menu-toggle{ order:4; }
@media (min-width:901px){
  .site-header .nav{ order:5; flex-basis:100%; display:flex; align-items:center; gap:4px; flex-wrap:wrap;
    border-top:1px solid rgba(255,255,255,0.07); margin-top:2px; padding-top:8px; }
  .site-header .menu-toggle{ display:none; }
}
@media (max-width:900px){
  .header-search{ order:4; flex-basis:100%; max-width:none; }
  .special-offers{ order:3; margin-left:auto; }
  .site-header .menu-toggle{ order:2; }
}

/* ---- Centered hero over sunset background ---- */
.pu-hero-centered{ position:relative; text-align:center; padding:66px 0 42px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,0.06); }
.pu-hero-centered .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 30%; opacity:.55; }
.pu-hero-centered::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,31,.38) 0%, rgba(18,18,31,.72) 58%, #ffffff 100%); }
.pu-hero-centered > .container{ position:relative; z-index:2; }
.pu-hero-centered .hero-copy{ max-width:920px; margin:0 auto; }
.pu-hero-centered .kicker{ margin:0 auto; }
.pu-hero-centered h1{ font-size:clamp(2rem,4.4vw,3.35rem); line-height:1.12; margin:16px auto 14px; }
.pu-hero-centered .lede{ margin:0 auto; max-width:770px; }
.pu-hero-centered .lede-toggle{ display:none; }
.pu-hero-centered .cta-row{ justify-content:center; }
.pu-hero-centered .trust-row{ justify-content:center; flex-wrap:wrap; }

/* ---- Big stat panels (slotozilla) ---- */
.pu-stat-panels{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.pu-stat-panel{ position:relative; overflow:hidden; min-height:190px; padding:24px; border-radius:22px;
  border:1px solid rgba(255,255,255,0.10); background:linear-gradient(165deg,#242449,#1a1a34);
  text-align:left; display:flex; flex-direction:column; justify-content:space-between; }
.pu-stat-panel::before{ content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,157,46,0.20), transparent); }
.pu-stat-panel.sp-markets::before{ background:radial-gradient(closest-side, rgba(45,212,191,0.20), transparent); }
.pu-stat-panel.sp-paid::before{ background:radial-gradient(closest-side, rgba(255,107,87,0.20), transparent); }
.sp-figure .sp-num{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,4vw,3.1rem); line-height:1;
  background:linear-gradient(100deg,#ffc14d,#ff6b57); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-figure .sp-num em{ font-style:normal; }
.pu-stat-panel.sp-markets .sp-num{ background:linear-gradient(100deg,#7de2d3,#2dd4bf); -webkit-background-clip:text; background-clip:text; }
.sp-figure .sp-lbl{ display:block; margin-top:8px; font-weight:700; color:#fff; font-size:1.05rem; }
.sp-figure .sp-sub{ display:block; color:#9598ba; font-size:13px; margin-top:3px; }
.sp-collage{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.sp-chip{ width:58px; height:40px; border-radius:10px; background:#101026; border:1px solid rgba(255,255,255,0.10);
  display:flex; align-items:center; justify-content:center; transform:rotate(var(--r,0deg)); box-shadow:0 6px 14px rgba(0,0,0,.4); }
.sp-chip img{ max-width:46px; max-height:28px; object-fit:contain; }
.sp-flags{ display:flex; flex-wrap:wrap; gap:13px; margin-top:20px; padding:4px 2px; }
.flag-diamond{ width:32px; height:32px; border-radius:8px; overflow:hidden; transform:rotate(45deg);
  border:2px solid rgba(255,255,255,0.16); box-shadow:0 4px 12px rgba(0,0,0,.45); flex:0 0 auto; }
.flag-diamond img{ width:46px; height:46px; margin:-7px; transform:rotate(-45deg); object-fit:cover; }
.flag-diamond:hover{ border-color:#ffb54d; box-shadow:0 6px 16px rgba(255,157,46,.4); }
.sp-motif{ position:relative; margin-top:14px; height:74px; }
.sp-motif .sp-sun{ position:absolute; left:6px; bottom:0; width:72px; height:72px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #fff3c4, #ffb54d 55%, #ff7a3c); box-shadow:0 0 40px rgba(255,157,46,.5); }
.sp-motif .sp-palm{ position:absolute; right:12px; bottom:4px; font-size:50px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }

@media (max-width:920px){
  .pu-stat-panels{ grid-template-columns:1fr; gap:14px; }
  .pu-stat-panel{ min-height:0; }
}

/* hero secondary button + trust row contrast on dark centered hero */
.pu-hero-centered .btn-secondary{ background:rgba(255,255,255,0.06); color:#ffffff !important; border:2px solid rgba(255,255,255,0.45); }
.pu-hero-centered .btn-secondary:hover{ background:rgba(255,255,255,0.14); color:#ffffff !important; border-color:#ffffff; }
.pu-hero-centered .trust-row{ margin-top:22px; gap:14px 26px; }
.pu-hero-centered .trust-row .item{ color:#c3c6de; font-size:13.5px; }
.pu-hero-centered .trust-row .item strong{ color:#ffffff; }
.pu-hero-centered .trust-row .tick{ color:#2dd4bf; }

/* ================================================================
   PALMY GAMES v3 — fix dark-on-dark text, premium polish, new games
   (appended last so it wins over the earlier PREMIUM DEMO GAMES block)
   ================================================================ */

/* --- Fix casualties of the theme flip: game text must be light on the dark cabinet --- */
.game-title{color:#fff!important;}
.game-title .badge{color:#241104!important;}
.hud .cell .v{color:#ffc766!important;}
.hud .cell.win .v{color:#7CF7A9!important;}
.game-msg{color:#e8eaff!important;}
.game-msg.win{color:#7CF7A9!important;} .game-msg.lose{color:#ff9d7e!important;}
.gbtn-primary{background:linear-gradient(180deg,#2dd4bf,#22b8a5)!important;color:#052a24!important;box-shadow:0 8px 22px rgba(45,212,191,.45),inset 0 1px 0 rgba(255,255,255,.35)!important;}
.gbtn-go{color:#241104!important;}
.gbtn-round{color:#fff!important;}
.gbtn-ghost{color:#e8eaff!important;}
.game-msg{min-height:26px;}

/* --- Cabinet polish --- */
.game-cab{border-color:rgba(255,157,46,.32)!important;background:radial-gradient(120% 140% at 50% -10%,#2b2358 0%,#1d1b3c 55%,#100e26 100%)!important;}
.game-cab::before{background:radial-gradient(60% 42% at 50% 0%,rgba(255,124,67,.20),transparent 70%)!important;}
.game-title{text-shadow:0 2px 10px rgba(0,0,0,.4);}
.hud .cell{background:rgba(255,255,255,.05);}
.hud .cell .l{color:#7de2d3;}

/* two-column game layout: game left, info rail right */
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start;}
.game-rail{display:flex;flex-direction:column;gap:14px;}
.rail-card{background:linear-gradient(170deg,#222141,#1b1a35);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px 18px;}
.rail-card h3{margin:0 0 10px;font-size:1rem;color:#ffb54d;font-weight:800;}
.rail-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.rail-card li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:#c4c7e4;border-bottom:1px dashed rgba(255,255,255,.08);padding-bottom:8px;}
.rail-card li:last-child{border-bottom:0;padding-bottom:0;}
.rail-card li b{color:#fff;font-weight:700;}
.rail-cta{display:block;text-align:center;background:linear-gradient(135deg,#ff9d2e,#ff6b57);color:#241104;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:13px;border-radius:12px;text-decoration:none;box-shadow:0 8px 20px rgba(255,124,67,.35);}
.rail-cta:hover{filter:brightness(1.06);transform:translateY(-1px);}
@media(max-width:860px){.game-layout{grid-template-columns:1fr;}.game-rail{order:2;}}

/* --- PLINKO --- */
.plinko-stage{position:relative;z-index:1;background:linear-gradient(180deg,#0b0b22,#141439);border:3px solid;border-image:linear-gradient(135deg,#ffc766,#ff6b57) 1;border-radius:16px;padding:12px;box-shadow:inset 0 0 44px rgba(0,0,0,.6);}
.plinko-stage canvas{display:block;width:100%;height:auto;border-radius:10px;}
.plinko-slots{display:grid;gap:5px;margin-top:8px;}
.plinko-slot{text-align:center;font-family:var(--font-display);font-weight:800;font-size:12.5px;padding:7px 0;border-radius:8px;color:#241104;}
.plinko-slot.s-hi{background:linear-gradient(135deg,#ff6b57,#ff9d2e);}
.plinko-slot.s-mid{background:linear-gradient(135deg,#ffc766,#ffe0a3);}
.plinko-slot.s-lo{background:rgba(255,255,255,.10);color:#c4c7e4;}
.plinko-slot.flash{animation:plflash .6s ease;}
@keyframes plflash{0%{transform:translateY(0)}30%{transform:translateY(6px);box-shadow:0 0 0 3px rgba(45,212,191,.6)}100%{transform:translateY(0)}}
.risk-row{display:flex;gap:8px;justify-content:center;margin-top:6px;}
.risk-row .gbtn-ghost.active{background:linear-gradient(135deg,#2dd4bf,#22b8a5);color:#052a24!important;border-color:transparent;}

/* --- ROULETTE polish (game defines base inline; these lift contrast) --- */
.wheelwrap,.wheel{filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));}
.bet-grid .betcell{color:#fff;}

/* --- BLACKJACK polish --- */
.bj-felt{box-shadow:inset 0 0 60px rgba(0,0,0,.55);}
.card-pl{color:#ffffff;}

/* ================= VIRTUAL SPORTS ================= */
.vs-hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.vs-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,157,46,.10);border:1px solid rgba(255,157,46,.32);color:#ffcf80;border-radius:999px;padding:7px 13px;font-weight:700;font-size:12.5px;}

/* Horse racing */
.race-cab{position:relative;z-index:1;max-width:720px;margin:0 auto;background:radial-gradient(120% 130% at 50% -10%,#123a2e 0%,#0e2a24 55%,#08201b 100%);border:1px solid rgba(45,212,191,.3);border-radius:20px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;}
.race-track{position:relative;background:linear-gradient(180deg,#0d3a2c,#0a2c22);border-radius:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);overflow:hidden;}
.lane{position:relative;height:46px;margin:7px 0;border-bottom:2px dashed rgba(255,255,255,.14);}
.lane:last-child{border-bottom:0;}
.lane .finish{position:absolute;right:8px;top:0;bottom:0;width:8px;background:repeating-linear-gradient(45deg,#fff 0 5px,#111 5px 10px);opacity:.5;border-radius:2px;}
.runner{position:absolute;left:0;top:2px;font-size:30px;transition:left .12s linear;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));will-change:left;}
.lane .lane-no{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:11px;color:rgba(255,255,255,.35);font-weight:800;}
.odds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.odds-btn{cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 8px;text-align:center;transition:.12s;color:#e8eaff;}
.odds-btn .h{font-size:20px;}
.odds-btn .n{display:block;font-size:12px;color:#c4c7e4;margin-top:2px;font-weight:700;}
.odds-btn .o{display:block;font-family:var(--font-display);font-weight:800;color:#ffc766;font-size:15px;}
.odds-btn:hover{border-color:rgba(45,212,191,.5);}
.odds-btn.picked{background:linear-gradient(135deg,rgba(45,212,191,.25),rgba(34,184,165,.15));border-color:#2dd4bf;box-shadow:0 0 0 1px #2dd4bf inset;}

/* Penalty shootout */
.pk-cab{position:relative;z-index:1;max-width:720px;margin:0 auto;background:radial-gradient(120% 130% at 50% -10%,#14204a 0%,#101a3a 55%,#0b1330 100%);border:1px solid rgba(120,130,255,.3);border-radius:20px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;}
.pk-pitch{position:relative;height:230px;background:linear-gradient(180deg,#1e7a42,#12572f 60%,#0d4023);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);}
.pk-pitch::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 44px,transparent 44px 88px);}
.pk-pitch::after{content:"";position:absolute;left:50%;bottom:26px;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.85);transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.pk-goal{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:300px;max-width:80%;height:100px;border:6px solid #fff;border-bottom:0;border-radius:7px 7px 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 13px,transparent 13px 26px),repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 13px,transparent 13px 26px);box-shadow:0 0 22px rgba(255,255,255,.15),inset 0 0 18px rgba(0,0,0,.25);}
.pk-keeper{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-size:42px;transition:left .28s cubic-bezier(.4,1.5,.5,1),transform .28s;z-index:3;filter:drop-shadow(0 4px 5px rgba(0,0,0,.4));}
.pk-ball{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:30px;transition:all .5s cubic-bezier(.3,.7,.4,1);z-index:2;filter:drop-shadow(0 5px 6px rgba(0,0,0,.45));will-change:left,bottom,transform;}
.pk-ball.pk-scored{animation:pkGoalPulse .5s ease;}
@keyframes pkGoalPulse{0%{filter:drop-shadow(0 0 0 rgba(94,232,213,0))}50%{filter:drop-shadow(0 0 16px rgba(94,232,213,.9))}100%{filter:drop-shadow(0 5px 6px rgba(0,0,0,.45))}}
.pk-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.pk-zone{cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px;text-align:center;color:#e8eaff;font-weight:700;transition:.12s;}
.pk-zone:hover{border-color:rgba(255,157,46,.5);color:#ffcf80;}
.pk-zone.pick{background:linear-gradient(135deg,#ff9d2e,#ff6b57);color:#241104;border-color:transparent;}

/* demo hub cards richer */
.pu-resource.is-game{position:relative;overflow:hidden;}
.pu-resource.is-game .ico{font-size:34px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.pu-resource.is-game .tag-mini{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#2dd4bf,#22b8a5);color:#052a24;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;text-transform:uppercase;}

@media(max-width:560px){
  .odds-grid{grid-template-columns:repeat(3,1fr);}
  .gbtn-primary{padding:14px 30px;font-size:16px;}
}

/* ================================================================
   PALMY v4 — search relocate+shrink, stat-card fixes, footer polish,
   category tracking buttons  (appended last, wins)
   ================================================================ */

/* --- Header: compact search sitting in the nav row, right side --- */
.site-header .header-inner{ gap:16px; flex-wrap:nowrap; }
.site-header .nav{ order:2; margin-left:auto; gap:20px; }
.header-search{ order:3 !important; flex:0 0 auto !important; width:210px !important; max-width:210px !important;
  padding:8px 12px !important; border-radius:10px !important; }
.header-search .hs-input{ font-size:13px !important; }
.header-search .hs-ico{ font-size:13px !important; }
@media (max-width:1120px){ .header-search{ width:170px !important; max-width:170px !important; } .site-header .nav{ gap:15px; } }
@media (max-width:960px){ .header-search{ display:none !important; } }

/* --- Stat panel: casino logos on clean white chips (all brand logos are light-bg) --- */
.sp-collage{ gap:10px; margin-top:18px; }
.sp-chip{ width:76px !important; height:46px !important; border-radius:10px !important;
  background:#ffffff !important; border:1px solid rgba(255,255,255,0.5) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.28) !important; padding:7px 9px; display:flex; align-items:center; justify-content:center;
  transition:transform .15s; }
.sp-chip:hover{ transform:translateY(-2px) rotate(0deg) !important; }
.sp-chip img{ max-width:100% !important; max-height:100% !important; object-fit:contain !important; }

/* --- Stat panel: flags as clean rounded tiles (no distorting diamond) --- */
.sp-flags{ gap:10px; margin-top:20px; }
.flag-diamond{ width:38px !important; height:28px !important; border-radius:6px !important; transform:none !important;
  overflow:hidden; border:1px solid rgba(255,255,255,0.18) !important; box-shadow:0 3px 9px rgba(0,0,0,.35) !important;
  display:block; }
.flag-diamond img{ width:100% !important; height:100% !important; margin:0 !important; transform:none !important; object-fit:cover !important; }
.flag-diamond:hover{ transform:translateY(-2px) !important; border-color:#ffb54d !important; }

/* --- Stat panel: palm+sun motif via inline SVG (replaces emoji) --- */
.sp-motif{ height:84px !important; margin-top:16px !important; }
.sp-motif svg{ position:absolute; right:8px; bottom:0; height:84px; width:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }

/* --- Category table: tracking-link visit button --- */
.oc-cat-table td{ vertical-align:middle; }
.btn-visit{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:linear-gradient(135deg,#ff9d2e,#ff6b57); color:#241104 !important; font-weight:800;
  font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none;
  padding:9px 16px; border-radius:10px; box-shadow:0 6px 16px rgba(255,124,67,.32); transition:.14s; }
.btn-visit:hover{ filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 9px 22px rgba(255,124,67,.42); color:#241104 !important; }
.oc-cat-table th:last-child{ text-align:right; } .oc-cat-table td:last-child{ text-align:right; }

/* --- Footer polish: cleaner trust row + copyright --- */
.footer-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 16px; padding:22px 0 20px;
  margin-top:26px; border-top:1px solid rgba(255,255,255,0.08); }
.footer-trust .ft-badge{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12); color:#c4c7e4; border-radius:999px; padding:8px 15px; font-size:12.5px; font-weight:600; }
.footer-trust .ft-badge .ft-ico{ color:#2dd4bf; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 20px;
  padding:18px 4px 6px; margin-top:6px; border-top:1px solid rgba(255,255,255,0.07); }
.footer-bottom span{ color:#8b8fb0; font-size:12.5px; }
.footer-bottom span:first-child{ font-weight:700; color:#b9bcd8; }
@media (max-width:600px){ .footer-bottom{ justify-content:center; text-align:center; } }

/* ================================================================
   PALMY v5 — kicker pop, uniform Play-now buttons, mobile read-more
   ================================================================ */

/* --- Hero kicker: filled sunset pill, far more visible --- */
.pu-hero-centered .kicker{
  background:linear-gradient(135deg,#ff9d2e,#ff6b57) !important;
  border:0 !important; color:#241104 !important; font-weight:800 !important;
  letter-spacing:.08em !important; padding:8px 18px !important; font-size:12.5px !important;
  box-shadow:0 8px 22px rgba(255,124,67,.45), 0 0 0 3px rgba(255,157,46,.18) !important;
  text-transform:uppercase;
}
.pu-hero-centered .kicker .dot{ background:#241104 !important; box-shadow:none !important; opacity:.7; }

/* --- Category table: uniform Play-now buttons --- */
.btn-visit{ min-width:150px; justify-content:center; }
@media(max-width:600px){ .btn-visit{ min-width:0; width:100%; } }

/* --- Mobile read-more: hero lede + markets intro --- */
.clamp-toggle{ display:none; background:none; border:0; color:#8ce8db; font-family:var(--font-head);
  font-weight:700; font-size:13.5px; cursor:pointer; padding:4px 0 2px; margin:-2px 0 10px; }
.clamp-toggle:hover{ color:#5ee8d5; }
@media(max-width:680px){
  /* hero lede */
  .pu-hero-centered .lede{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; }
  .pu-hero-centered .lede.expanded{ display:block; -webkit-line-clamp:unset; overflow:visible; }
  .pu-hero-centered .lede-toggle{ display:inline-block !important; background:none; border:0;
    color:#ffd9a0; font-family:var(--font-head); font-weight:700; font-size:13.5px; cursor:pointer;
    padding:2px 0 6px; }
  /* markets intro */
  .mk-intro.js-clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .mk-intro.js-clamp.open{ display:block; -webkit-line-clamp:unset; overflow:visible; }
  .clamp-toggle{ display:inline-block; }
}

/* ---------- Footer / info pages (about, contact, legal, responsible gambling): centered, contained hero ---------- */
.article > .article-hero { text-align: center; }
.article > .article-hero .breadcrumbs { justify-content: center !important; }
.article > .article-hero .lead { max-width: 680px; margin-left: auto; margin-right: auto; }
.article > .article-hero .article-meta { justify-content: center; }

/* ---------- Section-title underline: never overlap the heading (site-wide) ---------- */
.section-title { display: block; padding-bottom: 16px; }
.section-title h2 { margin: 0; line-height: 1.2; }
.list-heading { padding-bottom: 16px; line-height: 1.2; }
.section-title::after, .list-heading::after { bottom: 0; top: auto; }

/* ================= REDESIGN: market cards (country-rows) ================= */
.country-rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:12px 0 26px; }
@media(max-width:900px){ .country-rows{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .country-rows{ grid-template-columns:1fr; } }
.country-rows a{
  position:relative; display:flex; align-items:center; gap:14px;
  background:linear-gradient(160deg,#20203c,#1a1a32);
  border:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.country-rows a::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#ff9d2e,#ff6b57); opacity:0; transition:opacity .18s ease; }
.country-rows a:hover{ transform:translateY(-3px); border-color:rgba(255,157,46,.45);
  box-shadow:0 16px 34px rgba(0,0,0,.45); background:linear-gradient(160deg,#26264c,#1c1c38); padding-left:16px; }
.country-rows a:hover::before{ opacity:1; }
.country-rows img{ width:48px; height:34px; border-radius:8px; object-fit:cover; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 3px 10px rgba(0,0,0,.35); }
.country-rows .c-name{ font-family:var(--font-head); font-weight:700; text-transform:none; letter-spacing:0; font-size:1.02rem; color:#fff; }
.country-rows .c-sub{ display:block; font-size:12px; color:#9aa0c6; margin-top:3px; letter-spacing:0; text-transform:none; }
.country-rows .c-arrow{ margin-left:auto; width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto;
  border-radius:50%; background:rgba(45,212,191,.12); border:1px solid rgba(45,212,191,.3);
  color:#5ee8d5; font-size:15px; transition:background .18s ease, color .18s ease, transform .18s ease; }
.country-rows a:hover .c-arrow{ background:linear-gradient(135deg,#ff9d2e,#ff6b57); color:#241104; border-color:transparent; transform:translateX(3px); }

/* ================= REDESIGN: how-we-score cards (numbered process) ================= */
.oc-infobox-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:8px 0 22px; counter-reset:crit; }
@media(max-width:900px){ .oc-infobox-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .oc-infobox-grid{ grid-template-columns:1fr; } }
.oc-infobox{ position:relative; counter-increment:crit; text-align:left;
  background:linear-gradient(180deg,#20203c,#191930); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:26px 18px 20px; overflow:hidden; }
.oc-infobox::before{ content:counter(crit,decimal-leading-zero); position:absolute; top:8px; right:14px;
  font-family:var(--font-display); font-weight:700; font-size:2.2rem; line-height:1; color:rgba(255,157,46,.16); }
.oc-infobox::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#ff9d2e,#ff6b57 55%,#2dd4bf); }
.oc-infobox .ico{ display:grid; place-items:center; width:46px; height:46px; margin:0 0 12px;
  border-radius:12px; background:rgba(255,157,46,.12); border:1px solid rgba(255,157,46,.28); font-size:22px; }
.oc-infobox h4{ text-align:left; color:#fff; font-weight:700; font-size:1rem; margin:0 0 6px; }
.oc-infobox p{ text-align:left; color:#9ea1c0; font-size:13px; line-height:1.55; margin:0; }

/* ================= REDESIGN: trusted stats band ================= */
.oc-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; overflow:hidden;
  background:linear-gradient(135deg,#1b1b34,#16162c); border:1px solid rgba(255,255,255,.10); border-radius:18px; }
.oc-stat{ text-align:center; padding:26px 14px; position:relative; }
.oc-stat + .oc-stat{ border-left:1px solid rgba(255,255,255,.08); }
.oc-stat::before{ content:""; display:block; width:22px; height:3px; border-radius:3px; margin:0 auto 12px;
  background:linear-gradient(90deg,#ff9d2e,#2dd4bf); }
.oc-stat .num{ display:block; font-family:var(--font-display); font-weight:800; font-size:2.3rem; line-height:1;
  background:linear-gradient(135deg,#ffc14d,#ff6b57); -webkit-background-clip:text; background-clip:text; color:transparent; }
.oc-stat .lbl{ display:block; margin-top:8px; font-family:var(--font-head); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#9598ba; }
@media(max-width:640px){ .oc-stats{ grid-template-columns:repeat(2,1fr); }
  .oc-stat:nth-child(3){ border-left:0; }
  .oc-stat:nth-child(3), .oc-stat:nth-child(4){ border-top:1px solid rgba(255,255,255,.08); }
  .oc-stat .num{ font-size:1.9rem; } }

/* ---------- Footer column headings: legible on the dark footer (site-wide) ---------- */
.site-footer .footer-grid h3, .site-footer .footer-grid h4 { color: #ffb54d; }

/* ---------- News/Guides article hero: contained card, not edge-to-edge ---------- */
.content > .container > .article-hero {
  padding: 40px 38px 32px;
  margin: 16px 0 28px;
  border-radius: 18px;
  background: linear-gradient(160deg, #20203c, #191930);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.content > .container > .article-hero .breadcrumbs { margin-bottom: 12px; }
.content > .container > .article-hero h1 { max-width: 900px; margin: 6px 0 12px; }
.content > .container > .article-hero .lede { max-width: 760px; }
.content > .container > .article-hero .article-meta { margin-top: 14px; }
@media (max-width: 640px) {
  .content > .container > .article-hero { padding: 26px 20px 22px; margin: 10px 0 20px; }
}

/* ---------- Mobile: pull the markets section up closer to the fold ---------- */
@media (max-width:768px){
  .win-ticker + .content{ padding-top:6px !important; }
  #markets{ margin-top:14px !important; margin-bottom:12px !important; }
  #markets h2{ font-size:1.25rem; }
  .mk-intro{ margin-top:8px; }
  .mk-intro.js-clamp{ -webkit-line-clamp:2; }
  .country-rows{ margin-top:10px; gap:10px; }
}

/* ---------- Trust strip: slim single-line redesign ---------- */
.pu-promo-strip{ padding:8px 0 !important; font-size:11.5px !important; letter-spacing:.05em; }
.pu-promo-strip .container{ display:flex !important; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 !important; }
.pu-promo-strip .item{ display:inline-flex; align-items:center; padding:0 15px; position:relative; color:#aeb2d4; }
.pu-promo-strip .item .yellow-dot{ display:none !important; }
.pu-promo-strip .item + .item::before{ content:""; position:absolute; left:-1px; top:50%; width:4px; height:4px; border-radius:50%; transform:translateY(-50%); background:linear-gradient(135deg,#ff9d2e,#ff6b57); }
.pu-promo-strip .promo-howto{ margin-left:16px !important; padding:4px 13px; border:1px solid rgba(45,212,191,.45); border-radius:999px; color:#5ee8d5 !important; font-size:11px; letter-spacing:.05em; white-space:nowrap; transition:background .15s,color .15s; }
.pu-promo-strip .promo-howto:hover{ background:rgba(45,212,191,.14); color:#7ef0e0 !important; }

/* ---------- Center the reading column on news/guides + footer/info pages ---------- */
.content > .container:has(> .article-hero),
.content > .container:has(> .article){ max-width: 920px; }
.content > .container > .article-body{ margin-left:auto; margin-right:auto; }

/* ---------- Desktop: drop the hero CTAs a little lower ---------- */
@media (min-width:769px){
  .pu-hero-centered .cta-row{ margin-top:30px; }
}

/* ---------- Desktop: tighten gap between hero CTAs and the live-wins bar ---------- */
@media (min-width:769px){
  .pu-hero-centered{ padding-bottom:18px !important; }
  .pu-hero-centered .cta-row{ margin-bottom:4px; }
}

/* ---------- Live-wins ticker: make winner names visible ---------- */
.win-ticker .win-item .wi-name{ color:#f2f3fb !important; font-weight:700; }

/* =====================================================
   LIGHT-THEME POLISH LAYER (casinomeister-inspired)
   Added 2026-08-27 for keira.fun
   ===================================================== */

/* Header: dark navy bar under a slim top strip, matches casinomeister header feel */
.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(15,25,50,0.04) !important;
}
.top-strip { background: #0d2543 !important; color: #ffffff !important; }
.top-strip a { color: #ffcc4d !important; }

/* Header nav: dark text with orange accent on hover */
.nav a, .nav .dropdown-trigger {
  color: var(--text) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.nav a:hover, .nav .dropdown-trigger:hover { color: var(--pink) !important; background: var(--surface-hover) !important; }
.nav a.active { color: var(--pink) !important; border-bottom: 3px solid var(--pink) !important; }
.nav .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(15,25,50,0.14) !important;
}
.nav .dropdown-menu a { color: var(--text) !important; }
.nav .dropdown-menu a:hover { background: var(--bg-1) !important; color: var(--pink) !important; }
.nav .dropdown-submenu {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(15,25,50,0.14) !important;
}
.nav .dropdown-submenu a { color: var(--text) !important; }
.nav .dropdown-submenu a:hover { background: var(--bg-1) !important; color: var(--pink) !important; }

/* Logo text: dark navy */
.logo, .logo .logo-text { color: var(--navy) !important; }

/* Header search bar in light theme */
.header-search { background: var(--bg-1) !important; border: 1px solid var(--border) !important; }
.header-search .hs-input { color: var(--text) !important; }
.header-search .hs-input::placeholder { color: var(--text-dim) !important; }

/* Hero: light bg with navy accent, editorial */
.pu-hero, .hero, .editorial-hero, .page-hero, .article-hero {
  background: #ffffff !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}
.pu-hero .hero-bg, .hero .hero-bg { opacity: 0.15 !important; }
.pu-hero h1, .hero h1, .editorial-hero h1, .page-hero h1, .article-hero h1 { color: var(--navy) !important; }
.pu-hero p, .hero p, .editorial-hero p, .page-hero p, .article-hero p { color: var(--text-muted); }
.pu-hero .yellow { color: var(--pink) !important; }
.pu-hero .kicker, .article-hero .kicker { color: var(--pink); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; font-size: 12px; }
.pu-hero .kicker .dot { background: var(--pink) !important; }

/* Section titles: navy, underline in orange */
.pu-section-title, .section-title { border-bottom: 2px solid var(--navy) !important; padding-bottom: 8px; margin-top: 32px; margin-bottom: 20px; }
.pu-section-title h2, .section-title h2 { color: var(--navy) !important; font-weight: 700 !important; }
.list-heading { color: var(--navy) !important; }

/* Content headings + text */
.content h2, .article-body h2, .content h3, .article-body h3, .content h4 { color: var(--navy) !important; }
.content p, .article-body p { color: var(--text); }
.content a, .article-body a { color: var(--pink); text-decoration: underline; text-decoration-color: rgba(247,127,0,0.35); text-underline-offset: 3px; }
.content a:hover, .article-body a:hover { text-decoration-color: var(--pink); color: var(--pink-deep); }

/* Tables: casinomeister style — navy header, light rows */
.table-wrap { background: #ffffff !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; overflow: hidden; }
.table-wrap table { background: #ffffff !important; }
.table-wrap thead th { background: var(--navy) !important; color: #ffffff !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12.5px; padding: 12px 14px; }
.table-wrap tbody tr:nth-child(even) { background: var(--bg-1) !important; }
.table-wrap tbody tr:hover { background: rgba(247,127,0,0.08) !important; }
.table-wrap td { color: var(--text); border-top: 1px solid var(--border); padding: 12px 14px; }
.table-wrap td strong { color: var(--navy); }

/* Cards, generic surfaces */
.casino-card, .oc-bonus-card, .blog-card, .feat-card, .country-card,
.market-tile, .step-box, .sidebar-box, .callout, .toc, .faq-item,
.author-box, .home-lead-row .lead-story, .sp-card, .pu-resource,
.oc-cat-table, .oc-crit, .oc-toplist, .stat-row .stat {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1);
  color: var(--text);
}
.casino-card:hover, .blog-card:hover, .oc-bonus-card:hover, .market-tile:hover, .country-card:hover {
  border-color: rgba(247,127,0,0.35) !important;
  box-shadow: 0 8px 24px rgba(15,25,50,0.10), 0 0 0 1px rgba(30,90,168,0.10) !important;
  transform: translateY(-2px);
}
.blog-card h3 { color: var(--navy) !important; }
.blog-card p { color: var(--text-muted); }
.blog-card .tag.guide, .blog-card .tag.banking { background: var(--navy) !important; }
.blog-card .tag.news { background: var(--pink) !important; }
.blog-card .blog-meta { color: var(--text-dim); }

/* TOC */
.toc { background: var(--bg-1) !important; }
.toc .toc-title { color: var(--navy) !important; }
.toc a { color: var(--text); }
.toc a:hover { color: var(--pink); }

/* Buttons */
.btn { border-radius: var(--radius-sm); font-weight: 700; }
.btn-primary { background: var(--pink) !important; color: #ffffff !important; border: 1px solid var(--pink-deep) !important; }
.btn-primary:hover { background: var(--pink-2) !important; color: #ffffff !important; box-shadow: 0 6px 14px rgba(247,127,0,0.30) !important; }
.btn-secondary { background: #ffffff !important; color: var(--navy) !important; border: 1.5px solid var(--navy) !important; }
.btn-secondary:hover { background: var(--navy) !important; color: #ffffff !important; }
.btn-visit { background: var(--pink) !important; color: #ffffff !important; border: 1px solid var(--pink-deep) !important; }

/* Faq accordion */
.faq-accordion .faq-item { background: #ffffff !important; border: 1px solid var(--border) !important; margin-bottom: 10px; border-radius: var(--radius-sm); }
.faq-accordion summary { color: var(--navy) !important; font-weight: 600; padding: 12px 14px; }
.faq-answer { color: var(--text); padding: 0 14px 14px; }

/* Author box */
.author-box { background: var(--bg-1) !important; border: 1px solid var(--border) !important; }
.author-name { color: var(--navy) !important; }
.author-role { color: var(--pink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.author-bio { color: var(--text-muted); }
.author-email-btn { background: var(--pink) !important; color: #ffffff !important; border: 1px solid var(--pink-deep) !important; }
.author-email-btn:hover { background: var(--pink-2) !important; color: #ffffff !important; }
.author-eyebrow { color: var(--pink); }

/* Market subnav pills */
.market-subnav { background: var(--bg-1) !important; border-bottom: 1px solid var(--border); }
.market-subnav a { color: var(--text); border: 1px solid var(--border); background: #ffffff; border-radius: 999px; padding: 6px 14px; font-weight: 600; }
.market-subnav a:hover { background: var(--pink); color: #ffffff; border-color: var(--pink); }
.market-subnav a.active { background: var(--pink) !important; color: #ffffff !important; border-color: var(--pink) !important; }

/* Footer: dark navy with light text */
.site-footer { background: #0d2543 !important; color: #d6dde8; padding: 40px 0 20px; margin-top: 60px; border-top: 3px solid var(--pink); }
.site-footer h3 { color: #ffffff !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12.5px; }
.site-footer a { color: #d6dde8; }
.site-footer a:hover { color: var(--pink); }
.site-footer .logo, .site-footer .logo .logo-text { color: #ffffff !important; }
.footer-bottom { color: #a0a9b8; border-top: 1px solid rgba(255,255,255,0.10); }
.footer-trust { border-top: 1px solid rgba(255,255,255,0.10); padding-top: 16px; }
.ft-badge { color: #d6dde8; }
.responsible-badge { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.20) !important; }

/* Casino card polish */
.casino-info h3 { color: var(--navy) !important; }
.casino-info h3 a { color: var(--navy) !important; }
.bonus-label { color: var(--pink) !important; }
.casino-bonus, .casino-bonus strong { color: var(--text) !important; }
.rank-badge { background: var(--navy) !important; color: #ffffff !important; }
.rank-badge.rank-1 { background: linear-gradient(135deg, var(--gold), var(--pink)) !important; color: #ffffff !important; }
.score-overall .num { color: var(--pink) !important; }
.casino-features li { color: var(--text-muted); }
.casino-features li strong { color: var(--navy); }
.casino-cta { border-top: 1px dashed var(--border); }

/* Homepage market tiles */
.market-tile { padding: 16px !important; }
.market-tile .m-name { color: var(--navy) !important; font-weight: 700; }
.market-tile .m-sub { color: var(--text-muted) !important; font-size: 12px; }
.market-tile img { border-radius: 4px; }

/* Editorial columns sidebar */
.editorial-columns .sidebar-box { background: var(--bg-1) !important; border-top: 3px solid var(--pink); }
.editorial-columns .sb-head { color: var(--navy) !important; }
.latest-list a { color: var(--text); }
.latest-list a:hover { color: var(--pink); }
.latest-list .meta { color: var(--text-dim); }

/* Callouts */
.callout { background: var(--bg-1) !important; border-left: 4px solid var(--pink) !important; }

/* Homepage hero */
.pu-hero { background: linear-gradient(180deg, #ffffff 0%, var(--bg-1) 100%) !important; padding: 60px 0 40px; }
.pu-hero .hero-bg { opacity: 0.10 !important; }
.pu-hero .fact-strip .fact { background: #ffffff; border: 1px solid var(--border); color: var(--text); }
.pu-hero .stat-row .stat { background: #ffffff; border: 1px solid var(--border); }
.pu-hero .stat-row .stat .num { color: var(--pink); }
.pu-hero .stat-row .stat .lbl { color: var(--text-muted); }

/* Text muted class */
.text-muted, [style*="var(--text-muted)"] { color: var(--text-muted); }

/* Image styling on cards */
.blog-thumb, .thumb { border-bottom: 1px solid var(--border); }

/* Selection */
::selection { background: rgba(247,127,0,0.25); color: var(--navy); }

/* Casino card payout/limits/support features (added 2026-08-27) */
.casino-features-payout {
  list-style: none;
  padding: 10px 0 0;
  margin: 8px 0 0;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: 5px;
}
.casino-features-payout li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
}
.casino-features-payout li::before { display: none !important; }
.casino-features-payout .feat-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.casino-features-payout .feat-value {
  color: var(--navy);
  font-weight: 600;
  text-align: right;
  font-size: 12.5px;
}
@media (max-width: 600px) {
  .casino-features-payout li {
    flex-direction: column;
    gap: 2px;
  }
  .casino-features-payout .feat-value { text-align: left; }
}

/* =====================================================
   CASINOMEISTER STRUCTURAL LAYER
   Full site restructure — stacked casino cards, dual ratings,
   metric star ratings, filter toolbar, hero tagline block
   ===================================================== */

/* Casino list wrapper: clean white, no gradient */
.casino-list {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 14px !important;
}
.casino-list.oc-toplist { padding: 0 !important; }

/* Card: stacked full-width row, casinomeister style */
.casino-card {
  grid-template-columns: 140px 1.6fr 1.4fr 1fr !important;
  gap: 24px !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--pink) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-1) !important;
  align-items: center !important;
}
.casino-card:hover {
  border-left-color: var(--pink-deep) !important;
  box-shadow: 0 6px 20px rgba(15,25,50,0.10) !important;
  transform: translateY(-1px) !important;
}
.casino-card.is-top {
  border-left-color: var(--gold) !important;
  background: linear-gradient(180deg, #fffbf0 0%, #ffffff 40%) !important;
}

/* Casino thumb — clean white bg */
.casino-thumb {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  aspect-ratio: 4/3 !important;
  padding: 10px !important;
}

/* Rating: dual heart + user badges (casinomeister style) */
.rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 0 !important;
  margin: 4px 12px 8px 0 !important;
  vertical-align: middle;
}
.rating::before {
  content: "\2665";           /* ♥ heart */
  color: var(--pink);
  font-size: 16px;
  margin-right: 3px;
}
.rating-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  margin-left: 6px;
}
.rating-user::before {
  content: "\1F464";          /* 👤 person silhouette */
  font-size: 15px;
  margin-right: 3px;
}

/* Status badges next to name */
.casino-badges {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.casino-badges .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-head);
}
.casino-badges .badge-accredited { background: var(--gold); color: var(--navy); }
.casino-badges .badge-new { background: var(--pink); color: #ffffff; }
.casino-badges .badge-neutral { background: var(--bg-2); color: var(--text-muted); border: 1px solid var(--border); }

/* Metric star ratings — 5-star display for Payout/Limits/Support */
.casino-features-payout .metric-stars {
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1;
  margin-left: 8px;
}
.casino-features-payout .metric-stars .filled { color: var(--gold); }
.casino-features-payout .metric-stars .empty { color: var(--border-strong); }
.casino-features-payout li {
  display: grid !important;
  grid-template-columns: 130px 1fr auto;
  gap: 8px;
  align-items: center;
}
.casino-features-payout .feat-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.casino-features-payout .feat-value {
  color: var(--navy);
  font-weight: 600;
  text-align: left;
  font-size: 12.5px;
}
@media (max-width: 720px) {
  .casino-features-payout li { grid-template-columns: 1fr auto; }
  .casino-features-payout .feat-label { grid-column: 1 / -1; }
}

/* Filter toolbar above casino lists */
.casino-filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 20px 0 14px;
  font-size: 13px;
}
.casino-filter-bar .cfb-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 11px;
  margin-right: 8px;
}
.casino-filter-bar .cfb-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.casino-filter-bar .cfb-pill:hover { border-color: var(--pink); color: var(--pink); }
.casino-filter-bar .cfb-pill.active { background: var(--pink); color: #ffffff; border-color: var(--pink); }
.casino-filter-bar .cfb-search {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  min-width: 160px;
}
.casino-filter-bar .cfb-search::placeholder { color: var(--text-dim); }

/* Load-more button below list */
.casino-load-more {
  display: block;
  margin: 20px auto 30px;
  padding: 12px 32px;
  background: #ffffff;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.casino-load-more:hover { background: var(--navy); color: #ffffff; }
.casino-load-more::after { content: " +"; }

/* Homepage casinomeister tagline block */
.cm-tagline {
  padding: 60px 0 40px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.cm-tagline .cm-mark {
  display: inline-block;
  color: var(--pink);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cm-tagline h1 {
  color: var(--navy) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 800 !important;
  max-width: 900px;
  margin: 0 auto 18px !important;
  line-height: 1.2 !important;
}
.cm-tagline .cm-desc {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 720px;
  margin: 0 auto 26px;
}
.cm-tagline .cm-ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cm-tagline .cm-ctas .btn { min-width: 160px; }

/* Trust strip below hero (Protecto/GamCare/18+ style) */
.cm-trust-strip {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.cm-trust-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
}
.cm-trust-strip .cm-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.cm-trust-strip .cm-trust-item strong { color: var(--navy); }
.cm-trust-strip .cm-trust-ico { color: var(--pink); font-size: 20px; }

/* Section headline like casinomeister: black h2, thin underline */
.cm-section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 10px;
  margin: 40px 0 20px;
}
.cm-section-h h2 {
  color: var(--navy) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.cm-section-h .see-all { color: var(--pink); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.cm-section-h .see-all:hover { color: var(--pink-deep); }

/* Featured banner between hero and casino grid */
.cm-featured-banner {
  display: block;
  width: 100%;
  margin: 30px 0;
  padding: 22px 30px;
  background: linear-gradient(135deg, var(--navy) 0%, #1e5aa8 100%);
  border-radius: var(--radius);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.cm-featured-banner::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(247,127,0,0.25), transparent 70%);
  pointer-events: none;
}
.cm-featured-banner .fb-label { display: inline-block; background: var(--pink); color: #ffffff; padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.cm-featured-banner .fb-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: #ffffff; }
.cm-featured-banner .fb-sub { color: rgba(255,255,255,0.85); font-size: 15px; }

/* News grid (below casino list — casinomeister-style news rows) */
.cm-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.cm-news-grid .cm-news-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.15s;
}
.cm-news-grid .cm-news-item:hover { border-color: var(--pink); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.cm-news-grid .cm-news-item .cm-news-thumb {
  aspect-ratio: 16/9;
  background: var(--bg-2);
  overflow: hidden;
}
.cm-news-grid .cm-news-item .cm-news-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.cm-news-grid .cm-news-item .cm-news-body { padding: 14px; }
.cm-news-grid .cm-news-item .cm-news-cat {
  display: inline-block; color: var(--pink); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;
}
.cm-news-grid .cm-news-item .cm-news-title {
  color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0 0 6px;
}
.cm-news-grid .cm-news-item .cm-news-meta { color: var(--text-dim); font-size: 12px; }

/* On mobile, casino cards become vertical stacks (already partly handled) */
@media (max-width: 900px) {
  .casino-card {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  .casino-thumb { aspect-ratio: 3/2 !important; width: 200px; margin: 0 auto; }
  .cm-tagline { padding: 40px 0 30px; }
  .cm-tagline h1 { font-size: 1.7rem !important; }
  .cm-trust-strip .container { gap: 14px; }
}

/* =====================================================
   BACCARAT SQUEEZE DEMO ENGINE STYLES
   ===================================================== */
.bcc-table {
  background: linear-gradient(180deg, #0d5535 0%, #093921 100%);
  border: 12px solid #6b4a1e;
  border-radius: 20px;
  padding: 26px 30px;
  color: #ffffff;
  max-width: 780px;
  margin: 30px auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), inset 0 0 60px rgba(0,0,0,0.25);
}
.bcc-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed rgba(255,255,255,0.20);
}
.bcc-header h3 { color: #ffcc4d; font-size: 20px; margin: 0; letter-spacing: 0.04em; }
.bcc-header .bcc-stats { display: inline-flex; gap: 20px; align-items: baseline; font-size: 13px; color: rgba(255,255,255,0.75); }
.bcc-header .bcc-stats span strong { color: #ffcc4d; font-size: 15px; margin-right: 4px; }
.bcc-sides {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  margin-bottom: 22px;
}
.bcc-side {
  text-align: center; padding: 16px; background: rgba(255,255,255,0.06);
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.14);
}
.bcc-side h4 {
  color: #ffcc4d; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 12px;
}
.bcc-cards {
  display: flex; justify-content: center; gap: 6px; align-items: center;
  min-height: 90px;
}
.bcc-card {
  width: 52px; height: 74px;
  background: #ffffff; color: #1a1d24;
  border-radius: 4px; border: 1px solid rgba(0,0,0,0.15);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Georgia', serif;
  font-weight: 700;
  animation: bccFlip 0.35s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.20);
}
.bcc-card .bcc-r { font-size: 17px; line-height: 1; }
.bcc-card .bcc-s { font-size: 20px; line-height: 1; margin-top: 3px; }
.bcc-card-red { color: #c1272d; }
.bcc-card-back {
  background: repeating-linear-gradient(45deg, #143659, #143659 6px, #1e5aa8 6px, #1e5aa8 12px);
}
.bcc-squeeze {
  color: #ffcc4d; font-size: 22px; margin: 0 4px;
  animation: bccPulse 0.6s ease;
}
@keyframes bccFlip {
  0% { transform: rotateY(90deg) scale(0.5); opacity: 0; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
@keyframes bccPulse {
  0% { transform: scale(0.6); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.bcc-score {
  display: inline-block;
  margin-top: 12px; padding: 4px 12px;
  background: rgba(0,0,0,0.30);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  min-width: 30px;
  color: #ffcc4d;
}
.bcc-result {
  text-align: center; padding: 12px; margin: 12px 0 20px;
  border-radius: 8px; font-weight: 700; font-size: 15px;
  background: rgba(255,255,255,0.08);
}
.bcc-result-player { background: rgba(30,90,168,0.30); color: #6cb6ff; }
.bcc-result-banker { background: rgba(247,127,0,0.30); color: #ffcc4d; }
.bcc-result-tie { background: rgba(52,142,83,0.30); color: #7fd9a5; }
.bcc-result-neutral { color: rgba(255,255,255,0.75); }
.bcc-bets {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
.bcc-bet-spot {
  position: relative;
  padding: 14px; text-align: center;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.20);
  border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
  color: #ffffff;
}
.bcc-bet-spot:hover { background: rgba(255,255,255,0.14); border-color: #ffcc4d; }
.bcc-bet-spot.has-bet { border-color: #ffcc4d; background: rgba(255,204,77,0.14); }
.bcc-bet-spot .bcc-bet-label { display:block; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.75; margin-bottom: 4px; }
.bcc-bet-spot .bcc-bet-name  { display:block; font-size: 17px; font-weight: 700; color: #ffcc4d; }
.bcc-bet-spot .bcc-bet-pay   { display:block; font-size: 11px; opacity: 0.70; margin-top: 2px; }
.bcc-bet-spot .bcc-bet-chip  { display: none; margin-top: 6px; padding: 3px 10px; background: #ffcc4d; color: #1a1d24; border-radius: 999px; font-weight: 800; font-size: 12px; }
.bcc-chips {
  display: flex; justify-content: center; gap: 8px; margin-bottom: 14px;
}
.bcc-chip {
  padding: 8px 14px;
  background: rgba(255,255,255,0.08); color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 13px;
  transition: all 0.15s;
}
.bcc-chip:hover { border-color: #ffcc4d; }
.bcc-chip.active { background: #ffcc4d; color: #1a1d24; border-color: #ffcc4d; }
.bcc-controls {
  display: flex; justify-content: center; gap: 10px; margin-bottom: 16px;
}
.bcc-controls button {
  padding: 12px 28px; border-radius: 999px;
  border: none; cursor: pointer; font-weight: 700; font-size: 14px;
  transition: transform 0.1s;
}
.bcc-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
.bcc-controls .bcc-deal { background: #f77f00; color: #ffffff; }
.bcc-controls .bcc-deal:hover:not(:disabled) { background: #ff9a2b; transform: translateY(-1px); }
.bcc-controls .bcc-reset { background: rgba(255,255,255,0.10); color: #ffffff; }
.bcc-history { text-align: center; min-height: 30px; }
.bcc-hist-mark {
  display: inline-block; width: 20px; height: 20px; border-radius: 4px;
  margin: 0 2px; font-size: 11px; font-weight: 800; line-height: 20px; color: #ffffff;
}
.bcc-hist-player { background: #1e5aa8; }
.bcc-hist-banker { background: #f77f00; }
.bcc-hist-tie    { background: #218e53; }

@media (max-width: 640px) {
  .bcc-table { padding: 18px 14px; }
  .bcc-sides { grid-template-columns: 1fr; gap: 14px; }
  .bcc-bets { grid-template-columns: 1fr 1fr; }
  .bcc-bets .bcc-bet-spot:nth-child(3) { grid-column: 1 / -1; }
  .bcc-card { width: 42px; height: 60px; }
  .bcc-card .bcc-r { font-size: 14px; } .bcc-card .bcc-s { font-size: 16px; }
}

/* =====================================================
   HOMEPAGE — CASINOMEISTER-STYLE COMPONENTS
   Latest Casino cards, filter chips, country grid, team cards
   ===================================================== */

/* Latest casinos — headline grid (5-6 casinos per row responsive) */
.cm-latest-casino-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0 30px;
}
.cm-latest-casino {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  text-align: center;
  text-decoration: none;
  transition: all 0.15s;
  color: var(--text);
}
.cm-latest-casino:hover {
  border-color: rgba(247,127,0,0.35);
  box-shadow: 0 8px 20px rgba(15,25,50,0.10);
  transform: translateY(-2px);
}
.cm-latest-casino .clc-logo {
  width: 100%;
  height: 68px;
  display: grid; place-items: center;
  margin-bottom: 10px;
}
.cm-latest-casino .clc-logo img {
  max-width: 100%; max-height: 60px; width: auto; height: auto;
  object-fit: contain;
}
.cm-latest-casino .clc-name {
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
}
.cm-latest-casino .clc-score {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cm-latest-casino .clc-score strong { color: var(--navy); }
.cm-latest-casino .clc-bonus {
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
  min-height: 34px;
  padding: 0 4px;
  margin-bottom: 10px;
}
.cm-latest-casino .clc-cta {
  display: inline-block;
  padding: 7px 20px;
  background: var(--pink);
  color: #ffffff;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s;
}
.cm-latest-casino:hover .clc-cta {
  background: var(--pink-deep);
}

/* Filter chip row */
.cm-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 30px;
}
.cm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  transition: all 0.15s;
  text-decoration: none;
}
.cm-chip:hover {
  border-color: var(--pink);
  color: var(--pink);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15,25,50,0.06);
}

/* Country grid — 3 or 4 columns responsive */
.cm-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 18px 0 30px;
}
.cm-country {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s;
  text-decoration: none;
  color: var(--text);
}
.cm-country:hover {
  border-color: var(--pink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,25,50,0.08);
}
.cm-country img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
}
.cm-country .cn-name {
  display: block;
  color: var(--navy);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.1;
}
.cm-country .cn-sub {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 3px;
}

/* Team grid — 3 columns */
.cm-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 18px 0 30px;
}
.cm-team-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--pink);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-1);
}
.cm-team-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: block;
  border: 3px solid var(--bg-1);
}
.cm-team-card .cm-t-name {
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
.cm-team-card .cm-t-role {
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cm-team-card p {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.cm-team-card .cm-t-email {
  display: inline-block;
  padding: 7px 16px;
  background: var(--pink);
  color: #ffffff !important;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  transition: background 0.15s;
}
.cm-team-card .cm-t-email:hover { background: var(--pink-deep); }

@media (max-width: 720px) {
  .cm-latest-casino-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-country-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-chip { padding: 8px 14px; font-size: 12.5px; }
}
@media (max-width: 480px) {
  .cm-latest-casino-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cm-country-grid { grid-template-columns: 1fr; }
  .cm-latest-casino { padding: 14px 10px 12px; }
  .cm-latest-casino .clc-logo { height: 56px; }
}

/* =====================================================
   CASINOMEISTER-EXACT COLOR OVERRIDES (final layer)
   Based on live-sampled values from casinomeister.com
   ===================================================== */

/* Body — pure black text on white, Asul font, casinomeister sizing */
body { color: #000000 !important; font-family: 'Asul', sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; }

/* Header — exact slate-900 navy */
.site-header { background: #0f172a !important; }
.top-strip { background: #020618 !important; }

/* Nav — light bg with dark text (casinomeister nav style: pill-shaped light) */
.nav a, .nav .dropdown-trigger {
  background: transparent !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  font-family: 'Asul', sans-serif !important;
}
.nav a:hover, .nav .dropdown-trigger:hover { color: #00c950 !important; background: rgba(255,255,255,0.06) !important; }
.nav a.active { color: #00c950 !important; border-bottom: 2px solid #00c950 !important; }

/* Logo text should be white on dark header */
.site-header .logo, .site-header .logo .logo-text { color: #ffffff !important; }

/* Header search inside dark header */
.header-search { background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.20) !important; }
.header-search .hs-input { color: #ffffff !important; }
.header-search .hs-input::placeholder { color: rgba(255,255,255,0.60) !important; }
.header-search .hs-ico { color: rgba(255,255,255,0.80) !important; }

/* Dropdowns */
.nav .dropdown-menu, .nav .dropdown-submenu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.15) !important;
}
.nav .dropdown-menu a, .nav .dropdown-submenu a { color: #0f172a !important; background: transparent !important; font-weight: 400 !important; }
.nav .dropdown-menu a:hover, .nav .dropdown-submenu a:hover { color: #00c950 !important; background: #f8fafc !important; }

/* Content links — casinomeister blue, no green underline */
.content a, .article-body a { color: #111eee !important; text-decoration: underline !important; text-decoration-color: rgba(17,30,238,0.35) !important; }
.content a:hover, .article-body a:hover { color: #0044ff !important; text-decoration-color: #0044ff !important; }

/* Headings — navy slate-900, Asul, mixed case */
h1, h2, h3, h4, h5, h6,
.content h2, .content h3, .content h4,
.article-body h2, .article-body h3, .article-body h4,
.cm-tagline h1, .cm-section-h h2, .pu-section-title h2, .section-title h2, .list-heading {
  font-family: 'Asul', sans-serif !important;
  color: #0f172b !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

/* Section headline underline — thin slate line, casinomeister has minimal dividers */
.cm-section-h, .pu-section-title, .section-title {
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 12px !important;
}
.cm-section-h h2, .pu-section-title h2, .section-title h2 { font-size: 30px !important; color: #0f172b !important; }

/* See-all link should be blue not orange/green */
.cm-section-h .see-all, .pu-section-title .see-all { color: #111eee !important; text-decoration: none !important; }
.cm-section-h .see-all:hover, .pu-section-title .see-all:hover { color: #0044ff !important; text-decoration: underline !important; }

/* CTA buttons — casinomeister has TWO styles: outlined (page CTA) + green (Visit) */
/* Outlined "See top casinos" style — dark navy border */
.btn-secondary { background: #ffffff !important; color: #0f172a !important; border: 1px solid #0f172a !important; border-radius: 8px !important; padding: 8px 32px !important; font-weight: 400 !important; }
.btn-secondary:hover { background: #0f172a !important; color: #ffffff !important; }

/* Primary green "Visit" button — casinomeister's actual green */
.btn-primary, .casino-cta .btn, .casino-cta .btn-primary, .btn-visit,
.cm-latest-casino .clc-cta, .author-email-btn, .cm-team-card .cm-t-email {
  background: #00c950 !important;
  color: #ffffff !important;
  border: 1px solid #00c950 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.btn-primary:hover, .casino-cta .btn:hover, .btn-visit:hover,
.cm-latest-casino:hover .clc-cta, .author-email-btn:hover, .cm-team-card .cm-t-email:hover {
  background: #00a840 !important;
  border-color: #00a840 !important;
  color: #ffffff !important;
}

/* Chip hover — green not orange */
.cm-chip:hover { border-color: #00c950 !important; color: #00c950 !important; }
.cm-country:hover { border-color: #00c950 !important; }
.cm-latest-casino:hover { border-color: #00c950 !important; }

/* Featured banner — dark navy with green highlight instead of the old orange radial */
.cm-featured-banner {
  background: linear-gradient(135deg, #0f172a 0%, #020618 100%) !important;
}
.cm-featured-banner::before {
  background: radial-gradient(circle, rgba(0,201,80,0.20), transparent 70%) !important;
}
.cm-featured-banner .fb-label { background: #00c950 !important; color: #ffffff !important; }

/* Hero tagline — Asul, mixed case, casinomeister-like editorial hero */
.cm-tagline { padding: 50px 0 40px !important; background: #ffffff !important; }
.cm-tagline .cm-mark { color: #00c950 !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0.02em !important; font-size: 14px !important; }
.cm-tagline h1 { color: #0f172b !important; font-family: 'Asul', sans-serif !important; text-transform: none !important; font-size: clamp(28px, 3.2vw, 42px) !important; font-weight: 700 !important; line-height: 1.15 !important; }
.cm-tagline .cm-desc { color: #45556c !important; font-size: 16px !important; line-height: 1.55 !important; }

/* Trust strip — slate-50 with slate borders */
.cm-trust-strip { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; }
.cm-trust-strip .cm-trust-item { color: #45556c !important; font-family: 'Asul', sans-serif !important; }
.cm-trust-strip .cm-trust-item strong { color: #0f172b !important; }
.cm-trust-strip .cm-trust-ico { color: #00c950 !important; }

/* Cards — subtle slate border, minimal shadow */
.casino-card, .cm-latest-casino, .cm-country, .cm-team-card,
.blog-card, .oc-bonus-card, .cm-news-item, .callout, .toc,
.author-box, .sidebar-box, .stat-row .stat {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
.casino-card { border-left: 4px solid #00c950 !important; }

/* Casino name link stays dark */
.casino-info h3 { color: #0f172b !important; font-family: 'Asul', sans-serif !important; font-weight: 700 !important; }
.casino-info h3 a { color: #0f172b !important; }

/* Rating heart accent — keep red-ish heart on dark text */
.rating::before { color: #dc2626 !important; }
.rating { color: #0f172b !important; font-weight: 700 !important; }

/* Metric stars — casinomeister uses grey empties + gold-orange filled */
.casino-features-payout .metric-stars .filled { color: #f59e0b !important; }
.casino-features-payout .metric-stars .empty { color: #cbd5e1 !important; }

/* Tables — casinomeister uses light striped table, dark navy header */
.table-wrap { border: 1px solid #e2e8f0 !important; border-radius: 8px !important; overflow: hidden !important; }
.table-wrap thead th { background: #0f172a !important; color: #ffffff !important; font-family: 'Asul', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; padding: 12px 14px !important; }
.table-wrap tbody tr:nth-child(even) { background: #f8fafc !important; }
.table-wrap tbody tr:hover { background: rgba(0,201,80,0.06) !important; }
.table-wrap td { color: #0f172b !important; border-top: 1px solid #e2e8f0 !important; }

/* Author cards */
.cm-team-card { border-top: 4px solid #00c950 !important; }
.cm-team-card .cm-t-role { color: #00c950 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; }

/* Latest casino card small heart score styling */
.cm-latest-casino .clc-name { color: #0f172b !important; }
.cm-latest-casino .clc-score strong { color: #0f172b !important; }

/* Footer — slate-950 with slate-100 text */
.site-footer { background: #020618 !important; color: #cbd5e1 !important; border-top: 3px solid #00c950 !important; }
.site-footer h3 { color: #ffffff !important; font-family: 'Asul', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; }
.site-footer a { color: #cbd5e1 !important; }
.site-footer a:hover { color: #00c950 !important; }

/* Remove ALL residual uppercase text-transform on nav-level UI (Asul is not designed for all-caps) */
.nav a, .nav .dropdown-trigger, .kicker, .cm-mark, .cm-t-role, .cm-news-cat,
.cm-section-h .see-all, .casino-features-payout .feat-label, .badge, .fb-label,
.bonus-label, .author-role, .rank-badge, .responsible-badge, .footer-bottom {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Casinomeister uses body text at 16px with 1.5 line-height, keep it */
.content p, .article-body p { font-size: 16px !important; line-height: 1.5 !important; color: #0f172b !important; }

/* =====================================================
   HOMEPAGE V2 — Dark hero, redesigned live wins, fixed FAQ, redesigned footer
   ===================================================== */

/* HERO — full dark navy zone, extends header color down */
.cm-hero {
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 70px 0 60px !important;
  text-align: center !important;
  border-bottom: none !important;
  position: relative;
}
.cm-hero::before {
  content: "";
  position: absolute;
  right: 0; top: 0;
  width: 40%; height: 100%;
  background: radial-gradient(circle at 70% 40%, rgba(0,201,80,0.10), transparent 60%);
  pointer-events: none;
}
.cm-hero .cm-mark {
  color: #00c950 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
  display: inline-block;
  margin-bottom: 14px;
  position: relative;
}
.cm-hero h1 {
  color: #ffffff !important;
  font-family: 'Asul', sans-serif !important;
  font-size: clamp(28px, 3.8vw, 46px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  max-width: 900px;
  margin: 0 auto 20px !important;
  text-transform: none !important;
  position: relative;
}
.cm-hero .cm-desc {
  color: rgba(255,255,255,0.85) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  max-width: 780px;
  margin: 0 auto 30px !important;
  position: relative;
}
.cm-hero .cm-ctas {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  position: relative;
}
.cm-hero .cm-ctas .btn { min-width: 170px; padding: 12px 32px !important; font-size: 15px !important; }
.cm-hero .btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
}
.cm-hero .btn-secondary:hover { background: #ffffff !important; color: #0f172a !important; }

/* LIVE WINS — redesigned, clean casinomeister-style */
.cm-live-wins {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #00c950;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 26px 0 14px;
}
.cm-live-wins .clw-header {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.cm-live-wins .clw-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: #00c950;
  box-shadow: 0 0 0 0 rgba(0,201,80,0.6);
  animation: clwPulse 1.8s infinite;
  flex-shrink: 0;
}
@keyframes clwPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,201,80,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(0,201,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,201,80,0); }
}
.cm-live-wins .clw-header h3 {
  color: #0f172b !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  flex: 1;
}
.cm-live-wins .clw-status {
  color: #45556c;
  font-size: 12.5px;
  font-weight: 400;
}
.cm-live-wins .clw-track {
  display: flex; gap: 20px;
  overflow: hidden;
  position: relative;
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cm-live-wins .clw-track > * {
  animation: clwScroll 40s linear infinite;
}
@keyframes clwScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.cm-live-wins .clw-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 13.5px;
  color: #0f172b;
}
.cm-live-wins .clw-item .clw-flag { font-size: 16px; }
.cm-live-wins .clw-item .clw-op { font-weight: 700; }
.cm-live-wins .clw-item .clw-sep { color: #94a3b8; }
.cm-live-wins .clw-item .clw-amt { color: #00c950; font-weight: 700; }
.cm-live-wins .clw-item .clw-time { color: #45556c; font-size: 12px; }
@media (max-width: 600px) {
  .cm-live-wins { padding: 14px 16px; }
  .cm-live-wins .clw-header h3 { font-size: 13.5px !important; }
  .cm-live-wins .clw-status { display: none; }
  .cm-live-wins .clw-item { padding: 6px 12px; font-size: 12.5px; }
}

/* FAQ — visible contrast (was invisible before) */
.cm-faq {
  display: flex; flex-direction: column; gap: 10px;
  margin: 18px 0 30px;
}
.cm-faq details {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden;
  transition: border-color 0.2s;
}
.cm-faq details[open] { border-color: #00c950 !important; }
.cm-faq details summary {
  padding: 16px 20px !important;
  cursor: pointer !important;
  color: #0f172b !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  list-style: none !important;
  position: relative;
  padding-right: 48px !important;
}
.cm-faq details summary::-webkit-details-marker { display: none; }
.cm-faq details summary::after {
  content: '+';
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  color: #00c950;
  font-size: 22px;
  font-weight: 700;
  transition: transform 0.2s;
}
.cm-faq details[open] summary::after { content: '−'; }
.cm-faq details p {
  padding: 0 20px 18px !important;
  color: #0f172b !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.cm-faq details p a { color: #111eee !important; text-decoration: underline !important; }

/* TRUST STRIP — kept, minor polish */
.cm-trust-strip { padding: 20px 0 !important; }
.cm-trust-strip .container { gap: 22px; }
.cm-trust-strip .cm-trust-item { font-size: 13.5px; }

/* Country grid — bigger cards, better spacing, fix mobile above-the-fold */
.cm-country-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 12px !important; }
.cm-country { padding: 16px 18px !important; grid-template-columns: 40px 1fr !important; }
.cm-country img { width: 40px !important; height: 40px !important; }
.cm-country .cn-name { font-size: 15px !important; text-decoration: none !important; color: #0f172b !important; }
.cm-country .cn-sub { color: #45556c !important; text-decoration: none !important; }
.cm-country:hover .cn-name { text-decoration: none !important; }

@media (max-width: 720px) {
  .cm-country-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .cm-country { padding: 12px 14px !important; grid-template-columns: 32px 1fr !important; gap: 10px !important; }
  .cm-country img { width: 32px !important; height: 32px !important; }
  .cm-country .cn-name { font-size: 14px !important; }
  .cm-country .cn-sub { font-size: 11px !important; }
  .cm-hero { padding: 40px 0 40px !important; }
  .cm-hero h1 { font-size: 26px !important; padding: 0 12px; }
  .cm-hero .cm-desc { font-size: 15px !important; padding: 0 12px; }
}

/* =====================================================
   FOOTER V2 — full casinomeister-style redesign
   ===================================================== */
.site-footer {
  background: #0f172a !important;
  color: #cbd5e1 !important;
  padding: 50px 0 24px !important;
  margin-top: 60px !important;
  border-top: 3px solid #00c950 !important;
}
.site-footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  padding-bottom: 34px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.site-footer .footer-grid > div:first-child .logo img { height: 44px; width: 44px; }
.site-footer .footer-grid > div:first-child p {
  color: #94a3b8 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 14px !important;
  max-width: 340px;
}
.site-footer .footer-grid h3 {
  color: #ffffff !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.site-footer .footer-grid ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-grid ul li { margin-bottom: 9px; }
.site-footer .footer-grid ul li a {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color 0.15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.site-footer .footer-grid ul li a:hover { color: #00c950 !important; }
.site-footer .footer-grid ul li a .flag-ico-img { width: 20px; height: 20px; border-radius: 3px; }
.site-footer .responsible-badge {
  display: inline-flex; align-items: center;
  padding: 8px 16px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600;
  margin-top: 18px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Footer trust row */
.site-footer .footer-trust {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 24px 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer .ft-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 500;
}
.site-footer .ft-ico { color: #00c950; }

/* Footer bottom */
.site-footer .footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding-top: 20px !important;
  color: #64748b !important;
  font-size: 13px !important;
  border-top: none !important;
}
.site-footer .footer-bottom span,
.site-footer .footer-bottom p { color: #64748b !important; margin: 0; }
.site-footer .footer-bottom a { color: #94a3b8 !important; }
.site-footer .footer-bottom a:hover { color: #00c950 !important; }

@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
}
@media (max-width: 600px) {
  .site-footer .footer-grid { grid-template-columns: 1fr !important; }
  .site-footer { padding: 40px 0 20px !important; }
}

/* =====================================================
   FIX PACK v3 — per user feedback (2026-08-28)
   ===================================================== */

/* 1. FEATURED BANNER — force text visible on dark navy */
.cm-featured-banner,
.cm-featured-banner *,
.cm-featured-banner h2,
.cm-featured-banner p,
.cm-featured-banner a { color: #ffffff !important; text-decoration: none !important; }
.cm-featured-banner .fb-title { color: #ffffff !important; font-size: 22px !important; font-weight: 700 !important; margin: 0 0 8px !important; }
.cm-featured-banner .fb-sub { color: rgba(255,255,255,0.90) !important; font-size: 15px !important; }
.cm-featured-banner .fb-label { background: #00c950 !important; color: #ffffff !important; }
.cm-featured-banner:hover { text-decoration: none !important; }

/* 2. best/index — Category cards (oc-cat-grid) — light theme fix */
.oc-cat-grid { margin: 20px 0 30px !important; }
.oc-cat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #00c950 !important;
  border-radius: 8px !important;
  color: #0f172b !important;
  padding: 20px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
.oc-cat-card:hover { border-left-color: #00a840 !important; box-shadow: 0 6px 18px rgba(15,23,42,0.10) !important; }
.oc-cat-card .oc-cat-label { color: #0f172b !important; font-family: 'Asul', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; }
.oc-cat-card .oc-cat-pick { color: #45556c !important; }
.oc-cat-card .oc-cat-pick strong { color: #0f172b !important; }
.oc-cat-card .oc-cat-blurb, .oc-cat-card p { color: #0f172b !important; }
.oc-cat-card .oc-cat-cta, .oc-cat-card a { color: #00c950 !important; text-decoration: none !important; font-weight: 700; }
.oc-cat-card .oc-cat-cta:hover { color: #00a840 !important; }

/* 3. LIVE WINS — thinner, tighter, more visible */
.cm-live-wins {
  padding: 10px 16px !important;
  margin: 20px 0 10px !important;
  border-left-width: 3px !important;
}
.cm-live-wins .clw-header {
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  gap: 10px !important;
}
.cm-live-wins .clw-header h3 { font-size: 13.5px !important; }
.cm-live-wins .clw-status { font-size: 12px !important; }
.cm-live-wins .clw-track { gap: 14px !important; }
.cm-live-wins .clw-item { padding: 5px 12px !important; font-size: 12.5px !important; gap: 6px !important; }
.cm-live-wins .clw-item .clw-flag { font-size: 14px; }
.cm-live-wins .clw-item .clw-time { font-size: 11.5px; }
@media (max-width: 600px) {
  .cm-live-wins { padding: 8px 12px !important; margin: 14px 0 8px !important; }
  .cm-live-wins .clw-header h3 { font-size: 12.5px !important; }
  .cm-live-wins .clw-item { padding: 4px 10px !important; font-size: 12px !important; }
}

/* 4. HERO — reduce padding desktop + mobile so list shows above the fold */
.cm-hero { padding: 40px 0 34px !important; }
.cm-hero h1 { font-size: clamp(24px, 3vw, 38px) !important; margin-bottom: 14px !important; }
.cm-hero .cm-desc { font-size: 16px !important; margin-bottom: 22px !important; max-width: 720px; }
.cm-hero .cm-mark { margin-bottom: 8px !important; font-size: 13.5px !important; }
.cm-hero .cm-ctas .btn { padding: 10px 24px !important; font-size: 14px !important; }
@media (max-width: 720px) {
  .cm-hero { padding: 26px 0 22px !important; }
  .cm-hero h1 { font-size: 22px !important; padding: 0; }
  .cm-hero .cm-desc { font-size: 14px !important; padding: 0; margin-bottom: 16px !important; }
  .cm-hero .cm-mark { font-size: 12px !important; }
}

/* 5. Reduce section padding globally on mobile for above-the-fold */
@media (max-width: 720px) {
  section.content { padding: 12px 0 !important; }
  .cm-section-h { margin: 20px 0 12px !important; padding-bottom: 8px !important; }
  .cm-section-h h2 { font-size: 20px !important; }
  .cm-trust-strip { padding: 12px 0 !important; }
  .cm-trust-strip .container { gap: 12px !important; }
  .cm-trust-strip .cm-trust-item { font-size: 12px !important; }
}

/* 6. MOBILE CLAMP — collapse long intro paragraphs, "Read more" toggle */
.mobile-lede-wrap { position: relative; }
.mobile-lede-toggle {
  display: none;
  margin-top: 8px;
  padding: 4px 12px;
  background: transparent;
  border: none;
  color: #00c950;
  font-family: 'Asul', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  padding-left: 0;
}
.mobile-lede-toggle::after { content: ' ▾'; }
.mobile-lede-toggle[aria-expanded="true"]::after { content: ' ▴'; }
@media (max-width: 720px) {
  .mobile-lede-toggle { display: inline-block; }
  .mobile-lede-wrap .lede,
  .mobile-lede-wrap p.lead,
  .mobile-lede-wrap .cm-desc,
  .mobile-lede-wrap .mk-intro,
  .mobile-lede-wrap .page-hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 3.2em;
    transition: max-height 0.3s;
  }
  .mobile-lede-wrap.expanded .lede,
  .mobile-lede-wrap.expanded p.lead,
  .mobile-lede-wrap.expanded .cm-desc,
  .mobile-lede-wrap.expanded .mk-intro,
  .mobile-lede-wrap.expanded .page-hero-desc {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
  }
}

/* 7. FOOTER V3 — casinomeister-tight, distinct hover, spacing polish */
.site-footer { padding: 44px 0 20px !important; }
.site-footer .footer-grid {
  grid-template-columns: 1.4fr 1fr 1fr 0.9fr !important;
  gap: 30px !important;
  padding-bottom: 28px !important;
}
.site-footer .footer-grid > div:first-child {
  padding-right: 18px;
}
.site-footer .footer-grid > div:first-child .logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: #ffffff !important; text-decoration: none;
}
.site-footer .footer-grid > div:first-child .logo img { height: 40px; width: 40px; }
.site-footer .footer-grid > div:first-child p {
  color: #94a3b8 !important; font-size: 13.5px !important; line-height: 1.55 !important;
  margin-top: 12px !important;
}
.site-footer .footer-grid h3 {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #00c950 !important;
  display: inline-block;
}
.site-footer .footer-grid ul li { margin-bottom: 8px !important; }
.site-footer .footer-grid ul li a {
  color: #cbd5e1 !important; font-size: 13.5px !important;
  transition: color 0.15s, padding-left 0.15s;
}
.site-footer .footer-grid ul li a:hover { color: #00c950 !important; padding-left: 4px; }
.site-footer .responsible-badge {
  display: inline-flex;
  padding: 8px 14px !important;
  background: rgba(0,201,80,0.10) !important;
  border: 1px solid rgba(0,201,80,0.30) !important;
  border-radius: 6px !important;
  color: #ffffff !important; font-size: 12.5px !important;
  margin-top: 16px !important;
}
.site-footer .footer-trust {
  padding: 20px 0 !important; gap: 10px !important;
}
.site-footer .ft-badge {
  padding: 6px 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #cbd5e1 !important; font-size: 12.5px !important;
  gap: 6px;
}
.site-footer .ft-ico { color: #00c950; }
.site-footer .footer-bottom {
  color: #64748b !important;
  font-size: 12.5px !important;
  padding-top: 18px !important;
}
@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 26px !important; }
  .site-footer .footer-grid > div:first-child { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 600px) {
  .site-footer { padding: 30px 0 16px !important; }
  .site-footer .footer-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .site-footer .footer-trust { gap: 6px !important; }
  .site-footer .ft-badge { padding: 5px 10px !important; font-size: 11.5px !important; }
  .site-footer .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* =====================================================
   FIX PACK v4 — thin live wins, distinct icons, new footer
   ===================================================== */

/* THIN Live Wins — single-line, ~40px total */
.cm-live-wins {
  padding: 0 !important;
  margin: 12px 0 4px !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid #00c950 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  overflow: hidden;
}
.cm-live-wins .clw-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 6px 14px;
  min-height: 38px;
}
.cm-live-wins .clw-header { display: none !important; }  /* old block removed */
.cm-live-wins .clw-lede {
  display: inline-flex; align-items: center; gap: 8px;
  color: #0f172b;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.cm-live-wins .clw-lede strong { color: #0f172b; font-weight: 700; }
.cm-live-wins .clw-status {
  color: #45556c;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 8px;
  background: rgba(0,201,80,0.08);
  border-radius: 999px;
}
.cm-live-wins .clw-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00c950; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(0,201,80,0.6);
  animation: clwPulse 1.8s infinite;
}
.cm-live-wins .clw-track {
  display: flex; gap: 22px;
  overflow: hidden;
  position: relative;
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  height: 26px;
  align-items: center;
}
.cm-live-wins .clw-track > * { animation: clwScroll 45s linear infinite; }
.cm-live-wins .clw-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12.5px;
  color: #45556c;
}
.cm-live-wins .clw-item .clw-flag {
  width: 16px !important; height: 16px !important;
  border-radius: 2px; object-fit: cover;
}
.cm-live-wins .clw-item .clw-op { color: #0f172b; font-weight: 700; }
.cm-live-wins .clw-item .clw-sep { color: #94a3b8; }
.cm-live-wins .clw-item .clw-amt { color: #00c950; font-weight: 700; }
.cm-live-wins .clw-item .clw-time { color: #64748b; font-size: 11.5px; }

@media (max-width: 720px) {
  .cm-live-wins .clw-inner { grid-template-columns: auto 1fr; gap: 10px; padding: 5px 10px; min-height: 34px; }
  .cm-live-wins .clw-lede { font-size: 12px; gap: 6px; }
  .cm-live-wins .clw-status { display: none; }
  .cm-live-wins .clw-item { font-size: 11.5px; gap: 5px; }
  .cm-live-wins .clw-item .clw-flag { width: 14px !important; height: 14px !important; }
}

/* Popular Filter chips — SVG icons */
.cm-chip svg { flex-shrink: 0; }
.cm-chip { gap: 8px !important; padding: 8px 16px !important; }
.cm-chip:hover svg { stroke: #00c950 !important; }

/* =====================================================
   FOOTER V4 — completely new structure
   ===================================================== */
.site-footer {
  background: #0f172a !important;
  color: #cbd5e1 !important;
  padding: 44px 0 20px !important;
  margin-top: 60px !important;
  border-top: 3px solid #00c950 !important;
}

/* Top: brand + big markets grid */
.site-footer .fx-top {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer .fx-brand .fx-logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  margin-bottom: 12px;
}
.site-footer .fx-brand .fx-logo img { width: 44px; height: 44px; }
.site-footer .fx-brand-name {
  color: #ffffff !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 24px;
  font-weight: 700;
}
.site-footer .fx-brand-tld { color: #00c950; }
.site-footer .fx-tagline {
  color: #94a3b8 !important; font-size: 13.5px !important; line-height: 1.55 !important;
  margin: 8px 0 16px !important;
}
.site-footer .fx-badges {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.site-footer .fx-mini-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0,201,80,0.10);
  border: 1px solid rgba(0,201,80,0.25);
  border-radius: 999px;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
}

/* Big markets grid — 3 cols of tile buttons */
.site-footer .fx-markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-content: start;
}
.site-footer .fx-markets-grid a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: #cbd5e1 !important;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  text-decoration: none !important;
}
.site-footer .fx-markets-grid a:hover {
  background: rgba(0,201,80,0.08) !important;
  border-color: rgba(0,201,80,0.40);
  color: #ffffff !important;
  padding-left: 16px;
}
.site-footer .fx-markets-grid a img { width: 22px; height: 22px; border-radius: 3px; }

/* Middle: 4 link columns */
.site-footer .fx-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer .fx-col h4 {
  color: #ffffff !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  margin: 0 0 14px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid #00c950;
  display: inline-block;
}
.site-footer .fx-col a {
  display: block;
  color: #cbd5e1 !important;
  font-size: 13.5px !important;
  padding: 5px 0;
  text-decoration: none !important;
  transition: color 0.15s, padding-left 0.15s;
}
.site-footer .fx-col a:hover { color: #00c950 !important; padding-left: 4px; }

/* Trust bar */
.site-footer .fx-trust {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer .fx-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  color: #cbd5e1;
  font-size: 12.5px;
  font-weight: 500;
}
.site-footer .fx-trust-item svg { color: #00c950; flex-shrink: 0; }

/* Bottom */
.site-footer .fx-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 18px;
  color: #64748b;
  font-size: 12.5px;
}

/* Hide old footer blocks that may still be present */
.site-footer .footer-grid,
.site-footer .footer-trust,
.site-footer .footer-bottom { display: none !important; }

/* Responsive */
@media (max-width: 1000px) {
  .site-footer .fx-top { grid-template-columns: 1fr; gap: 26px; }
  .site-footer .fx-markets-grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer .fx-links { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .site-footer { padding: 28px 0 16px !important; margin-top: 40px !important; }
  .site-footer .fx-markets-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer .fx-markets-grid a { padding: 8px 12px; font-size: 12.5px; }
  .site-footer .fx-links { grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 0; }
  .site-footer .fx-trust { justify-content: flex-start; gap: 10px 18px; }
  .site-footer .fx-trust-item { font-size: 11.5px; }
  .site-footer .fx-bottom { flex-direction: column; text-align: center; gap: 8px; font-size: 11.5px; }
}

/* =====================================================
   LOGO SIZING — user uploaded 450x137 rect logo
   ===================================================== */
.logo img,
.site-header .logo img { height: 40px !important; width: auto !important; max-width: 180px; transition: none !important; }
.logo:hover img,
.site-header .logo:hover img { transform: none !important; }
.site-footer .fx-logo img { height: 44px !important; width: auto !important; max-width: 190px; }
.site-footer .fx-logo .fx-brand-name { display: none !important; }

/* =====================================================
   FIX PACK v5 — Live wins hugs hero, fast scroll, tight spacing
   ===================================================== */

/* Live wins section — flush against hero + faster scroll + player names visible */
.cm-hero + .content { padding-top: 0 !important; }
section.content:has(.cm-live-wins) { padding: 0 !important; }
.cm-live-wins {
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.cm-live-wins .clw-inner {
  padding: 5px 20px !important;
  min-height: 34px !important;
  border-left: 4px solid #00c950;
}

/* Faster scroll — 22s desktop, 20s mobile (was 45s) */
.cm-live-wins .clw-track > * { animation: clwScroll 22s linear infinite !important; }
@media (max-width: 720px) {
  .cm-live-wins .clw-track > * { animation-duration: 18s !important; }
}

/* Player + verb styling */
.cm-live-wins .clw-item .clw-player { color: #0f172b !important; font-weight: 700; }
.cm-live-wins .clw-item .clw-verb { color: #94a3b8 !important; font-weight: 400; font-size: 12px; }

/* Casino Reviews by Country — reduced top spacing to hug live wins */
section.content:has(.cm-country-grid) { padding-top: 14px !important; padding-bottom: 12px !important; }
section.content:has(.cm-country-grid) .cm-section-h { margin-top: 4px !important; margin-bottom: 12px !important; }

/* =====================================================
   FIX PACK v6 — full-width live wins, faster scroll, less padding, mobile read-more spacing
   ===================================================== */

/* Live Wins FULL-WIDTH edge-to-edge — break out of container */
.cm-hero + section.content:has(.cm-live-wins),
section.content:has(.cm-live-wins) {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
}
section.content:has(.cm-live-wins) > .container {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.cm-live-wins {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  width: 100% !important;
  margin: 0 !important;
}
.cm-live-wins .clw-inner {
  padding: 5px 20px !important;
  min-height: 32px !important;
  border-left: 4px solid #00c950 !important;
  width: 100%;
  max-width: none !important;
}

/* Even FASTER scroll — 12s desktop, 10s mobile */
.cm-live-wins .clw-track > * { animation: clwScroll 12s linear infinite !important; }
@media (max-width: 720px) {
  .cm-live-wins .clw-track > * { animation-duration: 10s !important; }
  .cm-live-wins .clw-inner { padding: 4px 12px !important; min-height: 30px !important; }
}

/* Mobile Read more button — lift up, more breathing room */
@media (max-width: 720px) {
  .mobile-lede-wrap { margin-bottom: 8px; }
  .mobile-lede-toggle {
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
  }
  /* Extra spacing between hero cm-desc and cm-ctas so buttons don't hug read-more */
  .cm-hero .cm-ctas { margin-top: 10px !important; }
}

/* Tighter section spacing site-wide — content feels less empty */
section.content { padding: 14px 0 !important; }
.cm-section-h { margin: 18px 0 12px !important; padding-bottom: 8px !important; }
.cm-country-grid, .cm-latest-casino-grid, .cm-filter-chips,
.cm-news-grid, .cm-team-grid, .cm-faq { margin: 12px 0 20px !important; }

@media (max-width: 720px) {
  section.content { padding: 10px 0 !important; }
  .cm-section-h { margin: 12px 0 8px !important; padding-bottom: 6px !important; }
  .cm-section-h h2 { font-size: 18px !important; }
  .cm-country-grid, .cm-latest-casino-grid, .cm-filter-chips,
  .cm-news-grid, .cm-team-grid, .cm-faq { margin: 8px 0 14px !important; gap: 8px !important; }
  .cm-hero { padding: 22px 0 18px !important; }
  .cm-trust-strip { padding: 8px 0 !important; }
}

/* Trust strip — reduce padding to feel tighter */
.cm-trust-strip { padding: 12px 0 !important; }

/* Featured banner — reduce padding */
.cm-featured-banner { padding: 18px 24px !important; margin: 10px 0 !important; }
.cm-featured-banner .fb-title { font-size: 20px !important; }
.cm-featured-banner .fb-sub { font-size: 14px !important; }
@media (max-width: 720px) {
  .cm-featured-banner { padding: 14px 16px !important; }
  .cm-featured-banner .fb-title { font-size: 16px !important; }
  .cm-featured-banner .fb-sub { font-size: 13px !important; }
}

/* =====================================================
   FIX PACK v7 — market subnav redesign, casino card mobile fix,
   filter bar mobile, hide duplicate "Read more" buttons
   ===================================================== */

/* Hide OLD palmy toggles that conflict with my new mobile-lede-toggle */
.lede-toggle, .clamp-toggle { display: none !important; }

/* Market subnav — casinomeister-style horizontal pill row (light theme) */
.market-subnav {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  padding: 0 !important;
}
.market-subnav .subnav-scroll {
  display: flex !important;
  gap: 4px !important;
  overflow-x: auto !important;
  scroll-snap-type: x proximity;
  padding: 10px 0 !important;
  -webkit-overflow-scrolling: touch;
}
.market-subnav .subnav-scroll::-webkit-scrollbar { display: none; }
.market-subnav a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background: #f8fafc !important;
  color: #0f172b !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s;
  scroll-snap-align: start;
  text-decoration: none !important;
}
.market-subnav a:hover {
  background: rgba(0,201,80,0.10) !important;
  color: #00a840 !important;
  border-color: rgba(0,201,80,0.30) !important;
}
.market-subnav a.active {
  background: #00c950 !important;
  color: #ffffff !important;
  border-color: #00c950 !important;
  font-weight: 700 !important;
}
@media (max-width: 720px) {
  .market-subnav .subnav-scroll { padding: 8px 0 !important; gap: 3px !important; }
  .market-subnav a { padding: 7px 14px !important; font-size: 12.5px !important; }
}

/* Filter toolbar mobile fix — no more "High-rating" splitting vertically */
.casino-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin: 14px 0 12px !important;
  align-items: center !important;
}
.casino-filter-bar .cfb-label {
  color: #45556c !important;
  font-family: 'Asul', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  margin-right: 4px !important;
  flex-shrink: 0;
}
.casino-filter-bar .cfb-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  background: #ffffff !important;
  color: #0f172b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  cursor: pointer;
  white-space: nowrap !important;
  transition: all 0.15s;
  flex-shrink: 0;
}
.casino-filter-bar .cfb-pill:hover { border-color: #00c950 !important; color: #00c950 !important; }
.casino-filter-bar .cfb-pill.active {
  background: #00c950 !important;
  color: #ffffff !important;
  border-color: #00c950 !important;
  font-weight: 700 !important;
}
.casino-filter-bar .cfb-search {
  margin-left: auto !important;
  padding: 6px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0f172b !important;
  font-size: 13px;
  min-width: 160px;
}
@media (max-width: 720px) {
  .casino-filter-bar { padding: 8px 10px !important; gap: 6px !important; }
  .casino-filter-bar .cfb-label { width: 100%; margin-bottom: 2px !important; }
  .casino-filter-bar .cfb-pill { padding: 5px 12px !important; font-size: 12px !important; }
  .casino-filter-bar .cfb-search { min-width: 100%; margin-left: 0 !important; margin-top: 4px; }
}

/* Casino card — FIX mobile stack (text was overlapping) */
.casino-card {
  display: grid !important;
  grid-template-columns: 140px 1.5fr 1.3fr 1fr !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 18px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #00c950 !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}
.casino-card .casino-thumb {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  padding: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  display: grid;
  place-items: center;
}
.casino-card .casino-thumb img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
}
.casino-card .casino-info { min-width: 0; overflow: hidden; }
.casino-card .casino-info h3 { color: #0f172b !important; font-size: 18px !important; font-weight: 700 !important; margin: 0 0 4px !important; }
.casino-card .casino-features { list-style: none; padding: 0; margin: 8px 0 0; }
.casino-card .casino-features li {
  padding: 3px 0;
  font-size: 13px;
  color: #45556c;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.casino-card .casino-features li::before {
  content: "✓";
  color: #00c950;
  font-weight: 800;
  flex-shrink: 0;
}
.casino-card .casino-features-payout {
  border-top: 1px dashed #e2e8f0;
  padding-top: 10px !important;
  margin-top: 10px !important;
}
.casino-card .casino-features-payout li {
  display: grid !important;
  grid-template-columns: 110px 1fr auto !important;
  gap: 6px !important;
  padding: 3px 0 !important;
  align-items: baseline;
}
.casino-card .casino-features-payout li::before { display: none !important; }
.casino-card .casino-features-payout .feat-label {
  color: #94a3b8 !important;
  font-size: 10.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.casino-card .casino-features-payout .feat-value {
  color: #0f172b !important;
  font-size: 12px !important;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.casino-card .casino-bonus {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 12px;
  background: #f8fafc;
  border-radius: 6px;
  text-align: center;
}
.casino-card .bonus-label {
  color: #00c950 !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.casino-card .bonus-amount {
  color: #0f172b !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.35;
}
.casino-card .casino-cta { display: flex; align-items: center; justify-content: center; }
.casino-card .casino-cta .btn { width: 100%; }

/* Rank badge — dark navy square casinomeister style */
.casino-card .rank-badge {
  position: absolute !important;
  top: 12px !important; left: 12px !important;
  width: 28px !important; height: 28px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  display: grid; place-items: center;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  z-index: 2;
}
.casino-card { position: relative !important; }

/* Casino features narrow — hide overlap */
.casino-card .rating { display: inline-block !important; margin: 4px 0 !important; }

/* Mobile stack — casinomeister-style vertical */
@media (max-width: 900px) {
  .casino-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 44px 16px 16px !important;  /* extra top for rank badge */
  }
  .casino-card .casino-thumb {
    aspect-ratio: 3/2 !important;
    max-width: 200px;
    margin: 0 auto;
  }
  .casino-card .casino-info h3 { font-size: 17px !important; text-align: center; }
  .casino-card .rating,
  .casino-card .rating-user { display: inline-block; text-align: center; }
  .casino-card .casino-info { text-align: center; }
  .casino-card .casino-features,
  .casino-card .casino-features-payout { text-align: left; }
  .casino-card .casino-features li { justify-content: flex-start; }
  .casino-card .casino-features-payout li {
    grid-template-columns: 1fr auto !important;
  }
  .casino-card .casino-features-payout .feat-label {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }
  .casino-card .casino-features-payout .feat-value { white-space: normal; }
  .casino-card .casino-bonus { text-align: center; }
  .casino-card .rank-badge {
    top: 12px !important; left: 12px !important;
    width: 32px !important; height: 32px !important;
    font-size: 16px !important;
  }
}

/* =====================================================
   FIX PACK v8 — pros-cons + related-card + resource-grid visibility
   ===================================================== */

/* Pros/Cons callout — DARK NAVY was killing text; force light theme */
.pros-cons { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 16px 0 24px !important; }
.pros-cons > div,
.pros-cons .pros,
.pros-cons .cons {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 18px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
}
.pros-cons .pros { border-top: 4px solid #00c950 !important; }
.pros-cons .cons { border-top: 4px solid #dc2626 !important; }
.pros-cons h3 {
  color: #0f172b !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.pros-cons ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.pros-cons ul li {
  padding: 8px 0 !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  color: #0f172b !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
}
.pros-cons ul li:last-child { border-bottom: none !important; }
.pros-cons .pros ul li::before {
  content: "✓" !important;
  color: #00c950 !important;
  font-weight: 800 !important;
  flex-shrink: 0;
}
.pros-cons .cons ul li::before {
  content: "✕" !important;
  color: #dc2626 !important;
  font-weight: 800 !important;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .pros-cons { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* Related-card grid — was dark navy + teal, force light theme */
.related-title {
  color: #0f172b !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin: 24px 0 14px !important;
}
.related-title::after { display: none !important; }
.related-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  margin: 14px 0 20px !important;
}
.related-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
  transition: all 0.15s;
  text-decoration: none !important;
}
.related-card:hover {
  border-color: #00c950 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.08) !important;
}
.related-card .r-tag {
  display: inline-block !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: #00c950 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  line-height: 1.4;
}
.related-card .r-title {
  display: block !important;
  color: #0f172b !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-top: 8px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}
.related-card:hover .r-title { color: #00c950 !important; }
@media (max-width: 720px) {
  .related-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}
@media (max-width: 480px) {
  .related-grid { grid-template-columns: 1fr !important; }
}

/* Resource grid (demo/games section) — fix mobile squeeze */
.pu-resource-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin: 16px 0 24px !important;
}
.pu-resource {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  text-align: center !important;
  color: #0f172b !important;
  transition: all 0.15s;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.pu-resource:hover {
  border-color: #00c950 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,0.08) !important;
}
.pu-resource .ico {
  width: 48px !important; height: 48px !important;
  margin: 0 auto 8px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 24px !important;
}
.pu-resource .tag-mini {
  display: inline-block !important;
  padding: 3px 10px !important;
  background: #00c950 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  align-self: center;
  margin-bottom: 4px !important;
}
.pu-resource h3 {
  color: #0f172b !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 4px 0 6px !important;
  line-height: 1.25 !important;
}
.pu-resource p {
  color: #45556c !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.pu-resource .go {
  color: #00c950 !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  text-decoration: none !important;
}

/* Mobile — stack to 1 col instead of squeezing 3 cols */
@media (max-width: 900px) {
  .pu-resource-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pu-resource { padding: 14px !important; }
  .pu-resource h3 { font-size: 15px !important; }
  .pu-resource p { font-size: 13px !important; }
}
@media (max-width: 520px) {
  .pu-resource-grid { grid-template-columns: 1fr !important; }
  .pu-resource { padding: 16px !important; }
}
/* Also override inline grid-template-columns:repeat(3,1fr) on the parent */
.pu-resource-grid[style*="repeat(3"] { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 900px) { .pu-resource-grid[style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .pu-resource-grid[style*="repeat(3"] { grid-template-columns: 1fr !important; } }

/* =====================================================
   FIX PACK v9 — page-hero, eyebrow, gradient title on all hub pages
   ===================================================== */

/* Page-hero (Guides / News / Banking hubs + market landings) — dark navy hero like homepage */
.page-hero {
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 40px 0 34px !important;
  text-align: center !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  right: 0; top: 0;
  width: 40%; height: 100%;
  background: radial-gradient(circle at 70% 40%, rgba(0,201,80,0.10), transparent 60%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .blob { display: none !important; }
.page-hero .breadcrumbs {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px !important;
  margin-bottom: 12px;
  text-align: left;
}
.page-hero .breadcrumbs a { color: #00c950 !important; text-decoration: none !important; }
.page-hero .breadcrumbs a:hover { color: #16d660 !important; }
.page-hero .breadcrumbs .sep { color: rgba(255,255,255,0.30); margin: 0 6px; }

.page-hero .eyebrow {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #00c950 !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 10px !important;
}
.page-hero .eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #00c950;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(0,201,80,0.20);
}

.page-hero h1 {
  color: #ffffff !important;
  font-family: 'Asul', sans-serif !important;
  font-size: clamp(28px, 3.8vw, 46px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 auto 14px !important;
  max-width: 900px;
  text-transform: none !important;
}
.page-hero h1 .grad,
.page-hero h1 .yellow {
  background: none !important;
  color: #00c950 !important;
  -webkit-text-fill-color: #00c950 !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}
.page-hero .subtitle,
.page-hero p.lead,
.page-hero .lede {
  color: rgba(255,255,255,0.85) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: 780px;
  margin: 0 auto !important;
}
.page-hero .flag-inline { vertical-align: -4px; margin: 0 6px; width: 32px; height: 22px; border-radius: 3px; }

/* Article-hero (individual news/guide/banking posts) — light theme with left-aligned editorial look */
.article-hero {
  background: #ffffff !important;
  padding: 30px 0 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.article-hero h1 {
  color: #0f172b !important;
  font-family: 'Asul', sans-serif !important;
  font-size: clamp(24px, 3.2vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 8px 0 12px !important;
  text-transform: none !important;
}
.article-hero .kicker {
  color: #00c950 !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: inline-block;
  margin-bottom: 10px !important;
}
.article-hero .lede {
  color: #45556c !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
.article-hero .article-meta { color: #45556c !important; font-size: 13px !important; }
.article-hero .article-meta .meta-author { color: #0f172b !important; font-weight: 700; }

/* Blog card tags — green in casinomeister palette (was yellow palmy) */
.blog-card .tag,
.blog-card .tag.guide,
.blog-card .tag.news,
.blog-card .tag.banking,
.article-hero .tag {
  background: #00c950 !important;
  color: #ffffff !important;
  border: none !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 10.5px !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

/* Blog card text colors — force light theme */
.blog-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #0f172b !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
  overflow: hidden;
}
.blog-card h3 { color: #0f172b !important; font-family: 'Asul', sans-serif !important; font-weight: 700 !important; }
.blog-card p { color: #45556c !important; }
.blog-card .blog-meta { color: #94a3b8 !important; }
.blog-card:hover { border-color: #00c950 !important; box-shadow: 0 6px 16px rgba(15,23,42,0.10) !important; transform: translateY(-2px); }

@media (max-width: 720px) {
  .page-hero { padding: 26px 0 22px !important; }
  .page-hero h1 { font-size: 22px !important; }
  .page-hero .subtitle, .page-hero p.lead { font-size: 14px !important; }
  .page-hero .breadcrumbs { font-size: 12px !important; }
  .article-hero { padding: 20px 0 14px !important; }
  .article-hero h1 { font-size: 22px !important; }
}

/* =====================================================
   FIX PACK v10 — Demo games light theme (Plinko, Blackjack, Lucky Slots, Mini Roulette, Baccarat)
   ===================================================== */

/* Game layout — 2col grid main + sidebar, light theme */
.game-layout {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 24px !important;
  align-items: start;
  margin: 20px 0 40px;
}
@media (max-width: 900px) {
  .game-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* Game cab (the board container) — clean white with slate border */
.game-cab {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
  overflow: hidden;
}

/* Game controls bar */
.game-controls {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
  align-items: center !important;
}
.game-controls label {
  color: #45556c !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.game-controls select,
.game-controls input,
.game-controls button {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  color: #0f172b !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 13.5px !important;
  cursor: pointer;
}
.game-controls button {
  background: #00c950 !important;
  color: #ffffff !important;
  border-color: #00c950 !important;
  font-weight: 700 !important;
}
.game-controls button:hover { background: #00a840 !important; }

/* Game messages */
.game-msg, .game-note {
  color: #45556c !important;
  background: #f8fafc !important;
  border: 1px dashed #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  font-size: 13.5px !important;
}

/* Sidebar cards (Rules, "Take it to real money" CTA) — light theme */
.pu-sidebar, .game-sidebar, .demo-sidebar {
  display: flex; flex-direction: column; gap: 14px;
}
.pu-sidebar > *, .game-sidebar > *, .demo-sidebar > * {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 18px !important;
  color: #0f172b !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}
.pu-sidebar h3, .game-sidebar h3, .demo-sidebar h3 {
  color: #0f172b !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #00c950 !important;
  display: inline-block;
}
.pu-sidebar dl, .game-sidebar dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.pu-sidebar dt, .game-sidebar dt { color: #45556c !important; font-size: 13px !important; }
.pu-sidebar dd, .game-sidebar dd { color: #0f172b !important; font-size: 13px !important; font-weight: 700 !important; margin: 0; }
.pu-sidebar ul, .game-sidebar ul { list-style: none; padding: 0; margin: 0; }
.pu-sidebar li, .game-sidebar li { padding: 4px 0; color: #0f172b !important; font-size: 13.5px; }
.pu-sidebar p, .game-sidebar p { color: #45556c !important; font-size: 13.5px !important; line-height: 1.5 !important; }

/* Sidebar "Take it to real money" CTA — casinomeister green button */
.pu-sidebar a.btn, .game-sidebar a.btn,
.pu-sidebar a.btn-primary, .game-sidebar a.btn-primary,
.pu-sidebar a[href*="/best/"], .game-sidebar a[href*="/best/"] {
  display: inline-block !important;
  padding: 10px 20px !important;
  background: #00c950 !important;
  color: #ffffff !important;
  border: 1px solid #00c950 !important;
  border-radius: 6px !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 13px !important;
  margin-top: 10px !important;
  transition: background 0.15s;
}
.pu-sidebar a.btn:hover, .game-sidebar a.btn:hover,
.pu-sidebar a[href*="/best/"]:hover { background: #00a840 !important; }

/* Multiplier chips row (Plinko payoutchips) — casinomeister style */
.chip-row, .payout-chips, .plinko-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  padding: 14px 12px;
  background: #f8fafc;
  border-radius: 8px;
  margin-top: 12px;
}
.chip-row > *, .payout-chips > *, .plinko-chips > * {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 6px 10px;
  background: #00c950 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border: none !important;
}

/* Plinko peg board — force clean navy field with white pegs */
.game-cab .board, .game-cab .plinko-board, .game-cab canvas {
  background: linear-gradient(180deg, #0f172a 0%, #020618 100%) !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
}

/* "Take it to real money" callout box specifically */
.callout, .demo-callout {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid #00c950 !important;
  border-radius: 8px !important;
  color: #0f172b !important;
  padding: 16px 18px !important;
  margin: 14px 0 !important;
}
.callout strong, .demo-callout strong { color: #0f172b !important; }
.callout a, .demo-callout a { color: #00c950 !important; font-weight: 700; }

/* Cell (Plinko dot) */
.game-cab .cell { background: rgba(255,255,255,0.06); }
.game-cab .cell.win { background: rgba(0,201,80,0.30); }

/* Author avatars — consistent site-wide */
.author-avatar, .meta-avatar {
  border-radius: 50% !important;
  border: 3px solid #f8fafc !important;
  box-shadow: 0 2px 6px rgba(15,23,42,0.10) !important;
  object-fit: cover !important;
}
.author-box .author-avatar { width: 90px !important; height: 90px !important; }
.article-meta .meta-avatar { width: 40px !important; height: 40px !important; border-width: 2px !important; }

/* Author box light theme (was dark navy palmy) */
.author-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}
.author-box .author-name { color: #0f172b !important; font-family: 'Asul', sans-serif !important; font-weight: 700 !important; margin: 0 !important; }
.author-box .author-role { color: #00c950 !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.author-box .author-eyebrow { color: #45556c !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700; }
.author-box .author-bio { color: #45556c !important; font-size: 14px !important; line-height: 1.55 !important; margin-top: 8px !important; }
@media (max-width: 600px) {
  .author-box { flex-direction: column !important; align-items: center !important; text-align: center; }
}

/* === FINAL CLEANUP: single rating + stars-only metrics === */
/* Hide any residual user rating span (person icon + score) */
.rating-user, .casino-card .rating-user, span.rating-user { display: none !important; }
.rating-user::before, .casino-card .rating-user::before { display: none !important; content: '' !important; }

/* Stars-only metrics: no text value, right-aligned pretty layout */
.casino-features-payout .feat-value {
  text-align: right !important;
  font-size: 0 !important;   /* kill any residual whitespace text nodes */
}
.casino-features-payout .feat-value .metric-stars {
  margin-left: 0 !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
}
.casino-features-payout li {
  grid-template-columns: 1fr auto !important;
  padding: 6px 0 !important;
  border-bottom: 1px dashed var(--border) !important;
}
.casino-features-payout li:last-child { border-bottom: none !important; }
.casino-features-payout .feat-label {
  color: var(--text-dim) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}
@media (max-width: 720px) {
  .casino-features-payout li { grid-template-columns: 1fr auto !important; }
  .casino-features-payout .feat-label { grid-column: 1 !important; }
  .casino-features-payout .feat-value { grid-column: 2 !important; text-align: right !important; }
}

/* === FIX PACK v10: Market subnav redesign + mobile casino card overlap === */

/* -- Market subnav: casinomeister-tab style with green accent underline -- */
.market-subnav {
  background: #ffffff !important;
  border-top: none !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding: 0 !important;
  position: relative;
}
.market-subnav .container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.market-subnav .subnav-scroll {
  display: flex !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
  align-items: stretch;
}
.market-subnav .subnav-scroll::-webkit-scrollbar { display: none !important; height: 0 !important; }
.market-subnav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  padding: 14px 20px !important;
  background: transparent !important;
  color: #475569 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  font-family: 'Asul', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  position: relative;
  margin-bottom: -2px; /* overlap parent border */
}
.market-subnav a:hover {
  color: #0f172a !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,201,80,0.05) 100%) !important;
  border-bottom-color: rgba(0,201,80,0.5) !important;
}
.market-subnav a.active,
.market-subnav a.is-active {
  color: #0f172a !important;
  background: transparent !important;
  border-bottom-color: #00c950 !important;
  font-weight: 700 !important;
}
@media (max-width: 720px) {
  .market-subnav a { padding: 12px 14px !important; font-size: 13px !important; }
  .market-subnav .container { padding-left: 6px !important; padding-right: 6px !important; }
}

/* Old pt-pill kill (in case any legacy templates remain) */
.pt-subnav { display: none !important; }

/* -- Mobile casino card: fix features + payout metrics stack overlap -- */
@media (max-width: 900px) {
  .casino-card,
  .casino-list .casino-card,
  section .casino-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-areas: none !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 44px 16px 16px !important;
    position: relative;
  }
  .casino-card .casino-thumb {
    grid-area: auto !important;
    aspect-ratio: 3/2 !important;
    max-width: 180px;
    margin: 0 auto !important;
  }
  .casino-card .casino-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .casino-card .casino-info h3 {
    grid-area: auto !important;
    font-size: 17px !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .casino-card .casino-info .rating {
    grid-area: auto !important;
    display: inline-block !important;
    margin: 2px 0 !important;
    justify-self: center !important;
  }
  .casino-card .casino-info .oc-score-desc {
    grid-area: auto !important;
    margin: 0 !important;
    justify-self: center !important;
  }
  /* Features list — full width, no grid area overlap */
  .casino-card .casino-features,
  .casino-card .casino-info .casino-features {
    grid-area: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 340px;
    margin: 6px auto 0 !important;
    text-align: left !important;
    align-items: stretch !important;
    align-self: auto !important;
  }
  .casino-card .casino-features li {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* Payout metrics — separate section BELOW features, own row */
  .casino-card .casino-features-payout,
  .casino-card .casino-info .casino-features-payout {
    grid-area: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 340px;
    margin: 4px auto 0 !important;
    padding: 8px 0 4px !important;
    border-top: 1px dashed #e2e8f0 !important;
    text-align: left !important;
  }
  .casino-card .casino-features-payout li {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "label stars" !important;
    align-items: center !important;
    padding: 5px 2px !important;
    border-bottom: 1px dashed #eef2f6 !important;
    font-size: 12px !important;
  }
  .casino-card .casino-features-payout li:last-child { border-bottom: none !important; }
  .casino-card .casino-features-payout li::before { display: none !important; content: none !important; }
  .casino-card .casino-features-payout .feat-label {
    grid-area: label !important;
    grid-column: 1 !important;
    color: #64748b !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .casino-card .casino-features-payout .feat-value {
    grid-area: stars !important;
    grid-column: 2 !important;
    text-align: right !important;
    justify-self: end !important;
    font-size: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .casino-card .casino-features-payout .feat-value .metric-stars {
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    margin-left: 0 !important;
  }
  .casino-card .casino-bonus {
    text-align: center !important;
    width: 100% !important;
    max-width: 340px;
    margin: 4px auto 0 !important;
  }
  .casino-card .casino-cta {
    grid-area: auto !important;
    width: 100% !important;
    max-width: 340px;
    margin: 0 auto !important;
  }
  .casino-card .casino-cta .btn {
    width: 100% !important;
    display: block !important;
  }
  .casino-card .rank-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 4px !important;
  }
  /* Hide any payid badge that might overlap on mobile */
  .casino-card .payid-badge { position: static !important; margin: 8px auto !important; }
}

/* === FIX PACK v11: Casino thumbnail background for transparent logos === */
/* Applied site-wide across all market list pages so light/transparent logos
   (A Big Candy, etc.) read cleanly. Dark navy panel centers the logo nicely. */
.casino-card .casino-thumb,
.casino-list .casino-card .casino-thumb,
section .casino-card .casino-thumb {
  background: linear-gradient(135deg, #1a2340 0%, #0f172a 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(15,23,42,0.08) !important;
  position: relative;
  overflow: hidden;
}
.casino-card .casino-thumb img,
.casino-list .casino-card .casino-thumb img,
section .casino-card .casino-thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
/* Subtle sheen so the tile doesn't feel flat */
.casino-card .casino-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 30% 15%, rgba(255,255,255,0.06), transparent 55%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .casino-card .casino-thumb {
    aspect-ratio: 3/2 !important;
    max-width: 200px !important;
    padding: 16px !important;
  }
}

/* === FIX PACK v12: single Read-more toggle + better thumb centering + kill /best/ === */
/* Hide any leftover legacy Read more DOM (in case old .lede-toggle / .lead-more-btn / .clamp-toggle appear in old HTML) */
.lede-toggle,
.lead-more-btn,
.clamp-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important; height: 0 !important;
  overflow: hidden !important;
}
/* The one true toggle */
.mobile-lede-toggle {
  display: none !important;
}
@media (max-width: 720px) {
  .mobile-lede-toggle {
    display: inline-block !important;
    margin: 10px 0 6px !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #00c950 !important;
    font-family: 'Asul', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-align: left !important;
    z-index: 3 !important;
    position: relative !important;
  }
  /* Make sure the clamped paragraph fully hides overflowed text */
  .mobile-lede-wrap {
    display: block !important;
    position: relative !important;
    margin-bottom: 6px !important;
  }
  .mobile-lede-wrap:not(.expanded) .cm-desc,
  .mobile-lede-wrap:not(.expanded) p.lead,
  .mobile-lede-wrap:not(.expanded) p.lede {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: 4.6em !important;
  }
  .mobile-lede-wrap.expanded .cm-desc,
  .mobile-lede-wrap.expanded p.lead,
  .mobile-lede-wrap.expanded p.lede {
    display: block !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Casino thumb centering — flex + strict center, no margin-auto conflict */
.casino-card .casino-thumb,
.casino-list .casino-card .casino-thumb,
section .casino-card .casino-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  place-items: center !important;
}
.casino-card .casino-thumb img,
.casino-list .casino-card .casino-thumb img,
section .casino-card .casino-thumb img {
  margin: 0 !important;
  vertical-align: middle !important;
  max-width: 88% !important;
  max-height: 80% !important;
}

/* === FIX PACK v13: contrast/visibility fixes site-wide === */

/* Game panel top bar — white bg needs DARK text, not white */
.game-cab { position: relative; }
.game-cab .game-topbar { position: relative; z-index: 2; }
.game-cab .game-title,
.game-cab .game-title span:not(.badge) {
  color: #0f172a !important;
  text-shadow: none !important;
}
.game-cab .game-title .badge {
  background: #00c950 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 800 !important;
}
.game-cab .hud { gap: 10px !important; }
.game-cab .hud .cell {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}
.game-cab .hud .cell .l {
  color: #64748b !important;
  font-size: 9.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.game-cab .hud .cell .v {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
}
.game-cab .hud .cell.win {
  background: rgba(0,201,80,0.10) !important;
  border-color: rgba(0,201,80,0.30) !important;
}
.game-cab .hud .cell.win .l { color: #0a7d34 !important; }
.game-cab .hud .cell.win .v { color: #007a2f !important; }
/* Kill the orange overlay on the light theme */
.game-cab::before { display: none !important; content: none !important; }
/* Board plate stays dark; ensure canvas remains dark */
.game-cab .plinko-stage,
.game-cab canvas {
  background: #0f172a !important;
  border-radius: 8px !important;
}

/* Rail cards (side panels on game pages) — dark navy bg needs LIGHT text everywhere */
.rail-card {
  background: linear-gradient(170deg, #1a2340, #0f172a) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #e2e8f0 !important;
}
.rail-card h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  font-size: 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding-bottom: 8px;
}
.rail-card ul { color: #e2e8f0 !important; }
.rail-card li {
  color: #e2e8f0 !important;
  border-bottom: 1px dashed rgba(255,255,255,0.10) !important;
}
.rail-card li:last-child { border-bottom: 0 !important; }
.rail-card li b, .rail-card li strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.rail-card p {
  color: #cbd5e1 !important;
}

/* Game controls row — light theme */
.game-controls .gbtn,
.game-cab .gbtn {
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.game-cab .gbtn.gbtn-primary,
.game-controls .gbtn.gbtn-primary {
  background: #00c950 !important;
  color: #ffffff !important;
  border: 0 !important;
}
.game-cab .gbtn.gbtn-ghost,
.game-controls .gbtn.gbtn-ghost {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.game-cab .gbtn.gbtn-ghost.active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}
.game-cab .gbtn.gbtn-round {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.game-cab .game-msg,
.game-cab .game-note {
  color: #64748b !important;
}

/* Universal contrast guard — dark-bg elements ALWAYS get light text */
[style*="background:#0f172a"], [style*="background: #0f172a"],
[style*="background:#1a2340"], [style*="background: #1a2340"],
[style*="background:#111827"], [style*="background: #111827"] {
  color: #e2e8f0 !important;
}

/* Tables — ensure body text is dark on white and headers pop */
table th {
  color: #0f172a !important;
  background: #f8fafc !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
table td {
  color: #0f172a !important;
}
table tbody tr:nth-child(even) td {
  background: #fafbfc !important;
}
/* Dark-themed tables (if any) */
.dark-table th,
.dark-panel table th {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.dark-table td,
.dark-panel table td {
  color: #e2e8f0 !important;
}

/* Any inline dark-panel div followed by heading */
.dark-panel, .stat-panel, .cta-dark {
  background: linear-gradient(170deg, #1a2340, #0f172a) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
}
.dark-panel h1, .dark-panel h2, .dark-panel h3, .dark-panel h4,
.stat-panel h1, .stat-panel h2, .stat-panel h3, .stat-panel h4,
.cta-dark h1, .cta-dark h2, .cta-dark h3, .cta-dark h4 {
  color: #ffffff !important;
}

/* Ensure any inline "color:#c4c7e4;" on rail card children still reads */
.rail-card [style*="color:#c4c7e4"], .rail-card [style*="color: #c4c7e4"] {
  color: #cbd5e1 !important;
}

/* === FIX PACK v14: Roulette + baccarat + blackjack chips visible on white game-cab === */

/* Mini roulette chips — light-theme, site palette (green/navy) */
.game-cab .rl-chip,
.rl-board .rl-chip,
.rl-numrow .rl-chip {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 12px 8px !important;
  font-family: 'Asul', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
}
.game-cab .rl-chip:hover,
.rl-board .rl-chip:hover,
.rl-numrow .rl-chip:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
.game-cab .rl-chip.sel,
.rl-board .rl-chip.sel,
.rl-numrow .rl-chip.sel {
  background: #00c950 !important;
  color: #ffffff !important;
  border-color: #00a840 !important;
  box-shadow: 0 4px 12px rgba(0,201,80,0.30) !important;
}
.game-cab .rl-chip.red,
.rl-board .rl-chip.red {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}
.game-cab .rl-chip.red.sel,
.rl-board .rl-chip.red.sel {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #00c950 !important;
  box-shadow: 0 0 0 3px rgba(0,201,80,0.30) !important;
}
.game-cab .rl-chip.black,
.rl-board .rl-chip.black {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}
.game-cab .rl-chip.black.sel,
.rl-board .rl-chip.black.sel {
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: #00c950 !important;
  box-shadow: 0 0 0 3px rgba(0,201,80,0.30) !important;
}
/* Number input in roulette */
.game-cab .rl-numin,
.rl-numrow .rl-numin {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 11px !important;
  font-weight: 700 !important;
}
.game-cab .rl-numin:focus,
.rl-numrow .rl-numin:focus {
  outline: none !important;
  border-color: #00c950 !important;
  box-shadow: 0 0 0 3px rgba(0,201,80,0.15) !important;
}
.game-cab .rl-result,
.rl-stage .rl-result {
  color: #0f172a !important;
}
/* Wheel hub — keep dark for wheel context */
.game-cab .rl-hub {
  color: #ffffff !important;
}

/* Baccarat bet spots — site palette */
.game-cab .bcc-bet-chip,
.bcc-bet-spot .bcc-bet-chip {
  background: #00c950 !important;
  color: #ffffff !important;
}
.game-cab .bcc-bet-spot,
.bcc-bet-spot {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.game-cab .bcc-bet-spot.sel,
.bcc-bet-spot.sel {
  border-color: #00c950 !important;
  box-shadow: 0 0 0 3px rgba(0,201,80,0.20) !important;
}

/* Any lingering orange/gold "sel" state -> green */
.game-cab [class*="chip"].sel,
.game-cab [class*="btn"].sel {
  background: #00c950 !important;
  color: #ffffff !important;
  border-color: #00a840 !important;
}

/* === FIX PACK v15: Center article hero (news / guides / banking) === */
.article-hero .article-hero-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  gap: 22px !important;
}
.article-hero .article-hero-text {
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.article-hero .article-hero-text .kicker,
.article-hero .article-hero-text .tag {
  display: inline-block !important;
  margin: 0 auto 12px !important;
}
.article-hero .article-hero-text h1 {
  text-align: center !important;
  margin: 0 auto 14px !important;
}
.article-hero .article-hero-text .lede,
.article-hero .article-hero-text p.lede {
  text-align: center !important;
  margin: 0 auto 18px !important;
  max-width: 720px !important;
}
.article-hero .article-hero-text .article-meta {
  justify-content: center !important;
  margin: 0 auto !important;
}
.article-hero .article-hero-img {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.article-hero .article-hero-img img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 24px rgba(15,23,42,0.10);
}
@media (max-width: 720px) {
  .article-hero .article-hero-inner { gap: 16px !important; padding: 0 4px !important; }
  .article-hero .article-hero-img img { max-width: 100% !important; border-radius: 8px !important; }
}

/* === FIX PACK v16: casino thumb background — light-first with per-brand dark override === */
/* Most casino brand logos are DARK on transparent. Give them a light neutral tile
   so they read clearly (VipLuck FR, LuckyOnes, Rolling Slots, most brands).
   White/transparent-text logos (A Big Candy, etc.) get an inverted dark tile via
   per-image override at the end. */
.casino-card .casino-thumb,
.casino-list .casino-card .casino-thumb,
section .casino-card .casino-thumb {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60), 0 2px 6px rgba(15,23,42,0.06) !important;
}
.casino-card .casino-thumb::before {
  background: radial-gradient(120% 80% at 30% 15%, rgba(15,23,42,0.03), transparent 55%) !important;
}
.casino-card .casino-thumb img,
.casino-list .casino-card .casino-thumb img,
section .casino-card .casino-thumb img {
  filter: none !important;
}

/* Per-brand: light/white logos need DARK tile — invert the thumb background */
.casino-card .casino-thumb:has(img[src*="abigcandy"]),
.casino-card .casino-thumb:has(img[src*="a-big-candy"]),
.casino-card .casino-thumb:has(img[src*="luckydreams"]),
.casino-card .casino-thumb:has(img[src*="wanted-win"]),
.casino-card .casino-thumb:has(img[src*="wantedwin"]),
.casino-card .casino-thumb:has(img[src*="wild-tokyo"]),
.casino-card .casino-thumb:has(img[src*="joka-casino"]),
.casino-card .casino-thumb:has(img[src*="novajackpot"]),
.casino-card .casino-thumb:has(img[src*="need-for-spin"]),
.casino-card .casino-thumb:has(img[src*="rolling-slots"]),
.casino-card .casino-thumb:has(img[src*="mega-medusa"]),
.casino-card .casino-thumb:has(img[src*="richard-casino"]),
.casino-card .casino-thumb:has(img[src*="stay"]),
.casino-card .casino-thumb:has(img[src*="spinhub"]),
.casino-card .casino-thumb:has(img[src*="froggybet"]),
.casino-card .casino-thumb:has(img[src*="lucky7"]),
.casino-card .casino-thumb:has(img[src*="mystake"]),
.casino-card .casino-thumb:has(img[src*="kumobet"]),
.casino-card .casino-thumb:has(img[src*="mino-casino"]),
.casino-card .casino-thumb:has(img[src*="betya"]),
.casino-card .casino-thumb:has(img[src*="lysa"]),
.casino-card .casino-thumb:has(img[src*="lukki"]),
.casino-card .casino-thumb:has(img[src*="vegasnow"]) {
  background: linear-gradient(135deg, #1a2340 0%, #0f172a 100%) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(15,23,42,0.15) !important;
}
.casino-card .casino-thumb:has(img[src*="abigcandy"]) img,
.casino-card .casino-thumb:has(img[src*="luckydreams"]) img,
.casino-card .casino-thumb:has(img[src*="wild-tokyo"]) img,
.casino-card .casino-thumb:has(img[src*="rolling-slots"]) img,
.casino-card .casino-thumb:has(img[src*="mega-medusa"]) img,
.casino-card .casino-thumb:has(img[src*="richard-casino"]) img,
.casino-card .casino-thumb:has(img[src*="vegasnow"]) img {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* === FIX PACK v17: RESTORE original logo sizing + expand dark-bg brand list === */
/* Undo all previous size constraints — logos back to full-size fill of tile */
.casino-card .casino-thumb,
.casino-list .casino-card .casino-thumb,
section .casino-card .casino-thumb {
  padding: 8px !important;
  aspect-ratio: 4/3 !important;
}
.casino-card .casino-thumb img,
.casino-list .casino-card .casino-thumb img,
section .casino-card .casino-thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
  filter: none !important;
  vertical-align: middle !important;
}
@media (max-width: 900px) {
  .casino-card .casino-thumb {
    aspect-ratio: 3/2 !important;
    max-width: 200px !important;
    padding: 10px !important;
  }
}

/* Expand dark-bg brand list — DiceSpin + NL brands + earlier ones */
.casino-card .casino-thumb:has(img[src*="dicespin"]),
.casino-card .casino-thumb:has(img[src*="spinorhino"]),
.casino-card .casino-thumb:has(img[src*="spinalto"]),
.casino-card .casino-thumb:has(img[src*="wintari"]),
.casino-card .casino-thumb:has(img[src*="oha-casino"]),
.casino-card .casino-thumb:has(img[src*="reel-raven"]),
.casino-card .casino-thumb:has(img[src*="21bets"]),
.casino-card .casino-thumb:has(img[src*="7abet"]),
.casino-card .casino-thumb:has(img[src*="evobet"]),
.casino-card .casino-thumb:has(img[src*="frostybet"]),
.casino-card .casino-thumb:has(img[src*="gladiatorsbet"]),
.casino-card .casino-thumb:has(img[src*="lolo-casino"]),
.casino-card .casino-thumb:has(img[src*="londoneye"]),
.casino-card .casino-thumb:has(img[src*="lucky-wands"]),
.casino-card .casino-thumb:has(img[src*="moana-casino"]),
.casino-card .casino-thumb:has(img[src*="piratepots"]),
.casino-card .casino-thumb:has(img[src*="roibets"]),
.casino-card .casino-thumb:has(img[src*="spinlander"]),
.casino-card .casino-thumb:has(img[src*="spintexas"]),
.casino-card .casino-thumb:has(img[src*="tik-tak"]),
.casino-card .casino-thumb:has(img[src*="th-finnbet"]),
.casino-card .casino-thumb:has(img[src*="zoccer"]),
.casino-card .casino-thumb:has(img[src*="spinny-casino"]) {
  background: linear-gradient(135deg, #1a2340 0%, #0f172a 100%) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(15,23,42,0.15) !important;
}

/* === FIX PACK v18: extra brands for dark thumb bg (LuckyOnes AU) === */
.casino-card .casino-thumb:has(img[src*="luckyones"]),
.casino-card .casino-thumb:has(img[src*="lucky-ones"]),
.casino-card .casino-thumb:has(img[src*="luckyones-casino-australia"]) {
  background: linear-gradient(135deg, #1a2340 0%, #0f172a 100%) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(15,23,42,0.15) !important;
}

/* === FIX PACK v19: article/post images — show FULL image (no crop) === */
.article-hero .article-hero-img img,
.article-hero-img img {
  object-fit: contain !important;
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  max-height: 480px !important;
  background: #0f172a !important;
  border-radius: 14px !important;
}
/* News / Guides / Banking listing card thumbnails */
.cm-news-item img,
.pu-news-card img,
.news-item img,
.blog-card img,
.guide-card img,
.card-thumb img,
.pu-guide-card img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3/2 !important;
  background: #0f172a !important;
}
/* Ensure the listing card thumb container doesn't chop */
.cm-news-item .clc-thumb,
.pu-news-card .thumb,
.news-item .thumb,
.blog-card .thumb {
  overflow: hidden !important;
}

/* === FIX PACK v20: Normalize article-body typography (strong / li / ol) === */
/* Root cause fix: something in the cascade was rendering the first <strong>
   inside <ol><li> at a larger visual size. Lock all inline text down. */
.article-body,
.article-body p,
.article-body li,
.article-body ol,
.article-body ul {
  font-size: 1.02rem !important;
  line-height: 1.72 !important;
  font-family: 'Asul', 'Inter', sans-serif !important;
}
.article-body strong,
.article-body b,
.article-body li strong,
.article-body li b,
.article-body ol li strong,
.article-body ul li strong {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.article-body ol,
.article-body ul {
  padding-left: 1.5em !important;
  margin: 12px 0 18px !important;
}
.article-body ol > li,
.article-body ul > li {
  margin-bottom: 8px !important;
  padding: 0 !important;
}
/* Mobile: same rule, just smaller base */
@media (max-width: 720px) {
  .article-body,
  .article-body p,
  .article-body li,
  .article-body ol,
  .article-body ul {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
  }
}

/* === FIX PACK v21: FASTER live wins ticker === */
.cm-live-wins .clw-track > * { animation: clwScroll 7s linear infinite !important; }
@media (max-width: 720px) {
  .cm-live-wins .clw-track > * { animation-duration: 5s !important; }
}

/* === FIX PACK v22: max-specificity live wins speed override === */
html body .cm-live-wins .clw-track > *,
html body section .cm-live-wins .clw-track > *,
html body section.content .cm-live-wins .clw-track > * {
  animation: clwScroll 6s linear infinite !important;
  animation-duration: 6s !important;
}
@media (max-width: 720px) {
  html body .cm-live-wins .clw-track > *,
  html body section .cm-live-wins .clw-track > *,
  html body section.content .cm-live-wins .clw-track > * {
    animation-duration: 4s !important;
  }
}

/* --- Mobile above-the-fold: shrink hero padding so list + CTA are visible --- */
@media (max-width: 720px) {
  .hero { padding: 20px 0 14px !important; }
  .hero h1 { font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important; margin-bottom: 10px !important; line-height: 1.02 !important; }
  .hero p.subtitle { font-size: 0.98rem !important; margin: 0 auto 14px !important; }
  .hero .eyebrow, .eyebrow { margin-bottom: 10px !important; }
  .page-hero { padding: 16px 0 12px !important; }
  .page-hero h1 { font-size: clamp(1.5rem, 5.5vw, 2.1rem) !important; margin-bottom: 8px !important; line-height: 1.08 !important; }
  .page-hero .lead { font-size: 0.95rem !important; line-height: 1.42 !important; margin-bottom: 6px !important; }
  .article-hero { padding: 16px 0 8px !important; }
  .pu-hero { padding: 18px 0 20px !important; }
}
@media (max-width: 560px) {
  .hero { padding: 14px 0 10px !important; }
  .page-hero { padding: 12px 0 8px !important; }
  .article-hero { padding: 12px 0 6px !important; }
  .pu-hero { padding: 14px 0 16px !important; }
}

/* --- NEW badge on casino cards (BE top 3) - positioned over the thumb --- */
.casino-thumb { position: relative; }
.casino-card .new-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: linear-gradient(135deg, #ff8a3d 0%, #ff5e3d 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  z-index: 10;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(255, 94, 61, 0.4);
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .casino-card .new-badge {
    font-size: 8.5px;
    padding: 1px 6px;
    top: 4px;
    right: 4px;
    letter-spacing: 0.05em;
    max-width: calc(100% - 8px);
  }
}

/* =====================================================================
   KEIRA MOBILE ABOVE-THE-FOLD ULTRA-COMPACT (v26)
   Pushes the first operator's "Play now" CTA inside the first viewport
   of every market page, including small devices (iPhone SE, 667 px).
   Works with the existing flex casinomeister stack set at <=900 px.
   ===================================================================== */

/* -- Market subnav: tighter on small phones -- */
@media (max-width: 720px) {
  .market-subnav .subnav-scroll {
    padding: 5px 0 !important;
    gap: 3px !important;
  }
  .market-subnav a {
    padding: 5px 11px !important;
    font-size: 11.5px !important;
  }
}

/* -- Hero compact for lesson-layout market pages -- */
@media (max-width: 720px) {
  .lesson-layout .page-hero { padding: 4px 0 2px !important; }
  .lesson-layout .page-hero .breadcrumbs {
    margin-bottom: 2px !important;
    font-size: 10.5px !important;
  }
  .lesson-layout .page-hero h1 {
    font-size: 1.15rem !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    margin-bottom: 4px !important;
  }
  .lesson-layout .page-hero h1 .flag-inline {
    width: 18px !important;
    height: 14px !important;
    vertical-align: -2px !important;
  }
  .lesson-layout .page-hero .lead {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
  }
  .mobile-lede-wrap { margin-bottom: 0 !important; }
  .mobile-lede-toggle {
    margin-top: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

/* On very narrow phones (<=400px) hide breadcrumbs to save 20px */
@media (max-width: 400px) {
  .lesson-layout .page-hero .breadcrumbs { display: none !important; }
}

/* -- List heading: tiny on mobile -- */
@media (max-width: 720px) {
  .lesson-layout .list-heading {
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    margin: 6px 0 4px !important;
    padding-bottom: 4px !important;
  }
  .lesson-layout .list-heading::after {
    height: 2px !important;
    width: 36px !important;
  }
}

/* -- Casino list wrapper: tight padding -- */
@media (max-width: 720px) {
  .casino-list {
    padding: 6px !important;
    margin: 6px 0 18px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
}

/* -- Casino card: shrink thumb, name, rating, bonus; reorder CTA above features -- */
@media (max-width: 720px) {
  .casino-list .casino-card,
  section .casino-card {
    padding: 24px 10px 10px !important;
    gap: 2px !important;
  }
  .casino-list .casino-card .casino-thumb,
  section .casino-card .casino-thumb {
    max-width: 90px !important;
    aspect-ratio: 16/9 !important;
    margin: 0 auto !important;
    padding: 4px !important;
  }
  .casino-list .casino-card .casino-info,
  section .casino-card .casino-info {
    display: contents !important;
  }
  /* Visual order on narrow screens: thumb, name, rating, bonus, cta, features */
  .casino-list .casino-card .casino-thumb,
  section .casino-card .casino-thumb { order: 1 !important; }
  .casino-list .casino-card .casino-info h3,
  section .casino-card .casino-info h3 {
    order: 2 !important;
    font-size: 0.98rem !important;
    line-height: 1.15 !important;
    margin: 2px 0 0 !important;
  }
  .casino-list .casino-card .casino-info .rating,
  .casino-list .casino-card .casino-info .rating-row,
  section .casino-card .casino-info .rating,
  section .casino-card .casino-info .rating-row {
    order: 3 !important;
    font-size: 11.5px !important;
    padding: 2px 7px !important;
    margin: 2px auto !important;
  }
  .casino-list .casino-card .casino-info .oc-score-desc,
  section .casino-card .casino-info .oc-score-desc {
    order: 4 !important;
    font-size: 11px !important;
    margin: 0 auto 2px !important;
  }
  .casino-list .casino-card .casino-bonus,
  section .casino-card .casino-bonus {
    order: 5 !important;
    margin: 4px auto 0 !important;
    padding: 6px 10px !important;
    text-align: center !important;
    max-width: 340px !important;
    width: 100% !important;
  }
  .casino-list .casino-card .bonus-label,
  section .casino-card .bonus-label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  .casino-list .casino-card .bonus-amount,
  section .casino-card .bonus-amount {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
  .casino-list .casino-card .casino-cta,
  section .casino-card .casino-cta {
    order: 6 !important;
    margin: 4px auto 0 !important;
    width: 100% !important;
    max-width: 340px !important;
  }
  .casino-list .casino-card .casino-cta .btn,
  section .casino-card .casino-cta .btn {
    padding: 11px 16px !important;
    font-size: 14.5px !important;
  }
  .casino-list .casino-card .payment-icons,
  section .casino-card .payment-icons {
    gap: 4px !important;
    margin-top: 2px !important;
  }
  .casino-list .casino-card .payment-icons img,
  section .casino-card .payment-icons img {
    height: 16px !important;
  }
  .casino-list .casino-card .casino-info .casino-features,
  section .casino-card .casino-info .casino-features {
    order: 7 !important;
    margin: 6px auto 0 !important;
  }
  .casino-list .casino-card .casino-info .casino-features-payout,
  section .casino-card .casino-info .casino-features-payout {
    order: 8 !important;
    margin: 4px auto 0 !important;
  }
  /* Rank badge: smaller to fit tighter card padding */
  .casino-list .casino-card .rank-badge,
  section .casino-card .rank-badge {
    top: 6px !important;
    left: 6px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
}

/* ============ SE featured cards: center thumb on mobile only ============ */
@media (max-width: 720px) {
  .featured-cards .feat-card { align-items: center; text-align: center; }
  .featured-cards .feat-thumb { margin-left: auto !important; margin-right: auto !important; }
  .featured-cards .feat-list { align-self: stretch; }
}

/* === Mobile NEW badge: pull out of the thumb (it overlapped the logo at
       the smaller 90px thumb) and anchor to the top-right of the whole card
       (opposite corner from the rank badge). Keeps the thumb clean. === */
@media (max-width: 720px) {
  .casino-list .casino-card .casino-thumb,
  section .casino-card .casino-thumb {
    position: static !important;
  }
  .casino-list .casino-card .new-badge,
  section .casino-card .new-badge {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 4 !important;
  }
}