/* ==================================================================
   WELCOME OFFER, DEPOSIT BONUS VARIANT — 100% Deposit Bonus overlay
   (November 2026 redesign), homepage only. One of the offers index.html
   carries as <template>s inside [data-rz-promo]; that attribute picks
   which one js/home-welcome.js clones in and runs. Promotes the account
   /bonus-account carries under a recorded BRD §7 conflict — see the note
   at the top of page/bonus-account.html; the same Compliance sign-off
   gates this layer.

   Ported from the header + hero master package's royce-welcome-bonus.css
   and royce-welcome-bonus-fullscreen.css, merged into one file (region 1
   is the component, region 2 the geometry). Deviations, and why:

   1. CLASS NAMES are the package's (.rz-welcome-bonus*) — no other
      stylesheet uses that prefix. The behaviour hooks are NOT: the markup
      carries the site's data-rz-welcome-* contract so the shared
      js/home-welcome.js drives it like the other offers.
   2. FONTS. Inter and the Tajawal/Cairo Arabic stack are dropped. Text is
      the self-hosted 'Royce Sans' (covers Arabic, Vietnamese, CJK); the
      display face is the self-hosted Marcellus, except for Arabic,
      Vietnamese and Chinese, where Marcellus lacks the glyphs and the
      display lines fall back to Royce Sans (as the homepage hero does).
   3. BREAKPOINTS are on the site ladder (docs/responsive-breakpoints.md):
      1023.98 → 991.98, 760 → 767.98, 359.98 → 399.98, max-height
      820 → 800 and 760 → 720. The package's 1920×1000 "large monitor"
      tier needs a min-height query, which the ladder does not have, so
      it is dropped; large screens keep the base sizes.
   4. LIGHT THEME follows html[data-bs-theme] (this site) as well as
      html[data-theme] (the package).
   ================================================================== */

/* ============================================================
   REGION 1 — component: tokens, theme, motion, surfaces, type
   ============================================================ */

.rz-welcome-bonus {
  /* palette */
  --rz-wb-midnight: #071526;
  --rz-wb-deep: #0b1f3a;
  --rz-wb-royal: #2f6bff;
  --rz-wb-turquoise: #22d3ee;
  --rz-wb-champagne: #d9b768;
  --rz-wb-ivory: #f5f0e6;

  /* type — self-hosted Marcellus display, Royce Sans text */
  --rz-wb-display: 'Marcellus', 'Royce Sans', Georgia, serif;
  --rz-wb-serif: var(--rz-wb-display);
  --rz-wb-sans: 'Royce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rz-wb-track-caps: 0.16em;
  --rz-wb-track-btn: 0.06em;
  --rz-wb-caps: uppercase;

  /* host — follows the live header height */
  --rz-wb-header-h: var(--rz-header-h, 76px);
  /* above the header, the drawer, the language panel and its note */
  --rz-wb-z: 2147483600;

  /* reading direction helpers (flipped for RTL below) */
  --rz-wb-dir: 90deg;
  --rz-wb-flip: 1;

  /* motion — slow drop-down open, quick retract */
  --rz-wb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rz-wb-ease-open: cubic-bezier(0.33, 0, 0.2, 1);
  --rz-wb-ease-close: cubic-bezier(0.32, 0, 0.67, 0);
  --rz-wb-open-ms: 2400ms;
  --rz-wb-close-ms: 420ms; /* js/home-welcome.js RETRACT_MS 'deposit-bonus' sits just above */
  --rz-wb-scrim-ms: 1200ms;
  --rz-wb-travel: -105%;
  --rz-wb-fade-ms: 900ms;
  --rz-wb-rise: 18px;
  --rz-wb-settle: 0.97;
  --rz-wb-t-env: 300ms;
  --rz-wb-t-fig: 800ms;
  --rz-wb-t-panel: 1000ms;
  --rz-wb-t-cta: 1400ms;

  /* theme — dark (default) */
  --rz-wb-text: var(--rz-wb-ivory);
  --rz-wb-text-2: rgba(245, 240, 230, 0.86);
  --rz-wb-text-3: rgba(245, 240, 230, 0.72);
  --rz-wb-eyebrow: var(--rz-wb-champagne);
  --rz-wb-title: var(--rz-wb-champagne);
  --rz-wb-accent-a: #8fb0ff;
  --rz-wb-accent-b: var(--rz-wb-turquoise);
  --rz-wb-base: #071526;
  --rz-wb-glass-bg: rgba(7, 21, 38, 0.62);
  --rz-wb-env-opacity: 0.46;
  --rz-wb-env-filter: saturate(0.8) brightness(0.9);
  --rz-wb-shade-start: rgba(7, 21, 38, 0.94);
  --rz-wb-shade-mid: rgba(7, 21, 38, 0.8);
  --rz-wb-shade-end: rgba(11, 31, 58, 0.42);
  --rz-wb-bloom-royal: rgba(47, 107, 255, 0.42);
  --rz-wb-bloom-turq: rgba(34, 211, 238, 0.22);
  --rz-wb-bloom-gold: rgba(217, 183, 104, 0.1);
  --rz-wb-panel-bg: linear-gradient(158deg, rgba(14, 37, 70, 0.95) 0%, rgba(11, 31, 58, 0.95) 38%, rgba(7, 21, 38, 0.97) 100%);
  --rz-wb-panel-border: rgba(245, 240, 230, 0.12);
  --rz-wb-panel-shadow: 0 48px 100px -44px rgba(0, 0, 0, 0.8), 0 0 80px -30px rgba(47, 107, 255, 0.35);
  --rz-wb-rule: rgba(245, 240, 230, 0.14);
  --rz-wb-link: var(--rz-wb-ivory);
  --rz-wb-link-line: rgba(34, 211, 238, 0.55);
  --rz-wb-link-hover: var(--rz-wb-turquoise);
  --rz-wb-focus: var(--rz-wb-turquoise);
  --rz-wb-close-text: rgba(245, 240, 230, 0.84);
  --rz-wb-close-border: rgba(245, 240, 230, 0.24);
  --rz-wb-close-hover-bg: rgba(245, 240, 230, 0.08);
  --rz-wb-hairline: linear-gradient(var(--rz-wb-dir), transparent 0%, rgba(217, 183, 104, 0.4) 22%, rgba(34, 211, 238, 0.32) 72%, transparent 100%);

  /* 100% figure */
  --rz-wb-fig-1: #f2faff;
  --rz-wb-fig-2: #a6c8ff;
  --rz-wb-fig-3: #3b74ff;
  --rz-wb-fig-4: #22d3ee;
  --rz-wb-fig-edge: rgba(255, 255, 255, 0.7);
  --rz-wb-fig-sheen: #ffffff;
  --rz-wb-fig-glow: rgba(34, 211, 238, 0.55);
  --rz-wb-fig-bloom: #2f6bff;
  --rz-wb-fig-ring: rgba(34, 211, 238, 0.34);
  --rz-wb-fig-ring-2: rgba(143, 176, 255, 0.4);

  pointer-events: none;
  font-family: var(--rz-wb-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--rz-wb-text);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.rz-welcome-bonus *,
.rz-welcome-bonus *::before,
.rz-welcome-bonus *::after {
  box-sizing: border-box;
}

/* Light theme — only tokens change; no rule is re-declared. */
:is(html[data-bs-theme='light'], html[data-theme='light']) .rz-welcome-bonus {
  --rz-wb-text: #071526;
  --rz-wb-text-2: rgba(7, 21, 38, 0.84);
  --rz-wb-text-3: rgba(7, 21, 38, 0.72);
  --rz-wb-eyebrow: #85621a;
  --rz-wb-title: #0b1f3a;
  --rz-wb-accent-a: #2557e6;
  --rz-wb-accent-b: #0b7c99;
  --rz-wb-base: #f5f0e6;
  --rz-wb-glass-bg: rgba(245, 240, 230, 0.66);
  --rz-wb-env-opacity: 0.16;
  --rz-wb-env-filter: saturate(0.6) brightness(1.1);
  --rz-wb-shade-start: rgba(245, 240, 230, 0.95);
  --rz-wb-shade-mid: rgba(245, 240, 230, 0.84);
  --rz-wb-shade-end: rgba(245, 240, 230, 0.55);
  --rz-wb-bloom-royal: rgba(47, 107, 255, 0.2);
  --rz-wb-bloom-turq: rgba(34, 211, 238, 0.2);
  --rz-wb-bloom-gold: rgba(217, 183, 104, 0.16);
  --rz-wb-panel-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 248, 242, 0.96) 100%);
  --rz-wb-panel-border: rgba(11, 31, 58, 0.12);
  --rz-wb-panel-shadow: 0 44px 90px -46px rgba(11, 31, 58, 0.4), 0 0 80px -34px rgba(47, 107, 255, 0.3);
  --rz-wb-rule: rgba(11, 31, 58, 0.12);
  --rz-wb-link: #0b1f3a;
  --rz-wb-link-line: rgba(47, 107, 255, 0.5);
  --rz-wb-link-hover: #2557e6;
  --rz-wb-focus: #2557e6;
  --rz-wb-close-text: rgba(7, 21, 38, 0.8);
  --rz-wb-close-border: rgba(7, 21, 38, 0.24);
  --rz-wb-close-hover-bg: rgba(7, 21, 38, 0.06);
  --rz-wb-hairline: linear-gradient(var(--rz-wb-dir), transparent 0%, rgba(133, 98, 26, 0.35) 22%, rgba(11, 124, 153, 0.3) 72%, transparent 100%);
  --rz-wb-fig-1: #8db5ff;
  --rz-wb-fig-2: #3b74ff;
  --rz-wb-fig-3: #1f4fd6;
  --rz-wb-fig-4: #0ea5c6;
  --rz-wb-fig-edge: rgba(255, 255, 255, 0.85);
  --rz-wb-fig-glow: rgba(34, 211, 238, 0.3);
  --rz-wb-fig-bloom: #7fa6ff;
  --rz-wb-fig-ring: rgba(14, 165, 198, 0.34);
  --rz-wb-fig-ring-2: rgba(47, 107, 255, 0.3);
}

/* RTL — direction comes from the page (<html dir="rtl">). */
[dir='rtl'] .rz-welcome-bonus {
  --rz-wb-dir: 270deg;
  --rz-wb-flip: -1;
}
/* Joined scripts and CJK: no tracking, no forced capitals. */
:is(:lang(ar), :lang(zh)) .rz-welcome-bonus {
  --rz-wb-track-caps: 0;
  --rz-wb-track-btn: 0;
  --rz-wb-caps: none;
}
/* Marcellus has no Arabic, Vietnamese or Han glyphs — the display lines
   would set half in each face. The 100% figure keeps Marcellus (digits). */
:is(:lang(ar), :lang(vi), :lang(zh)) .rz-welcome-bonus {
  --rz-wb-serif: var(--rz-wb-sans);
}

.rz-welcome-bonus[hidden] {
  display: none;
}
.rz-welcome-bonus.is-open {
  pointer-events: auto;
}

/* ----------------------------------------------------------- reveal layers */
.rz-welcome-bonus__scrim {
  background: linear-gradient(180deg, rgba(7, 21, 38, 0.4) 0%, rgba(7, 21, 38, 0.18) 100%);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--rz-wb-close-ms) var(--rz-wb-ease-close) 0ms;
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__scrim {
  opacity: 1;
  transition: opacity var(--rz-wb-scrim-ms) var(--rz-wb-ease-open) 0ms;
}

/* The sheet descends; transform only, so it stays on the compositor. */
.rz-welcome-bonus__sheet {
  color: var(--rz-wb-text);
  transform: translate3d(0, var(--rz-wb-travel), 0);
  transition: transform var(--rz-wb-close-ms) var(--rz-wb-ease-close) 0ms;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__sheet {
  transform: translate3d(0, 0, 0);
  transition: transform var(--rz-wb-open-ms) var(--rz-wb-ease-open) 0ms;
}
.rz-welcome-bonus__sheet:focus {
  outline: none;
}

.rz-welcome-bonus__glass {
  background: var(--rz-wb-glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0;
  transition: opacity var(--rz-wb-close-ms) var(--rz-wb-ease-close) 0ms;
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__glass {
  opacity: 1;
  transition: opacity var(--rz-wb-open-ms) var(--rz-wb-ease-open) 0ms;
}

.rz-welcome-bonus__backdrop {
  background: var(--rz-wb-base);
  opacity: 0;
  transition: opacity var(--rz-wb-close-ms) var(--rz-wb-ease-close) 0ms;
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__backdrop {
  opacity: 1;
  transition: opacity var(--rz-wb-open-ms) var(--rz-wb-ease-open) 0ms;
}

.rz-welcome-bonus__env {
  opacity: 0;
  transition: opacity 1400ms var(--rz-wb-ease) var(--rz-wb-t-env);
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__env {
  opacity: var(--rz-wb-env-opacity);
}
.rz-welcome-bonus__env img {
  filter: var(--rz-wb-env-filter);
}

.rz-welcome-bonus__light {
  background:
    radial-gradient(42% 52% at 76% 46%, var(--rz-wb-bloom-royal) 0%, transparent 70%),
    radial-gradient(30% 36% at 90% 82%, var(--rz-wb-bloom-turq) 0%, transparent 72%),
    radial-gradient(34% 30% at 12% 96%, var(--rz-wb-bloom-turq) 0%, transparent 70%),
    radial-gradient(26% 24% at 30% 8%, var(--rz-wb-bloom-gold) 0%, transparent 72%),
    linear-gradient(90deg, var(--rz-wb-shade-start) 0%, var(--rz-wb-shade-mid) 40%, var(--rz-wb-shade-end) 100%);
  transform: scaleX(var(--rz-wb-flip));
  opacity: 0;
  transition: opacity 1600ms var(--rz-wb-ease) var(--rz-wb-t-env);
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__light {
  opacity: 1;
}

.rz-welcome-bonus__hairline {
  background: var(--rz-wb-hairline);
  transform: scaleX(0);
  transition: transform 1600ms var(--rz-wb-ease) var(--rz-wb-t-env);
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__hairline {
  transform: scaleX(1);
}

/* ------------------------------------------------------------- close control */
.rz-welcome-bonus__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--rz-wb-close-border);
  border-radius: 0;
  color: var(--rz-wb-close-text);
  font-family: var(--rz-wb-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--rz-wb-track-btn);
  text-transform: var(--rz-wb-caps);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 500ms var(--rz-wb-ease) var(--rz-wb-t-panel),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__close {
  opacity: 1;
}
.rz-welcome-bonus__close:hover {
  background-color: var(--rz-wb-close-hover-bg);
  border-color: var(--rz-wb-focus);
  color: var(--rz-wb-text);
}
.rz-welcome-bonus__close svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ------------------------------------------------------------------- panel */
.rz-welcome-bonus__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 3.4vw, 52px);
  background: var(--rz-wb-panel-bg);
  border: 1px solid var(--rz-wb-panel-border);
  box-shadow: var(--rz-wb-panel-shadow);
  opacity: 0;
  transform: translate3d(0, var(--rz-wb-rise), 0);
  transition:
    opacity var(--rz-wb-fade-ms) var(--rz-wb-ease) var(--rz-wb-t-panel),
    transform var(--rz-wb-fade-ms) var(--rz-wb-ease) var(--rz-wb-t-panel);
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.rz-welcome-bonus__panel::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  height: 2px;
  background: linear-gradient(var(--rz-wb-dir), var(--rz-wb-champagne) 0%, var(--rz-wb-turquoise) 58%, transparent 100%);
}

.rz-welcome-bonus__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(14px, 2vh, 20px);
  font-family: var(--rz-wb-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--rz-wb-track-caps);
  text-transform: var(--rz-wb-caps);
  color: var(--rz-wb-eyebrow);
}
.rz-welcome-bonus__eyebrow::before {
  content: '';
  flex: none;
  width: 28px;
  height: 1px;
  background: linear-gradient(var(--rz-wb-dir), var(--rz-wb-champagne), var(--rz-wb-turquoise));
}

.rz-welcome-bonus__hook {
  margin: 0 0 clamp(18px, 2.6vh, 28px);
  font-family: var(--rz-wb-serif);
  font-size: clamp(2rem, 1.1rem + 2.4vw, 3.35rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--rz-wb-text);
  text-wrap: balance;
}
.rz-welcome-bonus__hook-lead,
.rz-welcome-bonus__hook-accent {
  display: block;
}
.rz-welcome-bonus__hook-accent {
  padding-block-end: 0.14em;
  margin-block-end: -0.14em;
  color: var(--rz-wb-accent-b);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rz-welcome-bonus__hook-accent {
    background-image: linear-gradient(var(--rz-wb-dir), var(--rz-wb-accent-a) 0%, var(--rz-wb-accent-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.rz-welcome-bonus__offer {
  margin: 0 0 clamp(24px, 3.4vh, 34px);
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--rz-wb-champagne);
}
.rz-welcome-bonus__title {
  margin: 0;
  font-family: var(--rz-wb-serif);
  font-size: clamp(1.5rem, 1.05rem + 1.15vw, 2.15rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--rz-wb-title);
}
.rz-welcome-bonus__qual {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--rz-wb-text-2);
}

/* ----------------------------------------------------------------- actions */
.rz-welcome-bonus__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 0;
  opacity: 0;
  transition: opacity var(--rz-wb-fade-ms) var(--rz-wb-ease) var(--rz-wb-t-cta);
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__actions {
  opacity: 1;
}

.rz-welcome-bonus__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  background: linear-gradient(180deg, #efd997 0%, #d9b768 46%, #c19a4c 100%);
  border: 1px solid rgba(255, 238, 190, 0.75);
  border-radius: 0;
  box-shadow:
    0 16px 32px -16px rgba(217, 183, 104, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(120, 86, 24, 0.35);
  color: #071526;
  font-family: var(--rz-wb-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--rz-wb-track-btn);
  text-transform: var(--rz-wb-caps);
  text-align: center;
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}
.rz-welcome-bonus__cta:hover {
  color: #071526;
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 22px 40px -16px rgba(217, 183, 104, 0.85),
    0 0 0 4px rgba(217, 183, 104, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(120, 86, 24, 0.35);
}
.rz-welcome-bonus__cta:active {
  filter: brightness(0.96);
  transform: translateY(1px);
  box-shadow:
    0 8px 16px -10px rgba(217, 183, 104, 0.7),
    inset 0 2px 4px rgba(120, 86, 24, 0.3);
}

.rz-welcome-bonus__terms {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--rz-wb-link);
  font-family: var(--rz-wb-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: var(--rz-wb-link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition:
    color 200ms ease,
    text-decoration-color 200ms ease;
}
.rz-welcome-bonus__terms:hover {
  color: var(--rz-wb-link-hover);
  text-decoration-color: currentColor;
}
.rz-welcome-bonus__arrow {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--rz-wb-link-hover);
  transform: scaleX(var(--rz-wb-flip));
  transition: transform 260ms var(--rz-wb-ease);
}
.rz-welcome-bonus__terms:hover .rz-welcome-bonus__arrow {
  transform: translateX(calc(3px * var(--rz-wb-flip))) scaleX(var(--rz-wb-flip));
}

/* -------------------------------------------------------------- disclosure */
.rz-welcome-bonus__disclosure {
  align-self: stretch;
  margin: clamp(22px, 3vh, 30px) 0 0;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--rz-wb-rule);
  max-width: 64ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rz-wb-text-3);
  opacity: 0;
  transition: opacity var(--rz-wb-fade-ms) var(--rz-wb-ease) var(--rz-wb-t-cta);
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__disclosure {
  opacity: 1;
}

/* Short desktop screens (1366×768 laptops): the same hierarchy on a tighter
   rhythm, so the whole offer fits without scrolling. */
@media (min-width: 992px) and (max-height: 800px), (max-height: 560px) {
  .rz-welcome-bonus__panel {
    padding: clamp(24px, 2.6vw, 40px);
  }
  .rz-welcome-bonus__eyebrow {
    margin-block-end: 12px;
  }
  .rz-welcome-bonus__hook {
    margin-block-end: 16px;
    font-size: clamp(2rem, 1rem + 1.9vw, 2.75rem);
  }
  .rz-welcome-bonus__offer {
    margin-block-end: 22px;
  }
  .rz-welcome-bonus__disclosure {
    margin-block-start: 20px;
    padding-block-start: 14px;
  }
}

/* Phones: the primary action goes full width, the terms link centres. */
@media (max-width: 767.98px) {
  .rz-welcome-bonus__actions {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }
  .rz-welcome-bonus__cta {
    padding-inline: 16px;
  }
  .rz-welcome-bonus__terms {
    justify-content: center;
  }
}
@media (max-width: 399.98px) {
  .rz-welcome-bonus {
    --rz-wb-track-btn: 0.02em;
  }
  .rz-welcome-bonus__cta {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------- focus rings */
.rz-welcome-bonus :focus-visible {
  outline: 2px solid var(--rz-wb-focus);
  outline-offset: 3px;
}
.rz-welcome-bonus__sheet:focus-visible {
  outline: none;
}

/* ------------------------------------------------------------ 100% figure */
.rz-welcome-bonus__visual {
  opacity: 0;
  transform: translate3d(0, var(--rz-wb-rise), 0) scale(var(--rz-wb-settle));
  transition:
    opacity 1200ms var(--rz-wb-ease) var(--rz-wb-t-fig),
    transform 1200ms var(--rz-wb-ease) var(--rz-wb-t-fig);
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__visual {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.rz-welcome-bonus__figure {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  direction: ltr;
  unicode-bidi: isolate;
}
.rz-welcome-bonus__figure .rz-wb-s1 { stop-color: var(--rz-wb-fig-1); }
.rz-welcome-bonus__figure .rz-wb-s2 { stop-color: var(--rz-wb-fig-2); }
.rz-welcome-bonus__figure .rz-wb-s3 { stop-color: var(--rz-wb-fig-3); }
.rz-welcome-bonus__figure .rz-wb-s4 { stop-color: var(--rz-wb-fig-4); }
.rz-welcome-bonus__figure .rz-wb-sheen { stop-color: var(--rz-wb-fig-sheen); }
.rz-welcome-bonus__figure .rz-wb-bloom { stop-color: var(--rz-wb-fig-bloom); }
.rz-welcome-bonus__figure .rz-wb-gold-1 { stop-color: #f3dfa6; }
.rz-welcome-bonus__figure .rz-wb-gold-2 { stop-color: var(--rz-wb-champagne); }
.rz-welcome-bonus__figure .rz-wb-gold-3 { stop-color: #a9833a; }
.rz-welcome-bonus__figure .rz-wb-flood { flood-color: var(--rz-wb-fig-glow); }
.rz-welcome-bonus__figure .rz-wb-ring { stroke: var(--rz-wb-fig-ring); }
.rz-welcome-bonus__figure .rz-wb-ring-2 { stroke: var(--rz-wb-fig-ring-2); }
.rz-welcome-bonus__figure .rz-wb-num {
  font-family: var(--rz-wb-display);
  font-weight: 400;
  stroke: var(--rz-wb-fig-edge);
  stroke-width: 1.2px;
  paint-order: stroke fill;
}
.rz-welcome-bonus__figure .rz-wb-num-sheen {
  font-family: var(--rz-wb-display);
  font-weight: 400;
}

/* Slow drift of the light — off for reduced motion */
@keyframes rz-wb-drift {
  from { transform: scaleX(var(--rz-wb-flip)) translate3d(0, 0, 0); }
  to { transform: scaleX(var(--rz-wb-flip)) translate3d(-1.5%, 1%, 0); }
}
.rz-welcome-bonus.is-open .rz-welcome-bonus__light {
  animation: rz-wb-drift 18s ease-in-out 2.4s infinite alternate;
}

/* Reduced motion: no travel, no rise — a short cross-fade in place. */
@media (prefers-reduced-motion: reduce) {
  .rz-welcome-bonus {
    --rz-wb-open-ms: 200ms;
    --rz-wb-close-ms: 160ms;
    --rz-wb-scrim-ms: 200ms;
    --rz-wb-ease-open: linear;
    --rz-wb-ease-close: linear;
    --rz-wb-travel: 0%;
    --rz-wb-rise: 0px;
    --rz-wb-settle: 1;
    --rz-wb-fade-ms: 200ms;
    --rz-wb-t-env: 0ms;
    --rz-wb-t-fig: 0ms;
    --rz-wb-t-panel: 0ms;
    --rz-wb-t-cta: 0ms;
  }
  .rz-welcome-bonus.is-open .rz-welcome-bonus__light {
    animation: none;
  }
  .rz-welcome-bonus__sheet {
    will-change: auto;
  }
}

/* ============================================================
   REGION 2 — geometry: coverage, top bar, scroll stage, grid
   The sheet is fixed and fills the visible viewport; the top bar
   (--rz-wb-top, the header row) holds the close control and never
   scrolls; the stage under it is the only scroller.
   ============================================================ */

.rz-welcome-bonus {
  --rz-wb-top: min(var(--rz-wb-header-h), 84px);
  --rz-wb-gutter: clamp(20px, 4vw, 56px);
  --rz-wb-close-size: 44px;

  position: fixed;
  inset: 0;
  z-index: var(--rz-wb-z);
  isolation: isolate;
}

.rz-welcome-bonus__scrim {
  position: absolute;
  inset: 0;
}

.rz-welcome-bonus__sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.rz-welcome-bonus__glass,
.rz-welcome-bonus__backdrop,
.rz-welcome-bonus__env {
  position: absolute;
  inset: 0;
}
.rz-welcome-bonus__light {
  position: absolute;
  inset: -4%;
}
.rz-welcome-bonus__env img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.rz-welcome-bonus__hairline {
  position: absolute;
  inset-inline: 0;
  top: var(--rz-wb-top);
  height: 1px;
}

.rz-welcome-bonus__close {
  position: absolute;
  z-index: 2;
  top: calc((var(--rz-wb-top) - var(--rz-wb-close-size)) / 2);
  inset-inline-end: var(--rz-wb-gutter);
  padding: 0 14px;
}

.rz-welcome-bonus__stage {
  position: absolute;
  z-index: 1;
  inset: var(--rz-wb-top) 0 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.rz-welcome-bonus__layout {
  display: grid;
  grid-template-columns: minmax(0, min(680px, 55%)) minmax(0, 1fr);
  grid-template-areas: 'offer visual';
  align-items: center;
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: clamp(24px, 4vh, 40px);
  width: 100%;
  max-width: 1440px;
  min-height: 100%;
  margin-inline: auto;
  padding: clamp(20px, 4vh, 56px) var(--rz-wb-gutter) calc(clamp(24px, 5vh, 64px) + env(safe-area-inset-bottom, 0px));
}

.rz-welcome-bonus__panel {
  grid-area: offer;
  justify-self: start;
  width: 100%;
  max-width: 680px;
  min-width: 0;
}

.rz-welcome-bonus__visual {
  grid-area: visual;
  justify-self: center;
  width: 100%;
  max-width: 580px;
  min-width: 0;
}

/* tablet: offer first, the figure under it */
@media (max-width: 991.98px) {
  .rz-welcome-bonus__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'offer'
      'visual';
    justify-items: center;
    align-content: center;
  }
  .rz-welcome-bonus__panel {
    justify-self: center;
  }
  .rz-welcome-bonus__visual {
    max-width: 400px;
  }
}

/* phones */
@media (max-width: 767.98px) {
  .rz-welcome-bonus {
    --rz-wb-top: 64px;
    --rz-wb-gutter: 16px;
  }
  .rz-welcome-bonus__close {
    padding: 0;
  }
  .rz-welcome-bonus__close-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rz-welcome-bonus__layout {
    align-content: start;
  }
  .rz-welcome-bonus__visual {
    max-width: 280px;
  }
}

@media (max-width: 399.98px) {
  .rz-welcome-bonus__visual {
    max-width: 220px;
  }
}

/* short screens: decoration gives way first; the offer, both links and the
   disclosure stay reachable through the stage scroller */
@media (min-width: 992px) and (max-height: 720px) {
  .rz-welcome-bonus__visual {
    max-width: 440px;
  }
}

@media (max-height: 560px) {
  .rz-welcome-bonus {
    --rz-wb-top: 56px;
  }
  .rz-welcome-bonus__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'offer';
    justify-items: center;
    align-content: start;
  }
  .rz-welcome-bonus__panel {
    justify-self: center;
  }
  .rz-welcome-bonus__visual {
    display: none;
  }
}