/* main.bundle.css — built by bin/build-css.php from main.css; do not edit. */

/* ---- tokens.css ---- */
/*
 * Design tokens — PLAN.md §4a/§4c.
 *
 * Breakpoints (documented here as the single source of truth; CSS custom
 * properties can't be used inside @media conditions, so every other file
 * references these exact px values in comments/media queries instead of
 * inventing its own):
 *   bp-sm   : < 480px    small phones (base / mobile-first default, no query needed)
 *   bp-md   : >= 480px   large phones
 *   bp-lg   : >= 768px   tablets
 *   bp-xl   : >= 1024px  small desktop/laptop
 *   bp-xxl  : >= 1440px  large desktop
 */

/* Dark is the no-attribute, no-JS default — see §4e. */
:root[data-theme="dark"],
:root:not([data-theme]) {
    color-scheme: dark;

    /* ---- Color: dark surfaces ---- */
    --color-bg: #0a0a0c;
    --color-bg-alt: #0d0d10;
    --color-surface-1: #121214;
    --color-surface-2: #18181c;
    --color-surface-3: #202024;
    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    /* ---- Color: text ---- */
    --color-text: #f4f3f6;
    --color-text-dim: #b9b8c2;
    --color-text-faint: #8f8e99; /* v3.61: 4.5:1+ on dark surfaces (was #7d7c87, 4.3:1) */

    /* ---- Color: accent (magenta/violet, per §4a) ---- */
    --color-accent: #ff6633;
    --color-accent-2: #d9468f;
    --color-accent-gradient: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    --color-accent-text: #ffffff;
    --color-accent-soft: rgba(255, 102, 51, 0.14);
    --color-accent-glow: rgba(255, 102, 51, 0.4);
    --color-accent-2-glow: rgba(217, 70, 143, 0.35);
    --color-pop-lime: #dbff52;
    --color-pop-orange: #ff6633;
    --color-pop-pink: #ee5aa7;
    --color-on-pop: #11110f;

    /* ---- Color: semantic ---- */
    --color-success: #35d399;
    --color-danger: #ef5b6f;
    --color-warning: #f2b84b;

    /* ---- Shadow / glow (dark-tuned: strong black shadows + saturated accent glow) ---- */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
    --shadow-glow-accent: 0 0 0 1px var(--color-border), 0 18px 48px -12px var(--color-accent-glow);
    --shadow-glow-accent-lg: 0 0 0 1px var(--color-border-strong), 0 28px 72px -16px var(--color-accent-glow);

    /* Directory map pin glow blend — "screen" brightens overlapping glows
       against the dark canvas for a real heatmap look; light theme falls
       back to "normal" (screen against an off-white bg would just wash out
       to white instead of glowing). */
    --map-glow-blend: screen;
}

/*
 * Theme: light (§4e, resolved 2026-09-09), explicit opt-in only (via
 * data-theme-toggle or localStorage). Its orange/pink/lime editorial
 * accents and shadows are tuned independently for warm off-white surfaces.
 */
:root[data-theme="light"] {
    color-scheme: light;

    /* ---- Color: surfaces (white/off-white) ---- */
    --color-bg: #f6f5ef;
    --color-bg-alt: #efeee7;
    --color-surface-1: #fffefa;
    --color-surface-2: #ebeae3;
    --color-surface-3: #dfded6;
    --color-border: rgba(20, 19, 26, 0.09);
    --color-border-strong: rgba(20, 19, 26, 0.16);

    /* ---- Color: text (near-black, not pure #000 — matches dark's near-black-not-pure symmetry) ---- */
    --color-text: #11110f;
    --color-text-dim: #45443f;
    --color-text-faint: #66645d;

    /* ---- Color: accent (same magenta/violet hues, deepened slightly for AA contrast on white) ---- */
    --color-accent: #b83b12;
    --color-accent-2: #b82f72;
    --color-accent-gradient: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    --color-accent-text: #ffffff;
    --color-accent-soft: rgba(217, 72, 23, 0.09);
    --color-accent-glow: rgba(217, 72, 23, 0.2);
    --color-accent-2-glow: rgba(184, 47, 114, 0.16);
    --color-pop-lime: #dfff55;
    --color-pop-orange: #ff6633;
    --color-pop-pink: #ee5aa7;
    --color-on-pop: #11110f;

    /* ---- Color: semantic (same hues, deepened for AA contrast on white) ---- */
    --color-success: #14704e;
    --color-danger: #d43a50;
    --color-warning: #b8791f;

    /* ---- Shadow / glow (light-tuned: soft neutral shadows, subdued accent glow) ---- */
    --shadow-sm: 0 2px 8px rgba(20, 19, 26, 0.06);
    --shadow-md: 0 10px 24px rgba(20, 19, 26, 0.08);
    --shadow-lg: 0 20px 48px rgba(20, 19, 26, 0.10);
    --shadow-glow-accent: 0 0 0 1px var(--color-border), 0 14px 36px -14px var(--color-accent-glow);
    --shadow-glow-accent-lg: 0 0 0 1px var(--color-border-strong), 0 22px 56px -16px var(--color-accent-glow);
}

:root {
    /* ---- Spacing scale ---- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 6.5rem;

    /* ---- Radius scale ---- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Shadow/glow tokens are theme-specific — defined per-theme above, not here. */

    /* ---- Typography ---- */
    --font-sans: "Arial Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Self-hosted display serif (Fraunces, SIL OFL — public/assets/fonts/fraunces/),
       headline-scale elements only, never body text. System-serif fallback
       covers the brief pre-load window. See fonts.css for the @font-face. */
    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

    --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-md: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
    --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
    --fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
    --fs-2xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
    --fs-hero: clamp(3.1rem, 1.7rem + 6vw, 7.8rem);

    --lh-tight: 1.08;
    --lh-snug: 1.28;
    --lh-normal: 1.6;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 160ms;
    --duration-base: 320ms;
    --duration-slow: 600ms;
    --duration-hero: 900ms;

    /* ---- Layout ---- */
    /* rem, so big screens scale it with everything else (base.css, v3.60f). */
    --container-max: 82.5rem;
    --nav-height: 4.5rem;
    --touch-target-min: 2.75rem; /* 44px; rem so big screens scale it (v3.60f) */

    /* ---- z-index scale ---- */
    --z-nav: 100;
    --z-overlay: 500;
    --z-age-gate: 9999;
}

/* prefers-reduced-motion is also handled globally in base.css; token-level
   duration overrides live there so every component picks them up for free. */

/* ---- fonts.css ---- */
/* Self-hosted display serif — PLAN.md branding pass Part E. Fraunces
   (SIL Open Font License, license text alongside the font file at
   public/assets/fonts/fraunces/OFL.txt). No CDN — vendored locally per
   PLAN.md §2's hard "self-host only" constraint. Applied surgically to
   headline-scale elements only (.hero-title, .display-title, .section-title);
   body text, nav, buttons, forms stay on --font-sans. */

@font-face {
    font-family: "Fraunces";
    src: url("/assets/fonts/fraunces/fraunces-variable-latin.woff2") format("woff2-variations"),
         url("/assets/fonts/fraunces/fraunces-variable-latin.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

.hero-title,
.display-title,
.section-title {
    font-family: var(--font-serif);
}

/* ---- base.css ---- */
/* Reset + typography defaults + global motion accessibility — PLAN.md §4a/§4b/§4d. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Big screens (v3.60f): above 1680px the whole design scales with the
   screen — like the OS's display scaling — so a 1440p or 4K monitor at 100%
   shows the same layout bigger instead of a small column in a sea of
   background. Sizes are rem-based, so this one value drives them all.
   1680 / 105 = 16px; never below the visitor's own default font size,
   never above 2.5×. Breakpoints stay in px, so layouts don't change. */
@media (min-width: 1680px) {
    html {
        font-size: min(max(100%, calc(100vw / 105)), 250%);
    }

    /* Icons and the logo are sized by width="" attributes (px); give them
       the same size in rem so they grow with the rest (maps excluded). */
    :where(svg, img)[width="12"]:where(:not(.leaflet-container *)) { width: 0.75rem; height: auto; }
    :where(svg, img)[width="13"]:where(:not(.leaflet-container *)) { width: 0.8125rem; height: auto; }
    :where(svg, img)[width="14"]:where(:not(.leaflet-container *)) { width: 0.875rem; height: auto; }
    :where(svg, img)[width="15"]:where(:not(.leaflet-container *)) { width: 0.9375rem; height: auto; }
    :where(svg, img)[width="16"]:where(:not(.leaflet-container *)) { width: 1rem; height: auto; }
    :where(svg, img)[width="18"]:where(:not(.leaflet-container *)) { width: 1.125rem; height: auto; }
    :where(svg, img)[width="20"]:where(:not(.leaflet-container *)) { width: 1.25rem; height: auto; }
    :where(svg, img)[width="22"]:where(:not(.leaflet-container *)) { width: 1.375rem; height: auto; }
    :where(svg, img)[width="24"]:where(:not(.leaflet-container *)) { width: 1.5rem; height: auto; }
    :where(svg, img)[width="28"]:where(:not(.leaflet-container *)) { width: 1.75rem; height: auto; }
    :where(svg, img)[width="32"]:where(:not(.leaflet-container *)) { width: 2rem; height: auto; }
    :where(svg, img)[width="34"]:where(:not(.leaflet-container *)) { width: 2.125rem; height: auto; }
    :where(svg, img)[width="40"]:where(:not(.leaflet-container *)) { width: 2.5rem; height: auto; }
    :where(svg, img)[width="48"]:where(:not(.leaflet-container *)) { width: 3rem; height: auto; }
    :where(svg, img)[width="64"]:where(:not(.leaflet-container *)) { width: 4rem; height: auto; }
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Smooth the light/dark theme swap (§4e) — reduced-motion users get an
   instant swap instead (the global reduced-motion block further down also
   forces this to near-zero, this is belt-and-suspenders for the specific
   theme-swap case since it's the one transition triggered by an explicit
   user action rather than a decorative entrance). */
@media (prefers-reduced-motion: no-preference) {
    body {
        transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
    }
}

/* Ambient background texture: faint grain + a slow drifting glow, CSS-only
   (§4b #13). Fixed, decorative, never intercepts pointer events. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(60rem 40rem at 15% -10%, var(--color-accent-soft), transparent 60%),
        radial-gradient(50rem 35rem at 110% 10%, rgba(124, 58, 237, 0.12), transparent 60%);
    background-repeat: no-repeat;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-sm);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
}

p {
    margin: 0 0 var(--space-sm);
    color: var(--color-text-dim);
}

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

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: inherit;
    color: inherit;
}

input, textarea, select, button {
    font: inherit;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-sm);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-lg);
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Casual save/drag deterrent for real content media (image-protect.js blocks
   the actual context-menu/dragstart events; this covers the CSS-only paths
   it can't reach — text/long-press selection). Never a real block on
   screenshots or a determined user — see image-protect.js's own comment. */
.protected-media {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.skip-link {
    position: absolute;
    top: -3rem;
    left: var(--space-sm);
    z-index: 10000;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
    top: var(--space-sm);
}

/*
 * §4d hard rule: real content must be present and visible in the raw
 * server-rendered HTML unconditionally. `.reveal` therefore starts fully
 * visible/settled — this is the no-JS-safe, crawler-safe base state.
 * scroll-reveal.js only ever ADDS `.reveal-pending` after it has confirmed
 * it initialized (IntersectionObserver support etc.); it never starts
 * content hidden and waits for JS to show it.
 */
.reveal {
    opacity: 1;
    transform: none;
}

.reveal-pending {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
    will-change: opacity, transform;
}

.reveal-pending.is-visible {
    opacity: 1;
    transform: none;
}

/* Custom cursor dot + trailing glow (§4b #5) — only ever created by
   cursor-fx.js after it has confirmed (hover: hover) and (pointer: fine),
   so gating this CSS behind the same media query is a belt-and-braces
   match to the JS gate, not the mechanism that hides it on touch. */
@media (hover: hover) and (pointer: fine) {
    .has-custom-cursor,
    .has-custom-cursor a,
    .has-custom-cursor button {
        cursor: none;
    }

    .cursor-dot,
    .cursor-glow {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10001;
        pointer-events: none;
        border-radius: 50%;
        transition: width var(--duration-fast) var(--ease-out),
                    height var(--duration-fast) var(--ease-out),
                    opacity var(--duration-fast) var(--ease-out);
    }

    .cursor-dot {
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        background: var(--color-accent);
    }

    .cursor-dot.is-active {
        width: 14px;
        height: 14px;
        margin: -7px 0 0 -7px;
    }

    .cursor-glow {
        width: 34px;
        height: 34px;
        margin: -17px 0 0 -17px;
        background: radial-gradient(circle, var(--color-accent-glow), transparent 70%);
        opacity: 0.7;
    }

    .cursor-glow.is-active {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
        opacity: 0.9;
    }
}

/* Page-to-page transition overlay (§4b #19) — created by page-transitions.js
   only; a pure cosmetic layer, never blocks or delays the real navigation
   it's layered on top of (see that file's fallback rules). */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: var(--color-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms var(--ease-in-out);
}

.page-transition-overlay.is-exiting {
    opacity: 1;
}

/* Global reduced-motion gate (§2/§4b hard constraint) — collapses every
   animation/transition to effectively instant, site-wide, in one place. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-pending {
        opacity: 1;
        transform: none;
    }
}

/* ---- art-lines.css ---- */
/* Global editorial linework: one fixed composition rather than a tiled
   pattern. It sits behind every shell and uses theme tokens automatically. */
html { background:var(--color-bg); }
body { isolation:isolate; background:transparent; }
body::before { z-index:-2; }

.site-art-lines {
    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
    color:color-mix(in srgb,var(--color-text) 24%,transparent);
}

.site-art-lines svg {
    width:100%;
    height:100%;
    min-width:72rem;
    min-height:46rem;
    transform:translateX(-1.5%);
}

.site-art-line {
    fill:none;
    stroke:currentColor;
    stroke-width:1.15;
    vector-effect:non-scaling-stroke;
}

.site-art-line-soft { opacity:.52; }
.site-art-line-accent { stroke:color-mix(in srgb,var(--color-pop-pink) 48%,var(--color-text)); opacity:.55; }
.site-art-figure-line { fill:none; stroke:color-mix(in srgb,var(--color-text) 42%,transparent); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.site-art-figure-soft { opacity:.58; }
.site-art-figure-head { opacity:.78; }
.site-art-figure-accent { stroke:color-mix(in srgb,var(--color-pop-pink) 68%,var(--color-text)); opacity:.8; }
.site-art-figure-intimate { stroke:color-mix(in srgb,var(--color-pop-orange) 58%,var(--color-text)); opacity:.76; }
.site-art-point-halo { fill:var(--color-pop-orange); opacity:.08; }
.site-art-point-orange { fill:var(--color-pop-orange); }
.site-art-point-pink { fill:var(--color-pop-pink); }
.site-art-point-lime { fill:var(--color-pop-lime); }
.site-art-point { filter:drop-shadow(0 0 7px currentColor); }

@media (prefers-reduced-motion:no-preference) {
    .site-art-drift-a { animation:site-art-drift-a 32s ease-in-out infinite alternate; }
    .site-art-drift-b { animation:site-art-drift-b 38s ease-in-out infinite alternate; }
    .site-art-drift-c { animation:site-art-drift-c 44s ease-in-out infinite alternate; }
    .site-art-points { animation:site-art-points 9s ease-in-out infinite alternate; }
}

@keyframes site-art-drift-a { to { transform:translate3d(12px,-9px,0); } }
@keyframes site-art-drift-b { to { transform:translate3d(-10px,12px,0); } }
@keyframes site-art-drift-c { to { transform:translate3d(-7px,-12px,0); } }
@keyframes site-art-points { to { opacity:.72; } }

@media (max-width:700px) {
    .site-art-lines { opacity:.72; }
    .site-art-lines svg { min-width:58rem; transform:translateX(-28%); }
}

@media (prefers-reduced-motion:reduce) {
    .site-art-drift,.site-art-points { animation:none; }
}

/* ---- buttons.css ---- */
/* Pill buttons — PLAN.md §4a/§4b #6. Mobile-first: base styles are the small-screen styles. */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-height: var(--touch-target-min);
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out);
}

.btn:active {
    transform: scale(0.96);
}

/* Liquid fill: a pseudo-element that expands from center on hover, pure CSS. */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    transform: scale(0);
    transition: transform var(--duration-base) var(--ease-out);
}

/* Ripple: a radial pulse positioned at the click point via --ripple-x/--ripple-y,
   toggled by main.js adding/removing .is-rippling — pure CSS animation, no layout cost. */
.btn::after {
    content: "";
    position: absolute;
    left: var(--ripple-x, 50%);
    top: var(--ripple-y, 50%);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
}

.btn.is-rippling::after {
    animation: btn-ripple 560ms var(--ease-out);
}

@keyframes btn-ripple {
    from {
        opacity: 0.35;
        transform: scale(0);
    }
    to {
        opacity: 0;
        transform: scale(28);
    }
}

.btn-primary {
    background: var(--color-accent-gradient);
    color: var(--color-accent-text);
    box-shadow: var(--shadow-glow-accent);
}

.btn-primary:hover {
    box-shadow: var(--shadow-glow-accent-lg);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn-ghost::before {
    background: var(--color-surface-2);
}

.btn-ghost:hover::before {
    transform: scale(1);
}

.btn-ghost:hover {
    border-color: var(--color-accent);
}

.btn-icon {
    transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover .btn-icon {
    transform: translateX(3px) rotate(6deg);
}

.btn[disabled],
.btn.is-loading {
    cursor: default;
    opacity: 0.75;
    pointer-events: none;
}

/* Async loading -> success state (§4b #6): spinner while .is-loading, checkmark
   while .is-success — both toggled by small JS on form submit handlers. */
.btn-spinner,
.btn-check {
    display: none;
    width: 1em;
    height: 1em;
    flex: none;
}

.btn.is-loading .btn-label {
    opacity: 0.6;
}

.btn.is-loading .btn-spinner {
    display: inline-block;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 700ms linear infinite;
}

.btn.is-success .btn-check {
    display: inline-block;
}

.btn.is-success .btn-spinner {
    display: none;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

.btn-block {
    width: 100%;
}

.btn-sm {
    min-height: 38px;
    padding: 0.55rem 1.1rem;
    font-size: var(--fs-xs);
}

@media (min-width: 768px) {
    .btn {
        padding: 0.9rem 1.85rem;
    }
}

/* Destructive actions (account deletion) — same shape as btn-ghost, red accents. */
.btn-danger {
    border-color: rgba(220, 76, 100, 0.45);
    color: #e4738c;
}
.btn-danger:hover {
    border-color: rgba(220, 76, 100, 0.8);
    color: #f09cae;
}

/* Light theme: the pink above is tuned for dark surfaces (2.9:1 on off-white). */
:root[data-theme="light"] .btn-danger {
    border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
    color: var(--color-danger);
}
:root[data-theme="light"] .btn-danger:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ---- cards.css ---- */
/* Rounded glow-shadow cards — PLAN.md §4a/§4b #8. Mobile-first. */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

/* Gradient border animation on hover: an inset pseudo-border that fades in,
   cheaper than animating `border` itself (which isn't a compositor-friendly property). */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--color-accent-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    pointer-events: none;
}

.card-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-surface-2);
}

.card-media-placeholder { display:block; width:100%; height:100%; background:linear-gradient(145deg, var(--color-surface-3), var(--color-accent-soft)); }
.card-status { position:absolute; left:var(--space-xs); bottom:var(--space-xs); padding:.35rem .65rem; border-radius:var(--radius-pill); background:var(--color-pop-lime); color:#111; font-size:var(--fs-xs); font-weight:700; }

/* Floating corner pills — same flat-pop-color treatment as .card-status,
   positioned at the opposite corners for category/highlight badges. */
.card-pill-tl,
.card-pill-tr {
    position: absolute;
    top: var(--space-xs);
    padding: .35rem .65rem;
    border-radius: var(--radius-pill);
    color: #111;
    font-size: var(--fs-xs);
    font-weight: 700;
    z-index: 2;
}

.card-pill-tl { left: var(--space-xs); background: var(--color-pop-orange); }
.card-pill-tr { right: var(--space-xs); background: var(--color-pop-pink); }

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out);
    filter: grayscale(15%);
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-md);
}

.card-title {
    margin: 0;
    font-size: var(--fs-md);
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    font-size: var(--fs-xs);
    color: var(--color-text-faint);
}

.card-tagline {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-rate {
    margin-top: auto;
    padding-top: var(--space-2xs);
    font-weight: 600;
    color: var(--color-text);
}

.card-rate .accent-text {
    color: var(--color-accent);
}

/* Content-creator badge — shown in the same slot the hourly rate normally
   occupies, either standalone (subscription-only, no in-person rate) or
   inline beside the rate (hybrid profiles offering both). */
.card-tag {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent-gradient);
    color: var(--color-accent-text);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.card-tag-inline {
    margin-left: var(--space-2xs);
    padding: .2rem .55rem;
    font-size: 0.68rem;
    vertical-align: middle;
}

/* Hover/focus elevation + spotlight-follows-cursor — desktop-pointer only,
   §4b hard gate; card-tilt.js sets --spot-x/--spot-y and toggles this class
   only after confirming `matchMedia('(hover: hover) and (pointer: fine)')`. */
@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .card:focus-within {
        transform: translateY(-6px);
        box-shadow: var(--shadow-glow-accent-lg);
        border-color: var(--color-border-strong);
    }

    .card:hover::after,
    .card:focus-within::after {
        opacity: 1;
    }

    .card:hover .card-media img,
    .card:focus-within .card-media img {
        transform: scale(1.06);
        filter: grayscale(0%);
    }

    .card.has-spotlight::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--duration-base) var(--ease-out);
        background: radial-gradient(220px 220px at var(--spot-x, 50%) var(--spot-y, 50%), var(--color-accent-glow), transparent 70%);
    }

    .card.has-spotlight:hover::before {
        opacity: 0.5;
    }

    /* Lighter 3D tilt variant applied by card-tilt.js (rotateX/Y within a small
       range) — browse grid uses .card-tilt-light (smaller range, no spotlight)
       per §4b #8; the hero showcase uses the fuller hero-showcase.css tilt. */
    .card-tilt,
    .card-tilt-light {
        transform-style: preserve-3d;
        perspective: 900px;
    }
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--space-md);
}

@media (min-width: 480px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-lg);
    }
}

@media (min-width: 1440px) {
    .card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Sequential fade-in as cards enter viewport is driven by .reveal /
   .reveal-pending (scroll-reveal.js) with a small per-index stagger set
   inline via --reveal-delay from the view template. */
.card.reveal-pending {
    transition-delay: var(--reveal-delay, 0ms);
}

/* ---- forms.css ---- */
/* Dark pill-shaped form fields, filter chips — PLAN.md §4a/§4c. Mobile-first. */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin-bottom: var(--space-sm);
}

.field-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text-dim);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: var(--touch-target-min);
    padding: 0.75rem 1.1rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out);
}

.textarea {
    border-radius: var(--radius-md);
    min-height: 8rem;
    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-text-faint);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--color-border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-surface-3);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-dim) 50%),
                       linear-gradient(135deg, var(--color-text-dim) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

/* File inputs default to the browser's raw OS button + "No file chosen" text,
   which looks broken next to every other pill-styled control on the site.
   ::file-selector-button is CSS-only (no markup/JS change, so every existing
   form action/name attribute stays untouched) and has full modern-browser
   support. */
input[type="file"] {
    width: 100%;
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.4rem 0.4rem 0.4rem 1.1rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-dim);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}

input[type="file"]:hover {
    border-color: var(--color-border-strong);
}

input[type="file"]:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

input[type="file"]::file-selector-button {
    flex-shrink: 0;
    min-height: calc(var(--touch-target-min) - 0.8rem);
    padding: 0.6rem 1.2rem;
    margin-right: var(--space-2xs);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-accent-gradient);
    color: var(--color-accent-text);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

input[type="file"]::file-selector-button:hover {
    box-shadow: var(--shadow-glow-accent);
}

input[type="file"]::file-selector-button:active {
    transform: scale(0.96);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm) var(--space-md);
}

@media (min-width: 768px) {
    .form-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.field-span-full {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0;
    border: 0;
}

.field-help {
    margin: 0 0 var(--space-xs);
    color: var(--color-text-dim);
    font-size: var(--fs-xs);
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-2xs);
}

.choice-card {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: var(--touch-target-min);
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-text-dim);
    cursor: pointer;
}

.choice-card:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-text);
}

.field-error {
    font-size: var(--fs-xs);
    color: var(--color-danger);
}

.form-errors {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background: rgba(239, 91, 111, 0.1);
    border: 1px solid rgba(239, 91, 111, 0.35);
    border-radius: var(--radius-md);
    color: #ff9aa6;
    font-size: var(--fs-sm);
}

.form-notice {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--color-accent-soft);
    border: 1px solid rgba(198, 64, 142, 0.35);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--fs-sm);
}

/* Filter chips (browse page) */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text-dim);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out);
}

.chip.is-active,
.chip:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* Search bar — expands on focus (§4b #14 "search-input interaction: focus expand") */
.search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    width: 100%;
    padding: 0.35rem 0.35rem 0.35rem 1.25rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.search-bar:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.search-bar .input {
    border: none;
    background: transparent;
    padding: 0.6rem 0;
    box-shadow: none;
}

.search-bar .input:focus {
    box-shadow: none;
    background: transparent;
}

/* Filter drawer: a persistent block on desktop, a bottom-sheet on mobile
   (§4c: "filter panel collapses into a bottom-sheet/drawer pattern on mobile
   rather than a persistent sidebar"). Toggled via [data-filter-drawer] +
   [data-filter-toggle] hooks wired in nav.js/main.js. */
[data-filter-drawer] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-overlay);
    max-height: 82vh;
    overflow-y: auto;
    padding: var(--space-md);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform var(--duration-base) var(--ease-out);
}

[data-filter-drawer].is-open {
    transform: translateY(0);
}

[data-filter-drawer][hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
}

.filter-toggle-btn {
    display: inline-flex;
}

@media (min-width: 1024px) {
    [data-filter-drawer] {
        position: static;
        max-height: none;
        overflow: visible;
        padding: var(--space-md) 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        transform: none;
    }

    [data-filter-drawer][hidden] {
        visibility: visible;
        pointer-events: auto;
    }

    .filter-toggle-btn {
        display: none;
    }
}

/* Opt-in location picker (v3.52) — welcome step + Account → Location & privacy. */
.loc-optin { display: grid; gap: var(--space-md); }
.loc-optin-why { display: flex; gap: var(--space-sm); align-items: flex-start; }
.loc-optin-icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); }
.loc-optin-lead { margin: 0 0 .35rem; font-weight: 700; color: var(--color-text); }
.loc-optin-promises { margin: 0; padding-left: 1.1rem; color: var(--color-text-dim); font-size: var(--fs-sm); display: grid; gap: .2rem; }
.loc-optin-status { margin: 0; padding: .6rem .8rem; border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--fs-sm); }
.loc-optin-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.loc-optin-manual { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; margin: 0; }
.loc-optin-manual .select, .loc-optin-manual .loc-optin-select { min-width: 14rem; }
.loc-optin-error { margin: 0; color: var(--color-danger); font-size: var(--fs-sm); }
.loc-optin-settings form { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; }
@media (max-width: 520px) { .loc-optin-manual, .loc-optin-manual .select, .loc-optin-manual .loc-optin-select, .loc-optin-actions .btn { width: 100%; } }

/* Creator location + service mode (v3.52) */
.creator-loc { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.creator-loc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.creator-loc .field[hidden] { display: none; }
.creator-loc-privacy { margin: 0; font-size: var(--fs-xs); color: var(--color-text-faint); }
.creator-loc-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.creator-loc-mode { align-items: flex-start; }
.creator-loc-mode span small { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 400; color: var(--color-text-faint); line-height: 1.35; }
.field-optional { font-weight: 400; color: var(--color-text-faint); text-transform: none; letter-spacing: 0; }
@media (max-width: 720px) { .creator-loc-row, .creator-loc-modes { grid-template-columns: 1fr; } }

/* v3.60 — username input: "@" inside the field, live availability line. */
.username-input { position: relative; }
.username-input .input { padding-left: 2.1rem; }
.username-at { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--color-text-faint); font-weight: 600; pointer-events: none; }
.username-status { display: block; min-height: 1.2em; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-dim); }
.username-status:empty { display: none; }
[data-username-field][data-state="ok"] .username-status { color: var(--color-success); }
[data-username-field][data-state="bad"] .username-status { color: var(--color-danger); }
[data-username-field][data-state="ok"] .input { border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border)); }
[data-username-field][data-state="bad"] .input { border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-border)); }
.ob-identity-card { max-width: 30rem; }
.ob-identity-form { display: grid; gap: var(--space-md); }

/* ---- themed-select.css ---- */
/*
 * Custom themed dropdown (browse-page Location/Category filters). The real
 * <select> stays in the DOM as the no-JS/accessibility fallback (submits
 * correctly on its own); when JS runs, themed-select.js hides it visually
 * and swaps in this popover so the open-menu chrome matches the theme
 * instead of falling back to the OS-native <select> popup.
 */

[data-themed-select] {
    position: relative;
}

/* Set by themed-select.js on the section holding an open menu, so the menu
   isn't painted over by the next section's own stacking context. Kept just
   below the sticky site nav. */
.themed-select-host-open {
    position: relative;
    z-index: calc(var(--z-nav) - 1);
}

/* Real <select> stays interactive for no-JS / assistive tech, just visually
   hidden once the JS-driven trigger button takes over (data-js-ready). */
[data-themed-select][data-js-ready] [data-themed-select-native] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.themed-select-trigger {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    width: 100%;
    min-height: var(--touch-target-min);
    padding: 0.75rem 1.1rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out);
}

[data-themed-select][data-js-ready] .themed-select-trigger {
    display: flex;
}

.themed-select-trigger:hover {
    border-color: var(--color-border-strong);
}

.themed-select-trigger[aria-expanded="true"] {
    border-color: var(--color-accent);
    background: var(--color-surface-3);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

[data-themed-select-value] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.themed-select-chevron {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-text-dim);
    border-bottom: 2px solid var(--color-text-dim);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--duration-base) var(--ease-out);
}

.themed-select-trigger[aria-expanded="true"] .themed-select-chevron {
    transform: rotate(225deg) translateY(-1px);
}

.themed-select-menu {
    position: absolute;
    top: calc(100% + var(--space-2xs));
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 16rem;
    overflow-y: auto;
    padding: var(--space-3xs);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transform-origin: top center;
    animation: themed-select-in var(--duration-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .themed-select-menu {
        animation: none;
    }
}

@keyframes themed-select-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.themed-select-menu[hidden] {
    display: none;
}

.themed-select-menu button[role="option"] {
    display: block;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-dim);
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.themed-select-menu button[role="option"]:hover,
.themed-select-menu button[role="option"].is-focused {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.themed-select-menu button[role="option"][aria-selected="true"] {
    background: var(--color-accent-soft);
    color: var(--color-text);
    font-weight: 600;
}

.themed-select-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.themed-select-group[hidden],
.themed-select-menu button[role="option"][hidden] {
    display: none;
}

.themed-select-group-label {
    padding: 0.55rem 0.85rem 0.2rem;
    color: var(--color-text-faint, var(--color-text-dim));
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- nav.css ---- */
/* Site nav — PLAN.md §4b #9 / §4c. Mobile-first: hamburger + full-screen menu is
   the phone/tablet pattern from day one, not a shrink of a desktop nav. */

.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    height: calc(var(--nav-height) + .9rem);
    padding-top:.7rem;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

/* Solid state, added by nav.js once scrollY exceeds a small threshold. */
.site-nav.is-solid {
    background:transparent;
    border-bottom-color:transparent;
}

/* Hide-on-scroll-down / show-on-scroll-up, toggled by nav.js (rAF-coalesced
   scroll listener, passive). Only engages past the same threshold as .is-solid
   so the nav doesn't flicker while still over the transparent hero. */
.site-nav.is-hidden {
    transform: translateY(-100%);
}

.site-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height:var(--nav-height);
    padding:.5rem .65rem .5rem .8rem;
    border:1px solid var(--color-border);
    border-radius:999px;
    background:color-mix(in srgb,var(--color-bg) 84%,transparent);
    box-shadow:0 .85rem 2.5rem rgba(0,0,0,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.site-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: .58rem;
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
    color: var(--color-text);
}


.site-nav-brand .accent-text {
    color: var(--color-accent);
}

.site-logomark {
    flex-shrink: 0;
    color: var(--color-text-faint);
}

.site-nav-links {
    display: none;
}

.site-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.site-nav-actions .btn {
    display: none;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

/* Light/dark theme toggle (§4e). Shows the icon for the theme a click would
   switch TO — moon while in light mode, sun while in dark mode — driven
   purely by the data-theme attribute the FOUC-prevention script/theme-
   toggle.js set on <html>, no JS-side icon-swap logic needed. */
/* Logged-in "My account / Dashboard / Admin" entry. Deliberately not a
   .btn: those are hidden below 1024px, but this must stay one tap away on
   phones too — there it collapses to just the avatar circle. */
.nav-account {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    height: var(--touch-target-min);
    padding: 0 3px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.nav-account:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.nav-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--touch-target-min) - 8px);
    height: calc(var(--touch-target-min) - 8px);
    border-radius: 50%;
    background: var(--color-accent-gradient);
    color: var(--color-accent-text);
    font-size: var(--fs-sm);
    font-weight: 800;
}

.nav-account-label {
    display: none;
}

@media (min-width: 1024px) {
    .nav-account {
        padding-right: var(--space-md);
    }

    .nav-account-label {
        display: inline;
    }
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.theme-toggle:hover {
    border-color: var(--color-accent);
}

.theme-toggle:active {
    transform: scale(0.94);
}

.theme-toggle-icon {
    display: none;
}

/* Dark mode (including the no-attribute default) — show the sun (switch-to-light). */
:root[data-theme="dark"] .theme-toggle-icon-sun,
:root:not([data-theme]) .theme-toggle-icon-sun {
    display: block;
}

/* Light mode — show the moon (switch-to-dark). */
:root[data-theme="light"] .theme-toggle-icon-moon {
    display: block;
}

.theme-toggle-block {
    width: auto;
    height: auto;
    padding: var(--space-xs) var(--space-sm);
    justify-content: flex-start;
}

.nav-toggle-bars {
    position: relative;
    width: 18px;
    height: 12px;
}

.nav-toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out),
                top var(--duration-base) var(--ease-out);
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
    top: 5px;
    transform: rotate(-45deg);
}

/* Full-screen mobile menu — real links exist in server-rendered HTML always;
   this only ever toggles visibility, never presence (§4d). Base state is
   closed-but-present; JS toggles [hidden] + .is-open for the transition. */
.nav-menu {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) - 1);
    display: flex;
    flex-direction: column;
    /* Plain `center` still centers an overflowing flex column symmetrically
       past its own padding box — confirmed via live mobile testing: with 9
       links + action buttons on a short viewport, the list overflowed
       upward far enough that the first item ("Browse") rendered directly
       under the fixed header, whose higher z-index then swallowed the tap.
       `safe center` (2nd, overriding decl — 1st is the fallback for browsers
       that don't parse `safe`) keeps centering when content fits but falls
       back to top-aligned + scrollable the moment it doesn't, so no item can
       ever render above its own padding box again. */
    justify-content: center;
    justify-content: safe center;
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-lg);
    /* Reserve room for the fixed header pill so even top-aligned content
       never starts underneath it. */
    padding-top: calc(var(--nav-height) + var(--space-lg));
    overflow-y: auto;
    background: var(--color-bg-alt);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.nav-menu[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
}

.nav-menu.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
}

.nav-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.nav-menu-list a {
    display: inline-block;
    font-size: var(--fs-xl);
    font-weight: 700;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
    transition-delay: var(--stagger-delay, 0ms);
}

/* Staggered entrance for mobile menu items — nav.js sets --stagger-delay
   per item and flips .is-open on the parent once opened. */
.nav-menu.is-open .nav-menu-list a {
    opacity: 1;
    transform: none;
}

.nav-menu-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.nav-underline {
    position: relative;
}

.nav-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--color-accent-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease-out);
}

.nav-underline.is-active::after,
.nav-underline:hover::after {
    transform: scaleX(1);
}

@media (min-width: 1024px) {
    .site-nav-links {
        display: flex;
        align-items: center;
        gap: var(--space-lg);
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--color-text-dim);
    }

    .site-nav-actions .btn {
        display: inline-flex;
    }

    .nav-toggle {
        display: none;
    }

    .nav-menu {
        display: none;
    }
}

/* v3.58 — header location: same pill language as the account button. */
.nav-loc { position: relative; }
.nav-loc-btn { display: inline-flex; align-items: center; gap: .35rem; height: var(--touch-target-min); max-width: 13rem; padding: 0 .75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.nav-loc-btn:hover, .nav-loc-btn[aria-expanded="true"] { border-color: var(--color-accent); }
.nav-loc-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav-loc-btn > svg:first-child { color: var(--color-accent); flex: none; }
.nav-loc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-loc:not(.is-set) .nav-loc-label { color: var(--color-text-dim); font-weight: 500; }
.nav-loc-caret { flex: none; color: var(--color-text-dim); }
.nav-loc-panel { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60; width: min(20rem, calc(100vw - 2rem)); display: grid; gap: .6rem; padding: var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-1); box-shadow: var(--shadow-lg, 0 18px 48px -16px rgba(0,0,0,.55)); }
.nav-loc-panel[hidden] { display: none; }
.nav-loc-title { margin: 0; font-weight: 700; color: var(--color-text); }
.nav-loc-text { margin: 0; font-size: var(--fs-xs); color: var(--color-text-dim); line-height: 1.45; }
.nav-loc-gps { display: inline-flex !important; justify-content: center; gap: .4rem; width: 100%; }
.nav-loc-or { font-size: var(--fs-xs); color: var(--color-text-dim); text-align: center; }
.nav-loc-select { width: 100%; }
.nav-loc-status { margin: 0; font-size: var(--fs-xs); color: var(--color-text-dim); }
.nav-loc-foot { display: flex; justify-content: space-between; gap: .5rem; }
.nav-loc-link { padding: 0; border: 0; background: none; color: var(--color-text-dim); font: inherit; font-size: var(--fs-xs); text-decoration: underline; cursor: pointer; }
.nav-loc-link:hover { color: var(--color-text); }
.nav-loc-link[hidden] { display: none; }
@media (max-width: 1023px) {
    /* Phones/tablets: the pin alone (the panel says the rest). */
    .nav-loc-btn { width: var(--touch-target-min); padding: 0; justify-content: center; }
    .nav-loc-label, .nav-loc-caret { display: none; }
    .nav-loc.is-set .nav-loc-btn > svg:first-child { fill: color-mix(in srgb, var(--color-accent) 25%, transparent); }
    .nav-loc-panel { position: fixed; top: 4.75rem; right: 1rem; left: 1rem; width: auto; }
    /* v3.61: a small "Join free" stays in reach; the theme switch is in the menu. */
    .site-nav-actions > .btn-primary { display: inline-flex; min-height: 2.5rem; padding: .45rem 1rem; font-size: var(--fs-sm); white-space: nowrap; }
    .site-nav-actions > .theme-toggle { display: none; }
}

/* v3.60 — header dropdowns (Venues, Explore): same surface, border and
   shadow language as the location panel. Hover opens on mouse devices,
   click/tap and the keyboard open everywhere (nav-menu.js). */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: .2rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.nav-drop-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; }
.nav-drop-caret { color: var(--color-text-faint); transition: transform var(--duration-fast) var(--ease-out); }
.nav-drop.is-open .nav-drop-caret { transform: rotate(180deg); }
.nav-drop-panel {
    position: absolute;
    top: calc(100% + .9rem);
    left: 50%;
    z-index: 60;
    display: grid;
    gap: 2px;
    width: 17.5rem;
    padding: .45rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-lg, 0 18px 48px -16px rgba(0,0,0,.55));
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s linear var(--duration-fast);
}
/* Invisible bridge so the pointer can travel from the button to the panel. */
.nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.nav-drop.is-open .nav-drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
    .nav-drop:hover .nav-drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
    .nav-drop:hover .nav-drop-caret { transform: rotate(180deg); }
}
.nav-drop-item { display: grid; gap: .1rem; padding: .6rem .75rem; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out); }
.nav-drop-item[hidden] { display: none; }
.nav-drop-item strong { font-size: var(--fs-sm); font-weight: 600; }
.nav-drop-item small { color: var(--color-text-dim); font-size: var(--fs-xs); font-weight: 400; line-height: 1.35; }
.nav-drop-item:hover, .nav-drop-item:focus-visible { background: var(--color-surface-2); outline: none; }
.nav-drop-item.is-active strong { color: var(--color-accent); }
.nav-drop-item:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent); }

/* Phone menu: grouped sections (People · Venues · Events · Explore). */
.nav-menu-groups { gap: var(--space-lg); }
.nav-menu-group { display: flex; flex-direction: column; gap: var(--space-2xs); }
.nav-menu-group[hidden], .nav-menu-list a[hidden] { display: none; }
.nav-menu-head { margin: 0 0 .15rem; color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-menu-groups a { font-size: var(--fs-lg); }
@media (min-width: 560px) {
    .nav-menu-groups { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-drop-panel, .nav-drop-caret { transition: none; }
}
/* The phone menu owns the screen while open: the floating chat button would
   otherwise sit on top of its last links. */
body.nav-open [data-chat-concierge],
body:has(.nav-menu.is-open) [data-chat-concierge] { display: none; }

/* v3.60c — phone menu: Join / Log in / account buttons stay in reach at the
   bottom while the (now longer, grouped) link list scrolls behind them. The
   header already has its own theme switch, so the menu's copy is dropped. */
.nav-menu-actions {
    position: sticky;
    bottom: calc(-1 * var(--space-xl));
    margin: 0 calc(-1 * var(--space-lg)) calc(-1 * var(--space-xl));
    padding: var(--space-md) var(--space-lg) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -14px 14px -10px var(--color-bg-alt);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
}
.nav-menu-actions > * { min-width: 0; }
.nav-menu-actions .btn { white-space: normal; text-align: center; }
.nav-menu-actions form .btn { width: 100%; }
.nav-menu-actions .theme-toggle-block { display: none; }
.nav-menu-provider { grid-column: 1 / -1; padding: .2rem 0 0; color: var(--color-text-dim); font-size: var(--fs-sm); text-align: center; text-decoration: none; }
.nav-menu-provider strong { color: var(--color-accent); }

/* v3.65: the brand is the mark AND the name — "LuXeel" in the serif voice,
   next to the logomark in the header and the footer. */
.site-brand-word {
    font-family: var(--font-serif);
    font-weight: 620;
    font-size: 1.35rem;
    letter-spacing: -0.015em;
    line-height: 1;
}
.footer-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--color-text);
    text-decoration: none;
}
.footer-brand-lockup .site-brand-word { font-size: 1.7rem; }

/* In the 768–1149px band the full menu, search and buttons already fill the
   bar — the wordmark yields and the mark carries the brand alone. */
@media (min-width: 768px) and (max-width: 1149px) {
    .site-brand-word { display: none; }
}

/* Ultra-narrow phones (320px class): the actions row needs every pixel —
   the mark alone is the brand there too. */
@media (max-width: 359px) {
    .site-brand-word { display: none; }
}

/* v3.66: "For creators" is the sixth desktop link and the 1024–1099px band
   can't fit it (measured 8px of overflow at 1024). Same yield rule as the
   wordmark above — the mobile menu, footer and homepage band still carry it. */
@media (min-width: 1024px) and (max-width: 1099px) {
    .nav-link-creators { display: none; }
}

/* ---- fan-carousel.css ---- */
/* Mobile is a native swipe row. Desktop is a bounded circular stage whose
   slots are assigned by fan-carousel.js. Content remains usable without JS. */
.fan-track {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--space-sm) var(--space-3xs);
    scrollbar-width: none;
}

.fan-track::-webkit-scrollbar { display: none; }

.fan-item {
    flex: 0 0 auto;
    scroll-snap-align: center;
    transition: transform 760ms var(--ease-out), opacity 520ms var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

@media (min-width: 768px) {
    .fan {
        position: relative;
        perspective: 1400px;
        isolation: isolate;
        overflow: clip;
    }

    .fan-track {
        display: block;
        width: 100%;
        height: 100%;
        overflow: clip;
        padding: 0;
    }

    .fan-item {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform:
            translate(-50%, -50%)
            translateX(var(--fan-x, 0rem))
            translateY(var(--fan-y, 0rem))
            rotate(var(--fan-angle, 0deg))
            scale(var(--fan-scale, 1));
        z-index: var(--fan-z, 1);
        opacity: var(--fan-opacity, 1);
        pointer-events: none;
    }

    .fan-item[data-fan-current],
    .fan-item[data-fan-slot="-1"],
    .fan-item[data-fan-slot="1"],
    .fan-item[data-fan-slot="-2"],
    .fan-item[data-fan-slot="2"] { pointer-events: auto; }

    .fan-item.is-fan-wrapping { transition: none !important; }

    .fan[data-fan] { cursor: grab; touch-action: pan-y; }
    .fan[data-fan].is-dragging { cursor: grabbing; }
    .fan[data-fan].is-dragging .fan-item { transition: none !important; }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .fan {
        transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
        transition: transform 260ms var(--ease-out);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fan-item { transition: none !important; }
}

/* ---- hero-showcase.css ---- */
/* Homepage hero rebuilt from a blank layout. Its discovery-hero namespace
   prevents any legacy split-hero rules from leaking into this composition. */
.discovery-hero {
    position: relative;
    min-height: min(58rem, 100svh);
    padding: calc(var(--nav-height) + var(--space-xl)) 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 72%, var(--color-accent-soft), transparent 34%),
        linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
    isolation: isolate;
}

.discovery-hero::before,
.discovery-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.22;
    pointer-events: none;
}

.discovery-hero::before { top: 10%; left: -7rem; background: var(--color-pop-orange); }
.discovery-hero::after { top: 26%; right: -7rem; background: var(--color-pop-pink); }

.discovery-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.34;
    pointer-events: none;
    background-image:
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(to bottom, transparent 4%, #000 35%, #000 84%, transparent 100%);
}

.discovery-hero-inner {
    display: grid;
    grid-template-rows: auto minmax(23rem, 1fr);
    align-items: end;
    min-width: 0;
}

.discovery-hero-copy {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 62rem;
    margin-inline: auto;
    text-align: center;
}

.discovery-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: var(--space-sm);
    color: var(--color-text-dim);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.discovery-hero-kicker i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-pop-orange);
    box-shadow: 0 0 0 0.35rem var(--color-accent-soft);
}

.discovery-hero-title {
    margin: 0;
    max-width: 13ch;
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 7.2vw, 7.4rem);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.discovery-hero-title span { color: var(--color-accent); font-style: italic; }

.discovery-hero-lead {
    max-width: 43rem;
    margin: var(--space-md) 0 0;
    color: var(--color-text-dim);
    font-size: var(--fs-md);
    line-height: 1.55;
    text-wrap: balance;
}

.discovery-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.hero-deck {
    position: relative;
    width: min(100%, 62rem);
    height: 27rem;
    margin: var(--space-md) auto 0;
    overflow: clip;
    isolation: isolate;
}

.hero-profile-card {
    position: relative;
    width: min(76vw, 16rem);
    aspect-ratio: 3 / 4.35;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-border-strong) 82%, white 18%);
    border-radius: 1.65rem 1.65rem 0.9rem 0.9rem;
    background: var(--color-surface-2);
    box-shadow: 0 1.5rem 4rem rgba(20, 12, 18, 0.24);
}

.hero-profile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    transition: transform 700ms var(--ease-out), filter 500ms var(--ease-out);
}

.hero-profile-card:hover img,
.hero-profile-card:focus-visible img { transform: scale(1.035); }

.hero-profile-shade {
    position: absolute;
    inset: 42% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(7, 5, 8, 0.92));
    pointer-events: none;
}

.hero-profile-meta {
    position: absolute;
    inset: auto 1.05rem 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.hero-profile-meta strong {
    overflow: hidden;
    font-size: var(--fs-md);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-profile-meta small {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: var(--fs-xs);
}

.hero-deck-empty {
    align-self: center;
    margin: var(--space-xl) auto var(--space-2xl);
    padding: var(--space-lg);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    color: var(--color-text-dim);
    text-align: center;
}

.hero-deck:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    border-radius: var(--radius-xl);
}

@media (max-width: 767px) {
    .discovery-hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-lg)); }
    .discovery-hero-inner { display: block; }
    .discovery-hero-title { font-size: clamp(3rem, 15vw, 5.25rem); line-height: 0.92; }
    .discovery-hero-lead { max-width: 32rem; }

    .hero-deck {
        width: 100%;
        height: auto;
        margin: var(--space-xl) auto var(--space-lg);
        overflow: visible;
    }

    .hero-deck-track {
        margin-inline: calc(0rem - var(--space-md));
        padding: var(--space-sm) var(--space-md) var(--space-lg);
        scroll-padding-inline: var(--space-md);
    }

    .hero-profile-card { flex-basis: min(76vw, 18rem); }
}

@media (min-width: 768px) {
    .hero-profile-card { position: absolute; }
}

@media (max-width: 479px) {
    .discovery-hero-copy { align-items: flex-start; text-align: left; }
    .discovery-hero-title,
    .discovery-hero-lead { text-wrap: wrap; }
    .discovery-hero-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-profile-card img { transition: none; }
}

/* ---- process-fan.css ---- */
/* Controlled three-step process section. Every card stays readable and
   bounded; no animated fan geometry is applied to content-heavy cards. */
.process-section { overflow:hidden; }

.process-shell {
    position:relative;
    padding:clamp(1.4rem,4vw,3.5rem);
    overflow:hidden;
    border:1px solid var(--color-border);
    border-radius:clamp(1.5rem,3vw,2.75rem);
    background:linear-gradient(135deg,color-mix(in srgb,var(--color-pop-orange) 7%,var(--color-surface-1)),var(--color-surface-1) 52%,color-mix(in srgb,var(--color-pop-pink) 6%,var(--color-surface-1)));
}

.process-shell::after {
    content:"";
    position:absolute;
    top:-10rem;
    right:-8rem;
    width:24rem;
    height:24rem;
    border:1px solid var(--color-border);
    border-radius:50%;
    pointer-events:none;
}

.process-heading {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(16rem,.75fr);
    gap:var(--space-xl);
    align-items:end;
    margin-bottom:clamp(2rem,5vw,4rem);
}

.process-heading .section-title {
    max-width:13ch;
    margin-top:var(--space-xs);
    font-family:var(--font-serif);
    font-size:clamp(2.8rem,5.5vw,5.5rem);
    line-height:.9;
    letter-spacing:-.03em;
}

.process-heading .section-lead { max-width:31rem; margin:0; }

.process-cards {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-sm);
}

.process-card {
    min-width:0;
    min-height:20rem;
    display:flex;
    flex-direction:column;
    padding:clamp(1.25rem,2.5vw,2rem);
    overflow:hidden;
    border:1px solid color-mix(in srgb,#000 18%,transparent);
    border-radius:var(--radius-xl);
    color:#090909;
    box-shadow:0 .8rem 2rem rgba(0,0,0,.12);
    transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}

.process-card:nth-child(1) { background:var(--color-pop-orange); }
.process-card:nth-child(2) { background:var(--color-pop-lime); }
.process-card:nth-child(3) { background:var(--color-pop-pink); }
.process-card-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); }
.process-card-number { font-size:var(--fs-xs); font-weight:800; letter-spacing:.03em; }
.process-card-dot { width:.62rem; height:.62rem; flex:0 0 auto; border:2px solid #090909; border-radius:50%; opacity:.7; }
.process-card-body { margin:auto 0; }
.process-card h3 { max-width:11ch; margin:0 0 var(--space-sm); font-family:var(--font-serif); font-size:clamp(2.1rem,3.25vw,3.5rem); line-height:.94; letter-spacing:-.045em; color:#090909; }
.process-card p { max-width:32ch; margin:0; color:#090909; font-size:var(--fs-sm); line-height:1.55; opacity:.76; }
.process-card-note { color:#090909; font-size:var(--fs-xs); font-weight:800; }

@media (hover:hover) and (pointer:fine) {
    .process-card:hover { transform:translateY(-5px); box-shadow:0 1.2rem 2.8rem rgba(0,0,0,.2); }
}

@media (max-width:900px) {
    .process-heading { grid-template-columns:1fr; gap:var(--space-sm); }
    .process-cards { grid-template-columns:1fr; }
    .process-card { min-height:15rem; }
    .process-card h3 { max-width:none; }
}

@media (max-width:599px) {
    .process-shell { padding:1rem; }
    .process-heading { padding:.5rem; }
    .process-heading .section-title { font-size:clamp(2.65rem,14vw,4rem); }
    .process-card { min-height:16rem; }
}

@media (prefers-reduced-motion:reduce) {
    .process-card { transition:none; }
}

/* ---- marquee.css ---- */
/* "The Showroom" vertical auto-scrolling marquee — PLAN.md branding pass
   Part D. Pure CSS: no JS file, no cloned DOM — the profile list is
   server-rendered twice back-to-back (see home.php), both copies real
   distinct <a href> links, enabling a single seamless translateY(-50%)
   loop with no reset-jump logic needed (§4d — content always present). */

.marquee-section-inner {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
}

@media (min-width: 1024px) {
    .marquee-section-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-2xl);
    }
}

.marquee-copy {
    max-width: 30rem;
}

.marquee {
    position: relative;
    overflow: hidden;
    height: 20rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    animation: marquee-scroll 22s linear infinite;
}

@keyframes marquee-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
    animation-play-state: paused;
}

.marquee-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-pop-lime);
    background: var(--color-surface-1);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.marquee-card:nth-child(3n+2) {
    border-color: var(--color-pop-orange);
}

.marquee-card:nth-child(3n) {
    border-color: var(--color-pop-pink);
}

@media (hover: hover) and (pointer: fine) {
    .marquee-card:hover {
        transform: translateX(4px);
        box-shadow: var(--shadow-glow-accent);
    }
}

.marquee-card-media {
    flex-shrink: 0;
    display: block;
    width: 3rem;
    height: 4rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface-2);
}

.marquee-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marquee-card-name {
    font-weight: 700;
    font-size: var(--fs-sm);
}

@media (min-width: 768px) {
    .marquee {
        height: 36rem;
    }
}

@media (max-width: 767px) {
    .marquee-track {
        animation-duration: 22s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }

    .marquee {
        overflow-y: auto;
        max-height: 36rem;
    }
}

/* ---- featured-marquee.css ---- */
/* "New & noteworthy" dual-row horizontal auto-scroll — row 1 drifts
   right-to-left, row 2 drifts left-to-right, hover/focus pauses the whole
   block. Same technique as marquee.css: content server-rendered twice
   back-to-back so a single seamless translateX(-50%) loop needs no
   reset-jump logic. Pure CSS, no JS. */

.featured-marquee {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.featured-marquee-row {
    overflow: hidden;
}

.featured-marquee-track {
    display: flex;
    gap: var(--space-sm);
    width: max-content;
    padding-inline: var(--space-md);
}

.featured-marquee-row-rtl .featured-marquee-track {
    animation: featured-marquee-rtl 46s linear infinite;
}

.featured-marquee-row-ltr .featured-marquee-track {
    animation: featured-marquee-ltr 46s linear infinite;
}

@keyframes featured-marquee-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes featured-marquee-ltr {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* Cursor-in = playful pause: either row stops the whole block together,
   not just the row under the pointer, so the pair reads as one system. */
.featured-marquee:hover .featured-marquee-track,
.featured-marquee:focus-within .featured-marquee-track {
    animation-play-state: paused;
}

.featured-marquee-card {
    flex: 0 0 auto;
    width: 15rem;
}

.featured-marquee-card .card-media {
    aspect-ratio: 4 / 5;
}

.featured-marquee-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--space-sm);
}

.featured-marquee-card .card-title {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--color-text);
}

.featured-marquee-card .card-meta {
    color: var(--color-text-faint);
    font-size: var(--fs-xs);
}

.featured-marquee-card .card-rate {
    margin-top: 0.15rem;
    font-size: var(--fs-xs);
    color: var(--color-text-dim);
}

@media (min-width: 768px) {
    .featured-marquee-card {
        width: 17.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-marquee-row-rtl .featured-marquee-track,
    .featured-marquee-row-ltr .featured-marquee-track {
        animation: none;
    }

    .featured-marquee-row {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .featured-marquee-row::-webkit-scrollbar {
        display: none;
    }
}

/* ---- age-gate.css ---- */
[data-age-gate] {
    position: fixed;
    inset: 0;
    z-index: var(--z-age-gate, 9999);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgba(6, 6, 8, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

[data-age-gate][hidden] {
    display: none;
}

/* Same FOUC-prevention pattern as the theme toggle (see layouts/base.php's
   inline <head> script): a returning, already-confirmed visitor gets the
   .age-confirmed class on <html> synchronously, before first paint — so
   this full-viewport overlay never exists to intercept a tap on the very
   first page render, closing the gap that age-gate.js (deferred, runs
   after paint) alone left open on every single navigation. */
html.age-confirmed [data-age-gate] {
    display: none;
}

[data-age-gate] > div {
    width: 100%;
    max-width: 26rem;
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glow-accent-lg);
}

[data-age-gate] h2 {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-2xs);
}

[data-age-gate] p {
    margin-bottom: var(--space-md);
}

[data-age-gate] [data-age-gate-confirm] {
    width: 100%;
    margin-bottom: var(--space-sm);
}

/* v3.66: the three-door entry — Creators and Community confirm age and route
   in the same tap. Side by side where the card is wide enough, stacked on
   narrow phones so each stays a full-size touch target. */
[data-age-gate] .age-gate-paths {
    display: flex;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

[data-age-gate] .age-gate-paths .btn {
    flex: 1 1 0;
    font-size: var(--fs-sm);
    padding-inline: var(--space-2xs);
    white-space: normal;
}

@media (max-width: 419px) {
    [data-age-gate] .age-gate-paths {
        flex-direction: column;
    }
}

[data-age-gate] [data-age-gate-exit] {
    display: inline-block;
    font-size: var(--fs-xs);
    color: var(--color-text-faint);
    text-decoration: underline;
    min-height: var(--touch-target-min);
    line-height: var(--touch-target-min);
}

/* ---- chat-concierge.css ---- */
/* pointer-events:none on the wrapper is deliberate: on mobile (see the
   520px media query below) both `left` and `right` are set, which forces
   this fixed box to span the full available width even though its only
   visible child (the toggle button) is right-aligned and narrower — without
   this, the empty space to the button's left silently swallows taps on
   whatever real content scrolls underneath it. Interactive children opt
   back in individually. */
[data-chat-concierge] { position:fixed; right:var(--space-sm); bottom:var(--space-sm); z-index:var(--z-overlay); display:flex; align-items:flex-end; flex-direction:column; gap:.65rem; pointer-events:none; }
[data-chat-toggle] { display:inline-flex; align-items:center; gap:.65rem; min-height:var(--touch-target-min); padding:.75rem 1rem; border:1px solid var(--color-border-strong); border-radius:999px; background:color-mix(in srgb,var(--color-surface-1) 90%,transparent); color:var(--color-text); box-shadow:var(--shadow-md); font-size:var(--fs-sm); font-weight:750; backdrop-filter:blur(14px); cursor:pointer; pointer-events:auto; transition:transform var(--duration-fast) var(--ease-out),border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out); }
[data-chat-toggle] svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
[data-chat-toggle] > i { width:.5rem; height:.5rem; border-radius:50%; background:var(--color-pop-lime); box-shadow:0 0 0 .3rem color-mix(in srgb,var(--color-pop-lime) 14%,transparent); }
[data-chat-toggle]:hover { border-color:var(--color-accent); box-shadow:var(--shadow-glow-accent); transform:translateY(-2px); }
[data-chat-panel] { width:min(25rem,calc(100vw - 2 * var(--space-sm))); max-height:min(39rem,calc(100vh - 7rem)); overflow:hidden; flex-direction:column; border:1px solid var(--color-border-strong); border-radius:1.45rem; background:color-mix(in srgb,var(--color-surface-1) 96%,transparent); box-shadow:0 2rem 5rem rgba(0,0,0,.35); opacity:0; transform:scale(.94) translateY(.75rem); transform-origin:bottom right; visibility:hidden; pointer-events:none; backdrop-filter:blur(20px); transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out); }
/* Only laid out (and thus only able to occupy fixed-wrapper space / intercept
   taps) while not [hidden] — otherwise the UA default (display:none) must win,
   or the wrapper's flex box inflates to the panel's full closed footprint and
   swallows taps across most of the mobile viewport underneath it. */
[data-chat-panel]:not([hidden]) { display:flex; }
[data-chat-panel].is-open { opacity:1; transform:none; visibility:visible; pointer-events:auto; }
.chat-panel-head { display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; align-items:center; padding:1rem; border-bottom:1px solid var(--color-border); }
.chat-panel-head > span:nth-child(2) { display:flex; flex-direction:column; }
.chat-panel-head strong { color:var(--color-text); font-size:.92rem; }
.chat-panel-head small { display:flex; align-items:center; gap:.35rem; color:var(--color-text-faint); font-size:.65rem; }
.chat-panel-head small i { width:.42rem; height:.42rem; border-radius:50%; background:var(--color-pop-lime); }
.chat-panel-mark { display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:.8rem; background:linear-gradient(135deg,var(--color-pop-orange),var(--color-pop-pink)); }
.chat-panel-mark i { width:.75rem; height:1rem; border:2px solid #fff; border-top:0; border-radius:0 0 .5rem .5rem; }
[data-chat-close] { display:grid; place-items:center; width:2rem; height:2rem; padding:0; border:1px solid var(--color-border); border-radius:50%; background:transparent; color:var(--color-text); font-size:1.25rem; cursor:pointer; }
.chat-panel-intro { margin:1rem 1rem 0; padding:.85rem; border-radius:.9rem; background:var(--color-surface-2); color:var(--color-text-dim); font-size:.74rem; line-height:1.5; }
[data-chat-log] { display:flex; flex:1; min-height:9rem; max-height:21rem; overflow-y:auto; flex-direction:column; gap:.8rem; padding:1rem; }
.chat-message { display:flex; max-width:86%; flex-direction:column; gap:.25rem; }
.chat-message small { color:var(--color-text-faint); font-size:.62rem; }
.chat-message p { margin:0; padding:.72rem .9rem; border-radius:1rem 1rem 1rem .25rem; background:var(--color-surface-2); color:var(--color-text); font-size:.82rem; line-height:1.45; }
.chat-message-visitor { align-self:flex-end; align-items:flex-end; }
.chat-message-visitor p { border-radius:1rem 1rem .25rem 1rem; background:linear-gradient(135deg,var(--color-pop-orange),var(--color-pop-pink)); color:#fff; }
.chat-message-admin p { background:color-mix(in srgb,var(--color-pop-lime) 78%,var(--color-surface-1)); color:#090909; }
.chat-panel-status { margin:0; padding:.45rem 1rem; color:var(--color-text-faint); font-size:.62rem; }
[data-chat-form] { display:grid; grid-template-columns:1fr auto; gap:.6rem; padding:.75rem; border-top:1px solid var(--color-border); }
[data-chat-input] { min-height:3rem; max-height:7rem; resize:vertical; padding:.85rem 1rem; border:1px solid var(--color-border); border-radius:1rem; outline:0; background:var(--color-surface-2); color:var(--color-text); font:inherit; font-size:.82rem; }
[data-chat-input]:focus { border-color:var(--color-accent); }
[data-chat-form] button { display:grid; place-items:center; width:3rem; height:3rem; padding:0; border:0; border-radius:1rem; background:linear-gradient(135deg,var(--color-pop-orange),var(--color-pop-pink)); color:#fff; cursor:pointer; }
[data-chat-form] button svg { width:1.2rem; height:1.2rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
[data-chat-form].is-sending { opacity:.7; pointer-events:none; }
@media(max-width:520px){[data-chat-concierge]{right:max(.75rem,env(safe-area-inset-right));bottom:max(.75rem,env(safe-area-inset-bottom));left:max(.75rem,env(safe-area-inset-left))}[data-chat-toggle]{align-self:flex-end;max-width:100%}[data-chat-toggle] span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-chat-panel]{width:100%;max-height:min(76dvh,42rem)}.chat-panel-intro{font-size:.7rem}[data-chat-log]{max-height:none}[data-chat-input]{font-size:16px}}

/* v3.60 — icon-only round button (owner request): smaller footprint; the
   green "we're here" dot sits on its corner. */
[data-chat-toggle] { position:relative; justify-content:center; width:3.25rem; height:3.25rem; min-height:0; padding:0; gap:0; }
[data-chat-toggle] svg { width:1.4rem; height:1.4rem; }
[data-chat-toggle] > i { position:absolute; top:.35rem; right:.35rem; box-shadow:0 0 0 .2rem var(--color-surface-1); }
[data-chat-toggle][aria-expanded="true"] { border-color:var(--color-accent); }
@media(max-width:520px){ [data-chat-toggle] { width:3rem; height:3rem; } }
/* The button's words are for screen readers only — hidden here too, so an
   older cached page (where the span had no class) still shows just the icon. */
[data-chat-toggle] span { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; }

/* ---- sections.css ---- */
/* Page-level section scaffolding: headers, footer, stat counters, status
   badges, empty states, pagination, accordions, toasts — shared across
   public/provider/admin pages so those templates don't each invent their
   own one-off layout primitives. PLAN.md §4b #14/#16, §12 "no monolithic file". */

.page-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.page-main {
    flex: 1;
    padding-top: calc(var(--nav-height) + var(--space-lg));
    padding-bottom: var(--space-2xl);
}

/* v3.60f/v3.61: .page-main already clears the fixed header, and these page
   wrappers cleared it again — a ~140px empty band above every page heading.
   Every width now starts just under the nav. */
.page-main > :is(.editorial-hero, .browse-page, .profile-page, .dir-page, .dc-page) {
    padding-top: var(--space-md);
}
@media (max-width: 767px) {
    .page-main > :is(.editorial-hero, .browse-page, .profile-page, .dir-page, .dc-page) {
        padding-top: var(--space-sm);
    }
}

.section {
    padding-block: var(--space-2xl);
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--space-lg);
    max-width: 42rem;
}

.section-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.section-title {
    font-size: var(--fs-2xl);
}

.section-lead {
    font-size: var(--fs-md);
    color: var(--color-text-dim);
}

/* Stat counters (§4b #3/#15) — count-up.js target; base value already
   server-rendered as real text, JS animates the digits, never introduces them.
   Flexbox (not CSS Grid) deliberately: profile.php's Details panel can render
   anywhere from 2 to 5 of these depending on what a provider filled in, and
   Grid shares column tracks across every row — an "auto-fit" grid still
   leaves a trailing row of 1 stranded with empty space beside it, since
   only whole EMPTY rows collapse, not partially-filled ones. Flexbox wraps
   per-row, so each row's own items stretch to fill it evenly regardless of
   how the count splits across rows. */
.stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.stat {
    flex: 1 1 11rem;
    padding: var(--space-md);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.stat-value {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--color-text);
}

.stat-label {
    font-size: var(--fs-xs);
    color: var(--color-text-faint);
}

/* Homepage "By the numbers" band — scoped to .stats-band so the plainer
   .stat/.stat-grid reuse on profile.php (rate/location facts) stays
   untouched. Each .stat reveals individually via [data-reveal] with its own
   inline --reveal-delay (set in home.php), so the four cards step in one
   after another instead of the whole row fading in as a single block. */
.stats-band-head {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.stats-band-head .section-title {
    margin-top: var(--space-3xs);
}

.stats-band .stat {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* opacity is included here (not just transform/box-shadow/border-color)
       so [data-reveal]'s fade-in still animates smoothly — this selector's
       higher specificity than .reveal-pending's own `transition` would
       otherwise silently drop opacity from the transition list. */
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.stats-band .stat.reveal-pending {
    transition-delay: var(--reveal-delay, 0ms);
}

/* Full neon gradient-border outline (same inset-mask technique as .card::after)
   — fades in once the card is revealed, and brightens further on hover. */
.stats-band .stat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--color-accent-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out);
    transition-delay: calc(var(--reveal-delay, 0ms) + 160ms);
}

.stats-band .stat.is-visible::before {
    opacity: 0.85;
}

.stats-band .stat::after {
    content: "";
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: var(--stat-glow, var(--color-pop-orange));
    opacity: 0.16;
    filter: blur(28px);
    z-index: -1;
    transition: opacity var(--duration-base) var(--ease-out);
}

.stats-band-item-1 { --stat-glow: var(--color-pop-orange); }
.stats-band-item-2 { --stat-glow: var(--color-pop-pink); }
.stats-band-item-3 { --stat-glow: var(--color-pop-lime); }
.stats-band-item-4 { --stat-glow: var(--color-accent-2); }

@media (hover: hover) and (pointer: fine) {
    .stats-band .stat:hover {
        transform: translateY(-4px);
        border-color: var(--color-border-strong);
        box-shadow: var(--shadow-glow-accent);
    }

    .stats-band .stat:hover::before {
        opacity: 1;
    }

    .stats-band .stat:hover::after {
        opacity: 0.28;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stats-band .stat::before {
        transition: none;
        opacity: 0.85;
    }
}

/* Status badges (provider/admin dashboards) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: capitalize;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-dim);
}

.badge-draft { color: var(--color-text-dim); }
.badge-pending_review { color: var(--color-warning); border-color: rgba(242, 184, 75, 0.4); }
.badge-published { color: var(--color-success); border-color: rgba(53, 211, 153, 0.4); }
.badge-rejected { color: var(--color-danger); border-color: rgba(239, 91, 111, 0.4); }
.badge-paused { color: var(--color-text-faint); }
.badge-active { color: var(--color-success); border-color: rgba(53, 211, 153, 0.4); }
.badge-cancelled { color: var(--color-warning); border-color: rgba(242, 184, 75, 0.4); }
.badge-past_due { color: var(--color-danger); border-color: rgba(239, 91, 111, 0.4); }
.badge-expired { color: var(--color-text-faint); }
.badge-refunded { color: var(--color-text-faint); }

/* Dashboard/admin panel cards reuse .card but need a plainer body layout */
.panel {
    padding: var(--space-lg);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.panel + .panel {
    margin-top: var(--space-lg);
}

.panel-title {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-md);
}

.thumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.thumb {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    width: 8.5rem;
}

.thumb-media {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}

.thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
}

.empty-state {
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-faint);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
}

/* v3.64 feelings: an empty box shouldn't feel like a dead end — a quiet
   sparkle says "this fills up later", everywhere one appears. */
.empty-state::before {
    content: "✦";
    display: block;
    margin-bottom: var(--space-3xs);
    color: color-mix(in srgb, var(--color-pop-orange) 55%, var(--color-text-faint));
    font-size: 1.1rem;
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    margin-top: var(--space-lg);
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text-dim);
    transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.pagination a:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.pagination a[aria-current="page"] {
    background: var(--color-accent-gradient);
    border-color: transparent;
    color: var(--color-accent-text);
}

/* Accordion (§4b #14 / #20 FAQ-style) */
.accordion-item {
    border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-sm) 0;
    background: none;
    border: none;
    text-align: left;
    font-weight: 600;
    font-size: var(--fs-md);
    cursor: pointer;
    min-height: var(--touch-target-min);
}

.accordion-trigger-icon {
    transition: transform var(--duration-base) var(--ease-out);
}

.accordion-trigger[aria-expanded="true"] .accordion-trigger-icon {
    transform: rotate(45deg);
}

.accordion-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--duration-base) var(--ease-out);
}

.accordion-panel.is-open {
    max-height: 40rem;
}

.accordion-panel-inner {
    padding-bottom: var(--space-sm);
    color: var(--color-text-dim);
}

/* Toast / notification slide-in (§4b #14) */
.toast-region {
    position: fixed;
    left: 50%;
    bottom: var(--space-md);
    transform: translateX(-50%);
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    pointer-events: none;
}

.toast {
    padding: 0.75rem 1.2rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-sm);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.toast.is-visible {
    opacity: 1;
    transform: none;
}

/* Site footer */
.site-footer {
    padding:var(--space-xl) 0 0;
    color: var(--color-text-faint);
    font-size: var(--fs-xs);
}
.site-footer-card { position:relative; width:100%; overflow:hidden; border-top:1px solid var(--color-border); background:color-mix(in srgb,var(--color-surface-1) 94%,transparent); box-shadow:0 -1.5rem 4rem rgba(0,0,0,.12); }
.site-footer-card::before { content:""; position:absolute; top:-18rem; right:-8rem; width:34rem; height:34rem; border:1px solid var(--color-border-strong); border-radius:50%; opacity:.7; pointer-events:none; }
.site-footer-card::after { content:""; position:absolute; top:-11rem; right:4rem; width:21rem; height:25rem; border:1px solid color-mix(in srgb,var(--color-pop-pink) 52%,transparent); border-radius:50%; transform:rotate(31deg); pointer-events:none; }
.footer-callout { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; width:100%; max-width:var(--container-max); margin-inline:auto; padding:clamp(2rem,5vw,4.5rem); border-bottom:1px solid var(--color-border); }
.footer-callout h2 { margin:.5rem 0 0; font-family:var(--font-serif); font-size:clamp(3.4rem,7vw,7.5rem); line-height:.8; letter-spacing:-.03em; color:var(--color-text); }
.footer-callout .btn { flex:0 0 auto; }

.site-footer-inner {
    position:relative;
    z-index:1;
    display: grid;
    gap:clamp(2rem,6vw,5rem);
    width:100%;
    max-width:var(--container-max);
    margin-inline:auto;
    padding:clamp(2rem,4vw,3.5rem);
}

@media (min-width: 768px) {
    .site-footer-inner {
        grid-template-columns:minmax(15rem,.78fr) 2fr;
        align-items:start;
    }
}
.footer-brand > a { display:inline-flex; align-items:center; gap:.7rem; color:var(--color-text); }
.footer-brand p { max-width:23rem; margin:1rem 0 0; color:var(--color-text-dim); font-size:.78rem; line-height:1.65; }
.footer-brand .site-logomark { color:var(--color-text); }
.footer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg); }
.footer-grid nav { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.footer-grid strong { margin-bottom:.35rem; color:var(--color-text); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; }
.footer-grid a { position:relative; color:var(--color-text-dim); font-size:.78rem; }
.footer-grid a::after { content:"↗"; margin-left:.35rem; color:var(--color-accent); opacity:0; transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out); }
.footer-grid a:hover::after { opacity:1; transform:translate(.15rem,-.1rem); }
.footer-meta { position:relative; z-index:1; display:flex; justify-content:space-between; gap:1rem; width:100%; max-width:var(--container-max); margin:0 auto; padding:1rem clamp(2rem,4vw,3.5rem); border-top:1px solid var(--color-border); color:var(--color-text-faint); }
@media (min-width:768px) { .footer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

@media(max-width:767px){.footer-callout{align-items:flex-start;flex-direction:column}.footer-callout h2{font-size:clamp(3.2rem,15vw,5.2rem)}.footer-meta{flex-direction:column}.site-footer-card::before,.site-footer-card::after{opacity:.32}}

.site-footer a:hover {
    color: var(--color-text-dim);
}

/* Auth pages (login/register): centered narrow card */
.auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-lg) var(--space-sm);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    padding: var(--space-xl) var(--space-lg);
}

.auth-foot {
    margin-top: var(--space-md);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--color-text-dim);
}

.auth-foot a {
    color: var(--color-accent);
    font-weight: 600;
}

/* 404 page */
.error-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: var(--space-lg);
}

.error-code {
    font-size: clamp(4rem, 6rem + 6vw, 10rem);
    font-weight: 800;
    background: var(--color-accent-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

/* Editorial system derived from the supplied ideal-design film: generous
   off-white space, oversized type, graphic color fields and disciplined grids. */
.editorial-hero { padding-top:clamp(7rem, 14vw, 12rem); min-height:70vh; }
.display-title { max-width:12ch; font-size:var(--fs-hero); line-height:.91; letter-spacing:-.03em; font-weight:700; text-wrap:balance; }
.container-narrow { max-width:52rem; }
.collection-grid, .guide-grid { display:grid; grid-template-columns:1fr; gap:var(--space-sm); margin-top:var(--space-2xl); }
.collection-card, .guide-card { position:relative; min-height:18rem; padding:var(--space-lg); overflow:hidden; border-radius:var(--radius-xl); color:#111; display:flex; flex-direction:column; justify-content:space-between; transition:transform var(--duration-base) var(--ease-out); }
.collection-card h2, .guide-card h2 { max-width:10ch; margin:auto 0; font-family:var(--font-serif); font-size:clamp(2rem, 4vw, 4.5rem); line-height:.94; letter-spacing:-.03em; }
/* The base `p { color: var(--color-text-dim) }` rule in base.css targets the
   <p> element directly, which wins over the inherited #111 set above (a
   direct rule on an element always beats an inherited value, regardless of
   the ancestor's specificity) — that's what made the description text read
   as washed-out grey against these bright accent-panel backgrounds. */
.collection-card p, .guide-card p { color:#111; opacity:.72; }
.collection-index { font-size:var(--fs-xs); font-weight:700; }
.accent-panel-1 { background:var(--color-pop-orange); }
.accent-panel-2 { background:var(--color-pop-lime); }
.accent-panel-3 { background:var(--color-pop-pink); }
.accent-panel-4 { background:#8295ff; }
.guide-card, .guide-card a, .guide-card p, .guide-card .section-eyebrow { color:#090909; }
.guide-card p { opacity:.76; }
.guide-library-grid .guide-card { min-height:16rem; padding:clamp(1.4rem,3vw,2rem); }
.guide-library-grid .guide-card-index { align-self:flex-start; font-family:var(--font-sans); font-size:.72rem; font-weight:800; line-height:1; letter-spacing:.02em; color:#090909; }
.guide-library-grid .guide-card h2 { max-width:15ch; margin:auto 0; font-family:var(--font-serif); font-size:clamp(2rem,3.3vw,3.45rem); font-weight:700; line-height:.96; letter-spacing:-.045em; text-wrap:balance; }
.guide-library-grid .guide-card-action { align-self:flex-start; font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:800; line-height:1.2; color:#090909; }
.location-list { margin-top:var(--space-2xl); border-top:1px solid var(--color-border-strong); }
.location-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); padding:var(--space-md) 0; border-bottom:1px solid var(--color-border-strong); font-size:var(--fs-md); }
.location-row span:first-child { display:flex; flex-direction:column; }
.location-row small { color:var(--color-text-faint); font-size:var(--fs-xs); }
.editorial-grid { margin-top:var(--space-2xl); }
.profile-badges { display:flex; flex-wrap:wrap; gap:var(--space-2xs); margin-bottom:var(--space-sm); }
.photo-gallery-toggle-wrap { display:flex; justify-content:center; margin-top:var(--space-md); }
/* .card{display:flex} (cards.css) and the browser's built-in [hidden]{display:none}
   are equal specificity, and the author rule loads after the UA stylesheet, so
   .card always won and every "hidden" extra photo rendered anyway. Needs a more
   specific selector to actually take effect. */
[data-photo-gallery] [data-photo-gallery-extra][hidden] { display:none; }
.review-list { display:grid; gap:var(--space-sm); }
.review-card { padding:var(--space-md) 0; border-bottom:1px solid var(--color-border); }
.review-stars { color:var(--color-accent); letter-spacing:.1em; }
.review-card small, .profile-safety-actions { color:var(--color-text-faint); }
.review-form-wrap { margin-top:var(--space-md); }
.review-form-wrap summary { list-style:none; width:max-content; margin-bottom:var(--space-md); }
.article-page { padding-top:clamp(7rem, 14vw, 11rem); }
.article-body { font-size:var(--fs-md); line-height:1.75; }
.article-body p { margin-bottom:1.5em; }
.placeholder-copy { padding:var(--space-md); border:1px solid var(--color-warning); border-radius:var(--radius-md); }

/* Homepage editorial expansion — real-data discovery modules, kept in the
   shared sections layer so theme and breakpoint behavior stay centralized. */
.discovery-proof { border-block:1px solid var(--color-border); background:var(--color-surface-1); }
.discovery-proof-grid { display:grid; grid-template-columns:1fr 1fr; }
.discovery-proof-grid span { padding:var(--space-sm); color:var(--color-text-dim); font-size:var(--fs-xs); border-right:1px solid var(--color-border); }
.discovery-proof-grid strong { color:var(--color-accent); margin-right:.45rem; }
.section-head-split { display:grid; gap:var(--space-md); align-items:start; max-width:none; width:100%; }
.section-head-split > *:last-child { align-self:start; }
.section-head-split .section-lead { max-width:30rem; }
.location-showcase .section-head-split { align-items:end; }
.location-showcase .section-head-split > *:last-child { align-self:end; justify-self:end; }
.category-showcase .section-head-split .section-lead { margin-top:var(--space-lg); }
.editorial-category-grid { display:grid; gap:var(--space-sm); }
.editorial-category-card { min-height:13rem; padding:var(--space-lg); border-radius:var(--radius-xl); display:flex; flex-direction:column; justify-content:space-between; color:#111; overflow:hidden; transition:transform var(--duration-base) var(--ease-out); }
.editorial-category-card-1 { background:var(--color-pop-orange); }
.editorial-category-card-2 { background:var(--color-pop-pink); }
.editorial-category-card-3 { background:var(--color-pop-lime); }
.editorial-category-card h3 { font-family:var(--font-serif); font-size:var(--fs-xl); margin:var(--space-sm) 0; }
.editorial-category-number { font-size:var(--fs-xs); font-weight:800; }
.editorial-category-card > span:last-child { font-size:var(--fs-sm); font-weight:700; }
.location-ribbon { display:grid; border-top:1px solid var(--color-border); }
.location-ribbon-card { display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-md); align-items:center; padding:var(--space-md) 0; color:var(--color-text); border-bottom:1px solid var(--color-border); }
.location-ribbon-card small { display:block; color:var(--color-text-faint); margin-top:.25rem; }
.location-ribbon-index { color:var(--color-accent); font-size:var(--fs-xs); }
.location-ribbon-count { width:2.5rem; height:2.5rem; display:grid; place-items:center; border:1px solid var(--color-border-strong); border-radius:50%; }
.availability-section { background:var(--color-surface-1); }
.trust-manifesto-grid { display:grid; gap:var(--space-xl); }
.trust-manifesto-copy { max-width:42rem; }
.trust-manifesto-copy > p { color:var(--color-text-dim); font-size:var(--fs-md); margin-bottom:var(--space-lg); }
.trust-manifesto-panels { display:grid; gap:var(--space-sm); }
.trust-manifesto-panels article { padding:var(--space-lg); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface-1); }
.trust-manifesto-panels article > span { color:var(--color-accent); font-weight:800; }
.trust-manifesto-panels h3 { font-size:var(--fs-lg); margin:.8rem 0 .4rem; }
.trust-manifesto-panels p { color:var(--color-text-dim); margin:0; }
.provider-bridge-card { padding:clamp(1.5rem,5vw,4.5rem); border-radius:var(--radius-xl); background:var(--color-text); color:var(--color-bg); display:grid; gap:var(--space-xl); overflow:hidden; }
.provider-bridge-card .section-eyebrow { color:var(--color-pop-orange); }
.provider-bridge-card .section-title { color:inherit; }
.provider-bridge-card p { max-width:48rem; color:color-mix(in srgb,var(--color-pop-orange) 76%,var(--color-bg)); opacity:1; font-size:var(--fs-md); font-weight:600; line-height:1.6; }
.provider-bridge-actions { display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center; }
.provider-bridge-card .btn-ghost { border-color:color-mix(in srgb,currentColor 35%,transparent); color:inherit; }
.discovery-next { border-top:1px solid var(--color-border); }
.discovery-next-grid { display:grid; border-top:1px solid var(--color-border); }
.discovery-next-grid a { display:flex; flex-direction:column; gap:.45rem; padding:var(--space-lg) 0; color:var(--color-text); border-bottom:1px solid var(--color-border); }
.discovery-next-grid a > span { color:var(--color-accent); font-size:var(--fs-xs); font-weight:800; }
.discovery-next-grid a > strong { font-family:var(--font-serif); font-size:var(--fs-lg); }
.discovery-next-grid a > small { color:var(--color-text-dim); max-width:18rem; }
.process-grid { display:grid; gap:var(--space-sm); }
.process-grid .panel { margin:0; }
.profile-related { margin-top:var(--space-3xl); padding-top:var(--space-xl); border-top:1px solid var(--color-border); }
/* "From the Deeper Community": the creator's public Community photo/video posts */
.community-media { margin-top:var(--space-3xl); padding-top:var(--space-xl); border-top:1px solid var(--color-border); }
.community-media-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-xs); margin-top:var(--space-md); }
.community-media-item { position:relative; margin:0; aspect-ratio:1 / 1; overflow:hidden; border-radius:var(--radius-md, 14px); background:var(--color-surface-2, rgba(0,0,0,.06)); }
.community-media-item img, .community-media-item video { display:block; width:100%; height:100%; object-fit:cover; }
.community-media-more { position:absolute; top:.5rem; right:.5rem; padding:.15rem .55rem; border-radius:999px; background:rgba(0,0,0,.7); color:#fff; font-size:var(--fs-xs); font-weight:800; }
@media (min-width:768px) { .community-media-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-sm); } }

@media (hover:hover) and (pointer:fine) {
    .editorial-category-card:hover { transform:translateY(-6px) rotate(-.5deg); }
    .location-ribbon-card:hover strong { color:var(--color-accent); }
}

@media (min-width:768px) {
    .discovery-proof-grid { grid-template-columns:repeat(4,1fr); }
    .section-head-split { grid-template-columns:minmax(0,1fr) minmax(18rem,1fr); justify-content:space-between; }
    .section-head-split .section-lead { margin-left:auto; text-align:left; }
    .editorial-category-grid { grid-template-columns:repeat(6,1fr); }
    .editorial-category-card { grid-column:span 2; }
    /* Editorial rhythm: 3 narrow (span 2 x3 = 6/6) then 2 wide (span 3 x2 =
       6/6), repeating every 5 cards so each row always fills exactly. Tuned
       for the current category count (7) — a category added/removed later
       may leave a trailing row short a column; extend this list to match. */
    .editorial-category-card:nth-child(4), .editorial-category-card:nth-child(5),
    .editorial-category-card:nth-child(6), .editorial-category-card:nth-child(7) { grid-column:span 3; }
    .trust-manifesto-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; }
    .trust-manifesto-panels article:nth-child(2) { margin-left:var(--space-xl); }
    .provider-bridge-card { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
    .discovery-next-grid, .process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .discovery-next-grid a { padding:var(--space-lg); border-right:1px solid var(--color-border); }
}

@media (max-width:479px) {
    .discovery-proof-grid { grid-template-columns:1fr; }
    .discovery-proof-grid span { border-right:0; border-bottom:1px solid var(--color-border); }
}
/* Standalone /faq page — the plain <details class="accordion"> markup here
   had zero matching CSS anywhere (a different component from .accordion-item
   above and .home-faq-card below), so it rendered as a bare native disclosure
   triangle. Built to match .home-faq-card's language: neutral card at rest,
   a bold accent-pop colour block on [open], cycling per category the same
   way collection-card/guide-card cycle .accent-panel-1..3. */
.faq-group { margin-top:var(--space-xl); }
.faq-group h2 { display:flex; align-items:center; gap:.6rem; font-family:var(--font-serif); font-size:var(--fs-xl); margin:0 0 var(--space-sm); }
.faq-group h2::before { content:""; width:.6rem; height:.6rem; border-radius:50%; background:var(--color-accent-gradient); flex-shrink:0; }
.faq-group .accordion { margin:.6rem 0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-1); transition:border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.faq-group .accordion:hover { border-color:var(--color-border-strong); }
.faq-group .accordion summary { position:relative; display:flex; align-items:center; min-height:var(--touch-target-min); padding:var(--space-sm) 3.25rem var(--space-sm) var(--space-md); list-style:none; cursor:pointer; font-weight:700; font-size:var(--fs-md); color:var(--color-text); }
.faq-group .accordion summary::-webkit-details-marker { display:none; }
.faq-group .accordion summary::marker { content:""; }
.faq-group .accordion summary::before, .faq-group .accordion summary::after { content:""; position:absolute; right:calc(var(--space-md) + .42rem); top:50%; width:.85rem; height:1.5px; background:currentColor; transform:translate(50%,-50%); transition:transform var(--duration-base) var(--ease-out); }
.faq-group .accordion summary::after { transform:translate(50%,-50%) rotate(90deg); }
.faq-group .accordion[open] summary::after { transform:translate(50%,-50%) rotate(0deg); }
.faq-group .accordion > div { padding:0 var(--space-md) var(--space-md); }
.faq-group .accordion > div p { margin:0; color:var(--color-text-dim); font-size:var(--fs-sm); line-height:1.65; }
.faq-group:nth-of-type(3n+1) .accordion[open] { border-color:transparent; background:var(--color-pop-orange); }
.faq-group:nth-of-type(3n+2) .accordion[open] { border-color:transparent; background:var(--color-pop-lime); }
.faq-group:nth-of-type(3n) .accordion[open] { border-color:transparent; background:var(--color-pop-pink); }
.faq-group .accordion[open] summary { color:#090909; }
.faq-group .accordion[open] > div p { color:#090909; opacity:.76; }
@media (max-width:599px) { .faq-group .accordion summary { padding:var(--space-sm) 2.75rem var(--space-sm) var(--space-sm); font-size:var(--fs-sm); } .faq-group .accordion > div { padding:0 var(--space-sm) var(--space-sm); } }
.home-faq-shell { display:grid; grid-template-columns:minmax(17rem,.72fr) minmax(0,1.28fr); gap:clamp(2rem,6vw,6rem); padding:clamp(1.5rem,5vw,4.5rem); border:1px solid var(--color-border); border-radius:clamp(1.5rem,3vw,2.75rem); background:color-mix(in srgb,var(--color-surface-1) 92%,transparent); backdrop-filter:blur(12px); }
.home-faq-heading { align-self:start; }
.home-faq-heading h2 { margin:var(--space-xs) 0 var(--space-md); font-family:var(--font-serif); font-size:clamp(3.2rem,6vw,6rem); line-height:.84; letter-spacing:-.03em; }
.home-faq-heading p { max-width:27rem; font-size:var(--fs-sm); line-height:1.65; }
.home-faq-heading .btn { margin-top:var(--space-md); }
.home-faq-grid { align-self:center; }
.home-faq-card { margin:.45rem 0; overflow:hidden; border:1px solid var(--color-border); border-radius:1rem; background:color-mix(in srgb,var(--color-surface-2) 82%,transparent); transition:background-color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out); }
.home-faq-card summary { display:grid; grid-template-columns:2rem minmax(0,1fr) 2.5rem; gap:var(--space-xs); align-items:center; min-height:4.75rem; padding:.9rem 1rem; list-style:none; cursor:pointer; }
.home-faq-card summary::-webkit-details-marker { display:none; }
.home-faq-number { color:var(--color-accent); font-size:.7rem; font-weight:800; }
.home-faq-question { color:var(--color-text); font-size:var(--fs-base); font-weight:750; line-height:1.25; }
.home-faq-toggle { position:relative; width:2.25rem; height:2.25rem; border:1px solid var(--color-border-strong); border-radius:50%; }
.home-faq-toggle::before,.home-faq-toggle::after { content:""; position:absolute; top:50%; left:50%; width:.72rem; height:1.5px; background:currentColor; transform:translate(-50%,-50%); transition:transform var(--duration-base) var(--ease-out); }
.home-faq-toggle::after { transform:translate(-50%,-50%) rotate(90deg); }
.home-faq-answer { padding:0 4.5rem 1.25rem; }
.home-faq-answer p { margin:0; color:#090909; font-size:var(--fs-sm); line-height:1.65; }
.home-faq-card[open] { border-color:transparent; background:var(--color-pop-orange); color:#090909; transform:translateX(-.4rem); }
.home-faq-card[open] .home-faq-number,.home-faq-card[open] .home-faq-question { color:#090909; }
.home-faq-card[open] .home-faq-toggle { border-color:rgba(0,0,0,.3); }
.home-faq-card[open] .home-faq-toggle::after { transform:translate(-50%,-50%) rotate(0); }
@media(max-width:900px){.home-faq-shell{grid-template-columns:1fr}.home-faq-heading p{max-width:38rem}.home-faq-card[open]{transform:none}}
@media(max-width:599px){.home-faq-shell{padding:1rem}.home-faq-heading{padding:.6rem}.home-faq-heading h2{font-size:clamp(3rem,15vw,4.3rem)}.home-faq-card summary{grid-template-columns:1.5rem minmax(0,1fr) 2.25rem;padding:.8rem}.home-faq-answer{padding:0 1rem 1rem 3.3rem}}

/* Homepage closing pair — faithful to sample sections 9 and 3: a light
   browser-stage followed by a framed image mosaic with a black caption deck. */
.closing-browser-section { padding-bottom:clamp(5rem,10vw,9rem); }
.closing-browser {
    position:relative;
    min-height:clamp(44rem,58vw,50rem);
    overflow:hidden;
    border:1px solid rgba(9,9,9,.16);
    border-radius:clamp(1.35rem,3vw,2.5rem);
    background:#f3f1eb;
    color:#090909;
    box-shadow:0 2rem 5rem rgba(0,0,0,.28);
}
.closing-browser-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; min-height:4.25rem; padding:0 clamp(1rem,3vw,2.2rem); border-bottom:1px solid rgba(9,9,9,.12); font-size:.7rem; font-weight:750; }
.closing-browser-brand { display:flex; align-items:center; width:max-content; color:#090909; }
.closing-browser-nav { display:flex; gap:1rem; opacity:.6; }
.closing-browser-nav a { color:inherit; }
.closing-browser-nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:.25rem; }
.closing-browser-pill { justify-self:end; padding:.55rem 1rem; border-radius:999px; background:#090909; color:#fff; }
.closing-browser-copy { position:relative; z-index:2; display:flex; align-items:center; flex-direction:column; padding:clamp(3.5rem,5vw,5rem) 1.5rem 0; text-align:center; }
.closing-browser-copy .section-eyebrow { color:#c43c21; }
.closing-browser-copy h2 { max-width:none; margin:.7rem 0 1rem; font-family:var(--font-serif); font-size:clamp(3.25rem,5.2vw,5.5rem); line-height:.88; letter-spacing:-.03em; white-space:nowrap; }
.closing-browser-copy p { max-width:36rem; margin:0 0 1.25rem; color:rgba(9,9,9,.62); }
.closing-browser-copy .btn { border-color:#090909; }
.closing-browser-gallery { position:absolute; right:3%; bottom:-2rem; left:3%; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(2,clamp(7rem,10vw,9.5rem)); gap:clamp(.4rem,1vw,.8rem); transform:perspective(60rem) rotateX(3deg); }
.closing-browser-tile { overflow:hidden; border:1px solid rgba(9,9,9,.18); border-radius:.7rem; background:var(--color-pop-pink); }
.closing-browser-tile:nth-child(3n+1){background:var(--color-pop-orange)} .closing-browser-tile:nth-child(3n+2){background:var(--color-pop-lime)}
.closing-browser-tile img,.closing-editorial-tile img { width:100%; height:100%; object-fit:cover; }
.closing-browser-tile-1{grid-column:1/4;grid-row:1}.closing-browser-tile-2{grid-column:4/7;grid-row:1/3}.closing-browser-tile-3{grid-column:7/10;grid-row:1}.closing-browser-tile-4{grid-column:10/13;grid-row:1/3}.closing-browser-tile-5{grid-column:1/4;grid-row:2}.closing-browser-tile-6{grid-column:7/9;grid-row:2}.closing-browser-tile-7{grid-column:9/10;grid-row:2}
.closing-browser-search { position:absolute; z-index:4; right:5%; bottom:1.25rem; left:5%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; min-height:4.3rem; padding:.45rem .55rem .45rem 1rem; border:1px solid rgba(9,9,9,.14); border-radius:999px; background:rgba(255,255,255,.94); color:#090909; box-shadow:0 .8rem 2rem rgba(0,0,0,.18); backdrop-filter:blur(14px); }
.closing-browser-search-mark { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid rgba(9,9,9,.18); border-radius:50%; font-size:1.2rem; }
.closing-browser-search-mark svg { width:.95rem; height:.95rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.closing-browser-search label { min-width:0; }
.closing-browser-search input { width:100%; border:0; outline:0; background:transparent; color:#090909; font:inherit; }
.closing-browser-search input::placeholder { color:rgba(9,9,9,.48); }
.closing-browser-search button { min-height:3.25rem; padding:0 1.4rem; border:0; border-radius:999px; background:#090909; color:#fff; font:inherit; font-weight:750; cursor:pointer; }

.closing-editorial-section { padding-top:0; }
.closing-editorial-card { overflow:hidden; border:1px solid var(--color-border-strong); border-radius:clamp(1.35rem,3vw,2.5rem); background:#070709; box-shadow:0 2rem 5rem rgba(0,0,0,.24); }
.closing-editorial-mosaic { display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(2,minmax(12rem,22vw)); gap:.65rem; padding:.65rem; background:#111116; }
.closing-editorial-tile { position:relative; min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:1rem; background:var(--color-pop-pink); color:#fff; isolation:isolate; box-shadow:0 .8rem 2rem rgba(0,0,0,.18); }
.closing-editorial-tile:nth-child(3n+1){background:var(--color-pop-orange)} .closing-editorial-tile:nth-child(3n+2){background:var(--color-pop-lime)}
.closing-editorial-tile::after { content:""; position:absolute; inset:22% 0 0; z-index:1; background:linear-gradient(180deg,transparent 0%,rgba(5,5,7,.48) 34%,rgba(5,5,7,.94) 100%); pointer-events:none; }
.closing-editorial-tile img { transition:transform .65s var(--ease-out),filter .65s var(--ease-out); }
.closing-editorial-card-copy { position:absolute; z-index:2; right:clamp(.8rem,1.5vw,1.35rem); bottom:clamp(.8rem,1.5vw,1.35rem); left:clamp(.8rem,1.5vw,1.35rem); display:flex; align-items:flex-start; flex-direction:column; color:#fff; }
.closing-editorial-card-copy small { margin-bottom:.35rem; color:rgba(255,255,255,.7); font-size:.62rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.closing-editorial-card-copy strong { font-family:var(--font-serif); font-size:clamp(1.35rem,2.3vw,2.35rem); line-height:.92; letter-spacing:-.035em; overflow-wrap:anywhere; } /* long single names ("Whitcombe") wrap instead of clipping at the tile edge */
.closing-editorial-card-intro { display:-webkit-box; max-width:26rem; margin-top:.55rem; overflow:hidden; color:rgba(255,255,255,.72); font-size:.78rem; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.closing-editorial-card-button { display:inline-flex; align-items:center; gap:.55rem; margin-top:.9rem; padding:.52rem .7rem .52rem .85rem; border:1px solid rgba(255,255,255,.34); border-radius:999px; background:rgba(8,8,10,.54); font-size:.7rem; font-weight:800; backdrop-filter:blur(10px); transition:background-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out); }
.closing-editorial-card-button b { display:grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; background:#fff; color:#090909; font-size:.85rem; }
.closing-editorial-tile:hover img,.closing-editorial-tile:focus-visible img { transform:scale(1.045); filter:saturate(1.08) contrast(1.03); }
.closing-editorial-tile:hover .closing-editorial-card-button,.closing-editorial-tile:focus-visible .closing-editorial-card-button { border-color:#fff; background:#fff; color:#090909; }
.closing-editorial-mosaic.is-puzzle-paused .closing-editorial-tile { box-shadow:0 1rem 2.5rem rgba(0,0,0,.28); }
.closing-editorial-tile-1{grid-column:1/4;grid-row:1}.closing-editorial-tile-2{grid-column:4/7;grid-row:1/3}.closing-editorial-tile-3{grid-column:7/10;grid-row:1}.closing-editorial-tile-4{grid-column:10/13;grid-row:1}.closing-editorial-tile-5{grid-column:1/4;grid-row:2}.closing-editorial-tile-6{grid-column:7/9;grid-row:2}.closing-editorial-tile-7{grid-column:9/11;grid-row:2}.closing-editorial-tile-8{grid-column:11/13;grid-row:2}
.closing-editorial-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:clamp(1.5rem,4vw,3.25rem); color:#fff; }
.closing-editorial-footer .section-eyebrow { color:var(--color-pop-orange); }
.closing-editorial-footer h2 { margin:.3rem 0 .55rem; font-size:clamp(2.1rem,5vw,5.2rem); line-height:.9; letter-spacing:-.045em; }
.closing-editorial-footer p { margin:0; color:rgba(255,255,255,.58); }
.closing-editorial-action { display:flex; align-items:center; gap:.7rem; flex:0 0 auto; color:#fff; font-weight:750; }
.closing-editorial-action b { display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:50%; background:linear-gradient(135deg,var(--color-pop-orange),var(--color-pop-pink)); font-size:1.35rem; transition:transform var(--duration-base) var(--ease-out); }
.closing-editorial-action:hover b { transform:translate(4px,-4px); }

@media(max-width:760px){
    .closing-browser-bar{grid-template-columns:1fr auto}.closing-browser-nav{display:none}.closing-browser-copy{padding-top:3rem}.closing-browser-copy h2{white-space:normal}.closing-browser-gallery{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,9rem)}
    .closing-browser-tile-1{grid-column:1/3}.closing-browser-tile-2{grid-column:3/5}.closing-browser-tile-3{grid-column:5/7}.closing-browser-tile-4{grid-column:1/3;grid-row:2}.closing-browser-tile-5{grid-column:3/5;grid-row:2}.closing-browser-tile-6{grid-column:5/7;grid-row:2}.closing-browser-tile-7{display:none}
    .closing-editorial-mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,14rem)}.closing-editorial-tile{grid-column:auto!important;grid-row:auto!important}.closing-editorial-tile:nth-child(n+5){display:none}.closing-editorial-card-copy strong{font-size:1.35rem}.closing-editorial-card-intro{font-size:.7rem;-webkit-line-clamp:1}.closing-editorial-card-button{margin-top:.65rem}
    .closing-editorial-footer{align-items:flex-start;flex-direction:column}.closing-editorial-action{width:100%;justify-content:space-between}
}
@media(max-width:520px){
    .closing-browser{min-height:48rem}.closing-browser-copy{padding:2.5rem 1.1rem 0}.closing-browser-copy h2{font-size:clamp(2.8rem,14vw,4rem)}.closing-browser-copy p{font-size:.85rem}.closing-browser-search{grid-template-columns:auto 1fr;right:.75rem;bottom:.75rem;left:.75rem;border-radius:1.2rem}.closing-browser-search button{grid-column:1/-1;width:100%}
    .closing-editorial-mosaic{grid-template-rows:repeat(2,9.5rem);gap:.4rem;padding:.4rem}.closing-editorial-footer h2{font-size:2.5rem}.closing-editorial-action span{font-size:.9rem}
}
.story { margin-top:var(--space-2xl); }
.story-step { min-height:65vh; display:grid; align-content:center; grid-template-columns:minmax(3rem,.35fr) 1fr; gap:var(--space-sm); padding-block:var(--space-xl); border-top:1px solid var(--color-border-strong); opacity:.48; transition:opacity var(--duration-slow), transform var(--duration-slow); }
.story-step.is-current { opacity:1; transform:translateX(1rem); }
.story-step h2 { font-size:clamp(2.5rem, 7vw, 7rem); line-height:.9; letter-spacing:-.03em; }
.story-step p { grid-column:2; max-width:35rem; }
.admin-content-grid { display:grid; grid-template-columns:1fr; gap:var(--space-lg); margin-top:var(--space-lg); }
.admin-queue-item { padding-block:var(--space-md); border-bottom:1px solid var(--color-border); }
.admin-list-row, .inline-form { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); padding-block:var(--space-xs); }
.input-compact { min-height:38px; }
@media (min-width:768px) { .collection-grid,.guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .collection-card:first-child { grid-column:span 2; } .admin-content-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (hover:hover) and (pointer:fine) { .collection-card:hover,.guide-card:hover { transform:translateY(-6px) rotate(-.5deg); } }
.home-search { padding-block:var(--space-xl); }
.discovery-search { display:grid; gap:var(--space-sm); align-items:end; padding:var(--space-lg); border-radius:var(--radius-xl); background:var(--color-pop-lime); color:#111; }
.discovery-search h2 { margin:0; max-width:12ch; font-size:var(--fs-xl); letter-spacing:-.04em; }
.discovery-search .field { margin:0; }
.discovery-search .field-label { color:#3b3b22; }
.discovery-search .select { background:#fffff7; color:#111; border-color:rgba(0,0,0,.15); }
/* The themed dropdown button on the lime card mirrors the native .select above (light field, dark text). */
.discovery-search .themed-select-trigger { background:#fffff7; color:#111; border-color:rgba(0,0,0,.15); }
.discovery-search .themed-select-trigger:hover { border-color:rgba(0,0,0,.3); }
.discovery-search .themed-select-trigger[aria-expanded="true"] { background:#fff; border-color:var(--color-accent); }
.discovery-search .themed-select-chevron { border-right-color:#3b3b22; border-bottom-color:#3b3b22; }
@media (min-width:1024px) { .discovery-search { grid-template-columns:1.3fr 1fr 1fr auto; } }
/* v3.61: three footer groups */
@media (min-width:768px) { .footer-grid.footer-grid-3, .home-page .footer-grid.footer-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* v3.61: big serif headlines keep clear gaps between words */
.display-title, .h6-title, .footer-callout h2, .he-title, .browse-head-title { word-spacing: .08em; }

/* ---- home-responsive.css ---- */
/* Homepage-only responsive and theme polish.
   The visual system stays monochrome at foundation level in both themes;
   orange, pink and lime remain small editorial signals, never page chrome. */

.home-page .page-main {
    min-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: clip;
}

.home-page .section-title,
.home-page .discovery-hero-title,
.home-page .closing-browser-copy h2,
.home-page .closing-editorial-footer h2,
.home-page .home-faq-heading h2 {
    overflow-wrap: anywhere;
}

.home-page .section-head > *,
.home-page .section-head-split > *,
.home-page .process-heading > *,
.home-page .provider-bridge-card > *,
.home-page .closing-editorial-footer > * {
    min-width: 0;
}

.home-page .discovery-proof,
.home-page .home-search,
.home-page .availability-section,
.home-page .stats-band {
    position: relative;
    isolation: isolate;
}

.home-page .home-search::before,
.home-page .stats-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-block: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-1) 88%, transparent);
    backdrop-filter: blur(12px);
}

.home-page .discovery-search {
    border: 1px solid color-mix(in srgb, #000 18%, transparent);
    box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .12);
}

.home-page .discovery-search .btn {
    min-width: 9rem;
}

.home-page .editorial-category-card,
.home-page .guide-card,
.home-page .process-card {
    border: 1px solid rgba(0, 0, 0, .18);
}

.home-page .featured-marquee-card,
.home-page .closing-browser-tile,
.home-page .closing-editorial-tile {
    -webkit-tap-highlight-color: transparent;
}

.home-page .location-ribbon-card {
    min-height: 4.75rem;
}

.home-page .home-faq-card summary,
.home-page .closing-editorial-action,
.home-page .closing-browser-bar a {
    min-height: var(--touch-target-min);
}

.home-page .closing-browser-bar a,
.home-page .closing-editorial-action {
    display: inline-flex;
    align-items: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .home-page .discovery-hero {
        min-height: 50rem;
    }

    .home-page .hero-deck {
        width: min(100%, 52rem);
    }

    .home-page .discovery-search {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .discovery-search > div:first-child,
    .home-page .discovery-search > .btn {
        grid-column: 1 / -1;
    }

    .home-page .discovery-search > .btn {
        width: 100%;
    }

    .home-page .provider-bridge-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .home-page .provider-bridge-actions {
        justify-content: flex-start;
    }

    .home-page .closing-browser-copy h2 {
        white-space: normal;
        text-wrap: balance;
    }

    .home-page .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .home-page .section {
        padding-block: clamp(3.25rem, 14vw, 4.5rem);
    }

    .home-page .section-head {
        margin-bottom: 1.5rem;
    }

    .home-page .section-title,
    .home-page .display-title {
        max-width: 100%;
        font-size: clamp(2.65rem, 12.5vw, 4.25rem);
        line-height: .94;
        letter-spacing:-.03em;
        text-wrap: balance;
    }

    .home-page .section-lead {
        max-width: 38rem;
        font-size: 1rem;
    }

    .home-page .discovery-hero {
        padding-top: calc(var(--nav-height) + 2rem);
    }

    .home-page .discovery-hero-title {
        max-width: 10ch;
    }

    .home-page .hero-deck-track {
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        touch-action: pan-x pan-y;
    }

    .home-page .hero-profile-card {
        flex-basis: min(78vw, 19rem);
        border-radius: 1.35rem;
    }

    .home-page .featured-marquee {
        margin-inline: calc(0rem - var(--space-sm));
        -webkit-mask-image: none;
        mask-image: none;
    }

    .home-page .featured-marquee-row {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .home-page .featured-marquee-row::-webkit-scrollbar {
        display: none;
    }

    .home-page .featured-marquee-track,
    .home-page .featured-marquee-row-rtl .featured-marquee-track,
    .home-page .featured-marquee-row-ltr .featured-marquee-track {
        animation: none;
        transform: none;
    }

    .home-page .featured-marquee-card {
        width: min(72vw, 17rem);
        scroll-snap-align: center;
    }

    /* The duplicate card set only exists for the desktop CSS loop; in the
       phone swipe rail it made people appear twice. */
    .home-page .featured-marquee-card[aria-hidden="true"] {
        display: none;
    }

    .home-page .category-showcase .section-head-split .section-lead {
        margin-top: 0;
    }

    .home-page .location-showcase .section-head-split > *:last-child {
        justify-self: start;
    }

    .home-page .trust-manifesto-panels article,
    .home-page .provider-bridge-card,
    .home-page .home-faq-shell {
        border-radius: 1.35rem;
    }

    .home-page .provider-bridge-actions .btn {
        flex: 1 1 13rem;
    }

    .home-page .closing-browser {
        min-height: clamp(43rem, 160vw, 48rem);
    }

    .home-page .closing-browser-copy {
        align-items: flex-start;
        text-align: left;
    }

    .home-page .closing-browser-copy h2 {
        width: 100%;
        font-size: clamp(2.75rem, 13vw, 4.25rem);
        text-wrap: balance;
    }

    .home-page .closing-editorial-footer {
        gap: 1.25rem;
    }
}

@media (max-width: 479px) {
    .home-page .discovery-hero-actions,
    .home-page .provider-bridge-actions {
        width: 100%;
    }

    .home-page .discovery-hero-actions .btn,
    .home-page .provider-bridge-actions .btn {
        width: 100%;
    }

    .home-page .discovery-proof-grid span:last-child {
        border-bottom: 0;
    }

    .home-page .discovery-search {
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .home-page .discovery-search h2 {
        max-width: none;
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .home-page .discovery-search .btn {
        width: 100%;
    }

    .home-page .editorial-category-card {
        min-height: 11.5rem;
        padding: 1.25rem;
    }

    .home-page .editorial-category-card h3 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .home-page .location-ribbon-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .75rem;
    }

    .home-page .location-ribbon-card strong,
    .home-page .location-ribbon-card small {
        overflow-wrap: anywhere;
    }

    .home-page .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
    }

    .home-page .stats-band .stat {
        min-width: 0;
        padding: 1rem .65rem;
    }

    .home-page .home-faq-card summary {
        min-height: 4.25rem;
    }

    .home-page .closing-browser-bar {
        min-height: 3.75rem;
        padding-inline: .8rem;
    }

    .home-page .closing-browser-copy {
        padding-inline: 1rem;
    }

    .home-page .closing-browser-search {
        padding: .55rem;
    }

    .home-page .closing-browser-search-mark {
        margin-left: .25rem;
    }

    .home-page .closing-editorial-footer {
        padding: 1.25rem;
    }
}

@media (hover: none), (pointer: coarse) {
    .home-page .editorial-category-card,
    .home-page .process-card,
    .home-page .card,
    .home-page .closing-editorial-tile {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .featured-marquee-row {
        overflow-x: auto;
    }
}

/* ---- public-pages.css ---- */
.story-page { padding:calc(var(--nav-height) + var(--space-xl)) 0 var(--space-3xl); }
.story-page-hero { position:relative; overflow:hidden; padding:clamp(2rem,6vw,5rem); border:1px solid var(--color-border); border-radius:clamp(1.5rem,4vw,3rem); background:linear-gradient(135deg,color-mix(in srgb,var(--color-pop-lime) 18%,var(--color-surface-1)),color-mix(in srgb,var(--color-pop-pink) 12%,var(--color-surface-1))); }
.story-page-hero::after { content:""; position:absolute; width:18rem; height:18rem; right:-5rem; bottom:-11rem; border-radius:50%; background:var(--color-pop-orange); opacity:.25; }
.story-page-hero h1 { position:relative; z-index:1; max-width:12ch; margin:var(--space-xs) 0; font-family:var(--font-serif); font-size:clamp(3rem,8vw,7rem); line-height:.9; letter-spacing:-.045em; }
.story-page-hero p { position:relative; z-index:1; max-width:44rem; color:var(--color-text-dim); font-size:var(--fs-md); }
.story-layout { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:clamp(2rem,7vw,7rem); margin-top:var(--space-xl); align-items:start; }
.story-nav { position:sticky; top:calc(var(--nav-height) + var(--space-md)); display:grid; gap:.35rem; }
.story-nav a { padding:.65rem .8rem; border-radius:var(--radius-pill); color:var(--color-text-dim); font-size:var(--fs-xs); }
.story-nav a:hover { background:var(--color-accent-soft); color:var(--color-text); }
.story-content { max-width:52rem; }
.story-content > p { padding:0 0 var(--space-md); margin:0 0 var(--space-md); border-bottom:1px solid var(--color-border); color:var(--color-text-dim); font-size:var(--fs-base); line-height:1.75; }
.story-content > p:first-child { color:var(--color-text); font-family:var(--font-serif); font-size:var(--fs-lg); line-height:1.45; }
.story-source-card { margin-top:var(--space-lg); padding:var(--space-md); border-radius:var(--radius-xl); background:var(--color-surface-2); }
.story-source-card h2 { margin:0 0 var(--space-xs); font-size:var(--fs-md); }
.story-source-country { margin: var(--space-sm) 0 var(--space-2xs); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-faint); }
.story-source-links { display:flex; flex-wrap:wrap; gap:var(--space-xs); }
.contact-studio { margin-top:var(--space-xl); padding:clamp(1.25rem,4vw,2.5rem); border-radius:var(--radius-xl); background:var(--color-surface-1); border:1px solid var(--color-border); }
.editorial-hero { position:relative; overflow:hidden; padding-top:calc(var(--nav-height) + var(--space-xl)); }
.editorial-hero::before { content:""; position:absolute; width:18rem; height:18rem; top:5rem; right:-8rem; border-radius:50%; background:var(--color-pop-lime); opacity:.16; filter:blur(12px); pointer-events:none; }
.editorial-hero .display-title { max-width:13ch; }
.collection-card,.guide-card,.panel { transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out); }
.collection-card:hover,.guide-card:hover { transform:translateY(-6px) rotate(-.35deg); box-shadow:var(--shadow-lg); }

/* ---- /directory: search bar + "show all cities" reveal ---- */
.directory-search { display:flex; gap:var(--space-xs); max-width:34rem; margin:var(--space-lg) 0; }
.directory-search input { flex:1; min-width:0; padding:.8rem 1.1rem; border-radius:var(--radius-pill); border:1px solid var(--color-border-strong); background:var(--color-surface-1); color:var(--color-text); font-size:var(--fs-sm); }
.directory-search input:focus-visible { outline:2px solid var(--color-accent); outline-offset:1px; }
.directory-search .btn { border-radius:var(--radius-pill); }
.directory-reveal { margin-top:var(--space-lg); }
.directory-reveal summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); max-width:22rem; padding:.85rem 1.1rem; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); list-style:none; cursor:pointer; font-weight:700; font-size:var(--fs-sm); color:var(--color-text); transition:background var(--duration-fast) var(--ease-out); }
.directory-reveal summary::-webkit-details-marker { display:none; }
.directory-reveal summary:hover { background:var(--color-surface-2); }
.directory-reveal-icon { position:relative; flex-shrink:0; width:1rem; height:1rem; }
.directory-reveal-icon::before,.directory-reveal-icon::after { content:""; position:absolute; top:50%; left:50%; background:currentColor; transform:translate(-50%,-50%); transition:transform var(--duration-fast) var(--ease-out); }
.directory-reveal-icon::before { width:.65rem; height:2px; }
.directory-reveal-icon::after { width:2px; height:.65rem; }
.directory-reveal[open] .directory-reveal-icon::after { transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.directory-city-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:var(--space-xs); margin-top:var(--space-md); }
.directory-city-chip { display:grid; gap:.2rem; padding:.75rem .9rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-1); transition:border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.directory-city-chip:hover { border-color:var(--color-accent); transform:translateY(-2px); }
.directory-city-chip strong { font-family:var(--font-serif); font-size:var(--fs-md); color:var(--color-text); }
.directory-city-chip span { font-size:var(--fs-xs); color:var(--color-text-dim); }
.playful-band { border-block:1px solid var(--color-border); background:color-mix(in srgb,var(--color-pop-orange) 8%,var(--color-bg)); }
.browse-page,.profile-page { padding-top:calc(var(--nav-height) + var(--space-xl)); }
.profile-page > .container > .section-head { padding:clamp(1.5rem,5vw,4rem); border-radius:var(--radius-xl); background:linear-gradient(125deg,color-mix(in srgb,var(--color-pop-pink) 13%,var(--color-surface-1)),color-mix(in srgb,var(--color-pop-lime) 15%,var(--color-surface-1))); }
.profile-page > .container > .section-head .section-title { font-family:var(--font-serif); font-size:clamp(3.2rem,8vw,7rem); line-height:.9; }
.profile-details-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-xs); margin-bottom:var(--space-sm); }
.profile-details-head .panel-title { margin:0; }
.profile-mode-badge { padding:.3rem .75rem; border-radius:999px; border:1px solid var(--color-border-strong); font-size:var(--fs-xs); color:var(--color-text-dim); white-space:nowrap; }
.profile-details-panel .stat { position:relative; transition:border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.stat-icon { display:inline-flex; margin-bottom:.35rem; color:var(--color-text-faint); }
.stat-rate .stat-icon { color:var(--color-accent); }
/* Rate cards get the site's own accent-gradient treatment (border + soft
   glow, same tokens the homepage's accent panels use) so the money figures
   read as the premium/primary information on the card, not just another
   grey box identical to Location/Languages. */
.profile-details-panel .stat-rate { border-color:var(--color-border-strong); background:linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 7%, var(--color-surface-1)), var(--color-surface-1) 65%); box-shadow:var(--shadow-glow-accent); }
@media (hover:hover) and (pointer:fine) {
    .profile-details-panel .stat-rate:hover { transform:translateY(-3px); box-shadow:var(--shadow-glow-accent-lg); }
}
.profile-details-chips { margin-top:var(--space-md); padding-top:var(--space-md); border-top:1px solid var(--color-border); }
.profile-details-chips-label { display:block; margin-bottom:var(--space-2xs); color:var(--color-text-faint); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.profile-elsewhere-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:var(--space-sm); margin-top:var(--space-sm); }
.profile-elsewhere-card { display:flex; align-items:center; gap:var(--space-xs); padding:var(--space-sm) var(--space-md); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-2); color:var(--color-text); transition:transform var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out); }
.profile-elsewhere-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.profile-elsewhere-icon { display:grid; place-items:center; flex-shrink:0; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--color-surface-3); }
.profile-elsewhere-label { flex:1; font-weight:600; font-size:var(--fs-sm); }
.profile-elsewhere-arrow { color:var(--color-text-faint); transition:transform var(--duration-fast) var(--ease-out); }
.profile-elsewhere-card:hover .profile-elsewhere-arrow { transform:translate(2px,-2px); }
.profile-elsewhere-instagram:hover { border-color:#e1306c; } .profile-elsewhere-instagram .profile-elsewhere-icon { color:#e1306c; }
.profile-elsewhere-snapchat:hover { border-color:#c7b500; } .profile-elsewhere-snapchat .profile-elsewhere-icon { color:#c7b500; }
.profile-elsewhere-onlyfans:hover { border-color:#00aeef; } .profile-elsewhere-onlyfans .profile-elsewhere-icon { color:#00aeef; }
.profile-elsewhere-bluesky:hover { border-color:#1185fe; } .profile-elsewhere-bluesky .profile-elsewhere-icon { color:#1185fe; }
@media (max-width:560px) { .profile-elsewhere-grid { grid-template-columns:1fr; } }
.auth-shell { min-height:calc(100svh - var(--nav-height)); padding:calc(var(--nav-height) + var(--space-xl)) 0 var(--space-2xl); background:radial-gradient(circle at 15% 20%,var(--color-accent-soft),transparent 32%),radial-gradient(circle at 85% 75%,color-mix(in srgb,var(--color-pop-lime) 24%,transparent),transparent 28%); }
.auth-card,.auth-panel { position:relative; overflow:hidden; max-width:42rem; margin-inline:auto; padding:clamp(1.5rem,5vw,3rem); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); }
.auth-card::before,.auth-panel::before { content:""; position:absolute; width:7rem; height:.65rem; top:0; left:2rem; border-radius:0 0 var(--radius-pill) var(--radius-pill); background:var(--color-accent-gradient); }
.auth-card form .choice-card,.auth-panel form .choice-card { margin-bottom:var(--space-md); }
.article-stage { padding:calc(var(--nav-height) + var(--space-xl)) 0 var(--space-3xl); }
.article-stage-head { padding:clamp(1.5rem,6vw,5rem); border-radius:var(--radius-xl); background:color-mix(in srgb,var(--color-pop-lime) 16%,var(--color-surface-1)); }
.article-stage-head h1 { max-width:13ch; margin:var(--space-xs) 0; font-family:var(--font-serif); font-size:clamp(3rem,7vw,6rem); line-height:.92; }
.article-stage-body { display:grid; grid-template-columns:minmax(0,1fr) 13rem; gap:var(--space-xl); max-width:58rem; margin:var(--space-xl) auto 0; }
.article-stage-copy p { color:var(--color-text-dim); font-size:var(--fs-base); line-height:1.8; }
.article-stage-copy p:first-child { color:var(--color-text); font-family:var(--font-serif); font-size:var(--fs-lg); }
.article-stage-aside { position:sticky; top:calc(var(--nav-height) + var(--space-md)); align-self:start; padding:var(--space-md); border-top:2px solid var(--color-text); }
.not-found-stage { min-height:85svh; display:grid; place-items:center; padding:calc(var(--nav-height) + var(--space-xl)) var(--space-md) var(--space-xl); text-align:center; }
.not-found-code { display:block; font-family:var(--font-serif); font-size:clamp(8rem,28vw,22rem); font-weight:700; line-height:.65; color:color-mix(in srgb,var(--color-pop-pink) 40%,var(--color-text)); }

/* Browse discovery stage: compact editorial hero + one unified filter rail. */
.browse-hero { position:relative; isolation:isolate; min-height:clamp(19rem,34vw,27rem); display:flex; align-items:center; overflow:hidden; padding:clamp(2rem,6vw,5.5rem); border:1px solid var(--color-border); border-radius:clamp(1.5rem,3vw,2.75rem); background:linear-gradient(120deg,color-mix(in srgb,var(--color-pop-orange) 13%,var(--color-surface-1)) 0%,color-mix(in srgb,var(--color-pop-lime) 11%,var(--color-surface-1)) 62%,var(--color-surface-1) 100%); }
.browse-hero::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 77% 18%,color-mix(in srgb,var(--color-pop-pink) 22%,transparent),transparent 25%),linear-gradient(90deg,transparent 49.8%,color-mix(in srgb,var(--color-border) 42%,transparent) 50%,transparent 50.2%); }
.browse-hero-copy { position:relative; z-index:2; }
.browse-hero-copy h1 { max-width:11ch; margin:.5rem 0 var(--space-md); font-family:var(--font-serif); font-size:clamp(3.4rem,7vw,7rem); line-height:.82; letter-spacing:-.03em; }
.browse-hero-copy h1 span { color:var(--color-pop-pink); }
.browse-hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; color:var(--color-text-dim); font-size:var(--fs-sm); }
.browse-hero-meta strong { color:var(--color-text); }
.browse-hero-orbit { position:absolute; z-index:-1; display:block; border:1px solid color-mix(in srgb,var(--color-text) 14%,transparent); border-radius:50%; }
.browse-hero-orbit-one { width:28rem; height:28rem; right:-5rem; top:-9rem; }
.browse-hero-orbit-two { width:18rem; height:18rem; right:4rem; bottom:-10rem; }
.browse-hero-mark { position:absolute; right:clamp(3rem,9vw,9rem); top:50%; width:15rem; height:16rem; transform:translateY(-52%); }
.browse-hero-mark i { position:absolute; inset:1.5rem 2.5rem; display:block; border:1px solid color-mix(in srgb,var(--color-text) 22%,transparent); border-radius:2.25rem; background:color-mix(in srgb,var(--color-surface-2) 76%,transparent); box-shadow:var(--shadow-lg); }
.browse-hero-mark i:nth-child(1) { transform:rotate(-13deg) translateX(-1.7rem); background:color-mix(in srgb,var(--color-pop-orange) 38%,var(--color-surface-2)); }
.browse-hero-mark i:nth-child(2) { transform:rotate(11deg) translateX(1.6rem); background:color-mix(in srgb,var(--color-pop-lime) 28%,var(--color-surface-2)); }
.browse-hero-mark i:nth-child(3) { transform:rotate(-1deg); background:linear-gradient(160deg,color-mix(in srgb,var(--color-pop-pink) 50%,var(--color-surface-1)),var(--color-surface-2)); }
/* A real stack of 3 overlapping cards leaves the back two mostly covered by
   the front one, so their clickable centers land under the top card. Each
   card gets its own footprint (not a shared inset) so its click target sits
   where the eye actually lands on it, not just where it peeks out. */
.browse-hero-mark.browse-hero-mark-live { width:20rem; }
.browse-hero-mark-live a { position:absolute; display:block; width:8.25rem; height:10.75rem; overflow:hidden; border:1px solid color-mix(in srgb,var(--color-text) 22%,transparent); border-radius:1.75rem; box-shadow:var(--shadow-lg); transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out); }
.browse-hero-mark-live a img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.browse-hero-mark-live a:nth-child(1) { left:0; top:2.75rem; transform:rotate(-11deg); z-index:1; }
.browse-hero-mark-live a:nth-child(2) { right:0; top:2.75rem; transform:rotate(9deg); z-index:1; }
.browse-hero-mark-live a:nth-child(3) { left:50%; top:0; width:8.75rem; height:11.5rem; transform:translateX(-50%) rotate(-1deg); z-index:2; }
.browse-hero-mark-live a:hover, .browse-hero-mark-live a:focus-visible { box-shadow:0 1.5rem 3rem rgba(0,0,0,.4); z-index:3; }
.browse-hero-mark-live a:nth-child(1):hover, .browse-hero-mark-live a:nth-child(1):focus-visible { transform:rotate(0deg) scale(1.06); }
.browse-hero-mark-live a:nth-child(2):hover, .browse-hero-mark-live a:nth-child(2):focus-visible { transform:rotate(0deg) scale(1.06); }
.browse-hero-mark-live a:nth-child(3):hover, .browse-hero-mark-live a:nth-child(3):focus-visible { transform:translateX(-50%) rotate(0deg) scale(1.06); }
.browse-search-rail { position:relative; z-index:3; display:grid; grid-template-columns:minmax(15rem,2fr) minmax(9.5rem,1fr) minmax(10rem,1fr) minmax(7.5rem,.65fr) auto; align-items:stretch; margin:-2.15rem clamp(1rem,3vw,2.5rem) 0; padding:.45rem; border:1px solid var(--color-border-strong); border-radius:1.4rem; background:color-mix(in srgb,var(--color-surface-1) 95%,transparent); box-shadow:0 1.5rem 4rem rgba(0,0,0,.28); backdrop-filter:blur(18px); transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out); }
.browse-search-field { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.18rem; padding:.55rem 1rem; border-right:1px solid var(--color-border); }
.browse-search-field label { color:var(--color-text-faint); font-size:.66rem; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.browse-search-field input,.browse-search-field select { width:100%; min-width:0; padding:0; border:0; outline:0; background:transparent; color:var(--color-text); font-size:var(--fs-sm); line-height:1.35; }
.browse-search-field input::placeholder { color:var(--color-text-faint); }
.browse-search-field select { cursor:pointer; }
.browse-search-field select option { color:var(--color-text); background:var(--color-surface-1); }
.browse-search-select { position:relative; }
.browse-search-select .themed-select-trigger { display:none; width:100%; align-items:center; justify-content:space-between; gap:.75rem; padding:0; border:0; background:transparent; color:var(--color-text); font:inherit; font-size:var(--fs-sm); text-align:left; cursor:pointer; }
.browse-search-select .themed-select-chevron { width:.48rem; height:.48rem; flex:0 0 auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; color:var(--color-text-dim); transform:rotate(45deg) translateY(-2px); transition:transform var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out); }
.browse-search-select.is-enhanced > select { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.browse-search-select.is-enhanced .themed-select-trigger { display:flex; }
.browse-search-select.is-open .themed-select-chevron { color:var(--color-accent); transform:rotate(225deg) translate(-2px,-2px); }
.themed-select-menu { position:absolute; z-index:20; top:calc(100% + .85rem); left:.35rem; width:max(calc(100% - .7rem),14rem); max-height:18rem; overflow:auto; padding:.42rem; border:1px solid var(--color-border-strong); border-radius:1rem; background:color-mix(in srgb,var(--color-surface-1) 97%,transparent); box-shadow:0 1.2rem 3rem rgba(0,0,0,.38); backdrop-filter:blur(20px); }
.themed-select-menu[hidden] { display:none; }
.themed-select-menu button { position:relative; width:100%; min-height:2.75rem; padding:.68rem 2.1rem .68rem .85rem; border:0; border-radius:.7rem; background:transparent; color:var(--color-text-dim); font:inherit; font-size:var(--fs-sm); text-align:left; cursor:pointer; transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out); }
.themed-select-menu button:hover,.themed-select-menu button:focus-visible { outline:0; background:var(--color-surface-3); color:var(--color-text); transform:translateX(2px); }
.themed-select-menu button[aria-selected="true"] { background:color-mix(in srgb,var(--color-accent) 16%,var(--color-surface-2)); color:var(--color-text); font-weight:700; }
.themed-select-menu button[aria-selected="true"]::after { content:""; position:absolute; right:.9rem; top:50%; width:.5rem; height:.5rem; border-radius:50%; background:var(--color-accent-gradient); box-shadow:0 0 0 4px var(--color-accent-soft); transform:translateY(-50%); }
.themed-select-menu::-webkit-scrollbar { width:.45rem; }
.themed-select-menu::-webkit-scrollbar-thumb { border-radius:var(--radius-pill); background:var(--color-border-strong); }
.browse-search-rail:focus-within { border-color:color-mix(in srgb,var(--color-accent) 60%,var(--color-border)); box-shadow:0 1.5rem 4rem rgba(0,0,0,.28),0 0 0 4px var(--color-accent-soft); }
.browse-search-submit { display:flex; align-items:center; justify-content:center; gap:.7rem; min-width:10rem; padding:.8rem 1.15rem; border:0; border-radius:1rem; background:var(--color-accent-gradient); color:#fff; font-size:var(--fs-xs); font-weight:800; cursor:pointer; transition:transform var(--duration-base) var(--ease-out),filter var(--duration-base) var(--ease-out); }
.browse-search-submit:hover { transform:translateY(-2px); filter:saturate(1.12) brightness(1.04); }
.browse-search-submit span:last-child { font-size:1.15rem; }
.browse-active-state { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-xs); padding:.7rem clamp(1rem,3vw,2.5rem) 0; color:var(--color-text-dim); font-size:var(--fs-xs); }
.browse-active-state a { color:var(--color-accent); font-weight:700; }
@media(max-width:899px){.browse-hero{align-items:flex-start;padding-bottom:5rem}.browse-hero-mark{right:1rem;top:auto;bottom:-3.5rem;transform:scale(.72)}.browse-search-rail{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-3.25rem}.browse-search-query{grid-column:1/-1}.browse-search-field:nth-child(3){border-right:0}.browse-search-submit{min-height:3.65rem}.browse-search-rate{border-right:1px solid var(--color-border)}}
@media(max-width:599px){.browse-hero{min-height:21rem;padding:2rem 1.4rem 5.5rem}.browse-hero-copy h1{font-size:clamp(3rem,17vw,4.4rem)}.browse-hero-mark{opacity:.42;right:-3rem}.browse-hero-meta span:last-child,.browse-hero-meta span[aria-hidden]{display:none}.browse-search-rail{grid-template-columns:1fr;margin-inline:.65rem;padding:.35rem;border-radius:1.25rem}.browse-search-query{grid-column:auto}.browse-search-field,.browse-search-field:nth-child(3),.browse-search-rate{min-height:3.6rem;border-right:0;border-bottom:1px solid var(--color-border)}.browse-search-submit{min-width:0}.browse-active-state{justify-content:space-between}.themed-select-menu{left:0;width:100%;top:calc(100% + .35rem)}}
@media(max-width:767px){.article-stage-body{grid-template-columns:1fr}.article-stage-aside{position:static}.browse-page .search-bar{border-radius:var(--radius-xl)}}
@media(max-width:767px){.story-layout{grid-template-columns:1fr}.story-nav{position:static;display:flex;overflow-x:auto;scrollbar-width:none}.story-nav::-webkit-scrollbar{display:none}.story-nav a{flex:0 0 auto}.story-page-hero{text-align:left}}
.browse-hero-description { max-width: 38rem; margin: var(--space-xs) 0 0; color: var(--color-text-dim); line-height: 1.6; }

/* Browse refine row (v3.54): who to show + sort, as plain links */
.browse-refine { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-xs) var(--space-md); padding:var(--space-sm) clamp(1rem,3vw,2.5rem) 0; }
.browse-refine-group { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.browse-refine-label { margin-right:.25rem; color:var(--color-text-faint); font-size:.66rem; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.browse-refine-chip { display:inline-flex; align-items:center; padding:.42rem .85rem; border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface-1); color:var(--color-text-dim); font-size:var(--fs-xs); font-weight:600; text-decoration:none; transition:border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out); }
.browse-refine-chip:hover { border-color:var(--color-border-strong); color:var(--color-text); }
.browse-refine-chip.is-active { border-color:transparent; background:var(--color-accent-gradient); color:#fff; }
.browse-notice { margin:var(--space-sm) clamp(1rem,3vw,2.5rem) 0; padding:var(--space-sm) var(--space-md); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-1); color:var(--color-text-dim); font-size:var(--fs-sm); }
.browse-notice p { margin:0 0 .6rem; }
.browse-notice-quiet { padding:0; border:0; background:none; font-size:var(--fs-xs); }
.browse-notice-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.browse-empty p { margin:0 0 .4rem; }
.browse-empty a { color:var(--color-accent); }
@media(max-width:599px){ .browse-refine { padding-inline:.65rem; } .browse-refine-group { flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:.2rem; scrollbar-width:none; } .browse-refine-group::-webkit-scrollbar { display:none; } .browse-refine-chip { flex:0 0 auto; } .browse-notice { margin-inline:.65rem; } }

/* Display-currency estimate next to a price (v3.57): visibly secondary. */
.money-approx { margin-left: .3rem; color: var(--color-text-faint); font-size: .85em; font-weight: 500; white-space: nowrap; }

/* v3.60c — phone browse hero: the headline and lead stay inside the card,
   and the decorative photo fan (which sat over "N profiles found") is hidden. */
@media (max-width: 599px) {
    .browse-hero-copy { min-width: 0; max-width: 100%; }
    .browse-hero-copy h1 { font-size: clamp(2.6rem, 14.5vw, 4.4rem); letter-spacing: -.045em; }
    .browse-hero-description { overflow-wrap: anywhere; }
    .browse-hero-mark { display: none; }
}

/* v3.60c — sign-in/join glow fades into the page instead of stopping at a
   straight edge top and bottom; the lime glow is softer (it read muddy). */
.auth-shell { position: relative; isolation: isolate; background: none; }
.auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 15% 20%, var(--color-accent-soft), transparent 32%), radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--color-pop-lime) 13%, transparent), transparent 30%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent);
}
/* Phone: the sign-in/join card keeps a 16px gutter instead of touching the screen edges. */
@media (max-width: 600px) { .auth-shell { padding-inline: 1rem; } }

/* v3.61 compact /browse header (replaces the big hero) */
.browse-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem 1rem; margin:0 0 var(--space-md); }
.browse-head-title { margin:0; font-family:var(--font-serif); font-size:clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height:1.05; letter-spacing:-.02em; }
.browse-head-count { margin:0; color:var(--color-text-dim); font-size:var(--fs-sm); }
.browse-head-count strong { color:var(--color-text); }
.browse-page .browse-head + .browse-search-rail { margin-top:0; }

/* v3.61 companion sign-up: what happens next */
.register-steps { margin:var(--space-sm) 0 var(--space-md); padding-left:1.3rem; list-style:decimal; display:grid; gap:.45rem; color:var(--color-text-dim); font-size:var(--fs-sm); line-height:1.5; }
.register-steps strong { color:var(--color-text); }

/* v3.61 /browse: less space above the compact header, and phone filters behind "More filters". */
.page-main > .browse-page { padding-top: var(--space-md); }
.browse-more-toggle { display:none; }
@media (max-width:599px) {
  .browse-search-rail:not(.is-expanded) .browse-more-field { display:none; }
  .browse-more-toggle { display:flex; align-items:center; justify-content:center; min-height:var(--touch-target-min); padding:.5rem 1rem; border:1px dashed var(--color-border-strong); border-radius:var(--radius-pill); background:transparent; color:var(--color-text); font:inherit; font-weight:600; cursor:pointer; }
  .browse-search-rail.is-expanded .browse-more-toggle { border-style:solid; }
}

/* v3.61 How it works: one short page, two audiences. */
.hiw.editorial-hero { min-height:0; }
.hiw .section-title { margin-bottom:var(--space-xs); }
.hiw-columns { display:grid; gap:var(--space-md); margin-top:var(--space-lg); }
@media (min-width:860px) { .hiw-columns { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hiw-columns > .hiw-col, .hiw-columns > .hiw-col + .hiw-col { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-sm); margin:0; }
.hiw-col h2, .hiw-note h2 { margin:0; font-size:var(--fs-lg, 1.35rem); }
.hiw-steps { margin:0; padding-left:1.4rem; display:grid; gap:.6rem; list-style:decimal; color:var(--color-text-dim); line-height:1.55; }
.hiw-steps li::marker { color:var(--color-accent); font-weight:700; }
.hiw-steps strong { color:var(--color-text); }
.hiw-col .btn { margin-top:auto; }
.hiw-note { margin-top:var(--space-lg); max-width:46rem; }
.hiw-note p { margin:.5rem 0 0; color:var(--color-text-dim); line-height:1.6; }
/* v3.61: the Show/Sort chip rows scroll sideways on phones — fade the edge so that is visible. */
@media(max-width:599px){ .browse-refine-group { -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); padding-right:1.5rem; } }

.hiw-note-text { margin: 0; color: var(--color-text-dim); line-height: 1.6; }
.hiw-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }

/* SEO Step 6: contextual related-links block under listing pages (partial
   partials/related-links.php) — nearby cities, venues here, top cities. */
.related-links { padding-top: 0; }
.related-links-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.related-links-title { margin: 0 0 var(--space-xs); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); font-family: var(--font-sans, inherit); }
.related-links-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.related-links-group a { display: inline-flex; align-items: baseline; gap: 0.45rem; color: var(--color-text-dim); text-decoration: none; line-height: 1.5; min-height: var(--touch-target-min); align-items: center; }
.related-links-group a:hover { color: var(--color-accent); }
.related-links-group a small { color: var(--color-text-faint); font-size: var(--fs-xs); }

/* ---- monetization.css ---- */
.creator-club{position:relative;margin-top:var(--space-xl);padding:clamp(1.25rem,4vw,3rem);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);background:var(--color-surface-1);overflow:hidden;isolation:isolate}
.creator-club-glow{position:absolute;inset:-40% -20% auto -20%;height:26rem;background:var(--color-accent-gradient);filter:blur(90px);opacity:.22;pointer-events:none;z-index:-1}
.creator-club-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-lg)}
.creator-club-head .section-title{font-size:clamp(var(--fs-xl),3vw,var(--fs-2xl));margin-block:.25rem;background:var(--color-accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.creator-club-head>div:first-child{max-width:48rem}
.creator-club-proof{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);margin-top:var(--space-sm)}
.creator-club-stat{font-size:var(--fs-sm);color:var(--color-text-dim)}.creator-club-stat strong{color:var(--color-text);font-family:var(--font-serif);font-size:var(--fs-md)}
.creator-membership-active{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem var(--space-md);border-radius:999px;background:var(--color-pop-lime);color:var(--color-on-pop);font-weight:700;white-space:nowrap}
/* Plan and locked-post cards intentionally reuse .accent-panel-1..4 (defined in
   sections.css, loaded before this file) for their background — the same
   editorial colour-block language guide-library-grid/editorial-category-grid
   use on the homepage, so a purchase moment reads as a continuation of the
   site rather than a bolted-on dark widget. Neither rule below sets its own
   background, on purpose. */
.creator-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}
.creator-plan-card{position:relative;display:flex;flex-direction:column;gap:var(--space-sm);min-height:16rem;padding:var(--space-lg);border-radius:var(--radius-xl);color:#111;overflow:hidden;transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.creator-plan-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-xs)}
.creator-plan-card-index,.creator-post-card-index{font-family:var(--font-sans);font-size:.72rem;font-weight:800;letter-spacing:.02em;color:#090909;opacity:.7}
.creator-plan-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border-radius:999px;background:rgba(9,9,9,.85);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.creator-plan-card-body{margin:auto 0;display:grid;gap:.3rem}
.creator-plan-title{font-family:var(--font-serif);font-size:var(--fs-lg);color:#090909}
.creator-plan-price{font-family:var(--font-serif);font-size:var(--fs-2xl);line-height:1;color:#090909}.creator-plan-price small{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:400;opacity:.65;margin-left:.25rem}
.creator-plan-perk{font-size:var(--fs-sm);color:#090909;opacity:.76}
.creator-cta{width:100%;font-weight:700;box-shadow:0 8px 24px -8px var(--color-accent)}
.creator-cta-dark{display:flex;align-items:center;justify-content:center;width:100%;margin-top:.25rem;padding:.75rem 1rem;border:none;border-radius:var(--radius-md);background:#090909;color:#fff;font-weight:700;font-size:var(--fs-sm);text-align:center;text-decoration:none;cursor:pointer;transition:transform var(--duration-fast) var(--ease-out)}
.creator-cta-dark:hover{transform:translateY(-2px)}
.creator-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-sm)}
.creator-post{position:relative;overflow:hidden;min-width:0;border-radius:var(--radius-xl);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.creator-post.is-unlocked{display:grid;align-content:start;gap:var(--space-sm);padding:var(--space-md);border:1px solid var(--color-accent);background:var(--color-surface-2)}
.creator-post header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-sm)}.creator-post h3{margin:.6rem 0 0;font-family:var(--font-serif);font-size:var(--fs-lg);line-height:1}.creator-post time{color:var(--color-text-dim);font-size:var(--fs-xs);white-space:nowrap}
.creator-unlocked-tag{justify-self:start;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;background:var(--color-pop-lime);color:var(--color-on-pop);font-size:var(--fs-xs);font-weight:700}
.creator-media{overflow:hidden;border-radius:var(--radius-lg);background:var(--color-surface-3)}.creator-media img,.creator-media video{display:block;width:100%;max-height:38rem;aspect-ratio:4/5;object-fit:cover}
.creator-post-locked{display:flex;flex-direction:column;gap:.5rem;min-height:20rem;padding:var(--space-lg);color:#111}
.creator-post-locked-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}
.creator-post-locked-top time{color:#090909;opacity:.65;font-size:var(--fs-xs)}
.creator-lock-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(9,9,9,.12);color:#090909}
.creator-post-locked h3{margin:0;font-family:var(--font-serif);font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.05;color:#090909}
.creator-post-locked p{margin:0;font-size:var(--fs-sm);color:#090909;opacity:.76}
.creator-lock-price{margin-top:auto;font-family:var(--font-serif);font-size:var(--fs-xl);color:#090909}.creator-lock-price small{display:block;font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:400;opacity:.65}
.creator-club-footer-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-lg);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);background:var(--color-accent-gradient)}
.creator-club-footer-cta p{color:#fff;font-family:var(--font-serif);font-size:var(--fs-lg);margin:0}
.creator-club-footer-cta .creator-cta{width:auto;background:#fff;color:var(--color-on-pop);box-shadow:none}
@media (hover:hover) and (pointer:fine){.creator-plan-card:hover,.creator-post-locked:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-lg)}}
.member-account{min-height:60vh}

/* Account hero: identity + primary actions, replacing the old bare
   section-head-split row with an actual card so the page doesn't open on
   plain text next to two flat links. */
.account-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-lg);padding:var(--space-lg);border:1px solid var(--color-border-strong);border-radius:var(--radius-xl);background:var(--color-surface-1);position:relative;overflow:hidden;isolation:isolate}
.account-hero::before{content:'';position:absolute;inset:-60% -10% auto -10%;height:18rem;background:var(--color-accent-gradient);filter:blur(100px);opacity:.16;pointer-events:none;z-index:-1}
.account-hero-id{display:flex;align-items:center;gap:var(--space-md);min-width:0}
.account-avatar{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--color-accent-gradient);color:#fff;font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:700}
.account-hero-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--space-sm)}
.account-community-cta{display:flex;flex-direction:column;justify-content:center;gap:.15rem;padding:.6rem var(--space-md);border-radius:var(--radius-lg);border:1px solid var(--color-border-strong);background:var(--color-surface-2);color:var(--color-text);text-decoration:none;transition:transform var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.account-community-cta-label{font-weight:700;font-size:var(--fs-sm)}
.account-community-cta-sub{font-size:var(--fs-xs);color:var(--color-text-dim)}
.account-community-cta:hover{transform:translateY(-2px);border-color:var(--color-accent)}

/* Quick counts so the page reads as a dashboard, not a blank shell. */
.account-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}
.account-stat{padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2);text-align:center}
.account-stat strong{display:block;font-family:var(--font-serif);font-size:var(--fs-2xl);line-height:1.1}
.account-stat span{font-size:var(--fs-sm);color:var(--color-text-dim)}

.member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
.account-panel{padding:0;overflow:hidden}
.account-panel .panel-title{margin:0;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border)}
.account-panel .empty-state{margin:0;padding:var(--space-lg)}
.member-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border);border-left:3px solid transparent}.member-row:last-child{border-bottom:0}.member-row>div:first-child{display:grid;gap:.3rem;min-width:0}.member-row span,.member-row small{display:flex;align-items:center;gap:.4rem;color:var(--color-text-dim);font-size:var(--fs-sm)}
.member-row-active{border-left-color:var(--color-success)}
.member-row-cancelled,.member-row-past_due{border-left-color:var(--color-warning)}
.member-row-expired,.member-row-refunded{border-left-color:var(--color-text-faint)}
.member-row .badge{padding:.2rem .6rem;font-size:.68rem}

/* Phase 2: referral link + real Sngine earnings (wallet/monetization/
   affiliate/points), shown on the member account page and the provider
   dashboard overview. */
.account-earnings-panel{margin-bottom:var(--space-lg)}
.account-earnings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--space-md);margin-bottom:var(--space-md)}
.account-earnings-stat{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2);text-align:center}
.account-earnings-stat strong{display:block;font-family:var(--font-serif);font-size:var(--fs-xl);line-height:1.1}
.account-earnings-stat span{font-size:var(--fs-xs);color:var(--color-text-dim)}
.account-referral-row{margin:var(--space-md) 0}
.account-referral-copy{display:flex;gap:var(--space-xs)}
.account-referral-copy .input{flex:1;min-width:0}
.billing-admin-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,.6fr);gap:var(--space-lg);padding:var(--space-md) 0;border-bottom:1px solid var(--color-border)}.billing-admin-row h2{margin:.5rem 0;font-family:var(--font-serif)}.billing-review-actions{display:grid;align-content:start;gap:var(--space-xs)}.billing-review-actions form{display:flex;gap:var(--space-xs)}
.billing-media-preview{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-sm)}.billing-media-preview img,.billing-media-preview video{width:min(16rem,100%);max-height:18rem;border-radius:var(--radius-lg);object-fit:cover}.billing-media-preview a{font-size:var(--fs-sm);color:var(--color-accent)}
.billing-full-copy{margin:var(--space-xs) 0;padding:var(--space-sm);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-dim);font-size:var(--fs-sm)}
/* Sngine-processed tip — a lighter-weight sibling to .creator-plans, not a
   subscription commitment, so it gets its own quieter treatment rather than
   reusing the accent-panel plan-card look. */
.creator-tip-panel{margin:var(--space-md) 0;padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2)}
.creator-tip-panel .field-label{display:block;margin-bottom:.4rem;font-weight:700}
.creator-tip-row{display:flex;gap:var(--space-sm);align-items:stretch}
.creator-tip-row .input{flex:1;min-width:0}
.creator-tip-row .creator-cta{width:auto;padding-inline:var(--space-lg)}
@media(max-width:900px){.creator-club-head{display:grid}.creator-plans{justify-content:flex-start}.creator-feed,.member-grid{grid-template-columns:1fr}.billing-admin-row{grid-template-columns:1fr}.account-hero{flex-direction:column;align-items:stretch}.account-hero-actions{flex-direction:column}.account-stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.creator-club{padding:var(--space-sm)}.creator-post header,.member-row{align-items:flex-start;flex-direction:column}.creator-plans,.creator-plan-card,.member-row .form-actions,.member-row .btn{width:100%}.creator-club-footer-cta{flex-direction:column;align-items:flex-start}.creator-club-footer-cta .creator-cta{width:100%}.billing-review-actions form{flex-direction:column}.billing-review-actions .btn{width:100%}.creator-tip-row{flex-direction:column}.creator-tip-row .creator-cta{width:100%}.account-hero-id{flex-direction:column;align-items:flex-start}.account-stats{grid-template-columns:1fr}}

/* v3.58: the exact wallet amount (converted at today's rate), under each pay button. */
.checkout-fx{display:block;margin-top:.45rem;font-size:var(--fs-xs);line-height:1.35;opacity:.78;text-align:center}
.creator-tip-form .checkout-fx{text-align:left}
/* Estimates on the bright plan/lock cards inherit the card text colour (the faint default is unreadable on orange). */
.creator-plan-price .money-approx,.creator-lock-price .money-approx{color:inherit;opacity:.72}
/* v3.58: text, forms and lists placed straight inside an account panel get the panel's inner spacing (Settings, Verified badge). */
.account-panel>p,.account-panel>form,.account-panel>ul,.account-panel>.form-errors{margin:var(--space-md) var(--space-lg)}
.account-panel>form:last-child,.account-panel>ul:last-child,.account-panel>p:last-child{margin-bottom:var(--space-lg)}
.account-panel>.loc-optin{padding:var(--space-lg)}

/* ---- ticks.css ---- */
/* Account ticks (v3.58) — Meta-style rosettes next to a name.
   Blue = identity checked by LuXeel, green = premium member,
   red = premium creator. Colours are fixed (not themed) so a tick always
   means the same thing; the white check keeps contrast on both themes. */
.lx-ticks { display: inline-flex; align-items: center; gap: .14em; margin-left: .3em; vertical-align: -.12em; line-height: 0; white-space: nowrap; }
.lx-tick { display: inline-flex; width: 1em; height: 1em; flex: 0 0 auto; }
.lx-ticks-sm .lx-tick { width: .95em; height: .95em; min-width: 14px; min-height: 14px; }
.lx-ticks-lg { gap: .18em; vertical-align: -.08em; }
.lx-ticks-lg .lx-tick { width: .62em; height: .62em; min-width: 20px; min-height: 20px; }
.lx-tick svg { width: 100%; height: 100%; overflow: visible; }
.lx-tick-seal { stroke-width: 1.6; stroke-linejoin: round; }
.lx-tick-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lx-tick-blue .lx-tick-seal { fill: #1d9bf0; stroke: #1d9bf0; }
.lx-tick-green .lx-tick-seal { fill: #16a34a; stroke: #16a34a; }
.lx-tick-red .lx-tick-seal { fill: #e11d48; stroke: #e11d48; }

/* v3.58 — "Your badges" (member account › Verified badge, studio › Verification). */
.lx-badge-list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: .6rem; }
.lx-badge-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .75rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.lx-badge-list li .lx-ticks { margin: 0; font-size: 1.35rem; }
.lx-badge-list li div { display: grid; gap: .1rem; min-width: 0; }
.lx-badge-list li span { color: var(--color-text-muted); font-size: var(--fs-sm); }
.lx-badge-list li em { font-style: normal; font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; }
.lx-badge-list li.is-earned { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.lx-badge-list li.is-earned em { color: var(--color-text); font-weight: 600; }
@media (max-width: 560px) { .lx-badge-list li { grid-template-columns: auto 1fr; } .lx-badge-list li em { grid-column: 2; } }
.lx-badge-list li .lx-tick{width:1.6rem;height:1.6rem}

/* Consent card: the explanation sits on its own line under the promise (studio, account and onboarding). */
.kyc-upload .choice-card small { display: block; margin-top: .3rem; color: var(--color-text-dim); font-size: var(--fs-xs); line-height: 1.5; }

/* ---- creator-profile.css ---- */
/* Creator profile (views/public/profile.php): photo-first hero with the
   contact actions, a sticky tab bar, and one panel at a time
   (creator-profile.js). Tokens only, so light/dark both follow. */

/* <main> already reserves room for the fixed site nav; only a small gap here. */
.cp { padding-top: var(--space-md); }
.cp .container { display: grid; gap: var(--space-lg); min-width: 0; }
.cp .container > * { min-width: 0; }
.cp-back { margin: 0; }

/* ---------- Hero ---------- */
.cp-hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.25rem, 3vw, 2.75rem);
    align-items: stretch;
    padding: clamp(.75rem, 1.6vw, 1.1rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--color-accent-2) 14%, transparent), transparent 55%),
        linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 9%, var(--color-surface-1)), var(--color-surface-1));
    box-shadow: var(--shadow-md);
}
.cp-hero-media { min-width: 0; }
.cp-hero-photo {
    position: relative; display: block; overflow: hidden;
    height: 100%; min-height: 22rem; max-height: 40rem;
    border-radius: calc(var(--radius-xl) - .35rem);
    background: var(--color-surface-2);
}
.cp-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.cp-hero-photo:hover img { transform: scale(1.025); }
.cp-hero-photo-empty { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.cp-hero-photo-empty span { font-family: var(--font-serif); font-size: clamp(4rem, 12vw, 8rem); color: var(--color-text-faint); }
.cp-photo-count {
    position: absolute; left: .85rem; bottom: .85rem;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .8rem; border-radius: var(--radius-pill);
    background: rgba(10, 10, 12, .62); color: #fff; backdrop-filter: blur(10px);
    font-size: var(--fs-xs); font-weight: 700;
}

.cp-hero-info { display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); min-width: 0; padding: clamp(.5rem, 2vw, 1.5rem) clamp(.25rem, 1.5vw, 1rem); }
.cp-badges { margin: 0; }
.cp-status { display: inline-flex; align-items: center; gap: .4rem; }
.cp-status i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-text-faint); }
.cp-status-available i { background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent); }
.cp-status-busy i { background: var(--color-warning); }
.cp-rating { display: inline-flex; align-items: center; gap: .3rem; color: var(--color-text); text-decoration: none; }
.cp-rating svg { color: #f5b301; }
.cp-rating:hover { border-color: var(--color-accent); }
.cp-name { margin: 0; font-family: var(--font-serif); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .95; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-tagline { margin: 0; color: var(--color-text-dim); font-size: var(--fs-lg); max-width: 40ch; }

.cp-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .25rem 0 0; padding: 0; list-style: none; color: var(--color-text-dim); font-size: var(--fs-sm); }
.cp-facts li { display: inline-flex; align-items: center; gap: .45rem; }
.cp-facts svg { color: var(--color-accent); flex: none; }
.cp-fact-price strong { color: var(--color-text); }
.cp-chips { margin: 0; }

.cp-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.cp-actions .btn { display: inline-flex; align-items: center; gap: .5rem; }
.cp-cta-message { box-shadow: var(--shadow-glow-accent); }

.cp-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cp-links-label { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-right: .25rem; }
.cp-link {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .8rem .4rem .45rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
    color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.cp-link:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.cp-link-icon { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface-2); }
.cp-link-icon svg { width: 1rem; height: 1rem; }
.cp-contact-note { margin: 0; color: var(--color-text-faint); font-size: var(--fs-xs); }

/* ---------- Tabs ---------- */
.cp-tabs {
    position: sticky; top: calc(var(--nav-height) + .5rem); z-index: 20;
    display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
    padding: .35rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-surface-1) 88%, transparent); backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
}
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
    padding: .6rem 1.1rem; border-radius: var(--radius-pill);
    color: var(--color-text-dim); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}
.cp-tab:hover { color: var(--color-text); background: var(--color-surface-2); }
.cp-tab.is-active { color: var(--color-accent-text); background: var(--color-accent-gradient); box-shadow: var(--shadow-glow-accent); }
.cp-tab-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: var(--radius-pill); background: var(--color-surface-3); color: var(--color-text); font-size: .7rem; }
.cp-tab.is-active .cp-tab-count { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- Panels ---------- */
.cp-panels { min-width: 0; }
.cp-panel { display: grid; gap: var(--space-lg); min-width: 0; scroll-margin-top: calc(var(--nav-height) + 5rem); }
.cp-panel + .cp-panel { margin-top: var(--space-xl); }        /* no-JS: stacked */
.cp-js .cp-panel + .cp-panel { margin-top: 0; }
.cp-js .cp-panel[hidden] { display: none; }
.cp-js .cp-panel.is-active { animation: cp-panel-in .28s var(--ease-out); }
@keyframes cp-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-js .cp-panel.is-active { animation: none; } .cp-hero-photo img { transition: none; } }
.cp-panel > .panel, .cp-panel .panel { margin: 0; }

/* Overview */
.cp-overview-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.cp-about p { line-height: 1.75; color: var(--color-text-dim); }
.cp-about p:last-child { margin-bottom: 0; }
.cp-note { margin-top: var(--space-md); }
.cp-rates { display: grid; gap: .5rem; margin-bottom: var(--space-md); }
.cp-rate {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-2));
}
.cp-rate span { color: var(--color-text-dim); font-size: var(--fs-sm); }
.cp-rate strong { font-family: var(--font-serif); font-size: var(--fs-lg); }
.cp-detail-list { display: grid; gap: .65rem; margin: 0; }
.cp-detail-list div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--color-border); }
.cp-detail-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.cp-detail-list dt { color: var(--color-text-faint); font-size: var(--fs-sm); }
.cp-detail-list dd { margin: 0; text-align: right; font-size: var(--fs-sm); font-weight: 600; }
.cp-detail-list small { color: var(--color-text-faint); font-weight: 400; }

.cp-photo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(8rem, .8fr); gap: .65rem; }
.cp-strip-item { display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; background: var(--color-surface-2); }
.cp-strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.cp-strip-item:hover img { transform: scale(1.05); }
.cp-strip-more {
    display: grid; place-items: center; padding: 1rem; text-align: center;
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
    color: var(--color-text); font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
}
.cp-strip-more:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Photos */
.cp-gallery { columns: 3 16rem; column-gap: .85rem; }
.cp-gallery-item { break-inside: avoid; margin: 0 0 .85rem; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.cp-gallery-item img { display: block; width: 100%; height: auto; }

/* Reviews */
.cp-reviews-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: var(--space-sm); }
.cp-reviews-head .panel-title { margin: 0; }
.cp-reviews-score { display: inline-flex; align-items: center; gap: .35rem; color: var(--color-text-dim); font-size: var(--fs-sm); }
.cp-reviews-score svg { color: #f5b301; }
.cp-reviews-score strong { color: var(--color-text); font-size: var(--fs-md); }

/* Exclusive panel: the creator-club block already carries its own card look */
.cp-panel .creator-club { margin: 0; }
.cp-panel .community-media { margin: 0; }
.profile-safety-actions { margin: 0; }

/* ---------- Phone action bar ---------- */
.cp-mobile-bar { display: none; }

@media (max-width: 1023px) {
    .cp-hero { grid-template-columns: minmax(0, 1fr); }
    .cp-hero-photo { aspect-ratio: 4 / 5; height: auto; min-height: 0; max-height: 72vh; }
    .cp-overview-grid { grid-template-columns: minmax(0, 1fr); }
    .cp-photo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cp-photo-strip .cp-strip-item:nth-child(4) { display: none; }
    .cp-photo-strip .cp-strip-more { grid-column: 1 / -1; }

    .cp-mobile-bar {
        position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: calc(var(--z-overlay) - 1);
        display: flex; gap: .5rem; padding: .5rem;
        border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--color-surface-1) 92%, transparent); backdrop-filter: blur(18px);
        box-shadow: var(--shadow-lg);
    }
    .cp-mobile-bar .btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding-inline: .75rem; }
    /* keep the page's last content and the floating chat button clear of the bar */
    body:has([data-cp-mobile-bar]) { padding-bottom: 5.5rem; }
    /* The page has its own Message/Subscribe actions; the floating "find someone" concierge would sit on top of content here. */
    body:has([data-cp-mobile-bar]) [data-chat-concierge] { display: none; }
}

@media (max-width: 560px) {
    .cp { padding-top: var(--space-xs); }
    .cp .container { gap: var(--space-md); }
    .cp-hero { padding: .5rem; }
    .cp-hero-info { padding: .5rem .5rem .75rem; }
    .cp-tagline { font-size: var(--fs-md); }
    .cp-actions .btn { flex: 1 1 100%; justify-content: center; }
    .cp-tabs { top: calc(var(--nav-height) + .25rem); border-radius: var(--radius-lg); }
    .cp-tab { padding: .55rem .85rem; }
    .cp-gallery { columns: 2 9rem; column-gap: .5rem; }
    .cp-gallery-item { margin-bottom: .5rem; }
    .cp-detail-list div { flex-direction: column; gap: .15rem; }
    .cp-detail-list dd { text-align: left; }
}

/* "Find me at {venue}" facts (venue pages v2). */
.cp-fact-venue a { color: var(--color-accent); font-weight: 700; }
.cp-fact-venue a:hover { text-decoration: underline; }

/* v3.58 — "Stay safe" at the contact step: reads as one more fact row (accent
   line icon, dim small text); the warning signs fold open beneath it. */
.cp-safety { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); }
.cp-safety summary { display: flex; align-items: flex-start; gap: .45rem; cursor: pointer; list-style: none; width: fit-content; max-width: 100%; }
.cp-safety summary::-webkit-details-marker { display: none; }
.cp-safety summary svg { color: var(--color-accent); flex: none; margin-top: .15em; }
.cp-safety summary u { text-decoration: none; color: var(--color-text); font-weight: 600; white-space: nowrap; border-bottom: 1px solid currentColor; }
.cp-safety summary:hover u { color: var(--color-accent); }
.cp-safety summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.cp-safety ul { margin: .5rem 0 .4rem 1.6rem; padding: 0 0 0 .9rem; display: grid; gap: .15rem; list-style: disc; }
.cp-safety p { margin: 0 0 0 1.6rem; }
.cp-safety a { color: var(--color-text); }
/* v3.61: tab bar + panels share one box, so the bar stops sticking at the last panel. */
.cp-tabbed { display: grid; gap: var(--space-lg); min-width: 0; }
@media (max-width: 560px) { .cp-tabbed { gap: var(--space-md); } }
.cp-contact-soon { display: grid; gap: .6rem; justify-items: start; padding: .9rem 1rem; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md, .75rem); }
.cp-contact-soon .cp-contact-note { margin: 0; }

/* v3.64: the public streak chip — earned at 7 consecutive posting days. */
.cp-streak { border-color: color-mix(in srgb, var(--color-pop-orange) 55%, var(--color-border)); background: color-mix(in srgb, var(--color-pop-orange) 14%, transparent); color: var(--color-text); }

/* ---- home-v2.css ---- */
/* New homepage (views/public/home.php, 2026-10-05). Namespaced .hv-* so the
   classic homepage (home-classic.php) keeps rendering exactly as before when
   it is switched back on. Reuses the shared components it embeds: the fan
   card deck (hero-showcase.css), featured marquee, location ribbon, FAQ. */

/* ---------- Shared bits ---------- */
.hv-head { display: grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.hv-head .section-title { margin: 0; }
.hv-head .section-lead { margin: 0; }
.hv-head-center { justify-items: center; text-align: center; max-width: 46rem; margin-inline: auto; margin-bottom: var(--space-xl); }
.hv-head-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: var(--space-lg); }
.hv-head-split > div:last-child { display: grid; gap: var(--space-sm); justify-items: start; }
.hv-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.hv-browse-label { margin: 0 0 var(--space-sm); color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hv-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-2xl);
    background:
        radial-gradient(circle at 78% 55%, var(--color-accent-soft), transparent 38%),
        linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}
.hv-hero::before, .hv-hero::after { content: ""; position: absolute; z-index: -1; width: 18rem; height: 18rem; border-radius: 50%; filter: blur(90px); opacity: .22; pointer-events: none; }
.hv-hero::before { top: 8%; left: -8rem; background: var(--color-pop-orange); }
.hv-hero::after { bottom: 6%; right: -6rem; background: var(--color-pop-pink); }
.hv-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; min-width: 0; }
.hv-hero-copy { position: relative; z-index: 5; display: grid; gap: var(--space-md); justify-items: start; min-width: 0; }
.hv-kicker { display: inline-flex; align-items: center; gap: .55rem; color: var(--color-text-dim); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hv-kicker i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-pop-orange); box-shadow: 0 0 0 .35rem var(--color-accent-soft); }
.hv-title { margin: 0; font-family: var(--font-serif); font-size: clamp(2.7rem, 5.4vw, 5.4rem); font-weight: 700; line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.hv-title span { color: var(--color-accent); font-style: italic; }
.hv-lead { margin: 0; max-width: 36rem; color: var(--color-text-dim); font-size: var(--fs-md); line-height: 1.6; }

.hv-search {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .55rem; align-items: end;
    width: 100%; max-width: 40rem; padding: .65rem;
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-surface-1) 86%, transparent); backdrop-filter: blur(14px);
    box-shadow: var(--shadow-md);
}
.hv-search .field { margin: 0; min-width: 0; }
.hv-search .field-label { padding-left: .9rem; font-size: .68rem; }
.hv-search-btn { height: var(--touch-target-min); white-space: nowrap; }
.hv-checks { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; padding: 0; list-style: none; color: var(--color-text-dim); font-size: var(--fs-sm); }
.hv-checks li { display: inline-flex; align-items: center; gap: .4rem; }
.hv-checks svg { color: var(--color-success); flex: none; }
.hv-creator-link { color: var(--color-text-dim); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--color-border-strong); padding-bottom: 2px; }
.hv-creator-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.hv-hero-deck { min-width: 0; }
.hv-hero-deck .hero-deck { width: 100%; height: 30rem; margin: 0; }

/* ---------- How it works ---------- */
.hv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); counter-reset: step; }
.hv-step {
    position: relative; display: grid; align-content: start; gap: .6rem; padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-1);
    transition: transform .25s var(--ease-out), border-color .25s ease;
}
.hv-step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.hv-step-number { font-family: var(--font-serif); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; background: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv-step h3 { margin: 0; font-family: var(--font-serif); font-size: var(--fs-xl); }
.hv-step p { margin: 0; color: var(--color-text-dim); line-height: 1.6; }
.hv-step-link { margin-top: .25rem; color: var(--color-accent); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.hv-step:not(:last-child)::after { content: ""; position: absolute; top: 3.2rem; right: calc(-1 * var(--space-md) / 2 - .35rem); width: .7rem; height: .7rem; border-top: 2px solid var(--color-border-strong); border-right: 2px solid var(--color-border-strong); transform: rotate(45deg); }

/* ---------- Featured ---------- */
.hv-featured .hv-head { margin-bottom: var(--space-lg); }

/* ---------- Browse your way ---------- */
.hv-browse-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.hv-browse-col { display: grid; gap: var(--space-sm); justify-items: start; min-width: 0; }
.hv-browse-col > * { max-width: 100%; }
.hv-cities { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; width: 100%; overflow: visible; }
.hv-cities .location-ribbon-card { width: 100%; min-width: 0; }
.hv-categories { display: flex; flex-wrap: wrap; gap: .5rem; }
.hv-category {
    display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .6rem .55rem 1rem;
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
    color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.hv-category small { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-dim); font-size: .72rem; font-weight: 700; }
.hv-category:hover { border-color: var(--color-accent); background: var(--color-accent-soft); transform: translateY(-1px); }

/* ---------- Deeper Community ---------- */
.hv-deeper-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
    padding: clamp(1.5rem, 4.5vw, 4rem);
    border: 1px solid var(--color-border-strong); border-radius: calc(var(--radius-xl) + .5rem);
    background: linear-gradient(140deg, color-mix(in srgb, var(--color-accent-2) 22%, var(--color-surface-1)), color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-1)) 55%, var(--color-surface-1));
    box-shadow: var(--shadow-lg);
}
.hv-deeper-glow { position: absolute; z-index: -1; width: 26rem; height: 26rem; right: -8rem; top: -10rem; border-radius: 50%; background: var(--color-pop-pink); filter: blur(110px); opacity: .28; }
.hv-deeper-copy p { color: var(--color-text-dim); line-height: 1.65; max-width: 32rem; }
.hv-deeper-copy .section-title { margin: var(--space-xs) 0 var(--space-sm); }
.hv-deeper-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.hv-feature { display: grid; align-content: start; gap: .45rem; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface-1) 82%, transparent); backdrop-filter: blur(8px); }
.hv-feature-icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: var(--color-accent-gradient); color: #fff; box-shadow: var(--shadow-glow-accent); }
.hv-feature h3 { margin: .3rem 0 0; font-size: var(--fs-md); }
.hv-feature p { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- Trust ---------- */
.hv-trust-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.hv-trust-copy .section-title { margin: var(--space-xs) 0 var(--space-sm); }
.hv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: var(--space-lg); }
.hv-stats div { display: grid; gap: .2rem; padding: .9rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.hv-stats strong { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; }
.hv-stats span { color: var(--color-text-faint); font-size: .72rem; line-height: 1.3; }
.hv-trust-side { display: grid; gap: .65rem; }
.hv-pillar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.hv-pillar > span { font-family: var(--font-serif); font-size: var(--fs-lg); color: var(--color-accent); }
.hv-pillar h3 { margin: 0 0 .25rem; font-size: var(--fs-md); }
.hv-pillar p { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }
.hv-guides { display: grid; gap: .1rem; margin-top: var(--space-xs); padding: var(--space-md); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.hv-guides .hv-browse-label { margin-bottom: .4rem; }
.hv-guides a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.hv-guides a:last-child { border-bottom: 0; }
.hv-guides a:hover { color: var(--color-accent); }

/* ---------- For creators (the lime brand moment) ---------- */
.hv-creators-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
    padding: clamp(1.5rem, 4.5vw, 4rem); border-radius: calc(var(--radius-xl) + .5rem);
    background: var(--color-pop-lime); color: #111;
}
.hv-creators-card .section-eyebrow { color: #7a3a10; }
.hv-creators-card .section-title { color: #111; margin: var(--space-xs) 0 var(--space-sm); }
.hv-creators-card p { color: #2b2b1f; line-height: 1.6; }
.hv-creators-card .btn-ghost { border-color: rgba(0, 0, 0, .35); color: #111; }
.hv-creators-card .btn-ghost:hover { border-color: #111; }
.hv-benefits { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hv-benefits li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: var(--space-md); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .5); }
.hv-benefits li > span { font-family: var(--font-serif); font-size: var(--fs-lg); color: #7a3a10; }
.hv-benefits strong { display: block; margin-bottom: .2rem; font-size: var(--fs-md); }
.hv-benefits p { margin: 0; font-size: var(--fs-sm); }

/* ---------- Closing ---------- */
.hv-closing-card {
    display: grid; justify-items: center; gap: var(--space-sm); text-align: center;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
    border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + .5rem);
    background: radial-gradient(circle at 50% 0%, var(--color-accent-soft), transparent 60%), var(--color-surface-1);
}
.hv-closing-card .section-title, .hv-closing-card .section-lead { margin: 0; }
.hv-closing-photos { display: flex; margin-bottom: var(--space-xs); }
.hv-closing-photos img { width: 3.4rem; height: 3.4rem; margin-left: -.75rem; border: 3px solid var(--color-surface-1); border-radius: 50%; object-fit: cover; }
.hv-closing-photos img:first-child { margin-left: 0; }
.hv-closing-search { display: flex; gap: .5rem; width: 100%; max-width: 34rem; margin-top: var(--space-sm); padding: .4rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface-2); }
.hv-closing-search label { flex: 1; min-width: 0; }
.hv-closing-search input { width: 100%; height: 100%; min-height: 2.75rem; padding: 0 1rem; border: 0; background: transparent; color: var(--color-text); font: inherit; outline: none; }
.hv-closing-search .btn { flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .hv-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .hv-hero-copy { justify-items: center; text-align: center; }
    .hv-search { margin-inline: auto; }
    .hv-checks { justify-content: center; }
    .hv-hero-deck .hero-deck { height: 26rem; }
    .hv-steps { grid-template-columns: minmax(0, 1fr); }
    .hv-step:not(:last-child)::after { display: none; }
    .hv-head-split, .hv-browse-grid, .hv-deeper-card, .hv-trust-grid, .hv-creators-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .hv-hero { padding: calc(var(--nav-height) + var(--space-lg)) 0 var(--space-xl); }
    .hv-search { grid-template-columns: minmax(0, 1fr); }
    .hv-search-btn { width: 100%; justify-content: center; }
    .hv-deeper-features { grid-template-columns: minmax(0, 1fr); }
    .hv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv-closing-search { flex-direction: column; border-radius: var(--radius-lg); }
    .hv-closing-search .btn { width: 100%; justify-content: center; }
    .hv-hero-deck .hero-deck { height: 24rem; }
}

/* Section headings: the shared .display-title is sized for one- or two-word
   statements; these carry a full sentence, so they run a size smaller and
   keep clear of the paragraph that follows. The hero keeps its own scale. */
.hv-how .display-title, .hv-featured .display-title, .hv-browse .display-title,
.hv-deeper .display-title, .hv-trust .display-title, .hv-creators .display-title,
.hv-closing .display-title {
    font-size: clamp(2.1rem, 4.2vw, 3.9rem);
    line-height: 1;
    letter-spacing: -.035em;
    padding-bottom: .08em;
}

/* ---- home-v3.css ---- */
/* Homepage 3 — "Gallery wall" (views/public/home-gallery.php, 2026-10-05).
   Namespaced .hg-*; reuses Homepage 2's search, checks, step link, category
   pills, feature icon, lime creator card and closing search (home-v2.css) so
   the brand, colours and buttons stay identical across designs. */

/* ---------- Hero: copy over a drifting wall of profile photos ---------- */
.hg-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; align-items: center; min-height: min(54rem, 100svh);
    padding: calc(var(--nav-height) + var(--space-2xl)) 0 var(--space-2xl);
    background: var(--color-bg);
}
.hg-hero-wall {
    position: absolute; inset: -6rem -4rem; z-index: -2;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem;
    transform: rotate(-5deg);
    pointer-events: none;
}
.hg-hero-col { min-width: 0; overflow: hidden; }
.hg-hero-col-track { animation: hg-drift 90s linear infinite; will-change: transform; }
.hg-hero-col:nth-child(even) .hg-hero-col-track { animation-direction: reverse; animation-duration: 110s; }
.hg-hero-col-track img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; margin-bottom: .8rem; object-fit: cover; border-radius: var(--radius-lg); }
@keyframes hg-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.hg-hero-veil {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 58% 56% at 50% 52%, color-mix(in srgb, var(--color-bg) 94%, transparent) 0%, color-mix(in srgb, var(--color-bg) 78%, transparent) 52%, color-mix(in srgb, var(--color-bg) 42%, transparent) 100%),
        linear-gradient(180deg, var(--color-bg) 0%, transparent 24%, transparent 76%, var(--color-bg) 100%);
}
.hg-hero-inner { display: grid; justify-items: center; gap: var(--space-md); max-width: 54rem; text-align: center; }
.hg-title { margin: 0; font-family: var(--font-serif); font-size: clamp(2.8rem, 6.4vw, 6.2rem); font-weight: 700; line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.hg-title span { color: var(--color-accent); font-style: italic; }
.hg-lead { margin: 0; max-width: 36rem; color: var(--color-text-dim); font-size: var(--fs-md); line-height: 1.6; }
.hg-search { margin-inline: auto; max-width: 44rem; }
.hg-checks { justify-content: center; }

/* ---------- Numbers strip ---------- */
.hg-stats { border-block: 1px solid var(--color-border); background: var(--color-surface-1); }
.hg-stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hg-stats-row div { display: flex; align-items: baseline; justify-content: center; gap: .55rem; padding: 1.15rem .5rem; min-width: 0; }
.hg-stats-row div + div { border-left: 1px solid var(--color-border); }
.hg-stats-row strong { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; }
.hg-stats-row span { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- The wall (masonry) ---------- */
.hg-masonry { columns: 5 12rem; column-gap: .9rem; }
.hg-tile {
    position: relative; display: block; margin-bottom: .9rem; break-inside: avoid;
    overflow: hidden; isolation: isolate; border-radius: var(--radius-lg);
    background: var(--color-surface-2); color: #fff; text-decoration: none;
}
.hg-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease-out); }
.hg-tile-1 img { aspect-ratio: 3 / 4; }
.hg-tile-2 img { aspect-ratio: 1 / 1; }
.hg-tile-3 img { aspect-ratio: 2 / 3; }
.hg-tile-4 img { aspect-ratio: 5 / 6; }
.hg-tile-5 img { aspect-ratio: 3 / 4; }
.hg-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .78)); pointer-events: none; }
.hg-tile-meta { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; z-index: 2; display: grid; gap: .1rem; min-width: 0; }
.hg-tile-meta strong { font-size: var(--fs-md); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-tile-meta small { color: rgba(255, 255, 255, .78); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-tile-dot { position: absolute; top: .7rem; left: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); color: #fff; font-size: .7rem; font-weight: 700; }
.hg-tile-dot::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-success); }
.hg-tile:hover img, .hg-tile:focus-visible img { transform: scale(1.05); }

/* ---------- City rails ---------- */
.hg-rails { display: grid; gap: var(--space-md); }
.hg-rail {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-lg); align-items: center;
    padding: var(--space-md); border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + .25rem);
    background: var(--color-surface-1);
}
.hg-rail-head { display: grid; gap: .35rem; justify-items: start; min-width: 0; padding-left: .4rem; }
.hg-rail-kicker { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hg-rail-head h3 { margin: 0; font-family: var(--font-serif); font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.03em; overflow-wrap: break-word; }
.hg-rail-head p { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); }
.hg-available { color: var(--color-success); font-weight: 700; }
.hg-rail-track { display: flex; gap: .8rem; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; } /* swipe rail; no raw scrollbar */
.hg-rail-track::-webkit-scrollbar { display: none; }
.hg-rail-card { flex: 0 0 12.5rem; display: grid; align-content: start; gap: .25rem; min-width: 0; scroll-snap-align: start; color: var(--color-text); text-decoration: none; }
.hg-rail-media { display: block; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: .35rem; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.hg-rail-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.hg-rail-card:hover .hg-rail-media img { transform: scale(1.05); }
.hg-rail-card strong { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-rail-card small { color: var(--color-text-dim); font-size: var(--fs-xs); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hg-more-cities { display: grid; justify-items: center; gap: var(--space-sm); margin-top: var(--space-xl); text-align: center; }
.hg-more-cities .hv-browse-label { margin: 0; }
.hg-more-cities .hv-categories { justify-content: center; }

/* ---------- Categories as photo tiles ---------- */
.hg-cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.hg-cat-grid > .hg-cat { grid-column: span 2; }
/* Keep rows full whatever the number of categories: 4 → one row of four
   tall tiles, 5 → two wide + three, 1–2 → wide tiles. */
.hg-cat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hg-cat-grid-4 > .hg-cat { grid-column: auto; aspect-ratio: 3 / 4; }
.hg-cat-grid-5 > .hg-cat:nth-child(-n + 2) { grid-column: span 3; aspect-ratio: 16 / 9; }
.hg-cat-grid-2 > .hg-cat, .hg-cat-grid-1 > .hg-cat { grid-column: span 3; aspect-ratio: 16 / 9; }
.hg-cat {
    position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate;
    border-radius: var(--radius-xl); background: var(--color-accent-gradient); color: #fff; text-decoration: none;
}
.hg-cat-media { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.hg-cat-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .6s var(--ease-out); }
.hg-cat-n3 .hg-cat-media img:first-child { grid-row: span 2; }
.hg-cat-n2 .hg-cat-media { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.hg-cat-n1 .hg-cat-media { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hg-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .8)); }
.hg-cat-meta { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; display: grid; gap: .25rem; }
.hg-cat-meta strong { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.05; }
.hg-cat-meta small { color: rgba(255, 255, 255, .8); font-size: var(--fs-sm); font-weight: 600; }
.hg-cat:hover .hg-cat-media img { transform: scale(1.04); }

/* ---------- Deeper Community teaser ---------- */
.hg-deeper-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
    padding: clamp(1.25rem, 4vw, 3.5rem);
    border: 1px solid var(--color-border-strong); border-radius: calc(var(--radius-xl) + .5rem);
    background: linear-gradient(140deg, color-mix(in srgb, var(--color-accent-2) 22%, var(--color-surface-1)), color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-1)) 55%, var(--color-surface-1));
    box-shadow: var(--shadow-lg);
}
.hg-feed { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding-top: .6rem; }
.hg-feed-tile { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.hg-feed-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hg-feed-tile.is-locked img { filter: blur(14px) saturate(1.2); transform: scale(1.2); }
.hg-feed-lock { position: absolute; left: .45rem; right: .45rem; bottom: .45rem; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem .4rem; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.hg-feed-lock svg { flex: none; }
.hg-feed-bubble { position: absolute; top: -.2rem; right: .4rem; z-index: 2; padding: .45rem .85rem; border-radius: 1rem 1rem .3rem 1rem; background: var(--color-accent-gradient); color: #fff; font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-glow-accent); }
.hg-deeper-copy .section-title { margin: var(--space-xs) 0 var(--space-sm); }
.hg-deeper-copy > p { margin: 0; max-width: 32rem; color: var(--color-text-dim); line-height: 1.65; }
.hg-deeper-list { display: grid; gap: .75rem; margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.hg-deeper-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; }
.hg-deeper-list .hv-feature-icon { width: 2.4rem; height: 2.4rem; }
.hg-deeper-list strong { display: block; font-size: var(--fs-md); }
.hg-deeper-list small { display: block; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.45; }

/* ---------- For creators: lime card + polaroids ---------- */
.hg-creators-card { overflow: hidden; }
.hg-polaroids { position: relative; height: 20rem; }
.hg-polaroid { position: absolute; top: 50%; left: 50%; width: 11rem; padding: .5rem .5rem 1.6rem; border-radius: .6rem; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.hg-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .3rem; }
.hg-polaroid-1 { transform: translate(-112%, -50%) rotate(-9deg); }
.hg-polaroid-2 { z-index: 2; transform: translate(-50%, -56%) rotate(2deg); }
.hg-polaroid-3 { transform: translate(12%, -47%) rotate(9deg); }

/* ---------- Closing ---------- */
.hg-closing-strip { display: flex; justify-content: center; margin-bottom: var(--space-xs); }
.hg-closing-strip img { width: 4.2rem; height: 5.2rem; margin-left: -.8rem; object-fit: cover; border: 3px solid var(--color-surface-1); border-radius: .8rem; transform: rotate(-6deg); }
.hg-closing-strip img:nth-child(even) { transform: rotate(5deg) translateY(.3rem); }
.hg-closing-strip img:first-child { margin-left: 0; }

/* Section headings carry full sentences: one size below the shared
   .display-title (same treatment as Homepage 2). */
.hg-wall .display-title, .hg-cities .display-title, .hg-cats .display-title,
.hg-deeper .display-title, .hg-creators .display-title, .hg-closing .display-title {
    font-size: clamp(2.1rem, 4.2vw, 3.9rem);
    line-height: 1;
    letter-spacing: -.035em;
    padding-bottom: .08em;
}
.hg-cities .hv-head-center .display-title { margin-inline: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .hg-hero-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hg-hero-col-5 { display: none; }
    .hg-cat-grid, .hg-cat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hg-cat-grid > .hg-cat, .hg-cat-grid-5 > .hg-cat:nth-child(-n + 2) { grid-column: auto; aspect-ratio: 4 / 3; }
    .hg-cat-grid > .hg-cat:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
    .hg-deeper-card, .hg-creators-card { grid-template-columns: minmax(0, 1fr); }
    .hg-feed { max-width: 30rem; }
}
@media (max-width: 767px) {
    .hg-rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm); }
    .hg-rail-head { padding: .25rem .25rem 0; }
    .hg-rail-card { flex-basis: 42vw; }
}
@media (max-width: 640px) {
    .hg-hero { min-height: 0; padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-xl); }
    .hg-hero-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); inset: -4rem -3rem; }
    .hg-hero-col-4 { display: none; }
    .hg-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hg-stats-row div:nth-child(3) { border-left: 0; }
    .hg-stats-row div:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
    .hg-stats-row div { flex-direction: column; align-items: center; gap: .2rem; padding: .9rem .4rem; }
    .hg-masonry { columns: 2; column-gap: .6rem; }
    .hg-tile { margin-bottom: .6rem; }
    .hg-tile-meta { left: .6rem; right: .6rem; bottom: .55rem; }
    .hg-tile-meta strong { font-size: var(--fs-sm); }
    .hg-cat-grid, .hg-cat-grid-4 { grid-template-columns: minmax(0, 1fr); }
    .hg-cat-grid > .hg-cat, .hg-cat-grid > .hg-cat:last-child:nth-child(odd), .hg-cat-grid-5 > .hg-cat:nth-child(-n + 2) { aspect-ratio: 16 / 10; }
    .hg-hero-veil { background: color-mix(in srgb, var(--color-bg) 80%, transparent); }
    .hg-feed-lock span { display: none; }
    .hg-polaroids { height: 14rem; }
    .hg-polaroid { width: 7.4rem; padding: .35rem .35rem 1.1rem; }
    .hg-closing-strip img { width: 3.2rem; height: 4rem; margin-left: -.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hg-hero-col-track { animation: none; }
    .hg-tile img, .hg-rail-media img, .hg-cat-media img { transition: none; }
}

/* ---- home-v4.css ---- */
/* Homepage 4 — "Editorial" (views/public/home-editorial.php, 2026-10-05).
   Namespaced .he-*; a magazine issue built from the same brand tokens.
   Reuses Homepage 2's search, buttons, feature icon, lime creator card,
   benefits list, FAQ and closing search (home-v2.css). */

/* ---------- Shared magazine bits ---------- */
.he-masthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; padding-bottom: .7rem; margin-bottom: var(--space-lg); border-bottom: 2px solid var(--color-text); }
.he-masthead-name { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; font-style: italic; letter-spacing: -.01em; }
.he-masthead-issue { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.he-index-label { display: block; margin-bottom: .5rem; color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.he-rule-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); grid-template-areas: "eyebrow eyebrow" "title side";
    gap: .5rem var(--space-lg); align-items: end;
    margin-bottom: var(--space-xl); padding-top: var(--space-sm); border-top: 2px solid var(--color-text);
}
.he-rule-head .section-eyebrow { grid-area: eyebrow; }
.he-rule-head .section-title { grid-area: title; margin: 0; }
.he-rule-side { grid-area: side; display: grid; gap: .6rem; justify-items: start; }
.he-rule-side p { margin: 0; color: var(--color-text-dim); line-height: 1.55; }
.he-dropcap { margin: 0; max-width: 36rem; color: var(--color-text-dim); line-height: 1.7; }
.he-dropcap::first-letter { float: left; padding: .06em .12em 0 0; color: var(--color-accent); font-family: var(--font-serif); font-size: 3.5em; font-weight: 700; line-height: .8; }

/* ---------- Cover ---------- */
.he-cover {
    position: relative; overflow: hidden;
    padding: calc(var(--nav-height) + var(--space-lg)) 0 var(--space-xl);
    background: radial-gradient(circle at 86% 32%, var(--color-accent-soft), transparent 42%), linear-gradient(180deg, var(--color-bg), var(--color-bg-alt));
}
.he-cover-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.he-cover-grid.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.he-cover-copy { display: grid; align-content: start; gap: var(--space-md); min-width: 0; }
.he-title { margin: 0; font-family: var(--font-serif); font-size: clamp(3rem, 6.4vw, 6.4rem); font-weight: 700; line-height: .9; letter-spacing:-.03em; text-wrap: balance; }
.he-title span { color: var(--color-accent); font-style: italic; }
.he-lead { margin: 0; max-width: 34rem; color: var(--color-text-dim); font-size: var(--fs-md); line-height: 1.6; }
.he-search { max-width: 40rem; }
.he-index { padding-top: var(--space-xs); }
.he-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.he-index a { display: flex; align-items: baseline; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.he-index a span { color: var(--color-accent); font-family: var(--font-serif); font-size: var(--fs-md); }
.he-index a:hover { color: var(--color-accent); }
.he-cover-photo {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    width: 100%; aspect-ratio: 4 / 5; max-height: 37rem;
    border-radius: calc(var(--radius-xl) + .25rem); background: var(--color-surface-2);
    color: #fff; text-decoration: none; box-shadow: var(--shadow-lg);
}
.he-cover-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.he-cover-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, transparent 25%, transparent 45%, rgba(0, 0, 0, .82) 100%); }
.he-cover-photo:hover img { transform: scale(1.03); }
.he-cover-tag { position: absolute; top: 1rem; left: 1rem; padding: .35rem .8rem; border-radius: var(--radius-pill); background: var(--color-accent-gradient); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.he-cover-lines { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; display: grid; gap: .4rem; }
.he-cover-lines strong { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: .95; letter-spacing: -.03em; overflow-wrap: break-word; }
.he-cover-lines em { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.3; color: rgba(255, 255, 255, .9); }
.he-cover-lines small { color: rgba(255, 255, 255, .78); font-size: var(--fs-sm); font-weight: 600; }
.he-cover-foot { margin: var(--space-lg) 0 0; }

/* ---------- Spotlight ---------- */
.he-spotlight-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.he-spotlight-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.he-spotlight-photo { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.he-spotlight-photo:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.he-spotlight-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.he-spotlight-photo:hover img { transform: scale(1.04); }
.he-photos-n1 .he-spotlight-photo:first-child { aspect-ratio: 4 / 5; }
.he-photos-n2, .he-photos-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.he-photos-n2 .he-spotlight-photo:first-child { grid-column: auto; aspect-ratio: 3 / 4; }
.he-photos-n2 .he-spotlight-photo { aspect-ratio: 3 / 4; }
.he-spotlight-copy .section-title { margin: var(--space-xs) 0 var(--space-sm); }
.he-byline { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); }
.he-byline strong { color: var(--color-text); }
.he-quote { margin: var(--space-md) 0; padding-left: 1.1rem; border-left: 3px solid var(--color-accent); color: var(--color-text); font-family: var(--font-serif); font-size: clamp(1.35rem, 2.3vw, 1.9rem); font-style: italic; line-height: 1.25; }
.he-facts { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: var(--space-md) 0 0; padding: var(--space-sm) 0; border-block: 1px solid var(--color-border); }
.he-facts div { min-width: 0; }
.he-facts dt { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.he-facts dd { margin: .1rem 0 0; font-weight: 600; }

/* ---------- New faces ---------- */
.he-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.he-face { display: grid; grid-template-rows: auto auto; align-content: start; gap: .65rem; min-width: 0; color: var(--color-text); text-decoration: none; }
.he-face-media { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.he-face-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.he-face:hover .he-face-media img { transform: scale(1.04); }
.he-face-caption { display: grid; gap: .1rem; min-width: 0; }
.he-face-no { color: var(--color-accent); font-family: var(--font-serif); font-size: var(--fs-sm); font-style: italic; }
.he-face-caption strong { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.he-face-caption small { color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.4; }
.he-faces-n5 .he-face-1 { grid-column: span 2; grid-row: span 2; grid-template-rows: minmax(0, 1fr) auto; }
.he-faces-n5 .he-face-1 .he-face-media { aspect-ratio: auto; min-height: 20rem; }
.he-faces-n5 .he-face-1 .he-face-caption strong { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); white-space: normal; }
.he-faces:not(.he-faces-n5) { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* ---------- Category stripes ---------- */
.he-stripe { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: center; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.he-rule-head + .he-stripe { padding-top: 0; }
.he-stripe:last-child { border-bottom: 0; padding-bottom: 0; }
.he-stripe.is-flipped { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
.he-stripe.is-flipped .he-stripe-copy { order: 2; }
.he-stripe-copy { min-width: 0; }
.he-stripe-no { color: var(--color-accent); font-family: var(--font-serif); font-size: var(--fs-lg); }
.he-stripe h3 { margin: .15rem 0 .5rem; font-family: var(--font-serif); font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1; letter-spacing: -.03em; overflow-wrap: break-word; }
.he-stripe h3 a { color: inherit; text-decoration: none; }
.he-stripe h3 a:hover { color: var(--color-accent); }
.he-stripe-copy p { margin: 0 0 .6rem; color: var(--color-text-dim); line-height: 1.6; }
.he-stripe-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; min-width: 0; }
.he-stripe-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.he-stripe-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.he-stripe-n1 { grid-template-columns: minmax(0, 1fr); }
.he-stripe-photos > a { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4; max-height: 22rem; border-radius: var(--radius-lg); background: var(--color-surface-2); color: #fff; text-decoration: none; }
.he-stripe-photos > a img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.he-stripe-photos > a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .75)); }
.he-stripe-photos > a:hover img { transform: scale(1.05); }
.he-stripe-photos > a > span { position: absolute; left: .7rem; right: .7rem; bottom: .6rem; overflow: hidden; font-size: var(--fs-sm); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.he-stripe-photos > .he-stripe-more { display: grid; place-content: center; gap: .35rem; padding: 1rem; background: var(--color-accent-gradient); text-align: center; }
.he-stripe-photos > .he-stripe-more::after { display: none; }
.he-stripe-photos > .he-stripe-more strong { font-family: var(--font-serif); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; }
.he-stripe-photos > .he-stripe-more span { position: static; white-space: normal; font-size: var(--fs-sm); line-height: 1.35; }

/* ---------- Deeper Community feature ---------- */
.he-community-card {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
    padding: clamp(1.5rem, 4.5vw, 4rem);
    border: 1px solid var(--color-border-strong); border-radius: calc(var(--radius-xl) + .5rem);
    background: linear-gradient(140deg, color-mix(in srgb, var(--color-accent-2) 20%, var(--color-surface-1)), color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-1)) 55%, var(--color-surface-1));
    box-shadow: var(--shadow-lg);
}
.he-community-copy .section-title { margin: var(--space-xs) 0 var(--space-md); }
.he-community-copy .he-dropcap { font-size: var(--fs-md); }
.he-sidebar { position: relative; display: grid; align-content: start; padding: var(--space-md); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface-1) 82%, transparent); }
.he-sidebar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-accent-gradient); }
.he-sidebar-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--color-border); }
.he-sidebar-item:last-child { border-bottom: 0; padding-bottom: 0; }
.he-sidebar-item .hv-feature-icon { width: 2.3rem; height: 2.3rem; }
.he-sidebar-item strong { display: block; font-size: var(--fs-md); }
.he-sidebar-item p { margin: .15rem 0 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.5; }

/* ---------- Guides as articles ---------- */
.he-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.he-articles-n1 { grid-template-columns: minmax(0, 1fr); }
.he-articles-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.he-articles-n3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.he-articles-n4 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.he-articles-n3 .is-lead, .he-articles-n4 .is-lead { grid-row: span 2; }
.he-articles-n4 .he-article:last-child { grid-column: span 2; }
.he-article {
    display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: var(--space-lg);
    border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-1);
    color: var(--color-text); text-decoration: none; transition: transform .25s var(--ease-out), border-color .25s ease;
}
.he-article:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.he-article.is-lead { justify-content: flex-end; min-height: 22rem; background: radial-gradient(circle at 20% 10%, var(--color-accent-soft), transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--color-accent-2) 18%, var(--color-surface-1)), var(--color-surface-1)); }
.he-article-kicker { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.he-article strong { font-family: var(--font-serif); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -.02em; }
.he-article.is-lead strong { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; }
.he-article p { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.6; }
.he-article-more { margin-top: auto; padding-top: .4rem; color: var(--color-accent); font-size: var(--fs-sm); font-weight: 700; }

/* ---------- Closing ---------- */
.he-closing-card {
    display: grid; justify-items: center; gap: var(--space-sm); text-align: center;
    padding: clamp(1.75rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
    border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + .5rem);
    background: radial-gradient(circle at 50% 0%, var(--color-accent-soft), transparent 60%), var(--color-surface-1);
}
.he-closing-card .he-masthead { width: 100%; margin-bottom: var(--space-sm); }
.he-closing-card .section-title, .he-closing-card .section-lead { margin: 0; }
.he-closing-card .display-title { max-width: none; }

/* Section headings carry full sentences: one size below the shared
   .display-title (same treatment as Homepages 2 and 3). */
.he-spotlight .display-title, .he-newfaces .display-title, .he-stripes .display-title,
.he-community .display-title, .he-guides .display-title, .he-creators .display-title, .he-closing .display-title {
    font-size: clamp(2.1rem, 4.2vw, 3.9rem);
    line-height: 1;
    letter-spacing: -.035em;
    padding-bottom: .08em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .he-cover-grid, .he-spotlight-grid, .he-community-card { grid-template-columns: minmax(0, 1fr); }
    .he-cover-photo { max-height: 38rem; }
    .he-rule-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "side"; }
    .he-faces, .he-faces:not(.he-faces-n5) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .he-faces-n5 .he-face-1 { grid-column: 1 / -1; grid-row: auto; }
    .he-faces-n5 .he-face-1 .he-face-media { aspect-ratio: 16 / 10; min-height: 0; }
    .he-stripe, .he-stripe.is-flipped { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
    .he-stripe.is-flipped .he-stripe-copy { order: 0; }
    .he-articles, .he-articles-n3, .he-articles-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .he-articles .is-lead { grid-column: 1 / -1; grid-row: auto; min-height: 16rem; }
    .he-articles-n4 .he-article:last-child { grid-column: auto; }
    .he-articles-n3 .he-article:last-child, .he-articles-n4 .he-article:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 640px) {
    .he-cover { padding-top: calc(var(--nav-height) + var(--space-md)); }
    .he-index ol { grid-template-columns: minmax(0, 1fr); }
    .he-cover-photo { aspect-ratio: 4 / 5; max-height: 30rem; }
    .he-faces, .he-faces:not(.he-faces-n5) { gap: var(--space-sm); }
    .he-stripe-photos, .he-stripe-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .he-stripe-photos > a { max-height: none; }
    .he-articles, .he-articles-n2, .he-articles-n3, .he-articles-n4 { grid-template-columns: minmax(0, 1fr); }
    .he-article { padding: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
    .he-cover-photo img, .he-spotlight-photo img, .he-face-media img, .he-stripe-photos > a img { transition: none; }
}

/* ---- home-v5.css ---- */
/* Homepage 5 — "City explorer" (views/public/home-explorer.php, 2026-10-05).
   Namespaced .hx-*; a travel-guide arrangement of the same brand. Reuses
   Homepage 2's search, kicker, heads, category pills, feature icon, step
   link and closing card (home-v2.css) and the green "available" text from
   Homepage 3 (.hg-available). */

/* ---------- Hero: copy + city postcards ---------- */
.hx-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-2xl);
    background: radial-gradient(circle at 76% 48%, var(--color-accent-soft), transparent 40%), linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}
.hx-hero::before, .hx-hero::after { content: ""; position: absolute; z-index: -1; width: 18rem; height: 18rem; border-radius: 50%; filter: blur(90px); opacity: .2; pointer-events: none; }
.hx-hero::before { top: 10%; left: -8rem; background: var(--color-pop-orange); }
.hx-hero::after { bottom: 4%; right: -6rem; background: var(--color-pop-lime); opacity: .12; }
.hx-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hx-hero-inner.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.hx-hero-copy { display: grid; justify-items: start; gap: var(--space-md); min-width: 0; }
.hx-title { margin: 0; font-family: var(--font-serif); font-size: clamp(2.8rem, 5.6vw, 5.6rem); font-weight: 700; line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.hx-title span { color: var(--color-accent); font-style: italic; }
.hx-lead { margin: 0; max-width: 35rem; color: var(--color-text-dim); font-size: var(--fs-md); line-height: 1.6; }
.hx-search { max-width: 40rem; }
.hx-quick { display: grid; gap: .5rem; }
.hx-quick .hv-browse-label { margin: 0; }
.hx-quick-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.hx-pill {
    display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .5rem .42rem .7rem;
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-surface-1) 70%, transparent);
    color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.hx-pill svg { color: var(--color-accent); flex: none; }
.hx-pill small, .hx-tab small { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-dim); font-size: .7rem; font-weight: 700; }
.hx-pill:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }

.hx-postcards { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .8rem; height: 32rem; min-width: 0; }
.hx-postcards-n1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.hx-postcards-n2 { grid-template-rows: minmax(0, 1fr); }
.hx-postcard { position: relative; overflow: hidden; isolation: isolate; min-height: 0; border-radius: var(--radius-xl); background: var(--color-accent-gradient); color: #fff; text-decoration: none; box-shadow: var(--shadow-md); }
.hx-postcards-n3 .hx-postcard-1 { grid-row: span 2; }
.hx-postcard img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.hx-postcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .8)); }
.hx-postcard:hover img { transform: scale(1.04); }
.hx-postcard-meta { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; display: grid; gap: .15rem; min-width: 0; }
.hx-postcard-meta small { color: rgba(255, 255, 255, .75); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx-postcard-meta strong { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: -.02em; overflow-wrap: break-word; }
.hx-postcard-1 .hx-postcard-meta strong { font-size: clamp(2rem, 3.4vw, 3.1rem); }
.hx-postcard-meta em { color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); font-style: normal; }
.hx-live-badge {
    position: absolute; top: -.8rem; right: 1rem; z-index: 3;
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem;
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface-1);
    box-shadow: var(--shadow-md); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
}
.hx-live-badge i, .hx-eyebrow-live i { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--color-success) 22%, transparent); animation: hx-pulse 2.4s ease-in-out infinite; }
@keyframes hx-pulse { 50% { box-shadow: 0 0 0 .55rem color-mix(in srgb, var(--color-success) 0%, transparent); } }

/* ---------- Available now rail ---------- */
.hx-eyebrow-live { display: flex; align-items: center; gap: .55rem; width: fit-content; margin-bottom: .5rem; }
.hx-rail-track { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: none; } /* arrows + swipe; no raw scrollbar */
.hx-rail-track::-webkit-scrollbar { display: none; }
.hx-card { flex: 0 0 15rem; display: grid; align-content: start; gap: .3rem; min-width: 0; scroll-snap-align: start; color: var(--color-text); text-decoration: none; }
.hx-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: .4rem; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.hx-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.hx-card:hover .hx-card-media img { transform: scale(1.05); }
.hx-card-status { position: absolute; top: .6rem; left: .6rem; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); color: #fff; font-size: .7rem; font-weight: 700; }
.hx-card-status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-success); }
.hx-card strong { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-card small { display: block; color: var(--color-text-dim); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-card small svg, .hx-city-place svg { display: inline-block; vertical-align: -2px; color: var(--color-accent); }
.hx-rail-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: var(--space-sm); }
.hx-rail-nav[hidden] { display: none; }
.hx-rail-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface-1); color: var(--color-text); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.hx-rail-btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.hx-rail-btn:disabled { opacity: .35; cursor: default; }

/* ---------- Cities as photo collages ---------- */
.hx-city-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
.hx-city-grid > .hx-city { grid-column: span 2; }
.hx-city-grid-4 > .hx-city, .hx-city-grid-2 > .hx-city, .hx-city-grid-5 > .hx-city:nth-child(-n + 2) { grid-column: span 3; }
.hx-city-grid-1 > .hx-city { grid-column: 1 / -1; }
.hx-city {
    display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-width: 0;
    border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-1);
    color: var(--color-text); text-decoration: none; transition: transform .25s var(--ease-out), border-color .25s ease;
}
.hx-city:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.hx-city-collage { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; aspect-ratio: 16 / 10; background: var(--color-accent-gradient); }
.hx-city-collage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.hx-collage-n3 img:first-child { grid-row: span 2; }
.hx-collage-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.hx-collage-n1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.hx-city-body { display: grid; align-content: start; gap: .3rem; padding: var(--space-md); }
.hx-city-place { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hx-city-body strong { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: -.02em; }
.hx-city-stats { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--color-text-dim); font-size: var(--fs-sm); }

/* ---------- City switcher ---------- */
.hx-switcher { max-width: 64rem; margin-inline: auto; }
.hx-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: var(--space-lg); }
.hx-tabs[hidden] { display: none; }
.hx-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .6rem .55rem 1.05rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.hx-tab:hover { border-color: var(--color-accent); }
.hx-tab[aria-selected="true"] { border-color: transparent; background: var(--color-accent-gradient); color: #fff; }
.hx-tab[aria-selected="true"] small { background: rgba(255, 255, 255, .22); color: #fff; }
.hx-panel { padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + .25rem); background: var(--color-surface-1); }
.hx-panel + .hx-panel { margin-top: var(--space-md); }
.hx-panel[hidden] { display: none; }
.hx-panel-title { margin: 0 0 var(--space-md); font-family: var(--font-serif); font-size: var(--fs-xl); }
.hx-js .hx-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.hx-person {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .9rem; align-items: center; min-width: 0; padding: .6rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface-2) 60%, transparent);
    color: var(--color-text); text-decoration: none; transition: border-color .2s ease;
}
.hx-person:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.hx-person-media { display: block; overflow: hidden; width: 5.5rem; aspect-ratio: 1; border-radius: var(--radius-md); background: var(--color-surface-2); }
.hx-person-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-person-body { display: grid; gap: .2rem; min-width: 0; }
.hx-person-body strong { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-person-body small { color: var(--color-text-dim); font-size: var(--fs-xs); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx-person-meta { display: flex; flex-wrap: wrap; gap: .15rem .8rem; color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 600; }
.hx-panel-more { display: inline-block; margin-top: var(--space-md); }

/* ---------- Connections ---------- */
.hx-moods-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + .5rem); background: var(--color-surface-1); }
.hx-moods-head .section-title { margin: .4rem 0 0; }
.hx-moods-list { display: grid; justify-items: start; gap: var(--space-sm); min-width: 0; }

/* ---------- Deeper Community strip ---------- */
.hx-deeper-band {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
    padding: clamp(1.5rem, 4.5vw, 3.5rem);
    border: 1px solid var(--color-border-strong); border-radius: calc(var(--radius-xl) + .5rem);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 45%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent-2) 28%, transparent), transparent 50%),
        var(--color-surface-1);
    box-shadow: var(--shadow-lg);
}
.hx-deeper-copy .section-title { margin: var(--space-xs) 0 var(--space-sm); }
.hx-deeper-copy p { margin: 0; max-width: 30rem; color: var(--color-text-dim); line-height: 1.65; }
.hx-deeper-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.hx-feature { display: grid; align-content: start; gap: .4rem; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface-2) 70%, transparent); }
.hx-feature .hv-feature-icon { width: 2.4rem; height: 2.4rem; }
.hx-feature h3 { margin: .3rem 0 0; font-size: var(--fs-md); }
.hx-feature p { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- Trust ---------- */
.hx-trust-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.hx-stat { display: grid; align-content: center; gap: .3rem; padding: var(--space-md); border-radius: var(--radius-lg); background: var(--color-accent-gradient); color: #fff; }
.hx-stat strong { font-family: var(--font-serif); font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; }
.hx-stat span { font-size: var(--fs-sm); font-weight: 600; opacity: .92; }
.hx-pillar { display: grid; align-content: start; gap: .35rem; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.hx-pillar > span { color: var(--color-accent); font-family: var(--font-serif); font-size: var(--fs-lg); }
.hx-pillar h3 { margin: 0; font-size: var(--fs-md); }
.hx-pillar p { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- Closing ---------- */
.hx-ways { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: var(--space-xs); }
.hx-ways a { padding: .45rem .9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text-dim); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.hx-ways a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hx-closing-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; margin-top: var(--space-xs); }

/* Section headings carry full sentences: one size below the shared
   .display-title (same treatment as Homepages 2–4). */
.hx-available .display-title, .hx-cities .display-title, .hx-explore .display-title, .hx-moods .display-title,
.hx-deeper .display-title, .hx-trust .display-title, .hx-closing .display-title {
    font-size: clamp(2.1rem, 4.2vw, 3.9rem);
    line-height: 1;
    letter-spacing: -.035em;
    padding-bottom: .08em;
}
.hx-explore .hv-head-center .display-title { margin-inline: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .hx-hero-inner, .hx-deeper-band, .hx-moods-card { grid-template-columns: minmax(0, 1fr); }
    .hx-postcards { height: 26rem; }
    .hx-city-grid > .hx-city, .hx-city-grid-5 > .hx-city:nth-child(-n + 2) { grid-column: span 3; }
    .hx-city-grid > .hx-city:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .hx-trust-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hx-trust-row > .hx-stat { grid-column: span 3; }
    .hx-trust-row > .hx-pillar { grid-column: span 2; }
}
@media (max-width: 640px) {
    .hx-hero { padding: calc(var(--nav-height) + var(--space-lg)) 0 var(--space-xl); }
    .hx-postcards { height: 22rem; gap: .6rem; }
    .hx-card { flex-basis: 62vw; }
    .hx-city-grid > .hx-city, .hx-city-grid > .hx-city:last-child:nth-child(odd), .hx-city-grid-5 > .hx-city:nth-child(-n + 2) { grid-column: 1 / -1; }
    .hx-panel { padding: var(--space-sm); }
    .hx-people { grid-template-columns: minmax(0, 1fr); }
    .hx-person { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .hx-person-media { width: 4.5rem; }
    .hx-deeper-features { grid-template-columns: minmax(0, 1fr); }
    .hx-trust-row > .hx-pillar { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-live-badge i, .hx-eyebrow-live i { animation: none; }
    .hx-postcard img, .hx-card-media img { transition: none; }
}

/* ---- onboarding.css ---- */
/* Onboarding (views/onboarding/*, 2026-10-05): the creator setup wizard and
   the member welcome. Public brand — same tokens, buttons, inputs, kicker
   and choice cards as the front end; namespaced .ob-*. */

.ob { position: relative; padding: var(--space-lg) 0 var(--space-3xl); }
.ob::before { content: ""; position: absolute; inset: 0 0 auto; height: 28rem; z-index: -1; pointer-events: none; background: radial-gradient(circle at 80% 0%, var(--color-accent-soft), transparent 55%); }
.ob-shell { display: grid; gap: var(--space-lg); max-width: 72rem; }
.ob-head { display: grid; gap: var(--space-xs); justify-items: start; }
.ob-title { margin: 0; font-family: var(--font-serif); font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.ob-lead { margin: 0; max-width: 44rem; color: var(--color-text-dim); font-size: var(--fs-md); line-height: 1.6; }

/* ---------- Steps + meter ---------- */
.ob-steps { display: grid; gap: .7rem; }
.ob-steps ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ob-step > a, .ob-step > span {
    display: flex; align-items: center; gap: .6rem; min-width: 0; height: 100%; padding: .6rem .75rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1);
    color: var(--color-text-dim); text-decoration: none; transition: border-color .2s ease;
}
.ob-step > a:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.ob-step b { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border: 1px solid var(--color-border-strong); border-radius: 50%; font-size: var(--fs-sm); }
.ob-step em { min-width: 0; overflow: hidden; font-size: var(--fs-sm); font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ob-step.is-done b { border-color: transparent; background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); }
.ob-step.is-current > span { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); background: var(--color-accent-soft); color: var(--color-text); }
.ob-step.is-current b { border-color: transparent; background: var(--color-accent-gradient); color: #fff; }
.ob-meter { height: .5rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-surface-2); }
.ob-meter span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent-gradient); transition: width .6s var(--ease-out); }
.ob-meter-label { margin: 0; color: var(--color-text-faint); font-size: var(--fs-sm); }
.ob-meter-label strong { color: var(--color-text); }
.ob-alert { margin: 0; }
.ob-alert ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* ---------- Layout ---------- */
.ob-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-lg); align-items: start; }
.ob-card { display: grid; gap: var(--space-md); min-width: 0; padding: clamp(1.1rem, 3vw, 2rem); border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + .25rem); background: var(--color-surface-1); }
.ob-form { display: grid; gap: var(--space-md); min-width: 0; }
.ob-form .form-grid { gap: var(--space-md); }
.ob-form .field { margin: 0; min-width: 0; }
.ob-form .field-label small, .ob-fieldset legend small { color: var(--color-text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.ob-fieldset { display: grid; gap: .6rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ob-count { margin: .35rem 0 0; }
.ob-count.is-short { color: var(--color-warning); }
.ob-count.is-ok { color: var(--color-success); }
.ob-bio { min-height: 15rem; line-height: 1.6; }
.ob-choices { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.ob-choices .choice-card { min-width: 0; }
.ob-rates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.ob-money { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-2); overflow: hidden; }
.ob-money span { display: grid; place-items: center; padding: 0 .7rem; border-right: 1px solid var(--color-border); color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 700; }
.ob-money .input { min-width: 0; border: 0; border-radius: 0; background: transparent; }
.ob-more { border-top: 1px solid var(--color-border); padding-top: var(--space-sm); }
.ob-more summary { cursor: pointer; font-weight: 700; }
.ob-more summary small { color: var(--color-text-faint); font-weight: 500; }
.ob-more[open] summary { margin-bottom: .5rem; }

.ob-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.ob-actions-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.ob-back { padding: 0; border: 0; background: none; color: var(--color-text-dim); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; cursor: pointer; }
.ob-back:hover { color: var(--color-accent); }

/* ---------- Aside guidance ---------- */
.ob-aside { display: grid; gap: var(--space-md); min-width: 0; position: sticky; top: calc(var(--nav-height) + 1rem); }
.ob-panel { display: grid; gap: .6rem; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-1); }
.ob-panel-title { margin: 0; font-size: var(--fs-md); }
.ob-panel-text { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }
.ob-checklist { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ob-checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; font-size: var(--fs-sm); font-weight: 600; }
.ob-checklist small { display: block; margin-top: .1rem; color: var(--color-text-faint); font-weight: 500; line-height: 1.4; }
.ob-checklist a { margin-left: .3rem; color: var(--color-accent); font-weight: 700; }
.ob-tick { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-top: .05rem; border: 1.5px solid var(--color-border-strong); border-radius: 50%; }
.ob-checklist li.is-done .ob-tick { border-color: transparent; background: var(--color-success); color: #0a0a0c; }
.ob-checklist li.is-done > span:nth-child(2) { color: var(--color-text-dim); }
.ob-rules, .ob-examples { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: 1.45; color: var(--color-text-dim); }
.ob-rules li { position: relative; padding-left: 1.4rem; }
.ob-rules li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.ob-do::before { content: "✓"; color: var(--color-success); }
.ob-dont::before { content: "✕"; color: var(--color-danger); }
.ob-good, .ob-bad { display: inline-block; margin-right: .35rem; padding: .05rem .45rem; border-radius: var(--radius-pill); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ob-good { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.ob-bad { background: color-mix(in srgb, var(--color-danger) 18%, transparent); color: var(--color-danger); }
.ob-example { border-top: 1px solid var(--color-border); padding-top: .55rem; font-size: var(--fs-sm); }
.ob-example summary { cursor: pointer; color: var(--color-accent); font-weight: 700; }
.ob-example p { margin: .5rem 0 0; color: var(--color-text-dim); line-height: 1.6; font-style: italic; }

/* ---------- Photos ---------- */
.ob-upload { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; padding: var(--space-md); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-surface-2) 60%, transparent); }
.ob-upload-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--color-accent-gradient); color: #fff; }
.ob-upload-copy { display: grid; gap: .15rem; min-width: 0; }
.ob-upload-copy span { color: var(--color-text-faint); font-size: var(--fs-sm); }
.ob-file { position: relative; overflow: hidden; max-width: 14rem; }
.ob-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ob-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.ob-photo, .ob-photo-empty { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.ob-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-photo.is-main { box-shadow: 0 0 0 2px var(--color-accent); }
.ob-photo.is-rejected img { opacity: .4; filter: grayscale(1); }
.ob-photo-badge { position: absolute; top: .5rem; left: .5rem; padding: .2rem .55rem; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .6); color: #fff; font-size: .68rem; font-weight: 700; }
.ob-photo.is-main .ob-photo-badge { background: var(--color-accent-gradient); }
.ob-photo-actions { position: absolute; left: .4rem; right: .4rem; bottom: .4rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.ob-photo-actions .btn { min-height: 0; padding: .3rem .6rem; border-color: rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; }
.ob-photo-empty { display: grid; place-items: center; border: 1.5px dashed var(--color-border-strong); color: var(--color-text-faint); font-size: var(--fs-sm); }

/* ---------- Preview ---------- */
.ob-preview { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.ob-preview-photo { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius-xl); background: var(--color-surface-2); }
.ob-preview-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-preview-empty { display: grid; place-items: center; height: 100%; color: var(--color-text-faint); }
.ob-preview-body { display: grid; gap: .55rem; min-width: 0; }
.ob-preview-body h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; overflow-wrap: break-word; }
.ob-preview-body h2 small { color: var(--color-text-dim); font-size: .6em; }
.ob-preview-meta { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); }
.ob-preview-tagline { margin: 0; font-family: var(--font-serif); font-size: var(--fs-lg); font-style: italic; line-height: 1.3; }
.ob-preview-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ob-preview-bio { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.65; }
.ob-preview-strip { display: flex; gap: .4rem; overflow: hidden; }
.ob-preview-strip img { flex: 0 0 auto; width: 4.2rem; height: 5.2rem; object-fit: cover; border-radius: var(--radius-md); }
.ob-submit { display: grid; gap: .8rem; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.ob-submit p { margin: 0; color: var(--color-text-dim); line-height: 1.6; }
.ob-submit strong { color: var(--color-text); }

/* ---------- Submitted ---------- */
.ob-done { justify-items: center; max-width: 46rem; padding-top: var(--space-xl); text-align: center; }
.ob-done .ob-lead { margin-inline: auto; }
.ob-done-icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--color-accent-gradient); color: #fff; box-shadow: var(--shadow-glow-accent); }
.ob-next { display: grid; gap: .6rem; width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.ob-next li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.ob-next b { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-family: var(--font-serif); }
.ob-next span { color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }
.ob-next strong { display: block; color: var(--color-text); font-size: var(--fs-md); }
.ob-done-actions { justify-content: center; }

/* ---------- Member welcome ---------- */
.ob-member { max-width: 60rem; }
.ob-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.ob-pill { position: relative; cursor: pointer; }
.ob-pill input { position: absolute; opacity: 0; pointer-events: none; }
.ob-pill span { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .6rem .55rem .9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; transition: border-color .2s ease, background-color .2s ease; }
.ob-pill span svg { display: inline-block; color: var(--color-accent); }
.ob-pill small { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-dim); font-size: .7rem; font-weight: 700; }
.ob-pill input:checked + span { border-color: transparent; background: var(--color-accent-gradient); color: #fff; }
.ob-pill input:checked + span svg { color: #fff; }
.ob-pill input:checked + span small { background: rgba(255, 255, 255, .22); color: #fff; }
.ob-pill input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ob-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.ob-pick { display: grid; gap: .25rem; min-width: 0; color: var(--color-text); text-decoration: none; }
.ob-pick-media { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; margin-bottom: .35rem; border-radius: var(--radius-lg); background: var(--color-surface-2); }
.ob-pick-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.ob-pick:hover .ob-pick-media img { transform: scale(1.04); }
.ob-pick strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-pick small { color: var(--color-text-dim); font-size: var(--fs-xs); }
.ob-pick small svg { display: inline-block; vertical-align: -2px; color: var(--color-accent); }
.ob-deeper { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ob-deeper h2 { margin: 0 0 .3rem; font-size: var(--fs-lg); }
.ob-deeper p { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); }
.ob-member-actions { border-top: 0; padding-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .ob-grid { grid-template-columns: minmax(0, 1fr); }
    .ob-aside { position: static; }
    .ob-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .ob-steps ol { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
    .ob-step > a, .ob-step > span { justify-content: center; padding: .5rem .25rem; }
    .ob-step em { display: none; }
    .ob-step.is-current em { display: none; }
    .ob-upload { grid-template-columns: auto minmax(0, 1fr); }
    .ob-upload .ob-file, .ob-upload .btn-primary { grid-column: 1 / -1; max-width: none; justify-content: center; }
    .ob-preview { grid-template-columns: minmax(0, 1fr); }
    .ob-preview-photo { max-width: 18rem; }
    .ob-rates { grid-template-columns: minmax(0, 1fr); }
    .ob-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ob-deeper { grid-template-columns: minmax(0, 1fr); }
    .ob-actions .ob-actions-row { width: 100%; }
    .ob-actions .ob-actions-row .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ob-meter span, .ob-pick-media img { transition: none; }
}

/* Readability (WCAG AA) for the wizard's small print — same values the back
   office uses: the faintest grey was ~4.3:1 in dark ("Photo 3", "AUD"), the
   amber "62 / 200 characters" counter ~3.6:1 in light. */
:root[data-theme="dark"] .ob,
:root:not([data-theme]) .ob {
    --color-text-faint: #8e8d98;
}
:root[data-theme="light"] .ob {
    --color-warning: #8a5a12;
    --color-danger: #b42a40;
}

/* ======================================================================
   v3.58 — focused onboarding shell (layouts/onboarding.php): no site menu
   or footer, a quiet top bar, the step as the whole page.
   ====================================================================== */
.ob-app { min-height: 100vh; min-height: 100dvh; background:
    radial-gradient(60rem 30rem at 85% -10%, var(--color-accent-soft), transparent 60%),
    radial-gradient(40rem 26rem at -10% 110%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 60%),
    var(--color-bg); }
.ob-bar { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--space-sm); height: 4rem; padding: 0 clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ob-bar-brand { display: inline-flex; }
.ob-bar-context { padding-left: var(--space-sm); border-left: 1px solid var(--color-border); color: var(--color-text-dim); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-bar-actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.ob-bar-exit { padding: .5rem .9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color var(--duration-fast) var(--ease-out); }
.ob-bar-exit:hover { border-color: var(--color-accent); }
.ob-app-main { display: block; }
.ob-app .ob { padding-top: clamp(1.5rem, 4vw, 3rem); }
.ob-app .ob::before { display: none; }
.ob-app .ob-aside { top: 5.25rem; }

/* Steps: one calm segmented line; labels on wide screens only. */
.ob-app .ob-step > a, .ob-app .ob-step > span { padding: .5rem .6rem; border-radius: var(--radius-md); }
.ob-app .ob-step b { width: 1.6rem; height: 1.6rem; font-size: var(--fs-xs); }
@media (max-width: 1180px) {
    .ob-app .ob-step em { display: none; }
    .ob-app .ob-step.is-current em { display: inline; }
    .ob-app .ob-steps ol { grid-template-columns: repeat(7, minmax(2.6rem, auto)); justify-content: start; }
    .ob-app .ob-step.is-current { grid-column: span 1; }
}

/* Entrance: content rises in once per step (not on reduced motion). */
@keyframes ob-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ob-app .ob-head, .ob-app .ob-card, .ob-app .ob-aside > *, .ob-app .ob-done > * { animation: ob-rise .55s var(--ease-out) both; }
.ob-app .ob-card { animation-delay: .06s; }
.ob-app .ob-aside > *:nth-child(1) { animation-delay: .12s; }
.ob-app .ob-aside > *:nth-child(2) { animation-delay: .18s; }
.ob-app .ob-aside > *:nth-child(3) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .ob-app .ob-head, .ob-app .ob-card, .ob-app .ob-aside > *, .ob-app .ob-done > * { animation: none; }
}

/* Live preview card beside the form. */
.ob-live { position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .6); }
.ob-live-photo { overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); background: var(--color-accent-soft); display: grid; place-items: center; }
.ob-live-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-live-photo span { font-family: var(--font-serif); font-size: 2rem; color: var(--color-accent); }
.ob-live-body { display: grid; gap: .2rem; min-width: 0; }
.ob-live-body strong { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.1; overflow-wrap: anywhere; }
.ob-live-body small { color: var(--color-text-dim); font-size: var(--fs-xs); }
.ob-live-body p { margin: .15rem 0 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ob-live-label { position: absolute; top: -.6rem; right: .9rem; padding: .1rem .55rem; border-radius: var(--radius-pill); background: var(--color-accent-gradient); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* Status block (Verify ID / Get paid). */
.ob-status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.ob-status strong { display: block; font-size: var(--fs-md); }
.ob-status p { margin: .2rem 0 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }
.ob-status-mark { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-weight: 800; }
.ob-status-ok .ob-status-mark { background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); }
.ob-status-wait .ob-status-mark { background: var(--color-accent-soft); color: var(--color-accent); }
.ob-status-todo .ob-status-mark { background: var(--color-surface-3); color: var(--color-text); }
.ob-earn-note { margin: 0; }

/* What happens next, with live status. */
.ob-next-status li.is-done b { background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); font-family: inherit; }
.ob-next-status li.is-now { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.ob-next-status li.is-now b { background: var(--color-accent-gradient); color: #fff; }
.ob-next-status strong em { margin-left: .4rem; padding: .05rem .5rem; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); font-size: .68rem; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.ob-next-status a { color: var(--color-accent); font-weight: 700; white-space: nowrap; }

/* Phones: the step's buttons stay in reach. */
@media (max-width: 760px) {
    .ob-bar-context { display: none; }
    .ob-app .ob-actions { position: sticky; bottom: 0; z-index: 5; padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); background: var(--color-surface-1); box-shadow: 0 -12px 24px -18px rgba(0, 0, 0, .55); }
    .ob-live { grid-template-columns: 4.2rem minmax(0, 1fr); }
}

/* v3.64: the submitted page is a WIN — let the moment land. One pop of the
   check, one soft halo ring, then stillness. Nothing loops forever. */
.ob-done-celebrate { animation: ob-done-pop .55s cubic-bezier(.2,1.6,.4,1) both; position: relative; }
.ob-done-celebrate::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--color-pop-orange) 70%, transparent); animation: ob-done-halo 1.1s ease-out .25s both; pointer-events: none; }
@keyframes ob-done-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ob-done-halo { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ob-done-celebrate, .ob-done-celebrate::after { animation: none; } .ob-done-celebrate::after { display: none; } }
.ob-streak-seed { max-width: 36rem; margin: .35rem auto 0; padding: .55rem 1rem; border: 1px solid color-mix(in srgb, var(--color-pop-orange) 45%, var(--color-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-pop-orange) 10%, transparent); font-size: var(--fs-sm); }

/* ---- home-v6.css ---- */
/* Homepage 6 — "Signature" (views/public/home-signature.php, 2026-10-05).
   Namespaced .h6-*. Builds on Homepage 3's photo-wall hero (.hg-hero*),
   Homepage 4's connection stripes (.he-stripe*) and the shared .hv-* search,
   buttons, lime card and closing — same brand tokens throughout. */

/* ---------- Hero: full-screen wall, kinetic headline, live numbers ---------- */
.h6-hero { min-height: 100svh; padding-bottom: calc(var(--space-2xl) + 2rem); }
.h6-hero-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); inset: -8rem -6rem; transform: rotate(-7deg) scale(1.05); }
.h6-hero-veil {
    background:
        radial-gradient(ellipse 52% 50% at 50% 50%, color-mix(in srgb, var(--color-bg) 95%, transparent) 0%, color-mix(in srgb, var(--color-bg) 80%, transparent) 55%, color-mix(in srgb, var(--color-bg) 38%, transparent) 100%),
        linear-gradient(180deg, var(--color-bg) 0%, transparent 20%, transparent 75%, var(--color-bg) 100%);
}
.h6-hero-glow {
    position: absolute; z-index: -1; top: 50%; left: 50%; width: min(56rem, 90vw); aspect-ratio: 1; pointer-events: none;
    border-radius: 50%; transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--color-pop-orange) 55%, transparent), color-mix(in srgb, var(--color-pop-pink) 55%, transparent), transparent 60%, color-mix(in srgb, var(--color-pop-orange) 55%, transparent));
    filter: blur(110px); opacity: .32; animation: h6-spin 24s linear infinite;
}
@keyframes h6-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.h6-hero-inner { gap: var(--space-md); max-width: 64rem; }
.h6-title { margin: 0; font-family: var(--font-serif); font-size: clamp(3.1rem, 8vw, 8.2rem); font-weight: 700; line-height: .86; letter-spacing:-.03em; text-wrap: balance; }
.h6-title span { color: var(--color-accent); font-style: italic; }
.h6-rotator { margin: .35rem 0 0; color: var(--color-text-dim); font-family: var(--font-serif); font-size: clamp(1.5rem, 3.2vw, 2.7rem); font-style: italic; line-height: 1.1; }
.h6-rotator-word {
    display: inline-block; padding-right: .08em;
    background: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
    transition: opacity .32s ease, transform .32s var(--ease-out);
}
.h6-rotator-word.is-leaving { opacity: 0; transform: translateY(.35em); }
.h6-lead { max-width: 38rem; }
.h6-search { position: relative; z-index: 6; /* its dropdown menus must open above the live numbers below */ max-width: 46rem; box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.h6-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 46rem; margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-surface-1) 70%, transparent); backdrop-filter: blur(10px); }
.h6-live div { display: grid; gap: .15rem; padding: .85rem .5rem; min-width: 0; }
.h6-live div + div { border-left: 1px solid var(--color-border); }
.h6-live dt { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; color: var(--color-text-faint); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.h6-live dt i, .h6-pulse { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-success) 22%, transparent); animation: h6-pulse 2.4s ease-in-out infinite; }
@keyframes h6-pulse { 50% { box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--color-success) 0%, transparent); } }
.h6-live dd { margin: 0; font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1; }
.h6-scroll { position: absolute; left: 50%; bottom: 1.4rem; z-index: 2; display: grid; place-items: center; width: 1.6rem; height: 2.5rem; border: 2px solid var(--color-border-strong); border-radius: var(--radius-pill); transform: translateX(-50%); }
.h6-scroll span { width: .3rem; height: .5rem; border-radius: var(--radius-pill); background: var(--color-accent); animation: h6-scroll 1.8s ease-in-out infinite; }
@keyframes h6-scroll { 0% { transform: translateY(-.35rem); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(.45rem); opacity: 0; } }

/* ---------- City ticker ---------- */
.h6-ticker { position: relative; overflow: hidden; padding: var(--space-md) 0; border-block: 1px solid var(--color-border); background: var(--color-surface-1); }
.h6-ticker-row { overflow: hidden; }
.h6-ticker-row + .h6-ticker-row { margin-top: .2rem; }
.h6-ticker-track { display: flex; align-items: baseline; gap: 1.6rem; width: max-content; animation: h6-ticker 55s linear infinite; }
.h6-ticker-rtl .h6-ticker-track { animation-direction: reverse; animation-duration: 65s; }
@keyframes h6-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.h6-ticker-item { font-family: var(--font-serif); font-size: clamp(2.4rem, 5.6vw, 5.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; white-space: nowrap; }
.h6-ticker-item.is-outline { color: transparent; -webkit-text-stroke: 1.5px var(--color-text-dim); }
.h6-ticker-item sup { margin-left: .2em; color: var(--color-accent); font-family: var(--font-sans); font-size: .28em; font-weight: 800; letter-spacing: 0; -webkit-text-stroke: 0; vertical-align: super; }
.h6-ticker-dot { color: var(--color-accent); font-size: clamp(1.2rem, 2.4vw, 2rem); }

/* ---------- Bento: the platform at a glance ---------- */
.h6-bento-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(13rem, auto); gap: .9rem;
    grid-template-areas: "city city avail deeper" "city city stats deeper" "guide guide trust trust";
}
.h6-tile-city { grid-area: city; min-height: 27rem; }
.h6-tile-avail { grid-area: avail; }
.h6-tile-deeper { grid-area: deeper; }
.h6-tile-stats { grid-area: stats; }
.h6-tile-guide { grid-area: guide; }
.h6-tile-trust { grid-area: trust; }
.h6-tile-trust.is-wide { grid-area: auto; grid-column: 1 / -1; }
.h6-tile {
    position: relative; overflow: hidden; isolation: isolate; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; padding: 1.3rem;
    border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + .15rem); background: var(--color-surface-1);
    color: var(--color-text); text-decoration: none; transition: transform .3s var(--ease-out), border-color .3s ease;
}
a.h6-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.h6-tile-tag { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin-bottom: auto; padding: .3rem .7rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-surface-2) 85%, transparent); color: var(--color-text-dim); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.h6-tile-bg { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; background: var(--color-accent-gradient); }
.h6-tile-bg img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .8s var(--ease-out); }
.h6-faces-n3 img:first-child { grid-row: span 2; }
.h6-faces-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.h6-faces-n1, .h6-tile-bg.is-blurred { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.h6-tile-bg.is-blurred img { filter: blur(16px) saturate(1.25); transform: scale(1.25); }
.h6-tile-city::after, .h6-tile-deeper::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, transparent 35%, rgba(0, 0, 0, .82) 100%); }
.h6-tile-city, .h6-tile-deeper { color: #fff; border-color: transparent; }
.h6-tile-city .h6-tile-tag, .h6-tile-deeper .h6-tile-tag { background: rgba(0, 0, 0, .5); color: #fff; backdrop-filter: blur(6px); }
a.h6-tile-city:hover .h6-tile-bg img { transform: scale(1.04); }
.h6-tile-foot { display: grid; gap: .25rem; }
.h6-tile-foot strong { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: -.02em; }
.h6-tile-city .h6-tile-foot strong { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.h6-tile-deeper .h6-tile-foot strong { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.05; }
.h6-tile-foot small { color: rgba(255, 255, 255, .82); font-size: var(--fs-sm); font-weight: 600; }
.h6-lock { position: absolute; top: 42%; left: 50%; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); color: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 .5rem rgba(255, 255, 255, .08); }
.h6-big { font-family: var(--font-serif); font-size: clamp(3rem, 5vw, 4.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; background: var(--color-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h6-tile small { color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.45; }
.h6-tile-city small, .h6-tile-deeper small { color: rgba(255, 255, 255, .82); }
.h6-avatars { display: flex; }
.h6-avatars img { width: 2.5rem; height: 2.5rem; margin-left: -.6rem; border: 2px solid var(--color-surface-1); border-radius: 50%; object-fit: cover; }
.h6-avatars img:first-child { margin-left: 0; }
.h6-tile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: .5rem; }
.h6-tile-stats > div { display: grid; gap: .5rem; }
.h6-tile-guide { background: radial-gradient(circle at 15% 0%, var(--color-accent-soft), transparent 60%), var(--color-surface-1); }
.h6-tile-guide > strong { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; }
.h6-tile-trust ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.h6-tile-trust li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.h6-tile-trust li strong { display: block; font-size: var(--fs-md); }
.h6-check { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }

/* ---------- Fresh faces reel ---------- */
.h6-reel-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .7rem; scrollbar-width: none; } /* arrows + swipe; no raw scrollbar */
.h6-reel-track::-webkit-scrollbar { display: none; }
.h6-reel-card {
    position: relative; flex: 0 0 clamp(15rem, 22vw, 19rem); aspect-ratio: 3 / 4.2; overflow: hidden; isolation: isolate; scroll-snap-align: start;
    border-radius: calc(var(--radius-xl) + .15rem); background: var(--color-surface-2); color: #fff; text-decoration: none;
}
.h6-reel-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.h6-reel-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85) 100%); }
.h6-reel-card:hover img { transform: scale(1.06); }
.h6-reel-no { position: absolute; top: .7rem; right: .9rem; color: transparent; font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; line-height: 1; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }
.h6-reel-meta { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: grid; gap: .15rem; min-width: 0; }
.h6-reel-meta strong { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h6-reel-meta small { color: rgba(255, 255, 255, .8); font-size: var(--fs-sm); font-weight: 600; }
.h6-reel-meta em { color: rgba(255, 255, 255, .85); font-size: var(--fs-sm); font-style: normal; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Cinematic Deeper Community band ---------- */
.h6-cinema { position: relative; overflow: hidden; isolation: isolate; padding: clamp(5rem, 11vw, 9rem) 0; }
.h6-cinema-bg { position: absolute; inset: -2rem; z-index: -2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .5rem; transform: rotate(-3deg) scale(1.08); }
.h6-cinema-bg img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(1.1); }
.h6-cinema-veil {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 45%),
        radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--color-accent-2) 32%, transparent), transparent 50%),
        linear-gradient(180deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 82%, transparent) 22%, color-mix(in srgb, var(--color-bg) 82%, transparent) 78%, var(--color-bg) 100%);
}
.h6-cinema-inner { display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.h6-cinema-title { margin: 0; max-width: 16ch; font-family: var(--font-serif); font-size: clamp(2.8rem, 6.6vw, 6.4rem); font-weight: 700; line-height: .92; letter-spacing:-.03em; text-wrap: balance; }
.h6-cinema-lead { margin: 0; max-width: 40rem; color: var(--color-text-dim); font-size: var(--fs-md); line-height: 1.6; }
.h6-cinema .hv-actions { justify-content: center; margin-top: 0; }
.h6-cinema-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; width: 100%; margin-top: var(--space-lg); text-align: left; }
.h6-cinema-feature { display: grid; align-content: start; gap: .4rem; padding: var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface-1) 72%, transparent); backdrop-filter: blur(12px); }
.h6-cinema-feature .hv-feature-icon { width: 2.4rem; height: 2.4rem; }
.h6-cinema-feature h3 { margin: .3rem 0 0; font-size: var(--fs-md); }
.h6-cinema-feature p { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }

/* Section headings carry full sentences: one size below .display-title. */
.h6-stripes .display-title, .h6-bento .display-title, .h6-reel .display-title, .h6-creators .display-title, .h6-closing .display-title {
    font-size: clamp(2.1rem, 4.2vw, 3.9rem); line-height: 1; letter-spacing: -.035em; padding-bottom: .08em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .h6-hero-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .h6-hero-wall .hg-hero-col-5, .h6-hero-wall .hg-hero-col-6 { display: none; }
    .h6-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "city city" "avail deeper" "stats deeper" "guide guide" "trust trust"; }
    .h6-tile-city { min-height: 22rem; }
    .h6-cinema-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .h6-hero { min-height: 0; }
    .h6-hero-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .h6-hero-wall .hg-hero-col-4 { display: none; }
    .h6-hero-veil { background: color-mix(in srgb, var(--color-bg) 82%, transparent); }
    .h6-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h6-live div:nth-child(3) { border-left: 0; }
    .h6-live div:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
    .h6-scroll { display: none; }
    .h6-bento-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; grid-template-areas: "city" "avail" "deeper" "stats" "guide" "trust"; }
    .h6-tile { min-height: 11rem; }
    .h6-tile-city { min-height: 20rem; }
    .h6-tile-deeper { min-height: 16rem; }
    .h6-reel-card { flex-basis: 72vw; }
    .h6-cinema-features { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .h6-hero-glow, .h6-ticker-track, .h6-live dt i, .h6-pulse, .h6-scroll span { animation: none; }
    .h6-rotator-word, .h6-tile-bg img, .h6-reel-card img { transition: none; }
}

/* ---- site-controls.css ---- */
/* Visitor-facing pieces of the admin controls (2026-10-06):
 * - the announcement bar (Admin > System > Settings > Announcement), on the
 *   public site and at the top of Provider Studio / the member area;
 * - the stand-alone maintenance / blocked-access page (App\Lib\SiteGate);
 * - the "sign-ups paused" notice on /join and /register.
 * Imported by main.css (public) and admin.css (back-office shells). */

.site-announcement {
    position: relative;
    z-index: calc(var(--z-nav) + 1);
    font-size: var(--fs-sm);
    line-height: 1.45;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.site-announcement-inner {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: min(100%, var(--container-max));
    margin-inline: auto;
    padding: .55rem clamp(1rem, 4vw, 2rem);
}
.site-announcement-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: center;
    overflow-wrap: break-word;
}
.site-announcement-text a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.site-announcement-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.site-announcement-close:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.site-announcement-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-announcement-close svg { display: block; }

/* Tones: inverse for information (reads in both themes), brand lime for good
   news, brand orange for anything important. Dark text on the pops (≥ 6:1). */
.site-announcement--info { background: var(--color-text); color: var(--color-bg); }
.site-announcement--success { background: var(--color-pop-lime); color: var(--color-on-pop); }
.site-announcement--warning { background: var(--color-pop-orange); color: var(--color-on-pop); }

/* Public site: the fixed nav starts below the bar while the bar is on
   screen (the bar's script keeps --announcement-offset up to date as you
   scroll; it reaches 0 once the bar has scrolled away). */
.has-announcement .site-nav { top: var(--announcement-offset, 0px); }
.has-announcement .nav-menu { padding-top: calc(var(--nav-height) + var(--space-lg) + var(--announcement-offset, 0px)); }

/* Back office: a plain full-width strip above the sticky top bar. */
.admin-main > .site-announcement { z-index: auto; }

/* ---- Maintenance / blocked-access page -------------------------------- */
.gate-body { min-height: 100vh; background: var(--color-bg); }
.gate-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--space-lg) var(--space-sm);
    background:
        radial-gradient(60% 50% at 80% 0%, var(--color-accent-soft), transparent 70%),
        radial-gradient(50% 45% at 0% 100%, color-mix(in srgb, var(--color-accent-2) 12%, transparent), transparent 70%);
}
.gate-card {
    display: grid;
    justify-items: center;
    gap: var(--space-sm);
    width: min(100%, 34rem);
    padding: clamp(1.75rem, 5vw, 3rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.gate-mark .site-logomark { display: block; }
.gate-eyebrow {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.gate-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
}
.gate-text { margin: 0; max-width: 46ch; color: var(--color-text-dim); line-height: 1.6; overflow-wrap: break-word; }
.gate-contact { margin: 0; font-size: var(--fs-sm); color: var(--color-text-dim); }
.gate-contact a { color: var(--color-accent); }
.gate-staff {
    margin-top: var(--space-xs);
    font-size: var(--fs-xs);
    color: var(--color-text-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Sign-ups paused -------------------------------------------------- */
.signup-closed { margin-top: var(--space-md); }

/* ---- guided.css ---- */
/* guided.css — v3.75 guided onboarding (checklist cards, one-time tips, getting-started + how-you-get-paid pages). Imported by main.css AND admin.css (the Studio uses the admin bundle). */
/* ---- v3.75 guided onboarding: checklist cards, one-time tips, pages ---- */
.ob-check { margin: var(--space-lg, 1.5rem) 0; padding: 1.25rem 1.35rem 1rem; border: 1px solid var(--color-border); border-radius: 18px; background: linear-gradient(160deg, var(--color-surface-2), var(--color-surface-1)); position: relative; overflow: hidden; }
.ob-check::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--color-accent-gradient); opacity: .9; }
.ob-check-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ob-check-eyebrow { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .25rem; }
.ob-check h2 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.15; }
.ob-check-progress-label { margin: .35rem 0 0; color: var(--color-text-muted, #9a9aa4); font-size: .9rem; }
.ob-check-dismiss { margin: 0; }
.ob-check-close { appearance: none; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted, #9a9aa4); width: 2rem; height: 2rem; border-radius: 999px; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ob-check-close:hover { color: var(--color-text, #fff); border-color: var(--color-border-strong); }
.ob-check-meter { margin: .9rem 0 1rem; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ob-check-meter span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent-gradient); transition: width .4s ease; }
.ob-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ob-check-item { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 12px; }
.ob-check-item.is-next { background: var(--color-accent-soft); }
.ob-check-item.is-done { opacity: .55; }
.ob-check-mark { width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 1.5px solid var(--color-border-strong); display: grid; place-items: center; font-size: .85rem; font-weight: 700; color: var(--color-bg); }
.ob-check-item.is-done .ob-check-mark { background: var(--color-pop-lime); border-color: var(--color-pop-lime); }
.ob-check-body { display: grid; gap: .1rem; min-width: 0; }
.ob-check-body a { color: inherit; text-decoration: none; }
.ob-check-body a:hover strong { text-decoration: underline; }
.ob-check-body strong { font-weight: 600; font-size: .98rem; }
.ob-check-item.is-done .ob-check-body strong { text-decoration: line-through; font-weight: 500; }
.ob-check-body small { color: var(--color-text-muted, #9a9aa4); font-size: .84rem; line-height: 1.4; }
.ob-check-go { color: var(--color-accent); text-decoration: none; font-weight: 700; padding: .25rem .5rem; border-radius: 999px; }
.ob-check-go:hover { background: var(--color-accent-soft); }
.ob-check-foot { margin-top: .9rem; font-size: .85rem; color: var(--color-text-muted, #9a9aa4); }
.ob-check-foot a { color: inherit; }
.ob-check-creator { margin-top: var(--space-md, 1rem); }
@media (max-width: 640px) { .ob-check { padding: 1rem 1rem .8rem; border-radius: 14px; } .ob-check-item { grid-template-columns: 1.4rem 1fr auto; } }

.ob-tip { display: flex; align-items: flex-start; gap: .75rem; max-width: var(--container-max, 1200px); margin: .75rem auto 0; padding: .7rem .9rem .7rem .8rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-2); font-size: .92rem; line-height: 1.45; }
.ob-tip-mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--color-accent-gradient); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .85rem; }
.ob-tip p { margin: 0; flex: 1; }
.ob-tip a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.ob-tip-dismiss { margin: 0; flex: none; }
.ob-tip-close { appearance: none; border: 1px solid var(--color-border-strong); background: transparent; color: inherit; padding: .3rem .7rem; border-radius: 999px; font: inherit; font-size: .82rem; cursor: pointer; }
.ob-tip-close:hover { background: var(--color-surface-3); }
@media (max-width: 640px) { .ob-tip { margin: .5rem 16px 0; flex-wrap: wrap; } .ob-tip-dismiss { width: 100%; text-align: right; } }

.ob-paid-list { padding-left: 1.1rem; display: grid; gap: .45rem; }
.ob-paid-foot { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.ob-start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.ob-start-col { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface-1); }
.ob-start-col h2 { margin: 0 0 1rem; font-family: var(--font-serif); font-weight: 500; font-size: 1.6rem; }
.ob-start-steps { padding-left: 1.3rem; display: grid; gap: .7rem; line-height: 1.5; }
.ob-start-steps strong { font-weight: 600; }
.ob-start-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.ob-start-note { margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: 16px; background: var(--color-accent-soft); border: 1px solid var(--color-border); }
.ob-start-note h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.ob-start-note p { margin: 0; line-height: 1.5; }

/* ---- growth.css ---- */
/* v3.80 growth: "on tonight", founding creators, invites & share kit.
   Imported by main.css (public pages, member panel) and admin.css (Studio, admin). */

/* ---- Public: cards, lineup, profile ---------------------------------- */
.card-status-tonight { background: var(--color-pop-pink); color: #fff; }
.card-status-tonight::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: #fff; vertical-align: .05em; animation: lx-tonight-pulse 1.8s ease-in-out infinite; }
.card-founding { margin: .1rem 0 .2rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--color-pop-orange); }
.card-tonight { margin: .15rem 0 0; font-size: var(--fs-xs); color: var(--color-text-dim); }
.lu-card-tonight { background: color-mix(in srgb, var(--color-pop-pink) 88%, #000); }
.lu-card-tonight i { background: #fff; }
.cp-status-tonight i { background: var(--color-pop-pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pop-pink) 30%, transparent); animation: lx-tonight-pulse 1.8s ease-in-out infinite; }
.cp-founding { background: color-mix(in srgb, var(--color-pop-orange) 18%, transparent); color: var(--color-pop-orange); border-color: color-mix(in srgb, var(--color-pop-orange) 40%, transparent); }
.cp-tonight { margin: var(--space-2xs) 0 0; padding: .55rem .8rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-pop-pink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-pop-pink) 35%, transparent); font-size: var(--fs-sm); }
.cp-tonight strong { color: var(--color-pop-pink); }
@keyframes lx-tonight-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .card-status-tonight::before, .cp-status-tonight i { animation: none; } }

/* ---- /tonight people section ------------------------------------------ */
.tn-people { margin: var(--space-md) 0 var(--space-lg); }
.tn-people-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.tn-cities { margin-top: var(--space-2xs); }
.tn-grid { margin-top: var(--space-sm); }
.tn-empty { margin-top: var(--space-sm); }
.tn-empty h3 { margin: 0 0 .3rem; font-size: var(--fs-md); }

/* ---- Invite card (member panel) + register note ----------------------- */
.lx-invite { display: grid; gap: var(--space-xs); }
.lx-invite-copy { display: flex; gap: var(--space-2xs); }
.lx-invite-copy .input { flex: 1; min-width: 0; }
.lx-share { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.lx-share .btn { white-space: nowrap; }
.lx-invite-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-2xs); margin: 0; }
.lx-invite-stats div { padding: .5rem .65rem; border-radius: var(--radius-md); background: var(--color-surface-2); }
.lx-invite-stats dt { font-size: var(--fs-xs); color: var(--color-text-dim); }
.lx-invite-stats dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.lx-invite-tier { font-size: var(--fs-sm); color: var(--color-text-dim); margin: 0; }
.lx-invite-tier strong { color: var(--color-pop-orange); }
.lx-ref-note { margin: 0 0 var(--space-sm); padding: .6rem .8rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); font-size: var(--fs-sm); }

/* ---- Studio "Grow" page ------------------------------------------------ */
.gr-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .gr-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .gr-span { grid-column: 1 / -1; } }
.gr-tonight { border: 1px solid color-mix(in srgb, var(--color-pop-pink) 35%, var(--color-border)); }
.gr-tonight.is-on { background: color-mix(in srgb, var(--color-pop-pink) 9%, var(--color-surface-1)); }
.gr-tonight-state { display: flex; align-items: center; gap: .55rem; margin: 0 0 var(--space-xs); font-weight: 700; }
.gr-tonight-state i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--color-text-faint); flex: none; }
.gr-tonight.is-on .gr-tonight-state i { background: var(--color-pop-pink); animation: lx-tonight-pulse 1.8s ease-in-out infinite; }
.gr-tonight-form { display: grid; gap: var(--space-xs); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .gr-tonight-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; align-items: end; } }
.gr-tonight-form .btn-tonight { background: var(--color-pop-pink); color: #fff; border-color: transparent; }
.gr-template { display: grid; gap: .35rem; padding: var(--space-xs); border-radius: var(--radius-md); background: var(--color-surface-2); margin-bottom: var(--space-xs); }
.gr-template p { margin: 0; font-size: var(--fs-sm); white-space: pre-wrap; }
.gr-template-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-dim); }
.gr-links { display: grid; gap: .4rem; }
.gr-links label { font-size: var(--fs-xs); color: var(--color-text-dim); }
.gr-reward { margin: var(--space-xs) 0 0; font-size: var(--fs-sm); color: var(--color-text-dim); }
.gr-reward strong { color: var(--color-text); }
.gr-channels { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: .25rem; font-size: var(--fs-sm); }
.gr-channels li { display: flex; justify-content: space-between; gap: var(--space-xs); }
.gr-founding-number { font-family: var(--font-serif); font-size: var(--fs-2xl); color: var(--color-pop-orange); line-height: 1; margin: 0 0 .3rem; }
.gr-hint { font-size: var(--fs-sm); color: var(--color-text-dim); margin: var(--space-2xs) 0 0; }

/* ---- Studio overview mini switch -------------------------------------- */
.gr-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--color-pop-pink) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-pop-pink) 6%, var(--color-surface-1)); margin-bottom: var(--space-md); }
.gr-mini p { margin: 0; }
.gr-mini form { margin: 0; }

/* ---- Studio "Grow" share kit (v3.82) ----------------------------------- */
.gr-kit-images { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (min-width: 900px) { .gr-kit-images { grid-template-columns: minmax(0, .9fr) minmax(0, 1.05fr) minmax(0, 1.6fr); } }
.gr-kit-image { margin: 0; display: grid; gap: .5rem; }
.gr-kit-image img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-2); }
.gr-kit-image--story img { aspect-ratio: 9 / 16; object-fit: cover; }
.gr-kit-image--post img { aspect-ratio: 4 / 5; object-fit: cover; }
.gr-kit-image--card img { aspect-ratio: 1200 / 630; object-fit: cover; }
.gr-kit-image--card { grid-column: 1 / -1; }
@media (min-width: 900px) { .gr-kit-image--card { grid-column: auto; } }
.gr-kit-image figcaption { display: grid; gap: .15rem; justify-items: start; font-size: var(--fs-sm); }
.gr-kit-image figcaption span { font-size: var(--fs-xs); color: var(--color-text-dim); }
.gr-kit-image figcaption .btn { margin-top: .35rem; }
.gr-kit-photos { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.gr-kit-photos fieldset { border: 0; margin: 0; padding: 0; }
.gr-kit-photos legend { font-weight: 700; font-size: var(--fs-sm); margin-bottom: .5rem; }
.gr-kit-photo-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.gr-kit-photo { position: relative; cursor: pointer; }
.gr-kit-photo input { position: absolute; opacity: 0; inset: 0; }
.gr-kit-photo img { display: block; width: 4.5rem; height: 6rem; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid transparent; opacity: .7; transition: opacity .15s, border-color .15s; }
.gr-kit-photo input:checked + img { border-color: var(--color-pop-orange); opacity: 1; }
.gr-kit-photo input:focus-visible + img { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gr-kit-photo:hover img { opacity: 1; }
.gr-kit-photos .btn { margin-top: var(--space-xs); }
.gr-kit-row { display: grid; gap: var(--space-md); margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
@media (min-width: 900px) { .gr-kit-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.gr-kit-row h3 { margin: 0 0 .5rem; font-size: var(--fs-md); }
.gr-kit-qr-box { width: 9.5rem; height: 9.5rem; border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.gr-kit-qr-box svg { display: block; width: 100%; height: 100%; }
.gr-kit-badge-option { display: grid; gap: .45rem; margin-bottom: var(--space-xs); }
.gr-kit-badge-img { display: block; max-width: 100%; height: auto; }
.gr-kit-url { overflow-wrap: anywhere; color: var(--color-text); }