:root {
  --fg: #E9E8F5;
  --bg: #0F1020;
  --primary: #C7C4F0;
  --accent: #5B5BEF;
  --grad-from: #171734;
  --grad-to: #0F1020;
  --muted: #64748b;
  --border: #e5e7eb;
  --surface: #f8fafc;
  --font-heading: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.875rem;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.10);
  --measure: 68ch;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  /* Sticky-footer scaffold: full-height flex column so the footer
     (margin-top:auto) sinks to the viewport bottom on short pages
     instead of floating mid-page. Full-width children (header/hero/
     footer) stretch; max-width content (article / article-index /
     layout-slot--pageBody) stays centred via its own margin:auto. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
  margin: 1.5em 0 0.5em;
  /* Same reason as the system sheet above: one long unbroken word ran off
     the edge of a phone. */
  overflow-wrap: break-word;
}
h1 { font-size: 2.5rem; margin-top: 0; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.375rem; }
p { margin: 0.75em 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
blockquote { border-left: 4px solid var(--border); padding-left: 1rem; color: var(--muted); }
/* Tables (S-10). The wrapper owns horizontal overflow so a wide table
   scrolls inside its own box instead of making the whole page scroll
   sideways. Tables carry per-cell data-label (the column header), which the
   mobile rule below uses to restack each row as a labelled card. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; margin: 0; }
th, td { border: 1px solid var(--border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
th { background: var(--surface); font-weight: 600; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.callout { border-left: 4px solid; padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 4px; }
.callout--info    { border-color: #2563eb; background: #eff6ff; }
.callout--warning { border-color: #d97706; background: #fffbeb; }
.callout--pro-tip { border-color: #10b981; background: #ecfdf5; }
.callout--note    { border-color: #6b7280; background: var(--surface); }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pros li::marker { content: '✔  '; color: #10b981; }
.cons li::marker { content: '✗  '; color: #ef4444; }
.faq dt { font-weight: 600; margin-top: 1rem; }
.faq dd { margin-left: 0; color: var(--muted); }
/* Steps. The number is the browser's own <ol> counter, drawn as a disc so a
   step has an edge for the eye to land on — a numbered list where the number
   looks like text reads as prose that happens to be indented. */
.steps { margin: 1.25rem 0; }
.steps__intro { margin: 0 0 0.75rem; color: var(--muted); }
.steps__list { counter-reset: step; list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.75rem; }
.steps__step { counter-increment: step; position: relative; padding-left: 2.5rem; }
.steps__step::before { content: counter(step); position: absolute; left: 0; top: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85em; font-weight: 600; }
.steps__text { display: block; }
.steps__detail { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.92em; }
/* Icon list. A fixed icon column rather than a float: the text of a wrapping
   item lines up under itself instead of under the icon. */
.icon-list { list-style: none; padding: 0; margin: 1.25rem 0;
  display: flex; flex-direction: column; gap: 0.5rem; }
.icon-list__item { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem;
  align-items: start; }
.icon-list__icon { line-height: 1.5; }
.missing-operator {
  border: 1px dashed #f59e0b; background: #fffbeb;
  padding: 0.5rem 0.75rem; border-radius: 4px;
  color: #92400e; font-family: monospace; font-size: 0.85em;
}
/* Sticky header. CSS-only — position: sticky keeps the header pinned
   to the viewport while content scrolls, with a translucent backdrop
   so brand keeps visible without obscuring text below. Both the
   pre-Wave-R fallback (.site-header) and the section-block slot
   wrapper (.layout-slot--header) get the treatment so layout-builder
   and default sites look consistent. */
.site-header,
.layout-slot--header {
  position: sticky; top: 0; z-index: 50;
  /* --header-bg is set per-site (layout editor → headerBackground). When
     unset (NULL-config fallback sites) it's the translucent-white sticky
     look. */
  background: var(--header-bg, rgba(255, 255, 255, 0.92));
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* Full-bleed bar, but inset the CONTENT so the logo + nav line up with
     the page column below. The column is the page-max / page-gutter pair
     declared in the block sheet; the inset adds the gutter on top of the
     centring, otherwise the header content sits one gutter wider on each side
     than the column. max() keeps the gutter on narrow viewports where the
     calc goes negative. */
  padding: 0.85rem max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
  border-bottom: 1px solid var(--border);
}
.site-name {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.25rem; color: var(--header-fg, var(--primary)); text-decoration: none;
}
.site-name .logo {
  height: 40px; width: 40px; object-fit: contain; border-radius: 6px;
  /* white chip so a white-background logo stays visible on any header */
  background: #fff; padding: 3px; border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.article {
  max-width: 760px; margin: 2.5rem auto 4rem; padding: 0 1.5rem;
}
/* Default index-page layout (rendered when the site has no pageBody
   slot blocks defined — operator left it bare). The slot wrapper
   .layout-slot--pageBody already enforces max-width when section
   blocks ARE configured; this rule covers the fallback path. */
.article-index {
  max-width: 880px; margin: 3rem auto 4rem; padding: 0 1.5rem;
}
.article-index > h1 {
  font-size: 2.5rem; margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.article-index > h1::after {
  content: ''; display: block; width: 3rem; height: 3px;
  background: var(--accent); border-radius: 2px; margin-top: 0.75rem;
}
.article-list { list-style: none; padding: 0; }
.article-card {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 0; border-bottom: 1px solid var(--border);
}
/* Hover = highlight only, no layout shift (a padding/transform shift made
   the card content visibly jump). Title link colour-shifts via the rule
   below; card-variant border/shadow highlight lives in EXTRA_BLOCK_CSS. */
.article-card__body { flex: 1 1 auto; min-width: 0; }
.article-card h2 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.article-card h2 a { color: var(--primary); }
.article-card h2 a:hover { color: var(--accent); text-decoration: none; }
.article-card p { margin: 0; color: var(--muted); font-size: 0.95em; }
/* article-card thumbnails (shared: index list + article-list-grid block) */
.article-card__thumb {
  flex: 0 0 auto; width: 168px; aspect-ratio: 16 / 10;
  border-radius: 8px; overflow: hidden; background: var(--surface, #eee);
}
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card__thumb--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--thumb-h, 220) 52% 42%), hsl(calc(var(--thumb-h, 220) + 38) 58% 52%));
}
.article-card__thumb--ph span { font-size: 2.25rem; font-weight: 800; color: rgba(255,255,255,0.9); line-height: 1; }
/* Entity logo in a review hub row. A wordmark has to fit inside the tile;
   the cover crop above is for an article's hero photo and would cut it. */
/* Square and small. The 168px 16:10 tile above is sized for an article's hero
   photo; a brand mark stretched across it showed every soft edge it had. */
.article-card__thumb--logo {
  width: 5rem; aspect-ratio: 1; background: #fff; border: 1px solid var(--border);
}
.article-card__thumb--logo img { object-fit: contain; padding: 0.5rem; box-sizing: border-box; }
/* The brand's score in the site's rating, on the rows that have one. */
.review-hub__score {
  flex: 0 0 auto; align-self: center;
  font-weight: 700; font-size: 1.15rem; color: var(--accent);
}
@media (max-width: 560px) {
  .article-card { flex-direction: column; }
  .article-card__thumb { width: 100%; }
  /* Except a brand mark. Full width is right for an article's hero photo and
     ruinous for a 180px favicon: stretched across the column it filled half a
     phone screen with its own soft edges. The row keeps the mark beside the
     name instead of stacking under it. */
  .article-card--logo { flex-direction: row; align-items: center; }
  .article-card__thumb--logo { width: 4.5rem; flex: 0 0 auto; }

  /* Restack a labelled table as one card per row (S-10). Squeezing 5+
     columns into a phone width made comparison tables unreadable; each row
     becomes a stack of "Label: value" pairs instead. Only applies to tables
     that have headers to label with (.table--stacked). */
  .table--stacked { border: 0; }
  /* The wrapper's own frame comes off once the table is a stack of cards.
     Each row already draws its own border, so the wrapper's added a second
     one down both sides — and two tables in a row then read as one long
     bordered column instead of two separate tables. The gap between them is
     what separates them now. The class is put on the wrapper by the renderer
     rather than matched with :has(), which is not on every phone browser. */
  .table-scroll--stacked {
    border: 0; box-shadow: none; border-radius: 0; overflow: visible;
    margin: var(--space-6) 0;
  }
  .table--stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--stacked tbody tr {
    display: block; margin: 0 0 0.75rem; border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; background: var(--surface);
  }
  .table--stacked tbody tr:last-child { margin-bottom: 0; }
  .table--stacked tbody td, .table--stacked tbody th {
    display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between;
    border: 0; border-bottom: 1px solid var(--border); padding: 0.55rem 0.8rem; background: none;
    /* The value sits on the right of the row, so its own lines line up on the
       right too. Wrapped values used to start back at the left of their box —
       "Curaçao 8048/JAZ2021-" over "184" — which read as a second column that
       was not there. */
    text-align: right;
  }
  .table--stacked tbody tr > *:last-child { border-bottom: 0; }
  .table--stacked tbody td[data-label]::before {
    /* The label leads the row, so it is the heavier of the two. It used to be
       lighter AND smaller than the value it labels — muted grey at 0.85em
       against full-size body text — which put the emphasis on the answer and
       left the reader hunting for the question. */
    content: attr(data-label); font-weight: 700; color: var(--fg);
    flex: 0 0 42%; font-size: 1.02em; text-align: left;
  }
  /* The value, now the quieter half. */
  .table--stacked tbody td[data-label] { font-size: 0.94em; color: var(--muted); }
  /* A row that carries its own label as a th — the fact tables on brand, game
     and provider pages. The label used to render as a full-width band above
     the value, AND the value printed it again from data-label: the same word
     twice, the first one washed out in a surface-coloured strip. The td no
     longer carries data-label at all, and the two sit side by side.
     Adjacent-sibling, not :has() — this has to hold on every phone browser. */
  .table--stacked tbody th[scope="row"] {
    display: inline-block; width: 42%; vertical-align: top;
    font-weight: 700; font-size: 1.02em; color: var(--fg);
    background: none; text-align: left;
    /* No rule under it: side by side with the value, the cell border drew a
       line across 42% of the card and read as a stray underline. Each row is
       its own card here, so nothing needs separating inside one. */
    border-bottom: 0;
  }
  /* A FACT table is one table, not a stack of them. Every row here is a single
     label/value pair, and the card treatment above turned five facts into five
     separate bordered boxes — the operator read them as five tables. The
     wrapper keeps its frame and the rows sit inside it, separated by a rule. */
  .table--facts tbody tr {
    display: block; margin: 0; border: 0; border-radius: 0;
    background: none; border-bottom: 1px solid var(--border);
  }
  .table--facts tbody tr:last-child { border-bottom: 0; }
  .table--stacked tbody th[scope="row"] + td {
    display: inline-block; width: 57%; vertical-align: top;
    text-align: right; font-size: 0.94em; color: var(--muted);
  }
}
.site-footer {
  /* Left, not centred, and thin: the footer is a strip under the page, not a
     closing section of it. Inset to the page column like the header, so the
     first character of the footer sits under the first character of the
     article rather than out at the screen edge. */
  padding: 1rem max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.8rem; text-align: left;
  /* auto top-margin pins the footer to the bottom of the flex-column
     body on short pages; on long pages there's no free space so it sits
     right after the content. */
  margin-top: auto;
}
/* Casino-style additions — hero, podium, CTAs. */
.site-header--on-dark {
  background: transparent;
  border-bottom: 0;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
}
.site-header--on-dark .site-name { color: #fff; }
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(245, 158, 11, 0.15), transparent 60%),
    linear-gradient(180deg, #0b1230 0%, #1a1240 100%);
  color: #fff;
  padding: 7rem 2rem 4rem;
  overflow: hidden;
}
.hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 720px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding: 6rem 1.5rem 3rem; }
}
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.75rem;
  color: #fff;
}
.hero__sub {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0 0 1.5rem;
}
.hero__lede {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 38ch;
  margin: 0 0 2rem;
}
.hero__visual {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.hero__image {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero__image--placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.4), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(236, 72, 153, 0.4), transparent 60%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: var(--accent);
  color: #0b1230;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
  text-decoration: none;
}
.cta--primary::after { content: '→'; }
.cta--small { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
.container {
  max-width: 1100px; margin: 0 auto; padding: 3rem 2rem;
}
.section-title {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 1.75rem; margin: 0 0 1.5rem;
}
.section-badge {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.top-picks { margin-bottom: 3rem; }
.podium {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 720px) {
  .podium { grid-template-columns: 1fr; }
}
.podium__slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem 1.25rem;
  background: #0b1230;
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.podium__rank {
  position: absolute;
  top: -12px; left: 16px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #0b1230;
  font-weight: 700;
  border-radius: 50%;
  font-size: 0.875rem;
}
.podium__logo {
  width: 56px; height: 56px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-top: 0.5rem;
}
.podium__slot--placeholder .podium__name {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}
.podium__name { font-weight: 700; font-size: 1.0625rem; }
.podium__bonus { color: rgba(255, 255, 255, 0.65); font-size: 0.875rem; margin-bottom: 0.5rem; }
.all-providers {
  padding: 1.75rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.muted { color: var(--muted); margin: 0; }