/* =============================================================
   joe-fortune — design tokens
   ============================================================= */
:root {
    --bg-primary:      #081B11; /* default section tone */
    --bg-alt:          #0E2E1E; /* alternate section tone */
    --bg-deep:         #153C28; /* deep section tone */
    --bg-brand:        #159A4C; /* solid brand-green section tone */
    --bg-light:        #F1FAF4; /* rare light section tone */
    --bg-surface:      #0E2E1E; /* card/panel surface on a default section */
    --bg-surface-2:    #153C28; /* card/panel surface on an alt/deep section */
    --border-subtle:   rgba(62, 209, 126, 0.32);
    --line-soft:       rgba(21, 154, 76, 0.2);

    /* Primary — gold/orange accent: CTA buttons, section headings, badges. */
    --primary-500:     #F2A900;
    --primary-400:     #FFC22E;
    --primary-600:     #C98A00;
    --primary-900:     rgba(242, 169, 0, 0.14);

    /* Secondary — green accent: card borders, hover states, glows.
       --secondary-rgb is the -500 shade as a bare "r, g, b" triplet, for
       rgba(var(--secondary-rgb), <alpha>) shadows — see .btn--primary:hover.
       Both are admin-overridable independently — see ThemeColor. */
    --secondary-500:   #159A4C;
    --secondary-400:   #3ED17E;
    --secondary-600:   #0F7A3C;
    --secondary-900:   #0A2A18;
    --secondary-rgb:   61, 255, 138;

    --text-primary:    #FFFFFF;
    --text-secondary:  rgba(255, 255, 255, 0.78);
    --text-muted:      rgba(255, 255, 255, 0.55);

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

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

    --font-display: "Baloo 2", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", "Courier New", monospace;
    --font-step:    "Rajdhani", "Segoe UI", sans-serif;
    --font-faq:     "Space Grotesk", "Segoe 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-400); 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: 700;
}

h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); color: var(--primary-500); letter-spacing: -0.01em; }
h2 { font-size: 30px; color: var(--text-primary); letter-spacing: 0.46px; line-height: 110%; }
h3 { font-size: 18px; color: var(--secondary-600); }
h4 { font-size: 18px; color: var(--text-primary); }

p { color: var(--text-secondary); margin: 0 0 1em; font-size: 16px; line-height: 130%; }

.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; }

/* =============================================================
   Content alignment — admin-selected per section (PageSection.
   content_align, see PageSection::contentAlignClass()). Applied to the
   section's own container div; text-align cascades to plain text/
   paragraphs automatically, while the explicitly max-width'd blocks
   (heading, intro, outro, narrow paragraphs) also need their side
   margins swapped so the whole block — not just its text — moves.
   Grid/list/table components reset back to left below, so only the
   heading and surrounding text ever shift, never the layout itself.
   ============================================================= */
.section--align-left { text-align: left; }
.section--align-center { text-align: center; }
.section--align-right { text-align: right; }

.section--align-left .section__heading,
.section--align-left .section__intro,
.section--align-left .section__outro,
.section--align-left .section-group__item-heading,
.section--align-left.container--narrow > p,
.section--align-left .container--narrow > p { margin-left: 0; margin-right: auto; }

.section--align-center .section__heading,
.section--align-center .section__intro,
.section--align-center .section__outro,
.section--align-center .section-group__item-heading,
.section--align-center.container--narrow > p,
.section--align-center .container--narrow > p { margin-left: auto; margin-right: auto; }

.section--align-right .section__heading,
.section--align-right .section__intro,
.section--align-right .section__outro,
.section--align-right .section-group__item-heading,
.section--align-right.container--narrow > p,
.section--align-right .container--narrow > p { margin-left: auto; margin-right: 0; }

/* Components with their own internal layout stay left-aligned no matter
   what the surrounding section's alignment is set to. */
.card-grid,
.data-table-wrap,
.bullet-card,
.accordion-group,
.section-group { text-align: left; }

/* Boxed text section (PageSection.text_style) — a bordered, gradient-tinted
   card wrapping the heading/text/button, instead of plain text sitting
   directly on the section background. Pairs well with a solid "brand"
   section background (see .section--bg-brand) and center alignment. */
.text-panel {
    background: var(--bg-primary);
    background-blend-mode: hard-light, normal;
    border: 1px solid rgba(61, 255, 138, 0.28);
    border-radius: 22px;
    box-shadow: 0 0 26px -10px rgba(61, 255, 138, 0.4);
    padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 6vw, 3rem);
}
.text-panel .section__cta { margin-top: 1.25rem; }

/* Text section image (PageSection.image/image_position) — admin-chosen
   layout: stacked with the image above the text, or side by side with it
   on the left/right. Works whether or not the section is also .boxed
   (the image sits inside the panel in that case, per the markup). */
.text-media--top {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.text-media--top .text-media__image { max-height: 420px; object-fit: cover; }

.text-media--left,
.text-media--right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
@media (min-width: 720px) {
    .text-media--left,
    .text-media--right { flex-direction: row; }
    .text-media--right { flex-direction: row-reverse; }
    .text-media--left .text-media__image,
    .text-media--right .text-media__image { flex: 1 1 320px; max-width: 420px; }
    .text-media--left .text-media__body,
    .text-media--right .text-media__body { flex: 1 1 360px; min-width: 0; }
}
.text-media__image {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

/* Eyebrow label style — mono, uppercase, wide tracking. Used by the hero;
   available as a utility for any future custom markup. */
.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg-brand);
    margin: 0 0 0.75rem;
}

.breadcrumbs { margin-bottom: 1.5rem; }
.breadcrumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    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); }
.hero .breadcrumbs__item a,
.hero .breadcrumbs__item [aria-current="page"] { color: rgba(255, 255, 255, 0.6); }

.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }

/* Five-tone background system — admin-selected per section via
   PageSection.background_style (see PageSection::sectionBgClass()),
   replacing the old two-tone is_alt toggle. */
.section--bg-default { background: var(--bg-primary); }
.section--bg-alt { background: var(--bg-alt); }
.section--bg-deep { background: var(--bg-deep); }
.section--bg-brand { background: var(--bg-brand); }
.section--bg-brand h2,
.section--bg-brand h3,
.section--bg-brand p,
.section--bg-brand .section__intro,
.section--bg-brand .section__outro { color: #ffffff; }
.section--bg-light { background: var(--bg-light); }
.section--bg-light h1,
.section--bg-light h2 { color: var(--primary-900); }
.section--bg-light h3,
.section--bg-light h4,
.section--bg-light .feature-card h3,
.section--bg-light .feature-card h4 { color: #0F3323; }
.section--bg-light p,
.section--bg-light .section__intro,
.section--bg-light .section__outro { color: rgba(15, 42, 30, 0.72); }
.section--bg-light .feature-card,
.section--bg-light .bullet-card li { background: #ffffff; border-color: rgba(21, 154, 76, 0.25); }
.section--bg-light .feature-card__number { color: var(--primary-400); }

.section__heading { margin-bottom: 2.2rem; }
.section__intro { margin-top: -1.2rem; margin-bottom: 2.2rem; }
.section__outro { margin-top: 2.2rem; color: var(--text-secondary); }
.section__outro p { font-size: 14px; }
.section--closing__lead { color: var(--text-primary); font-weight: 600; }
.section__cta { margin-top: 1.75rem; }

/* =============================================================
   Group section (bundles several sections under one shared wrapper)
   ============================================================= */
.section-group {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3rem);
    margin-top: 1rem;
}
.section-group__item-heading { margin-bottom: 1.5rem; }
.section-group__item:first-child { margin-top: 0; }

/* Contained (non-full-bleed) variant of a banner/closing panel used when
   nested inside an accordion item or a group — see
   nested-section-content.blade.php. */
.section-panel {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border-subtle);
}
.section-panel--banner { padding: clamp(2rem, 6vw, 3.5rem); }
.section-panel__overlay { position: absolute; inset: 0; background: rgba(8, 27, 17, 0.78); }
.section-panel__content { position: relative; z-index: 1; }
.section-panel__content p { color: rgba(255, 255, 255, 0.85); }

/* =============================================================
   Legal pages (Privacy Policy, Terms, Disclaimer, Cookie Policy,
   Affiliate Disclosure, Responsible Gambling) — LegalPage::parsedContent()
   splits the admin's RichEditor content on <h2> boundaries so each
   section renders in its own rounded card here, mirroring the boxed
   layout used for the reference design.
   ============================================================= */
.legal-page__header {
    background: var(--bg-surface);
    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: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--primary-500);
    margin-bottom: 1rem;
}
.legal-page__intro { max-width: 68ch; margin: 0 auto; }
.legal-page__intro p:last-child { margin-bottom: 0; }
.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: 13px;
    margin-bottom: 1.5rem;
}
.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 { font-size: 24px; margin-bottom: 0.75rem; }
.legal-page__section p:last-child,
.legal-page__section ul:last-child { margin-bottom: 0; }
.legal-page__section--contact {
    background: var(--bg-brand);
    border-color: var(--primary-500);
}
.legal-page__section--contact h2,
.legal-page__section--contact p,
.legal-page__section--contact a { color: #ffffff; }

/* =============================================================
   Buttons
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.65em 1.4em;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--lg { padding: 0.85em 1.9em; font-size: 1.05rem; }
.btn--primary {
    background: var(--primary-500);
    color: #081B11;
}
.btn--primary:hover { background: var(--primary-400); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--secondary-rgb), 0.35); }
.btn--ghost {
    background: rgba(21, 154, 76, 0.08);
    border-color: var(--secondary-500);
    color: var(--text-primary);
}
.btn--ghost:hover { border-color: var(--secondary-400); color: var(--secondary-400); box-shadow: 0 0 12px rgba(var(--secondary-rgb), 0.4); }

/* =============================================================
   Header / navbar
   ============================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #062012;
    border-bottom: none;
}
.site-header::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-400) 0%, #86FFB6 50%, var(--secondary-400) 100%);
}
.site-header__inner {
    max-width: 90%;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    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: 38px; 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;
    flex-shrink: 0;
}
.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, on desktop, .site-nav__auth right after it —
       see the navbar markup) over to the right, leaving .brand pinned to
       the left via .site-header__inner's justify-content: flex-start.
       Irrelevant once .site-nav goes position: absolute below 1024px, so
       no separate mobile override is needed. */
    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-deep);
        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-alt); }
}

@media (max-width: 1024px) {
    /* Burger sits before .brand in the markup (see navbar.blade.php), so
       it renders to the left of the logo purely from source order. The
       logo itself shrinks to leave room, and .site-nav__auth (Log In /
       Register) stays in the header bar — only .site-nav__list collapses
       into the dropdown below. */
    .site-header__inner { gap: 0.6rem; padding: 0.7rem 1rem; }
    .nav-burger { display: flex; width: 36px; height: 36px; }
    .nav-burger span { width: 20px; }
    .brand__logo { height: 26px; }
    .brand { font-size: 1.3rem; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        background: var(--bg-deep);
        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; }
    .nav-toggle:checked ~ .site-nav {
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .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;
    }

    /* Buttons stay visible in the header bar (not swept into the
       dropdown — see the markup note above) but shrink to fit. */
    .site-nav__auth { gap: 0.5rem; margin-left: auto; flex-shrink: 0; }
    .site-nav__auth .btn { padding: 0.45em 0.9em; font-size: 0.8rem; }
    .container { max-width: 100%; }
}

/* =============================================================
   Hero — side-by-side text + standalone image, not a full-bleed photo.
   ============================================================= */
.hero {
    position: relative;
    padding: clamp(3rem, 8vw, 5rem) 0;
    overflow: hidden;
    background:
        radial-gradient(120% 170% at 85% -20%, rgba(242, 169, 0, 0.14) 0%, rgba(242, 169, 0, 0) 55%),
        linear-gradient(180deg, #0E2E1E 0%, #123726 100%);
}
.hero__inner {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2.5rem;
}
.hero__content { flex: 1 1 480px; width: 100%; text-align: center; }
.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.61px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 0.9rem;
}
.hero__title { color: var(--secondary-600); font-size: 44px; line-height: 110%; letter-spacing: -0.46px; }
.hero__lead { font-size: 1.05rem; color: var(--text-secondary); }
.hero__lead p:last-child { margin-bottom: 0; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }
.hero__figure {
    /* Explicit width (not just max-width) so this reliably fills the
       available mobile width instead of falling back to the image's own
       intrinsic pixel size — the .hero__inner flex container's cross-axis
       (align-items: center, no stretch) otherwise sizes a width-less child
       to fit-content, and a 100%-width <img> inside a fit-content box
       resolves against an indeterminate size, not the space actually
       available. */
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    filter: drop-shadow(0 0 26px rgba(21, 154, 76, 0.4));
}
.hero__image { width: 100%; height: auto; object-fit: contain; }

@media (min-width: 900px) {
    .hero__inner { flex-direction: row; align-items: center; justify-content: space-between; }
    .hero__content { width: auto; text-align: left; }
    .hero__cta { justify-content: flex-start; }
    .hero__figure { flex: 1 1 320px; width: auto; max-width: 440px; margin: 0; }
}

/* Secondary full-bleed banner-backed section (top-level 'banner' type) */
.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(8, 27, 17, 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: rgba(255, 255, 255, 0.85); }

/* =============================================================
   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); }
}

.feature-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: 0 0 10px rgba(21, 154, 76, 0.15);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover { border-color: var(--secondary-400); transform: translateY(-3px); box-shadow: 0 0 18px rgba(21, 154, 76, 0.3); }
.feature-card h3 { color: var(--text-primary); }
.feature-card p { margin: 0; font-size: 14px; }
.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--compact { padding: 1.5rem; }
.feature-card--compact h3 { color: var(--text-primary); }
.feature-card--compact p { font-size: 0.9rem; }
.feature-card__number {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--secondary-500);
    margin-bottom: 0.5rem;
}

/* Photo tile variant — a game thumbnail / illustration fills the top of
   the card edge-to-edge instead of an icon (see SectionItem.image). */
.feature-card--photo { padding: 0; overflow: hidden; }
.feature-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.feature-card--photo h3,
.feature-card--photo p,
.feature-card--photo > *:not(.feature-card__image) { padding-left: 1.5rem; padding-right: 1.5rem; }
.feature-card--photo > .feature-card__image + * { margin-top: 1.25rem; }
.feature-card--photo > *:last-child { padding-bottom: 1.5rem; }

/* Per-card eyebrow (SectionItem.eyebrow) — same look as the section-level
   eyebrow, just tighter since it sits inside a card. */
.feature-card .eyebrow { font-size: 11px; margin-bottom: 0.4rem; letter-spacing: 1.61px; font-weight: 600; color: var(--secondary-600); }

.section--bg-alt .feature-card,
.section--bg-deep .feature-card { background: var(--bg-surface-2); }
.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-400); }
.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 — circular gold-outline numbered steps
   ============================================================= */
.bullet-card {
    list-style: none;
    counter-reset: bullet-card;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.bullet-card li {
    counter-increment: bullet-card;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.bullet-card li:last-child { border-bottom: none; }
.bullet-card li::before {
    content: counter(bullet-card);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 0.2rem;
    border: 1px solid var(--secondary-500);
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--primary-500);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
}

/* Title on its own line, description on the next — not "Label: text"
   flowing as one line. */
.bullet-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.bullet-card__label {
    display: block;
    margin: 0;
    font-family: var(--font-step);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-400);
}
.bullet-card__text { color: inherit; }
.bullet-card__text p { margin: 0; color: inherit; font-size: inherit; }

/* =============================================================
   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 — dark comparison table with the brand's own column (the
   first data column, right after the row label) highlighted green/gold
   against the remaining "other platforms" columns in neutral gray. 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: 1px solid var(--secondary-400);
}
.data-table {
    display: grid;
    grid-template-columns: minmax(130px, max-content) repeat(calc(var(--cols) - 1), minmax(160px, 1fr));
    background: var(--bg-primary);
}
.data-table__row { display: contents; }
.data-table__row:not(.data-table__row--head) .data-table__cell:nth-child(n+3) { background: rgba(117, 117, 117, 0.2); color: rgba(255, 255, 255, 0.55); }
.data-table__row:not(.data-table__row--head) .data-table__cell:nth-child(2) { background: rgba(21, 154, 76, 0.2); color: var(--text-primary); font-weight: 600; }
.data-table__row:not(.data-table__row--head) .data-table__cell:first-child { background: transparent; }
.data-table__row--head .data-table__cell {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--secondary-400);
    color: var(--text-primary);
}
.data-table__row--head .data-table__cell:nth-child(2) { background: rgba(21, 154, 76, 0.2); color: var(--primary-500); }
.data-table__row--head .data-table__cell:nth-child(n+3) { background: rgba(117, 117, 117, 0.2); }
.data-table__cell {
    padding: 0.85rem 1.1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.data-table__cell--label { color: var(--text-primary); font-weight: 600; }

/* =============================================================
   FAQ accordion — Space Grotesk question text
   ============================================================= */
.faq-list {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}
.faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    padding: 0;
    overflow: hidden;
}
.faq-item__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    cursor: pointer;
}
.faq-item__question h3 {
    color: var(--text-primary);
    font-family: var(--font-faq);
    font-weight: 600;
    font-size: 1rem;
}
.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: 1px solid var(--secondary-600);
    border-radius: 50%;
    color: var(--secondary-600);
    transition: transform 0.2s ease;
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { padding: 0 0 1.4rem; }
.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,
.accordion-item__answer .section-panel { margin-top: 1rem; }
.accordion-item__answer .feature-card { padding: 1.25rem; }

/* =============================================================
   Footer — grouped columns (Play / Account / Player Support, or
   whatever column headings the admin sets via FooterLink.group_label)
   plus a brand blurb, trust badges, and an ungrouped link fallback.
   ============================================================= */
.site-footer {
    position: relative;
    background: var(--bg-primary);
    border-top: none;
    padding: 3.5rem 0 1.5rem;
}
.site-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-400) 0%, #86FFB6 50%, var(--secondary-400) 100%);
}
.site-footer__top {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-bottom: 2.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 720px) {
    .site-footer__top { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem 2rem; }
    .site-footer__brand-col { flex: 1 1 280px; max-width: 340px; }
    .site-footer__col { flex: 1 1 140px; }
}

.site-footer__brand-col { display: flex; flex-direction: column; gap: 0.9rem; }
.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__tagline { font-size: 0.85rem; color: var(--text-muted); max-width: 34ch; margin: 0; }
.site-footer__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.site-footer__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(255, 203, 77, 0.2);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}

.site-footer__col h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.site-footer__col a { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; }
.site-footer__col a:hover { color: var(--secondary-400); }

.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__age-gate {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.site-footer__age-gate span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.site-footer__notice { max-width: 800px; margin: 0 0 1.5rem; }
.site-footer__notice p { font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.site-footer__notice strong { color: var(--text-primary); }
.site-footer__notice a { color: var(--text-primary); font-weight: 600; text-decoration: underline; }
.site-footer__notice a:hover { color: var(--secondary-400); }

.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); }

.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: #081B11;
    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-400); }
.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-deep);
    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-deep);
    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-alt);
}
.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) {
    .site-header__inner {
        max-width: 100%;
    }
    .hero__title { font-size: 32px; }
    p { font-size: 14px; }
    .btn { font-size: 13px; }
}