/* Betty Canada SEO layer: global design system.
   Tokens: Betty black base, lifted panels, gold reserved for CTAs,
   key numbers and win amounts. Spacing scale: 24 / 40 / 64 / 96. */

:root {
  --black: #0a0a0a;
  --surface: #121212;
  --surface-2: #161616;
  --text: #f5f5f5;
  --muted: rgba(245, 245, 245, 0.74);
  --muted-2: rgba(245, 245, 245, 0.52);
  --gold: #ffc700;
  --gold-bright: #ffd12c; /* lp-tb-9 heading gold */
  --gold-soft: #ffeba5;
  --line: rgba(255, 255, 255, 0.09);
  --s-3: 24px;
  --s-5: 40px;
  --s-8: 64px;
  --s-12: 96px;
  --radius: 3px;
  --radius-btn: 8px;
  --radius-card: 16px;
  --card: #191919;
  --container: 1160px;
  --hero-height: 720px;
  --hero-slot-h1: 172px;
  --hero-slot-support: 92px;
  --hero-slot-offer: 72px;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  /* Was "DM Serif Text". Only two rules used it, so it shared a family with
     --font-display rather than pulling down a second webfont. */
  --font-text: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { background: var(--black); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure { margin: 0; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 12px 16px;
  background: var(--gold);
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

.container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}
.narrow { max-width: 820px; }

/* Typography: play.betty stack — DM Serif Display (headlines, amounts), Inter (UI) */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}
.title-gradient {
  font-family: var(--font-display);
  font-weight: 400;
  background: linear-gradient(92.43deg, #ffeba5 0%, #ffc700 88.31%, #ffe27b 104.38%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 {
  margin: 0 0 16px;
  font-size: clamp(34px, 4.6vw, 45px);
  line-height: 1.2;
  max-width: 22ch;
  color: var(--gold-soft);
}
h2 {
  margin: 0 0 var(--s-3);
  font-size: clamp(28px, 3.2vw, 35px);
  line-height: 1.25;
  color: var(--gold-bright);
}
h3 {
  margin: 0 0 10px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
p {
  margin: 0 0 16px;
  max-width: 70ch;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}
p a {
  color: var(--gold-soft);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.micro {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted-2);
  margin: 10px 0 0;
  line-height: 1.45;
}
.band-intro { max-width: 760px; }

/* Buttons: Inter 500 like play.betty CTAs */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.btn-gold {
  background: linear-gradient(180deg, #ffeba5 0%, #ffc700 100%);
  color: var(--black);
  border-radius: var(--radius-btn);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 199, 0, 0.28); }
.btn-gold:active { transform: translateY(0); filter: brightness(0.94); }
.btn-large { min-height: 56px; padding: 16px 32px; font-size: 18px; font-weight: 500; }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 10px 0;
}
.brand { flex-shrink: 0; }
.brand img { width: 128px; height: auto; object-fit: contain; }
.header-trustpilot {
  height: 28px;
  width: 200px;
  max-width: 40%;
  flex-shrink: 0;
  opacity: 0.95;
}
.main-nav { display: flex; gap: 22px; margin-left: auto; }
.main-nav a {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
}
.main-nav a:hover { color: var(--text); }
.btn-header { min-height: 44px; padding: 12px 22px; }

/* Hero: play.betty group image on desktop, black-led on mobile.
   Fixed height + reserved text slots so every page matches regardless of copy length. */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--hero-height);
  min-height: var(--hero-height);
  max-height: var(--hero-height);
  overflow: hidden;
  background-color: var(--black);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.hero-lp {
  /* Relative to this stylesheet so it resolves under /offers/assets/.
     The ?v stamp must stay in sync with BETTY_ASSET_VERSION in config.php:
     the <link rel="preload"> in the head points at this exact URL, and any
     mismatch makes the browser fetch the hero twice. */
  background-image: url("brand/hero-group.webp?v=20260820");
}
/* Phones get a 760px-wide hero instead of the full 1280px one. This is the
   LCP image, so the smaller file is the single biggest mobile win. Keep the
   breakpoint in step with the media attribute on the preload links. */
@media (max-width: 760px) {
  .hero-lp {
    background-image: url("brand/hero-group-mobile.webp?v=20260820");
  }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.82) 42%, rgba(0, 0, 0, 0.35) 68%, rgba(0, 0, 0, 0.05) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, transparent 28%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows:
    var(--hero-slot-h1)
    var(--hero-slot-support)
    var(--hero-slot-offer)
    auto
    auto
    auto;
  gap: 12px;
  align-content: center;
  height: 100%;
  max-width: 620px;
  padding: var(--s-8) 0;
}
.hero h1 {
  height: var(--hero-slot-h1);
  max-height: var(--hero-slot-h1);
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.hero-support {
  font-family: var(--font-ui);
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 400;
  color: #fff;
  max-width: 50ch;
  height: var(--hero-slot-support);
  max-height: var(--hero-slot-support);
  margin: 0;
  line-height: 1.7;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.hero-offer {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  max-width: 44ch;
  height: var(--hero-slot-offer);
  max-height: var(--hero-slot-offer);
  margin: 0;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.hero-offer--empty {
  visibility: hidden;
  pointer-events: none;
}
.hero .btn-large { margin: 0; }
.hero .micro { margin: 0; }
.hero .trust-strip { margin-top: 12px; padding-top: 18px; }

/* Trust block (reuses footer legal copy) */
.trust-block-heading {
  margin: 0 0 var(--s-3);
  font-size: clamp(22px, 2.8vw, 28px);
}
.trust-block-legal { margin-bottom: 12px; }
.trust-block-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: var(--s-3);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
}
.trust-block-links a {
  color: var(--muted);
  text-decoration: none;
}
.trust-block-links a:hover { color: var(--text); }

/* Province eligibility and scan-friendly spacing */
.band p + p { margin-top: 14px; }
.band-intro { margin-bottom: 18px; }

.link-row strong,
.offer-module-text strong,
.cta-band-inner > p,
.final-band h2 {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Province marks (decorative) */
.hero-mark {
  position: absolute;
  z-index: 1;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(120px, 16vw, 220px);
  height: auto;
  opacity: 0.3;
  pointer-events: none;
}
.win-mark {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

/* Trust strip: one slim aligned row, hero only */
.trust-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: var(--s-3);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.trust-strip img { height: 24px; width: auto; opacity: 0.92; }
.trust-label { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--muted-2); }
.badge-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

/* Section bands: flat black alternating with gold-tinted lifted surfaces.
   The tint stays at 4 to 5 percent so AA contrast on body text holds. */
.band { padding: var(--s-12) 0; }
.band-lift {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 199, 0, 0.05), transparent 55%),
    linear-gradient(180deg, rgba(255, 199, 0, 0.03), transparent 70%),
    var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Key numbers band: play.betty icon cards */
.numbers-band {
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-5) 0;
}
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px 14px;
}
.stat-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.number-value {
  display: block;
  font-family: var(--font-text);
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.05;
  color: var(--gold-bright);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.number-label {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  color: #f2f2f2;
  line-height: 1.2;
}

/* Verdict */
.verdict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-3); align-items: start; }
.verdict-col { background: var(--surface); border: 1px solid var(--line); padding: var(--s-3); }
.verdict-col-alt { background: var(--surface-2); }
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tick-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  background: var(--gold);
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
}
.tick-list-neutral li::before { background: var(--muted-2); }

/* Steps: chamfered gold numeral badges, connector line on desktop.
   Column counts are count-aware so no orphan tiles appear at any width. */
.steps {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.steps-3 { grid-template-columns: repeat(3, 1fr); }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.steps-5 { grid-template-columns: repeat(5, 1fr); }
.steps li {
  position: relative;
  background: var(--black);
  border: 1px solid var(--line);
  padding: var(--s-3);
  display: grid;
  gap: 8px;
  align-content: start;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  background: rgba(255, 199, 0, 0.08);
  border: 1.5px solid var(--gold);
  clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  right: calc(-1 * var(--s-3));
  width: var(--s-3);
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold), rgba(255, 199, 0, 0.15));
}
.steps strong { font-size: 16px; }
.step-text { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* Recent wins: play.betty cards with decorative game art */
/* Recent wins: lp-tb-9 style, rounded square art with centred amount below */
/* Five board entries: one row on desktop. */
.wins-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.win-tile {
  background: transparent;
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: grid;
}
.win-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-card);
}
.win-body { padding: 14px 16px; text-align: center; }
.win-amount {
  display: block;
  font-family: var(--font-text);
  font-size: clamp(22px, 2.6vw, 24px);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 6px;
}
.win-loc {
  display: block;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}
.win-date {
  display: block;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 300;
  color: var(--muted-2);
  margin-top: 3px;
}

.win-callout { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.win-callout .win-amount { font-size: clamp(38px, 5vw, 58px); margin: 0; }
.win-callout-line { font-family: var(--font-ui); font-size: 17px; font-weight: 500; color: var(--text); margin: 0; }

/* Comparison and methods tables */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.compare-table {
  width: 100%;
  margin-top: var(--s-3);
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 14px;
}
.compare-table caption { caption-side: top; }
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  border-top: 0;
  color: var(--muted);
  font-weight: 600;
}
.compare-table tbody th[scope="row"] {
  color: var(--muted);
  font-weight: 600;
}
.compare-table tbody td:nth-child(2) {
  color: var(--gold);
  font-weight: 600;
}
.pay-table tbody td:nth-child(2),
.pay-table tbody td:nth-child(3),
.pay-table tbody td:nth-child(4) {
  color: var(--muted);
  font-weight: 600;
}
.compare-table tbody td:nth-child(3),
.compare-table tbody td:nth-child(4) {
  color: var(--muted-2);
}
.compare-rows {
  margin-top: var(--s-3);
  border: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-head, .compare-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  padding: 14px 16px;
  align-items: center;
  min-width: 480px;
}
.pay-table .compare-head, .pay-table .compare-row {
  grid-template-columns: 1fr 1fr 1.3fr 1fr;
  min-width: 560px;
}
.compare-head {
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.compare-head span:nth-child(2) { color: var(--gold); }
.pay-table .compare-head span:nth-child(2) { color: var(--muted-2); }
.compare-row { border-top: 1px solid var(--line); font-size: 14px; }
.compare-row span:first-child { color: var(--muted); font-weight: 600; }
.compare-row span:nth-child(2) { color: var(--gold); font-weight: 600; }
.pay-table .compare-row span:nth-child(2) { color: var(--muted); font-weight: 600; }
.compare-row span:nth-child(3), .compare-row span:nth-child(4) { color: var(--muted-2); }

/* Game tiles: lobby-style panels, image optional via the asset pipeline */
.game-tiles {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.game-tile {
  display: grid;
  gap: 6px;
  align-content: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  padding: 16px;
  min-height: 112px;
}
.game-tile img { width: 100%; height: auto; margin: -16px -16px 8px; width: calc(100% + 32px); max-width: none; }
.game-tile-name {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.15;
  color: var(--text);
}
.game-tile-desc { font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }
.category-intro { max-width: 760px; margin-top: var(--s-3); }

.flagship { border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-3); }
.flagship h3 { color: var(--gold-soft); font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.flagship p { margin: 0; }

/* Link rows: full-width stacked rows. Intentional at any item count. */
.link-rows { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--s-3); }
.link-row {
  display: grid;
  grid-template-columns: 230px 1fr 14px;
  gap: var(--s-3);
  align-items: center;
  background: var(--black);
  padding: 18px var(--s-3);
  text-decoration: none;
  transition: background 140ms ease;
}
.link-row:hover { background: var(--surface); }
.link-row strong { font-size: 15px; color: var(--gold-soft); }
.link-row span { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.5; }
.link-row .chevron {
  width: 14px;
  height: 14px;
  justify-self: end;
  filter: brightness(0) saturate(100%) invert(78%) sepia(68%) saturate(750%) hue-rotate(359deg) brightness(103%) contrast(104%);
}

/* Safety icon row (visually distinct from the hero trust strip) */
.safety-icons { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-3); }
.safety-icon { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--muted); }

/* Split layout */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; }
.media-panel { border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.media-panel img { width: 100%; height: auto; object-fit: contain; }

/* Phone frame: comparison visual inside device chrome */
.phone-frame-wrap { display: flex; justify-content: center; }
.phone-frame {
  position: relative;
  width: min(300px, 80vw);
  padding: 16px 12px;
  background: var(--surface-2);
  border: 1.5px solid rgba(255, 199, 0, 0.35);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
}
.phone-frame img { width: 100%; height: auto; border-radius: 10px; margin-top: 6px; }

/* Offer module: inline offer for pages whose hero carries page intent */
.offer-module-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 8% 50%, rgba(255, 199, 0, 0.07), transparent 60%),
    var(--surface-2);
  padding: var(--s-5) 0;
}
.offer-module { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.offer-spark { flex-shrink: 0; }
.offer-module-text { flex: 1; min-width: 240px; display: grid; gap: 4px; }
.offer-module-text strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
}
.offer-module-text strong.title-gradient { display: block; }
.offer-module-text span { font-size: 14px; color: var(--muted); }
.offer-module .micro { text-align: right; }

/* FAQ */
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); background: var(--surface); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 20px; font-weight: 700; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 18px 16px; font-size: 14px; }

/* Mid-page CTA band */
.cta-band {
  background:
    radial-gradient(70% 140% at 90% 50%, rgba(255, 199, 0, 0.06), transparent 55%),
    var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-5) 0;
}
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.cta-band-inner > p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
}
.cta-band-inner > p.title-gradient { color: transparent; }
.cta-band .micro { text-align: right; }

/* Final CTA band */
.final-band {
  padding: var(--s-12) 0;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 199, 0, 0.05), transparent 60%),
    linear-gradient(180deg, var(--black) 0%, var(--surface) 100%);
  border-top: 1px solid var(--line);
}
.final-band h2, .final-band p { margin-left: auto; margin-right: auto; }

/* Footer: lp-tb-9 lifted charcoal */
.site-footer { background: #181818; border-top: 1px solid var(--line); padding: var(--s-8) 0; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.1fr 1.2fr; gap: var(--s-5); margin-bottom: var(--s-5); }
.footer-brand { margin-bottom: 4px; }
.footer-lockup { width: min(180px, 70vw); height: auto; }
.site-footer h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.site-footer nav { display: grid; gap: 9px; }
.site-footer nav a { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--gold-soft); }
.footer-legal { font-size: 13px; color: var(--muted-2); max-width: 90ch; }
.footer-updated { margin-bottom: 8px; color: var(--muted-2); }
.footer-about {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 36ch;
}
.footer-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: var(--s-3); }
.footer-badges img { height: 30px; width: auto; }

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: rgba(10, 10, 10, 0.97);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform 200ms ease;
  display: none;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 64px; }
.sticky-cta-text { font-family: var(--font-ui); font-size: 13px; font-weight: 500; }
.sticky-cta .btn { min-height: 44px; padding: 12px 18px; font-size: 16px; font-weight: 500; white-space: nowrap; }

/* Responsive. Grid column counts are chosen per item count so no module
   ever strands a single orphan under a full row. */
@media (max-width: 1020px) {
  .main-nav { display: none; }
  .split { grid-template-columns: 1fr; gap: var(--s-5); }
  .media-panel { max-width: 540px; }
  .game-tiles { grid-template-columns: repeat(2, 1fr); }
  /* Wins stay a single row of 5 down to the mobile breakpoint, per spec. */
  .wins-grid { grid-template-columns: repeat(5, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .numbers-grid .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps-4, .steps-5 { grid-template-columns: repeat(2, 1fr); }
  .steps-5 li:last-child { grid-column: 1 / -1; }
  .steps-3 { grid-template-columns: 1fr; }
  .steps li:not(:last-child)::after { display: none; }
  .hero-mark { right: 4%; opacity: 0.2; }
}

/* Mobile CRO pass: tighter fold, less cut-off, persistent bottom CTA.
   Roll back via _backups/css-mobile-cro-20260610/betty-seo.css */
@media (max-width: 680px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .container {
    width: min(var(--container), calc(100% - 32px));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  /* Header: slimmer chrome, single hero CTA above the fold */
  .header-inner { padding: 8px 0; min-height: 52px; }
  .brand img { width: 100px; }
  .header-trustpilot { height: 24px; width: 150px; }
  .btn-header { display: none; }

  /* Hero: content-first, CTA visible without scrolling.
     A slimmer cover-cropped banner sits on top; the text stack sizes to its
     content (no reserved slot heights) so short headlines don't leave dead
     space above the fold. */
  :root {
    --hero-img-h: 32vw;
    --hero-slot-h1: auto;
    --hero-slot-support: auto;
    --hero-slot-offer: auto;
  }
  .hero {
    align-items: stretch;
    height: auto;
    min-height: 0;
    max-height: none;
    background-size: cover;
    background-position: center 28%;
  }
  .hero-overlay {
    /* Image stays clear in the banner, then fades to solid black for the text. */
    background: linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.15) 0%,
      rgba(10, 10, 10, 0.25) calc(var(--hero-img-h) - 70px),
      rgba(10, 10, 10, 0.9) calc(var(--hero-img-h) - 6px),
      #0a0a0a var(--hero-img-h)
    );
  }
  /* Centred stack that begins right below the banner. */
  .hero-inner {
    display: flex;
    flex-direction: column;
    max-width: none;
    gap: 10px;
    padding: calc(var(--hero-img-h) + 12px) 0 24px;
    text-align: center;
  }
  .hero-mark { display: none; }
  .hero h1 {
    height: auto;
    max-height: none;
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.2;
    max-width: none;
    margin: 0 auto;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .hero-support {
    height: auto;
    max-height: none;
    font-size: 16px;
    line-height: 1.5;
    max-width: none;
    margin: 0 auto;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .hero-offer {
    height: auto;
    max-height: none;
    font-size: 17px;
    line-height: 1.3;
    max-width: none;
    margin: 0 auto;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .hero .btn-large {
    width: 100%;
    min-height: 52px;
    padding: 16px 20px;
    font-size: 16px;
  }
  .btn-large { width: 100%; }
  .hero .trust-strip {
    margin-top: 8px;
    padding-top: 12px;
  }

  /* Trust strip: compact centred row, badges only */
  .trust-strip {
    gap: 10px;
    justify-content: center;
  }
  .trust-strip img { height: 18px; }
  .trust-label { display: none; }
  .badge-18 { width: 26px; height: 26px; font-size: 10px; }

  /* Section rhythm */
  .band { padding: 44px 0; }
  .band h2 { margin-bottom: 16px; font-size: clamp(24px, 6.5vw, 32px); }
  .band p { margin-bottom: 12px; font-size: 16px; line-height: 1.65; }
  .step-text, .faq details p, .link-row span { font-size: 15px; }
  .footer-legal, .safety-icon { font-size: 14px; }
  .compare-row { font-size: 15px; }
  .final-band { padding: 48px 0; }
  .numbers-band { padding: 20px 0; }
  .numbers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 16px;
  }
  .number-value { font-size: clamp(22px, 5.5vw, 28px); }
  .number-label { font-size: 15px; line-height: 1.25; }

  /* Grids: 2-up on phone instead of endless single column */
  .stat-card { padding: 16px 10px; }
  .stat-card img { width: 56px; height: 56px; }
  /* Wins stack one under another on phones */
  /* One under another on mobile; art is 432px native so it stays crisp. */
  .wins-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .wins-grid .win-tile { width: 100%; max-width: 320px; }
  .win-tile { max-width: 300px; width: 100%; margin: 0 auto; }
  .win-body { padding: 10px 6px; }
  .win-amount { font-size: clamp(20px, 5.5vw, 24px); }
  .win-loc { font-size: 14px; }
  .game-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .game-tile {
    padding: 12px;
    min-height: 96px;
  }
  .game-tile img {
    margin: -12px -12px 6px;
    width: calc(100% + 24px);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .game-tile-name { font-size: 16px; }
  .game-tile-desc { font-size: 13px; }

  .steps-3, .steps-4, .steps-5 { grid-template-columns: 1fr; }
  .steps-5 li:last-child { grid-column: auto; }
  .steps li { padding: 16px; }

  .win-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .win-callout .win-amount { font-size: clamp(32px, 9vw, 44px); }

  .footer-grid { grid-template-columns: 1fr; }
  .link-row {
    grid-template-columns: 1fr 14px;
    padding: 14px 16px;
  }
  .link-row span { grid-column: 1 / -1; }

  .split { gap: 24px; }
  .media-panel { max-width: 100%; margin: 0 auto; }
  .phone-frame-wrap { margin-bottom: 4px; }
  .phone-frame { width: min(240px, 72vw); padding: 12px 10px; }

  .cta-band { padding: 28px 0; }
  .cta-band-inner, .offer-module {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 14px;
  }
  .cta-band-inner > p { font-size: clamp(20px, 5.5vw, 26px); }
  .cta-band .micro, .offer-module .micro { text-align: center; }
  .offer-module-band { padding: 28px 0; }
  .offer-module-text { min-width: 0; }
  .offer-module-text strong { font-size: 20px; }
  .offer-spark { align-self: center; }
  .offer-module .btn { width: 100%; }

  .faq summary { padding: 14px 40px 14px 16px; font-size: 15px; }

  /* Sticky CTA: always available on mobile, safe-area aware */
  .sticky-cta {
    display: block;
    transform: translateY(0);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sticky-cta.is-visible { transform: translateY(0); }
  .sticky-cta-inner {
    height: 56px;
    gap: 10px;
  }
  .sticky-cta-text {
    font-size: 13px;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
  }
  .sticky-cta .btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    flex-shrink: 0;
  }

  .site-footer {
    padding-bottom: calc(48px + 56px + env(safe-area-inset-bottom, 0px));
  }
}