/* ===========================================================================
   mono-03-verde — the Verde editorial casino landing.
   Glass header · veiled hero band · intro with the welcome-bonus card aside ·
   one continuous editorial band for the body · bonus/game grids · payments
   table · plus-mark FAQ · gradient CTA strip · deep chrome footer.

   COLOUR CONTRACT (BR-GEN-05, BR-GEN-04):
   The whole palette hangs off three CSS variables the page injects inline from
   the per-site branding:
       --bg      background colour   (branding.backgroundColor, may be null)
       --accent  accent colour       (branding.accentColor, may be null)
       --text    text colour         (branding.textColor, always present)
   The `html` rule right below carries the package's own Verde greens as the
   DEFAULTS for those three; the page's inline `:root` block overrides whichever
   of them the site configured. `:root` outranks `html` on specificity, so the
   per-site palette always wins whichever order the two land in, and a site that
   configured no background or no accent still renders the Verde look instead of
   an undefined variable. Every other tone below is DERIVED from the three with
   color-mix() + `transparent` — outside the defaults there is not a single
   colour literal, so the stylesheet re-skins per site with no edits (the Verde
   green is whatever accent the site carries). Fonts are a system stack; no
   external font, script or image is fetched.

   STATE CONTRACT (BR-GEN-03):
   Element state and every JS hook is a data-* attribute — [data-open] on the
   nav drawer, [data-nav-open] on the document root, [data-scrolled] on the
   header, plus data-header, data-nav-toggle, data-primary-nav, data-section,
   data-faq, data-aff — never a class: the per-domain obfuscation step renames
   class tokens in the HTML and in this file, but never touches data-*, so a
   class-based state driven from JS would desync. `is-active` is the one
   modifier class here and is emitted at render time only (no JS reads it), so
   the rename stays in lockstep.
   =========================================================================== */

/* The package's own Verde palette — the defaults every derived tone below falls
   back to (BR-GEN-05). Deliberately on `html` rather than `:root`: both match
   the same element, but `:root` (a pseudo-class) outranks `html` (a type
   selector), so the per-site `:root` block the page inlines overrides these
   whatever the source order. A site whose branding carries no background colour
   or no accent colour inlines no override for that variable and keeps the Verde
   value here. */
html {
  --bg: #f7f9f6;
  --accent: #0fad7f;
  --text: #1f2a24;
}

:root {
  /* Derived surface / line / muted tones (from --bg + --text). */
  --bg-2: color-mix(in srgb, var(--bg) 95%, var(--text));
  --surface: color-mix(in srgb, var(--bg) 93%, var(--text));
  --surface-2: color-mix(in srgb, var(--bg) 86%, var(--text));
  --line: color-mix(in srgb, var(--bg) 80%, var(--text));
  --line-2: color-mix(in srgb, var(--bg) 68%, var(--text));
  --muted: color-mix(in srgb, var(--text) 62%, var(--bg));
  --muted-2: color-mix(in srgb, var(--text) 80%, var(--bg));

  /* Derived accent tints. */
  --accent-2: color-mix(in srgb, var(--accent) 82%, var(--text));
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 34%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 74%, var(--text));
  --on-accent: color-mix(in srgb, var(--bg) 88%, var(--text));

  /* Derived shadows (translucent shades of the text tone). */
  --shadow-sm: color-mix(in srgb, var(--text) 8%, transparent);
  --shadow: color-mix(in srgb, var(--text) 14%, transparent);
  --shadow-lg: color-mix(in srgb, var(--text) 22%, transparent);

  /* Verde chrome — the deep contrast band the footer occupies, plus the
     translucent veils the sticky header and the hero background sit behind.
     Derived so the band always contrasts with the page whichever way the
     palette leans (dark band on a light site, light band on a dark one). */
  --chrome: color-mix(in srgb, var(--text) 94%, var(--accent));
  --chrome-text: color-mix(in srgb, var(--bg) 92%, var(--accent));
  --chrome-muted: color-mix(in srgb, var(--bg) 68%, var(--text));
  --chrome-dim: color-mix(in srgb, var(--bg) 50%, var(--text));
  --chrome-line: color-mix(in srgb, var(--text) 78%, var(--bg));
  --header-veil: color-mix(in srgb, var(--bg) 90%, transparent);
  --hero-veil-top: color-mix(in srgb, var(--bg) 82%, transparent);
  --hero-veil-bottom: color-mix(in srgb, var(--bg) 90%, transparent);

  /* Geometry. */
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container: 1180px;
  --container-narrow: 880px;
  --header-h: 74px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Noto Sans', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
/* Background scroll lock while the mobile drawer is open (set from JS as a
   data-* attribute, never a class). */
html[data-nav-open='true'] {
  overflow: hidden;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--muted-2);
  line-height: 1.2;
}
h1 {
  font-size: 2.4rem;
  line-height: 1.15;
}
h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.3;
}
h4 {
  font-size: 1.1rem;
  line-height: 1.35;
}
p {
  margin: 0 0 1rem;
}
ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}
li {
  margin-bottom: 0.35rem;
}

.x1w8lm1j {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.xb6w433 {
  max-width: var(--container-narrow);
}

/* ============== BUTTONS ============== */
.x2qn5on {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.x126n4nr {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 14px var(--accent-ring);
}
.x126n4nr:hover {
  background: var(--accent-2);
  box-shadow: 0 10px 22px var(--accent-ring);
  transform: translateY(-1px);
}
.x126n4nr:active {
  transform: translateY(0);
}
.xw9a8ef {
  background: transparent;
  color: var(--muted-2);
}
.xw9a8ef:hover {
  background: var(--surface-2);
}
.xylwqv7 {
  background: transparent;
  color: var(--accent-text);
  border-color: var(--accent);
}
.xylwqv7:hover {
  background: var(--accent-soft);
}
.xay3afe {
  padding: 15px 28px;
  font-size: 16px;
}
.xdtbk8u {
  width: 100%;
}

/* ============== HEADER ============== */
.xx99ccx {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-veil);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s ease;
}
.xx99ccx[data-scrolled='true'] {
  box-shadow: 0 6px 20px var(--shadow-sm);
}
.x18xs44s {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}
.x1w7wxhp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--muted-2);
  flex-shrink: 0;
}
.x14ucdl5 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--on-accent);
  box-shadow: 0 6px 14px var(--accent-ring);
  flex-shrink: 0;
}
.x14i5c3q {
  line-height: 1;
}
/* Logo chip — replaces the inline-SVG mark. max-height + object-fit keep a wide
   wordmark inside the chip without distortion or horizontal overflow. */
.x1awb723 {
  width: 56px;
  height: 56px;
  padding: 4px;
  background: var(--surface);
  box-shadow: 0 2px 8px var(--shadow-sm);
}
.xxkj76x {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.xe6r2fz {
  width: 48px;
  height: 48px;
  box-shadow: none;
}
.x18loaj4 {
  max-height: 40px;
}

.x1p3zyxh {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  flex: 1;
}
.x1bjgko9 {
  padding: 9px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  color: var(--muted);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.x1bjgko9:hover {
  color: var(--accent-text);
  background: var(--surface-2);
}
.x1bjgko9.xde5oe2 {
  color: var(--accent-text);
  background: var(--accent-soft);
  font-weight: 600;
}

/* margin-left:auto keeps the auth cluster pinned right even with no nav. */
.xcb4y6k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
/* Auth CTAs that live inside the mobile drawer; hidden on desktop, where the
   header cluster already carries them. */
.x11utm1g {
  display: none;
}

.x19jly4s {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted-2);
  align-items: center;
  justify-content: center;
}
.x19jly4s .x15ngi6b {
  display: none;
}
[data-nav-toggle][aria-expanded='true'] .x162agy3 {
  display: none;
}
[data-nav-toggle][aria-expanded='true'] .x15ngi6b {
  display: block;
}

@media (max-width: 960px) {
  /* Let the brand flex/ellipsis so long names never push the CTAs off-screen. */
  .x18xs44s {
    gap: 12px;
  }
  .x1w7wxhp {
    flex: 1 1 auto;
    min-width: 0;
  }
  .x14ucdl5 {
    flex-shrink: 0;
  }
  .x14i5c3q {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Mobile nav drawer. .site-header carries backdrop-filter, which makes it the
     containing block for position:fixed descendants — a fixed drawer would
     collapse against the 74px header instead of the viewport. So the drawer is
     absolute, hung below the sticky header and sized to the remaining viewport
     height. dvh avoids the iOS URL-bar jump; vh is the older-engine fallback. */
  .x1p3zyxh {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 18px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }
  .x1p3zyxh[data-open='true'] {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .x1bjgko9 {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 10px;
  }
  .x19jly4s {
    display: inline-flex;
  }

  .xcb4y6k {
    flex-shrink: 0;
    gap: 8px;
  }
  .xcb4y6k .x2qn5on {
    padding: 8px 13px;
    font-size: 13px;
  }
  /* With a burger menu present the drawer carries login + register, so the
     header keeps only the primary CTA visible. Pages without a drawer
     (.header-inner without --nav) keep both buttons in the header. */
  .x1s1oga2 .xcb4y6k .xw9a8ef {
    display: none;
  }

  .x11utm1g {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .x11utm1g .x2qn5on {
    padding: 13px 18px;
    font-size: 15px;
  }
}

/* ============== HERO BAND ============== */
.xw1dws1 {
  position: relative;
  padding: 56px 0;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 100% 0%, var(--accent-soft), transparent 60%),
    radial-gradient(700px 400px at 0% 80%, var(--accent-soft), transparent 70%), var(--bg);
}
/* Configured hero background: a real picture cover-cropped behind the copy.
   No background-attachment:fixed anywhere (it breaks on iOS). */
.xxsg9d5 {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.xxsg9d5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Palette veil so the hero copy stays legible over any photo. */
.x1je3fas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(var(--hero-veil-top), var(--hero-veil-bottom));
  pointer-events: none;
}
.xyd2l5v {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.xf9t2f0 {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.xf9uet5 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.x4egf0 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  flex-shrink: 0;
}
.xo2w0ht {
  display: block;
  flex: 1 1 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px var(--shadow);
}
.x8c6rgi {
  width: 100%;
}

/* ============== AUTHOR BYLINE / UPDATED DATE ============== */
.xhkxzmi {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.xqxtvd8 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.xzyj64b {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.x18fv9t4 {
  font-weight: 700;
  color: var(--muted-2);
}
.x15icz0r {
  font-size: 14px;
  color: var(--muted);
}
.x1ljwkf1 {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.x204uex {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* ============== TABLE OF CONTENTS ============== */
.xpz6awe {
  padding: 24px 0;
}
.xghjtxs {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: 0 1px 2px var(--shadow-sm);
}
.x1jpim1l {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted-2);
}
.x13k8z8n {
  margin: 0;
  padding: 0 0 0 1.2em;
  display: grid;
  gap: 6px;
}
.x1rdyhxt {
  color: var(--muted);
}
.x1wddg90 {
  color: var(--accent-text);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.x1wddg90:hover {
  border-bottom-color: var(--accent);
}

/* ============== INTRO (hero copy + bonus card aside) ============== */
.x1ypgbol {
  padding: 48px 0 64px;
  background:
    radial-gradient(800px 460px at 90% 0%, var(--accent-soft), transparent 62%), var(--bg);
}
.x1yb88ch {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.x1lu4bx {
  grid-template-columns: 1fr;
  max-width: 780px;
}
.x1lkadz6 {
  font-size: 3rem;
  line-height: 1.08;
  margin-bottom: 18px;
}
.x16c8n99 {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
}
.x16c8n99 p:last-child {
  margin-bottom: 0;
}
.xahow6l {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.x1vj4549 {
  position: relative;
}
.x1vp1pkf {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 24px 60px var(--shadow);
}
.x1vp1pkf::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 100% 0%, var(--accent-soft), transparent 60%);
  pointer-events: none;
}
.x1gyzkmm {
  position: relative;
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent-text);
}
.x131av00 {
  position: relative;
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--muted);
}
.x131av00 p:last-child {
  margin-bottom: 0;
}
.x1vp1pkf .x2qn5on {
  position: relative;
}

@media (max-width: 880px) {
  .x1ypgbol {
    padding: 36px 0 48px;
  }
  .x1yb88ch {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .x1lkadz6 {
    font-size: 2.2rem;
  }
}

/* ============== SECTION HEADS ============== */
.xw8q1j8 {
  padding: 64px 0;
}
.xl7ywi1 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.x1lgqyrm {
  text-align: center;
  flex-direction: column;
  align-items: center;
}
.x1qnihch {
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0;
}

/* ============== EDITORIAL BAND (grouped text sections) ============== */
.x1tzuty7 {
  padding: 56px 0;
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.xr8hkuh {
  margin-bottom: 48px;
}
.xr8hkuh:last-child {
  margin-bottom: 0;
}
.xxwioy4 {
  position: relative;
  padding-left: 18px;
  margin-bottom: 14px;
  font-size: 1.6rem;
}
.xxwioy4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
}
.x4kan0m {
  font-size: 16.5px;
  line-height: 1.7;
}
.x1vwvsbs {
  display: flow-root; /* contain the float so the copy wraps around the image */
}
/* Floated side image. A fixed display size keeps every block image predictable
   and reserves its space (no layout shift) whatever the source dimensions:
   40% of the text column (max 400px), locked to 4:3, cover-cropped. */
.xzectx1 {
  width: 40%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--shadow-sm);
  float: right;
  margin: 4px 0 18px 28px;
}
.x1w3wfte {
  float: left;
  margin: 4px 28px 18px 0;
}
/* Images embedded INSIDE the body copy — kept in flow, centred and capped so a
   large source never overflows the column. Scoped to the prose wrapper so it
   never clobbers the floated side image above. */
.x1g6d3wz img {
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  margin: 20px auto;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--shadow-sm);
  object-fit: contain;
}
.x1g6d3wz h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.2rem;
}
.x1g6d3wz h4 {
  margin: 1.2rem 0 0.5rem;
  font-size: 1.05rem;
}
.x1g6d3wz a {
  color: var(--accent-text);
  text-decoration: underline;
}
.x1g6d3wz ul li::marker {
  color: var(--accent);
}
.x1g6d3wz table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15px;
}
.x1g6d3wz th,
.x1g6d3wz td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.x1g6d3wz th {
  background: var(--accent-soft);
  color: var(--muted-2);
  font-weight: 600;
}

@media (max-width: 720px) {
  .xzectx1,
  .x1w3wfte {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
  }
}

/* ============== BONUSES ============== */
.xvirk0q {
  background: var(--bg);
}
.xicwyt8 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.x1fsbeym {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px var(--shadow-sm);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.x1fsbeym:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow);
  border-color: var(--accent);
}
.x1exnget {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--muted-2);
}
.xm1a4rf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 800;
}
.xtof9ya {
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-text);
}
.x1jnn4u4 {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted-2);
}
.x1l2v21l {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.x1l2v21l p:last-child {
  margin-bottom: 0;
}
.xfwba3z {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.x172xmtq {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ============== GAMES ============== */
.xbyarln {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.x1e0pw8l {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.x7ruv9h {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.x7ruv9h:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--shadow);
  border-color: var(--accent);
}
.x17gni8g {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface-2) 100%);
}
.x17gni8g img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.x7ruv9h:hover .x17gni8g img {
  transform: scale(1.05);
}
.xu8p2l6 {
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--accent-text);
}
.x1id0qtx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
}
.xvegjet {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xkekqb1,
.x1eobozr {
  font-size: 12.5px;
  color: var(--muted);
}
.xkekqb1 {
  color: var(--accent-text);
  font-weight: 700;
}

/* ============== PAYMENTS ============== */
.xvjtesi {
  background: var(--bg);
}
.xknk653 {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.x1dkl1ri {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.x1dkl1ri th,
.x1dkl1ri td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.x1dkl1ri th {
  background: var(--surface-2);
  color: var(--muted-2);
  font-weight: 600;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.x1dkl1ri tbody tr:last-child td {
  border-bottom: 0;
}
.x1dkl1ri tbody tr:hover {
  background: var(--accent-soft);
}
.x1dkl1ri td:first-child {
  font-weight: 600;
  color: var(--muted-2);
}

/* ============== FAQ ============== */
.x98lzrn {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.x1sjw2ks {
  max-width: 760px;
  margin: 0 auto;
}
.x17j8k97 {
  border-bottom: 1px solid var(--line);
}
.x17j8k97:first-child {
  border-top: 1px solid var(--line);
}
.xg2o5km {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--muted-2);
}
.xg2o5km::-webkit-details-marker {
  display: none;
}
.xg2o5km:hover {
  color: var(--accent-text);
}
.x11pbj1u {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.x11pbj1u::before,
.x11pbj1u::after {
  content: '';
  position: absolute;
  background: var(--accent);
  border-radius: 1px;
}
.x11pbj1u::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}
.x11pbj1u::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}
.x17j8k97[open] .x11pbj1u {
  transform: rotate(45deg);
}
.x2d70km {
  padding: 0 4px 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}
.x2d70km p:last-child {
  margin-bottom: 0;
}

/* ============== CTA STRIP ============== */
.x19u7lk9 {
  padding: 48px 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--on-accent);
}
.x1r4pnot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.xudrwp7 {
  color: var(--on-accent);
  font-size: 1.7rem;
  margin-bottom: 6px;
}
.xb3wjvm {
  color: var(--on-accent);
  opacity: 0.9;
  margin: 0;
}
.x19u7lk9 .x126n4nr {
  background: var(--bg);
  color: var(--accent-text);
  box-shadow: 0 8px 18px var(--shadow-lg);
}
.x19u7lk9 .x126n4nr:hover {
  background: var(--surface-2);
  color: var(--accent-text);
}

/* ============== FOOTER ============== */
.xtplnfi {
  background: var(--chrome);
  color: var(--chrome-text);
  padding: 56px 0 0;
}
.x1nnbkd8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 36px;
}
.x1vqdnq5 .x1w7wxhp,
.x1vqdnq5 .x14i5c3q {
  color: var(--chrome-text);
}
.x1ieims0 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: flex-end;
}
.x1ieims0 a {
  padding: 4px 0;
  font-size: 14.5px;
  color: var(--chrome-muted);
  transition: color 0.15s ease;
}
.x1ieims0 a:hover {
  color: var(--chrome-text);
}
.xhdywot a {
  font-size: 13.5px;
}
.x1hb1wr5 {
  border-top: 1px solid var(--chrome-line);
  padding: 28px 0 6px;
}
.x1rxvm4q + .x1rxvm4q {
  margin-top: 22px;
}
.xmgf0xc {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  margin-bottom: 14px;
}
.x1f9hi9f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  max-width: 760px;
  margin: 0 auto;
}
.x18gwfkz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--surface);
}
.x18gwfkz img {
  height: 22px;
  width: auto;
  object-fit: contain;
}
.x1hvt3rw {
  border-top: 1px solid var(--chrome-line);
  padding: 18px 0;
  margin-top: 28px;
}
.x2m28m6 {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--chrome-dim);
}
.x2m28m6 p:last-child {
  margin-bottom: 0;
}
.x2m28m6 a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 880px) {
  .x1nnbkd8 {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .x1ieims0 {
    justify-content: flex-start;
  }
}

/* ============== ANCHORS ============== */
/* Sticky-header-aware scroll offset for every anchored section. */
.x1ypgbol,
.xr8hkuh,
.xvirk0q,
.xbyarln,
.xvjtesi,
.x98lzrn {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

@media (max-width: 560px) {
  .xicwyt8 {
    grid-template-columns: 1fr;
  }
  .x1e0pw8l {
    grid-template-columns: repeat(2, 1fr);
  }
  .x1awb723 {
    width: 46px;
    height: 46px;
  }
  .xxkj76x {
    max-height: 38px;
  }
  .x1lkadz6 {
    font-size: 1.9rem;
  }
  .xw8q1j8 {
    padding: 48px 0;
  }
}