.how-it-works .step-heading{margin:0 0 4px;color:var(--color-text)}

.pros-cons-section .pros-cons-heading{display:block;margin:0 0 4px;color:var(--color-on-contrast)}

:root {
  --color-accent: #10b981;
  --color-accent-2: #8b5cf6;
  --color-accent-contrast: #d4af37;
  --color-accent-soft: #1a4532;
  --color-bg: #0b0f14;
  --color-border: #3c483b;
  --color-border-strong: #526650;
  --color-contrast: #e9ece8;
  --color-danger: #b42318;
  --color-link: #10b981;
  --color-link-hover: #478fb5;
  --color-muted: #97a596;
  --color-on-accent: #f9faf9;
  --color-on-contrast: #192418;
  --color-success: #067647;
  --color-surface: #1d251c;
  --color-surface-elevated: #263026;
  --color-surface-inverted: #e9ece8;
  --color-text: #eff0ee;
  --color-text-inverse: #192418;
}

h1 { font-size: calc(2.25rem * var(--heading-scale, 1)); }

@media (min-width: 901px) {
  [data-96e23bz="v7kqn05"].wp-site-blocks { display: none !important; }
}

.is-style-header .nav-menu-item { list-style: none; }

.sidebar-primary .sidebar-dropdown-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-accent, currentColor);
}

.is-style-footer .footer-content {
  width: min(100%, 936px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) 1.6fr;
  grid-template-areas:
    "brand nav"
    "copy nav";
  gap: 10px 28px;
  align-items: start;
}

.is-style-footer .footer-extra {
  margin-top: 10px;
}

[data-tc48vre="vozlpzg"] [data-rn58ce5] { padding: 2px 8px; margin: -2px -8px; }

.breadcrumb-wrap [aria-current="page"]{padding:6px 10px;color:var(--color-accent);border-bottom:2px solid var(--color-accent);font-weight:700}

.ui-card-container .ui-card-heading{ margin: 0 0 8px; color: var(--color-text); }

@font-face {
  font-family: 'Lato';
  src: url('/assets/fonts/lato-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

html, body {
  font-family: var(--font-body);
}

.process-flow{display:grid;gap:0;border-left:3px solid var(--color-accent);min-width:0}

@media(max-width:700px){.game-category-grid{grid-template-columns:1fr}}

.wp-block-navigation__container .wp-block-details__summary .wp-block-navigation-item__content {
  font-weight: 500;
  font-size: 0.95rem;
  padding: 10px 8px;
  color: var(--color-muted);
}

.is-style-footer .footer-navigation a:hover {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  color: var(--color-accent);
}

/* v4 skin + soft tinted chips */
.side-nav-container .side-nav-container { padding: 8px 6px; }

/* bg_pill_active — rounded accent-soft pill fill on hover/active */
 [data-rn58ce5] {
  padding: 3px 10px; margin: -3px -10px; border-radius: 11px;
}

.features-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(160px, calc((100% - 3 * 17px) / 4)), 1fr));
  gap: 17px;
}

.is-style-header .has-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 936px);
  margin: 0 auto;
}

.sidebar-primary li:has(> ul) > a,
.sidebar-primary li:has(> ul) > span {
  flex: 1 1 auto;
  min-width: 0;
}

.media-entry-section .media-text-content{
  padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) calc(clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) + 10px);
  border: 1px dashed var(--color-border-strong); box-sizing: border-box; min-width: 0;
}

/* height:auto + HTML width/height attrs → browser reserves aspect-ratio (CLS). */
img { max-width: 100%; height: auto; }

.entry-content a { color: var(--color-accent); font-weight: 600; text-decoration: none; }

.features-grid .features-label{ margin: 0 0 8px; color: var(--color-text); }

@media(max-width:600px){.payout-section .payout-method{grid-template-columns:1fr}.payout-section .payout-info{grid-column:1;grid-row:1}.payout-section .payout-heading{grid-column:1;grid-row:2}}

/* Shared hero utilities only — width is owned by shell .contentMain > * */
.wp-block-cover,
.wp-block-group {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: normal;
}

.wp-block-group .hero-visual-area{
  position: absolute; inset: 0; z-index: 0;
  background: var(--hero-bg, none) center/cover no-repeat, var(--color-accent);
}

.author-card{display:grid;grid-template-columns:88px 1fr;gap:17px;padding:clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) calc(clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) + 6px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:11px;min-width:0;box-sizing:border-box;align-items:start}

.author-card .author-bio{color:var(--color-muted);font-size:.92rem}

.wp-block-navigation__container .menu-item.elementor-active > .wp-block-navigation-item__content {
  color: var(--color-accent);
  font-weight: 600;
}

.faq-accordion .faq-answer{ margin: 0; color: var(--color-muted); }

.is-style-header .sub-menu .nav-menu-link,
.is-style-header .sub-menu .nav-menu-text {
  width: 100%;
  justify-content: space-between;
}

.entry-section { padding: 28px 0 8px; }

.ui-card-container .ui-card-figure{ aspect-ratio: 16/10; overflow: hidden; margin: 0 0 10px; background: var(--color-border); max-width: 100%; min-width: 0; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  background: var(--color-bg, #f7f6f8);
  color: var(--color-text, #261a2c);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.review-carousel .review-card {
  margin: 0; padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px); background: var(--color-surface);
  border-radius: 11px; border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
}

.process-flow .process-step{border-bottom:1px dashed var(--color-border);padding:0 0 0 14px}

.faq-accordion .faq-entry{
  display: grid; grid-template-columns: 48px 1fr; gap: 8px 14px;
  padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) calc(clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) + 8px);
  background: var(--color-surface); border-top: 3px solid var(--color-accent-2);
  box-sizing: border-box; min-width: 0; counter-increment: fq;
}

.section-overview.is-footer-clear {
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

.event-timeline .event-heading{margin:0 0 6px;color:var(--color-text)}

.wp-block-columns{
  display: grid; grid-template-columns: 1fr 1fr; gap: 17px;
  padding: 12px 4px; box-sizing: border-box; min-width: 0;
}

@media (max-width: 800px) {
  .is-style-footer .footer-content {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "nav" "copy";
  }
  .is-style-footer .footer-navigation { justify-content: flex-start; }
  .is-style-footer .footer-extra-nav { columns: 2; }
}

.sidebar-primary li:has(> ul).is-menu-open > ul {
  display: grid;
}

/* nested header dropdowns open sideways instead of covering the parent menu */
.is-style-header .sub-menu .nav-menu-item {
  position: relative;
}

.pros-cons-section p{margin:0 0 12px;color:color-mix(in srgb,var(--color-on-contrast) 78%,transparent)}

.wp-block-navigation__container .wp-block-details.is-menu-open > .wp-block-details__summary {
  display: grid;
}

.payout-section{display:grid;gap:17px;min-width:0}

/* Section glance — only assembled when plan.section_glance is a visual variant.
   Active look is selected via html[data-section-overview="…"] set by glance JS. */

 .is-style-footer {
  --section-overview-slot: 4.75rem;
  padding-bottom: calc(var(--section-overview-slot) + env(safe-area-inset-bottom, 0px)) !important;
}

.brand-logo-section .brand-logo-item img{width:52px;height:52px;max-width:100%;object-fit:cover;border-radius:8px;opacity:.95;filter:none}

/* a nav too wide for the bar wraps onto a second row instead of scrolling */
.is-style-header .has-block > .elementor-block {
  flex-wrap: wrap;
  min-width: 0;
}

.ribbon-banner .ribbon-text{
  margin: 0; color: var(--color-accent-contrast); letter-spacing: 0.05em; font-size: 0.9rem;
}

.section-overview.e-visible {
  opacity: 1;
}

.media-entry-section .media-text-content div{ color: var(--color-muted); line-height: 1.65; }

.is-style-outline:hover, .wp-block-button__link:hover { filter: brightness(1.06); }

/* Hub pages with nested children are links, not accordion buttons — keep
   the nested list visible so mobile still shows every page. */
.wp-block-navigation__container li:not(.wp-block-details) > .wp-block-details__summary {
  display: grid;
}

[data-rfcxeal="v9yxjda"] .site-main-area > * {
  width: 100%;
  max-width: min(100%, 936px);
  min-width: 0;
  box-sizing: border-box;
}

.wp-block-navigation__container .wp-block-navigation-item__content:hover,
.wp-block-navigation__container .has-label:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.brand-logo-section .brand-logo-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:0;padding:14px 12px;background:color-mix(in srgb,var(--color-on-contrast) 8%,transparent);color:var(--color-on-contrast);font-size:.8rem;box-sizing:border-box;text-align:center}

.wp-block-columns .split-col-left,
.wp-block-columns .split-col-right{
  min-width: 0; box-sizing: border-box;
  padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) calc(clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) + 10px);
  background: var(--color-bg); border: 1px solid var(--color-border-strong);
  color: var(--color-muted); box-shadow: 10px 10px 0 var(--color-accent-soft);
}

:root {
  --font-heading: 'Sora', system-ui, sans-serif;
  --font-body: 'Lato', system-ui, sans-serif;
  --ui-radius: 11px;
  --btn-hover-transform: translateY(-2px);
  --btn-hover-filter: none;
  --btn-hover-shadow: 0 8px 20px color-mix(in srgb, var(--color-text) 18%, transparent);
  --text-scale: 0.96;
  --heading-scale: 1.06;
  --site-scale: 0.9;
}

/* header_inline_fixed — sticky mobile header + inline right burger. */
 .menu-toggle {
  order: 20;
  margin-left: auto;
}

.ui-card-container .ui-card-layout{
  display: flex; gap: 17px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 10px;
  box-sizing: border-box; min-width: 0;
}

@media (max-width: 900px) {
   header,
   [data-rfcxeal] > header,
   [data-rfcxeal] > div > header {
    position: sticky;
    top: 0;
    z-index: 55;
  }
}

a { color: var(--color-link, var(--color-accent)); }

.faq-mini-list .faq-mini-answer{font-size:.84rem;color:var(--color-muted);padding:0 0 8px}

@media(max-width:800px){.pros-cons-section{grid-template-columns:1fr}.pros-cons-section .pros-list-col{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--color-on-contrast) 22%,transparent)}}

.ui-card-container .ui-card-thumb{ display: block; width: 100%; height: 100%; object-fit: cover; }

.main-container,
.sidebar-column,
.e-con-inner,
.is-style-header,
.is-style-footer {
  min-width: 0;
  max-width: 100%;
}

/* Shared burger — sibling of [data-96e23bz] wrapper, so do not nest under [data-96e23bz].
   Default placement is fixed_right; plan.mobile_burger may override via
    rules in mobile_burger.css.tpl. */
/* The trigger's literal "☰" text never changed to indicate open state — mobile.js.tpl
   sets aria-expanded on click, but nothing consumed it visually. font-size:0 hides the
   raw glyph text node; ::after renders the actual glyph, swapped via [aria-expanded].
   Kept as ONE rule, not a separate font-size override rule — css_shuffle.py's rule
   splitter can reorder same-selector rules independently per site, and a second
   trigger rule setting only font-size sometimes shuffled to before this one, leaving
   the default font-size to win and both the raw glyph text and the ::after glyph
   visible at once. NOTE: never put a literal curly brace pair inside a CSS comment
   in this pack — shuffle_css_rules' rule splitter does not know it is inside a
   comment and treats the pair as a real rule boundary, splitting the comment apart
   and shuffling the pieces separately; any real rules that land between the split
   pieces then get silently deleted the next time client_cleanup's fingerprint-
   comment scrub runs, since it reads the reunited span as one big comment.
   Confirmed as the actual cause of a live missing stats-block rule on a real site
   — the same class of bug as the token-in-comment gotcha in VARIANT_PACK.md, one
   level more general since it is about the raw punctuation, not a specific token
   syntax. */
.menu-toggle {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  border: 0;
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
  padding: 11px 18px;
  border-radius: var(--ui-radius, 6px);
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.faq-mini-list .faq-mini-question::-webkit-details-marker{display:none}

/* Global block-798 decoration skins — selected via html[data-yjxbq4m="vxtc2us"].
   Applies to plain navigational links (header/sidebar/footer menu items)
   tagged with the plain [data-rn58ce5] marker attribute; [data-tc48vre] marks
   which chrome region the link lives in ("header" | "sidebar" | "footer")
   so a shared style id can still read right at each scale — footer text is
   small/muted so most skins tone the effect down there. CTA pill buttons are
   intentionally NOT tagged [data-rn58ce5] and stay outside this axis. */

 [data-rn58ce5] {
  position: relative;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease,
    text-shadow .18s ease, border-color .18s ease;
}

.chrome-brand-slot {
  line-height: 0;
}

html[data-a6nmh7w^="header_inline"] header > div > a:first-child,
html[data-a6nmh7w^="header_inline"] header > div > [class*="brand"],
html[data-a6nmh7w^="header_inline"] header > div > [class*="logo"] {
  min-width: 0;
  flex: 1 1 auto;
}

.payout-section .payout-heading{grid-column:2;grid-row:1;margin:0;color:var(--color-text);min-width:0}

.wp-block-slider-button[data-07558f3] { right: 0.4rem; }

/* Logo spacing */
.sidebar-primary a.home-page-template,
.sidebar-primary > aside > a:first-of-type {
  display: block;
  margin-bottom: 12px;
}

.wp-block-group .wp-block-heading{
  margin: 0; color: var(--color-on-contrast); overflow-wrap: anywhere;
  line-height: 1.08; font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 36rem;
}

.wp-block-navigation__container .wp-block-button .wp-block-navigation-item__content {
  margin-top: 12px;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-on-accent, #fff) !important;
  border-radius: var(--ui-radius, 8px);
  padding: 12px 16px;
  font-weight: 700;
  box-shadow: none;
  transform: none;
  filter: none;
}

.author-card .author-display-name{margin:0 0 4px;color:var(--color-text)}

.brand-logo-section .brand-logo-intro{max-width:72ch;line-height:1.55;color:var(--color-on-contrast);font-size:.95rem}

.product-display-grid .product-entry{
  margin: 0; overflow: hidden; min-height: 150px;
  background: var(--color-accent-soft);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  box-sizing: border-box; min-width: 0;
}

.__gone__ .sub-menu .nav-menu-text,
.__gone__ .sub-menu .nav-menu-link {
  color: var(--color-text);
}

.faq-accordion .faq-question{ margin: 0; color: var(--color-text); font-size: 1.05rem; }

/* .alignfull fades a button to transparent and disables clicks (keeping its
   layout space, so nothing reflows) once there's nothing left to scroll
   in that direction. */

/* Attribute-scoped (not .wp-block-slider-button-scoped) so this edge-hide affordance
   also applies to block variants that mount their own real prev/next buttons
   (e.g. gallery/v7) instead of the auto-injected ones above. */
[data-z563xai], [data-07558f3] { transition: opacity .15s ease; }

.payout-section .payout-method{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:12px calc(clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) + 4px);border-left:4px solid var(--color-accent);background:var(--color-bg);min-width:0;box-sizing:border-box}

[data-rfcxeal="v9yxjda"] .wp-block-navigation {
  grid-column: 1 / span 2;
  grid-row: 1;
  border-bottom: 1px solid var(--color-border);
}

.__gone__ .sub-menu .nav-menu-text:hover,
.__gone__ .sub-menu .nav-menu-link:hover {
  color: var(--color-accent);
}

.slider-timer {
  display: block; height: 3px; margin-top: -1.15rem; margin-bottom: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--color-border) 80%, transparent); overflow: hidden;
}

.media-entry-section .media-text-visual{
  min-height: 200px; background: var(--color-accent-soft); overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  box-sizing: border-box; min-width: 0; max-width: 100%;
}

.benefits-section .benefit-card{
  padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 0 11px 11px 0;
}

.side-nav-container .nav-menu-link {
  display: block; padding: 9px 12px; border-radius: var(--ui-radius, 8px);
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}

.promo-banner-shell .promo-banner-action{
  background: var(--color-accent-contrast);
  color: var(--color-on-accent);
  padding: 13px 13px;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 600;
}

.is-style-footer {
  border-top: 0 !important;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--color-bg) 48%, var(--color-surface)) 0%,
    var(--color-surface) 100%
  );
}

[data-96e23bz="v7kqn05"] .off-canvas-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  width: min(288px, 320px);
  max-width: 100%;
  height: 100%;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 10px 20px;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s ease;
  box-shadow: 8px 0 24px rgba(0,0,0,.08);
  overflow-y: auto;
  box-sizing: border-box;
}

/* No `display` here — chrome_base.css's universal li:has(>ul)>ul collapse rule owns
   it (hidden until the parent <li> gets .is-menu-open); a combined selector with
   .sidebarList would out-specificity that rule and the submenu would stay
   permanently visible instead of collapsing (see sidebar-v6's comment for the
   full explanation — this file used to make exactly that mistake). */
.side-nav-container .side-nav-submenu { list-style: none; gap: 6px; padding-left: 0; margin: 4px 0 0; border: 0; }

.ui-card-container .ui-card-item{
  flex: 0 0 min(260px, 80vw); scroll-snap-align: start;
  background: var(--color-surface); border-top: 3px solid var(--color-accent);
  padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) calc(clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) + 6px);
  box-sizing: border-box; min-width: 0;
}

.author-card .author-avatar-wrap{width:88px;height:88px;border-radius:11px;overflow:hidden;background:var(--color-accent-soft);display:grid;place-items:center}

.wp-block-columns .split-col-right{ transform: translateY(18px); }

.wp-block-navigation__container .menu-item { list-style: none; margin: 0; }

.block-block .toc-link-item a:hover { text-decoration: underline; }

.breadcrumb-wrap .breadcrumb-nav{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}

.media-entry-section .media-text-visual img{
  display: block; width: 100%; height: 100%; min-height: 200px; object-fit: cover;
}

.breadcrumb-wrap .breadcrumb-item a:hover{border-bottom-color:var(--color-accent)}

.is-style-header .nav-button-btn a,
.is-style-header .nav-button-btn {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent);
  color: var(--color-on-accent, #fff) !important;
  padding: 13px 13px;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

/* CLS media: reserve box before image decode */
.product-display-grid .product-entry{aspect-ratio:4 / 3;overflow:hidden}

.side-nav-container .side-nav-heading {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-muted); margin: 0 0 10px; font-weight: 700;
}

.features-grid .feature-item{
  background: var(--color-surface);
  padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px);
  border-radius: 11px;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  min-width: 0;
}

/* Global slider / carousel skins — selected via html[data-cltl0wc="vbo7lgu"].
   Tracks/items use data-091dbya / data-tms2rur (and optional controls). */

 [data-091dbya] {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* overflow-x scrolling otherwise clips card shadows / bottom radii */
  padding-block: 12px 28px;
  box-sizing: border-box;
}

.is-style-footer .footer-identity span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.process-flow .process-step-mark{font-family:var(--font-mono,ui-monospace,monospace);color:var(--color-accent);font-size:.85rem}

[data-rfcxeal]:has([data-rg3d7a6="vl5xbfn"]) .sidebar-primary {
  border: 0 !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 92%, var(--color-accent) 8%) 0%,
    color-mix(in srgb, var(--color-bg) 65%, var(--color-surface)) 100%
  );
}

.stats-overview .stats-heading{
  display: block; font-size: 1.8rem; color: var(--color-on-contrast); font-weight: 800;
}

.wp-block-slider-button {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.4rem; height: 2.4rem; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1;
  color: var(--color-on-accent); background: var(--color-accent);
  transition: opacity .15s ease;
}

.block-block .toc-link-list { margin: 0; padding-left: 1.2rem; }

h3 { font-size: calc(1.35rem * var(--heading-scale, 1)); }

.game-category-grid .game-category-name{margin:0 0 6px;color:var(--color-accent);font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}

.how-it-works .step-card{position:relative;padding:0 0 17px;min-width:0}

.side-nav-container .nav-menu-link:hover {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
}

/* Toggle must not inherit active fill / on-accent text from the row. */
.sidebar-primary li.elementor-active > .sidebar-dropdown-toggle,
.sidebar-primary li:has(.elementor-active) > .sidebar-dropdown-toggle,
.sidebar-primary .sidebar-dropdown-toggle {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-muted);
}

.sidebar-primary .sidebar-dropdown-toggle:hover,
.sidebar-primary .sidebar-dropdown-toggle:focus-visible {
  color: var(--color-text, inherit);
  outline: none;
}

.sidebar-primary li:has(> ul).is-menu-open > .sidebar-dropdown-toggle::before {
  transform: rotate(90deg);
}

.promo-banner-shell{
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 27px 22px;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 11px;
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-accent-contrast);
}

.pros-cons-section{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--color-contrast);color:var(--color-on-contrast);border-radius:min(11px, 20px);overflow:hidden;min-width:0}

.slider-bar {
  display: block; height: 100%; width: 8%;
  background: var(--color-accent); border-radius: inherit;
  transition: width .2s ease;
}

.review-carousel { display: grid; gap: 17px; grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 3 * 17px) / 4)), 1fr)); }

.section-overview {
  position: fixed;
  z-index: 35;
  pointer-events: none;
  opacity: 0;
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
  background: color-mix(in srgb, var(--color-surface) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .35s ease, transform .35s ease, bottom .25s ease, left .25s ease, right .25s ease;
}

.is-style-footer .footer-identity {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wp-block-group .hero-artwork{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* CLS media: reserve box before image decode */
.media-entry-section .media-text-visual{aspect-ratio:4 / 3;overflow:hidden}

.benefits-section .benefit-card p{
  margin: 0;
  color: var(--color-muted);
}

html {
  background: var(--color-bg, #f7f6f8);
  scroll-behavior: smooth;
  /* Sticky/fixed headers — keep hash targets visible below chrome. */
  scroll-padding-top: var(--header-h, 80px);
}

.how-it-works p{margin:0;color:var(--color-muted)}

[data-091dbya]::-webkit-scrollbar { display: none; }

.sidebar-primary .sidebar-dropdown-toggle {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  position: relative;
  z-index: 1;
}

.pros-cons-section .pros-list-col{border-right:1px solid color-mix(in srgb,var(--color-on-contrast) 22%,transparent)}

.wp-block-heading,
.wp-block-group h1 {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .is-style-header .has-block > .elementor-block,
  [data-rfcxeal] header > div > ul,
  header > div > ul {
    display: none !important;
  }
  /* CTA may be a list item or a sibling chip — never keep it in the sticky bar. */
  [data-rfcxeal] header .nav-button-btn,
  [data-rfcxeal] header [class*="nav-button"],
  [data-rfcxeal] header [class*="-cta"],
  header .nav-button-btn,
  header [class*="nav-button"],
  header [class*="-cta"] {
    display: none !important;
  }
  .is-style-header .has-block,
  [data-rfcxeal] header > div,
  header > div {
    padding-right: 56px;
  }
}

.is-style-header .sub-menu .sub-menu {
  top: -8px;
  left: calc(100% - 8px);
  min-width: 200px;
}

.is-style-header .nav-menu-link {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.payout-section p{grid-column:1 / -1;grid-row:2;margin:0;color:var(--color-muted);line-height:1.55}

@media (max-width: 900px) {
  /* !important: css_shuffle can place desktop grid rules after this block */
  [data-rfcxeal="v9yxjda"].wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-rfcxeal="v9yxjda"] .sidebar-primary { display: none !important; }
  [data-rfcxeal="v9yxjda"] .site-main-area {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 16px;
    padding-right: 16px;
    align-items: stretch;
    gap: 18px;
  }
  [data-rfcxeal="v9yxjda"] .site-main-area > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }
  [data-rfcxeal="v9yxjda"] .is-style-footer,
  [data-rfcxeal="v9yxjda"] > .is-style-footer,
  [data-rfcxeal="v9yxjda"] > footer {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

.block-block {
  padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px); border: 1px solid var(--color-border); border-radius: 11px;
  background: var(--color-surface);
}

.cta-block .primary-action-btn{
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 13px 13px;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

h2 { font-size: calc(1.75rem * var(--heading-scale, 1)); }

/* denser v2 */


.media-entry-section{
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 17px; box-sizing: border-box; min-width: 0;
}

.wp-block-navigation__container .wp-block-details__summary .wp-block-navigation-item__content:hover {
  color: var(--color-accent);
}

.breadcrumb-wrap .breadcrumb-item{display:inline-flex;align-items:center;font-size:.85rem;color:var(--color-muted)}

.article-content{color:var(--color-text);line-height:1.6}

/* ===== Sidebar: universal collapsible submenu (structure-based, variant-agnostic) =====
   Split hit targets: parent <a> navigates; .sidebar-dropdown-toggle expands/collapses. */
.sidebar-primary li:has(> ul) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/sora-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.benefits-section .benefits-heading{
  margin: 0 0 6px;
  color: var(--color-text);
}

.is-style-footer .footer-legal {
  grid-area: copy;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.faq-mini-list .faq-mini-answer p{margin:0}

.payout-section .payout-info{grid-column:1;grid-row:1;font-family:var(--font-mono,ui-monospace,monospace);font-weight:700;color:var(--color-accent);font-size:.85rem;white-space:nowrap}

/* Shared hooks for header_inline* burger placements (burger moved into header by JS). */
html[data-a6nmh7w^="header_inline"] .menu-toggle {
  position: static;
  flex-shrink: 0;
  margin: 0;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: none;
}

/* Ancestor of the current page: subtler cue than the leaf current item. */
.sidebar-primary li:has(> ul):not(.elementor-active):has(.elementor-active) > a,
.sidebar-primary li:has(> ul):not(.elementor-active):has(.elementor-active) > span {
  color: var(--color-text);
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}

.game-category-grid .game-category-box{padding:clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px);border:2px dashed var(--color-border-strong);font-family:var(--font-mono,ui-monospace,monospace);min-width:0;box-sizing:border-box}

.faq-mini-list .faq-mini-question{cursor:pointer;font-size:.88rem;color:var(--color-text);list-style:none;padding:8px 0;font-weight:600}

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/sora-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.wp-block-group{
  position: relative; display: grid; place-items: end stretch;
  min-height: 380px; width: 100%; min-width: 0; box-sizing: border-box;
  overflow: hidden; background: var(--color-contrast);
  border-bottom: 6px solid var(--color-accent-2);
}

.ribbon-banner .ribbon-action{
  background: transparent; color: var(--color-accent-contrast);
  border: 1px solid var(--color-accent-contrast);
  padding: 13px 13px; text-decoration: none; font-weight: 700;
}

@media (min-width: 901px) {
  .menu-toggle,
  .wp-site-blocks { display: none !important; }
}

.side-nav-container .side-wp-block-navigation-item.elementor-active > .nav-menu-link {
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
  color: var(--color-accent); font-weight: 700;
}

h1, h2, h3, h4,
[class*="title"], [class*="Title"], [class*="headline"], [class*="Headline"] {
  font-family: var(--font-heading);
}

.wp-block-navigation__container .wp-block-details > .has-label {
  font-weight: 600;
}

/* dropdown panels overlay outside the header box — no ancestor may scroll or clip them.
   A non-visible overflow on either axis computes the other axis to auto, which both clips
   the panel and adds a scrollbar as soon as it opens. */
.is-style-header,
.is-style-header .has-block,
.is-style-header .has-block > .elementor-block,
.is-style-header .nav-menu-item {
  overflow: visible;
}

.how-it-works{display:grid;gap:0;border-left:3px solid var(--color-accent);padding-left:16px;min-width:0}

.product-display-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 17px; box-sizing: border-box; min-width: 0;
}

.wp-block-navigation__container .wp-block-details.is-menu-open > .has-label::after {
  transform: rotate(180deg);
}

.review-carousel .review-author { color: var(--color-accent); font-style: normal; font-weight: 600; }

.promo-banner-shell .promo-banner-head{ margin: 0; color: var(--color-text); }

.is-style-footer .footer-extra-nav {
  columns: 4; column-gap: 20px; list-style: none; margin: 0; padding: 0;
}

.cta-block{
  padding: 27px 22px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.author-card .author-badge{font-size:1.6rem;font-weight:800;color:var(--color-accent)}

.faq-accordion{
  display: grid; gap: 17px; counter-reset: fq;
  box-sizing: border-box; min-width: 0;
}

.has-large-font-size {
  color: var(--color-text);
  margin: 0 0 12px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

/* Hide the whole control surface when the track doesn't actually overflow at
   the current viewport (e.g. a 4-item icon row exactly filling 4 desktop
   columns) — the JS toggles .is-scrollable on the host once it measures
   scrollWidth > clientWidth, re-checked on resize since desktop vs. mobile can
   flip this for the same block instance. Unscoped (no data-cltl0wc
   prefix) so every style gets this regardless of which one a site rolled. */
.wp-block-jetpack-slideshow:not(.is-scrollable) .wp-block-slider-button,
.wp-block-jetpack-slideshow:not(.is-scrollable) .slider-pagination,
.wp-block-jetpack-slideshow:not(.is-scrollable) .slider-timer {
  display: none !important;
}

.is-style-header .nav-button-btn a:hover { filter: brightness(1.05); }

.wp-block-group .hero-call-to-action{
  display: inline-block; width: fit-content;
  background: var(--color-accent-2); color: var(--color-on-accent);
  padding: calc(13px + 2px) calc(13px + 10px);
  border-radius: 11px; text-decoration: none; font-weight: 800;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent-2) 45%, transparent);
}

a[class*="btn"]:hover,
a[class*="-cta-"]:hover,
button:hover,
[class*="Btn"]:hover,
[class*="-btn-"]:hover {
  transform: var(--btn-hover-transform);
  filter: var(--btn-hover-filter);
  box-shadow: var(--btn-hover-shadow);
}

/* ensureControls() (see the JS bundle) wraps the scrolling track in a plain
   .wp-block-jetpack-slideshow div rather than appending buttons as track children —
   a button living inside a CSS Grid (grid-auto-flow:column) or Flexbox track
   becomes another row item and gets its own column/flex slot sized by the
   track's own rules (e.g. grid-auto-columns), regardless of the button's own
   width or margin tricks — that both detaches it visually from the real
   content and inflates scrollWidth so "nothing left to scroll" never
   registers. The host is a non-scrolling sibling wrapper instead, so plain
   position:absolute anchors correctly to the track's visible box without the
   button ever becoming part of what's being measured/scrolled. */
/* The chrome layouts style every direct child of the content column via
   `.contentMain > *` (width/max-width/min-width/box-sizing, so wide content
   can't blow out the page). Wrapping a block's root in .wp-block-jetpack-slideshow
   makes the host the new direct child instead of the block — replicate
   those properties here so that rule's protection isn't lost. */
.wp-block-jetpack-slideshow {
  position: relative; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}

.process-flow .faq-accordion-item{padding:0 8px 14px;color:var(--color-muted)}

/* ===== Header utility: nav list to the right ===== */
.is-style-header .elementor-block,
.is-style-header ul:first-child {
  margin-left: auto;
}

.brand-logo-section{display:flex;flex-direction:column;gap:17px;padding:clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px);background:var(--color-contrast);border-radius:11px;min-width:0;box-sizing:border-box;color:var(--color-on-contrast)}

.benefits-section{
  display: grid;
  gap: 17px;
}

.is-style-footer .footer-navigation {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

@media (max-width: 800px){
  .wp-block-group{ min-height: 300px; }
}

[data-rfcxeal="v9yxjda"] .site-main-area {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 27px 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 0;
  overflow-x: clip;
}

.author-card .author-position{margin:0 0 8px;color:var(--color-accent);font-size:.85rem;font-weight:600}

/* —— outline_center: centered ghost outline, no glow —— */
 .section-overview {
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(6px);
  max-width: min(88vw, 380px);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  background: color-mix(in srgb, var(--color-surface) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, transparent);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.is-style-footer .footer-navigation a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.86rem;
}

.cta-block .cta-headline{ margin: 0 0 6px; color: var(--color-text); }

.is-style-footer .footer-extra-nav a {
  color: var(--color-muted); text-decoration: none; font-size: 0.8rem; padding: 0;
  background: none; border: 0; border-radius: 0;
}

@media (max-width: 800px) {
  .cta-block{ grid-template-columns: 1fr; justify-items: start; }
}

.author-card .author-bio p{margin:0}

.entry-content a:hover { text-decoration: underline; }

.side-nav-container .nav-menu-text {
  padding: 6px 12px; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted);
}

.breadcrumb-wrap .breadcrumb-divider{opacity:.35;padding:0 2px}

.product-display-grid .product-name{
  margin: 0; padding: 8px clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px); color: var(--color-text); font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-96e23bz="v7kqn05"].wp-site-blocks.is-menu-open,
body.nav-open [data-96e23bz="v7kqn05"].wp-site-blocks {
  pointer-events: auto;
  background: color-mix(in srgb, #000 35%, transparent);
}

.article-heading{color:var(--color-accent)}

.sidebar-primary .sidebar-dropdown-toggle::before {
  content: '›';
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

.process-flow .process-step-title{display:flex;gap:10px;align-items:center;padding:12px 8px;cursor:pointer;color:var(--color-text);font-weight:600;list-style:none}

.faq-mini-list{display:grid;gap:0;border-left:3px solid var(--color-accent);padding-left:12px;min-width:0}

.brand-logo-section .brand-logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:17px;min-width:0;align-items:stretch}

.is-style-footer .footer-extra-nav a:hover { color: var(--color-accent); }

.event-timeline p{margin:0;color:var(--color-muted);font-size:.9rem}

/* snap_plain / peek_soft / rail_left / glow_active / contrast_strip / brutal_frame
   all deliberately keep prev/next buttons and the progress bar out of their look,
   but were also hiding dots entirely — leaving zero visible manual-navigation
   affordance on desktop (autoplay + native scroll only). Give them a shared plain
   dots row via an UNSCOPED fallback (no html[data-cltl0wc="vbo7lgu"] prefix) rather
   than one rule naming all 6 style values — css_selection_filter.py's site-level
   filter drops a rule outright if it references more than one non-selected value
   for the same attribute, so a rule listing 6 different data-cltl0wc values
   only ever matches the one this specific site rolled and gets deleted entirely
   on every other site (confirmed: this exact mistake shipped with zero dots on
   the very first site checked). An unscoped rule has no site-level attribute
   reference at all, so the filter always keeps it; the 6 styles above that DO
   want their own colored dots already out-specificity this via their
   html[data-cltl0wc="vbo7lgu"] prefix, so they aren't affected. */
.slider-pagination {
  display: flex; gap: 8px; justify-content: center;
  margin-top: -2.25rem; margin-bottom: 0; min-height: 1.5rem; align-items: center;
}

.product-display-grid .product-entry img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.wp-block-navigation__container, .wp-block-navigation__container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

@media (max-width: 800px){
  .media-entry-section{ grid-template-columns: 1fr; }
}

html {
  font-size: calc(100% * var(--site-scale, 1) * var(--text-scale, 1));
}

.game-category-grid .game-category-icon{display:none}

.menu-toggle::after {
  content: "☰";
  font-size: 1.25rem;
  line-height: 1;
}

.article-section{padding:27px 0}

.breadcrumb-wrap{min-width:0}

.is-style-header .nav-menu-link:hover { color: var(--color-accent); }

h4 { font-size: calc(1.15rem * var(--heading-scale, 1)); }

[data-96e23bz="v7kqn05"].wp-site-blocks.is-menu-open .off-canvas-nav,
body.nav-open [data-96e23bz="v7kqn05"] .off-canvas-nav {
  transform: translateX(0);
  visibility: visible;
}

.wp-block-group .hero-promo{
  display: inline-block; width: auto; max-width: max-content;
  padding: 6px 14px;
  background: var(--color-accent-2); color: var(--color-on-accent);
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px;
  justify-self: start;
}

.block-block .toc-link-item a { color: var(--color-link); text-decoration: none; }

.slider-pagination-bullet {
  width: 8px; height: 8px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--color-muted) 45%, transparent);
  cursor: pointer; padding: 0;
}

.wp-layout-flow,
[data-rfcxeal] {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

html[data-a6nmh7w^="header_inline"] header > div {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.is-style-header .sub-menu {
  max-width: calc(100vw - 24px);
}

.wp-block-navigation__container .wp-block-button .wp-block-navigation-item__content:hover {
  filter: brightness(1.06);
  background: var(--color-accent);
  color: var(--color-on-accent, #fff) !important;
  transform: none;
  box-shadow: none;
}

.is-style-header .has-block > .nav-menu-link:first-child {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

*, *::before, *::after { box-sizing: border-box; }

.wp-block-slider-button[data-z563xai] { left: 0.4rem; }

.elementor-widget-wrap {
  /* Approximate header + ~3 match rows before widget paint (mobile CLS). */
  min-height: 280px;
}

.how-it-works .step-number{position:absolute;left:-23px;top:0;width:14px;height:14px;border-radius:50%;background:var(--color-accent);color:transparent;font-size:0}

[data-z563xai].alignfull, [data-07558f3].alignfull { opacity: 0; pointer-events: none; }

.is-style-footer {
  margin-top: auto;
  padding: calc(23px * 1.15) 22px;
  border-top: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-surface) 88%, var(--color-accent) 12%) 0%,
    var(--color-surface) 42%,
    color-mix(in srgb, var(--color-bg) 55%, var(--color-surface)) 100%
  );
}

.stats-overview .stat-block{
  padding: clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) calc(clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) + 6px);
  border-left: 3px solid var(--color-accent-2); box-sizing: border-box; min-width: 0;
}

[data-rfcxeal="v9yxjda"] .is-style-footer,
[data-rfcxeal="v9yxjda"] > .is-style-footer,
[data-rfcxeal="v9yxjda"] > footer {
  grid-column: 1 / span 2;
  grid-row: 3;
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex !important; }
  .wp-layout-flow {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /*
   * Sidebar shells: CSS rule shuffle can place desktop
   * `grid-template-columns: <aside> 1fr` AFTER this mobile block.
   * !important + structure selectors keep a single column even then.
   * .sidebar-primary is fingerprint-aliased in lockstep with HTML.
   */
  .sidebar-column,
  .sidebar-primary {
    display: none !important;
  }
  *:has(> .sidebar-primary) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Reset grid placement only — do NOT force width:100% on every child
     (that stretches fixed .menu-toggle / burger into a full-width bar). */
  *:has(> .sidebar-primary) > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;
    box-sizing: border-box;
  }
  .menu-toggle {
    width: auto !important;
    max-width: none !important;
  }
  .main-container {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }
  .e-con-inner,
  .is-style-header,
  .is-style-footer,
  .main-container > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .wp-block-columns,
  .wp-block-media-text {
    grid-template-columns: 1fr !important;
  }
  .wp-block-cover,
  .wp-block-group {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

.side-nav-container .side-nav-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
}

@media (max-width: 900px) {
  .is-style-header .elementor-block { display: none; }
}

.sidebar-primary li:has(> ul) > ul {
  flex: 1 1 100%;
  width: 100%;
  display: none;
  padding-left: 12px;
}

[data-rn58ce5]:hover,
 [data-rn58ce5]:focus-visible,
 [data-rn58ce5][aria-current="page"] {
  background: var(--color-accent-soft); color: var(--color-accent);
}

[data-rfcxeal="v9yxjda"]:has([data-rg3d7a6="vl5xbfn"]) .wp-block-navigation {
  border-bottom: 0 !important;
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--color-bg) 38%, var(--color-surface)) 100%
  );
}

.game-category-grid p{margin:0;color:var(--color-muted);font-family:var(--font-body,sans-serif);font-size:.9rem}

.brand-logo-section .brand-logo-intro a{color:var(--color-accent)}

[data-091dbya] {
  scroll-snap-type: x proximity; scrollbar-width: none;
  margin-bottom: 1.5rem;
}

/* ===== Sidebar active states (structure-based, variant-safe) =====
   Variants / chrome skins must target only the direct link of the current
   item. Soft fills use --color-text so accent-on-accent-soft never washes out
   labels (esp. with elevated/floating skins). */
.sidebar-primary li.elementor-active > a,
.sidebar-primary a.elementor-active[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
}

[data-rfcxeal="v9yxjda"] .sidebar-primary {
  grid-column: 1;
  grid-row: 2;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 10px 20px;
  min-height: 0;
}

.event-timeline .event-dot{display:block;margin:0 0 8px;color:var(--color-accent-2);font-size:.8rem;font-weight:700}

.event-timeline .event-item{flex:0 0 min(240px,78vw);scroll-snap-align:start;padding:clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px);background:var(--color-surface);border-left:4px solid var(--color-accent);box-sizing:border-box;min-width:0}

.wp-block-group .hero-subtitle{
  position: relative; z-index: 1; width: 100%;
  padding: 10px calc(32px + 12px);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-contrast) 92%, transparent) 38%, color-mix(in srgb, var(--color-contrast) 96%, transparent) 100%);
  display: grid; gap: 12px; min-width: 0; box-sizing: border-box;
  justify-items: start;
}

.stats-overview{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 17px; padding: 27px 22px;
  background: var(--color-surface-inverted); color: var(--color-on-contrast);
  box-sizing: border-box; min-width: 0;
}

.wp-block-slider-button,
 .slider-pagination { display: none !important; }

.wp-block-navigation__container .wp-block-details > .has-label::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.55;
  transition: transform .2s ease;
  flex-shrink: 0;
}

[data-96e23bz="v7kqn05"].wp-site-blocks {
  position: fixed;
  inset: 0;
  /* Above the mobile sticky-header z-index (55, header_inline_fixed*) so the
     open drawer's close button / home link never render under the header. */
  z-index: 58;
  pointer-events: none;
  background: transparent;
}

.cta-block p{ margin: 0; color: var(--color-muted); }

[data-rfcxeal="v9yxjda"].wp-block-column {
  display: grid;
  grid-template-columns: 234px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 0;
  background: var(--color-bg);
  color: var(--color-text);
}

.ui-card-container .ui-card-desc{ margin: 0; color: var(--color-muted); }

.close-drawer-btn {
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 12px;
}

.wp-block-navigation__container .wp-block-navigation-item__content,
.wp-block-navigation__container .has-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 8px;
  margin: 0;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--ui-radius, 8px);
  text-transform: none;
  letter-spacing: normal;
}

.is-style-footer .footer-extra-nav li {
  break-inside: avoid; margin-bottom: 4px;
}

.pros-cons-section .pros-cons-label{margin:0 0 14px;color:var(--color-accent-2);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}

/* v4 — soft gradient, no hard chrome borders */
.is-style-header,
.is-style-header,
header {
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--color-bg) 42%, var(--color-surface)) 100%
  );
  border-bottom: 0 !important;
}

.sidebar-primary li:has(> ul) > a::after {
  content: none;
}

.author-card .author-avatar-wrap img{width:100%;height:100%;object-fit:cover}

.is-style-outline, .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--color-on-accent, #fff) !important;
  padding: 12px 22px;
  border-radius: var(--ui-radius, 8px);
  text-decoration: none;
}

.faq-mini-list .faq-mini-label{margin:0 0 8px;color:var(--color-accent);font-size:.75rem;text-transform:uppercase}

.ribbon-banner{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 9px; padding: 10px 22px;
  border-top: 1px dashed var(--color-border-strong); border-bottom: 1px dashed var(--color-border-strong);
  background: var(--color-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-sizing: border-box; min-width: 0;
}

.wp-block-columns .split-col-left p,
.wp-block-columns .split-col-right p{ margin: 0 0 0.85em; }

.wp-block-columns .split-col-left p:last-child,
.wp-block-columns .split-col-right p:last-child{ margin-bottom: 0; }

:root[data-btn-hover="lift"] {}

.breadcrumb-wrap .breadcrumb-item a{color:var(--color-text);text-decoration:none;padding:6px 10px;border-bottom:2px solid transparent}

/* CLS media: reserve box before image decode */
.author-card .author-avatar-wrap{aspect-ratio:1 / 1;overflow:hidden}

.process-flow .process-step-title::-webkit-details-marker{display:none}

.game-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px;min-width:0}

.faq-accordion .faq-entry::before{
  content: counter(fq, decimal-leading-zero);
  font-size: 1.35rem; font-weight: 800; color: var(--color-accent-2); line-height: 1.1;
  grid-row: 1 / span 2;
}

/* CLS media: reserve box before image decode */
.game-category-grid .game-category-icon{aspect-ratio:16 / 9;overflow:hidden}

.stats-overview .stat-block span{
  color: color-mix(in srgb, var(--color-on-contrast) 75%, transparent);
}

@media (max-width: 720px) {
  main#site-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  main .author-card,
main .benefits-section,
main .block-block,
main .brand-logo-section,
main .breadcrumb-wrap,
main .cta-block,
main .elementor-widget-wrap,
main .event-timeline,
main .faq-accordion,
main .faq-mini-list,
main .features-grid,
main .game-category-grid,
main .how-it-works,
main .is-style-footer,
main .is-style-header,
main .media-entry-section,
main .payout-section,
main .process-flow,
main .product-display-grid,
main .promo-banner-shell,
main .pros-cons-section,
main .review-carousel,
main .ribbon-banner,
main .side-nav-container,
main .stats-overview,
main .ui-card-container,
main .wp-block-columns,
main .wp-block-group,
  main .author-card *,
main .benefits-section *,
main .block-block *,
main .brand-logo-section *,
main .breadcrumb-wrap *,
main .cta-block *,
main .elementor-widget-wrap *,
main .event-timeline *,
main .faq-accordion *,
main .faq-mini-list *,
main .features-grid *,
main .game-category-grid *,
main .how-it-works *,
main .is-style-footer *,
main .is-style-header *,
main .media-entry-section *,
main .payout-section *,
main .process-flow *,
main .product-display-grid *,
main .promo-banner-shell *,
main .pros-cons-section *,
main .review-carousel *,
main .ribbon-banner *,
main .side-nav-container *,
main .stats-overview *,
main .ui-card-container *,
main .wp-block-columns *,
main .wp-block-group * {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100%;
  }
  main .author-card *,
main .benefits-section *,
main .block-block *,
main .brand-logo-section *,
main .breadcrumb-wrap *,
main .cta-block *,
main .elementor-widget-wrap *,
main .event-timeline *,
main .faq-accordion *,
main .faq-mini-list *,
main .features-grid *,
main .game-category-grid *,
main .how-it-works *,
main .is-style-footer *,
main .is-style-header *,
main .media-entry-section *,
main .payout-section *,
main .process-flow *,
main .product-display-grid *,
main .promo-banner-shell *,
main .pros-cons-section *,
main .review-carousel *,
main .ribbon-banner *,
main .side-nav-container *,
main .stats-overview *,
main .ui-card-container *,
main .wp-block-columns *,
main .wp-block-group * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Exclude [data-091dbya]/[data-tms2rur] — this blanket mobile stack
     rule was forcing horizontal-scroll sliders (TOC v8, gallery/testimonials/
     stats/etc. slider variants — see slider_styles.css.tpl) into a vertical
     column, breaking their intentional overflow-x scroll and, for TOC, causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .author-card,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .benefits-section,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .block-block,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .brand-logo-section,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .breadcrumb-wrap,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .cta-block,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .elementor-widget-wrap,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .event-timeline,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .faq-accordion,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .faq-mini-list,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .features-grid,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .game-category-grid,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .how-it-works,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .is-style-footer,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .is-style-header,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .media-entry-section,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .payout-section,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .process-flow,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .product-display-grid,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .promo-banner-shell,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .pros-cons-section,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .review-carousel,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .ribbon-banner,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .side-nav-container,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .stats-overview,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .ui-card-container,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .wp-block-columns,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .wp-block-group,
  main .author-card > *:not([data-091dbya]),
main .benefits-section > *:not([data-091dbya]),
main .block-block > *:not([data-091dbya]),
main .brand-logo-section > *:not([data-091dbya]),
main .breadcrumb-wrap > *:not([data-091dbya]),
main .cta-block > *:not([data-091dbya]),
main .elementor-widget-wrap > *:not([data-091dbya]),
main .event-timeline > *:not([data-091dbya]),
main .faq-accordion > *:not([data-091dbya]),
main .faq-mini-list > *:not([data-091dbya]),
main .features-grid > *:not([data-091dbya]),
main .game-category-grid > *:not([data-091dbya]),
main .how-it-works > *:not([data-091dbya]),
main .is-style-footer > *:not([data-091dbya]),
main .is-style-header > *:not([data-091dbya]),
main .media-entry-section > *:not([data-091dbya]),
main .payout-section > *:not([data-091dbya]),
main .process-flow > *:not([data-091dbya]),
main .product-display-grid > *:not([data-091dbya]),
main .promo-banner-shell > *:not([data-091dbya]),
main .pros-cons-section > *:not([data-091dbya]),
main .review-carousel > *:not([data-091dbya]),
main .ribbon-banner > *:not([data-091dbya]),
main .side-nav-container > *:not([data-091dbya]),
main .stats-overview > *:not([data-091dbya]),
main .ui-card-container > *:not([data-091dbya]),
main .wp-block-columns > *:not([data-091dbya]),
main .wp-block-group > *:not([data-091dbya]),
  main .author-card > * > *:not([data-tms2rur]),
main .benefits-section > * > *:not([data-tms2rur]),
main .block-block > * > *:not([data-tms2rur]),
main .brand-logo-section > * > *:not([data-tms2rur]),
main .breadcrumb-wrap > * > *:not([data-tms2rur]),
main .cta-block > * > *:not([data-tms2rur]),
main .elementor-widget-wrap > * > *:not([data-tms2rur]),
main .event-timeline > * > *:not([data-tms2rur]),
main .faq-accordion > * > *:not([data-tms2rur]),
main .faq-mini-list > * > *:not([data-tms2rur]),
main .features-grid > * > *:not([data-tms2rur]),
main .game-category-grid > * > *:not([data-tms2rur]),
main .how-it-works > * > *:not([data-tms2rur]),
main .is-style-footer > * > *:not([data-tms2rur]),
main .is-style-header > * > *:not([data-tms2rur]),
main .media-entry-section > * > *:not([data-tms2rur]),
main .payout-section > * > *:not([data-tms2rur]),
main .process-flow > * > *:not([data-tms2rur]),
main .product-display-grid > * > *:not([data-tms2rur]),
main .promo-banner-shell > * > *:not([data-tms2rur]),
main .pros-cons-section > * > *:not([data-tms2rur]),
main .review-carousel > * > *:not([data-tms2rur]),
main .ribbon-banner > * > *:not([data-tms2rur]),
main .side-nav-container > * > *:not([data-tms2rur]),
main .stats-overview > * > *:not([data-tms2rur]),
main .ui-card-container > * > *:not([data-tms2rur]),
main .wp-block-columns > * > *:not([data-tms2rur]),
main .wp-block-group > * > *:not([data-tms2rur]) {
    flex-direction: column !important;
  }
  main .author-card > *,
main .benefits-section > *,
main .block-block > *,
main .brand-logo-section > *,
main .breadcrumb-wrap > *,
main .cta-block > *,
main .elementor-widget-wrap > *,
main .event-timeline > *,
main .faq-accordion > *,
main .faq-mini-list > *,
main .features-grid > *,
main .game-category-grid > *,
main .how-it-works > *,
main .is-style-footer > *,
main .is-style-header > *,
main .media-entry-section > *,
main .payout-section > *,
main .process-flow > *,
main .product-display-grid > *,
main .promo-banner-shell > *,
main .pros-cons-section > *,
main .review-carousel > *,
main .ribbon-banner > *,
main .side-nav-container > *,
main .stats-overview > *,
main .ui-card-container > *,
main .wp-block-columns > *,
main .wp-block-group > * {
    width: 100%;
    max-width: 100%;
  }
  main .author-card > * > img,
main .benefits-section > * > img,
main .block-block > * > img,
main .brand-logo-section > * > img,
main .breadcrumb-wrap > * > img,
main .cta-block > * > img,
main .elementor-widget-wrap > * > img,
main .event-timeline > * > img,
main .faq-accordion > * > img,
main .faq-mini-list > * > img,
main .features-grid > * > img,
main .game-category-grid > * > img,
main .how-it-works > * > img,
main .is-style-footer > * > img,
main .is-style-header > * > img,
main .media-entry-section > * > img,
main .payout-section > * > img,
main .process-flow > * > img,
main .product-display-grid > * > img,
main .promo-banner-shell > * > img,
main .pros-cons-section > * > img,
main .review-carousel > * > img,
main .ribbon-banner > * > img,
main .side-nav-container > * > img,
main .stats-overview > * > img,
main .ui-card-container > * > img,
main .wp-block-columns > * > img,
main .wp-block-group > * > img,
  main .author-card > * > picture,
main .benefits-section > * > picture,
main .block-block > * > picture,
main .brand-logo-section > * > picture,
main .breadcrumb-wrap > * > picture,
main .cta-block > * > picture,
main .elementor-widget-wrap > * > picture,
main .event-timeline > * > picture,
main .faq-accordion > * > picture,
main .faq-mini-list > * > picture,
main .features-grid > * > picture,
main .game-category-grid > * > picture,
main .how-it-works > * > picture,
main .is-style-footer > * > picture,
main .is-style-header > * > picture,
main .media-entry-section > * > picture,
main .payout-section > * > picture,
main .process-flow > * > picture,
main .product-display-grid > * > picture,
main .promo-banner-shell > * > picture,
main .pros-cons-section > * > picture,
main .review-carousel > * > picture,
main .ribbon-banner > * > picture,
main .side-nav-container > * > picture,
main .stats-overview > * > picture,
main .ui-card-container > * > picture,
main .wp-block-columns > * > picture,
main .wp-block-group > * > picture,
  main .author-card > * > figure,
main .benefits-section > * > figure,
main .block-block > * > figure,
main .brand-logo-section > * > figure,
main .breadcrumb-wrap > * > figure,
main .cta-block > * > figure,
main .elementor-widget-wrap > * > figure,
main .event-timeline > * > figure,
main .faq-accordion > * > figure,
main .faq-mini-list > * > figure,
main .features-grid > * > figure,
main .game-category-grid > * > figure,
main .how-it-works > * > figure,
main .is-style-footer > * > figure,
main .is-style-header > * > figure,
main .media-entry-section > * > figure,
main .payout-section > * > figure,
main .process-flow > * > figure,
main .product-display-grid > * > figure,
main .promo-banner-shell > * > figure,
main .pros-cons-section > * > figure,
main .review-carousel > * > figure,
main .ribbon-banner > * > figure,
main .side-nav-container > * > figure,
main .stats-overview > * > figure,
main .ui-card-container > * > figure,
main .wp-block-columns > * > figure,
main .wp-block-group > * > figure,
  main .author-card > * > * > img,
main .benefits-section > * > * > img,
main .block-block > * > * > img,
main .brand-logo-section > * > * > img,
main .breadcrumb-wrap > * > * > img,
main .cta-block > * > * > img,
main .elementor-widget-wrap > * > * > img,
main .event-timeline > * > * > img,
main .faq-accordion > * > * > img,
main .faq-mini-list > * > * > img,
main .features-grid > * > * > img,
main .game-category-grid > * > * > img,
main .how-it-works > * > * > img,
main .is-style-footer > * > * > img,
main .is-style-header > * > * > img,
main .media-entry-section > * > * > img,
main .payout-section > * > * > img,
main .process-flow > * > * > img,
main .product-display-grid > * > * > img,
main .promo-banner-shell > * > * > img,
main .pros-cons-section > * > * > img,
main .review-carousel > * > * > img,
main .ribbon-banner > * > * > img,
main .side-nav-container > * > * > img,
main .stats-overview > * > * > img,
main .ui-card-container > * > * > img,
main .wp-block-columns > * > * > img,
main .wp-block-group > * > * > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .wp-block-cover,
  .wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wp-block-group > *,
  .wp-block-group [class*="copy"],
  .wp-block-group [class*="content"],
  .wp-block-group [class*="body"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-left-width: 0 !important;
  }
  .wp-block-heading,
  .wp-block-group h1 {
    font-size: clamp(1.7rem, 8vw, 2.35rem) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

.pros-cons-section .pros-list-item:last-child p,.pros-cons-section .cons-list-item:last-child p{margin-bottom:0}

@media (max-width: 800px){
  .wp-block-columns{ grid-template-columns: 1fr; }
  .wp-block-columns .split-col-right{ transform: none; }
}

a[class*="btn"],
a[class*="-cta-"],
button,
[class*="Btn"],
[class*="-btn-"] {
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.is-style-header .sub-menu .sub-menu::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
}

.slider-pagination-bullet:hover,
.slider-pagination-bullet:focus-visible,
.slider-pagination-bullet.elementor-active {
  background: var(--color-accent);
}

.review-carousel .review-quote { margin: 0 0 12px; color: var(--color-muted); }

.is-style-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 20px;
}

.menu-toggle[aria-expanded="true"]::after {
  content: "✕";
}

.wp-block-group .wp-block-cover__text{
  margin: 0; color: color-mix(in srgb, var(--color-on-contrast) 84%, transparent);
  max-width: 40rem; font-size: 1.02rem; line-height: 1.55;
}

.media-entry-section .media-text-content h2{
  margin: 0 0 10px; color: var(--color-accent-contrast);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Hub parent that is itself the current page: readable, not a fat tree paint. */
.sidebar-primary li.elementor-active:has(> ul) > a {
  color: var(--color-text);
  font-weight: 700;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  box-shadow: none;
}

@font-face {
  font-family: 'Lato';
  src: url('/assets/fonts/lato-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

.wp-block-navigation__container .wp-block-details__summary {
  display: none;
  gap: 0;
  padding: 2px 0 8px 10px;
  margin: 0 0 4px 8px;
  border-left: 2px solid var(--color-border);
}

.event-timeline{display:flex;gap:17px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;min-width:0}

.is-style-header .elementor-block {
  display: flex;
  gap: 8px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.features-grid .feature-item p{ margin: 0; color: var(--color-muted); }

@media(max-width:600px){.author-card{grid-template-columns:1fr}}

.entry-content { color: var(--color-muted); line-height: 1.65; }

.section-overview.e-visible {
  transform: translateX(-50%) translateY(0);
}

.brand-logo-section .brand-logo-item span{display:block;line-height:1.3;color:var(--color-on-contrast);word-break:break-word}

.pros-cons-section .pros-list-col,.pros-cons-section .cons-list-col{padding:clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) calc(clamp(14px, calc(14px + 0.0477 * (100vw - 360px)), 35px) + 10px);min-width:0;box-sizing:border-box}

.is-style-footer .footer-identity strong {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* __va_widget_css_begin__ */


.elementor-widget-wrap,
.wp-block-section {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  /* Reserve space before match list paints (mobile CLS). */
  min-height: 280px;
}

.site-wrapper {
  width: 100%;
}

.wp-block-group__inner-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--color-text);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}

.entry-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}

.has-small-font-size {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.call-to-action {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.call-to-action:hover {
  background: var(--color-accent-2);
}

.wp-block-search {
  padding: 14px 20px 0;
}

.wp-block-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.85rem;
}

.wp-block-search__input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-color: var(--color-accent);
}

.no-results-found {
  padding: 16px 20px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.secondary-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 0;
}

.tab-trigger {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tab-trigger:hover {
  border-color: var(--color-accent);
}

.is-tab-active,
.tab-trigger.is-tab-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.page-content {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Baseline vertical spacing between match rows — was only ever set inside the
   ≥640px grid rule below, so below that width [data-ywkv15n="v34r1ix"]
   had no display/gap of its own and rows (no margin of their own either) sat
   flush against each other with zero space between on mobile. Applies to
   every variant; the ≥640px rule overrides display to grid for the ones that
   go multi-column there. */
[data-ywkv15n="v34r1ix"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  [data-ywkv15n="v34r1ix"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
}

/* Match rows — shared by the cached top list and JS-driven search results. */
.wp-block-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.league-meta {
  flex: 0 0 100%;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.entry-date {
  font-size: 0.75rem;
  color: var(--color-muted);
  order: 3;
}

.match-teams {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  order: 2;
}

.match-teams span {
  color: inherit;
}

.odds-display {
  display: flex;
  gap: 6px;
  order: 4;
  flex: 0 0 100%;
}

.odds-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.85rem;
}

.odds-button:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.odds-button .bet-outcome {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
}

.odds-button .bet-price {
  font-weight: 700;
  color: var(--color-text);
}

/* Search / browse results — compact two-column row: team names left, kickoff
   time right, "Show markets" toggle as its own full-width row below (it reuses
   the same odd_button class as the 1/X/2 pills, so it needs its own override —
   see [data-ywkv15n="v2ulp0f"] below — or it renders squeezed
   into the flex row next to the team names). */
.wp-block-search__results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* No side padding/margin of its own — flush with the box edges, individual
     rows carry their own inset via border + padding rather than the
     container adding a second, redundant gutter on top of theirs. */
  padding: 16px 0 20px;
  margin: 0;
}

/* Plain flex-wrap, not grid: league own line, then teams/time/button flow
   left-to-right and each wraps to a new line only when it doesn't fit —
   exactly "same line as the match name+date if there's room, own line if
   not", which grid's explicit placement can't express but wrap naturally does. */
.wp-block-row[data-ywkv15n="vyw7lhs"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}

.wp-block-row[data-ywkv15n="vyw7lhs"] > .league-meta {
  flex: 0 0 100%;
}

.wp-block-row[data-ywkv15n="vyw7lhs"] > .match-teams {
  flex: 1 1 auto;
  min-width: 140px;
  order: 1;
}

.wp-block-row[data-ywkv15n="vyw7lhs"] > .entry-date {
  flex: 0 0 auto;
  white-space: nowrap;
  order: 2;
}

.odds-button[data-ywkv15n="v2ulp0f"] {
  order: 3;
  flex: 0 0 auto;
  flex-direction: row;
  width: auto;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--color-bg);
  white-space: nowrap;
}

.wp-block-row[data-ywkv15n="vyw7lhs"] > .odds-display,
.wp-block-row[data-ywkv15n="vyw7lhs"] > .betting-markets,
.wp-block-row[data-ywkv15n="vyw7lhs"] > [data-ywkv15n="vfz3dws"] {
  flex: 0 0 100%;
  order: 4;
}

.betting-markets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.betting-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--color-surface);
}

.market-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.selected-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.82rem;
}

.selected-item:hover {
  border-color: var(--color-accent);
}

.price-tag {
  font-weight: 700;
  color: var(--color-accent);
}

/* v11 — bold segmented tabs: underline-active instead of pill buttons. */
.elementor-widget-wrap .secondary-navigation {
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}

.elementor-widget-wrap .tab-trigger {
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.elementor-widget-wrap .is-tab-active,
.elementor-widget-wrap .tab-trigger.is-tab-active {
  background: transparent;
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* __va_widget_css_begin__ */
.elementor-widget-wrap,
.wp-block-section {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  /* Reserve space before match list paints (mobile CLS). */
  min-height: 280px;
}

.site-wrapper {
  width: 100%;
}

.wp-block-group__inner-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--color-text);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}

.entry-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}

.has-small-font-size {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.call-to-action {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.call-to-action:hover {
  background: var(--color-accent-2);
}

.wp-block-search {
  padding: 14px 20px 0;
}

.wp-block-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.85rem;
}

.wp-block-search__input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-color: var(--color-accent);
}

.no-results-found {
  padding: 16px 20px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.secondary-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 0;
}

.tab-trigger {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tab-trigger:hover {
  border-color: var(--color-accent);
}

.is-tab-active,
.tab-trigger.is-tab-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.page-content {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Baseline vertical spacing between match rows — was only ever set inside the
   ≥640px grid rule below, so below that width [data-ywkv15n="v34r1ix"]
   had no display/gap of its own and rows (no margin of their own either) sat
   flush against each other with zero space between on mobile. Applies to
   every variant; the ≥640px rule overrides display to grid for the ones that
   go multi-column there. */
[data-ywkv15n="v34r1ix"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  [data-ywkv15n="v34r1ix"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
}

/* Match rows — shared by the cached top list and JS-driven search results. */
.wp-block-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.league-meta {
  flex: 0 0 100%;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.entry-date {
  font-size: 0.75rem;
  color: var(--color-muted);
  order: 3;
}

.match-teams {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  order: 2;
}

.match-teams span {
  color: inherit;
}

.odds-display {
  display: flex;
  gap: 6px;
  order: 4;
  flex: 0 0 100%;
}

.odds-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.85rem;
}

.odds-button:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.odds-button .bet-outcome {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
}

.odds-button .bet-price {
  font-weight: 700;
  color: var(--color-text);
}

/* Search / browse results — compact two-column row: team names left, kickoff
   time right, "Show markets" toggle as its own full-width row below (it reuses
   the same odd_button class as the 1/X/2 pills, so it needs its own override —
   see [data-ywkv15n="v2ulp0f"] below — or it renders squeezed
   into the flex row next to the team names). */
.wp-block-search__results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* No side padding/margin of its own — flush with the box edges, individual
     rows carry their own inset via border + padding rather than the
     container adding a second, redundant gutter on top of theirs. */
  padding: 16px 0 20px;
  margin: 0;
}

/* Plain flex-wrap, not grid: league own line, then teams/time/button flow
   left-to-right and each wraps to a new line only when it doesn't fit —
   exactly "same line as the match name+date if there's room, own line if
   not", which grid's explicit placement can't express but wrap naturally does. */
.wp-block-row[data-ywkv15n="vyw7lhs"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}

.wp-block-row[data-ywkv15n="vyw7lhs"] > .league-meta {
  flex: 0 0 100%;
}

.wp-block-row[data-ywkv15n="vyw7lhs"] > .match-teams {
  flex: 1 1 auto;
  min-width: 140px;
  order: 1;
}

.wp-block-row[data-ywkv15n="vyw7lhs"] > .entry-date {
  flex: 0 0 auto;
  white-space: nowrap;
  order: 2;
}

.odds-button[data-ywkv15n="v2ulp0f"] {
  order: 3;
  flex: 0 0 auto;
  flex-direction: row;
  width: auto;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--color-bg);
  white-space: nowrap;
}

.wp-block-row[data-ywkv15n="vyw7lhs"] > .odds-display,
.wp-block-row[data-ywkv15n="vyw7lhs"] > .betting-markets,
.wp-block-row[data-ywkv15n="vyw7lhs"] > [data-ywkv15n="vfz3dws"] {
  flex: 0 0 100%;
  order: 4;
}

.betting-markets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.betting-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--color-surface);
}

.market-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.selected-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.82rem;
}

.selected-item:hover {
  border-color: var(--color-accent);
}

.price-tag {
  font-weight: 700;
  color: var(--color-accent);
}

/* v11 — bold segmented tabs: underline-active instead of pill buttons. */
.elementor-widget-wrap .secondary-navigation {
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}

.elementor-widget-wrap .tab-trigger {
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.elementor-widget-wrap .is-tab-active,
.elementor-widget-wrap .tab-trigger.is-tab-active {
  background: transparent;
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
/* __va_widget_css_end__ */

/* __va_sidebar_active_contrast__ */
/* Appended at the end of the styles bundle AFTER harden/widget sync.
   Safety net: never paint nested links via an ancestor .elementor-active, and keep
   the chevron toggle free of active fills / washed-out on-accent text.
   Soft-fill readable text for elevated/floating skins lives in chrome_skins
   (`color: var(--color-text) !important`) so solid-accent variants (v2/v7)
   keep white-on-accent when those skins are not selected. */
.sidebar-primary li.elementor-active > ul a {
  background: transparent !important;
  box-shadow: none !important;
}
.sidebar-primary li.elementor-active > ul a:not([aria-current="page"]):not(.elementor-active) {
  color: var(--color-muted) !important;
  font-weight: 500 !important;
}
.sidebar-primary li.elementor-active:has(> ul) > a {
  box-shadow: none !important;
}
.sidebar-primary li:has(> ul):not(.elementor-active):has(.elementor-active) > a,
.sidebar-primary li:has(> ul):not(.elementor-active):has(.elementor-active) > span {
  color: var(--color-text) !important;
  font-weight: 600;
  background: transparent !important;
  box-shadow: none !important;
}
.sidebar-primary .sidebar-dropdown-toggle,
.sidebar-primary li.elementor-active > .sidebar-dropdown-toggle,
.sidebar-primary li:has(.elementor-active) > .sidebar-dropdown-toggle {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-muted) !important;
}

/* Hover/active: neutralize link-style gradient_text transparent fill.
   Soft-fill chrome skins replace the gradient bg with an opaque mix via
   !important; without resetting -webkit-text-fill-color the label vanishes.
   Use currentColor so solid-accent active (on-accent) and soft-fill
   (--color-text) both keep the fill matching the intended color. */
.sidebar-primary a:hover,
.sidebar-primary a:focus-visible,
.sidebar-primary li.elementor-active > a,
.sidebar-primary a.elementor-active,
.sidebar-primary a[aria-current="page"] {
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}