/* ============================================================================
   WobbleHub: static build
   Single stylesheet, no JavaScript anywhere in this folder.

   Blue-and-red palette: blue for brand/trust chrome (header, nav, links), red
   reserved for CTAs and offer boxes so they jump off the page. The payout
   tiers are a separate red-to-neutral INTENSITY ramp rather than a traffic
   light: intensity survives every form of colour blindness, and each badge
   carries a text label anyway, so the tier is never signalled by colour alone.

   Type scale follows one standard everywhere: an uppercase label (small) leads
   into a heading (large), which leads into an intro or standfirst (medium),
   which leads into body copy (base) and meta text (small). Small, large,
   medium, base, small. The same rhythm repeats at the top of every section
   instead of drifting section to section.

   Contents
     1. Tokens
     2. Reset and base
     3. Layout
     4. Header and nav
     5. Hero and verified badge
     6. Editor's Choice card
     7. Sections
     8. Operator cards
     9. Badges, offers, CTAs
    10. Comparison table
    11. Reviews: stats, methods, pros and cons
    12. Guide: steps and method ladder
    13. FAQ
    14. Responsible gambling
    15. Footer
    16. Responsive
    17. Print and reduced motion
   ============================================================================ */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  --surface: #ffffff;
  --subtle: #fdf5f6;
  --line: #f1dde0;
  --line-strong: #e3b7bd;
  --ink: #1a1214;
  --muted: #75585c;

  /* Brand / trust chrome: header, nav, links, focus ring, verified badge */
  --accent: #1d4ed8;
  --accent-ink: #1e3a8a;
  --accent-soft: #eaf0fd;

  /* Action color: CTA buttons and offer/bonus boxes only. Kept a warm red so
     it visually jumps off the blue brand chrome instead of blending into it. */
  --cta: #dc2626;
  --cta-ink: #a3121f;
  --cta-soft: #fdecec;

  /* Payout speed ramp, independent red-family intensity scale (not the brand
     accent or the CTA), darker to paler. Deliberately monochrome rather than
     a red/green traffic light so it stays readable for colour-blind users. */
  --speed: #a3122a;
  --speed-ink: #7a0d1f;
  --speed-soft: #fbeaec;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Type rhythm: label (small) -> heading (large) -> intro (medium) -> body
     (base) -> meta (small). Every section reuses these five steps in order. */
  --text-label: 0.8125rem;
  --text-meta: 0.875rem;
  --text-body: 1rem;
  --text-intro: clamp(1.0625rem, 1.4vw, 1.125rem);
  --h1: clamp(1.875rem, 3vw, 2.5rem);
  --h2: clamp(1.5rem, 3vw, 1.75rem);
  --h3: 1.25rem;

  --radius: 12px;
  --radius-sm: 8px;
  --wrap: 1152px;

  /* Anchor targets must clear the sticky header, which measures 98px at 390px once the
     nav wraps to its own row. 6rem was 2px short of that. */
  --anchor-offset: 6.5rem;
}

/* --- 2. Reset and base --------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--h1);
  line-height: 1.1;
  font-weight: 600;
}
h2 {
  font-size: var(--h2);
  line-height: 1.2;
  font-weight: 600;
}
h3 {
  font-size: var(--h3);
  line-height: 1.3;
  font-weight: 600;
}
h4 {
  font-size: 1rem;
  font-weight: 600;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
  text-underline-offset: 4px;
}

a:hover {
  text-decoration-color: var(--accent);
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Every payout figure aligns in its column. */
table,
.figure {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 3. Layout ----------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* --- 4. Header, nav and crypto ticker ----------------------------------- */

.crypto-ticker {
  overflow: hidden;
  width: 100%;
  border-bottom: 1px solid #252525;
  background: #111111;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

.crypto-ticker__track {
  display: flex;
  width: max-content;
  animation: crypto-ticker-scroll 20s linear infinite;
  will-change: transform;
}

.crypto-ticker__set {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 100vw;
  gap: 48px;
  padding: 10px 24px;
}

.crypto-ticker__set span {
  color: #d7d7d7;
  font-variant-numeric: tabular-nums;
}

.crypto-ticker__set strong {
  margin-right: 5px;
  color: #5ee87a;
  font-weight: 700;
}

@keyframes crypto-ticker-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding-block: 4px;
  flex-shrink: 0;
}

/* Hamburger toggle: a checkbox driven purely by CSS, so the mobile menu needs
   no JavaScript. Visually hidden rather than display:none, so it stays in the
   tab order and can be operated with the keyboard. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nav-toggle-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle:focus-visible ~ .nav-toggle-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-toggle-label__bars {
  position: relative;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
}

.nav-toggle-label__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 150ms ease, opacity 150ms ease;
}

.nav-toggle-label__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle-label__bars span:nth-child(2) {
  top: 6px;
}
.nav-toggle-label__bars span:nth-child(3) {
  top: 12px;
}

.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-label__bars span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-label__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle:checked ~ .nav-toggle-label .nav-toggle-label__bars span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.brand__logo {
  display: block;
  width: clamp(142px, 18vw, 190px);
  height: auto;
}

.brand__mark-img {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.brand__wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-serif, var(--font-sans));
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand__wordmark-a {
  color: var(--ink);
}

.brand__wordmark-b {
  color: var(--accent);
}

/* Header CTA: always visible next to the hamburger on mobile, moves to the
   far right of the inline nav at the desktop breakpoint below. */
/* The header CTA borrows .cta for colour but stays deliberately smaller than
   the in-card CTAs, so it does not inflate the sticky header. Scoped to the
   header so it beats .cta, which is defined later in this file. */
.site-header .header-cta {
  order: 2;
  margin-left: auto;
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.8125rem;
}

.nav-toggle-label {
  order: 3;
}

.site-nav {
  order: 4;
}

/* Below the desktop breakpoint the nav is a full-width panel, collapsed to
   zero height until the .nav-toggle checkbox is checked. No JavaScript. */
.site-nav {
  flex-basis: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease;
}

.nav-toggle:checked ~ .site-nav {
  max-height: 320px;
}

.site-nav ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding-block: 8px 12px;
}

.site-nav a {
  display: block;
  /* Padding takes these to 40px tall, clearing the 24px minimum touch target. */
  padding: 10px 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
}

/* --- 5. Hero and verified badge ------------------------------------------ */

/* Single-column, centred hero: a compact trust eyebrow, a punchy headline, one
   line of standfirst, then a single strong CTA. Deliberately sparse so the one
   thing the visitor should do next is unmissable. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 820px;
  margin-inline: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 14px 5px 9px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.verified-badge__icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

.verified-badge__icon svg {
  width: 9px;
  height: 9px;
}

.hero h1 {
  max-width: 20ch;
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  line-height: 1.06;
}

.hero__standfirst {
  max-width: 56ch;
  font-size: var(--text-intro);
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding-bottom: 16px;
}

.hero__cta {
  min-height: 54px;
  padding: 15px 34px;
  font-size: 1.0625rem;
  border-radius: 999px;
}

.byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100vw;
  margin-top: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.byline img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.byline span {
  font-size: var(--text-meta);
  color: var(--muted);
}

.byline strong {
  color: var(--ink);
  font-weight: 600;
}

.reviewer {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.reviewer img {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.reviewer__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
}

.reviewer__role {
  margin-top: 2px;
  font-size: var(--text-meta);
  color: var(--muted);
}

.reviewer__bio {
  margin-top: 10px;
  max-width: 60ch;
}

/* --- 6. Editor's Choice card ---------------------------------------------- */

.editors-choice {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.editors-choice__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--accent-ink), var(--accent));
  color: #fff;
  padding: 8px 12px;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editors-choice__body {
  padding: 20px;
}

.editors-choice__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
}

.editors-choice__tag {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}

.editors-choice__offer {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--cta-soft);
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cta-ink);
}

.editors-choice__offer span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta-ink);
}

.editors-choice__cta {
  margin-top: 14px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cta);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.editors-choice__cta:hover {
  background: var(--cta-ink);
  color: #fff;
}

/* Top-ranked entry's offer gets a small extra marker so it doesn't read
   identically to #15's. */
.offer--best {
  position: relative;
  border-width: 2px;
}

.offer--best::before {
  content: "Best offer";
  position: absolute;
  top: -9px;
  left: 10px;
  background: var(--cta);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
}

/* --- 7. Sections --------------------------------------------------------- */

.section {
  padding-block: 40px;
  scroll-margin-top: var(--anchor-offset);
}

.section--tight {
  padding-top: 24px;
  padding-bottom: 40px;
}

.section__intro {
  margin-top: 12px;
  max-width: 65ch;
  font-size: var(--text-intro);
  color: var(--muted);
}

.section--tight .section__intro {
  margin-top: 8px;
  max-width: 80ch;
  font-size: var(--text-meta);
}

.section__body {
  margin-top: 28px;
}

.section--tight .section__body {
  margin-top: 16px;
}

.prose {
  max-width: 68ch;
  display: grid;
  gap: 16px;
  line-height: 1.7;
}

/* --- 8. Operator cards --------------------------------------------------- */

.op-list {
  display: grid;
  gap: 16px;
}

.op-reviews {
  display: grid;
  gap: 0;
}

.op-reviews .op {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding-inline: 0;
  padding-block: 36px;
  box-shadow: none;
}

.op-reviews .op:first-child {
  border-top: 0;
  padding-top: 0;
}

.op {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
  scroll-margin-top: var(--anchor-offset);
}

/* List entry: identity and speed left, offer and CTA right. */
.op--row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.op__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.op__mark {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

.op__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.op__mark--sm {
  width: 40px;
  height: 40px;
}

/* Real casino logos are wide horizontal lockups (150x80), not square marks.
   Sized generously so the logo reads clearly since it now carries the brand
   identity alone, with the operator name removed from view. */
.op__mark--wide {
  width: 240px;
  height: 128px;
  padding: 10px;
}

.op__mark--sm.op__mark--wide {
  width: 130px;
  height: 70px;
  padding: 8px;
}

/* Ranked-list rows carry a wide themed image per operator instead of the small
   square brand mark, so each entry is recognisable at a glance while scrolling.
   Fixed aspect ratio keeps all 15 rows the same height regardless of how each
   generated image is cropped. */
.op__shot {
  flex-shrink: 0;
  width: 132px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--subtle);
}

.op__shot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op__head {
  flex: 1;
  min-width: 0;
}

.op__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.op__tagline {
  margin-top: 6px;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--muted);
}

.op__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.op__speed {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.op__speed-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

.op__speed-after {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.op__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex-shrink: 0;
}

.op__divider {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.op__footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Short "also assessed" entry. */
.op-brief {
  border-top: 1px solid var(--line);
  padding-block: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  scroll-margin-top: var(--anchor-offset);
}

.op-brief p {
  margin-top: 12px;
  line-height: 1.7;
}

.op-brief__meta {
  font-size: 0.875rem;
  color: var(--muted);
}

/* Rating: a decorative overlay on an accessible text label. Screen readers get
   "4.8 out of 5" from the visually-hidden span, not five ambiguous glyphs.
   Rendered in the brand accent, not gold: gold is the competitor palette. */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stars__track {
  position: relative;
  display: inline-block;
  width: 84px;
  height: 16px;
  flex-shrink: 0;
  color: var(--line-strong);
}

.stars__track::before,
.stars__fill::before {
  content: "★★★★★";
  position: absolute;
  inset: 0;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.8px;
  font-family: var(--font-sans);
}

.stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--accent);
  /* width is set inline per operator. It is the one place a style attribute earns
     its keep, since the value is data. */
}

.stars__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- 9. Badges, offers, CTAs -------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.badge__tier {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
}

/* Green-to-neutral intensity ramp, fastest to slowest. */
.badge--instant {
  background: var(--speed);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--speed);
}

.badge--fast {
  background: var(--speed-soft);
  color: var(--speed-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--speed) 25%, transparent);
}

.badge--mid {
  background: var(--subtle);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.badge--slow {
  background: var(--surface);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.badge--unknown {
  background: var(--surface);
  color: var(--muted);
  border: 1px dashed var(--line-strong);
}

/* "Tested" is backed by a real verification date, which is in the title
   attribute and read out via the visually-hidden span. */
.badge--tested {
  flex-shrink: 0;
  background: var(--speed-soft);
  color: var(--speed-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--speed) 25%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  gap: 4px;
  align-items: center;
}

.badge--tested::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
  flex-shrink: 0;
}

.legend {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Signup offer, in a small box immediately left of the CTA. Filled with the
   CTA hue (not the brand accent) so the offer and its button read as one
   connected reward zone. */
/* The bonus box and its CTA are the point of every card, so both run large and
   their content is centred at every width. */
.offer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--cta) 35%, transparent);
  background: var(--cta-soft);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-align: center;
}

.offer__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta-ink);
}

.offer__headline {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--cta-ink);
  text-wrap: balance;
}

.offer__terms {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--muted);
}

.cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cta);
  color: #fff;
  border-radius: var(--radius-sm);
  min-height: 48px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, transform 120ms ease;
}

.cta:hover {
  background: var(--cta-ink);
  color: #fff;
  transform: translateY(-1px);
}

.cta:active {
  transform: translateY(0);
}

.link-review {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* --- 10. Comparison table ------------------------------------------------ */

/* Wide content scrolls inside its own container; the page body never scrolls
   sideways. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#comparison .table-scroll {
  border-color: var(--line-strong);
  border-radius: 2px;
}

table {
  width: 100%;
  min-width: 736px;
  border-collapse: collapse;
  text-align: left;
}

thead tr {
  background: var(--subtle);
  border-bottom: 1px solid var(--line);
}

th,
td {
  padding: 14px 16px;
  vertical-align: top;
}

thead th {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  padding-block: 12px;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--subtle) 60%, transparent);
}

tbody th {
  font-weight: 400;
}

#comparison .comparison-table {
  min-width: 620px;
  table-layout: fixed;
}

#comparison .comparison-table thead tr {
  background: var(--cta);
  border-bottom: 0;
}

#comparison .comparison-table th,
#comparison .comparison-table td {
  padding: 18px 22px;
  vertical-align: middle;
}

#comparison .comparison-table thead th {
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}

#comparison .comparison-table tbody tr {
  border-bottom: 1px solid var(--line);
}

#comparison .comparison-table tbody tr:last-child {
  border-bottom: 0;
}

#comparison .comparison-table tbody tr:nth-child(even) {
  background: var(--subtle);
}

#comparison .comparison-table tbody th {
  font-weight: 700;
}

#comparison .comparison-table .cell-op {
  color: var(--cta);
  font-size: 1rem;
  font-weight: 700;
}

#comparison .comparison-table td {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

#comparison .table-casino {
  display: flex;
  align-items: center;
  gap: 12px;
}

#comparison .comparison-table__logo {
  flex-shrink: 0;
  display: block;
  width: 96px;
  height: 52px;
  padding: 6px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

/* --- 11. Reviews: stats, methods, pros and cons -------------------------- */

.stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.stats dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.stats dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.methods {
  margin-top: 12px;
}

.methods li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.methods li:first-child {
  border-top: 0;
}

.pros-cons {
  display: grid;
  gap: 24px;
}

.pros-cons h4 {
  margin-bottom: 12px;
}

.pros-cons--pros h4 {
  color: var(--speed-ink);
}

.pros-cons ul {
  display: grid;
  gap: 8px;
}

.pros-cons li {
  display: flex;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.pros-cons--pros li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 6px;
  margin-top: 7px;
  border-left: 2px solid var(--speed);
  border-bottom: 2px solid var(--speed);
  transform: rotate(-45deg);
}

.pros-cons--cons li {
  color: var(--muted);
}

.pros-cons--cons li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 2px;
  margin-top: 11px;
  background: var(--line-strong);
}

/* --- 12. Guide: steps and method ladder --------------------------------- */

.guide {
  display: grid;
  gap: 48px;
}

.guide__block {
  scroll-margin-top: var(--anchor-offset);
}

.guide__block h3 {
  margin-bottom: 12px;
}

.steps {
  margin-top: 20px;
  max-width: 68ch;
  display: grid;
  gap: 16px;
  counter-reset: step;
}

.steps li {
  display: flex;
  gap: 16px;
  line-height: 1.7;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ladder {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  counter-reset: rung;
}

.ladder li {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  counter-increment: rung;
}

.ladder li:first-child {
  border-top: 0;
}

.ladder li::before {
  content: counter(rung);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--subtle);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ladder__name {
  font-weight: 600;
}

.ladder__blurb {
  margin-top: 4px;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.methodology {
  background: var(--subtle);
  border-radius: var(--radius);
  padding: 24px;
  scroll-margin-top: var(--anchor-offset);
}

.methodology h3 {
  margin-bottom: 12px;
}

/* --- 13. FAQ ------------------------------------------------------------ */

/* Native <details>. The browser handles expansion, keyboard interaction and the
   accessibility semantics, and the answers sit in the HTML for crawlers whether
   or not anything expands. No JavaScript. */
.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.faq details {
  border-top: 1px solid var(--line);
  padding: 16px 20px;
  scroll-margin-top: var(--anchor-offset);
}

.faq details:first-of-type {
  border-top: 0;
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq__answer {
  margin-top: 12px;
  max-width: 68ch;
  display: grid;
  gap: 12px;
  color: var(--muted);
  line-height: 1.7;
}

/* --- 14. Responsible gambling ------------------------------------------- */

.rg {
  border: 1px solid color-mix(in srgb, var(--speed) 25%, transparent);
  background: var(--speed-soft);
  border-radius: var(--radius);
  padding: 24px;
  scroll-margin-top: var(--anchor-offset);
  margin-bottom: 16px;
}

.rg h2 {
  font-size: var(--h3);
}

.rg__body {
  margin-top: 12px;
  max-width: 68ch;
  display: grid;
  gap: 12px;
  color: var(--speed-ink);
  line-height: 1.7;
}

.rg__lines {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 0.9375rem;
}

.rg__lines a {
  color: var(--speed-ink);
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, var(--speed) 40%, transparent);
}

.rg__lines a:hover {
  text-decoration-color: var(--speed-ink);
}

.rg__lines .tel {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* --- 15. Footer --------------------------------------------------------- */

.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  background: var(--subtle);
  padding-block: 40px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.site-footer__brand {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
}

.site-footer__meta {
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer__links {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.age-pill {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- 16. Responsive ----------------------------------------------------- */

@media (min-width: 640px) {
  .wrap {
    padding-inline: 24px;
  }

  .site-header__inner {
    gap: 24px;
    padding-block: 12px;
  }

  .nav-toggle-label {
    display: none;
  }

  .site-nav {
    flex-basis: auto;
    max-height: none;
    overflow: visible;
  }

  .site-nav ul {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding-block: 0;
  }

  .site-nav a {
    padding: 6px 0;
  }

  .site-nav {
    margin-left: auto;
  }

  .site-header .header-cta {
    order: 3;
    margin-left: 0;
    min-height: 42px;
    padding: 10px 20px;
    font-size: 0.9375rem;
  }

  .op {
    padding: 24px;
  }

  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pros-cons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .op__actions {
    flex-direction: row;
    align-items: center;
  }

  .methodology,
  .rg {
    padding: 32px;
  }

  .section {
    padding-block: 56px;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: 40px;
    gap: 22px;
  }

  /* Three columns: identity on the left, the bonus box centred in the middle,
     the CTA on the right. The two 1fr side columns are equal, so the bonus
     lands dead centre of the row between the name and the CTA. op__actions is
     display:contents so its offer and CTA children sit directly on this grid. */
  .op--row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
  }

  .op--row .op__actions {
    display: contents;
  }

  .op--row .offer {
    grid-column: 2;
    width: 100%;
  }

  .op--row .cta {
    grid-column: 3;
    justify-self: end;
    width: auto;
    height: auto;
  }
}

/* Below 1024px, the bonus and CTA stack at the full card width. */
@media (max-width: 1023.98px) {
  .op__mark {
    width: 48px;
    height: 48px;
    padding: 5px;
  }

  .op__mark--wide {
    width: 180px;
    height: 96px;
  }

  .op__mark--sm.op__mark--wide {
    width: 110px;
    height: 58px;
  }

  .op__shot {
    width: 104px;
  }

  .op--row .op__actions {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .op--row .offer {
    width: 100%;
    min-width: 0;
  }

  .op--row .cta {
    width: 100%;
  }
}

/* The themed image stays beside the operator name even at the narrowest
   widths. Stacking it full-width reads better in isolation but makes each of
   the 15 cards roughly twice as tall, which is a worse trade on a phone. */
@media (max-width: 479.98px) {
  .op__shot {
    width: 84px;
  }

  .op__mark--wide {
    width: 150px;
    height: 80px;
  }

  .op--row .op__identity {
    gap: 12px;
  }

  .offer {
    padding: 18px 16px;
  }
}

/* --- 17. Print and reduced motion --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .crypto-ticker__track {
    animation: none !important;
    transform: none;
  }

  .crypto-ticker__set[aria-hidden="true"] {
    display: none;
  }
}

@media print {
  .crypto-ticker,
  .site-header,
  .site-nav,
  .cta,
  .offer {
    display: none;
  }

  .faq__answer {
    display: grid !important;
  }

  /* Payout tiers survive greyscale because every badge carries a text label. */
  .badge {
    box-shadow: inset 0 0 0 1px #999;
  }
}