/* Hallmark · macrostructure: Ecosystem Index · nav: N1b · footer: Ft3 · hero: H6 · theme: custom (paper oklch(13% 0.018 258), accent oklch(55% 0.205 258), crypto oklch(76% 0.165 162), fonts: Chakra Petch + IBM Plex Sans, justification: geometric chamfered display paired with high-legibility technical grotesque for 390px mobile clarity; axes: S4-stacked-inline / asymmetric-ledger-spans / hairline-surface-step) · knobs: rail=snap-4, deck=asymmetric-left, crypto-lane=split-ledger · pre-emit: P5 H5 E5 S5 R5 V5 · contrast: pass (40-41) · slop: pass 61/61 (42-45) · mobile: pass (34,49,50-57 at 320/375/414/768) */
/* heading look for layout titles that are not heading elements (data-hx = former level) */
:where([data-hx]) { display: block; font-weight: bold; }
:where([data-hx="1"]) { font-size: 2em; margin-block: 0.67em; }
:where([data-hx="2"]) { font-size: 1.5em; margin-block: 0.83em; }
:where([data-hx="3"]) { font-size: 1.17em; margin-block: 1em; }
:where([data-hx="4"]) { font-size: 1em; margin-block: 1.33em; }
:where([data-hx="5"]) { font-size: 0.83em; margin-block: 1.67em; }
:where([data-hx="6"]) { font-size: 0.67em; margin-block: 2.33em; }

:root {
  --color-paper: oklch(13% 0.018 258);
  --color-paper-2: oklch(16.5% 0.022 258);
  --color-paper-3: oklch(20.5% 0.028 258);
  --color-paper-4: oklch(24.5% 0.034 258);
  --color-paper-glass: oklch(13.5% 0.020 258 / 0.92);
  --color-rule: oklch(26% 0.032 258);
  --color-rule-strong: oklch(38% 0.065 258);
  --color-ink: oklch(96% 0.008 258);
  --color-neutral: oklch(80% 0.016 258);
  --color-muted: oklch(67% 0.022 258);
  --color-accent: oklch(55% 0.205 258);
  --color-accent-hover: oklch(61% 0.198 258);
  --color-accent-bright: oklch(75% 0.155 258);
  --color-accent-soft: oklch(55% 0.205 258 / 0.15);
  --color-accent-border: oklch(62% 0.185 258 / 0.45);
  --color-accent-ink: oklch(98.5% 0.006 258);
  --color-crypto: oklch(76% 0.165 162);
  --color-crypto-soft: oklch(76% 0.165 162 / 0.14);
  --color-crypto-border: oklch(76% 0.165 162 / 0.42);
  --color-crypto-ink: oklch(14% 0.025 162);
  --color-focus: oklch(78% 0.155 258);
  --color-clear: oklch(0% 0 0 / 0);
  --shadow-whisper: 0 1px 2px oklch(8% 0.015 258 / 0.45);
  --shadow-hairline: 0 0 0 1px oklch(32% 0.040 258 / 0.35);
  --fade-lf: linear-gradient(180deg, oklch(16.5% 0.022 258 / 0) 0%, oklch(16.5% 0.022 258 / 0.92) 72%, oklch(16.5% 0.022 258) 100%);
  --surface-hero-glow: radial-gradient(circle at 85% 12%, oklch(55% 0.205 258 / 0.16) 0%, oklch(13% 0.018 258 / 0) 58%);
  --surface-crypto-glow: radial-gradient(circle at 100% 0%, oklch(76% 0.165 162 / 0.14) 0%, oklch(16.5% 0.022 258 / 0) 62%);

  --font-display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  --header-height: 4rem;
  --container-max: 82rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}

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

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--color-accent-bright);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

a:hover {
  color: var(--color-ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
.wb-hero__title,
.wb-sec__title,
.page-hero__title,
[data-hx="1"],
[data-hx="2"],
[data-hx="3"],
[data-hx="4"] {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  letter-spacing: -0.01em;
}

p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}

.wb-skip {
  position: absolute;
  top: -10rem;
  left: var(--space-md);
  z-index: var(--z-tooltip);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.wb-skip:focus-visible {
  top: var(--space-sm);
}

.wb-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (max-width: 24rem) {
  .wb-container {
    padding-inline: var(--space-xs);
  }
}

/* ==========================================================================
   HEADER & NAVIGATION (Archetype N1b)
   ========================================================================== */

.wb-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  height: var(--header-height);
  background-color: var(--color-paper-glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-rule);
}

.wb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  height: 100%;
}

.wb-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}

.wb-brand__img {
  width: auto;
  height: 2.25rem;
  object-fit: contain;
}

@media (max-width: 25rem) {
  .wb-brand__img {
    height: 1.75rem;
  }
}

.wb-nav {
  display: none;
  align-items: center;
  gap: var(--space-xs);
}

@media (min-width: 62rem) {
  .wb-nav {
    display: flex;
  }
}

.wb-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
}

.wb-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-neutral);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-clear);
  transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.wb-nav__link:hover {
  color: var(--color-ink);
  background-color: var(--color-paper-2);
}

.wb-nav__link:active {
  transform: translateY(1px);
}

.wb-nav__link[aria-current="page"] {
  color: var(--color-ink);
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}

.wb-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

@media (max-width: 25rem) {
  .wb-actions {
    gap: var(--space-2xs);
  }
}

/* ==========================================================================
   BUTTONS & AFFORDANCES (5 interactive states)
   ========================================================================== */

.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.5rem;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule-strong);
  background-color: var(--color-paper-2);
  color: var(--color-ink);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.wb-btn:hover {
  background-color: var(--color-paper-3);
  border-color: var(--color-accent-bright);
  color: var(--color-ink);
}

.wb-btn:active {
  transform: translateY(1px);
}

.wb-btn:disabled,
.wb-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.wb-btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.wb-btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-ink);
}

.wb-btn--outline {
  background-color: var(--color-paper-2);
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}

.wb-btn--lg {
  min-height: 2.875rem;
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.9375rem;
}

.wb-actions .wb-btn {
  min-height: 2.25rem;
  padding: var(--space-2xs) var(--space-sm);
  font-size: 0.8125rem;
}

@media (max-width: 25rem) {
  .wb-actions .wb-btn {
    min-height: 2rem;
    padding: var(--space-3xs) var(--space-xs);
    font-size: 0.75rem;
  }
}

.wb-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule-strong);
  background-color: var(--color-paper-2);
  color: var(--color-ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.wb-menu-btn:hover {
  background-color: var(--color-paper-3);
  border-color: var(--color-accent-bright);
}

.wb-menu-btn:active {
  transform: translateY(1px);
}

.wb-menu-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 25rem) {
  .wb-menu-btn {
    width: 2rem;
    height: 2rem;
  }
}

@media (min-width: 62rem) {
  .wb-menu-btn {
    display: none;
  }
}

/* mobile header: 40px controls, touch area stretched to 48px tall without moving the layout */
@media (max-width: 61.99rem) {
  .wb-actions .wb-btn {
    position: relative;
    min-height: 2.5rem;
  }

  .wb-menu-btn {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
  }

  .wb-actions .wb-btn::after,
  .wb-menu-btn::after {
    content: "";
    position: absolute;
    inset: -0.25rem 0;
  }

  /* the menu button also grows toward the screen edge, never over Register */
  .wb-menu-btn::after {
    inset: -0.25rem -0.25rem -0.25rem 0;
  }

  /* while the drawer is open the bars give way to a close X (::after stays the touch area) */
  .wb-menu-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.125rem;
    height: 1.125rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    transform: rotate(-45deg) scale(0.6);
    transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out);
  }

  .wb-menu-btn__icon {
    transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out);
  }

  .wb-menu-btn[aria-expanded="true"] {
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent-border);
    color: var(--color-accent);
  }

  .wb-menu-btn[aria-expanded="true"]::before {
    opacity: 1;
    transform: none;
  }

  .wb-menu-btn[aria-expanded="true"] .wb-menu-btn__icon {
    opacity: 0;
    transform: rotate(45deg) scale(0.6);
  }
}

.wb-menu-btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Mobile Drawer */
.wb-drawer {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
  box-shadow: 0 1.25rem 2rem -1.5rem oklch(30% 0.05 258 / 0.45);
  padding: var(--space-xs) var(--space-md) var(--space-md);
  transform: translateY(-0.5rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-short) var(--ease-in), opacity var(--dur-short) var(--ease-in), visibility var(--dur-short) var(--ease-in);
}

.wb-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--ease-out);
}

@media (min-width: 62rem) {
  .wb-drawer {
    display: none;
  }
}

/* scrim behind the open drawer (element added by site.js); sits under the header, over the page */
.wb-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  background-color: color-mix(in oklch, var(--color-ink) 45%, transparent);
  opacity: 0;
  visibility: hidden;
  touch-action: none;
  transition: opacity var(--dur-short) var(--ease-in), visibility var(--dur-short) var(--ease-in);
}

.wb-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-timing-function: var(--ease-out);
}

@media (min-width: 62rem) {
  .wb-drawer-backdrop {
    display: none;
  }
}

/* page scroll is locked while the drawer is open; padding replaces the hidden scrollbar */
html.wb-nav-open {
  overflow: hidden;
  padding-right: var(--wb-scrollbar-gap, 0px);
}

/* one column of rows split by hairlines; sub-pages sit under their parent (see .wb-drawer__sub) */
.wb-drawer__list {
  max-width: 36rem;
  margin-inline: auto;
  list-style: none;
  padding: 0;
}

.wb-drawer__list > li {
  border-bottom: 1px solid var(--color-rule);
}

.wb-drawer__list > li:last-child {
  border-bottom: 0;
}

/* landscape phones and tablets: two balanced columns, a group never splits from its parent */
@media (min-width: 40rem) {
  .wb-drawer__list {
    max-width: 48rem;
    columns: 2;
    column-gap: var(--space-xl);
  }

  .wb-drawer__list > li {
    break-inside: avoid;
  }

  .wb-drawer__list > li:last-child {
    border-bottom: 1px solid var(--color-rule);
  }
}

.wb-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.875rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.wb-drawer__link::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: var(--color-rule-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wb-drawer__link:hover {
  background-color: var(--color-paper-2);
}

.wb-drawer__link[aria-current="page"] {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

.wb-drawer__link[aria-current="page"]::after {
  background-color: var(--color-accent);
}

/* ==========================================================================
   HERO ARCHETYPE H6 (Asymmetric Command Deck + Snap Banner Stage)
   ========================================================================== */

.wb-hero {
  position: relative;
  padding-block-start: var(--space-xl);
  padding-block-end: var(--space-2xl);
  background-image: var(--surface-hero-glow);
  border-bottom: 1px solid var(--color-rule);
}

.wb-hero__deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

@media (min-width: 56rem) {
  .wb-hero__deck {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    align-items: end;
    gap: var(--space-xl);
  }
}

.wb-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.wb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-3xs) var(--space-sm);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-neutral);
  line-height: 1.2;
  white-space: nowrap;
}

.wb-eyebrow__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--color-crypto);
}

.wb-hero__title {
  font-size: clamp(1.75rem, 3.6vw + 0.75rem, 3.125rem);
  line-height: 1.08;
  max-width: 24ch;
}

.wb-hero__lede {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  line-height: 1.55;
  color: var(--color-neutral);
  max-width: 60ch;
}

.wb-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.wb-hero__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  padding: var(--space-sm);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.wb-step-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  background-color: var(--color-paper-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
  min-width: 0;
}

.wb-step-mini__img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.wb-step-mini__label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.wb-step-mini__meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.3;
}

/* Promo Banner Swipe Rail */
.wb-rail-wrap {
  position: relative;
}

.wb-rail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.wb-rail-bar__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.wb-rail-controls {
  display: none;
  align-items: center;
  gap: var(--space-xs);
}

@media (min-width: 48rem) {
  .wb-rail-controls {
    display: flex;
  }
}

.wb-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.wb-rail-btn:hover {
  background-color: var(--color-paper-3);
  border-color: var(--color-accent-bright);
}

.wb-rail-btn:active {
  transform: translateY(1px);
}

.wb-rail-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wb-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 92%);
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--color-accent) 70%, transparent) transparent;
  padding-bottom: var(--space-xs);
}

/* the rail's scrollbar stays native but takes the brand blue, fuller while the rail is in use */
.wb-rail:hover,
.wb-rail:focus-within {
  scrollbar-color: var(--color-accent) transparent;
}

/* Safari / older WebKit: same thin blue thumb on a clear track */
.wb-rail::-webkit-scrollbar {
  height: 0.375rem;
}

.wb-rail::-webkit-scrollbar-track {
  background: transparent;
}

.wb-rail::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklch, var(--color-accent) 70%, transparent);
  border-radius: 999px;
}

.wb-rail:hover::-webkit-scrollbar-thumb,
.wb-rail:focus-within::-webkit-scrollbar-thumb {
  background-color: var(--color-accent);
}

@media (min-width: 48rem) {
  .wb-rail {
    grid-auto-columns: minmax(0, 78%);
  }
}

@media (min-width: 68rem) {
  .wb-rail {
    grid-auto-columns: minmax(0, 66%);
  }
}

.wb-rail__item {
  scroll-snap-align: start;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wb-rail__media {
  aspect-ratio: 2400 / 503;
  width: 100%;
  background-color: var(--color-paper-3);
  overflow: hidden;
}

.wb-rail__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* caption fills the rest of the card: title on top, link pinned to the bottom so every card lines up */
.wb-rail__caption {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-rule);
}

.wb-rail__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
}

.wb-rail__link {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent-bright);
  white-space: nowrap;
}

/* ==========================================================================
   SECTION SCAFFOLDING (Gate 54 Compliant: Stacked 1-Column Title Block)
   ========================================================================== */

.wb-sec {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-rule);
}

.wb-sec--alt {
  background-color: var(--color-paper-2);
}

.wb-sec__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 48rem) {
  .wb-sec__head {
    flex-direction: row;
    align-items: flex-end;
  }
}

.wb-sec__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  max-width: 62ch;
}

.wb-sec__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent-bright);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wb-sec__title {
  font-size: clamp(1.375rem, 2.2vw + 0.65rem, 2.125rem);
  line-height: 1.12;
}

.wb-sec__desc {
  font-size: 0.9375rem;
  color: var(--color-neutral);
  max-width: 65ch;
}

.wb-sec__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent-bright);
  white-space: nowrap;
  padding-bottom: var(--space-3xs);
  border-bottom: 1px solid var(--color-accent-border);
}

.wb-sec__link:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* ==========================================================================
   CATEGORY HUB INDEX (5 Tall Cards, Asymmetric Ledger Rhythm)
   ========================================================================== */

.wb-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

/* odd card count in the 2-column phone layout: centre the last card in its own row instead of leaving it hanging left */
@media (max-width: 47.99rem) {
  .wb-cat-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-md)) / 2);
  }
}

@media (min-width: 48rem) {
  .wb-cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .wb-cat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.wb-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

a.wb-cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent-bright);
}

.wb-cat-card--soon {
  opacity: 0.86;
  background-color: var(--color-paper);
}

.wb-cat-card__media {
  aspect-ratio: 520 / 957;
  width: 100%;
  background-color: var(--color-paper-3);
  overflow: hidden;
}

.wb-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wb-cat-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-rule);
  background-color: var(--color-paper-2);
  flex-grow: 1;
}

.wb-cat-card__title {
  font-size: 1.0625rem;
  line-height: 1.2;
}

.wb-cat-card__meta {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.wb-cat-card__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-bright);
  border: 1px solid var(--color-accent-border);
  /* wraps inside the card instead of being clipped by it on narrow phones */
  max-width: 100%;
  white-space: normal;
}

.wb-cat-card--soon .wb-cat-card__badge {
  background-color: var(--color-paper-3);
  color: var(--color-muted);
  border-color: var(--color-rule);
}

/* ==========================================================================
   REUSABLE TILE GRIDS & PROVIDER STRIPS (Home + Subpages)
   ========================================================================== */

/* cards are wide enough for the longest studio name ("Spadegaming") on one line, while 8 still fit a desktop row */
.provider-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.provider-card {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  min-width: 0;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

a.provider-card:hover {
  border-color: var(--color-accent-bright);
  transform: translateY(-2px);
}

.provider-card__img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.provider-card__name {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

/* odd tile count in the 2-column phone layout: centre the last tile in its own row at normal tile width */
@media (max-width: 35.99rem) {
  .tile-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--space-sm)) / 2);
  }
}

@media (min-width: 36rem) {
  .tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

@media (min-width: 56rem) {
  .tile-grid--slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tile-grid--live {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .tile-grid--sports {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .tile-grid--slots {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.tile-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

a.tile-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent-bright);
}

.tile-card__media {
  width: 100%;
  aspect-ratio: 400 / 384;
  background-color: var(--color-paper);
  overflow: hidden;
}

.tile-card--portrait .tile-card__media {
  aspect-ratio: 420 / 561;
}

.tile-card--square .tile-card__media {
  aspect-ratio: 1 / 1;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-card--square .tile-card__img {
  object-fit: contain;
}

.tile-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm);
  border-top: 1px solid var(--color-rule);
}

.tile-card__title {
  font-size: 0.9375rem;
  line-height: 1.25;
}

.tile-card__meta {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* ==========================================================================
   PROMOTION CARDS (No text overlaid on banner images)
   ========================================================================== */

.promo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 44rem) {
  .promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .promo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.promo-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.promo-card:hover {
  border-color: var(--color-rule-strong);
}

.promo-card__media {
  width: 100%;
  aspect-ratio: 1680 / 597;
  background-color: var(--color-paper-3);
  overflow: hidden;
}

.promo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  flex-grow: 1;
}

.promo-card__title {
  font-size: 1.0625rem;
  line-height: 1.25;
}

.promo-card__text {
  font-size: 0.875rem;
  color: var(--color-neutral);
  line-height: 1.5;
}

.promo-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-rule);
}

.promo-card__terms {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* ==========================================================================
   PAYMENTS & USDT CRYPTO LANE (Asymmetric Split Ledger)
   ========================================================================== */

.wb-pay-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 58rem) {
  .wb-pay-ledger {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    align-items: stretch;
  }
}

.wb-crypto-lane {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-paper-2);
  background-image: var(--surface-crypto-glow);
  border: 1px solid var(--color-crypto-border);
  border-radius: var(--radius-md);
}

.wb-crypto-lane__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.wb-crypto-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-crypto-soft);
  border: 1px solid var(--color-crypto-border);
  border-radius: var(--radius-xs);
  color: var(--color-crypto);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.wb-crypto-lane__logo {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}

.wb-crypto-lane__title {
  font-size: 1.375rem;
  line-height: 1.2;
}

.wb-crypto-lane__desc {
  font-size: 0.9375rem;
  color: var(--color-neutral);
  line-height: 1.55;
}

.wb-crypto-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-rule);
}

.wb-crypto-spec__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-muted);
  text-transform: uppercase;
}

.wb-crypto-spec__val {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
}

.wb-bank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

@media (min-width: 34rem) {
  .wb-bank-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .wb-bank-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.wb-bank-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 4.5rem;
  padding: var(--space-sm);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
}

/* one plate size for every bank logo; the logo is contained inside it whatever the file's shape */
.wb-bank-tile__img {
  width: 6.5rem;
  max-width: 100%;
  height: 2rem;
  object-fit: contain;
}

.wb-bank-tile__name {
  font-size: 0.6875rem;
  color: var(--color-muted);
  text-align: center;
  line-height: 1.2;
}

/* ==========================================================================
   GUIDE CARDS
   ========================================================================== */

.guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 48rem) {
  .guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.guide-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  min-width: 0;
}

.guide-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.guide-card__tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent-bright);
}

.guide-card__title {
  font-size: 1.125rem;
  line-height: 1.3;
}

.guide-card__text {
  font-size: 0.875rem;
  color: var(--color-neutral);
  line-height: 1.55;
}

.guide-card__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ==========================================================================
   SUBPAGE REUSABLE COMPONENTS (Page Hero, Breadcrumb, Filter Chips, Table, FAQ)
   ========================================================================== */

.breadcrumb {
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  background-color: var(--color-paper-2);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  font-size: 0.8125rem;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--color-rule-strong);
}

.breadcrumb__link {
  position: relative;
  color: var(--color-neutral);
  white-space: nowrap;
}

/* taller touch area without changing the breadcrumb bar's height */
.breadcrumb__link::after {
  content: "";
  position: absolute;
  inset: -0.75rem -0.25rem;
}

.breadcrumb__link:hover {
  color: var(--color-ink);
}

.page-hero {
  padding-block-start: var(--space-xl);
  padding-block-end: var(--space-2xl);
  background-image: var(--surface-hero-glow);
  border-bottom: 1px solid var(--color-rule);
}

.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 56rem) {
  .page-hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
  }
}

.page-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.page-hero__title {
  font-size: clamp(1.75rem, 3.2vw + 0.75rem, 2.75rem);
  line-height: 1.08;
}

.page-hero__lede {
  font-size: 1.0625rem;
  color: var(--color-neutral);
  max-width: 62ch;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-neutral);
  white-space: nowrap;
  cursor: pointer;
}

.filter-chip.is-active {
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent-bright);
  color: var(--color-ink);
}

/* hover only where a pointer can hover; on touch a tapped chip would keep looking active */
@media (hover: hover) {
  .filter-chip:hover {
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent-bright);
    color: var(--color-ink);
  }
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper-2);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-rule);
}

.data-table th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  background-color: var(--color-paper-3);
  white-space: nowrap;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 68ch;
}

.faq-item {
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
}

.faq-question {
  padding: var(--space-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

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

.faq-answer {
  padding: 0 var(--space-md) var(--space-md);
  font-size: 0.9375rem;
  color: var(--color-neutral);
  line-height: 1.6;
}

/* ==========================================================================
   LONG-FORM SEO SLOT (.lf contract)
   ========================================================================== */

.lf {
  padding-block: var(--space-2xl);
  background-color: var(--color-paper-2);
  border-top: 1px solid var(--color-rule);
}

.lf-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.lf-title {
  font-size: clamp(1.25rem, 1.8vw + 0.6rem, 1.75rem);
  margin-bottom: var(--space-md);
}

.lf-body {
  position: relative;
  max-width: 72ch;
  font-size: 1.03125rem;
  line-height: 1.65;
  color: var(--color-neutral);
}

.lf-body.is-collapsed {
  max-height: 16.25rem;
  overflow: hidden;
}

.lf-body.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rem;
  background-image: var(--fade-lf);
  pointer-events: none;
}

.lf-body.is-open {
  max-height: none;
  overflow: visible;
}

.lf-body h2 {
  font-size: 1.375rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.lf-body h3 {
  font-size: 1.125rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.lf-body p,
.lf-body ul,
.lf-body ol,
.lf-body blockquote {
  margin-bottom: var(--space-md);
}

.lf-body ul,
.lf-body ol {
  padding-left: var(--space-lg);
}

.lf-body blockquote {
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-accent);
  color: var(--color-ink);
}

.lf-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
  font-variant-numeric: tabular-nums;
}

.lf-body th,
.lf-body td {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-rule);
  text-align: left;
}

.lf-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
}

.lf-bar {
  height: 0.875rem;
  background-color: var(--color-paper-3);
  border-radius: var(--radius-xs);
}

.lf-bar--h2 {
  height: 1.375rem;
  width: 48%;
  margin-top: var(--space-sm);
  background-color: var(--color-paper-4);
}

.lf-bar--w95 { width: 95%; }
.lf-bar--w88 { width: 88%; }
.lf-bar--w92 { width: 92%; }
.lf-bar--w76 { width: 76%; }
.lf-bar--w84 { width: 84%; }
.lf-bar--w68 { width: 68%; }
.lf-bar--w90 { width: 90%; }
.lf-bar--w72 { width: 72%; }
.lf-bar--w54 { width: 54%; }

.lf-toggle {
  margin-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.lf-toggle:hover {
  background-color: var(--color-paper-4);
  border-color: var(--color-accent-bright);
}

.lf-toggle:active {
  transform: translateY(1px);
}

.lf-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ==========================================================================
   FOOTER ARCHETYPE Ft3 (Directory Index + Payment Strip + 18+ Colophon)
   ========================================================================== */

.wb-footer {
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-rule-strong);
  padding-block: var(--space-2xl);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.wb-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}

@media (min-width: 48rem) {
  .wb-footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
  }
}

.wb-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.wb-footer__logo-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.wb-footer__vip {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.wb-footer__tagline {
  color: var(--color-neutral);
  max-width: 46ch;
  line-height: 1.55;
}

.wb-footer__nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

@media (min-width: 38rem) {
  .wb-footer__nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wb-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.wb-footer__col-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2xs);
}

.wb-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
}

.wb-footer__link {
  color: var(--color-neutral);
  white-space: nowrap;
}

.wb-footer__link:hover {
  color: var(--color-ink);
}

.wb-footer__pay {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
}

.wb-footer__pay-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.wb-footer__pay-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.wb-footer__pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.125rem;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xs);
}

.wb-footer__pay-chip img {
  width: 4.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.wb-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
}

@media (min-width: 48rem) {
  .wb-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.wb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  max-width: 65ch;
}

.wb-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xs) var(--space-xs);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
}

/* ==========================================================================
   REDUCED MOTION FALLBACK (Gate 27)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .wb-drawer,
  .wb-cat-card,
  .tile-card,
  .provider-card,
  .wb-btn {
    transform: none !important;
  }
}

/* add-hero */
/* Home hero, split layout: framed promo banner + copy column (structure follows v3) */
:root {
  --hero-frame-ring: linear-gradient(135deg, oklch(55% 0.205 258 / 0.85) 0%, oklch(76% 0.165 162 / 0.55) 100%);
  --hero-float-bg: oklch(16.5% 0.022 258 / 0.9);
  --hero-frame-shadow: 0 18px 40px -18px oklch(55% 0.205 258 / 0.55);
}

.wb-hero--split {
  padding-block-start: var(--space-lg);
  padding-block-end: var(--space-2xl);
}

.wb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 56rem) {
  .wb-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

.wb-split__frame {
  position: relative;
  padding: var(--space-xs);
  border-radius: var(--radius-lg);
  background: var(--hero-frame-ring);
  box-shadow: var(--hero-frame-shadow);
}

.wb-split__frame-inner {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-paper-2);
  padding: var(--space-sm);
}

.wb-split__frame-inner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.wb-split__float {
  position: absolute;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 999px;
  background-color: var(--hero-float-bg);
  border: 1px solid var(--color-accent-border);
  box-shadow: var(--shadow-whisper);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.wb-split__float img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.wb-split__float--tl {
  top: var(--space-sm);
  left: var(--space-sm);
}

.wb-split__float--br {
  bottom: var(--space-sm);
  right: var(--space-sm);
}

.wb-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  min-width: 0;
}

.wb-split__content .wb-hero__title {
  margin: 0;
}

.wb-split__divider {
  width: 100%;
  height: 1px;
  border: 0;
  margin: var(--space-2xs) 0;
  background-color: var(--color-rule);
}

.wb-split__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-sm);
}

.wb-split__fact {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.25;
}

.wb-split__fact svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--color-crypto);
}

.wb-sec--rail {
  padding-block: var(--space-xl);
}

@media (max-width: 29.9375rem) {
  .wb-split__float {
    padding: var(--space-3xs) var(--space-xs);
    font-size: 0.6875rem;
  }

  .wb-split__float img {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* sit the chips on the frame's top and bottom edges so they no longer cover the banner artwork
     (translate, not transform, so the hover lift still composes) */
  .wb-split__float--tl {
    top: 0;
    translate: 0 -50%;
  }

  .wb-split__float--br {
    bottom: 0;
    translate: 0 50%;
  }
}

/* add-home */

/* Footer archetype: Ft4: Dense typographic colophon + statement ledger (replaces Ft3 link columns) */

/* 1. Brand mark + live text wordmark (readable on dark header down to 320px) */
.wb-brand {
  gap: var(--space-xs);
  color: var(--color-ink);
}

.wb-brand:hover {
  color: var(--color-accent-bright);
}

.wb-brand__img {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-xs);
}

.wb-brand__text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@media (max-width: 25rem) {
  .wb-brand {
    gap: var(--space-2xs);
  }
  .wb-brand__img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .wb-brand__text {
    font-size: 0.8125rem;
  }
}

/* 2. Promo rail: flex track with explicit flex-basis so 390px shows ~84% card width + peek */
.wb-rail {
  display: flex;
  grid-auto-flow: unset;
  grid-auto-columns: unset;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-xs);
}

.wb-rail__item {
  flex: 0 0 84%;
  max-width: 84%;
  min-width: 18.75rem;
}

@media (min-width: 44rem) {
  .wb-rail__item {
    flex: 0 0 46%;
    max-width: 46%;
  }
}

@media (min-width: 68rem) {
  .wb-rail__item {
    flex: 0 0 31.5%;
    max-width: 31.5%;
  }
}

.wb-rail__media {
  aspect-ratio: 1680 / 597;
}

/* 3. Category cards: cropped 524x287 landscape banners + Sports typographic/logo card */
.wb-cat-card__media {
  aspect-ratio: 524 / 287;
  background-color: var(--color-paper-3);
}

.wb-cat-card__media--sports {
  display: flex;
  align-items: stretch;
  background-color: var(--color-paper-3);
  background-image: var(--surface-hero-glow);
}

.wb-sports-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
}

.wb-sports-art__tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent-bright);
  letter-spacing: 0.04em;
}

.wb-sports-art__logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
  align-items: center;
}

.wb-sports-art__logos img {
  width: 100%;
  max-height: 2.5rem;
  object-fit: contain;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xs);
  padding: var(--space-3xs);
}

/* 4. Footer Archetype Ft4: Dense typographic colophon + specification ledger */
.wb-colophon {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}

@media (min-width: 56rem) {
  .wb-colophon {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: start;
  }
}

.wb-colophon__statement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.wb-colophon__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.wb-colophon__lead {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.45;
  max-width: 44ch;
}

.wb-colophon__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.wb-colophon__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-neutral);
  white-space: nowrap;
}

.wb-colophon__link:hover {
  color: var(--color-ink);
  border-color: var(--color-accent-bright);
  background-color: var(--color-paper-3);
}

.wb-colophon__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.wb-colophon__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}

@media (min-width: 36rem) {
  .wb-colophon__row {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: var(--space-md);
  }
}

.wb-colophon__key {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-accent-bright);
  letter-spacing: 0.04em;
}

.wb-colophon__val {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-neutral);
  line-height: 1.5;
}

.wb-colophon__rails {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-2xs);
}

.wb-colophon__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
}

@media (min-width: 48rem) {
  .wb-colophon__meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.wb-colophon__copy {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* add-hubs */

/* Hub subpage compositions: Slots (grid), Casino (ledger rows), Sports (2x2 book deck + split) */

.hub-hero-media {
  width: 100%;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hub-hero-media--wide {
  aspect-ratio: 1680 / 450;
}

.hub-hero-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-hero-triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

.hub-hero-triptych__item {
  aspect-ratio: 420 / 561;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hub-hero-triptych__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-ledger {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hub-ledger__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

@media (min-width: 38rem) {
  .hub-ledger__row {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    padding: var(--space-md) var(--space-lg);
  }
}

.hub-ledger__media {
  aspect-ratio: 420 / 561;
  width: 100%;
  background-color: var(--color-paper-3);
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--color-rule);
}

.hub-ledger__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-ledger__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.hub-ledger__title {
  font-size: 1.25rem;
  line-height: 1.2;
}

.hub-ledger__tag {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  padding: var(--space-3xs) var(--space-sm);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

@media (min-width: 38rem) {
  .hub-ledger__tag {
    display: inline-flex;
  }
}

.hub-sports-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.hub-sports-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
}

.hub-sports-board__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.hub-sports-board__cell {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.hub-sports-board__cell img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.hub-sports-board__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.hub-book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 38rem) {
  .hub-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hub-book-card {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.hub-book-card__media {
  width: 5.5rem;
  height: 5.5rem;
  padding: var(--space-xs);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-book-card__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hub-book-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.hub-book-card__title {
  font-size: 1.375rem;
  line-height: 1.2;
}

.hub-esports-split,
.hub-promo-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (min-width: 48rem) {
  .hub-esports-split {
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: center;
  }
  .hub-promo-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: stretch;
  }
}

.hub-esports-split__media {
  aspect-ratio: 1 / 1;
  background-color: var(--color-paper-3);
  overflow: hidden;
}

.hub-esports-split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-esports-split__body,
.hub-promo-split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.hub-esports-split__title {
  font-size: 1.5rem;
  line-height: 1.2;
}

.hub-promo-split__media {
  aspect-ratio: 1680 / 597;
  background-color: var(--color-paper-3);
  overflow: hidden;
}

.hub-cross-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 48rem) {
  .hub-cross-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hub-cross-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-paper-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.hub-cross-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent-bright);
  color: var(--color-ink);
}

.hub-cross-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.hub-cross-card__title {
  font-size: 1.25rem;
  line-height: 1.25;
}

.hub-cross-card__meta {
  font-size: 0.875rem;
  color: var(--color-neutral);
  line-height: 1.5;
}

.hub-cross-card__cta {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent-bright);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hub-cross-card {
    transform: none !important;
  }
}

/* add-offers */

:root {
  --scroll-offset-sec: 5rem;
}

/* 1. Anchor Scroll Offset & In-page Chip Navigation */
.wb-anchor-sec {
  scroll-margin-top: var(--scroll-offset-sec);
}

/* long-form TOC targets (h2/h3 ids) land below the sticky header too */
.lf-body [id] {
  scroll-margin-top: var(--scroll-offset-sec);
}

.wb-chip-nav {
  margin-bottom: 0;
  align-self: flex-start;
}

@media (min-width: 56rem) {
  .wb-chip-nav {
    justify-content: flex-end;
    align-self: flex-end;
  }
}

.filter-chip:active {
  transform: translateY(1px);
}

/* 2. Promotions Grid Variants & Banner Aspect Ratios */
.promo-grid--duo {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .promo-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.promo-grid--vip {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52rem;
}

.promo-card__media--draw {
  aspect-ratio: 1280 / 459;
}

.promo-card__media--vip {
  aspect-ratio: 1680 / 391;
}

.wb-promo-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.wb-vip-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.wb-vip-row__badge {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 24rem) {
  .wb-vip-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 3. Guides Editorial Index (Featured Slot + List Stack) */
.wb-editorial-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 56rem) {
  .wb-editorial-index {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    align-items: start;
  }
}

.wb-editorial-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.wb-guide-slot {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

/* natural height: no longer stretched to the list beside it (that left a large empty band inside the card) */
.wb-guide-slot--featured {
  display: flex;
  flex-direction: column;
}

.wb-guide-slot__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--color-paper-2);
  border-bottom: 1px solid var(--color-rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wb-guide-slot__media--icon {
  padding: var(--space-lg);
}

.wb-guide-slot__media--portrait {
  aspect-ratio: 420 / 320;
}

.wb-guide-slot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wb-guide-slot__media--icon .wb-guide-slot__img,
.wb-guide-slot__thumb--icon .wb-guide-slot__img {
  object-fit: contain;
}

.wb-guide-slot--featured .wb-guide-slot__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  flex-grow: 1;
}

.wb-guide-slot--row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 34rem) {
  .wb-guide-slot--row {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

.wb-guide-slot__thumb {
  width: 100%;
  height: 100%;
  min-height: 5.25rem;
  background-color: var(--color-paper-2);
  border-right: 1px solid var(--color-rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wb-guide-slot__thumb--icon {
  padding: var(--space-sm);
}

.wb-guide-slot--row .wb-guide-slot__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  min-width: 0;
}

@media (min-width: 38rem) {
  .wb-guide-slot--row .wb-guide-slot__body {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }
}

/* 4. Cross-Link 3-Hub Band */
.wb-cross-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

@media (min-width: 44rem) {
  .wb-cross-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* add-z-app */
/* embedded Winbox app (login / register guides) + hero chips as links */
.wb-app {
  padding-block: var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}

.wb-app__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
}

.wb-app__device {
  width: 100%;
  max-width: 26.875rem;
  padding: var(--space-2xs);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-paper-2);
  box-shadow: var(--shadow-whisper);
}

.wb-app__frame {
  display: block;
  width: 100%;
  height: min(46rem, 82vh);
  min-height: 36rem;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-paper);
}

/* the Winbox app switches to its wide PC layout on desktop browsers (about 1160px),
   so a phone-sized frame shows only its empty margin there */
@media (pointer: fine) and (min-width: 48rem) {
  .wb-app__device {
    max-width: 72.5rem;
  }

  .wb-app__frame {
    height: min(50rem, 86vh);
  }
}

.wb-app__note {
  max-width: 34rem;
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.wb-app__open {
  white-space: nowrap;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wb-app__open:hover {
  color: var(--color-accent-hover);
}

a.wb-split__float {
  pointer-events: auto;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

a.wb-split__float:hover {
  color: var(--color-ink);
  border-color: var(--color-accent-bright);
  transform: translateY(-1px);
}

/* add-z-blog */
/* blog posts under /guides/: hero image, related-guides list, linked card titles on the Guides hub */
.lf-figure {
  margin: var(--space-sm) 0 var(--space-md);
  max-width: 18rem;
}

.lf-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
  background-color: var(--color-paper-2);
}

.lf-related {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background-color: var(--color-paper-2);
}

.lf-related__label {
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
}

.lf-related__list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lf-related__list a {
  font-weight: 600;
}

.guide-card__title-link {
  color: inherit;
  text-decoration: none;
}

.guide-card__title-link:hover,
.guide-card__title-link:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* add-z-content */
/* long-form content pages: open body (no clamp), byline, linked guide cards */
.lf--open .lf-body { max-height: none; overflow: visible; }
.lf--open .lf-body::after { content: none; }
.lf-body h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw + 0.7rem, 2.125rem);
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
}
.lf-byline {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}
.lf-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.lf-body a:hover { color: var(--color-accent-hover); }
.lf-body { max-width: none; }
.lf-body table { width: 100%; }
@media (max-width: 767px) {
  .lf-body table { display: block; overflow-x: auto; max-width: 100%; }
  /* readable columns: wide tables scroll sideways inside their own box instead of squeezing to 1-2 words per line */
  .lf-body th, .lf-body td { min-width: 10rem; }
}
a.guide-card__link {
  color: var(--color-accent);
  border-color: var(--color-accent-border);
  text-decoration: none;
}
a.guide-card__link:hover { background-color: var(--color-accent-soft); }

/* guide/trust layout: article + sticky aside (TOC, CTA) */
.lf-doc__eyebrow { margin-bottom: var(--space-sm); }
.lf-doc__aside { display: grid; gap: var(--space-md); align-content: start; margin-top: var(--space-xl); }
.lf-doc__box {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background-color: var(--color-paper);
  padding: var(--space-md);
}
.lf-doc__label {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.lf-toc { display: grid; gap: var(--space-2xs); }
.lf-toc__link {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-neutral);
  text-decoration: none;
  padding: var(--space-2xs) 0;
}
.lf-toc__link:hover { color: var(--color-accent); }
.lf-doc__cta { display: grid; gap: var(--space-xs); }
.lf-doc__lede { font-size: 0.875rem; color: var(--color-neutral); line-height: 1.5; margin: 0 0 var(--space-2xs); }

/* below 1024px site.js moves the TOC box under the byline and collapses it behind a toggle */
.lf-doc__box--inline { position: relative; margin: 0 0 var(--space-lg); padding: 0; }
.lf-doc__box--inline .lf-doc__label { margin: 0; padding: var(--space-md) 3rem var(--space-md) var(--space-md); line-height: 1.5rem; }
.lf-doc__box--inline .lf-toc { display: none; padding: 0 var(--space-md) var(--space-md); }
.lf-doc__box--inline.is-open .lf-toc { display: grid; }
.lf-doc__box--inline .lf-toc__link { color: var(--color-neutral); text-decoration: none; }
.lf-doc__box--inline .lf-toc__link:hover { color: var(--color-accent); }
.lf-toc-toggle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-md);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-neutral);
  cursor: pointer;
}
.lf-toc-toggle:hover { color: var(--color-accent); }
.lf-toc-toggle svg { width: 1.125rem; height: 1.125rem; transition: transform var(--dur-short) var(--ease-out); }
.lf-doc__box--inline.is-open .lf-toc-toggle svg { transform: rotate(180deg); }
@media (min-width: 1024px) {
  .lf-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    justify-content: space-between;
    gap: var(--space-2xl);
  }
  .lf-doc__aside { position: sticky; top: calc(var(--header-height) + var(--space-md)); margin-top: 0; }
}

/* add-z-gallery */
/* photo rows inside long-form sections (ambassador portraits, VIP benefit icons, event banners) */
.lf-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-sm);
  margin: var(--space-sm) 0 var(--space-md);
}

.lf-gallery--1 {
  max-width: 28rem;
}

.lf-gallery--icons {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.lf-shot {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background-color: var(--color-paper-2);
}

.lf-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.lf-gallery--crop .lf-shot img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}

.lf-gallery--icons .lf-shot {
  align-items: center;
  padding: var(--space-xs);
  text-align: center;
}

.lf-gallery--icons .lf-shot img {
  width: 4.5rem;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-ink);
}

.lf-shot figcaption {
  padding: var(--space-2xs) var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-ink);
}

.lf-gallery--icons .lf-shot figcaption {
  padding: var(--space-2xs) 0 0;
}

/* add-z-imgfix */
/* no-crop: frames that receive artwork of another ratio show the whole image */
.wb-guide-slot__img,
.wb-cat-card__img,
.tile-card__img {
  object-fit: contain;
}

/* add-z-subnav */
/* Games dropdown: desktop sub-menu + mobile drawer sub-links */
.wb-nav__item--sub {
  position: relative;
  display: flex;
  align-items: center;
}

.wb-nav__item--sub > .wb-nav__link {
  padding-inline-end: var(--space-2xs);
}

.wb-nav__link[data-nav-active] {
  color: var(--color-ink);
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}

.wb-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 2rem;
  padding: 0;
  color: var(--color-neutral);
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.wb-nav__caret svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform var(--dur-micro) var(--ease-out);
}

.wb-nav__caret:hover,
.wb-nav__caret:focus-visible {
  color: var(--color-ink);
  background-color: var(--color-paper-2);
}

.wb-subnav {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 13rem;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background-color: var(--color-paper-2);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-whisper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), visibility var(--dur-micro) var(--ease-out);
}

/* invisible bridge so the pointer can travel from the link to the panel */
.wb-subnav::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-xs)) 0 auto 0;
  height: var(--space-xs);
}

.wb-nav__item--sub:hover > .wb-subnav,
.wb-nav__item--sub[data-open] > .wb-subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(var(--space-2xs));
}

.wb-nav__item--sub:hover .wb-nav__caret svg,
.wb-nav__item--sub[data-open] .wb-nav__caret svg {
  transform: rotate(180deg);
}

.wb-subnav__link {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-neutral);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--radius-xs);
}

.wb-subnav__link:hover,
.wb-subnav__link:focus-visible {
  color: var(--color-ink);
  background-color: var(--color-paper-3);
}

.wb-subnav__link[aria-current="page"] {
  color: var(--color-ink);
  background-color: var(--color-accent-soft);
}

/* mobile drawer: a group is its parent row plus the parent's pages listed under it */
.wb-drawer__group {
  padding-bottom: var(--space-2xs);
}

/* parent of the page you are on (flagged in the markup): accent text only, the page itself is the filled row */
.wb-drawer__link[data-nav-active] {
  color: var(--color-accent);
}

/* sub-pages indent along a thin guide line */
.wb-drawer__sub {
  margin: 0 0 0 var(--space-2xs);
  padding: 0 0 0 var(--space-sm);
  list-style: none;
  border-left: 1px solid var(--color-rule);
}

.wb-drawer__sublink {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-sm);
  color: var(--color-neutral);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius-sm);
}

.wb-drawer__sublink:hover {
  color: var(--color-ink);
  background-color: var(--color-paper-2);
}

.wb-drawer__sublink[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
  background-color: var(--color-accent-soft);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

/* nine top items (two with carets) only fit next to the CTAs on narrow desktops when the links tighten */
@media (min-width: 62rem) and (max-width: 74.99rem) {
  .wb-nav__list {
    gap: 0;
  }

  .wb-nav__link {
    padding-inline: 0.5rem;
    font-size: 0.875rem;
  }

  .wb-nav__item--sub > .wb-nav__link {
    padding-inline-end: 0.125rem;
  }

  .wb-nav__caret {
    width: 1.375rem;
  }
}

/* add-zz-light */
/* Light theme: white paper, same Winbox blue + crypto green, darkened where they carry text */
:root:root {
  color-scheme: light;
  --color-logo-plate: oklch(27% 0.07 258);
  --color-paper: oklch(99.2% 0.003 258);
  --color-paper-2: oklch(97.2% 0.008 258);
  --color-paper-3: oklch(94.6% 0.012 258);
  --color-paper-4: oklch(91.6% 0.016 258);
  --color-paper-glass: oklch(99.2% 0.003 258 / 0.92);
  --color-rule: oklch(89.5% 0.014 258);
  --color-rule-strong: oklch(79% 0.04 258);
  --color-ink: oklch(21% 0.03 258);
  --color-neutral: oklch(37% 0.03 258);
  --color-muted: oklch(48% 0.028 258);
  --color-accent: oklch(52% 0.21 258);
  --color-accent-hover: oklch(47% 0.2 258);
  --color-accent-bright: oklch(47% 0.2 258);
  --color-accent-soft: oklch(52% 0.21 258 / 0.1);
  --color-accent-border: oklch(52% 0.21 258 / 0.35);
  --color-accent-ink: oklch(99% 0.004 258);
  --color-crypto: oklch(46% 0.12 162);
  --color-crypto-soft: oklch(60% 0.15 162 / 0.12);
  --color-crypto-border: oklch(55% 0.14 162 / 0.4);
  --color-crypto-ink: oklch(99% 0.004 162);
  --color-focus: oklch(50% 0.2 258);
  --shadow-whisper: 0 1px 3px oklch(30% 0.03 258 / 0.14);
  --shadow-hairline: 0 0 0 1px oklch(80% 0.02 258 / 0.6);
  --fade-lf: linear-gradient(180deg, oklch(97.2% 0.008 258 / 0) 0%, oklch(97.2% 0.008 258 / 0.92) 72%, oklch(97.2% 0.008 258) 100%);
  --surface-hero-glow: radial-gradient(circle at 85% 12%, oklch(60% 0.2 258 / 0.1) 0%, oklch(99.2% 0.003 258 / 0) 58%);
  --surface-crypto-glow: radial-gradient(circle at 100% 0%, oklch(65% 0.15 162 / 0.1) 0%, oklch(97.2% 0.008 258 / 0) 62%);
  --hero-float-bg: oklch(99.2% 0.003 258 / 0.94);
  --hero-frame-shadow: 0 18px 40px -20px oklch(52% 0.21 258 / 0.35);
}

/* payment logos are white artwork on transparent: give them a dark plate on light paper */
img[src*="/assets/img/pay/"] {
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-logo-plate);
  /* never drawn larger than the file (small logos stay sharp); the plate keeps its size */
  object-fit: scale-down;
}

/* guides hub featured media sets contain with a stronger selector; payment logos there must not upscale either */
.wb-guide-slot__img[src*="/assets/img/pay/"] {
  object-fit: scale-down;
}

/* rhb-bank.webp is mostly transparent padding around a thin wordmark: cover crops to the wordmark band inside the same plate */
img[src$="/pay/rhb-bank.webp"] {
  object-fit: cover;
}

/* evolution.webp and db-live-casino.webp carry a ~7px frame (of 420px) the other provider images don't:
   clip it off and scale back so the visible size matches the others */
img[src$="/live/evolution.webp"],
img[src$="/live/db-live-casino.webp"] {
  clip-path: inset(2%);
  scale: 1.042;
}