:root {
  --fg: #0f172a;
  --bg: #ffffff;
  --primary: #1e293b;
  --accent: #f97316;
  --grad-from: #1e293b;
  --grad-to: #f97316;
  --muted: #64748b;
  --border: #e5e7eb;
  --surface: #f8fafc;
  --font-heading: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { 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;
}
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); }
.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 centred 1100px content column below. pageBody is max-width:1100px
     centred AND has a 1.5rem inner padding, so the inset must add that
     same 1.5rem (otherwise the header content sits 1.5rem wider on each
     side than the content column). max() keeps the gutter on narrow
     viewports where the calc goes negative. */
  padding: 0.85rem max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem));
  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; }
@media (max-width: 560px) {
  .article-card { flex-direction: column; }
  .article-card__thumb { width: 100%; }

  /* 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; }
  .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;
  }
  .table--stacked tbody tr > *:last-child { border-bottom: 0; }
  .table--stacked tbody td[data-label]::before {
    content: attr(data-label); font-weight: 600; color: var(--muted);
    flex: 0 0 40%; font-size: 0.85em;
  }
  /* Row-header cell (comparison tables put the operator name here). */
  .table--stacked tbody th[scope="row"] { font-weight: 700; background: var(--surface); }
}
.site-footer {
  padding: 1.5rem 2rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.875rem; text-align: center;
  /* 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; }