/* =============================================================
   jokaroom — design tokens
   ============================================================= */
:root {
    /* Black Rock (base) / Black Pearl (surface) / Blue Zodiac (card surface) */
    --bg-primary:      #030434;
    --bg-surface:      #09132f;
    --bg-surface-2:    #0c1544;
    --border-subtle:   rgba(255, 255, 255, 0.14);

    /* Outrageous Orange */
    --primary-500:     #fd6634;
    --primary-400:     #fe8760;
    --primary-600:     #e5501f;
    --primary-900:     #4a2211;

    /* Secondary — drop shadows, hover outlines/borders, hover text color.
       --secondary-rgb is the -500 shade as a bare "r, g, b" triplet, for
       rgba(var(--secondary-rgb), <alpha>) shadows — see .btn--primary:hover.
       Kept a separate axis from --primary-* so hover/focus states read as
       a distinct accent rather than a lighter/darker copy of the button
       color. Both are admin-overridable independently — see ThemeColor. */
    --secondary-500:   #eab308;
    --secondary-400:   #facc15;
    --secondary-600:   #ca8a04;
    --secondary-900:   #713f12;
    --secondary-rgb:   234, 179, 8;

    /* Luxor Gold — reserved for h2 headings only, distinct from the
       orange/amber accent axes above so hover states never collide with it. */
    --heading-accent:  #ac8d30;

    --text-primary:    #ffffff;
    --text-secondary:  rgba(255, 255, 255, 0.8);
    --text-muted:      rgba(255, 255, 255, 0.6);

    --radius-md:       12px;
    --radius-lg:       14px;

    --container-max:   80%;
    --container-narrow: 80%;

    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-mono:    "IBM Plex Mono", "Courier New", monospace;
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
}

/* =============================================================
   Reset / base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Keyboard-focus outline — secondary color, so it reads as a distinct
   "you are here" ring rather than a copy of the primary button color. */
:focus-visible { outline: 2px solid var(--secondary-500); outline-offset: 2px; }

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 0 0 0.6em;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); color: var(--primary-500); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--heading-accent); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; color: var(--primary-500); }

p { color: var(--text-secondary); margin: 0 0 1em; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.container--narrow { max-width: var(--container-narrow); }
.container--narrow > p { max-width: 68ch; }
.section--closing .container--narrow > p { margin-left: auto; margin-right: auto; }

.breadcrumbs { margin-bottom: 1.5rem; }
.breadcrumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}
.breadcrumbs__item { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumbs__item a { color: var(--text-secondary); }
.breadcrumbs__item a:hover { color: var(--secondary-400); }
.breadcrumbs__item [aria-current="page"] { color: var(--text-muted); }
.breadcrumbs__sep { color: var(--text-muted); }

.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.section--alt { background: var(--bg-surface); }
.section__eyebrow {
    display: block;
    color: var(--secondary-500);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 0.6rem;
    max-width: fit-content !important;
}
.section__heading { text-align: center; margin-bottom: 2.2rem; }

/* Group section — a group of subsections stacked in one section. Each
   subsection reuses its normal block styling (card grid, table, etc.) via
   <x-page-section :wrap="false">, just without its own outer .section
   padding/background, separated here instead by simple vertical rhythm. */
.group-section__children {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 3.5rem);
}
/* Columns arrangement — subsections sit side by side instead of stacked,
   e.g. two independent numbered lists ("Sign up" / "Sign in") next to
   each other. Wraps to a single column below 760px regardless. */
.group-section__children--columns {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.group-section__children--columns > .group-item {
    flex: 1 1 320px;
}
.group-item:empty { display: none; }
.section__intro { text-align: center; }
.section__outro { margin: 2.2rem auto 0; text-align: center; color: var(--text-secondary); }
.section--closing { text-align: center; }
.section--closing__lead { color: var(--text-primary); font-weight: 600; }
.section__cta { margin-top: 1.75rem; }

/* =============================================================
   Legal pages (Privacy Policy, Terms & Conditions, Disclaimer,
   Cookie Policy, Affiliate Disclosure, Responsible Gambling) —
   each <h2> in the admin's rich-text content becomes its own
   rounded card. See LegalPage::parsedContent() / legal-page.blade.php.
   ============================================================= */
.legal-page__header {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface) 65%, var(--bg-surface-2) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    margin-bottom: 1.5rem;
}
.legal-page__badge {
    display: inline-block;
    padding: 0.35em 1em;
    border-radius: 999px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--secondary-500);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.legal-page__header h1 { margin-bottom: 0.75rem; }
.legal-page__intro { max-width: 640px; margin: 0 auto; }
.legal-page__intro p:last-child { margin-bottom: 0; }

.legal-page__meta { text-align: center; margin-bottom: 1.5rem; }
.legal-page__updated {
    display: inline-flex;
    padding: 0.4em 0.9em;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.legal-page__section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 1.5rem;
}
.legal-page__section:last-child { margin-bottom: 0; }
.legal-page__section h2 { margin-bottom: 0.75rem; }
.legal-page__section ul { padding-left: 1.25rem; margin: 0 0 1em; color: var(--text-secondary); }
.legal-page__section li { margin-bottom: 0.4rem; }
.legal-page__section p:last-child,
.legal-page__section ul:last-child { margin-bottom: 0; }

/* The document's own closing "Contact Us"-style section, when it has one */
.legal-page__section--contact {
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--bg-surface) 70%);
    border-color: var(--primary-500);
}

/* =============================================================
   Buttons
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.65em 1.4em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn--lg { padding: 0.85em 1.9em; font-size: 1.05rem; }
.btn--primary {
    background: var(--secondary-500);
    border-color: var(--secondary-500);
    color: var(--bg-primary);
}
.btn--primary:hover { transform: translateY(-2px); background: var(--secondary-400); border-color: var(--secondary-400); }
.btn--ghost {
    background: var(--bg-surface-2);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
}
.btn--ghost:hover { border-color: var(--secondary-500); color: var(--secondary-400); }
.btn--on-accent {
    background: var(--bg-primary);
    color: #ffffff;
}
.btn--on-accent:hover { background: var(--bg-surface); transform: translateY(-2px); }

/* =============================================================
   Header / navbar
   ============================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(3, 4, 52, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; display: inline-flex; align-items: center; }
.brand__text { color: var(--text-primary); }
.brand__logo { height: 40px; width: auto; display: block; }

.nav-burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
}
.nav-burger span { width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    /* Pushes .site-nav (and, following it, .site-nav__auth) to the far end
       of the header, leaving .brand pinned to the start — the equivalent
       of the old justify-content: space-between now that auth is a
       separate flex item instead of being nested inside .site-nav. */
    margin-left: auto;
}
.site-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.6rem;
    column-gap: 1.15rem;
    margin: 0;
    padding: 0;
}
.site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.site-nav__list a:hover { color: var(--secondary-400); }
.site-nav__list a.is-active { color: var(--primary-500); font-weight: 700; }
.site-nav__auth { display: flex; gap: 0.75rem; }

.site-nav__dropdown { position: relative; }
.site-nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.15s ease;
}
.site-nav__dropdown-toggle:hover { color: var(--secondary-400); }
.site-nav__dropdown-toggle[aria-expanded="true"] { color: var(--primary-400); }
.site-nav__dropdown-toggle.is-active { color: var(--primary-500); font-weight: 700; }
.site-nav__dropdown-caret { transition: transform 0.15s ease; }
.site-nav__dropdown-toggle[aria-expanded="true"] .site-nav__dropdown-caret { transform: rotate(180deg); }
.site-nav__dropdown-menu { list-style: none; margin: 0; padding: 0; }
.site-nav__dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.75rem;
}
.site-nav__dropdown-menu a.is-active { color: var(--primary-500); font-weight: 700; background: var(--primary-900); }

@media (min-width: 1025px) {
    .site-nav__dropdown-menu {
        position: absolute;
        top: calc(100% + 0.9rem);
        right: 0;
        min-width: 170px;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: 0.4rem;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__dropdown-menu {
        opacity: 1;
        visibility: visible;
    }
    .site-nav__dropdown-menu a {
        border-radius: 8px;
        white-space: nowrap;
    }
    .site-nav__dropdown-menu a:hover { background: var(--bg-surface-2); }
}

/* Compact header — burger + shrunk logo on the left, auth buttons (shrunk
   too) staying visible on the right; only the link list (.site-nav) tucks
   into the dropdown. .site-nav__auth is a sibling of .site-nav rather than
   nested inside it (see navbar.blade.php) specifically so it can stay in
   the header row here instead of collapsing away with the links. */
@media (max-width: 1024px) {
    .site-header__inner { padding: 0.6rem 1rem; gap: 0.65rem; max-width: 100%; }
    .nav-burger { display: flex; order: -1; }
    .brand__logo { height: 28px; }
    .brand { font-size: 1.3rem; }

    .site-nav {
        order: 0;
        margin-left: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border-subtle);
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .site-nav__list { flex-direction: column; gap: 0.9rem; padding: 1rem 1.25rem 0; }
    .nav-toggle:checked ~ .site-nav {
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .btn { font-size: 14px }

    .site-nav__auth { margin-left: auto; gap: 0.5rem; }
    .site-nav__auth .btn { padding: 0.45em 0.85em; font-size: 0.78rem; }

    .site-nav__dropdown-menu {
        max-height: 0;
        overflow: hidden;
        padding-left: 1rem;
        margin-top: 0.6rem;
        transition: max-height 0.2s ease;
    }
    .site-nav__dropdown-menu li + li { margin-top: 0.7rem; }
    .site-nav__dropdown-toggle[aria-expanded="true"] + .site-nav__dropdown-menu {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 100%;
    }
}

/* =============================================================
   Hero
   ============================================================= */
.hero {
    position: relative;
    padding: clamp(4rem, 12vw, 8rem) 0;
    overflow: hidden;
}
.hero--no-image { padding: clamp(3rem, 8vw, 5rem) 0; }
.hero--no-image .hero__overlay { display: none; }
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3,4,52,0.55) 0%, rgba(3,4,52,0.85) 70%, var(--bg-primary) 100%);
}
.hero__content { position: relative; z-index: 1; }
.hero__eyebrow {
    display: block;
    color: var(--primary-500);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}
.hero__title { color: var(--text-primary); }
.hero__lead { font-size: 1.05rem; color: var(--text-secondary); }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

.hero__figure { margin: 0; }
.hero__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 0.6rem 1.25rem;
    text-align: center;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
    background: linear-gradient(0deg, rgba(3, 4, 52, 0.85) 0%, rgba(3, 4, 52, 0) 100%);
}

/* Split hero — image beside the content column instead of as the full-
   bleed background above (see Page::resolvedHeroLayout()). Deliberately
   NOT wrapped in .container: the grid spans the section's full width so
   the image column can bleed all the way to its outer edge, matching
   whatever height the text column ends up rendering at (via the grid's
   default stretch alignment) — only .hero__content re-applies a
   comfortable reading width/gutter for the text side. */
.hero--split { padding: 0; }
.hero--split .hero__content {
    padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem);
    max-width: 90%;
    /* Pushes the whole text block to the right edge of its grid column
       (nearest the image) instead of hugging the column's left/outer
       edge, so it doesn't sit stranded with dead space beside the image. */
    margin-left: auto;
}
.hero--split__inner {
    display: grid;
    grid-template-columns: 1fr;
}
/* Below the side-by-side breakpoint, the image visually leads (order: -1)
   regardless of DOM order or the left/right arrangement choice below —
   that choice only matters once the columns actually sit side by side. */
.hero--split .hero__image-col { order: -1; }
@media (min-width: 1024px) {
    .hero--split__inner { grid-template-columns: 1fr 1fr; }
    .hero--split .hero__image-col { order: 0; }
    .hero--split .hero__image-col--left { order: -1; }
}

@media (max-width: 1024px) {
    .hero--split .hero__content {
        margin-right: auto;
        padding-top: 20px;
    }
}
/* No image at all: collapse back to a single full-width column instead of
   leaving the (unrendered) second grid track as a dead empty gap. */
.hero--split.hero--no-image .hero--split__inner { grid-template-columns: 1fr; }
.hero--split.hero--no-image .hero__content { max-width: 720px; margin: 0 auto; padding-left: 1.25rem; text-align: center; }
.hero--split.hero--no-image .hero__cta { justify-content: center; }
.hero--split .hero__image-col {
    position: relative;
    min-height: 320px;
}
.hero--split .hero__image-col img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* If the full image can't fit the column's proportions, crop from the
       right/bottom and keep the left side visible rather than centering
       the crop — per how this arrangement is meant to be used. */
    object-position: left center;
    border-radius: 0;
}

/* Top hero — image above the content, both centered. */
.hero--top { padding: clamp(3rem, 8vw, 6rem) 0; }
.hero--top .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}
/* .hero--top .hero__content { max-width: 720px; } */
.hero--top .hero__cta { justify-content: center; }

.hero__image-col img {
    width: 100%;
    border-radius: var(--radius-lg);
}
.hero--top .hero__image-col img { margin: 0 auto; }
.hero__caption--plain {
    margin: 0.6rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Secondary banner-backed section */
.section--banner {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: clamp(3rem, 8vw, 6rem) 0;
}
.section--banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 52, 0.78);
}
.section--banner__content { position: relative; z-index: 1; }
.section--banner__content h2,
.section--banner__content p { color: var(--text-primary); }
.section--banner__content p { color: var(--text-secondary); }

/* =============================================================
   Highlight panel (solid-color callout box + 2-column item list)
   ============================================================= */
.highlight-panel {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3rem);
    color: var(--bg-primary);
}
.highlight-panel__eyebrow {
    display: block;
    color: rgba(3, 4, 52, 0.75);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 0.6rem;
}
.highlight-panel__heading { color: var(--bg-primary); text-align: center; margin-bottom: 1rem; }
.highlight-panel__intro {
    max-width: 640px;
    margin: 0 auto 2rem;
    text-align: center;
    color: rgba(3, 4, 52, 0.85);
}
.highlight-panel__grid {
    display: grid;
    gap: 1.5rem 2rem;
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
}
@media (min-width: 640px) {
    .highlight-panel__grid { grid-template-columns: repeat(2, 1fr); }
}
.highlight-panel__item h3 { color: var(--bg-primary); font-size: 1.05rem; margin-bottom: 0.4rem; }
.highlight-panel__item p { color: rgba(3, 4, 52, 0.85); margin: 0; font-size: 0.92rem; }

/* =============================================================
   Split / Image-below banner (foreground image beside or under the
   text, vs. the full-bleed background-image .section--banner above).
   Both layouts share one optional "boxed" visual treatment (.banner-box)
   — a rounded, colored, bordered panel — so the box styling only needs
   maintaining in one place regardless of which arrangement is active.
   ============================================================= */
.section--split-banner { padding: clamp(3rem, 7vw, 5rem) 0; }

.split-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
/* Below the side-by-side breakpoint, the image visually leads (order: -1)
   regardless of DOM order or the left/right arrangement choice below —
   that choice only matters once the columns actually sit side by side.
   Mirrors the hero's split layout (see .hero--split). */
.split-banner .split-banner__image-wrap { order: -1; }
@media (min-width: 1024px) {
    .split-banner { grid-template-columns: 1.2fr 1fr; }
    .split-banner .split-banner__image-wrap { order: 0; }
    /* Image-left arrangement: mirror the column widths (image keeps the
       narrower slot, content the wider one) and reorder visually only —
       the image stays second in the DOM/reading order either way. */
    .split-banner--image-left { grid-template-columns: 1fr 1.2fr; }
    .split-banner--image-left .split-banner__image-wrap { order: -1; }
}
.split-banner--no-image { grid-template-columns: 1fr; text-align: center; }
.split-banner--no-image .split-banner__content { max-width: 640px; margin: 0 auto; }
/* Fills the full height of its column (matching whatever height the text
   side ends up rendering at, via the grid's default stretch alignment)
   instead of sitting as a small, natural-size, centered photo. */
.split-banner__image-wrap {
    position: relative;
    min-height: 280px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.split-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image-below-text arrangement — everything stacked and centered. */
.stacked-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
/* .stacked-banner__content { max-width: 720px; } */
.stacked-banner__image {
    width: 100%;
    /* max-width: 720px; */
    border-radius: var(--radius-md);
}

.banner-box__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--secondary-500);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
}

/* Boxed treatment — optional (see PageSection::resolvedRoundedBox()).
   Left off, split/stacked banners sit directly on the page/section
   background using the site's normal heading/text colors instead. */
.banner-box {
    border-radius: 24px;
    border: 5px solid var(--bg-primary);
    padding: clamp(2rem, 5vw, 3rem);
    overflow: hidden;
}
.banner-box--theme { background: var(--primary-500); }
.banner-box--secondary { background: var(--secondary-500); }
.banner-box .split-banner__content h2,
.banner-box .stacked-banner__content h2 { color: #ffffff; }
.banner-box .split-banner__content p,
.banner-box .stacked-banner__content p,
.banner-box .split-banner__content .section__outro,
.banner-box .stacked-banner__content .section__outro { color: rgba(3, 4, 52, 0.85); }
.banner-box .banner-box__eyebrow { color: rgba(3, 4, 52, 0.75); }

/* =============================================================
   Card grids (feature-grid / feature-grid-compact)
   ============================================================= */
.card-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Horizontal-scroll arrangement — an alternative to the responsive grid
   above for the same card markup, e.g. for a long row of game cards. */
.card-grid--scroll {
    display: flex;
    grid-template-columns: none;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.75rem;
    margin-bottom: -0.75rem;
    -webkit-overflow-scrolling: touch;
}
.card-grid--scroll .feature-card {
    flex: 0 0 min(280px, 80vw);
    scroll-snap-align: start;
}
.card-grid--scroll::-webkit-scrollbar { height: 8px; }
.card-grid--scroll::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 999px; }

.feature-card {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem 2.4rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.feature-card:hover { border-color: var(--secondary-500); transform: translateY(-3px); }
.feature-card h3 { color: var(--text-primary); }
.feature-card p { margin: 0; font-size: 0.95rem; }
.feature-card--icon { padding-top: 1.5rem; }
.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-900);
    font-size: 1.4rem;
    margin-bottom: 0.9rem;
}
.feature-card__number {
    display: block;
    color: var(--secondary-500);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.55rem;
}
.feature-card__eyebrow {
    display: inline-block;
    background: var(--secondary-500);
    color: var(--bg-primary);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}
.feature-card--compact { padding: 1.5rem; }
.feature-card--compact p { font-size: 0.9rem; }
.section--alt .feature-card { background: var(--bg-surface); }
.feature-card__link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--primary-400);
    font-weight: 600;
    font-size: 0.9rem;
}
.feature-card__link:hover { color: var(--secondary-500); }
.feature-card__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.75rem; }
.feature-card__links .feature-card__link { margin-top: 0; }

/* =============================================================
   Bullet card
   ============================================================= */
.bullet-card {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.bullet-card li {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--primary-500);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    color: var(--text-secondary);
    font-size: 0.96rem;
}
/* .section:not(.section--alt) .bullet-card li { background: var(--bg-surface); } */
.bullet-card li strong { color: var(--text-primary); }

/* h4 variant (accordion-list bullets) - same look as the <strong> label
   above, but reset from a block-level heading to inline so "Label: text"
   still reads as one flowing line instead of a separate heading block. */
.bullet-card__label {
    display: inline;
    margin: 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
}

/* Numbered variant — a plain step list (circular number + text) separated
   by divider lines, instead of the bordered/left-accented boxes above. */
.bullet-card--numbered { gap: 0; }
.bullet-card--numbered li {
    background: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.9rem 0;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.bullet-card--numbered li:last-child { border-bottom: none; }
.bullet-card__index {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--secondary-500);
    color: var(--bg-primary);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
}
.bullet-card__content { padding-top: 0.15rem; }
.bullet-card__content p:last-child { margin-bottom: 0; }

/* =============================================================
   Table figure wrapper
   ============================================================= */
.table-figure { margin: 0; }
.table-figure__caption {
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
}

/* =============================================================
   Data table (wide, many-column lookup tables). First column shrinks
   to fit its own content; remaining columns share the rest of the
   width and wrap their text. Scrolls horizontally as a fallback on
   narrow viewports once columns hit their minimum width.
   ============================================================= */
.data-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 2px solid var(--secondary-500);
}
.data-table {
    display: grid;
    grid-template-columns: minmax(130px, max-content) repeat(calc(var(--cols) - 1), minmax(160px, 1fr));
}
.data-table__row { display: contents; }
.data-table__row:nth-child(even):not(.data-table__row--head) .data-table__cell { background: var(--bg-surface); }
.data-table__row:nth-child(odd):not(.data-table__row--head) .data-table__cell { background: var(--bg-surface); }

.data-table__row--head .data-table__cell {
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
}
.data-table__cell {
    padding: 0.85rem 1.1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    /* border-right: 1px solid var(--border-subtle); */
    font-family: var(--font-body);
}
.data-table__cell:nth-child(even) { color: var(--secondary-500) }
.data-table__cell:last-child { border-right: none; }
.data-table__row:last-child .data-table__cell { border-bottom: none; }
.data-table__cell--label { color: var(--text-primary); font-weight: 600; }
.data-table__cell--highlight { color: var(--primary-400); font-weight: 700; }
.data-table__row--head .data-table__cell--highlight { background: var(--primary-600); color: #ffffff; }
.data-table__row:nth-child(even):not(.data-table__row--head) .data-table__cell--highlight,
.data-table__row:nth-child(odd):not(.data-table__row--head) .data-table__cell--highlight { background: var(--primary-900); }

/* =============================================================
   FAQ accordion
   ============================================================= */
.faq-list {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}
.faq-item {
    border-bottom: 1px solid var(--border-subtle);
    padding: 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.02rem;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--secondary-500);
    color: var(--secondary-500);
    transition: transform 0.2s ease;
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { padding: 0 0 1.25rem; }
.faq-item__answer p { margin: 0; font-size: 0.95rem; }

/* =============================================================
   Accordion list (long per-item content — intro + optional bullets —
   collapsed by default past the first item, instead of a cramped grid)
   ============================================================= */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.accordion-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
}
.accordion-item__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
}
.accordion-item__question::-webkit-details-marker { display: none; }
.accordion-item__question h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.02rem;
}
.accordion-item__icon { flex-shrink: 0; color: var(--primary-500); transition: transform 0.2s ease; }
.accordion-item[open] .accordion-item__icon { transform: rotate(180deg); }
.accordion-item__answer { padding: 0 1.4rem 1.4rem; }
.accordion-item__answer p { font-size: 0.95rem; }
.accordion-item__answer .bullet-card,
.accordion-item__answer .card-grid,
.accordion-item__answer .data-table-wrap { margin-top: 1rem; }
.accordion-item__answer .feature-card { padding: 1.25rem; }

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-subtle);
    padding: 3rem 0 1.5rem;
    display: flex;
    justify-content: center;
}

.site-footer__inner {
    width: 80%;
}

.site-footer__columns {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 760px) {
    .site-footer__columns { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.site-footer__col-title {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.9rem;
}
.site-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.site-footer__col a { color: var(--text-secondary); font-size: 0.9rem; }
.site-footer__col a:hover { color: var(--secondary-400); }
.site-footer__col--brand p { font-size: 0.88rem; color: var(--text-secondary); margin-top: 0.75rem; max-width: 32ch; }

.site-footer__col--brand .site-footer__badges {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 0;
    padding: 0;
}
.site-footer__badge {
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.site-footer__legal {
    margin-bottom: 1.5rem;
    text-align: center;
}
.site-footer__legal ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
}
.site-footer__legal a { color: var(--text-primary); font-weight: 600; font-size: 0.9rem; }
.site-footer__legal a:hover { color: var(--secondary-400); }

.site-footer__notice {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    text-align: center;
}
.site-footer__notice p { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
/* New grouped-columns footer design — notice/copyright read left-aligned
   and full-width, divided from the columns above by a rule, instead of
   the legacy fallback's narrow centered block. */
.site-footer--grouped .site-footer__notice {
    max-width: 60%;
    margin: 0 0 1.5rem;
    padding-top: 1.75rem;
    text-align: left;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
}
.site-footer__brand .site-footer__badges { justify-content: center; }
.brand-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.site-footer__bottom { text-align: center; }
.site-footer__bottom p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.site-footer__bottom p + p { margin-top: 0.4rem; }
.site-footer__bottom a { color: var(--text-secondary); text-decoration: underline; }
.site-footer__bottom a:hover { color: var(--secondary-400); }
.site-footer--grouped .site-footer__bottom { text-align: left; }

.scroll-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--primary-500);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.15s ease;
}
.scroll-to-top:hover { background: var(--primary-600); }
.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =============================================================
   Cookie / notification consent banner
   ============================================================= */
.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 95;
    width: calc(100% - 2rem);
    max-width: 26rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 130%);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.cookie-consent.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.cookie-consent__panel {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.cookie-consent__title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.cookie-consent__text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}
.cookie-consent__actions { display: flex; gap: 0.75rem; }
.cookie-consent__actions .btn { flex: 1; }

/* =============================================================
   Foreground push-notification toast
   ============================================================= */
.fcm-toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 28rem;
    max-width: calc(100vw - 2rem);
}
.fcm-toast {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--primary-500);
    border-radius: var(--radius-md);
    padding: 0.85rem 2.1rem 0.85rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: fcm-toast-in 0.2s ease;
}
.fcm-toast__close {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-md);
}
.fcm-toast__close:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}
.fcm-toast__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fcm-toast__image {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.fcm-toast__content {
    flex: 1;
    min-width: 0;
}
.fcm-toast__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.fcm-toast__icon {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.fcm-toast__title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    margin: 0;
}
.fcm-toast__body {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: justify;
}
@keyframes fcm-toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 425px) {
    h1, h2 { font-size: 24px; }
    h3 { font-size: 18px; }
    .section__eyebrow { font-size: 12px; }
    p { font-size: 12px; }
    .feature-card p { font-size: 12px; }
    .bullet-card li { font-size: 12px; }
    .btn {
        font-size: 12px;
    }
}