/* =============================================================
   hellspin — design tokens
   ============================================================= */
:root {
    --bg-primary:      #0a0605;
    --bg-surface:      #17100e;
    --bg-surface-2:    #1e1512;
    --border-subtle:   #2e211c;

    --primary-500:     #dc2626;
    --primary-400:     #ef4444;
    --primary-600:     #b91c1c;
    --primary-900:     #450a0a;
    --primary-rgb:     220, 38, 38;

    /* 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:   #f97316;
    --secondary-400:   #fb923c;
    --secondary-600:   #ea580c;
    --secondary-900:   #7c2d12;
    --secondary-rgb:   249, 115, 22;

    --text-primary:    #f7f2f0;
    --text-secondary:  #bcaba5;
    --text-muted:      #7d6b64;

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

    --container-narrow: 820px;

    --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

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

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

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

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

h1, h2, h3, h4 {
    font-family: var(--font-body);
    line-height: 1.2;
    margin: 0 0 0.6em;
    font-weight: 700;
}

h1 { font-size: 32px; line-height: 120%; font-weight: 700; }
h2 { font-size: 28px; color: var(--primary-400); line-height: 120%; font-weight: 700; }
h3 { font-size: 18px; line-height: 120%; font-weight: 700; }
h4 { font-size: 18px; line-height: 120%; font-weight: 700; }

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

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

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

.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.section--alt { background: var(--bg-surface); }
.section__heading { margin-bottom: 2.2rem; }
.section__intro { margin: -1.2rem auto 2.2rem; }
.section__outro { margin: 2.2rem auto 0; font-style: italic; color: var(--text-muted); }

/* Legal pages (Privacy Policy, Terms & Conditions, etc. — see LegalPage,
   LegalPageController, resources/views/legal-page.blade.php). A single
   admin-authored rich-text field is split into per-<h2> cards purely at
   render time (LegalPage::parsedContent()), each styled as a plain dark
   card here. The last card is highlighted if its heading mentions
   "Contact", so a document's contact details stand out. */
.legal-page__header { text-align: center; margin: 1.5rem 0 1rem; }
.legal-page__updated { text-align: center; font-size: 0.85rem; font-style: italic; color: var(--text-muted); margin: 0 0 2.5rem; }
.legal-page__section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}
.legal-page__section:last-child { margin-bottom: 0; }
.legal-page__section h2 { 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(--primary-500);
    border-color: rgba(var(--primary-rgb), 0.6);
    color: #000000;
}
.legal-page__section--contact * { color: #000000; }

/* Group section — several sections stacked together under one shared
   (optional) heading, instead of each getting its own full-width
   <section> with its own padding (see PageSection type 'group' /
   page-section.blade.php). A thin rule separates each grouped item
   rather than the usual large section-to-section gap. */
.section-group { display: flex; flex-direction: column; margin-top: 2.5rem; gap: 1.5rem; }
.section-group__item { padding: 2.25rem 0; }
.section-group__item:first-child { padding-top: 0; }
.section-group__item:last-child { padding-bottom: 0; }
.section-group__item:not(:last-child) { border-bottom: 1px solid var(--primary-500); }

/* A boxed group item (see PageSection::boxed, per-child — page-section.
   blade.php) is a card in its own right, so it keeps its own full
   padding on every side (including first/last, which the rules above
   would otherwise zero out) and drops the divider line in favor of the
   gap between cards set on .section-group above. */
.section-group__item.section__box,
.section-group__item.section__box:first-child,
.section-group__item.section__box:last-child {
    padding: clamp(1.75rem, 4vw, 3rem);
    border-bottom: none;
}

/* Content alignment — admin-configurable per section, every type,
   including each subsection individually inside an accordion-list or
   group (see PageSection::alignment). Applied once to each type's
   outer content container (or per-child wrapper for accordion/group
   items — see page-section.blade.php) and left to cascade via normal
   text-align inheritance, so it reaches every heading/paragraph/list
   inside without needing a rule per element. .align-left is stated
   explicitly (not just "no rule") so it still wins over any inherited
   center/right from an ancestor context. */
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* Section box — any section can render as a contained, colored card
   instead of full width (see PageSection::boxed/box_color). Sits on
   the page's consistent base background (--bg-primary, admin-set —
   see layouts/app.blade.php) rather than bleeding to the viewport
   edge. */
.section__box {
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--radius-lg);
}
.section__box--theme { background: var(--primary-500); border: 1px solid rgba(var(--primary-rgb), 0.6); }
.section__box--secondary { background: var(--secondary-500); border: 1px solid rgba(var(--secondary-rgb), 0.6); }
/* Neutral — a plain dark card, not a bright brand color. No text-color
   overrides needed (unlike theme/secondary below): headings/body keep
   their normal site colors, which already read fine on --bg-surface —
   built for dense long-form content (e.g. legal pages) where a solid
   red/orange panel would be overwhelming to read. */
.section__box--neutral { background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.section__box--neutral .feature-card,
.section__box--neutral .bullet-card li,
.section__box--neutral .accordion-item,
.section__box--neutral .faq-item { background: var(--bg-surface-2); }

/* Theme-colored box: every piece of text in the section goes black —
   both box colors are solid, saturated brand colors, so the default
   light/accent text would be unreadable on top of them. `*` + !important
   rather than enumerating each component's own color rule (feature-card
   h3, bullet-card li strong, data-table header cells, etc. each set
   color at their own specificity) — those varied enough that per-
   component overrides kept losing the cascade. CTA buttons are
   exempted, restored to their normal button colors right after. */
.section__box--theme,
.section__box--theme * { color: #000000 !important; }
.section__box--theme .btn--primary { color: #ffffff !important; }
.section__box--theme .btn--ghost { color: var(--text-primary) !important; }

/* Secondary-colored box: headings and card links pick up the theme
   (primary) color for brand contrast, everything else goes white. */
.section__box--secondary,
.section__box--secondary * { color: #ffffff !important; }
.section__box--secondary h2,
.section__box--secondary h3,
.section__box--secondary h4,
.section__box--secondary .feature-card__link { color: var(--primary-500) !important; }
.section__box--secondary .btn--primary { color: #ffffff !important; }
.section__box--secondary .btn--ghost { color: var(--text-primary) !important; }

/* Data table text is exempt from the box recolor above — it's a
   light card in its own right (see the Data table rules further
   down) and always keeps its own dark text regardless of box color.
   The table's figcaption and the section's intro/outro text are NOT
   part of the table itself, so they still follow the box color as
   normal. */
.section__box--theme .data-table__cell,
.section__box--secondary .data-table__cell { color: #4a4038 !important; }
.section__box--theme .data-table__cell--label,
.section__box--secondary .data-table__cell--label { color: #1a1310 !important; }

/* FAQ accordion text is exempt too, for the same reason — it already
   has its own deliberate color scheme that the box recolor above
   would otherwise flatten to a single flat color. The question text
   sits in a child <span> and the icon's color reaches its <path>s via
   currentColor — both are separate elements the `*` wildcard above
   matches directly, and a direct match always beats inherited color
   regardless of the parent's specificity — so every rule below also
   targets `* ` in each scope, not just the container itself, or the
   child would stay whatever the wildcard set.

   Theme box: question text is black whether open or closed (open
   already was; closed now matches instead of staying gold-on-gold).
   Secondary box: unchanged from the base FAQ look — gold while
   closed, black once open. */
.section__box--theme .faq-item__question,
.section__box--theme .faq-item__question * { color: #000000 !important; }
.section__box--secondary .faq-item__question,
.section__box--secondary .faq-item__question * { color: var(--primary-400) !important; }
.section__box--secondary .faq-item[open] .faq-item__question,
.section__box--secondary .faq-item[open] .faq-item__question * { color: #000000 !important; }
.section__box--theme .faq-item__answer,
.section__box--theme .faq-item__answer *,
.section__box--secondary .faq-item__answer,
.section__box--secondary .faq-item__answer * { color: #000000 !important; }

/* Card-based content inside a boxed section (feature grid, compact
   feature grid, bullet list, accordion list, FAQ list) — each card's
   own background is a lighter tint of the section's box color (the
   existing -400 shade, already generated from the admin's color pick
   — see ThemeColor::shades()), instead of the plain --bg-surface used
   outside a box. Solid rather than translucent, so it reads as a
   distinct card against the -500 box behind it. */
.section__box--theme .feature-card,
.section__box--theme .bullet-card li,
.section__box--theme .accordion-item,
.section__box--theme .faq-item { background: var(--primary-400); }
.section__box--secondary .feature-card,
.section__box--secondary .bullet-card li,
.section__box--secondary .accordion-item,
.section__box--secondary .faq-item { background: var(--secondary-400); }

/* Bullet-list items are plain (no card chrome) outside a box — see the
   Bullet card rules further down — but need their own padding/radius
   once a boxed section gives them a background, same as the other
   card types above already have baked into their un-boxed styles. */
.section__box--theme .bullet-card li,
.section__box--secondary .bullet-card li { padding: 1rem 1.25rem; border-radius: var(--radius-md); }

.section--closing__lead { color: var(--text-primary); font-weight: 600; }
.section__cta { margin-top: 1.75rem; }

/* =============================================================
   Buttons
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.65em 1.4em;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn--lg { padding: 0.85em 1.9em; font-size: 1.05rem; }
.btn--primary {
    background: 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: transparent;
    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: rgba(10, 6, 5, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
    width: 90%;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Burger + logo group on the left, nav links + auth buttons grouped on
   the right — two flex groups rather than N flat items, so
   justify-content: space-between keeps the right-hand items adjacent
   to each other instead of spreading all of them evenly. */
.site-header__left { display: flex; align-items: center; gap: 0.85rem; }
.site-header__right { display: flex; align-items: center; gap: 2rem; }

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

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

.site-nav { display: flex; align-items: center; }
.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: 961px) {
    .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); }
}

@media (max-width: 960px) {
    .nav-burger { display: flex; }

    /* Logo shrinks to make room for the burger beside it. */
    .brand__logo { height: 28px; }
    .brand__text { font-size: 1.3rem; }

    /* Only the plain link list collapses into a dropdown panel — the
       auth buttons are a sibling of .site-nav now (see navbar.blade.php),
       so they're untouched by this and stay visible in the top bar. */
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border-subtle);
        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;
    }

    /* Auth buttons stay in the top bar at every width below 960px —
       just sized down to fit next to the shrunk logo/burger. */
    .site-nav__auth { gap: 0.5rem; }
    .site-nav__auth .btn { padding: 0.45em 0.9em; font-size: 0.82rem; }
}

/* =============================================================
   Hero
   ============================================================= */
.hero { position: relative; }

/* Standalone banner image — not a text backdrop. A soft fade at the
   bottom blends it into the solid-color content block beneath it
   instead of a hard image/text seam. */
.hero__figure {
    position: relative;
    margin: 0;
    height: clamp(260px, 36vw, 520px);
    overflow: hidden;
}
.hero__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.hero__figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 6, 5, 0) 55%, var(--bg-primary) 100%);
    pointer-events: none;
}
.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);
}

/* Content sits below the image in normal flow, on the page's solid
   background, centered — title/lead/CTAs read as their own block
   rather than overlaid copy fighting the artwork for legibility. */
.hero__body { background: var(--bg-primary); text-align: center; padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero__content { margin: 0 auto; }
.hero__title { color: var(--primary-500); }
.hero__lead { font-size: 1.05rem; color: var(--text-secondary); margin: 0 auto; }
.hero__cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Banner — a real, contained image (not a full-bleed CSS background)
   paired with text, admin-chosen as stacked ('top') or side-by-side
   ('side') — see PageSection::image_layout. */
.banner { display: flex; flex-direction: column; gap: 1.75rem; }
.banner--side { flex-direction: row; align-items: center; gap: 2.5rem; }
.banner__figure { margin: 0; }
.banner__image { height: auto; border-radius: var(--radius-lg); display: block; }
.banner--top .banner__image { width: 100%; }

/* Side-by-side: the figure shrinks to fit the image rather than
   claiming a fixed share of the row, so an admin-set max-width/
   max-height (see PageSection::image_max_width/image_max_height,
   applied as an inline style on the <img> — it wins over this
   fallback) actually shrinks the box, not just the image inside a
   still-wide box. Falls back to a compact ~280px thumbnail when
   neither is set. */
.banner--side .banner__figure { flex-shrink: 0; }
.banner--side .banner__image { width: auto; max-width: 280px; max-height: 280px; }
.banner--side .banner__content { flex: 1; min-width: 0; }
@media (max-width: 700px) {
    .banner--side { flex-direction: column; }
    .banner--side .banner__figure { width: 100%; }
    .banner--side .banner__image { max-width: 100%; }
}

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

/* Card arrangement — admin-configurable per feature-grid/feature-grid-
   compact section (see PageSection::card_layout), independent of the
   column-count classes above (which only matter for the default 'grid'
   arrangement). Declared after .card-grid so `display` here correctly
   wins over the grid default — equal specificity, later in the
   cascade. grid-template-columns from the classes above still computes
   for a flex container but is simply ignored, since it's a grid-only
   property. */
.card-grid--vertical { display: flex; flex-direction: column; }
.card-grid--horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.card-grid--horizontal .feature-card { flex: 0 0 280px; }

/* Feature cards default to a solid theme-color background with black
   text — even outside a boxed section (see .section__box--theme for
   the boxed equivalent, which uses the lighter -400 tint instead so
   it reads as a step up from its own box). */
.feature-card {
    background: var(--primary-500);
    color: #000000;
    /* border: 1px solid var(--border-subtle); */
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.feature-card:hover { border-color: var(--secondary-500); transform: translateY(-3px); }
/* p has its own global color rule (a direct match, which always beats
   inherited color regardless of specificity — see the box wildcard
   comment above), so it needs restating here explicitly; headings
   don't have one, so they correctly inherit black from .feature-card
   itself regardless of which level they render at (h3 top-level, h4
   nested in an accordion item, or h3/h4/h5+ nested in a group,
   depending on depth — see section-content.blade.php). */
.feature-card p { margin: 0; font-size: 14px; color: #000000; }
.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 p { font-size: 0.9rem; }
.feature-card__link {
    display: inline-block;
    margin-top: 0.75rem;
    color: #000000;
    text-decoration: underline;
    font-weight: 600;
    font-size: 0.9rem;
}
.feature-card__link:hover { color: var(--secondary-500); }
.feature-card__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.75rem; }
.feature-card__links .feature-card__link { margin-top: 0; }

/* =============================================================
   Bullet card
   ============================================================= */
.bullet-card {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.bullet-card li { color: var(--text-secondary); font-size: 0.96rem; }
.bullet-card__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}
.bullet-card__icon { flex-shrink: 0; }
.bullet-card__icon-bg { fill: var(--primary-500); }
.bullet-card__icon-check { fill: none; stroke: var(--secondary-500); }
.bullet-card__label {
    margin: 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 700;
}
.bullet-card__text { padding-left: 1.85rem; }
.bullet-card__text > *:last-child { margin-bottom: 0; }

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

/* =============================================================
   Data table (wide, many-column lookup tables). First column shrinks
   to fit its own content; remaining columns share the rest of the
   width and wrap their text. Scrolls horizontally as a fallback on
   narrow viewports once columns hit their minimum width.

   Deliberately a light card — not the site's dark palette — so a
   comparison table reads as a distinct, high-contrast panel against
   the page. Column 2 (nth-child(2), e.g. "HellSpin ...") is always
   styled as the featured/highlighted column with a colored top
   accent — built for a 3-column "us vs. them" comparison, the
   table's main use case; extra columns beyond the 3rd just fall back
   to the plain "other" column look.
   ============================================================= */
.data-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.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--head .data-table__cell {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    position: sticky;
    top: 0;
}
.data-table__row--head .data-table__cell:nth-child(2) { border-top: 3px solid var(--primary-500); }
.data-table__cell {
    font-family: var(--font-body);
    padding: 0.9rem 1.25rem;
    font-size: 0.88rem;
    color: #4a4038;
    background: #ececea;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.data-table__cell:nth-child(1) { background: #ffffff; }
.data-table__cell:nth-child(2) { background: #fdf3d9; font-weight: 600; }
.data-table__cell:last-child { border-right: none; }
.data-table__row:last-child .data-table__cell { border-bottom: none; }
.data-table__cell--label { color: #1a1310; font-weight: 600; }

/* =============================================================
   FAQ accordion
   ============================================================= */
/* One shared panel holds every question — items are divided by a thin
   rule rather than each getting its own card/gap. The open item's
   question row fills solid with the theme color (black text/icon, same
   "solid color -> black text" convention used for boxed sections), and
   its answer drops onto a light panel — a deliberate light/dark
   inversion for the expanded state, mirroring the Data table's light
   card treatment elsewhere on the site. */
.faq-list {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item:last-child { border-bottom: none; }
.faq-item__question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
    color: var(--primary-400);
    font-weight: 700;
    font-size: 1.02rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__icon { flex-shrink: 0; color: var(--primary-400); }
.faq-item__icon-bar { transition: opacity 0.15s ease; }
.faq-item[open] .faq-item__question { background: var(--primary-500); color: #000000; }
.faq-item[open] .faq-item__icon { color: #000000; }
.faq-item[open] .faq-item__icon-bar { opacity: 0; }
.faq-item__answer { padding: 1rem 1.4rem 1.3rem; background: #e8e6e3; color: #000000; }
.faq-item__answer p { margin: 0; font-size: 16px; color: #000000; }

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

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    padding: 3rem 0 1.5rem;
}
.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: 720px;
    margin: 0 auto 1.5rem;
    text-align: center;
}
.site-footer__notice p { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

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

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

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

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

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

@media (max-width: 768px) {
    .hero__content { width: 100% }
    .container { width: 100% }
    h1, h2 { font-size: 20px }
    h3 { font-size: 16px }
    .feature-card h3,
    .feature-card h4,
    .feature-card h5 { text-align: center; }
    .btn { padding: 0.5em 1em; font-size: 16px; }
    p { font-size: 14px; }
    .feature-card p { font-size: 12px; text-align: center; }
    .faq-list h3 { font-size: 14px; }
    .faq-item__answer p { font-size: 14px; }
    .site-header__inner { width: 100%; }
    /* .faq-item__question { font-size: 14px; } */
    /* .faq-item__answer p { font-size: 14px; } */
}