/* =============================================================================
   SSB DESIGN SYSTEM — section_schemes.css
   =============================================================================
   Two-layer CSS design system for public site sections.
   Layer 1: Site layout (container, spacing, grid) — reads --site-* and --space-* vars
   Layer 2: Colour schemes (6 schemes × 5 variable groups) — reads --section-*, --card-*, etc.

   Templates use ssb-* classes that read from both layers.
   One model field change (e.g. container_width: "wide") affects all 17 section templates.
   ============================================================================= */


/* =============================================================================
   LAYER 1: SITE LAYOUT COMPONENTS
   Theme-controlled, scheme-independent
   ============================================================================= */

.ssb-container {
    width: 100%;
    max-width: var(--site-container-width, 80rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-container-padding-x, 1rem);
    padding-right: var(--site-container-padding-x, 1rem);
}

/* Content width modifiers */
.ssb-content-full { width: 100%; }
.ssb-content-prose { max-width: var(--content-prose, 65ch); }
.ssb-content-medium { max-width: var(--content-medium, 48rem); }
.ssb-content-narrow { max-width: var(--content-narrow, 36rem); }
.ssb-content-center { margin-left: auto; margin-right: auto; }

/* Section vertical spacing */
.ssb-section-spacing {
    padding-top: var(--space-section, 4rem);
    padding-bottom: var(--space-section, 4rem);
}
@media (min-width: 1024px) {
    .ssb-section-spacing {
        padding-top: var(--space-section-lg, 6rem);
        padding-bottom: var(--space-section-lg, 6rem);
    }
}

/* Header internal spacing */
.ssb-header-gap > * + * { margin-top: var(--header-gap, 1rem); }

/* Structural spacing between regions */
.ssb-header-to-content { margin-top: var(--header-to-content, 2.5rem); }
.ssb-content-to-footer { margin-top: var(--content-to-footer, 4rem); }

/* Grid gap utilities */
.ssb-gap-sm { gap: var(--grid-gap-sm, 1rem); }
.ssb-gap-md { gap: var(--grid-gap-md, 1.5rem); }
.ssb-gap-lg { gap: var(--grid-gap-lg, 2.5rem); }
.ssb-gap-lg-responsive {
    gap: var(--grid-gap-lg, 2.5rem);
}
@media (min-width: 1024px) {
    .ssb-gap-lg-responsive {
        gap: var(--grid-gap-xl, 4rem);
    }
}

/* Responsive grid system */
.ssb-grid { display: grid; }
.ssb-grid-2,
.ssb-grid-3,
.ssb-grid-4,
.ssb-grid-5 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .ssb-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .ssb-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ssb-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ssb-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .ssb-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .ssb-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .ssb-grid-5 { grid-template-columns: repeat(5, 1fr); }
}


/* =============================================================================
   SITE MOOD — texture/form layer (scheme-independent)   [SE-063, Phase 0]
   Texture (shadow/radius) + the one premium easing live HERE, not inside
   .scheme-* — so texture × colour are orthogonal. Phase 1 adds
   .ssb-style-editorial / -soft / -glass alongside this Base layer.
   Body-level class (public/base.html) → vars inherit to every .ssb-card / .ssb-btn / .ssb-reveal.
   ============================================================================= */

.ssb-style-base {
    --ease-premium: cubic-bezier(.32, .72, 0, 1);   /* the one premium easing — no :root in this file */
    /* Canonical Base texture = the former default-scheme card values (now scheme-independent). */
    --card-radius: 1rem;
    --card-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 16px -4px rgba(16,24,40,0.08);
    --card-hover-shadow: 0 2px 4px rgba(16,24,40,0.05), 0 16px 32px -8px rgba(16,24,40,0.14);
    /* Mood COLOUR is applied as DATA (the colour fields → --site-*-color) by apply_mood_palette
       (SE-066), not via CSS — so the old --pack-* colour vars here were dead (unreachable: --site-*
       is always emitted and wins). Removed (SSB-MOOD-COLOUR-VIA-PACK-CSS-IS-DEAD). Mood TEXTURE
       (the --card-* vars above + the per-pack blocks below) is unaffected. */
}

/* ----- Universal mechanic: scroll-reveal (progressive enhancement) -----
   Initial-hidden state is scoped to html.js, so content is fully visible without JS
   (SEO-safe, zero CLS — transform/opacity/filter only). ssb-reveal.js adds .in on entry. */
.js .ssb-reveal {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
    transition:
        opacity 0.8s var(--ease-premium),
        transform 0.8s var(--ease-premium),
        filter 0.8s var(--ease-premium);
}
.js .ssb-reveal.in {
    opacity: 1;
    transform: none;
    filter: none;
}
@media (prefers-reduced-motion: reduce) {
    .js .ssb-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}


/* =============================================================================
   LAYER 2: COLOUR SCHEME DEFINITIONS
   6 schemes × 5 variable groups
   ============================================================================= */

/* ----- Group 1: Section ----- */
/* 8 vars: bg, heading, subheading, eyebrow, text, text-muted, border, divider */

.scheme-default {
    /* The default scheme = "follow the active Mood". Mood colour is applied as DATA (the colour
       fields → --site-*-color) by apply_mood_palette (SE-066), so these read the --site-* values
       with their original literal terminals. The dead --pack-* colour fallback layer was removed
       once Mood-as-data shipped (SSB-MOOD-COLOUR-VIA-PACK-CSS-IS-DEAD) — Base stays byte-identical
       because the terminal literals (#ffffff/#111827/#3b82f6) are unchanged. The 5 named schemes
       set --section-* directly and are unchanged. */
    --section-bg: var(--site-background-color, #ffffff);
    --section-heading: var(--site-text-color, #111827);
    --section-subheading: #6b7280;
    --section-eyebrow: var(--site-primary-color, #3b82f6);
    --section-text: var(--site-text-color, #374151);
    --section-text-muted: #9ca3af;
    --section-border: #e5e7eb;
    --section-divider: #f3f4f6;
}

.scheme-light {
    --section-bg: var(--site-surface-color, #f9fafb);
    --section-heading: var(--site-text-color, #111827);
    --section-subheading: #6b7280;
    --section-eyebrow: var(--site-primary-color, #3b82f6);
    --section-text: var(--site-text-color, #374151);
    --section-text-muted: #9ca3af;
    --section-border: #e5e7eb;
    --section-divider: #e5e7eb;
}

.scheme-dark {
    --section-bg: #1f2937;
    --section-heading: #ffffff;
    --section-subheading: #d1d5db;
    --section-eyebrow: var(--site-tertiary-color, #8b5cf6);
    --section-text: #e5e7eb;
    --section-text-muted: #9ca3af;
    --section-border: #374151;
    --section-divider: #374151;
}

.scheme-primary {
    --section-bg: #eff6ff;
    --section-heading: var(--site-text-color, #111827);
    --section-subheading: #6b7280;
    --section-eyebrow: var(--site-primary-color, #3b82f6);
    --section-text: var(--site-text-color, #374151);
    --section-text-muted: #9ca3af;
    --section-border: #dbeafe;
    --section-divider: #dbeafe;
}

.scheme-primary-bold {
    --section-bg: var(--site-primary-color, #3b82f6);
    --section-heading: #ffffff;
    --section-subheading: rgba(255,255,255,0.85);
    --section-eyebrow: rgba(255,255,255,0.9);
    --section-text: rgba(255,255,255,0.9);
    --section-text-muted: rgba(255,255,255,0.7);
    --section-border: rgba(255,255,255,0.2);
    --section-divider: rgba(255,255,255,0.15);
}

.scheme-surface {
    --section-bg: var(--site-surface-color, #f3f4f6);
    --section-heading: var(--site-text-color, #111827);
    --section-subheading: #6b7280;
    --section-eyebrow: var(--site-secondary-color, #374151);
    --section-text: var(--site-text-color, #374151);
    --section-text-muted: #9ca3af;
    --section-border: #e5e7eb;
    --section-divider: #d1d5db;
}


/* ----- Group 2: Card ----- */
/* 13 vars per scheme */

.scheme-default, .scheme-light, .scheme-primary, .scheme-surface {
    --card-bg: #ffffff;
    --card-border: rgba(16,24,40,0.06);
    /* texture (--card-shadow/-hover-shadow/-radius) moved to .ssb-style-base (SE-063) */
    --card-heading: #111827;
    --card-text: #4b5563;
    --card-text-muted: #9ca3af;
    --card-link: var(--site-primary-color, #3b82f6);
    --card-divider: #f3f4f6;
    --card-badge-bg: #f3f4f6;
    --card-badge-text: #374151;
    --card-image-overlay: rgba(0,0,0,0.05);
}

.scheme-dark {
    --card-bg: rgba(255,255,255,0.08);
    --card-border: rgba(255,255,255,0.12);
    /* texture moved to .ssb-style-base (SE-063); was radius 0.75rem + darker shadows */
    --card-heading: #ffffff;
    --card-text: #d1d5db;
    --card-text-muted: #9ca3af;
    --card-link: #93c5fd;
    --card-divider: rgba(255,255,255,0.1);
    --card-badge-bg: rgba(255,255,255,0.15);
    --card-badge-text: #e5e7eb;
    --card-image-overlay: rgba(0,0,0,0.2);
}

.scheme-primary-bold {
    --card-bg: rgba(255,255,255,0.12);
    --card-border: rgba(255,255,255,0.15);
    /* texture moved to .ssb-style-base (SE-063); was radius 0.75rem + darker shadows */
    --card-heading: #ffffff;
    --card-text: rgba(255,255,255,0.9);
    --card-text-muted: rgba(255,255,255,0.7);
    --card-link: #ffffff;
    --card-divider: rgba(255,255,255,0.1);
    --card-badge-bg: rgba(255,255,255,0.2);
    --card-badge-text: #ffffff;
    --card-image-overlay: rgba(0,0,0,0.15);
}


/* ----- Group 3: Button ----- */
/* 3 roles × 2 styles × 4 props = ~24 vars per scheme */

/* Default / Light / Surface / Primary — brand buttons on light backgrounds */
.scheme-default, .scheme-light, .scheme-surface, .scheme-primary {
    /* Primary solid */
    --btn-primary-bg: var(--site-primary-color, #3b82f6);
    --btn-primary-text: #ffffff;
    --btn-primary-border: var(--site-primary-color, #3b82f6);
    --btn-primary-hover-bg: var(--site-primary-color, #3b82f6);
    /* Primary outline */
    --btn-primary-outline-bg: transparent;
    --btn-primary-outline-text: var(--site-primary-color, #3b82f6);
    --btn-primary-outline-border: var(--site-primary-color, #3b82f6);
    --btn-primary-outline-hover-bg: rgba(59,130,246,0.08);
    /* Secondary solid */
    --btn-secondary-bg: #1f2937;
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: #1f2937;
    --btn-secondary-hover-bg: #111827;
    /* Secondary outline */
    --btn-secondary-outline-bg: transparent;
    --btn-secondary-outline-text: #1f2937;
    --btn-secondary-outline-border: #1f2937;
    --btn-secondary-outline-hover-bg: rgba(31,41,55,0.06);
    /* Accent solid */
    --btn-accent-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-text: #ffffff;
    --btn-accent-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-hover-bg: var(--site-tertiary-color, #8b5cf6);
    /* Accent outline */
    --btn-accent-outline-bg: transparent;
    --btn-accent-outline-text: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-hover-bg: rgba(139,92,246,0.08);
}

/* Dark — inverted: primary = white bg, dark text */
.scheme-dark {
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #1f2937;
    --btn-primary-border: #ffffff;
    --btn-primary-hover-bg: #f3f4f6;
    --btn-primary-outline-bg: transparent;
    --btn-primary-outline-text: #ffffff;
    --btn-primary-outline-border: rgba(255,255,255,0.5);
    --btn-primary-outline-hover-bg: rgba(255,255,255,0.1);
    --btn-secondary-bg: var(--site-primary-color, #3b82f6);
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: var(--site-primary-color, #3b82f6);
    --btn-secondary-hover-bg: var(--site-primary-color, #3b82f6);
    --btn-secondary-outline-bg: transparent;
    --btn-secondary-outline-text: rgba(255,255,255,0.9);
    --btn-secondary-outline-border: rgba(255,255,255,0.3);
    --btn-secondary-outline-hover-bg: rgba(255,255,255,0.08);
    --btn-accent-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-text: #ffffff;
    --btn-accent-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-hover-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-bg: transparent;
    --btn-accent-outline-text: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-hover-bg: rgba(139,92,246,0.15);
}

/* Primary-bold — inverted: primary = white bg, brand text */
.scheme-primary-bold {
    --btn-primary-bg: #ffffff;
    --btn-primary-text: var(--site-primary-color, #3b82f6);
    --btn-primary-border: #ffffff;
    --btn-primary-hover-bg: #f3f4f6;
    --btn-primary-outline-bg: transparent;
    --btn-primary-outline-text: #ffffff;
    --btn-primary-outline-border: rgba(255,255,255,0.6);
    --btn-primary-outline-hover-bg: rgba(255,255,255,0.12);
    --btn-secondary-bg: rgba(255,255,255,0.18);
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: rgba(255,255,255,0.18);
    --btn-secondary-hover-bg: rgba(255,255,255,0.25);
    --btn-secondary-outline-bg: transparent;
    --btn-secondary-outline-text: #ffffff;
    --btn-secondary-outline-border: rgba(255,255,255,0.35);
    --btn-secondary-outline-hover-bg: rgba(255,255,255,0.1);
    --btn-accent-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-text: #ffffff;
    --btn-accent-border: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-hover-bg: var(--site-tertiary-color, #8b5cf6);
    --btn-accent-outline-bg: transparent;
    --btn-accent-outline-text: #ffffff;
    --btn-accent-outline-border: rgba(255,255,255,0.5);
    --btn-accent-outline-hover-bg: rgba(255,255,255,0.1);
}


/* ----- Group 4: Input ----- */
/* 10 vars per scheme */

.scheme-default, .scheme-light, .scheme-primary, .scheme-surface {
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-text: #111827;
    --input-placeholder: #9ca3af;
    --input-focus-ring: var(--site-primary-color, #3b82f6);
    --input-focus-ring-alpha: rgba(59,130,246,0.2);
    --input-label: #374151;
    --input-help: #6b7280;
    --input-error: #dc2626;
    --input-error-bg: #fef2f2;
}

.scheme-dark {
    --input-bg: rgba(255,255,255,0.08);
    --input-border: rgba(255,255,255,0.2);
    --input-text: #ffffff;
    --input-placeholder: rgba(255,255,255,0.5);
    --input-focus-ring: #93c5fd;
    --input-focus-ring-alpha: rgba(147,197,253,0.3);
    --input-label: #e5e7eb;
    --input-help: #9ca3af;
    --input-error: #fca5a5;
    --input-error-bg: rgba(220,38,38,0.15);
}

.scheme-primary-bold {
    --input-bg: rgba(255,255,255,0.12);
    --input-border: rgba(255,255,255,0.25);
    --input-text: #ffffff;
    --input-placeholder: rgba(255,255,255,0.5);
    --input-focus-ring: #ffffff;
    --input-focus-ring-alpha: rgba(255,255,255,0.3);
    --input-label: rgba(255,255,255,0.9);
    --input-help: rgba(255,255,255,0.7);
    --input-error: #fca5a5;
    --input-error-bg: rgba(220,38,38,0.2);
}


/* ----- Group 5: Link ----- */
/* 4 vars per scheme */

.scheme-default, .scheme-light, .scheme-primary, .scheme-surface {
    --link-color: var(--site-primary-color, #3b82f6);
    --link-hover: var(--site-primary-color, #3b82f6);
    --link-underline: currentColor;
    --link-visited: var(--site-primary-color, #3b82f6);
}

.scheme-dark {
    --link-color: #93c5fd;
    --link-hover: #bfdbfe;
    --link-underline: currentColor;
    --link-visited: #a5b4fc;
}

.scheme-primary-bold {
    --link-color: #ffffff;
    --link-hover: rgba(255,255,255,0.85);
    --link-underline: rgba(255,255,255,0.5);
    --link-visited: rgba(255,255,255,0.9);
}


/* ----- Group 9: Stat (for about.html stat numbers and labels) ----- */
.scheme-default, .scheme-light, .scheme-primary, .scheme-surface {
    --stat-value: var(--site-primary-color, #3b82f6);
    --stat-label: #6b7280;
}
.scheme-dark {
    --stat-value: var(--site-tertiary-color, #8b5cf6);
    --stat-label: #9ca3af;
}
.scheme-primary-bold {
    --stat-value: #ffffff;
    --stat-label: rgba(255,255,255,0.8);
}
.ssb-stat-value {
    /* Large metrics use the heading font (brand: big numbers = Poppins, not body) —
       --site-heading-font is emitted into theme_css on every render surface; falls back
       to the inherited body font if a site's theme_css predates the var. */
    font-family: var(--site-heading-font, inherit);
    color: var(--stat-value, var(--section-eyebrow));
}
.ssb-stat-label {
    color: var(--stat-label, var(--section-text-muted));
}


/* =============================================================================
   FUTURE GROUPS (document variable names now to prevent naming conflicts)
   Implement when the component is standardised.
   =============================================================================

   Group 6 — Filter (pills, tabs, category selectors):
     --filter-bg, --filter-text, --filter-active-bg, --filter-active-text,
     --filter-border, --filter-hover-bg

   Group 7 — Quote (blockquotes, decorative quotation marks):
     --quote-text, --quote-mark-color, --quote-border, --quote-bg, --quote-cite

   Group 8 — Icon (decorative and functional icons):
     --icon-color, --icon-muted, --icon-bg, --icon-border

   Group 10 — Overlay (image overlays, gradient fades, lightbox):
     --overlay-bg, --overlay-text, --overlay-opacity, --overlay-border
*/


/* =============================================================================
   COMPONENT CLASSES
   Reference both --space-* (Layer 1) and --card-*, --btn-*, --input-* (Layer 2)
   NOTE: a comment must never contain an asterisk-then-slash (the comment terminator). A var
   glob written like "--card-*" joined by a slash to "--btn-*" embeds that terminator, closes
   the comment early, and the parser then drops the FOLLOWING rule — that is how .ssb-card lost
   its box-shadow (SSB-CARD-RESTING-SHADOW-MISSING). Comma-separate var globs.
   ============================================================================= */

/* ----- Card ----- */

.ssb-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--card-radius, 0.75rem);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
    padding: var(--card-padding, 1.5rem);
    transition: box-shadow 0.4s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
    overflow: hidden;
}
.ssb-card:hover {
    box-shadow: var(--card-hover-shadow, 0 4px 12px rgba(0,0,0,0.1));
}

.ssb-card-image {
    margin: calc(-1 * var(--card-padding, 1.5rem));
    margin-bottom: var(--space-md, 1rem);
    overflow: hidden;
}
.ssb-card-image img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
}
.ssb-card-image:first-child {
    margin-bottom: var(--space-md, 1rem);
    border-radius: var(--card-radius, 0.75rem) var(--card-radius, 0.75rem) 0 0;
}

.ssb-card-body {
    padding: var(--card-padding, 1.5rem);
}

.ssb-card-title {
    color: var(--card-heading, #111827);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: var(--space-sm, 0.5rem);
}

.ssb-card-text {
    color: var(--card-text, #4b5563);
}

.ssb-card-meta-text {
    color: var(--card-text-muted, #9ca3af);
    font-size: 0.875rem;
}

.ssb-card-link {
    color: var(--card-link, var(--site-primary-color, #3b82f6));
    text-decoration: none;
}
.ssb-card-link:hover {
    text-decoration: underline;
}

.ssb-card-image-only {
    background: var(--card-bg, #ffffff);
    border-radius: var(--card-radius, 0.75rem);
    overflow: hidden;
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
}

.ssb-card-quote {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--card-radius, 0.75rem);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
    padding: var(--card-padding, 1.5rem);
    transition: box-shadow 0.4s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-card-quote:hover {
    box-shadow: var(--card-hover-shadow, 0 4px 12px rgba(0,0,0,0.1));
}

.ssb-card-horizontal {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: var(--card-radius, 0.75rem);
    box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
    padding: var(--card-padding, 1.5rem);
    overflow: hidden;
}
@media (min-width: 768px) {
    .ssb-card-horizontal {
        flex-direction: row;
        align-items: center;
        gap: var(--space-lg, 1.5rem);
    }
}

/* Badge */
.ssb-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--card-badge-bg, #f3f4f6);
    color: var(--card-badge-text, #374151);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}


/* ----- Button ----- */

.ssb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y, 1rem) var(--btn-padding-x, 1.5rem);
    font-family: var(--font-accent, inherit);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--btn-radius, 0.5rem);
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    /* Site Mood (SE-063): real press/hover physics on the premium easing (was lazy opacity:0.9).
       Literal fallback so the easing holds in preview/editor surfaces without .ssb-style-base yet. */
    transition:
        transform 0.4s var(--ease-premium, cubic-bezier(.32, .72, 0, 1)),
        box-shadow 0.4s var(--ease-premium, cubic-bezier(.32, .72, 0, 1)),
        background-color 0.4s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.25);
}
.ssb-btn:active { transform: scale(0.98); }
.ssb-btn:focus-visible {
    outline: 2px solid var(--site-primary-color, #3b82f6);
    outline-offset: 2px;
}

/* button-in-button trailing icon — nested circular wrapper, kinetic on hover */
.ssb-btn-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.6rem;
    border-radius: 9999px;
    /* Scheme-aware: tint from the button's OWN text colour so the wrapper stays
       visible on every scheme/Mood — white text -> white tint (on coloured buttons),
       dark text -> dark tint (on white/outline buttons). Was a hardcoded
       rgba(255,255,255,0.15) that vanished on light schemes + white buttons. */
    background: color-mix(in srgb, currentColor 18%, transparent);
    transition: transform 0.4s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-btn:hover .ssb-btn-ic { transform: translate(3px, -1px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .ssb-btn,
    .ssb-btn:hover,
    .ssb-btn:active,
    .ssb-btn:hover .ssb-btn-ic { transform: none; transition: none; }
}

/* Carousel motion (works + gallery sliders). Track slide is Alpine-driven via
   inline transform; the media gets a subtle scale-on-focus. Both gated under
   reduced-motion (the carousels previously had NO reduced-motion gate). */
.ssb-carousel-media {
    transition: transform 0.7s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-carousel-media:hover { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
    .ssb-carousel-track { transition: none !important; }
    .ssb-carousel-media,
    .ssb-carousel-media:hover { transition: none !important; transform: none !important; }
}

/* Hero cinematic rise (subtle & premium). The hero H1 is NEVER given this class —
   it's the LCP element and must paint immediately. Only subheading + CTA rise, on
   load (above the fold, no observer needed). Initial-hidden state is scoped to
   html.js so no-JS / no-CSS renders fully visible (SEO-safe, same as ssb-reveal).
   Stagger via per-element --rise-delay. Reduced-motion shows everything instantly. */
.js .ssb-hero-rise {
    opacity: 0;
    transform: translateY(12px);
    animation: ssb-hero-rise 0.7s var(--ease-premium, cubic-bezier(.32, .72, 0, 1)) forwards;
    animation-delay: var(--rise-delay, 0.08s);
}
@keyframes ssb-hero-rise {
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .js .ssb-hero-rise { opacity: 1; transform: none; animation: none; }
}

.ssb-btn-sm {
    padding: var(--btn-padding-y-sm, 0.5rem) var(--btn-padding-x-sm, 1rem);
    font-size: 0.875rem;
}
.ssb-btn-lg {
    padding: var(--btn-padding-y-lg, 1rem) var(--btn-padding-x-lg, 2.5rem);
    font-size: 1.125rem;
}

/* Primary solid */
.ssb-btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
}
.ssb-btn-primary:hover { background-color: var(--btn-primary-hover-bg); }

/* Primary outline */
.ssb-btn-primary-outline {
    background-color: var(--btn-primary-outline-bg, transparent);
    color: var(--btn-primary-outline-text);
    border-color: var(--btn-primary-outline-border);
}
.ssb-btn-primary-outline:hover { background-color: var(--btn-primary-outline-hover-bg); }

/* Secondary solid */
.ssb-btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}
.ssb-btn-secondary:hover { background-color: var(--btn-secondary-hover-bg); }

/* Secondary outline */
.ssb-btn-secondary-outline {
    background-color: var(--btn-secondary-outline-bg, transparent);
    color: var(--btn-secondary-outline-text);
    border-color: var(--btn-secondary-outline-border);
}
.ssb-btn-secondary-outline:hover { background-color: var(--btn-secondary-outline-hover-bg); }

/* Accent solid */
.ssb-btn-accent {
    background-color: var(--btn-accent-bg);
    color: var(--btn-accent-text);
    border-color: var(--btn-accent-border);
}
.ssb-btn-accent:hover { background-color: var(--btn-accent-hover-bg); }

/* Accent outline */
.ssb-btn-accent-outline {
    background-color: var(--btn-accent-outline-bg, transparent);
    color: var(--btn-accent-outline-text);
    border-color: var(--btn-accent-outline-border);
}
.ssb-btn-accent-outline:hover { background-color: var(--btn-accent-outline-hover-bg); }


/* ----- Site-default button treatment (SE-062 M1) -----
   `SimpleSite.default_button_treatment` → a body scope class (set in public/base.html)
   that flips the DEFAULT-solid button classes to outline / ghost. Reuses the
   scheme-aware --btn-*-outline-* vars so contrast stays correct on every scheme
   (dark / primary-bold invert the outline text/border to white automatically).
   Explicit per-button `.ssb-btn-*-outline` classes are a different selector and
   are left untouched — a section author's choice still wins. `solid` = no rule
   (the base classes already render solid). */
.ssb-treatment-outline .ssb-btn-primary {
    background-color: var(--btn-primary-outline-bg, transparent);
    color: var(--btn-primary-outline-text);
    border-color: var(--btn-primary-outline-border);
}
.ssb-treatment-outline .ssb-btn-primary:hover { background-color: var(--btn-primary-outline-hover-bg); }
.ssb-treatment-outline .ssb-btn-secondary {
    background-color: var(--btn-secondary-outline-bg, transparent);
    color: var(--btn-secondary-outline-text);
    border-color: var(--btn-secondary-outline-border);
}
.ssb-treatment-outline .ssb-btn-secondary:hover { background-color: var(--btn-secondary-outline-hover-bg); }
.ssb-treatment-outline .ssb-btn-accent {
    background-color: var(--btn-accent-outline-bg, transparent);
    color: var(--btn-accent-outline-text);
    border-color: var(--btn-accent-outline-border);
}
.ssb-treatment-outline .ssb-btn-accent:hover { background-color: var(--btn-accent-outline-hover-bg); }

/* Ghost = outline ink, no visible border, subtle neutral hover. */
.ssb-treatment-ghost .ssb-btn-primary,
.ssb-treatment-ghost .ssb-btn-secondary,
.ssb-treatment-ghost .ssb-btn-accent {
    background-color: transparent;
    border-color: transparent;
}
.ssb-treatment-ghost .ssb-btn-primary { color: var(--btn-primary-outline-text); }
.ssb-treatment-ghost .ssb-btn-secondary { color: var(--btn-secondary-outline-text); }
.ssb-treatment-ghost .ssb-btn-accent { color: var(--btn-accent-outline-text); }
.ssb-treatment-ghost .ssb-btn-primary:hover,
.ssb-treatment-ghost .ssb-btn-secondary:hover,
.ssb-treatment-ghost .ssb-btn-accent:hover {
    background-color: rgba(127, 127, 127, 0.10);
    opacity: 1;
}


/* ----- Input ----- */

.ssb-input {
    width: 100%;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    background-color: var(--input-bg, #ffffff);
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 0.5rem;
    color: var(--input-text, #111827);
    font-size: 1rem;
    transition: border-color 0.15s var(--ease-premium, cubic-bezier(.32, .72, 0, 1)), box-shadow 0.15s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-input::placeholder { color: var(--input-placeholder, #9ca3af); }
.ssb-input:focus {
    outline: none;
    border-color: var(--input-focus-ring, var(--site-primary-color, #3b82f6));
    box-shadow: 0 0 0 3px var(--input-focus-ring-alpha, rgba(59,130,246,0.2));
}

textarea.ssb-input { resize: vertical; }

.ssb-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--input-label, #374151);
    margin-bottom: var(--space-sm, 0.5rem);
}

.ssb-field-error {
    font-size: 0.875rem;
    color: var(--input-error, #dc2626);
    margin-top: var(--space-xs, 0.25rem);
}

.ssb-field-help {
    font-size: 0.75rem;
    color: var(--input-help, #6b7280);
    margin-top: var(--space-xs, 0.25rem);
}


/* ----- Prose ----- */

.ssb-prose {
    color: var(--section-text, #374151);
    line-height: 1.75;
}
.ssb-prose h2 {
    color: var(--section-heading, #111827);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.75em;
}
.ssb-prose h3 {
    color: var(--section-heading, #111827);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.ssb-prose p {
    margin-bottom: 1.25em;
}
.ssb-prose ul, .ssb-prose ol {
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}
.ssb-prose li {
    margin-bottom: 0.5em;
}
.ssb-prose blockquote {
    border-left: 4px solid var(--section-border, #e5e7eb);
    padding-left: 1em;
    font-style: italic;
    color: var(--section-subheading, #6b7280);
    margin: 1.5em 0;
}
.ssb-prose a {
    color: var(--link-color, var(--site-primary-color, #3b82f6));
    text-decoration: underline;
}
.ssb-prose a:hover {
    color: var(--link-hover);
}
.ssb-prose strong {
    color: var(--section-heading, #111827);
    font-weight: 600;
}


/* ----- Section Text ----- */

.ssb-section-heading {
    color: var(--section-heading, #111827);
}
.ssb-section-subheading {
    /* Deck under the title — heading font ties it to the heading (brand title block). */
    font-family: var(--site-heading-font, inherit);
    font-weight: 500;
    color: var(--section-subheading, #6b7280);
}
.ssb-section-lead {
    /* Intro lead paragraph — body font (it's prose), larger + the section text colour. */
    color: var(--section-text, #374151);
}
.ssb-section-eyebrow {
    color: var(--section-eyebrow, var(--site-primary-color, #3b82f6));
    /* Accent font when the team set one (SE-062); otherwise fall back to the HEADING
       font (QA-SSB-EYEBROW), then the inherited body font — so eyebrows stay visually
       distinct from body copy even when no accent font is chosen. */
    font-family: var(--font-accent, var(--site-heading-font, inherit));
}
.ssb-section-text {
    color: var(--section-text, #374151);
}
.ssb-section-text-muted {
    color: var(--section-text-muted, #9ca3af);
}


/* ----- Empty State ----- */

.ssb-empty-state {
    text-align: center;
    padding: var(--space-2xl, 4rem) var(--space-lg, 1.5rem);
}

.ssb-empty-state-text {
    color: var(--section-text-muted, #9ca3af);
    font-weight: 500;
}


/* ----- Interactive Form Elements (radio/checkbox option wrappers) ----- */

.ssb-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--space-md, 0.75rem);
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s var(--ease-premium, cubic-bezier(.32, .72, 0, 1)), background-color 0.15s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-option:hover {
    border-color: var(--input-focus-ring, var(--site-primary-color, #3b82f6));
    background-color: var(--input-focus-ring-alpha, rgba(59,130,246,0.05));
}

.ssb-option-text {
    color: var(--input-label, #374151);
}

.ssb-required-mark {
    color: var(--input-error, #dc2626);
}

.ssb-radio,
.ssb-checkbox {
    accent-color: var(--input-focus-ring, var(--site-primary-color, #3b82f6));
}

/* NPS / selection button */
.ssb-select-btn {
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--input-border, #d1d5db);
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--input-text, #111827);
    cursor: pointer;
    transition: border-color 0.15s var(--ease-premium, cubic-bezier(.32, .72, 0, 1)), background-color 0.15s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-select-btn:hover {
    border-color: var(--input-focus-ring, var(--site-primary-color, #3b82f6));
    background-color: var(--input-focus-ring-alpha, rgba(59,130,246,0.1));
}
.ssb-select-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-ring-alpha, rgba(59,130,246,0.2));
}
.ssb-select-btn.active {
    background-color: var(--btn-primary-bg, var(--site-primary-color, #3b82f6));
    color: var(--btn-primary-text, #ffffff);
    border-color: var(--btn-primary-border, var(--site-primary-color, #3b82f6));
}

/* Rating star (unselected) */
.ssb-rating-star {
    color: var(--input-border, #d1d5db);
    transition: color 0.15s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-rating-star:hover { color: #facc15; }
.ssb-rating-star:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-ring-alpha, rgba(59,130,246,0.2));
    border-radius: 0.25rem;
}

/* Ranking item number badge */
.ssb-rank-number {
    color: var(--card-text-muted, #9ca3af);
    background-color: var(--card-badge-bg, #f3f4f6);
}

/* =========================================================================
 * Phase 5 / #120 — Modular type-scale CSS-var consumption.
 *
 * When the `ssb_type_scale_active` waffle flag is on for a tenant, the
 * public render emits `data-ssb-type-scale-active="true"` on the <body>
 * element. The rules below scope under that attribute selector so they
 * only activate for canary tenants, with no specificity boost for flag-
 * off tenants (their hardcoded Tailwind heading utilities continue to
 * render unchanged).
 *
 * The fallback in each var() expression matches the legacy `--site-h*-size`
 * name emitted by the same builder so a partial flag-on / partial-old
 * deploy stays visually consistent.
 * ========================================================================= */
[data-ssb-type-scale-active="true"] h1 { font-size: var(--size-h1, var(--site-h1-size)); }
[data-ssb-type-scale-active="true"] h2 { font-size: var(--size-h2, var(--site-h2-size)); }
[data-ssb-type-scale-active="true"] h3 { font-size: var(--size-h3, var(--site-h3-size)); }
[data-ssb-type-scale-active="true"] h4 { font-size: var(--size-h4, var(--site-h4-size)); }
[data-ssb-type-scale-active="true"] h5 { font-size: var(--size-h5, var(--site-h5-size)); }
[data-ssb-type-scale-active="true"] h6 { font-size: var(--size-h6, var(--site-h6-size)); }


/* =============================================================================
   SITE MOOD PACKS   [SE-065, Phase 1b]
   Each pack = texture vars (--card-*) on a body class. Mood COLOUR is applied as DATA
   (the colour fields) by apply_mood_palette (SE-066) — the old per-pack --pack-* colour
   vars were dead CSS and have been removed (SSB-MOOD-COLOUR-VIA-PACK-CSS-IS-DEAD).
   Placed AFTER the .scheme-* definitions so the real .scheme-default block stays the
   first string match for the contract tests; cascade wins by specificity, not order.
   ============================================================================= */

/* ----- Editorial Luxury — warm paper, machined "bezel" cards, film-grain -----
   Bezel = box-shadow ring (0 0 0 6px), NOT a pseudo-element: .ssb-card has overflow:hidden
   which would clip an outset ::before; box-shadow paints outside the border-box regardless. */
.ssb-style-editorial {
    /* Colour applied as DATA via apply_mood_palette (SE-066); texture only here. */
    --card-radius: 1.6rem;
    --card-shadow: 0 0 0 8px rgba(110,53,81,0.09), inset 0 1px 0 rgba(255,255,255,0.92), 0 3px 10px -2px rgba(42,37,32,0.10), 0 32px 64px -18px rgba(42,37,32,0.22);
    --card-hover-shadow: 0 0 0 8px rgba(110,53,81,0.14), inset 0 1px 0 rgba(255,255,255,0.92), 0 40px 80px -22px rgba(110,53,81,0.34);
    --grain: 0.07;
}
.ssb-style-editorial .scheme-default {
    --section-text: #4a4038;
    /* Richer texture (P3): a whisper of warm plum from the top centre — deepens the paper feel
       under the grain without tinting the type. */
    background-image: radial-gradient(70rem 44rem at 50% -8%, rgba(110, 53, 81, 0.05), transparent 58%);
}
/* Bolder editorial display: tighter luxe tracking on headings (font-agnostic — works on the site's loaded heading font). */
.ssb-style-editorial .ssb-section-heading { letter-spacing: -0.018em; }
.ssb-style-editorial::after {
    content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: var(--grain, 0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----- Soft Structuralism — near-white, flat airy cards on ultra-soft diffused shadow ----- */
.ssb-style-soft {
    /* Colour applied as DATA via apply_mood_palette (SE-066); texture only here. */
    --card-radius: 1.75rem;
    /* Richer texture (P3): a more dramatic ultra-diffused float — wider, softer, with a deeper
       indigo bloom so cards feel like they hover above the near-white surface. */
    --card-shadow: 0 2px 8px -2px rgba(20,23,31,0.06), 0 30px 64px -16px rgba(20,23,31,0.14), 0 76px 130px -42px rgba(91,91,214,0.24);
    --card-hover-shadow: 0 10px 24px -4px rgba(20,23,31,0.10), 0 64px 120px -28px rgba(91,91,214,0.36);
}

/* ----- Ethereal Glass — OLED-dark mood, frosted-glass cards.
   Dark-by-default comes from DATA: picking Glass writes its dark palette to the colour fields via
   apply_mood_palette (SE-066) → --site-background-color is dark → the default scheme reads it. Body
   text/cards get dark-readable values via the compound override below. A customer-set background
   colour still wins (the colour-boundary decision). ----- */
.ssb-style-glass {
    /* Colour applied as DATA via apply_mood_palette (SE-066); texture only here. */
    --card-radius: 1.5rem;
    --card-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px -20px rgba(0,0,0,0.8), 0 0 44px -10px rgba(167,139,250,0.16);
    --card-hover-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 0 1px rgba(167,139,250,0.28), 0 36px 84px -24px rgba(167,139,250,0.5);
}
.ssb-style-glass .scheme-default {
    --section-text: #c8c8d0;
    --section-subheading: #a0a0ad;
    --section-text-muted: #8b8b97;
    --section-border: rgba(255,255,255,0.10);
    --section-divider: rgba(255,255,255,0.08);
    --card-bg: rgba(255,255,255,0.06);
    --card-border: rgba(255,255,255,0.16);
    --card-heading: #F4F4F6;
    --card-text: #c8c8d0;
    /* Atmospheric mesh glow (P3): violet from the top-right. Layers over the opaque inline
       background-color, so each section reads as depth not a flat panel. */
    background-image: radial-gradient(55rem 38rem at 82% -12%, rgba(167, 139, 250, 0.11), transparent 60%);
}
/* P3 depth rhythm (SE-067): the odd auto-stripe resolves to `scheme-dark` under Glass. Tune it
   to a subtly-ELEVATED near-black (vs the default slate #1f2937) so a multi-section page alternates
   #050505 ↔ #0e0e13 — OLED rhythm, never a light band. Card a touch brighter than the base stripe. */
.ssb-style-glass .scheme-dark {
    --section-bg: #0e0e13;
    --section-heading: #F4F4F6;
    --section-subheading: #a0a0ad;
    --section-text: #c8c8d0;
    --section-text-muted: #8b8b97;
    --section-border: rgba(255,255,255,0.10);
    --section-divider: rgba(255,255,255,0.08);
    --card-bg: rgba(255,255,255,0.08);
    --card-border: rgba(255,255,255,0.18);
    --card-heading: #F4F4F6;
    --card-text: #c8c8d0;
    /* Mesh glow mirrored to the top-LEFT (indigo) so the elevated stripe alternates with the
       base stripe's top-right violet — the rhythm reads as moving light, not stacked bands. */
    background-image: radial-gradient(55rem 38rem at 18% -12%, rgba(99, 102, 241, 0.12), transparent 60%);
}
.ssb-style-glass .ssb-card {
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

/* ----- Brutalist Bold [SE-067, Phase D] — stark white/black, heavy black hairlines, hard-edged
   cards on a solid offset "drop", oversized tight-tracked grotesk headings. A LIGHT mood (its
   palette is white-backed) so it is NOT in DARK_DESIGN_LANGUAGES — it keeps normal light
   auto-striping. ----- */
.ssb-style-brutalist {
    /* Colour applied as DATA via apply_mood_palette (SE-066); texture only here. */
    --card-radius: 0;                      /* hard rectangles — no squircle */
    --card-shadow: 5px 5px 0 0 #111111;    /* the brutalist solid offset (no blur) */
    --card-hover-shadow: 8px 8px 0 0 #111111;
}
.ssb-style-brutalist .ssb-card {
    border-width: 2px;
    border-color: #111111;                 /* heavy black hairline */
}
.ssb-style-brutalist .ssb-section-heading {
    letter-spacing: -0.02em;
    font-weight: 800;                      /* oversized, tight, heavy */
}
.ssb-style-brutalist .ssb-btn {
    border-radius: 0;                      /* hard-edged buttons regardless of button-shape */
}

/* ============================================================================
   Shared carousel (PS-4) — vanilla, no Alpine. Progressive enhancement:
   no-JS/pre-init = native horizontal scroll-snap (every slide reachable);
   .ssb-carousel--ready (set by ssb-carousel.js) = paged translateX slider.
   ============================================================================ */
.ssb-carousel { position: relative; }
.ssb-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ssb-carousel--ready .ssb-carousel__viewport { overflow: hidden; }
.ssb-carousel__track { display: flex; }
.ssb-carousel--ready .ssb-carousel__track {
  transition: transform 0.5s var(--ease-premium, cubic-bezier(.32,.72,0,1));
  will-change: transform;
}
.ssb-carousel__slide { flex: 0 0 100%; scroll-snap-align: start; }

/* Prev / next — scheme-aware (tint from the section's own text colour). */
.ssb-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--card-bg, rgba(255, 255, 255, 0.9));
  color: var(--card-heading, #111827);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--card-border, transparent);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.18s var(--ease-premium, cubic-bezier(.32,.72,0,1));
}
.ssb-carousel__btn:hover { transform: translateY(-50%) scale(1.06); }
.ssb-carousel__btn:active { transform: translateY(-50%) scale(0.96); }
.ssb-carousel__btn--prev { left: 0.75rem; }
.ssb-carousel__btn--next { right: 0.75rem; }
/* Buttons only matter once JS takes over (no-JS uses scroll). */
.ssb-carousel:not(.ssb-carousel--ready) .ssb-carousel__btn { display: none; }

.ssb-carousel__dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2rem;
}
.ssb-carousel__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: var(--section-border, #d1d5db);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background 0.18s var(--ease-premium, cubic-bezier(.32, .72, 0, 1)), transform 0.18s var(--ease-premium, cubic-bezier(.32, .72, 0, 1));
}
.ssb-carousel__dot.is-active {
  background: var(--site-primary-color, #0071ff);
  transform: scale(1.25);
}
.ssb-carousel:not(.ssb-carousel--ready) .ssb-carousel__dots { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ssb-carousel--ready .ssb-carousel__track { transition: none; }
  .ssb-carousel__btn { transition: none; }
}

/* Carousel a11y — visible keyboard focus on controls (PS-4). */
.ssb-carousel__btn:focus-visible,
.ssb-carousel__dot:focus-visible {
  outline: 2px solid var(--site-primary-color, #0071ff);
  outline-offset: 2px;
}

/* =========================================================================
   Foreground image masks (SE-080) — Design-tab image settings modal.
   Single source of truth for the choice list is
   constants.FOREGROUND_IMAGE_MASK_CHOICES; each non-"none" value has a rule
   here (gated by tests/test_foreground_masks.py). mask-size/-position are
   driven per-image by inline --fg-mask-size / --fg-mask-position vars.
   ========================================================================= */
.ssb-fg-mask {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: var(--fg-mask-size, contain);
    mask-size: var(--fg-mask-size, contain);
    -webkit-mask-position: var(--fg-mask-position, center);
    mask-position: var(--fg-mask-position, center);
}
.ssb-fg-mask-squircle {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 1 C84 1 99 16 99 50 C99 84 84 99 50 99 C16 99 1 84 1 50 C1 16 16 1 50 1 Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 1 C84 1 99 16 99 50 C99 84 84 99 50 99 C16 99 1 84 1 50 C1 16 16 1 50 1 Z" fill="black"/></svg>');
}
.ssb-fg-mask-blob {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M52 4 C72 4 90 18 94 38 C98 58 88 78 70 90 C52 102 28 98 14 84 C0 70 2 44 14 26 C24 12 36 4 52 4 Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M52 4 C72 4 90 18 94 38 C98 58 88 78 70 90 C52 102 28 98 14 84 C0 70 2 44 14 26 C24 12 36 4 52 4 Z" fill="black"/></svg>');
}
.ssb-fg-mask-hexagon {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,1 93,25 93,75 50,99 7,75 7,25" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,1 93,25 93,75 50,99 7,75 7,25" fill="black"/></svg>');
}
.ssb-fg-mask-diamond {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,1 99,50 50,99 1,50" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,1 99,50 50,99 1,50" fill="black"/></svg>');
}
.ssb-fg-mask-arch {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M2 99 L2 50 A48 48 0 0 1 98 50 L98 99 Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M2 99 L2 50 A48 48 0 0 1 98 50 L98 99 Z" fill="black"/></svg>');
}