/* =============================================================
   skycrown — design tokens
   ============================================================= */
:root {
    --bg-primary:      #06080a;
    --bg-surface:      #10151b;
    --bg-surface-2:    #161d25;
    --border-subtle:   #232c36;
    /* --bg-surface as a bare "r, g, b" triplet, for rgba(var(--bg-surface-rgb), <alpha>)
       fills — see .table-comparison__item. Same reasoning as --primary-rgb/--secondary-rgb. */
    --bg-surface-rgb:  16, 21, 27;

    --primary-500:     #0ea5e9;
    --primary-400:     #38bdf8;
    --primary-600:     #0284c7;
    --primary-900:     #0c4a6e;
    /* -500 shade as a bare "r, g, b" triplet, for rgba(var(--primary-rgb), <alpha>)
       glows — see .section--gradient. Same reasoning as --secondary-rgb below. */
    --primary-rgb:     14, 165, 233;

    /* 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:   #f59e0b;
    --secondary-400:   #fbbf24;
    --secondary-600:   #d97706;
    --secondary-900:   #78350f;
    --secondary-rgb:   245, 158, 11;

    /* Small text/title ("eyebrow") shown above section headings and the
       page H1 — admin-overridable independently via Edit branding, same
       pattern as --secondary-*. Defaults to the secondary-400 amber.
       Section eyebrows alternate between this and --primary-400 based on
       position (odd/even) — see .section__eyebrow--accent/--primary and
       page-section.blade.php. The hero eyebrow always uses this color. */
    --small-text-color: var(--secondary-400);

    /* Alternate ("ghost") button background — admin-overridable via Edit
       branding. Defaults to fully transparent (outline-only style, the
       original look of .btn--ghost before this became configurable). */
    --btn-ghost-bg: transparent;

    /* Footer/navbar backgrounds — each independently admin-overridable via
       Edit branding (see layouts/app.blade.php). Default to their prior,
       non-configurable look: the footer matches --bg-surface (same as
       before this became its own setting), the navbar keeps its original
       hardcoded translucent black (paired with backdrop-filter: blur() —
       see .site-header). */
    --footer-bg: var(--bg-surface);
    --navbar-bg: rgba(6, 8, 10, 0.9);

    --text-primary:    #f4f6f8;
    --text-secondary:  #a9b3bd;
    --text-muted:      #6f7a85;
    /* White at 78% opacity — the specific "description"/"badge" text color
       used throughout the current typography spec (bullet/feature-grid/
       compact-feature-grid descriptions, footer trust badges). Kept as its
       own token, distinct from --text-secondary (a flat gray), rather than
       redefining --text-secondary itself — --text-secondary is still used
       verbatim in plenty of places this spec doesn't touch (footer links,
       classic table cells, etc.). */
    --text-white-78:   rgba(255, 255, 255, 0.78);

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

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

    /* --font-display ("Poppins") is legacy — still used by h1, the nav
       brand, and every h3/h4 context not covered by the dedicated tokens
       below (accordion/group-subsection titles, etc.), unchanged from
       before. The 3 tokens below are new, and are only applied to the
       specific selectors the current typography spec actually names —
       see each one's own usage for why it isn't just folded into
       --font-display/--font-body instead. */
    --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
    --font-heading: "Rajdhani", "Segoe UI", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", "Segoe UI", monospace;
    --font-faq:     "Space Grotesk", "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: 700;
}

h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); }
/* "Section title" typography spec — applies to every top-level section
   heading (the ones rendered as a plain <h2> or <h2 class="section__heading">
   in page-section.blade.php). Deliberately not a change to --font-display
   itself, so unrelated h3/h4 contexts (accordion items, group subsection
   titles, etc.) keep their prior look. */
h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    letter-spacing: -0.46px;
    color: #fff;
}
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

/* "Description" typography spec — the default look for a rich-text
   paragraph (a section's intro_text, most commonly). Components with
   their own distinct description style (feature-card, bullet-card, FAQ
   answers, table-comparison items, footer text, etc.) override this with
   a more specific selector further down — see each one's own rule. */
p {
    color: var(--text-white-78);
    font-size: 16px;
    line-height: 1.3;
    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; }

/* Mobile view — widen the content area from the desktop default (85%) to
   95% of the viewport once the screen is this narrow — 85% still leaves
   too little usable width on a small phone once the browser's own margin
   is applied (e.g. 85% of a 375px phone is ~319px); 95% keeps just a thin
   breathing margin on each side without wasting the small screen on
   empty space.
   Redefining the tokens here (rather than a one-off override on
   .container) means every consumer of --container-max/--container-narrow
   widens together with one change — .site-footer__inner reads the same
   tokens directly, without its own .container class. (.site-header__inner
   is the one exception: it has its own fixed 95% independent of these
   tokens, and its own separate 1024px breakpoint for the mobile nav —
   see the nav bar section further down. This 860px is specifically the
   general content-width breakpoint, not tied to the nav's.) */
@media (max-width: 860px) {
    :root {
        --container-max: 95%;
        --container-narrow: 95%;
    }
}

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

/* Legal pages (Privacy Policy, Terms and Conditions, etc.) — see
   legal-page.blade.php and LegalPage::parsedContent(), which splits the
   admin's single rich-text field into an intro + one entry per <h2> at
   render time, so each becomes its own rounded box below — reference: a
   screenshot of another casino site's Privacy Policy page, same "each
   section is its own card" structure, re-themed to this site's own dark
   palette rather than that reference's light one (its exact colors were
   never meant to be copied, just the layout shape). */
.legal-page__header {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface) 65%, var(--bg-primary) 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__header h1 { margin-bottom: 0.75rem; }
.legal-page__header p { max-width: 640px; margin-left: auto; margin-right: auto; }

.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; }
/* Scoped smaller than the sitewide 36px "Section title" h2 (see the base
   h2 rule above) — that size reads right for a whole page section, but
   is too large for a heading nested one level down, inside a card of
   its own, the way these are. */
.legal-page__section h2 { font-size: 24px; margin-bottom: 0.75rem; }

/* The document's own closing "Contact Us"-style section, when it has
   one (see the str_contains() check in legal-page.blade.php) — same
   tinted-gradient-over-dark-surface highlight already used for
   .table-comparison__item--primary/.text-box--secondary-bg, not a solid
   fill, so body text stays readable regardless of the admin's theme
   color pick. */
.legal-page__section--contact {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.05));
    border-color: var(--primary-500);
}

.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.section--alt { background: var(--bg-surface); }

/* Optional per-section "Gradient background" toggle (PageSection::has_gradient_bg)
   — blends the theme color (top-left glow), the secondary color (top-right
   glow), and the main background color from Edit branding (base fill) into one
   soft background. Takes priority over .section--alt: declared after it, same
   specificity (both single class), so when a section has both classes this
   wins on source order regardless of which comes first in the class attribute. */
.section--gradient {
    background:
        radial-gradient(70% 90% at 15% 15%, rgba(var(--primary-rgb), 0.22), transparent 70%),
        radial-gradient(70% 90% at 85% 15%, rgba(var(--secondary-rgb), 0.16), transparent 70%),
        var(--bg-surface);
}

.section__heading { text-align: left; margin-bottom: 2.2rem; }

/* Small text/title shown above a section heading or the hero H1 — see the
   --small-text-color token above. .section__eyebrow--accent/--primary
   alternate per section (odd/even) — assigned in page-section.blade.php;
   .hero__eyebrow (page.blade.php) always uses the accent color since
   there's only ever one hero per page. */
.section__eyebrow, .hero__eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.61px;
    text-transform: uppercase;
    margin: 0 0 0.6em;
}
.section__eyebrow--accent, .hero__eyebrow { color: var(--small-text-color); }
.section__eyebrow--primary { color: var(--primary-400); }
/* No max-width of its own (was a flat 640px, unrelated to the content
   width tokens and never scaled with them) — now just fills the full
   width of whichever container it's in (.container/.container--narrow,
   driven by --container-max/--container-narrow), same as the rest of
   that section's content. */
.section__intro { margin: -1.2rem 0 2.2rem; }
/* Same fix as .section__intro above — was max-width: 640px; margin:
   2.2rem auto 0; text-align: center;, capped well below the actual
   content width and centered. Now fills its container and reads left,
   consistent with the rest of the section's content. */
.section__outro { margin: 2.2rem 0 0; color: var(--text-secondary); }
/* The newer, typed outro (a table/bullet-list/feature-grid/text nested
   section — see PageSection::outro()) — unlike .section__outro above, this
   isn't centered/width-capped, since it can hold full-width content like a
   table or card grid, not just a short text note. */
.section__outro-content { margin-top: 2.2rem; }
.section--closing { text-align: center; }
.section--closing__lead { color: var(--text-primary); font-weight: 600; }
.section__cta { margin-top: 1.75rem; }

/* "text" section style variants — see PageSection::effectiveTextStyle()/
   effectiveContentAlign() and page-section.blade.php. --content-align is
   left (the default, needs no class) unless overridden. */
.text-content--center { text-align: center; }
.text-content--right { text-align: right; }

/* "boxed" style — a rounded card, same design language as .hero-card.
   Background is a diagonal gradient between the two background tones
   from Edit branding's "Background color" (see Update 5) — the main one
   (--bg-surface) holding for the first 65% (left/top side), then
   transitioning into the darker one (--bg-primary) toward the
   bottom-right corner, so the dark tone reads as a shorter accent on the
   right rather than an even 50/50 split. */
.text-box {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface) 65%, var(--bg-primary) 100%);
    border: 1px solid var(--secondary-500);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
}
/* Admin-optional alternate to the default neutral gradient above — a
   soft tint built from the secondary color instead, same "subtle
   gradient over the dark surface" treatment already used for a themed
   card background elsewhere (see .table-comparison__item--primary),
   rather than a solid/opaque fill, so body text inside stays readable
   regardless of how bright the admin's own secondary color pick is. */
.text-box--secondary-bg {
    background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.22) 0%, rgba(var(--secondary-rgb), 0.06) 65%, var(--bg-primary) 100%);
}

/* "default" style with a side image — text and image side by side, same
   flex-row-that-wraps mechanics as .hero__split, kept as its own class
   rather than reused so a future hero-specific tweak can't accidentally
   change how a plain text section looks (and vice versa). */
.text-with-image { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; }
.text-with-image__content { flex: 1 1 420px; }
.text-with-image__image {
    flex: 1 1 320px;
    max-width: 480px;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* Same stacking treatment as .hero__split/.hero__side-image (Update 24)
   below 1260px — image above the text (order: -1, since the image comes
   after the text in the DOM — see page-section.blade.php's 'text' case,
   both the boxed-with-image and default-with-image branches share this
   same .text-with-image/.text-with-image__image markup) and centered.
   .text-with-image's own align-items: center (unchanged, inherited from
   the base rule above) centers .text-with-image__content the same way. */
@media (max-width: 1260px) {
    .text-with-image { flex-direction: column; }
    .text-with-image__image {
        order: -1;
        margin: 0 auto;
    }
}

/* Group sections — combine several subsections (each an optional eyebrow +
   heading + description + body, rendered by group-item-content.blade.php)
   into one container, arranged vertically (stacked, divided by a rule) or
   horizontally (side by side columns). A subsection's own heading is
   sized like a top-level <h2> even though it's an <h3> (and stays that
   size even one more level down, inside a nested sub-group), so every
   subsection reads at a consistent visual weight regardless of depth —
   see PageSection type "group" and page-section.blade.php. */
.section-group { display: flex; gap: clamp(2rem, 5vw, 3rem); }
.section-group--vertical { flex-direction: column; }
.section-group--horizontal { flex-direction: row; flex-wrap: wrap; }
.section-group--horizontal > .section-group__item { flex: 1 1 320px; min-width: 0; }
.section-group--vertical > .section-group__item + .section-group__item {
    border-top: 1px solid var(--border-subtle);
    padding-top: clamp(2rem, 5vw, 3rem);
}
/* A group subsection's own title — follows the same "Section title"
   typography as the top-level h2 (see the h2 rule above), rather than
   its own smaller clamp()-based size, per explicit request. Styled via
   this dedicated class rather than an h3 tag selector, since the actual
   heading tag now varies (h2/h3/h4/...) depending on which ancestor
   group/subsection headings are actually present — see
   group-item-content.blade.php's $headingLevel prop. Its description
   (intro_text, rendered as plain <p> tags — see
   group-item-content.blade.php) already gets the "Description" spec for
   free via the base `p` rule above; no override needed here for that. */
.section-group__title {
    font-family: var(--font-heading);
    font-size: 36px;
    letter-spacing: -0.46px;
    color: #fff;
}

/* =============================================================
   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: 16px;
    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; }

/* Every button on the site shrinks (both font size and padding, which
   drives the pill's overall width) at very narrow phone widths — hero/
   section CTAs, closing-cta, footer, cookie banner, etc. .btn--lg gets
   its own smaller value too so it doesn't dwarf a regular .btn at this
   width; the two stay distinguishable but both read as compact here. Not
   scoped to specific button locations on purpose — this is every .btn
   sitewide. (The nav's own Login/Register buttons already shrink even
   further starting at the wider ≤1024px mobile-nav breakpoint — see
   .site-header__auth--mobile .btn — and that rule stays in effect here
   too, since it's more specific than the plain .btn selector below.) */
@media (max-width: 425px) {
    .btn { font-size: 14px; padding: 0.55em 1.1em; }
    .btn--lg { font-size: 14px; padding: 0.6em 1.3em; }
}

.btn--primary {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
    color: #ffffff;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--secondary-rgb), 0.35); }
.btn--ghost {
    background: var(--btn-ghost-bg);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}
.btn--ghost:hover { border-color: var(--secondary-500); color: var(--secondary-400); }

/* =============================================================
   Header / navbar
   ============================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--navbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
    /* Deliberately its own fixed 95% rather than var(--container-max)
       (70%, shared by every section/footer container) — at a mid-size
       desktop width like 1374px, 70% left too little room for the nav
       links + Login/Register to fit on one line and they started
       wrapping. Scoped to just the header on purpose — the rest of the
       site's content width is unaffected. */
    max-width: 95%;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    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 { width: 169.5px; height: 35.3px; 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;
}
.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-white-78);
    font-weight: 400;
    font-size: 16px;
    line-height: 24.29px;
    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-white-78);
    font: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 24.29px;
    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;
    color: var(--text-white-78);
    font-weight: 400;
    font-size: 16px;
    line-height: 24.29px;
}
.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); }
}

/* .site-header__auth--mobile — a second, duplicate copy of the Login/
   Register buttons (see navbar.blade.php), living as a direct sibling of
   <nav> in .site-header__inner instead of nested inside the collapsible
   dropdown. Hidden by default (desktop); swaps places with .site-nav__auth
   at the 1024px breakpoint below. Having two real elements and toggling
   which one is display:none avoids the position:fixed/z-index/manual
   top-right-offset juggling the previous approach needed to pull a
   dropdown-nested element out of its clipped ancestor. */
.site-header__auth--mobile { display: none; }

/* Mobile nav — triggers at 1024px (raised from an original 860px) down
   to the smallest phone. Layout: hamburger, then the brand, on the
   header's own row; only the nav *links* list collapses into the
   dropdown below the hamburger — Login/Register stay on that same row,
   always visible, via .site-header__auth--mobile above (the in-dropdown
   .site-nav__auth copy is simply hidden here, not repositioned). */
@media (max-width: 1024px) {
    .nav-burger { display: flex; order: -1; }
    .site-nav {
        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; }
    .site-nav__auth { display: none; }
    .site-header__auth--mobile {
        display: flex;
        gap: 0.5rem;
        /* Pushes itself (and nothing before it) flush to the header's
           right edge, regardless of .site-header__inner's own
           justify-content — the burger/brand stay grouped together on
           the left via normal flow + gap. */
        margin-left: auto;
    }
    /* Decreased text size and button width, per explicit request — this
       row now has to share space with the hamburger and brand across a
       much wider range (up to 1024px) than the old 425px-only
       treatment did. */
    .site-header__auth--mobile .btn { font-size: 13px; padding: 0.5em 1em; }
    .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;
    }
}

/* =============================================================
   Hero
   ============================================================= */
.hero {
    position: relative;
    padding: clamp(4rem, 12vw, 8rem) 0;
    overflow: hidden;
}
.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(6,8,10,0.55) 0%, rgba(6,8,10,0.85) 70%, var(--bg-primary) 100%);
}
.hero__content { position: relative; z-index: 1; }
/* Hero title/lead — follow the same "Section title"/"Description"
   typography spec as everywhere else, per explicit request. */
.hero__title {
    font-family: var(--font-heading);
    font-size: 36px;
    letter-spacing: -0.46px;
    color: #fff;
}
.hero__lead { max-width: 640px; }
/* Also matches a nested <p> directly (hero_lead is rich text, so it may
   render as one) — otherwise the base `p` rule's own direct match would
   win over this div's merely-inherited styling, same pitfall as
   .bullet-card__text earlier. */
.hero__lead,
.hero__lead p {
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-white-78);
}
.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(6, 8, 10, 0.85) 0%, rgba(6, 8, 10, 0) 100%);
}

/* Shown instead of .hero__bg when a page's "side-by-side" hero has no
   background image uploaded — a soft glow built purely from the theme's
   own tokens (--primary-900, admin-overridable via Edit branding) fading
   into the page background, so a blank hero still looks intentional. */
.hero__gradient-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 85% 40%, var(--primary-900) 0%, transparent 70%),
        var(--bg-primary);
}

/* "side-by-side" layout — text column + optional image column. */
.hero__split { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; }
.hero__text { flex: 1 1 420px; max-width: 640px; }
.hero__side-image {
    flex: 1 1 320px;
    max-width: 480px;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-left: auto;
}

/* Below 1260px, the side image stacks above the text instead of sitting
   next to it — column direction puts .hero__text (first in the DOM)
   below .hero__side-image visually, but order: -1 on the image is what
   actually flips which one comes first; column alone would still show
   text-then-image, just vertically instead of side by side. Centered
   via margin: 0 auto now that it's a block-level item in a column flow,
   replacing the row layout's margin-left: auto (which pushed it to the
   right, not centered it). .hero__split's own align-items: center
   (unchanged, inherited from the base rule above) centers .hero__text
   the same way. */
@media (max-width: 1260px) {
    .hero__split { flex-direction: column; }
    .hero__side-image {
        order: -1;
        margin: 0 auto;
    }
}

/* "image-top" layout — one image above the H1/lead/buttons, centered in a
   single card that sits on the page's normal background (no full-bleed
   background image/gradient in this layout). */
.hero-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.hero-card__image { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.hero-card__content { padding: clamp(1.75rem, 4vw, 3rem); text-align: center; }
.hero-card__content .hero__lead { margin-left: auto; margin-right: auto; }
.hero-card__content .hero__cta { justify-content: center; }

/* 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(6, 8, 10, 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: #d7dee4; }

/* =============================================================
   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(--primary-500);
    border-radius: var(--radius-lg);
    overflow: hidden; /* clips .feature-card__image's square corners to the card's own rounded ones */
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.feature-card:hover { border-color: var(--secondary-500); transform: translateY(-3px); }
.feature-card__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feature-card__body { padding: 1.75rem; }
/* Styled via this class rather than an h3 tag selector — a card's own
   title tag varies (h2/h3/h4/...) when nested inside a group subsection,
   to keep the page's real heading hierarchy correct even when an
   ancestor group/subsection left its own title blank — see
   accordion-item-content.blade.php's $itemTitleTag. */
.feature-card__title {
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.46px;
    color: #fff;
}
.feature-card p:not(.section__eyebrow) {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-white-78);
}
.feature-card--icon .feature-card__body { 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 { border-color: var(--secondary-500); }
.feature-card--compact .feature-card__body { padding: 1.5rem; }
.feature-card--compact .feature-card__title { font-size: 18px; }
.feature-card--compact p:not(.section__eyebrow) {
    font-size: 12px;
    line-height: 1.2;
    color: var(--text-white-78);
}
/* The card's own background always opposes whatever background the
   containing section is currently showing (--bg-primary vs --bg-surface,
   toggled per-section by "Alternate background shade" — see Update 5),
   so a card reads as a distinct surface against either. */
.section--alt .feature-card { background: var(--bg-primary); }
.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 — numbered card style: a leading "01"-style badge (a CSS
   counter, so it renumbers itself automatically whatever admin content
   is in the list), a colored title, then the body text below. Applies
   everywhere <x-bullet-card> is used — bullet-list/banner sections, and
   nested inside an accordion item or a group subsection — for a
   consistent look across the whole site.
   ============================================================= */
.bullet-card {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    counter-reset: bullet-card;
}
.bullet-card li {
    counter-increment: bullet-card;
    background: var(--bg-surface);
    border: 1px solid var(--primary-500);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.96rem;
}
.section:not(.section--alt) .bullet-card li { background: var(--bg-surface); }
.bullet-card li::before {
    content: counter(bullet-card, decimal-leading-zero);
    display: inline-block;
    background: var(--bg-primary);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.22px;
    padding: 0.25em 0.65em;
    border-radius: var(--radius-md);
    margin-bottom: 0.9rem;
}

/* The label — a <strong> by default, or an <h4> when nested inside an
   accordion item (see bullet-card.blade.php's $labelTag prop) — reads as
   the card's title, so it's styled like one regardless of which tag it
   actually is. */
.bullet-card__label {
    display: block;
    margin: 0 0 0.5em;
    color: rgba(var(--primary-rgb), 0.75);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.46px;
}
/* Also matches a literal nested <p> (a multi-paragraph body isn't
   stripped by SectionItem::inlineBody(), unlike a single-paragraph one)
   so the base `p` "description" rule above can't win on a direct-match
   basis over this div's own inherited styling. */
.bullet-card__text,
.bullet-card__text p {
    font-size: 12px;
    line-height: 1.2;
    color: var(--text-white-78);
}

/* =============================================================
   Step list — a flat, divided list for the "step-list" section type
   (numbered tutorial/how-it-works steps): a circular numbered badge next
   to a bold title, description indented to align beneath it, separated
   by a thin rule — a deliberately different look from .bullet-card's
   boxed "01" cards above, for a section type that reads as sequential
   instructions rather than independent bullet points. Combines with
   .items--horizontal/.items--grid the same way .bullet-card does — see
   step-list.blade.php and PageSection::effectiveItemArrangement().
   ============================================================= */
.step-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.step-list__item {
    padding: 1.3rem 0;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.5);
}
.step-list__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.step-list__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--primary-500);
    color: var(--primary-500);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
}
.step-list__title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
}
.step-list__body {
    margin-top: 0.5rem;
    padding-left: calc(26px + 0.75rem);
    color: var(--text-secondary);
    font-size: 0.95rem;
}
/* Also matches a literal nested <p> — step-list's body is never run
   through SectionItem::inlineBody() stripping (unlike bullet-card), so
   the rich editor's own wrapping <p> is always present here, which the
   base `p` "Description" rule would otherwise directly match and win
   over this div's merely-inherited color/font-size — same pitfall
   already fixed for .bullet-card__text/.hero__lead. */
.step-list__body,
.step-list__body p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.step-list__body p { margin: 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: 1px solid var(--primary-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-2); }
.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(--primary-900);
    color: var(--primary-400);
    font-weight: 700;
    font-size: 0.8rem;
    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);
}
.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; }

/* =============================================================
   Table style: "cards" — table_style === 'cards' (PageSection). Each
   row becomes its own card; each column becomes a label/value pair.
   Column 0 is styled as the card's headline field (bigger, themed);
   every other column is a compact label/value row beneath it.
   ============================================================= */
.table-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.table-cards__card {
    background: var(--bg-surface);
    border: 1px solid var(--secondary-500);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.section--alt .table-cards__card { background: var(--bg-surface-2); }
.table-cards__field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.table-cards__field:last-child { border-bottom: none; }
.table-cards__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.table-cards__value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); text-align: right; }
.table-cards__field--primary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-500);
}
.table-cards__field--primary .table-cards__value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-400);
    text-align: left;
}

/* =============================================================
   Table style: "comparison" — table_style === 'comparison'. Each row
   is a labeled group (label = that row's own first cell, not a column
   header) containing one card per remaining column — column 1's card
   (the first compared item) is highlighted as the "our side" item.
   ============================================================= */
.table-comparison { display: flex; flex-direction: column; gap: 0.8rem; }
.table-comparison__row {
    background: var(--bg-surface);
    border: 1px solid rgba(var(--secondary-rgb), 0.5);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    /* Soft glow, not a hard-edged shadow — 0/0 offset (centered on the
       card), a wide blur radius so it fades away gradually rather than
       cutting off sharply, and a small spread so it visibly extends
       past the card's own edges before that fade starts. */
    box-shadow: 0 0 28px 1px rgba(var(--secondary-rgb), 0.5);
}
.table-comparison__label {
    margin: 0 0 1rem;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.46px;
    color: #fff;
}
.table-comparison__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.table-comparison__item {
    /* The "typical/competitor" side's own look — the main background
       color at 0.8 opacity, white text at 0.78 opacity. The highlighted
       "our side" item (.table-comparison__item--primary below) overrides
       all of this back to its own themed look. */
    background: rgba(var(--bg-surface-rgb), 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
}
.table-comparison__item--primary {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.05));
    border-color: var(--primary-500);
}
.table-comparison__item-title {
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.85px;
    color: rgba(255, 255, 255, 0.78);
}
.table-comparison__item--primary .table-comparison__item-title { color: var(--primary-400); }
.table-comparison__item-text { margin: 0; font-size: 14px; line-height: 1.2; color: rgba(255, 255, 255, 0.78); }
.table-comparison__item--primary .table-comparison__item-text { color: #fff; }

/* =============================================================
   FAQ accordion — a flat list divided by rules, not individually
   boxed/bordered cards. Each item's "+" button becomes a "×" purely by
   rotating the whole (otherwise identical) plus-sign icon 45deg on
   open — see faq-accordion.blade.php — and the open question's own text
   switches to the theme color.
   ============================================================= */
.faq-list {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(var(--primary-rgb), 0.5);
}
.faq-item { border-bottom: 1px solid rgba(var(--primary-rgb), 0.5); }
.faq-item__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 0;
    cursor: pointer;
    color: var(--text-primary);
    font-family: var(--font-faq);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    transition: color 0.15s ease;
}
.faq-item[open] .faq-item__question { color: rgba(var(--primary-rgb), 0.5); }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--secondary-500);
    color: var(--secondary-500);
    transition: transform 0.2s ease, color 0.15s ease, border-color 0.15s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transition: background 0.15s ease;
}
.faq-item__icon::before {
    width: 9px;
    height: 1px;
    transform: translate(-50%, -50%);
}
.faq-item__icon::after {
    width: 1px;
    height: 9px;
    transform: translate(-50%, -50%);
}
.faq-item[open] .faq-item__icon {
    transform: rotate(45deg);
    color: rgba(var(--secondary-rgb), 0.5);
    border-color: rgba(var(--secondary-rgb), 0.5);
}
.faq-item__answer { padding: 0 0 1.3rem; }
.faq-item__answer p { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.3; }

/* =============================================================
   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 .feature-card__body { padding: 1.25rem; }

/* =============================================================
   Item arrangement — vertical (default)/horizontal/grid, selectable per
   section for feature-grid, feature-grid-compact, bullet-list, banner,
   and accordion-list — see PageSection::effectiveItemArrangement() and
   SectionsRelationManager::itemArrangementField(). Combinable with
   .card-grid, .bullet-card, or .accordion-group — each still styles its
   own item/li/details element; these two classes only take over the
   container's own layout. Placed after those three blocks in the
   stylesheet on purpose, so they win the cascade on the `display`/
   `flex-direction`/`grid-template-columns` properties all four share.
   ============================================================= */
.items--horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Centers the row when it's narrower than its container (few items —
       otherwise it defaults to flex-start and bunches up on the left).
       "safe" is what keeps this from backfiring once there ARE enough
       items to overflow: a plain "center" on an overflowing flex line
       centers it symmetrically, which pushes part of the start of the
       content past scrollLeft: 0 — inaccessible by scrolling in a
       left-to-right layout. "safe center" automatically falls back to
       flex-start behavior in that case, so nothing is ever unreachable. */
    justify-content: safe center;
    gap: 1.5rem;
    /* The native scrollbar is hidden on purpose — it always spans the
       full container width and can't be shortened with CSS alone, so a
       short/thin custom indicator (.items-scrollbar, built by app.js) is
       used instead. Scrolling itself still works natively (touch,
       trackpad, mouse wheel, drag) — only the browser's own scrollbar
       chrome is hidden. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.items--horizontal::-webkit-scrollbar { display: none; }
.items--horizontal > * { flex: 0 0 300px; }

/* Custom scroll-progress indicator injected by app.js right after each
   .items--horizontal element — short and thin, unlike a native
   scrollbar, and with no clickable arrow buttons at either end. Purely a
   visual reflection of native scroll position; dragging it isn't
   supported (the underlying row is still scrolled the normal way). */
.items-scrollbar {
    width: 450px;
    max-width: 60%;
    height: 3px;
    margin: 0.6rem auto 0;
    background: var(--bg-surface);
    border-radius: 999px;
    overflow: hidden;
}
.items-scrollbar__thumb {
    height: 100%;
    background: var(--primary-500);
    border-radius: 999px;
}

/* Bullet-list specifically (not feature-grid/step-list/accordion-group,
   which also share .items--horizontal) — below 425px, a horizontal-
   scroll bullet list becomes a plain vertical stack instead, same as
   the default (non-horizontal) arrangement. .bullet-card.items--horizontal
   (two classes) is more specific than the plain .items--horizontal rule
   above, so this wins regardless of the two rules' order in the file.
   The scroll-progress bar app.js injects right after every
   .items--horizontal element (see items-scrollbar above) is hidden too
   — with nothing left to horizontally scroll, it would otherwise sit
   there as a stray, non-functional bar under the now-stacked list. */
@media (max-width: 425px) {
    .bullet-card.items--horizontal {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
    }
    .bullet-card.items--horizontal > * { flex: initial; }
    .bullet-card.items--horizontal + .items-scrollbar { display: none; }
}

/* Same responsive breakpoints as .card-grid/.card-grid--N (kept as a
   separate, self-contained set of classes rather than reusing those,
   since combining two same-specificity column-count rules from
   different stylesheet locations on one element would make the winner
   depend on source order in a way that's easy to accidentally break). */
.items--grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) {
    .items--grid-2, .items--grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .items--grid-3 { grid-template-columns: repeat(3, 1fr); }
    .items--grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* =============================================================
   Footer — a left-aligned brand block (logo, tagline, trust badges) next
   to 3 admin-labeled link columns, then a full-width notice paragraph and
   copyright line below a divider. Background is --footer-bg — defaults to
   --bg-surface (the admin's "Background color" pick from Edit branding,
   same as every other alt/surface area) but independently
   admin-overridable via its own "Footer background color" field — see
   layouts/app.blade.php.
   ============================================================= */
.site-footer {
    background: var(--footer-bg);
    padding: 3.5rem 0 1.5rem;
}
.site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    padding-bottom: 2.5rem;
}
.site-footer__brand { flex: 1 1 320px; max-width: 400px; }
.site-footer__tagline {
    margin: 1rem 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 23px;
}
.site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}
.site-footer__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.75em;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    color: var(--text-white-78);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-footer__columns {
    flex: 2 1 600px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.site-footer__column-heading {
    margin: 0 0 1.1rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 14.43px;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}
.site-footer__column ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.site-footer__column a { color: var(--text-secondary); font-size: 14px; line-height: 23.23px; }
.site-footer__column a:hover { color: var(--secondary-400); }

/* Full width of the footer's own content area (.site-footer__inner) —
   deliberately a separate element from .site-footer__notice rather than
   a border on it directly, since the notice itself is narrower
   (max-width: 640px) and a border on that box alone would only span the
   notice's own width, not the full footer. One above and one below the
   notice. */
.site-footer__divider { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer__divider + .site-footer__notice { margin-top: 2rem; }
.site-footer__notice + .site-footer__divider { margin-top: 2rem; }

.site-footer__notice { max-width: 640px; }
.site-footer__notice p { font-weight: 400; font-size: 13px; line-height: 21.76px; color: var(--text-muted); margin: 0; }
.site-footer__notice a { color: var(--text-secondary); text-decoration: underline; }
.site-footer__notice a:hover { color: var(--secondary-400); }

@media (max-width: 720px) {
    .site-footer__columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .site-footer__columns { grid-template-columns: 1fr; }
}

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