/* ════════════════════════════════════════════════════════════
   GUESTII - THE OS FOR NIGHTLIFE
   Aurora dark, editorial, premium
   ════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Alias';
    src: url('fonts/Alias-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Alias';
    src: url('fonts/Alias-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ──────────────────────────────────────────────
   Delight - Guest Line's brand typeface.
   Scoped to the .chapter-guestline section only.
   ────────────────────────────────────────────── */
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Delight';
    src: url('fonts/Delight-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* COLOR */
    --bg: #05050e;
    --bg-elevated: #08081a;
    --bg-card: #0c0c20;
    --bg-card-hover: #11112c;
    --surface: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.18);

    /* ACCENTS */
    /* --accent (cyan)  → reserved for LIVE data: counters, pulses, status pills,
                           sparklines, LED cells, ticks. Anything that breathes.
       --brand  (cobalt) → reserved for TYPOGRAPHIC identity: kinetic word,
                           italic <em> emphasis in section titles. The brand. */
    --accent: #00c2ff;
    --accent-soft: rgba(0, 194, 255, 0.14);
    --accent-glow: rgba(0, 194, 255, 0.5);
    --brand: #3a5cff;
    --brand-soft: rgba(58, 92, 255, 0.16);
    --brand-glow: rgba(58, 92, 255, 0.55);
    --magenta: #ff5e8a;
    --magenta-soft: rgba(255, 94, 138, 0.18);
    --purple: #b794f6;
    --purple-soft: rgba(183, 148, 246, 0.18);

    /* TEXT */
    --white: #ffffff;
    --text: rgba(255, 255, 255, 0.96);
    --text-2: rgba(255, 255, 255, 0.62);
    --text-3: rgba(255, 255, 255, 0.42);
    --text-4: rgba(255, 255, 255, 0.28);

    /* TYPE */
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --display: 'Alias', 'Inter', sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --mono: 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* MOTION */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
*::selection { background: var(--accent); color: var(--bg); }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.5;
    font-size: 16px;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
code {
    font-family: var(--mono);
    font-size: 0.92em;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1px 8px;
    border-radius: 6px;
    color: var(--accent);
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}

/* ════════════════════════════════════════════════════════════
   SECTION LABEL - Editorial parens
   ════════════════════════════════════════════════════════════ */

.section-label {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.5px;
    text-transform: lowercase;
    margin-bottom: 28px;
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
}

/* ════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════ */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition:
        background 0.4s var(--ease),
        border-color 0.4s,
        backdrop-filter 0.4s,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.nav.scrolled {
    background: rgba(5, 5, 14, 0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--border);
}

/* Hide-on-scroll: nav slides up when scrolling down past the hero,
   slides back into view the moment the user scrolls up. JS toggles
   `.is-hidden`. Suppressed while the mobile menu is open or while
   we're inside the Guest Line chapter (where the nav is acting as
   the chapter header and shouldn't disappear). */
.nav.is-hidden {
    transform: translateY(-110%);
}
@media (prefers-reduced-motion: reduce) {
    .nav { transition: background 0.4s var(--ease), border-color 0.4s, backdrop-filter 0.4s; }
    .nav.is-hidden { transform: none; }
}

.nav-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 32px;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    position: relative;
    height: 22px;
}
.nav-logo-mark {
    display: block;
    height: 22px;
    width: auto;
    transition: opacity 0.45s var(--ease);
}
/* Stack the alt logo on top of the default and cross-fade between them.
   The "by Guestii" lockup is ~18% taller than the standalone GL mark,
   so we bump its height a touch and recentre it so the main wordmark
   sits on the same baseline as the Guestii logo it's swapping with. */
.nav-logo-mark-alt {
    position: absolute;
    top: 50%;
    left: 0;
    height: 28px;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
}
.nav.is-guestline .nav-logo-mark-default { opacity: 0; }
.nav.is-guestline .nav-logo-mark-alt     { opacity: 1; }

/* ── Guest Line scroll mode: navbar takes on Guest Line's brand surface ── */
.nav.is-guestline {
    background: #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Slightly soften nav links on the black surface so they read as a quieter
   sub-product nav, not a fight with the Guestii nav */
.nav.is-guestline .nav-links a {
    color: rgba(255, 255, 255, 0.7);
}
.nav.is-guestline .nav-links a:hover {
    color: #ffffff;
}
.nav.is-guestline .nav-ticker {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    flex: 1;
    justify-content: center;
}

.nav-links a {
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.25s;
    position: relative;
}

.nav-links a:hover { color: var(--white); }

.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.nav-ticker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.nav-cta {
    background: var(--white);
    color: var(--bg);
    padding: 10px 22px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 13px;
    transition: transform 0.25s var(--ease), box-shadow 0.25s;
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
}

.nav-toggle span {
    width: 22px;
    height: 1.5px;
    background: var(--white);
    border-radius: 2px;
}

.nav-mobile {
    display: none;
    flex-direction: column;
    padding: 8px 32px 24px;
    gap: 4px;
}

.nav-mobile a {
    color: var(--text-2);
    font-size: 17px;
    font-weight: 500;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.nav-mobile .nav-cta {
    margin-top: 12px;
    text-align: center;
    /* `.nav-mobile a` sets color: var(--text-2), and beats .nav-cta on
       specificity, leaving the button white-on-white. Force the dark
       on-light text back. */
    color: var(--bg);
    border-bottom: 0;
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s var(--ease);
    white-space: nowrap;
}

.btn-primary {
    padding: 16px 36px;
    border-radius: 100px;
    background: var(--white);
    color: var(--bg);
    font-size: 15px;
    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.08);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(255, 255, 255, 0.18), 0 0 60px rgba(0, 194, 255, 0.12);
}

.btn-ghost {
    padding: 16px 32px;
    border-radius: 100px;
    background: transparent;
    color: var(--white);
    font-size: 15px;
    border: 1px solid var(--border-light);
    backdrop-filter: blur(8px);
}

.btn-ghost:hover {
    border-color: var(--border-strong);
    background: var(--surface);
    transform: translateY(-2px);
}

.btn-lg { padding: 20px 48px; font-size: 16px; }

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 150px 32px 0;
    overflow: hidden;
    isolation: isolate;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at top center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at top center, black 0%, transparent 70%);
    z-index: 0;
}

.hero-aurora {
    position: absolute;
    top: 38%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1300px;
    height: 800px;
    background: radial-gradient(ellipse at center,
        rgba(0, 194, 255, 0.18) 0%,
        rgba(0, 194, 255, 0.06) 30%,
        transparent 65%);
    filter: blur(50px);
    z-index: 1;
    pointer-events: none;
    animation: auroraDrift 14s ease-in-out infinite alternate;
}

.hero-aurora-2 {
    width: 900px; height: 600px;
    background: radial-gradient(ellipse at center,
        rgba(0, 194, 255, 0.10) 0%,
        rgba(0, 194, 255, 0.04) 40%,
        transparent 70%);
    animation-duration: 18s;
    animation-direction: alternate-reverse;
}
.hero-aurora-3 {
    width: 720px; height: 480px;
    top: 24%;
    left: 28%;
    background: radial-gradient(ellipse at center,
        rgba(0, 194, 255, 0.08) 0%,
        rgba(0, 194, 255, 0.02) 45%,
        transparent 72%);
    animation-duration: 22s;
    animation-direction: alternate;
}

@keyframes auroraDrift {
    0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    50%  { transform: translate(-46%, -52%) scale(1.08) rotate(8deg); }
    100% { transform: translate(-52%, -48%) scale(0.95) rotate(-6deg); }
}

/* ════════════════════════════════════════════════════════════
   NIGHTCLUB STAGE LIGHTING
   ════════════════════════════════════════════════════════════ */
.nightclub-bg {
    position: absolute;
    top: -12vh;
    left: 0;
    width: 100%;
    height: 120vh;
    overflow: hidden;
    pointer-events: none;
    /* Sit above aurora (z=1) but below hero-content (z=10) */
    z-index: 2;
}

@media (max-width: 768px) {
    .nightclub-bg {
        top: -15vh;
        height: 150vh;
    }
}

/* -------------------------
   LOWER ALL SPOTLIGHTS
   ------------------------- */
.center-spotlight-main,
.center-spotlight-secondary,
.side-spotlight-left,
.side-spotlight-right,
.mid-light-left,
.mid-light-right,
.glow-center-main {
    top: 5vh;
}

/* --- CENTER SPOTLIGHTS --- */
.center-spotlight-main {
    position: absolute;
    left: 50%;
    width: 400px;
    height: 150vh;
    transform: translateX(-50%);
    opacity: 0.5;
    background: linear-gradient(
        180deg,
        rgba(191, 219, 254, 0.7) 0%,
        rgba(147, 197, 253, 0.5) 20%,
        rgba(59, 130, 246, 0.3) 50%,
        transparent 100%
    );
    filter: blur(60px);
    transform-origin: top center;
    animation: centerSwayMain 4s linear infinite;
}

@keyframes centerSwayMain {
    0%   { transform: translateX(-50%) rotate(-5deg); opacity: 0.4;  }
    25%  { transform: translateX(-50%) rotate(8deg);  opacity: 0.55; }
    50%  { transform: translateX(-50%) rotate(-3deg); opacity: 0.45; }
    75%  { transform: translateX(-50%) rotate(6deg);  opacity: 0.5;  }
    100% { transform: translateX(-50%) rotate(-5deg); opacity: 0.4;  }
}

.center-spotlight-secondary {
    position: absolute;
    left: 50%;
    width: 280px;
    height: 140vh;
    transform: translateX(-50%);
    opacity: 0.55;
    background: linear-gradient(
        180deg,
        rgba(219, 234, 254, 0.7) 0%,
        rgba(191, 219, 254, 0.6) 15%,
        rgba(96, 165, 250, 0.4) 40%,
        transparent 100%
    );
    filter: blur(40px);
    transform-origin: top center;
    animation: centerSwaySecondary 3.5s linear infinite;
}

@keyframes centerSwaySecondary {
    0%   { transform: translateX(-50%) rotate(3deg);  opacity: 0.45; }
    25%  { transform: translateX(-50%) rotate(-4deg); opacity: 0.6;  }
    50%  { transform: translateX(-50%) rotate(5deg);  opacity: 0.5;  }
    75%  { transform: translateX(-50%) rotate(-2deg); opacity: 0.55; }
    100% { transform: translateX(-50%) rotate(3deg);  opacity: 0.45; }
}

/* --- SIDE SPOTLIGHTS --- */
.side-spotlight-left,
.side-spotlight-right {
    position: absolute;
    width: 170px;
    height: 120vh;
    filter: blur(37px);
    transform-origin: top center;
}

.side-spotlight-left {
    left: 10%;
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0.8) 0%,
        rgba(37, 99, 235, 0.35) 40%,
        transparent 100%
    );
    animation: sweepLeft 3.5s linear infinite;
}

@keyframes sweepLeft {
    0%   { transform: rotate(-30deg); opacity: 0.35; }
    25%  { transform: rotate(-55deg); opacity: 0.55; }
    50%  { transform: rotate(-25deg); opacity: 0.4;  }
    75%  { transform: rotate(-60deg); opacity: 0.5;  }
    100% { transform: rotate(-30deg); opacity: 0.35; }
}

.side-spotlight-right {
    right: 10%;
    background: linear-gradient(
        180deg,
        rgba(96, 165, 250, 0.85) 0%,
        rgba(59, 130, 246, 0.32) 42%,
        transparent 100%
    );
    animation: sweepRight 4s linear infinite;
}

@keyframes sweepRight {
    0%   { transform: rotate(28deg); opacity: 0.32; }
    25%  { transform: rotate(52deg); opacity: 0.52; }
    50%  { transform: rotate(35deg); opacity: 0.4;  }
    75%  { transform: rotate(50deg); opacity: 0.47; }
    100% { transform: rotate(28deg); opacity: 0.32; }
}

/* --- MID LIGHTS --- */
.mid-light-left,
.mid-light-right {
    position: absolute;
    width: 145px;
    height: 120vh;
    filter: blur(38px);
    transform-origin: top center;
}

.mid-light-left {
    left: 28%;
    background: linear-gradient(
        180deg,
        rgba(147, 197, 253, 0.75) 0%,
        rgba(96, 165, 250, 0.3) 38%,
        transparent 100%
    );
    animation: midSweepLeft 3.2s linear infinite;
}

.mid-light-right {
    right: 28%;
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0.78) 0%,
        rgba(37, 99, 235, 0.35) 40%,
        transparent 100%
    );
    animation: midSweepRight 3.8s linear infinite;
}

@keyframes midSweepLeft {
    0%   { transform: rotate(-22deg); opacity: 0.28; }
    25%  { transform: rotate(-5deg);  opacity: 0.48; }
    50%  { transform: rotate(-18deg); opacity: 0.35; }
    75%  { transform: rotate(-10deg); opacity: 0.43; }
    100% { transform: rotate(-22deg); opacity: 0.28; }
}

@keyframes midSweepRight {
    0%   { transform: rotate(18deg); opacity: 0.3;  }
    25%  { transform: rotate(8deg);  opacity: 0.5;  }
    50%  { transform: rotate(25deg); opacity: 0.38; }
    75%  { transform: rotate(12deg); opacity: 0.45; }
    100% { transform: rotate(18deg); opacity: 0.3;  }
}

/* --- GLOW --- */
.glow-center-main {
    position: absolute;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translateX(-50%);
    border-radius: 50%;
    filter: blur(12px);
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.7),
        rgba(219, 234, 254, 0.7),
        transparent 70%
    );
    animation: pulseGlowMain 2.4s linear infinite;
}

@keyframes pulseGlowMain {
    0%   { transform: translateX(-50%) scale(1);    opacity: 0.6;  }
    25%  { transform: translateX(-50%) scale(1.25); opacity: 0.75; }
    50%  { transform: translateX(-50%) scale(0.95); opacity: 0.65; }
    75%  { transform: translateX(-50%) scale(1.2);  opacity: 0.7;  }
    100% { transform: translateX(-50%) scale(1);    opacity: 0.6;  }
}

/* FLOOR GLOW */
.floor-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 600px;
    height: 350px;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse,
        rgba(147, 197, 253, 0.5),
        rgba(59, 130, 246, 0.3),
        transparent
    );
    filter: blur(70px);
    opacity: 0.3;
    animation: floorPulse 3.6s linear infinite;
}

@keyframes floorPulse {
    0%   { transform: translateX(-50%) scale(1);    opacity: 0.2;  }
    25%  { transform: translateX(-50%) scale(1.15); opacity: 0.4;  }
    50%  { transform: translateX(-50%) scale(0.95); opacity: 0.28; }
    75%  { transform: translateX(-50%) scale(1.12); opacity: 0.35; }
    100% { transform: translateX(-50%) scale(1);    opacity: 0.2;  }
}

@media (prefers-reduced-motion: reduce) {
    .center-spotlight-main,
    .center-spotlight-secondary,
    .side-spotlight-left,
    .side-spotlight-right,
    .mid-light-left,
    .mid-light-right,
    .glow-center-main,
    .floor-glow {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   HERO LOAD-IN - "houselights up" boot sequence
   ────────────────────────────────────────────────────────────
   First paint: stage is dark, hero copy is hidden, dashboard
   chrome is empty. JS adds .booting to <body> on DOMContentLoaded
   and removes it after a single rAF - that triggers the staged
   CSS transitions below. Each layer has its own delay so the
   sequence reads as: lights → headline → subhead → CTAs →
   dashboard chrome → sidebar → header → cards → feed.
   ════════════════════════════════════════════════════════════ */

/* ── Stage lights: parent fades + slight rise so the whole rig
       feels like it's brightening rather than just appearing. */
.nightclub-bg {
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                filter   1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
body.booting .nightclub-bg {
    opacity: 0;
    transform: translateY(-10px);
    filter: brightness(0.35) saturate(0.6);
}

/* ── Hero copy: pill, title lines, sub, actions cascade up.
       Pre-set hidden state so there's no FOUC before JS runs. */
body.booting .hero-pill,
body.booting .hero-line,
body.booting .hero-sub,
body.booting .hero-actions,
body.booting .hero-canvas-wrap {
    opacity: 0;
    transform: translateY(18px);
}
.hero-pill,
.hero-line,
.hero-sub,
.hero-actions,
.hero-canvas-wrap {
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-pill          { transition-delay: 0.20s; }
.hero-line:nth-child(1) { transition-delay: 0.34s; }
.hero-line:nth-child(2) { transition-delay: 0.48s; }
.hero-sub           { transition-delay: 0.62s; }
.hero-actions       { transition-delay: 0.76s; }
.hero-canvas-wrap   { transition-delay: 0.90s; }

/* The kinetic word lives inside .hero-line:nth-child(2) but its own
   transition handles the cycle swap. Suppress the active state's
   reveal until the line itself has come up, otherwise the word
   shows up before its surrounding sentence. */
body.booting .kinetic-word.is-active {
    opacity: 0;
    transform: translate(-50%, 0.4em);
}

/* ── Dashboard boot cascade ─────────────────────────────────
       Each piece of the live door dashboard arrives in order so
       the user reads it as a system being switched on:
       chrome → sidebar → event header → tabs → stat cards
       (one-by-one) → live feed → side panels (chart + leaderboard) */
.hero-canvas .canvas-chrome,
.hero-canvas .canvas-sidebar,
.hero-canvas .canvas-header,
.hero-canvas .canvas-tabs-row,
.hero-canvas .canvas-stats > .cstat,
.hero-canvas .canvas-feed,
.hero-canvas .canvas-side {
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body.booting .hero-canvas .canvas-chrome     { opacity: 0; transform: translateY(-6px); }
body.booting .hero-canvas .canvas-sidebar    { opacity: 0; transform: translateX(-10px); }
body.booting .hero-canvas .canvas-header     { opacity: 0; transform: translateY(8px); }
body.booting .hero-canvas .canvas-tabs-row   { opacity: 0; transform: translateY(6px); }
body.booting .hero-canvas .canvas-stats > .cstat { opacity: 0; transform: translateY(12px); }
body.booting .hero-canvas .canvas-feed       { opacity: 0; transform: translateY(14px); }
body.booting .hero-canvas .canvas-side       { opacity: 0; transform: translateY(14px); }

/* Resting-state delays - start AFTER the hero-canvas-wrap itself
   has begun rising in (~0.90s). All values are added to the
   wrap's delay so the inner sequence feels continuous. */
.hero-canvas .canvas-chrome     { transition-delay: 1.05s; }
.hero-canvas .canvas-sidebar    { transition-delay: 1.15s; }
.hero-canvas .canvas-header     { transition-delay: 1.28s; }
.hero-canvas .canvas-tabs-row   { transition-delay: 1.40s; }
.hero-canvas .canvas-stats > .cstat:nth-child(1) { transition-delay: 1.50s; }
.hero-canvas .canvas-stats > .cstat:nth-child(2) { transition-delay: 1.56s; }
.hero-canvas .canvas-stats > .cstat:nth-child(3) { transition-delay: 1.62s; }
.hero-canvas .canvas-stats > .cstat:nth-child(4) { transition-delay: 1.68s; }
.hero-canvas .canvas-stats > .cstat:nth-child(5) { transition-delay: 1.74s; }
.hero-canvas .canvas-feed       { transition-delay: 1.85s; }
.hero-canvas .canvas-side       { transition-delay: 1.95s; }

/* Reduced-motion: skip all the staging, show everything immediately. */
@media (prefers-reduced-motion: reduce) {
    body.booting .nightclub-bg,
    body.booting .hero-pill,
    body.booting .hero-line,
    body.booting .hero-sub,
    body.booting .hero-actions,
    body.booting .hero-canvas-wrap,
    body.booting .kinetic-word.is-active,
    body.booting .hero-canvas .canvas-chrome,
    body.booting .hero-canvas .canvas-sidebar,
    body.booting .hero-canvas .canvas-header,
    body.booting .hero-canvas .canvas-tabs-row,
    body.booting .hero-canvas .canvas-stats > .cstat,
    body.booting .hero-canvas .canvas-feed,
    body.booting .hero-canvas .canvas-side {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* Horizon light beam at the bottom */
.hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -30%;
    width: 140%;
    height: 60%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 0%,
        rgba(0, 194, 255, 0.30) 0%,
        rgba(0, 194, 255, 0.10) 25%,
        transparent 55%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(8, 8, 26, 0.6);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 32px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.3s, background 0.3s;
}

.hero-pill:hover {
    border-color: var(--border-strong);
    background: rgba(8, 8, 26, 0.8);
}

.hero-pill-dot {
    width: 6px; height: 6px;
    background: #34d399;
    border-radius: 50%;
    box-shadow: 0 0 8px #34d399;
    animation: pulse 2s infinite;
}

.hero-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(48px, 7.2vw, 92px);
    line-height: 0.98;
    letter-spacing: -2px;
    margin-bottom: 32px;
}

.hero-line { display: block; }
.hero-title em { font-size: 1.02em; letter-spacing: -2px; }

/* Kinetic word - cycles through nightlife / clubs / festivals / warehouses / after-hours */
.kinetic {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    white-space: nowrap;
    overflow: hidden;
    line-height: inherit;
    /* Headroom for the tall 'f' / 'l' / 'h' ascenders in regular Alias -
       overflow:hidden was clipping the top of the cyan word otherwise. */
    padding-top: 0.18em;
    margin-top: -0.18em;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}
.kinetic-spacer {
    visibility: hidden;
    display: inline-block;
    font-family: var(--display);
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    letter-spacing: -1.5px;
    pointer-events: none;
    padding-bottom: 0.12em;
}
.kinetic-word {
    position: absolute;
    top: 0.18em;
    left: 50%;
    display: inline-block;
    white-space: nowrap;
    font-family: var(--display);
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    letter-spacing: -1.5px;
    color: var(--brand);
    opacity: 0;
    transform: translate(-50%, 0.4em);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.kinetic-word.is-active {
    opacity: 1;
    transform: translate(-50%, 0);
}
.kinetic-word.is-leaving {
    opacity: 0;
    transform: translate(-50%, -0.4em);
}

/* ════════════════════════════════════════════════════════════
   SPLIT-TEXT REVEAL  (.hero-title.is-split)
   ────────────────────────────────────────────────────────────
   JS wraps each word in <span class="hero-word"><span
   class="hero-word-inner">word</span></span> and adds
   `.is-split` to the title. The outer `.hero-word` masks
   overflow, the inner span starts translated 110% down, then
   eases up to 0 once <body> loses `.booting`. Each inner span
   carries an inline `--word-delay` so words land in sequence.
   ════════════════════════════════════════════════════════════ */
.hero-title.is-split .hero-line {
    /* Words now drive the entrance animation; cancel the line cascade. */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.hero-word {
    display: inline-block;
    overflow: hidden;
    line-height: 1.05;
    vertical-align: top;
    /* Headroom for descenders / italic tails so we don't clip 'g', 'y', etc. */
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}
.hero-word-inner {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--word-delay, 0s);
    will-change: transform;
}
body:not(.booting) .hero-title.is-split .hero-word-inner {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .hero-word-inner {
        transform: none !important;
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════
   TILT TARGETS  ([data-tilt])
   ────────────────────────────────────────────────────────────
   Generic 3D tilt-on-pointer wrapper. JS reads the max tilt
   from data-tilt (degrees) and writes --tilt-rx / --tilt-ry
   on pointermove. Reset on leave returns to rest. Disabled on
   touch / reduced-motion / narrow viewports in JS, so the rule
   below never engages there.
   ════════════════════════════════════════════════════════════ */
[data-tilt] {
    transform: perspective(1400px)
               rotateX(var(--tilt-rx, 0deg))
               rotateY(var(--tilt-ry, 0deg));
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
    will-change: transform;
}
[data-tilt].is-tilting {
    transition: transform 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {
    [data-tilt] {
        transform: none !important;
        transition: none !important;
    }
}

.hero-sub {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--text-2);
    margin-bottom: 44px;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 1.6;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-pill-text {
    font-variant-numeric: tabular-nums;
}
.hero-pill-text strong {
    color: var(--text);
    font-weight: 600;
    margin-right: 1px;
}

/* Trust strip - venue wordmarks under the CTAs */
.hero-trust {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    opacity: 0;
    animation: trustIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}
@keyframes trustIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-trust-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-4);
}
.hero-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    max-width: 720px;
}
.hero-trust-mark {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.3s, opacity 0.3s;
}
.hero-trust-mark:hover { color: rgba(255, 255, 255, 0.85); }
.hero-trust-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.hero-proof {
    position: relative;
    z-index: 10;
    margin-top: 100px;
    padding-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-proof span {
    font-size: 13px;
    color: var(--text-3);
    font-weight: 400;
}

.hero-proof strong {
    color: var(--text);
    font-weight: 600;
}

.proof-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--text-4);
    flex-shrink: 0;
}

/* ── Hero brands strip: venue logos + "+ Your venue?" CTA ── */
.hero-brands {
    position: relative;
    z-index: 10;
    margin-top: 100px;
    padding: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}
.hero-brands-l {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.38);
    font-weight: 600;
    flex-shrink: 0;
}
.hero-brands-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-brands-list > li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-brand {
    height: 22px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: 0.55;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: block;
    padding: 0 18px;
}
.hero-brand:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}
.hero-brand-icon { height: 28px; }

.hero-brands-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.10);
    margin: 0 8px;
}

.hero-brand-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.06);
    border: 1px dashed rgba(0, 194, 255, 0.35);
    color: var(--brand);
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
    white-space: nowrap;
}
.hero-brand-cta:hover {
    background: rgba(0, 194, 255, 0.12);
    border-color: rgba(0, 194, 255, 0.7);
    border-style: solid;
    color: #fff;
}
.hero-brand-cta-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(0, 194, 255, 0.18);
    color: var(--brand);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    transition: background 0.25s, color 0.25s;
}
.hero-brand-cta:hover .hero-brand-cta-plus {
    background: var(--brand);
    color: #05050e;
}

@media (max-width: 900px) {
    .hero-brand { padding: 0 12px; height: 18px; }
    .hero-brand-icon { height: 22px; }
    .hero-brands-l { width: 100%; text-align: center; margin-bottom: 4px; }
    .hero-brands-divider { display: none; }
}

/* ════════════════════════════════════════════════════════════
   HERO CANVAS - Live Door Dashboard mockup (refined)
   ════════════════════════════════════════════════════════════ */

.hero-canvas-wrap {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1240px;
    margin: 80px auto 0;
    perspective: 2400px;
}

/* Scaler is invisible on desktop (display: contents = no box). On mobile
   it becomes a fixed-width block that gets transform: scale()'d so the
   entire desktop dashboard renders as a small rectangular preview. */
.hero-canvas-scaler {
    display: contents;
}

.hero-canvas {
    position: relative;
    width: 100%;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 194, 255, 0.07), transparent 50%),
        linear-gradient(180deg, #0b0e1a 0%, #06070f 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 40px 100px -24px rgba(0, 0, 0, 0.85),
        0 0 140px -24px rgba(0, 194, 255, 0.22);
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-canvas::before {
    content: '';
    position: absolute;
    top: -1px; left: 8%;
    width: 84%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.55), transparent);
    z-index: 5;
}

.canvas-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.06;
    pointer-events: none;
    z-index: 20;
}

/* ── Browser chrome ───────────────────────────────────── */
.canvas-chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 2;
}

.chrome-dots { display: flex; gap: 6px; }
.chrome-dots span {
    width: 10px; height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
.chrome-dots span:nth-child(1) { background: #ff5f57; }
.chrome-dots span:nth-child(2) { background: #febc2e; }
.chrome-dots span:nth-child(3) { background: #28c840; }

.chrome-nav {
    display: flex;
    gap: 2px;
    margin-left: 6px;
}
.chrome-nav button {
    width: 22px; height: 22px;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: background 0.15s;
}
.chrome-nav button:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.chrome-nav button:nth-child(2) { color: var(--text-4); }

.chrome-url {
    flex: 1;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    color: var(--text-3);
    font-size: 11px;
    font-family: var(--mono);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}
.chrome-url svg { color: var(--accent); flex-shrink: 0; }
.chrome-url-protocol { color: var(--text-2); }
.chrome-url-path { color: var(--text-4); }

.chrome-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.chrome-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.18);
    border-radius: 999px;
    color: #4ade80;
    font-size: 10px;
    font-weight: 500;
}
.chrome-pill .live-dot { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); animation-name: liveGreenPulse; }

.chrome-user {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 9.5px;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes liveGreenPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    50%      { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

/* ── App layout: sidebar + main ──────────────────────── */
.canvas-app {
    display: grid;
    grid-template-columns: 56px 1fr;
    min-height: 580px;
}

.canvas-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 10px;
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    gap: 8px;
}

/* User avatar at the top - round, with cyan check badge */
.csb-avatar {
    position: relative;
    width: 30px; height: 30px;
}
.csb-avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.csb-avatar-tick {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    color: #021018;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(8, 12, 22, 1);
}
.csb-avatar-tick svg { width: 7px; height: 7px; }

.csb-logo {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 12px -2px rgba(0, 194, 255, 0.5);
    margin-bottom: 8px;
}

.csb-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    align-items: center;
}

.csb-divide {
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}

.csb-item {
    width: 30px; height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-4);
    transition: all 0.18s;
    position: relative;
}
.csb-item:hover { color: var(--text-2); background: rgba(255, 255, 255, 0.04); }
.csb-item.is-active {
    color: var(--text);
    background: rgba(0, 194, 255, 0.1);
}
.csb-item.is-active::before {
    content: '';
    position: absolute;
    left: -10px; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 16px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.csb-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.csb-logout {
    color: var(--text-4);
}
.csb-logout:hover { color: #f87171; }

.csb-org {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, #1f2937, #111827);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

.canvas-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Event header ────────────────────────────────────── */
.canvas-header {
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.canvas-event {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    flex: 1;
    min-width: 0;
}

/* Mini event poster - replaces generic gradient blob */
.canvas-event-poster {
    width: 56px; height: 70px;
    border-radius: 4px;
    background: #f5f3ed;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.04) inset;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    padding: 0;
    color: #000;
    font-family: var(--display);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* Subtle paper grain overlay for the brutalist club poster */
.canvas-event-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.35) 0.5px, transparent 0);
    background-size: 2px 2px;
    opacity: 0.3;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.poster-marble {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.poster-top {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 4.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #f5f3ed;
    background: #000;
    padding: 1.5px 3px;
    line-height: 1;
    z-index: 3;
    font-family: 'Inter', sans-serif;
}

.poster-vert {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #000;
    z-index: 3;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    -webkit-text-stroke: 0.5px #f5f3ed;
}

.poster-foot {
    position: absolute;
    bottom: 3px;
    left: 4px;
    font-size: 5px;
    font-weight: 800;
    color: #000;
    background: #f5f3ed;
    padding: 1.5px 3px;
    line-height: 1.05;
    z-index: 3;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.04em;
}

.canvas-event-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.canvas-event-crumb {
    font-size: 10.5px;
    color: var(--text-4);
    font-weight: 500;
}
.canvas-event-crumb span { margin: 0 4px; opacity: 0.6; }

.canvas-event-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(0, 194, 255, 0.1);
    color: var(--accent);
    border: 1px solid rgba(0, 194, 255, 0.25);
    font-family: var(--sans);
}

.live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.5);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
    display: inline-block;
}
.live-dot-sm { width: 6px; height: 6px; }

@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.7); }
    50%      { box-shadow: 0 0 0 5px rgba(0, 194, 255, 0); }
}

.canvas-event-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-3);
    font-size: 11px;
    flex-wrap: wrap;
}
.canvas-event-info span { display: inline-flex; align-items: center; gap: 5px; }
.canvas-event-info svg { color: var(--text-4); }
.info-sep { width: 2px; height: 2px; border-radius: 50%; background: var(--text-4); }

/* Capacity indicator on the right of header */
.canvas-capacity {
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    flex-shrink: 0;
}
.cap-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cap-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-4);
}
.cap-value {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.cap-value strong { color: var(--text); font-weight: 600; }

.cap-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.cap-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #4ade80 60%, #facc15 95%);
    border-radius: 999px;
    box-shadow: 0 0 8px -1px rgba(0, 194, 255, 0.5);
    position: relative;
}
.cap-bar span::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.cap-foot {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-4);
}

/* ── Tabs row ────────────────────────────────────────── */
.canvas-tabs-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.1);
}

.ctab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    font-size: 12px;
    color: var(--text-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.18s;
    font-weight: 500;
}
.ctab:hover { color: var(--text-2); }
.ctab.is-active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.ctab kbd {
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-size: 9.5px;
    font-family: var(--mono);
    color: var(--text-3);
    font-weight: 500;
}
.ctab-spacer { flex: 1; }
.ctab-action {
    font-size: 11px;
    color: var(--text-3);
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

/* ── Stats grid ──────────────────────────────────────── */
.canvas-stats {
    display: grid;
    grid-template-columns: 0.95fr 0.95fr 1.55fr 0.95fr 1.55fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cstat {
    padding: 14px 18px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent);
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    transition: background 0.5s;
    position: relative;
    overflow: hidden;
}

.cstat-feature {
    background: linear-gradient(180deg, rgba(0, 194, 255, 0.08), rgba(0, 194, 255, 0.015) 60%);
    position: relative;
}
.cstat-feature::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}

.cstat.is-flash {
    background: linear-gradient(180deg, rgba(0, 194, 255, 0.22), rgba(0, 194, 255, 0.04));
}

.cstat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cstat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.cstat-value {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.cstat-feature .cstat-value {
    font-size: 38px;
    background: linear-gradient(180deg, #ffffff, #b8c5e8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cstat-trend {
    font-size: 10.5px;
    color: var(--text-4);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.cstat-trend-up { color: #4ade80; }

.cstat-spark {
    width: 100%;
    height: 22px;
    margin-top: 2px;
    overflow: visible;
}
.cstat-spark-lg {
    height: 36px;
    margin-top: 4px;
}

/* ── Bar Spend card - live nightlife intel ────────────── */
.cstat-bar {
    background: linear-gradient(180deg, rgba(251, 146, 60, 0.05), rgba(251, 146, 60, 0.005) 60%);
    position: relative;
    gap: 4px;
}
.cstat-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #fb923c, transparent);
    opacity: 0.45;
}
.live-dot-amber { background: #fb923c; box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.18); }
.live-dot-amber::after { background: rgba(251, 146, 60, 0.55); }

.cstat-value-md {
    font-size: 22px !important;
    background: linear-gradient(180deg, #ffffff, #fed7aa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cstat-bar-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.cbar-section-title {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-4);
    display: block;
    margin-bottom: 5px;
}
.cbar-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cbar-list li {
    display: grid;
    grid-template-columns: 1fr 38px 22px;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-2);
    font-weight: 500;
}
.cbar-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbar-bar {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}
.cbar-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #fb923c, #f59e0b);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(251, 146, 60, 0.5);
    transition: width 0.6s ease;
}
.cbar-num {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11px;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cbar-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.cbar-top-av {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.cbar-top-name {
    flex: 1;
    font-size: 11px;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbar-top-amt {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    color: #fdba74;
    font-variant-numeric: tabular-nums;
}

/* ── Body: feed + side ───────────────────────────────── */
.canvas-body {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Live admissions feed */
.canvas-feed {
    padding: 14px 20px 16px;
    background: rgba(0, 0, 0, 0.18);
    text-align: left;
    min-height: 280px;
}

.canvas-feed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cfh-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cfh-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.cfh-rate {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    padding: 2px 7px;
    background: rgba(0, 194, 255, 0.06);
    border: 1px solid rgba(0, 194, 255, 0.15);
    color: var(--accent);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.cfh-right {
    display: flex;
    gap: 1px;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px;
    border-radius: 6px;
}
.cfh-filter {
    padding: 3px 9px;
    font-size: 10.5px;
    color: var(--text-3);
    border-radius: 4px;
    font-weight: 500;
}
.cfh-filter.is-active {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

.canvas-feed-list {
    display: flex;
    flex-direction: column;
    position: relative;
    /* Hard cap: 5 rows × ~46px = ~230px. Safety net so the dashboard
       stays a consistent height even if a row is mid-animation. */
    max-height: 240px;
    overflow: hidden;
}

.feed-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    opacity: 0;
    transform: translateY(-6px);
    animation: feedRowIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.feed-row:last-child { border-bottom: none; }

.feed-row.is-leaving {
    animation: feedRowOut 0.4s cubic-bezier(0.4, 0.0, 1, 1) forwards;
}

@keyframes feedRowIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes feedRowOut {
    from { opacity: 1; transform: translateY(0); max-height: 50px; }
    to   { opacity: 0; transform: translateY(6px); max-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; }
}

.feed-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
}

.feed-name {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
}
.feed-name span {
    font-size: 10.5px;
    color: var(--text-4);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.feed-time {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
}

.feed-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px 3px 5px;
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.feed-status svg { width: 10px; height: 10px; }

/* Side column - chart + leaderboard */
.canvas-side {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.canvas-chart {
    padding: 14px 18px 12px;
    background: rgba(0, 0, 0, 0.18);
    text-align: left;
    flex: 1;
}

.chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.chart-title {
    display: block;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
}
.chart-sub {
    display: block;
    font-size: 10px;
    color: var(--text-4);
    margin-top: 2px;
}
.chart-stat {
    text-align: right;
}
.chart-stat strong {
    display: block;
    font-family: var(--display);
    font-size: 18px;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.chart-stat span {
    display: block;
    font-size: 9.5px;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 3px;
    font-weight: 600;
}

.chart-canvas {
    position: relative;
    height: 100px;
}
#paceChart {
    width: 100%;
    height: 90px;
    overflow: visible;
}
.chart-axis {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--text-4);
    margin-top: 2px;
    padding: 0 2px;
}

/* Leaderboard */
.canvas-leaderboard {
    padding: 14px 18px 16px;
    background: rgba(0, 0, 0, 0.18);
    text-align: left;
}

.lb-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
}
.lb-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: var(--text-3);
    font-weight: 500;
}

.lb-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lb-row {
    display: grid;
    grid-template-columns: 16px 26px 1fr 60px auto;
    align-items: center;
    gap: 10px;
}

.lb-rank {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-4);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.lb-row:first-child .lb-rank {
    color: #facc15;
}

.lb-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.lb-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.lb-meta strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
}
.lb-meta span {
    color: var(--text-4);
    font-size: 10px;
}

.lb-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.lb-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    border-radius: 999px;
}

.lb-amt {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-2);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── Footer status bar ───────────────────────────────── */
.canvas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 18px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cfoot-left, .cfoot-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cfoot-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--text-3);
    font-weight: 500;
}
.cfoot-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-width: 1.5px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--text-2);
    font-weight: 500;
}

.cfoot-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-4);
    font-weight: 500;
}
.cfoot-stat .live-dot { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); animation-name: liveGreenPulse; }

.cfoot-sep {
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
}

/* ════════════════════════════════════════════════════════════
   IPHONE - shared mockup component
   ════════════════════════════════════════════════════════════ */

.iphone {
    position: relative;
    background: #050507;
    border-radius: 38px;
    padding: 7px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 30px 60px -10px rgba(0, 0, 0, 0.7),
        0 0 80px -10px rgba(0, 194, 255, 0.18);
    overflow: hidden;
}

.iphone img {
    width: 100%;
    display: block;
    border-radius: 30px;
    background: #0a0a18;
}

.iphone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 22px;
    background: #000;
    border-radius: 999px;
    z-index: 3;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.iphone-glare {
    position: absolute;
    inset: 7px;
    border-radius: 30px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.04) 100%);
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: overlay;
}

/* ════════════════════════════════════════════════════════════
   RECEPTION APP - live HTML inside the hero phone
   ════════════════════════════════════════════════════════════ */

.reception {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19;
    border-radius: 30px;
    background: #050810;
    overflow: hidden;
    color: #e5e7eb;
    font-size: 10px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

/* Status bar */
.ra-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 4px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    height: 28px;
    flex-shrink: 0;
}
.ra-time { font-variant-numeric: tabular-nums; }
.ra-status-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
}
.ra-bat {
    display: inline-block;
    width: 16px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 2px;
    position: relative;
    padding: 0.5px;
}
.ra-bat::after {
    content: '';
    position: absolute;
    top: 1.5px; right: -2.5px;
    width: 1.5px; height: 3px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0 1px 1px 0;
}
.ra-bat span {
    display: block;
    width: 60%;
    height: 100%;
    background: #fff;
    border-radius: 1px;
}

/* Header */
.ra-header {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    padding: 4px 12px 8px;
    gap: 8px;
    flex-shrink: 0;
}
.ra-icon-btn {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}
.ra-logo {
    display: block;
    width: 60px;
    height: 9px;
    margin: 0 auto;
    background-color: var(--accent);
    -webkit-mask: url('assets/guestii-logo.svg') center / contain no-repeat;
            mask: url('assets/guestii-logo.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(0, 194, 255, 0.45));
}
.ra-notif {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #facc15;
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
    margin-left: auto;
}

/* Event card */
.ra-event {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    flex-shrink: 0;
}
.ra-event-icon {
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ra-event-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ra-event-meta strong {
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ra-event-meta span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 8px;
}
.ra-event-badge {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(0, 194, 255, 0.15);
    color: var(--accent);
    border: 0.5px solid rgba(0, 194, 255, 0.35);
}
.ra-event-chev {
    color: rgba(255, 255, 255, 0.4);
    font-size: 9px;
    line-height: 1;
}

/* Search */
.ra-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    margin: 8px 10px 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 9.5px;
    flex-shrink: 0;
}
.ra-search svg { color: rgba(255, 255, 255, 0.4); }

/* Tabs */
.ra-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 10px 6px;
    flex-shrink: 0;
}
.ra-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    font-size: 9px;
    font-weight: 500;
}
.ra-tab.is-active {
    background: rgba(0, 194, 255, 0.12);
    border-color: rgba(0, 194, 255, 0.3);
    color: #fff;
}
.ra-tab kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    font-size: 7.5px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.ra-tab.is-active kbd {
    background: rgba(0, 194, 255, 0.25);
    color: #fff;
}

/* Guest list */
.ra-list {
    flex: 1;
    overflow: hidden;
    padding: 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.ra-row {
    display: grid;
    grid-template-columns: 28px 1fr auto 14px;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ra-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.ra-row-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ra-row-meta strong {
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ra-row-meta span {
    color: rgba(255, 255, 255, 0.4);
    font-size: 8.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.ra-badge {
    display: inline-block;
    padding: 1.5px 5px;
    border-radius: 4px;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.ra-badge-free  { background: rgba(74, 222, 128, 0.15); color: #86efac; border: 0.5px solid rgba(74, 222, 128, 0.3); }
.ra-badge-paid  { background: rgba(96, 165, 250, 0.15); color: #93c5fd; border: 0.5px solid rgba(96, 165, 250, 0.3); }
.ra-badge-unadm { background: rgba(251, 146, 60, 0.15); color: #fdba74; border: 0.5px solid rgba(251, 146, 60, 0.3); }

.ra-row-amt {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ra-amt-paid  { color: #93c5fd; }
.ra-amt-unadm { color: #fdba74; }

.ra-row-arrow {
    width: 18px; height: 18px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.ra-arrow-paid  { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
.ra-arrow-free  { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.ra-arrow-unadm { background: rgba(251, 146, 60, 0.2); color: #fb923c; }

/* Target row - gets highlighted during cycle */
.ra-row-target {
    position: relative;
    border-color: rgba(251, 146, 60, 0.4);
    box-shadow: 0 0 0 0 rgba(251, 146, 60, 0);
}
.ra-row-target.is-pulsing {
    border-color: rgba(0, 194, 255, 0.6);
    box-shadow: 0 0 0 1.5px rgba(0, 194, 255, 0.5), 0 0 18px rgba(0, 194, 255, 0.3);
    background: rgba(0, 194, 255, 0.08);
}
.ra-row-target.is-paid {
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(96, 165, 250, 0.08);
}

/* Row enter / exit transitions for the flowing pending queue */
.ra-row.is-leaving {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -5px; /* compensate parent gap */
    border-color: transparent;
    pointer-events: none;
    overflow: hidden;
}
.ra-row.is-entering {
    animation: raRowEnter 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes raRowEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Backdrop dim when sheet is open */
.ra-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
    z-index: 5;
}
.ra-backdrop.is-on { opacity: 1; }

/* Modal sheet */
.ra-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, #0a0f1c 0%, #060812 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px 16px 0 0;
    padding: 14px 14px 16px;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 6;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}
.ra-sheet[data-stage="select"],
.ra-sheet[data-stage="pay"],
.ra-sheet[data-stage="success"] {
    transform: translateY(0);
}

.ra-sheet-stage {
    display: none;
    flex-direction: column;
    gap: 10px;
}
.ra-sheet[data-stage="select"]  .ra-sheet-stage[data-pane="select"]  { display: flex; }
.ra-sheet[data-stage="pay"]     .ra-sheet-stage[data-pane="pay"]     { display: flex; }
.ra-sheet[data-stage="success"] .ra-sheet-stage[data-pane="success"] { display: flex; }

.ra-sheet-head {
    display: grid;
    grid-template-columns: 28px 1fr 18px;
    align-items: center;
    gap: 10px;
}
.ra-sheet-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ra-sheet-title strong {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.ra-sheet-title span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
}
.ra-sheet-close {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

.ra-warning {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 7px 9px;
    background: rgba(251, 146, 60, 0.08);
    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 9px;
    line-height: 1.35;
}
.ra-warning-icon {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(251, 146, 60, 0.25);
    color: #fdba74;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}

.ra-section-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.ra-ticket {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 194, 255, 0.06);
    border: 1px solid rgba(0, 194, 255, 0.15);
    border-radius: 8px;
}
.ra-ticket-icon {
    width: 26px; height: 22px;
    background: rgba(0, 194, 255, 0.15);
    color: var(--accent);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ra-ticket-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ra-ticket-meta strong {
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}
.ra-ticket-meta span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    font-family: var(--mono);
}
.ra-ticket-change {
    color: var(--accent);
    font-size: 8.5px;
    font-weight: 600;
}

.ra-inviter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 999px;
    color: #d8b4fe;
    font-size: 9.5px;
    font-weight: 500;
}
.ra-inviter-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #c084fc;
}

.ra-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ra-total strong {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ra-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 7px;
    margin-top: 6px;
}

.ra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 8px;
    border: none;
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    cursor: default;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.12s, box-shadow 0.2s;
}
.ra-btn-cash {
    background: rgba(74, 222, 128, 0.15);
    color: #86efac;
    border: 1px solid rgba(74, 222, 128, 0.3);
}
.ra-btn-continue {
    background: linear-gradient(180deg, #1d8aff, #0066ff);
    box-shadow: 0 4px 14px -2px rgba(29, 138, 255, 0.5);
}
.ra-btn-pay {
    background: linear-gradient(180deg, #1d8aff, #0066ff);
    width: 100%;
    box-shadow: 0 4px 14px -2px rgba(29, 138, 255, 0.5);
    padding: 11px 10px;
    margin-top: 4px;
}
.ra-btn.is-pressing {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(29, 138, 255, 0.3);
}
.ra-btn.is-pressing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    animation: btnFlash 0.4s ease-out;
}
@keyframes btnFlash {
    from { opacity: 0.4; }
    to   { opacity: 0; }
}

/* Pay sheet */
.ra-sheet-head-pay {
    grid-template-columns: 1fr auto 18px;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ra-pay-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
}
.ra-pay-amount {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 21px;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ra-sheet-head-pay .ra-sheet-close {
    align-self: center;
}

.ra-breakdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ra-breakdown > div {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}
.ra-breakdown-total {
    color: var(--accent) !important;
    font-weight: 600;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 2px;
}
.ra-breakdown-total span:first-child { color: #fff !important; }

.ra-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.ra-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.ra-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ra-field-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: space-between;
}
.ra-field-opt {
    color: rgba(255, 255, 255, 0.3);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 8px;
}
.ra-field-input {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    min-height: 18px;
}
.ra-field-input.is-filled {
    color: #fff;
}
.ra-field-input svg { color: rgba(255, 255, 255, 0.4); }

.ra-terms {
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 8px;
    line-height: 1.45;
    margin-top: 2px;
}
.ra-terms em {
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
}

/* Success pane */
.ra-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px 20px;
    gap: 10px;
}
.ra-success-circle {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.25), rgba(34, 197, 94, 0.1));
    border: 1.5px solid rgba(74, 222, 128, 0.5);
    color: #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.4);
    animation: successPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ra-success-circle svg {
    width: 28px; height: 28px;
}
@keyframes successPop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.ra-success strong {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.ra-success span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
}

/* Tap finger indicator */
.ra-tap {
    position: absolute;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}
.ra-tap.is-active {
    animation: tapPulse 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tapPulse {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(1.6); }
    35%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.7); }
}

/* ════════════════════════════════════════════════════════════
   ON THE DOOR - Mobile flow showcase
   ════════════════════════════════════════════════════════════ */

.door-section {
    position: relative;
    padding: 140px 0 160px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3) 50%, transparent);
}

.door-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1100px; height: 600px;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(0, 194, 255, 0.14), transparent 55%),
        radial-gradient(ellipse at 70% 50%, rgba(0, 194, 255, 0.08), transparent 55%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.door-section .container {
    position: relative;
    z-index: 1;
}

.door-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 80px;
}

.door-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 18px 0 22px;
}

.door-title em {
    font-family: var(--serif, 'Instrument Serif', serif);
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}

.door-sub {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.55;
    max-width: 580px;
    margin: 0 auto;
}

/* Stage with 3 phones + arrows */
.door-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    max-width: 1140px;
    margin: 0 auto;
    perspective: 2000px;
}

.door-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.door-phone .iphone {
    width: 100%;
    max-width: 260px;
    position: relative;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.door-phone-1 .iphone { transform: rotate(-3deg); }
.door-phone-2 .iphone { transform: rotate(0deg) translateY(-12px) scale(1.02); }
.door-phone-3 .iphone { transform: rotate(3deg); }

.door-phone.is-active .iphone {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 30px 60px -10px rgba(0, 0, 0, 0.7),
        0 0 100px -5px rgba(0, 194, 255, 0.55),
        0 0 0 1.5px rgba(0, 194, 255, 0.35);
}

.door-phone-1.is-active .iphone { transform: rotate(-3deg) scale(1.04); }
.door-phone-2.is-active .iphone { transform: rotate(0deg) translateY(-16px) scale(1.06); }
.door-phone-3.is-active .iphone { transform: rotate(3deg) scale(1.04); }

/* Step caption */
.door-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    max-width: 280px;
    transition: opacity 0.4s;
}

.door-step-num {
    font-family: var(--display);
    font-size: 32px;
    line-height: 1;
    color: var(--text-4);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    transition: color 0.4s;
}

.door-phone.is-active .door-step-num {
    color: var(--accent);
}

.door-step-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.door-step-text strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.door-step-text span {
    color: var(--text-3);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Connecting arrows between phones */
.door-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 60px;
    margin-top: -60px;
    opacity: 0.7;
}

.door-arrow svg {
    width: 100%;
    height: 24px;
    overflow: visible;
}

/* Footer stats */
.door-foot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    overflow: hidden;
    max-width: 880px;
    margin: 100px auto 0;
}

.dfoot-stat {
    padding: 22px 18px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dfoot-stat strong {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 26px;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.dfoot-stat span {
    font-size: 11.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   HERO COMPANION PHONE
   ════════════════════════════════════════════════════════════ */

.hero-phone {
    position: absolute;
    left: -10px;
    bottom: -50px;
    width: 248px;
    z-index: 6;
    transform-style: preserve-3d;
    opacity: 0;
    animation: heroPhoneIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7));
}

@keyframes heroPhoneIn {
    from {
        opacity: 0;
        transform: translate(-40px, 30px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* Connector line + tag now sit on the RIGHT of the phone, pointing toward the dashboard */
.hero-phone-link {
    position: absolute;
    top: -24px;
    right: -130px;
    width: 140px;
    height: 30px;
    pointer-events: none;
}

.hero-phone-link svg {
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
}

.hero-phone-tag {
    position: absolute;
    top: -14px;
    right: -110px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(10, 10, 24, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 194, 255, 0.25);
    border-radius: 999px;
    color: var(--text-2);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Ping ring - fires when admission ticks */
.phone-ping {
    position: absolute;
    inset: 0;
    border-radius: 38px;
    border: 2px solid var(--accent);
    opacity: 0;
    pointer-events: none;
}

.phone-ping.is-firing {
    animation: phonePing 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes phonePing {
    0%   { opacity: 0.7; transform: scale(0.94); }
    100% { opacity: 0;   transform: scale(1.18); }
}

/* ════════════════════════════════════════════════════════════
   MARQUEE
   ════════════════════════════════════════════════════════════ */

.marquee-section {
    padding: 56px 0 64px;
    overflow: hidden;
    background: transparent;
}

.marquee-label {
    text-align: center;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 36px;
}

/* Static, centered logo cloud - no scroll, no repeat. Wraps cleanly on small screens. */
.venue-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 56px 72px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.venue-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
/* Icon-only marks (single initial / monogram) get a slight bump
   so they don't read tiny next to wordmark logos at the same height. */
.venue-logo.is-icon { height: 56px; }

.venue-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════════
   PROBLEM
   ════════════════════════════════════════════════════════════ */

.problem {
    position: relative;
    padding: 160px 0 140px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.problem-container {
    position: relative;
    z-index: 3;
}

.problem-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5.5vw, 64px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin: 12px auto 28px;
    max-width: 900px;
}

.problem-sub {
    font-size: 18px;
    color: var(--text-2);
    max-width: 620px;
    margin: 0 auto 48px;
    line-height: 1.6;
}

/* ═══ Statement card - three undeniable lines ═══ */
.problem-stat {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin: 0 auto 56px;
    padding: 38px 56px 30px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 194, 255, 0.05), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.problem-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 194, 255, 0.06), transparent 60%);
    pointer-events: none;
}

.problem-stat-statement {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--text);
    text-align: center;
}

.problem-stat-statement em {
    font-family: 'Instrument Serif', var(--display);
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(180deg, #6e87ff 0%, #3a5cff 55%, #2547e0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
    letter-spacing: -1px;
    padding: 0 0.04em;
}

.problem-stat-label {
    position: relative;
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.55;
    max-width: 460px;
    letter-spacing: 0.01em;
    margin-top: 4px;
}

.problem-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    max-width: 720px;
    margin: 0 auto 80px;
}

.ptool {
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 14px;
    color: var(--text-2);
    transition:
        opacity 0.45s var(--ease),
        filter 0.45s var(--ease),
        transform 0.45s var(--ease),
        border-color 0.45s var(--ease),
        background 0.45s var(--ease);
    cursor: default;
    will-change: transform, opacity;
}

/* On hover the pill quietly recedes - no strikethrough.
   Reads as "this gets retired" without screaming about it. */
.ptool:hover {
    opacity: 0.42;
    filter: saturate(0.4);
    transform: translateY(2px) scale(0.97);
    border-color: rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.015);
    color: var(--text-2);
}

/* ═══ Bridge - connects problem section to the rest of the site ═══ */
.problem-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 72px;
}

.problem-bridge-line {
    width: 1px;
    height: 56px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
}

.problem-bridge-label {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-2);
    opacity: 0.75;
}

.problem-bridge-arrow {
    font-size: 22px;
    color: var(--text-2);
    opacity: 0.5;
    animation: bridgeBob 2.4s ease-in-out infinite;
}

@keyframes bridgeBob {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50%      { transform: translateY(6px); opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════════
   CHAOS COLLAGE - visual proof of the mess
   ═══════════════════════════════════════════════════════════ */
.chaos-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.chaos-glow {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 12% 28%, rgba(0, 194, 255, 0.06), transparent 35%),
        radial-gradient(circle at 88% 30%, rgba(0, 194, 255, 0.05), transparent 35%),
        radial-gradient(circle at 80% 78%, rgba(0, 194, 255, 0.04), transparent 40%);
    filter: blur(20px);
}

.chaos {
    position: absolute;
    background: #f5f3ed;
    color: #1a1a1a;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 18px 50px -12px rgba(0, 0, 0, 0.7),
        0 4px 12px -2px rgba(0, 0, 0, 0.5);
    font-family: var(--body);
    user-select: none;
    will-change: transform;
}

.chaos::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 20%, rgba(0, 0, 0, 0.06), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.06), transparent 60%);
}

/* ── Clipboard ────────────────────── */
.chaos-clipboard {
    top: 90px;
    left: 7%;
    width: 200px;
    transform: rotate(-7deg);
    background: transparent;
    box-shadow: none;
    animation: chaosFloat1 9s ease-in-out infinite;
}
.chaos-clip-bar {
    width: 80%;
    height: 18px;
    margin: 0 auto -4px;
    background: linear-gradient(180deg, #6b513a, #4a3625);
    border-radius: 4px 4px 1px 1px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}
.chaos-clip-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 26px;
    height: 16px;
    background: #c8c8c8;
    border-radius: 4px 4px 2px 2px;
}
.chaos-paper {
    background: #f5f3ed;
    padding: 14px 14px 16px;
    border-radius: 1px;
    position: relative;
    box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.7);
    font-family: 'Caveat', 'Bradley Hand', cursive;
}
.chaos-paper-head {
    font-size: 12.5px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid #1a1a1a;
    padding-bottom: 6px;
    margin-bottom: 8px;
    font-family: var(--body);
}
.chaos-paper-head span { font-weight: 400; opacity: 0.6; font-size: 10.5px; }
.chaos-paper-list { list-style: none; padding: 0; margin: 0; }
.chaos-paper-list li {
    font-size: 17px;
    line-height: 1.5;
    color: #2a2a2a;
}
.chaos-paper-list li s { opacity: 0.55; text-decoration-thickness: 2px; }
.chaos-paper-q { color: #c92043; font-weight: 700; }
.chaos-paper-scribble {
    position: absolute;
    bottom: -6px;
    right: -8px;
    transform: rotate(-8deg);
    color: #c92043;
    font-size: 16px;
    background: #fffec7;
    padding: 4px 8px;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* ── WhatsApp ─────────────────────── */
.chaos-whatsapp {
    top: 110px;
    right: 7%;
    width: 230px;
    border-radius: 14px;
    overflow: hidden;
    transform: rotate(5deg);
    background: #0b141a;
    color: #e9edef;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8);
    animation: chaosFloat2 10s ease-in-out infinite;
}
.chaos-whatsapp::after { display: none; }
.chaos-wa-head {
    background: #1f2c33;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chaos-wa-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 8px rgba(37, 211, 102, 0.7);
}
.chaos-wa-count {
    margin-left: auto;
    background: #25d366;
    color: #0b141a;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}
.chaos-wa-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.02), transparent 40%),
        #0b141a;
}
.chaos-wa-msg {
    font-size: 11.5px;
    line-height: 1.4;
    padding: 6px 9px 6px;
    border-radius: 8px;
    max-width: 80%;
    position: relative;
}
.chaos-wa-msg b {
    display: block;
    font-size: 10px;
    color: #25d366;
    margin-bottom: 1px;
    font-weight: 700;
}
.chaos-wa-msg.in {
    background: #202c33;
    align-self: flex-start;
}
.chaos-wa-msg.out {
    background: #005c4b;
    align-self: flex-end;
    color: #ddf6e2;
}

/* ── Excel ─────────────────────────── */
.chaos-excel {
    bottom: 120px;
    right: 8%;
    width: 270px;
    transform: rotate(4deg);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    animation: chaosFloat3 11s ease-in-out infinite;
}
.chaos-xl-tab {
    background: #217346;
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 6px 12px;
    letter-spacing: 0.02em;
    font-family: var(--body);
}
.chaos-xl-grid {
    background: #fff;
    color: #1a1a1a;
    font-family: 'Calibri', 'Inter', sans-serif;
    font-size: 11px;
}
.chaos-xl-row {
    display: grid;
    grid-template-columns: 1.4fr 0.5fr 0.6fr 0.7fr;
    border-bottom: 1px solid #d0d7de;
}
.chaos-xl-row > div {
    padding: 5px 8px;
    border-right: 1px solid #e6e6e6;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.chaos-xl-head {
    background: #f0f0f0;
    font-weight: 700;
    font-size: 10px;
    color: #444;
    letter-spacing: 0.04em;
}
.chaos-xl-err {
    background: #ffe4e4;
    color: #c92043;
    font-weight: 600;
}

/* ── Sticky note ────────────────────── */
.chaos-sticky {
    bottom: 110px;
    left: 9%;
    width: 145px;
    padding: 16px 14px 18px;
    background: #fff066;
    color: #1a1a1a;
    transform: rotate(-4deg);
    border-radius: 1px;
    font-family: 'Caveat', 'Bradley Hand', cursive;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 18px 32px -10px rgba(0, 0, 0, 0.55),
        -6px 6px 0 rgba(0, 0, 0, 0.05);
    animation: chaosFloat4 12s ease-in-out infinite;
}
.chaos-sticky-text {
    font-size: 17px;
    line-height: 1.45;
}
.chaos-sticky-text s { opacity: 0.55; }
.chaos-sticky-circle {
    display: inline-block;
    color: #c92043;
    font-weight: 700;
    border: 2px solid #c92043;
    border-radius: 50%;
    padding: 2px 8px;
    margin-top: 4px;
    transform: rotate(-3deg);
}

/* ── Receipt ──────────────────────────── */
.chaos-receipt {
    top: 380px;
    left: 8%;
    width: 170px;
    padding: 12px 14px 14px;
    background: #f9f7ee;
    transform: rotate(6deg);
    font-family: 'Courier New', monospace;
    color: #1a1a1a;
    border-radius: 2px;
    animation: chaosFloat5 13s ease-in-out infinite;
}
.chaos-rcpt-head {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    border-bottom: 1px dashed #999;
    padding-bottom: 6px;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.chaos-rcpt-line {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 2px 0;
}
.chaos-rcpt-err { color: #c92043; }
.chaos-rcpt-divider {
    height: 0;
    border-top: 1px dashed #999;
    margin: 6px 0 4px;
}
.chaos-rcpt-total {
    font-weight: 700;
    font-size: 12.5px;
}
.chaos-rcpt-foot {
    margin-top: 8px;
    text-align: center;
    font-size: 9.5px;
    text-transform: uppercase;
    color: #c92043;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* ── Fragmented booking links (Linktree-style) ─────── */
.chaos-links {
    top: 360px;
    right: 6%;
    width: 215px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #1b1d24 0%, #0f1015 100%);
    color: #e7e9ee;
    transform: rotate(-4deg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 18px 50px -12px rgba(0, 0, 0, 0.8);
    animation: chaosFloat6 11.5s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.chaos-links::after { display: none; }
.chaos-links-head {
    padding: 10px 12px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #cfd2d8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--body);
}
.chaos-links-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a2a2a, #0a0a0a);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
}
.chaos-links-stack {
    padding: 8px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chaos-link-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 10.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #e7e9ee;
    font-family: var(--body);
    font-weight: 500;
}
.chaos-link-btn em {
    font-style: normal;
    font-size: 9px;
    color: #ff7a90;
    text-transform: lowercase;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

/* ── Floating animations ──────────────── */
@keyframes chaosFloat1 {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50%      { transform: rotate(-6deg) translateY(-8px); }
}
@keyframes chaosFloat2 {
    0%, 100% { transform: rotate(5deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-10px); }
}
@keyframes chaosFloat3 {
    0%, 100% { transform: rotate(4deg) translateY(0); }
    50%      { transform: rotate(3deg) translateY(-7px); }
}
@keyframes chaosFloat4 {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(-5deg) translateY(-9px); }
}
@keyframes chaosFloat5 {
    0%, 100% { transform: rotate(6deg) translateY(0); }
    50%      { transform: rotate(7deg) translateY(-6px); }
}
@keyframes chaosFloat6 {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(-3deg) translateY(-8px); }
}

/* Mobile: hide most chaos artifacts so the section stays readable */
@media (max-width: 820px) {
    .problem { padding: 100px 0 90px; }
    .chaos-clipboard, .chaos-receipt, .chaos-links { display: none; }
    .chaos-whatsapp { width: 140px; top: 30px; right: -2%; transform: rotate(8deg) scale(0.78); }
    .chaos-excel    { width: 160px; bottom: 60px; right: -2%; transform: rotate(5deg) scale(0.78); }
    .chaos-sticky   { width: 105px; left: -2%; bottom: 70px; transform: rotate(-6deg) scale(0.85); }
    .problem-stat { padding: 24px 28px 22px; max-width: calc(100vw - 32px); }
    .problem-stat-statement { font-size: clamp(24px, 7vw, 36px); }
    .problem-stat-label { font-size: 13px; }
    .problem-tools { margin-bottom: 60px; }
    .problem-bridge-line { height: 40px; }
}
@media (max-width: 480px) {
    /* Hide every chaos artefact on small phones — at this width
       the .chaos-sticky was overlapping the .problem-stat headline
       (and the floating CTA). The story still reads cleanly without
       the decorative bits. */
    .chaos-whatsapp,
    .chaos-excel,
    .chaos-sticky { display: none; }
}

/* ════════════════════════════════════════════════════════════
   LOOP - FLYWHEEL
   ════════════════════════════════════════════════════════════ */

.loop {
    padding: 140px 0 160px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    position: relative;
    overflow: hidden;
}

.loop-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5.5vw, 60px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin: 12px 0 20px;
}

.loop-sub {
    font-size: 17px;
    color: var(--text-2);
    max-width: 600px;
    margin: 0 auto 80px;
    line-height: 1.6;
}

.flywheel {
    position: relative;
    width: 580px;
    height: 580px;
    margin: 0 auto;
    max-width: 90vw;
    aspect-ratio: 1;
}

.flywheel-ring {
    position: absolute;
    inset: 0;
    border: 1px dashed var(--border-light);
    border-radius: 50%;
    animation: spin 90s linear infinite;
    opacity: 0.55;
}

.flywheel-ring-2 {
    inset: 60px;
    border-style: solid;
    border-color: var(--border);
    animation-duration: 130s;
    animation-direction: reverse;
    opacity: 0.4;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── SVG arcs connecting nodes - directional flow ── */
.flywheel-paths {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: var(--accent);
    z-index: 2;
}
.fw-arc {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-dasharray: 5 6;
    opacity: 0.35;
    filter: drop-shadow(0 0 4px rgba(0, 194, 255, 0.35));
}

/* ── SVG pulse - positions driven by JS, only styling here ── */
.fw-pulse-core {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 14px rgba(0, 194, 255, 0.95));
}
.fw-pulse-halo {
    filter: blur(6px);
    opacity: 0.8;
}
/* Comet-trail dot disabled - leaves a clean glowing pulse with no smear behind it. */
.fw-pulse-trail { display: none; }

/* ── Centre - live cycle counter ── */
.flywheel-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 194, 255, 0.3), transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.flywheel-core::before {
    content: '';
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--bg-card), var(--bg));
    border: 1px solid var(--border-light);
    box-shadow:
        0 0 80px rgba(0, 194, 255, 0.35),
        inset 0 0 40px rgba(0, 194, 255, 0.12);
}
/* Subtle pulse on the core matching the loop cadence */
.flywheel-core::after {
    content: '';
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 194, 255, 0.4);
    opacity: 0;
    animation: fwCoreBeat 7s linear infinite;
    pointer-events: none;
}
@keyframes fwCoreBeat {
    0%, 92%, 100% { opacity: 0; transform: scale(1); }
    96%           { opacity: 1; transform: scale(1.04); }
}

.flywheel-core-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    text-align: center;
}

.flywheel-core-cycle-label {
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2.4px;
    opacity: 0.85;
}
.flywheel-core-cycle {
    font-family: var(--display);
    font-size: 38px;
    font-weight: 400;
    color: var(--white);
    letter-spacing: -1px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 6px;
}
.flywheel-core-tick {
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--accent);
    opacity: 0.85;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Nodes - activation driven by JS for guaranteed sync with the pulse ── */
.fw-node {
    position: absolute;
    top: 50%; left: 50%;
    width: 210px;
    transform-origin: 0 0;
    transform: rotate(var(--angle)) translateX(240px) rotate(calc(-1 * var(--angle))) translate(-50%, -50%);
    opacity: 0.55;
    transition: opacity 0.35s var(--ease);
    z-index: 3;
}
.fw-node.is-active { opacity: 1; }

.fw-node-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 18px 18px 16px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition:
        transform 0.4s var(--ease),
        border-color 0.35s var(--ease),
        background 0.35s var(--ease),
        box-shadow 0.4s var(--ease);
    will-change: transform;
}
.fw-node.is-active .fw-node-inner {
    transform: scale(1.05);
    border-color: var(--accent);
    background: var(--bg-card-hover);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.55),
        0 0 28px var(--accent-soft),
        inset 0 0 0 1px var(--accent-soft);
}

.fw-node-num {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.fw-node-text {
    display: block;
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.3;
}

/* Live stat under each node label - concrete numbers under the abstract step */
.fw-node-stat {
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    line-height: 1.45;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    transition: color 0.35s var(--ease);
}
.fw-node-stat strong {
    color: var(--accent);
    font-weight: 600;
    font-family: var(--body);
    font-size: 12.5px;
    letter-spacing: -0.01em;
    margin-right: 2px;
}
.fw-node.is-active .fw-node-stat { color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
    .flywheel-ring,
    .flywheel-core::after { animation: none !important; }
    .fw-node { opacity: 1; }
    .fw-pulse-core,
    .fw-pulse-halo,
    .fw-pulse-trail { display: none; }
}

/* ════════════════════════════════════════════════════════════
   CHAPTER (Operations / Growth / Data wrappers)
   ════════════════════════════════════════════════════════════ */

.chapter {
    padding: 160px 0 140px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.chapter-alt {
    background: var(--bg-elevated);
}

/* ────────────────────────────────────────────────────────────
   GUEST LINE chapter - its own product, its own surface.
   Pure B&W brand. Strips out cobalt + cyan accents so the
   section reads as a distinct sub-product, not a Guestii section.
   ──────────────────────────────────────────────────────────── */
.chapter-guestline {
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    /* Guest Line uses Delight as its brand typeface */
    font-family: 'Delight', 'Inter', sans-serif;
}

/* Title swaps Alias → Delight inside the Guest Line section.
   Slightly tighter tracking + medium weight feels truer to the
   Guest Line product than Alias display. */
.chapter-guestline .chapter-title,
.chapter-guestline .gl-body h3 {
    font-family: 'Delight', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -1.5px;
}

/* Body copy + list items also pick up Delight */
.chapter-guestline .chapter-sub,
.chapter-guestline .gl-body p,
.chapter-guestline .growth-list li {
    font-family: 'Delight', 'Inter', sans-serif;
    font-weight: 400;
}

/* chap-tag stays uppercase + tracked but in Delight medium so it
   reads as part of the same typographic system. Mono code chips
   keep mono so URLs and identifiers still look like identifiers. */
.chapter-guestline .chap-tag {
    font-family: 'Delight', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 1.8px;
}

/* Monochrome chip in place of the magenta one */
.chapter-guestline .chapter-chip,
.chapter-guestline .chapter-chip-magenta {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
}
.chapter-guestline .chapter-chip .chip-dot,
.chapter-guestline .chapter-chip-magenta .chip-dot {
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}

/* Neutralise the cobalt brand glow behind product shots */
.chapter-guestline .gl-showcase::before {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.06),
        transparent 60%
    );
}

/* chap-tag (was cyan/accent) → monochrome */
.chapter-guestline .chap-tag {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* growth-list ticks default to cyan; swap to monochrome */
.chapter-guestline .growth-list li span {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* gst.li/name code chip - keep readable on pure black */
.chapter-guestline code {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.chapter-head {
    max-width: 760px;
    margin-bottom: 80px;
}

/* Sub-product brand mark sitting above the chapter chip */
.chapter-brand {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    line-height: 0;
}
.chapter-brand-mark {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
    opacity: 0.95;
}
/* Co-branded "Guest Line by Guestii" lockup is ~18% taller than the
   standalone wordmark, bump the height so the tagline reads cleanly. */
.chapter-brand-mark-cobrand {
    height: 56px;
}
@media (max-width: 768px) {
    .chapter-brand-mark { height: 34px; }
    .chapter-brand-mark-cobrand { height: 44px; }
    .chapter-brand { margin-bottom: 18px; }
}

.chapter-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.04;
    letter-spacing: -2px;
    margin: 12px 0 24px;
}

.chapter-sub {
    font-size: 19px;
    color: var(--text-2);
    line-height: 1.6;
    max-width: 580px;
}

.chapter-sub strong { color: var(--text); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   OPERATIONS - chapter grid
   ════════════════════════════════════════════════════════════ */

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.chap-card {
    grid-column: span 2;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s var(--ease);
    position: relative;
    display: flex;
    flex-direction: column;
}

.chap-card-lg {
    grid-column: span 3;
}

.chap-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-light);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-light);
}

/* Browser window framing for dashboard screenshots */
.chap-card-img {
    position: relative;
    background: linear-gradient(180deg, #0a0a18 0%, #050510 100%);
    padding: 38px 28px 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.chap-card-img::before {
    /* macOS-style traffic lights */
    content: '';
    position: absolute;
    top: 14px;
    left: 18px;
    width: 44px;
    height: 10px;
    background-image:
        radial-gradient(circle at 5px 5px, #ff5f57 4px, transparent 4.5px),
        radial-gradient(circle at 21px 5px, #febc2e 4px, transparent 4.5px),
        radial-gradient(circle at 37px 5px, #28c840 4px, transparent 4.5px);
    z-index: 3;
}

.chap-card-img::after {
    /* fade to transparent at bottom into card body */
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60px;
    background: linear-gradient(180deg, transparent, var(--bg-card));
    pointer-events: none;
    z-index: 2;
}

.chap-card-img .window {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: var(--bg);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 24px 60px rgba(0, 0, 0, 0.5);
}

.chap-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    transition: transform 0.7s var(--ease);
    opacity: 0.98;
    display: block;
}

.chap-card:hover .chap-card-img img {
    transform: scale(1.03);
    opacity: 1;
}

.chap-card-body {
    padding: 24px 30px 32px;
    position: relative;
    z-index: 4;
}

/* Per-card image positioning so the right part of each dashboard shows */
.chap-card[data-img="event-detail"]    .chap-card-img img { object-position: top left; }
.chap-card[data-img="ticket-types"]    .chap-card-img img { object-position: top center; }
.chap-card[data-img="team-management"] .chap-card-img img { object-position: top center; }
.chap-card[data-img="events-dashboard"] .chap-card-img img { object-position: top center; }
.chap-card[data-img="integrations"]    .chap-card-img img { object-position: top center; }

.chap-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 1.5px;
    margin-bottom: 14px;
    padding: 4px 10px;
    background: var(--accent-soft);
    border-radius: 100px;
}

.chap-card-body h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    color: var(--text);
}

.chap-card-body p {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   GROWTH - split features + grid
   ════════════════════════════════════════════════════════════ */

.growth-grid {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.growth-feature {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: center;
}

.growth-feature-reverse {
    grid-template-columns: 1fr 380px;
}

.growth-feature-reverse .phone-frame {
    order: 2;
}

/* PHONE FRAME */
.phone-frame {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 9 / 18.5;
    margin: 0 auto;
    background: linear-gradient(180deg, #1a1a2e, #0a0a18);
    border-radius: 44px;
    padding: 12px;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.06),
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 0 120px rgba(0, 194, 255, 0.1);
}

.phone-frame::before {
    content: '';
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 26px;
    background: #000;
    border-radius: 100px;
    z-index: 2;
}

.phone-screen {
    width: 100%; height: 100%;
    background: var(--bg);
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

.phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.growth-feature-body h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 42px);
    letter-spacing: -1px;
    margin: 14px 0 16px;
    line-height: 1.1;
}

.growth-feature-body p {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 480px;
}

.growth-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.growth-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--text-2);
}

.growth-list li span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* GROWTH CARDS */

.growth-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.g-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    padding: 0 0 28px;
    transition: all 0.5s var(--ease);
}

.g-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
}

.g-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a18 0%, #050510 100%);
    margin-bottom: 24px;
    padding: 30px 18px 0;
    position: relative;
}

.g-card-img::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 14px;
    width: 36px;
    height: 8px;
    background-image:
        radial-gradient(circle at 4px 4px, #ff5f57 3.2px, transparent 3.7px),
        radial-gradient(circle at 18px 4px, #febc2e 3.2px, transparent 3.7px),
        radial-gradient(circle at 32px 4px, #28c840 3.2px, transparent 3.7px);
    z-index: 2;
}

.g-card-img .window {
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.5);
}

.g-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
}

.g-card h4 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -0.5px;
    padding: 0 26px 8px;
}

.g-card p {
    font-size: 14px;
    color: var(--text-2);
    padding: 0 26px;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   DATA - main + segments + side
   ════════════════════════════════════════════════════════════ */

.data-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
}

/* ─── New CRM layout (v2) ───────────────────────────────────
   Two real product mockups stacked on the left, smart segments
   panel on the right. The SVGs already include their own dark
   surface + corner radius, so we render them flush (no macOS
   browser chrome wrapper).
   ─────────────────────────────────────────────────────────── */
.data-grid-v2 {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: auto;
    gap: 28px;
    align-items: stretch;
}

.data-showcase-stack {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.data-showcase {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.data-showcase img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 24px 70px rgba(0, 0, 0, 0.55);
    background: #161824;
}

/* ════════════════════════════════════════════════════════════
   CRM MOCK COMPONENTS - custom-built CSS replicas
   ────────────────────────────────────────────────────────────
   .crm-mock-db      → multi-guest database table (Showcase 1)
   .crm-mock-profile → single-guest profile detail (Showcase 2)
   Both share the .crm-mock surface + avatar palette.
   ════════════════════════════════════════════════════════════ */

.crm-mock {
    background:
        linear-gradient(180deg, #0d1020 0%, #07091a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 22px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 24px 70px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

/* ─── Avatar palette (shared) ─── */
.crm-avatar,
.crm-prof-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #4a5dff, #6a40ff);
}
.crm-avatar[data-color="a"], .crm-prof-avatar[data-color="a"] { background: linear-gradient(135deg, #f472b6, #ec4899); }
.crm-avatar[data-color="b"]                                   { background: linear-gradient(135deg, #34d399, #10b981); }
.crm-avatar[data-color="c"]                                   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.crm-avatar[data-color="d"]                                   { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.crm-avatar[data-color="e"]                                   { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.crm-avatar[data-color="f"]                                   { background: linear-gradient(135deg, #fb7185, #e11d48); }
.crm-avatar[data-color="g"]                                   { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }

/* ────────────────────────────────────────────────────────────
   SHOWCASE 1: Database view
   ──────────────────────────────────────────────────────────── */
.crm-mock-db {
    padding: 18px 18px 14px;
}

.crm-mock-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.crm-mock-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12.5px;
}

.crm-mock-actions {
    display: flex;
    gap: 6px;
}

.crm-mock-btn {
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: default;
    transition: background 0.2s;
}

.crm-mock-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.75);
}

.crm-mock-btn-primary {
    background: var(--accent);
    color: #001218;
    border: 1px solid var(--accent);
    box-shadow: 0 0 18px rgba(0, 194, 255, 0.25);
}

.crm-mock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.crm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

.crm-chip em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.crm-chip-active {
    background: rgba(0, 194, 255, 0.10);
    border-color: rgba(0, 194, 255, 0.30);
    color: var(--accent);
}
.crm-chip-active em { color: var(--accent); }

.crm-chip-add {
    color: rgba(255, 255, 255, 0.5);
    border-style: dashed;
}

.crm-mock-table {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.015);
}

.crm-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 50px 70px 92px 78px;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12.5px;
    transition: background 0.2s;
}

.crm-row:last-child { border-bottom: none; }

.crm-row-head {
    background: rgba(255, 255, 255, 0.025);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 8px 14px;
}

.crm-row-active {
    background: rgba(0, 194, 255, 0.05);
    box-shadow: inset 2px 0 0 var(--accent);
}

.crm-guest {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 9.5px;
}

.crm-num {
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

.crm-num-money {
    color: var(--text);
    font-weight: 600;
}

.crm-when {
    font-family: var(--mono);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.crm-tags {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
}

.crm-tag {
    font-style: normal;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: 5px;
    text-transform: uppercase;
    line-height: 1;
}

.crm-tag-vip { background: rgba(0, 194, 255, 0.12); color: var(--accent); }
.crm-tag-reg { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); }
.crm-tag-new { background: rgba(52, 211, 153, 0.12); color: #34d399; }

.crm-mock-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.04em;
}

.crm-foot-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────
   SHOWCASE 2: Profile detail view
   ──────────────────────────────────────────────────────────── */
.crm-mock-profile { padding: 22px; }

.crm-prof-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.crm-prof-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.30);
}

.crm-prof-id { min-width: 0; }

.crm-prof-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-prof-name-row h5 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 19px;
    color: var(--text);
    letter-spacing: -0.4px;
    margin: 0;
}

.crm-prof-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #001218;
    flex-shrink: 0;
}

.crm-prof-meta {
    font-family: var(--mono);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 3px;
    letter-spacing: 0.02em;
}

.crm-prof-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.crm-prof-by-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.crm-prof-by-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text);
}

.crm-prof-by-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
}

.crm-prof-status {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.crm-prof-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
}

.crm-prof-pill-vip {
    background: rgba(0, 194, 255, 0.12);
    color: var(--accent);
    border: 1px solid rgba(0, 194, 255, 0.25);
    padding: 5px 9px;
}

.crm-prof-pill-live {
    background: rgba(52, 211, 153, 0.10);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.22);
    padding: 5px 9px;
    text-transform: none;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.crm-prof-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    animation: segPillPulse 1.8s ease-in-out infinite;
}

.crm-prof-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 16px;
}

.crm-prof-stat {
    text-align: center;
}

.crm-prof-stat strong {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 24px;
    color: var(--text);
    letter-spacing: -0.5px;
}

.crm-prof-stat strong i {
    font-style: normal;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 1px;
}

.crm-prof-stat span {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.crm-prof-tabs {
    display: flex;
    gap: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}

.crm-prof-tab {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    padding: 10px 0;
    position: relative;
}

.crm-prof-tab-active {
    color: var(--accent);
}

.crm-prof-tab-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.crm-prof-spend-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.crm-prof-money {
    background: linear-gradient(180deg, rgba(0, 194, 255, 0.08), rgba(0, 194, 255, 0.02));
    border: 1px solid rgba(0, 194, 255, 0.18);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
}

.crm-prof-money strong {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    color: var(--accent);
    letter-spacing: -0.3px;
    line-height: 1.05;
}

.crm-prof-money span {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.crm-prof-items-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.crm-prof-item {
    display: grid;
    grid-template-columns: 1.2fr 2fr 0.45fr;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
}

.crm-prof-item-name {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-prof-item-name i {
    font-style: normal;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 4px;
}

.crm-prof-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.crm-prof-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), rgba(0, 194, 255, 0.55));
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.35);
}

.crm-prof-item-val {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── Mobile collapse for CRM mocks ─── */
@media (max-width: 768px) {
    .crm-mock { padding: 14px; }
    .crm-mock-head { flex-wrap: wrap; }
    .crm-mock-actions .crm-mock-btn-ghost { display: none; }

    .crm-row {
        grid-template-columns: minmax(0, 1.4fr) 38px 65px 70px;
        gap: 8px;
        font-size: 11.5px;
        padding: 9px 10px;
    }
    /* Drop the "Tags" column on phones - already implied by row colour */
    .crm-row > :last-child { display: none; }

    .crm-prof-head {
        grid-template-columns: auto 1fr;
        row-gap: 10px;
    }
    .crm-prof-status {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .crm-prof-tabs { gap: 12px; overflow-x: auto; }
    .crm-prof-stat strong { font-size: 20px; }
    .crm-prof-money strong { font-size: 18px; }
}

.data-showcase-cap {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.data-showcase-tag {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
}

.data-showcase-cap h4 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.4px;
    color: var(--text);
    line-height: 1.15;
}

.data-showcase-cap p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
    max-width: 56ch;
}

.data-segments {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    /* Make the segments panel stick to the top of its column
       while the user scrolls past the taller showcase stack. */
    position: sticky;
    top: 100px;
}

.segments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.segments-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.08);
    border: 1px solid rgba(0, 194, 255, 0.20);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.seg-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: segPillPulse 1.8s ease-in-out infinite;
}

@keyframes segPillPulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%      { opacity: 0.55; transform: scale(0.8); }
}

/* Bullet list under the segments (replaces old "Crews & tags"
   + "Every guest. One database." text cards) */
.data-bullets {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.data-bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.data-bullet-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-2);
}

.data-bullet h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
    letter-spacing: -0.1px;
}

.data-bullet p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3);
}

.segments-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

.segment {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.3s;
}

.segment:last-child { border-bottom: none; }

.segment:hover {
    background: var(--surface);
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 12px;
    border-bottom-color: transparent;
}

.seg-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    box-shadow: 0 0 20px color-mix(in srgb, var(--c) 20%, transparent);
    flex-shrink: 0;
}

.seg-body {
    flex: 1;
    min-width: 0;
}

.seg-body h4 {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 2px;
}

.seg-body p {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.4;
}

.seg-count {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 4px 10px;
    border-radius: 8px;
    flex-shrink: 0;
}

.data-side {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.data-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    padding: 0 0 20px;
    transition: all 0.4s var(--ease);
}

.data-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light);
}

.data-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a18 0%, #050510 100%);
    margin-bottom: 16px;
    padding: 28px 16px 0;
    position: relative;
}

.data-card-img::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 12px;
    width: 32px;
    height: 7px;
    background-image:
        radial-gradient(circle at 3.5px 3.5px, #ff5f57 3px, transparent 3.5px),
        radial-gradient(circle at 15.5px 3.5px, #febc2e 3px, transparent 3.5px),
        radial-gradient(circle at 27.5px 3.5px, #28c840 3px, transparent 3.5px);
    z-index: 2;
}

.data-card-img .window {
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.5);
}

.data-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
}

.data-card h4 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 17px;
    padding: 0 20px 4px;
    letter-spacing: -0.3px;
}

.data-card p {
    font-size: 13px;
    color: var(--text-2);
    padding: 0 20px;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   BUILT FOR - tabs
   ════════════════════════════════════════════════════════════ */

.built-for {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.bf-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 12px 0 56px;
}

/* ════════════════════════════════════════════════════════════════
   VENUES SECTION  (.venues  /  #venues)
   Replaces the legacy "built-for" 3-up. Two stacked beats:
     1. Brand grid · the actual rooms running on Guestii
     2. Public profile feature · every venue gets gst.li/yourvenue
   ════════════════════════════════════════════════════════════════ */
.venues {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.venues-head {
    max-width: 720px;
    margin: 0 auto 56px;
}
.venues-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 14px 0 18px;
    color: #fff;
}
.venues-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.venues-sub {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    max-width: 560px;
    margin: 0 auto;
}

/* ── Logo grid: 7 venues + a "+ Your venue?" CTA cell ── */
.venues-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto 96px;
}
.venues-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 22px 28px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}
.venues-logo-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 60% at 50% 0%, rgba(0, 194, 255, 0.06), transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.venues-logo-cell:hover {
    border-color: rgba(0, 194, 255, 0.22);
    background: rgba(255, 255, 255, 0.03);
}
.venues-logo-cell:hover::after { opacity: 1; }

.venues-logo {
    height: 28px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    opacity: 0.78;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s ease;
}
.venues-logo-cell:hover .venues-logo { opacity: 1; }
.venues-logo-icon {
    height: 38px;
}

.venues-logo-cta {
    text-decoration: none;
    background: rgba(0, 194, 255, 0.04);
    border: 1px dashed rgba(0, 194, 255, 0.32);
    color: var(--brand);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}
.venues-logo-cta:hover {
    background: rgba(0, 194, 255, 0.08);
    border-color: rgba(0, 194, 255, 0.55);
    color: #fff;
    border-style: solid;
}
.venues-cta-plus {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    color: var(--brand);
    transition: color 0.25s;
}
.venues-logo-cta:hover .venues-cta-plus { color: #fff; }
.venues-cta-t {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}

/* ── Public-profile feature: copy + browser mock ── */
.venues-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
    text-align: left;
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 56px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.venues-profile-copy { max-width: 480px; }
.venues-feat-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.08);
    border: 1px solid rgba(0, 194, 255, 0.22);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    margin-bottom: 22px;
}
.venues-feat-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 8px rgba(0, 194, 255, 0.5);
}
.venues-profile-h {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -1px;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 18px;
}
.venues-url {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.78em;
    font-weight: 700;
    padding: 4px 14px;
    margin-top: 6px;
    color: var(--brand);
    background: rgba(0, 194, 255, 0.08);
    border: 1px solid rgba(0, 194, 255, 0.28);
    border-radius: 10px;
    letter-spacing: -0.2px;
}
.venues-profile-p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 24px;
}
.venues-profile-p em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    color: #fff;
    font-size: 1.08em;
}
.venues-feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.venues-feat-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}
.venues-feat-bullet {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 8px;
    background: var(--brand);
    box-shadow: 0 0 8px rgba(0, 194, 255, 0.45);
}
.venues-feat-list code {
    font-family: var(--mono);
    font-size: 12.5px;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    color: #fff;
}

/* ── Browser-style mock of gst.li/maven ── */
.venues-profile-mock {
    background: #0b0c1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.vp-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vp-bar-l { display: flex; gap: 5px; }
.vp-bar-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
}
.vp-bar-dot-r { background: #ff6058; }
.vp-bar-dot-y { background: #ffbd2e; }
.vp-bar-dot-g { background: #28ca42; }
.vp-bar-url {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: center;
    padding: 5px 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    max-width: 320px;
}
.vp-bar-url svg { color: rgba(255, 255, 255, 0.42); }
.vp-bar-url strong { color: #fff; font-weight: 600; }
.vp-bar-r { width: 28px; }

.vp-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Hero block (cover card) */
.vp-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.10), rgba(58, 92, 255, 0.06));
    border: 1px solid rgba(0, 194, 255, 0.18);
    overflow: hidden;
}
.vp-hero-aurora {
    position: absolute;
    inset: -30% -10% auto auto;
    width: 65%; height: 180%;
    background: radial-gradient(50% 40% at 70% 30%, rgba(0, 194, 255, 0.35), transparent 70%);
    filter: blur(28px);
    pointer-events: none;
}
.vp-hero-id {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1;
    min-width: 0;
}
.vp-hero-mark {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #00c2ff, #3a5cff);
    color: #fff;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 18px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 194, 255, 0.35);
}
.vp-hero-name {
    display: block;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.vp-hero-meta {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    font-family: var(--mono);
}
.vp-hero-cta {
    z-index: 1;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fff;
    color: #05050e;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}

/* Section header inside profile */
.vp-section-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 4px 0;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
}
.vp-section-h em {
    font-style: normal;
    color: var(--brand);
    font-weight: 600;
}

/* Event list */
.vp-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vp-event {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
}
.vp-event:hover {
    border-color: rgba(0, 194, 255, 0.22);
    background: rgba(0, 194, 255, 0.03);
}
.vp-event-d {
    width: 48px; height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    line-height: 1;
}
.vp-event-d strong {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.vp-event-d em {
    font-style: normal;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 9px;
    text-transform: uppercase;
    color: var(--brand);
    margin-top: 3px;
    letter-spacing: 0.6px;
}
.vp-event-i {
    line-height: 1.3;
    min-width: 0;
}
.vp-event-i strong {
    display: block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13.5px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-event-i span {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    font-family: var(--mono);
}
.vp-event-r {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.vp-event-price {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}
.vp-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.vp-pill-warn {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.28);
}
.vp-pill-ok {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.28);
}
.vp-pill-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.vp-actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 6px;
    padding-top: 4px;
}
.vp-act {
    padding: 11px 12px;
    border-radius: 10px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.vp-act-primary {
    background: var(--brand);
    color: #05050e;
    border: 1px solid var(--brand);
}
.vp-act-primary:hover { filter: brightness(1.1); }
.vp-act-ghost {
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.vp-act-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .venues-logos { grid-template-columns: repeat(3, 1fr); }
    .venues-profile { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; }
    .venues-profile-copy { max-width: none; }
}
@media (max-width: 700px) {
    .venues { padding: 90px 0; }
    .venues-head { margin-bottom: 40px; }
    .venues-logos { grid-template-columns: repeat(2, 1fr); margin-bottom: 64px; }
    .venues-logo-cell { min-height: 80px; padding: 18px 20px; }
    .venues-logo { height: 24px; }
    .venues-logo-icon { height: 32px; }
    .vp-actions { grid-template-columns: 1fr; }
    .vp-event { grid-template-columns: 40px 1fr auto; padding: 10px 12px; }
    .vp-event-d { width: 40px; height: 40px; }
    .vp-event-d strong { font-size: 16px; }
    .vp-event-i strong { font-size: 12.5px; }
    .vp-bar-url { font-size: 10.5px; max-width: 200px; }
}

.bf-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}

.bf-tab {
    padding: 12px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s var(--ease);
}

.bf-tab:hover { color: var(--text); border-color: var(--border-light); }

.bf-tab.is-active {
    background: var(--white);
    color: var(--bg);
    border-color: var(--white);
}

.bf-panels {
    position: relative;
    text-align: left;
}

.bf-panel {
    display: none;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 56px;
    animation: fadeIn 0.5s var(--ease);
}

.bf-panel.is-active { display: grid; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bf-panel-text h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin-bottom: 16px;
}

.bf-panel-text p {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 32px;
}

.bf-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.bf-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bf-stats strong {
    font-family: var(--display);
    font-weight: 400;
    font-size: 32px;
    color: var(--accent);
    letter-spacing: -0.5px;
}

.bf-stats span {
    font-size: 12px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bf-panel-img {
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    aspect-ratio: 16 / 10;
}

.bf-panel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* ════════════════════════════════════════════════════════════
   BUILT-FOR MOCKUPS · Custom CSS-built panels per audience
   .bf-mock-clubs   → live door dashboard
   .bf-mock-promo   → gst.li/<promoter> live page
   .bf-mock-groups  → multi-venue group HQ
   ════════════════════════════════════════════════════════════ */

.bf-panel-img.bf-mock-wrap {
    aspect-ratio: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.bf-mock {
    background: linear-gradient(180deg, #0d1020 0%, #07091a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 24px 70px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
}

/* Browser-style bar shared across mocks */
.bf-mock-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bf-mock-bar-l { display: flex; gap: 5px; }
.bf-mock-bar-c {
    flex: 1;
    text-align: center;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: lowercase;
}
.bf-mock-bar-r {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 110px;
}
.bf-mock-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}
.bf-mock-dot-r { background: #ff6058; }
.bf-mock-dot-y { background: #ffbd2e; }
.bf-mock-dot-g { background: #28ca42; }

.bf-mock-url {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    max-width: 220px;
    margin: 0 auto;
}
.bf-mock-url strong { color: #fff; font-weight: 600; }
.bf-mock-url svg { color: rgba(255, 255, 255, 0.45); }

.bf-mock-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Shared pills, bullets & avatars ─── */
.bf-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}
.bf-pill-live {
    background: rgba(0, 194, 255, 0.10);
    border-color: rgba(0, 194, 255, 0.32);
    color: #5fd6ff;
}
.bf-pill-warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.38);
    color: #fbbf24;
}
.bf-pill-mint {
    background: rgba(52, 211, 153, 0.10);
    border-color: rgba(52, 211, 153, 0.32);
    color: #4ade80;
}
.bf-pill-off {
    background: rgba(168, 85, 247, 0.10);
    border-color: rgba(168, 85, 247, 0.30);
    color: #c4b5fd;
}
.bf-pill-ghost {
    color: rgba(255, 255, 255, 0.55);
}
.bf-pill-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: bfPulse 1.6s ease-in-out infinite;
}
@keyframes bfPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

.bf-bullet {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.bf-bullet-c { background: #00c2ff; }
.bf-bullet-a { background: #fbbf24; }
.bf-bullet-g { background: #4ade80; }

.bf-feed-av,
.bf-promo-av,
.bf-venue-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    background: linear-gradient(135deg, #4a5dff, #6a40ff);
}
.bf-feed-av[data-c="a"], .bf-promo-av[data-c="a"] { background: linear-gradient(135deg, #f472b6, #ec4899); }
.bf-feed-av[data-c="b"], .bf-promo-av[data-c="b"] { background: linear-gradient(135deg, #34d399, #10b981); }
.bf-feed-av[data-c="c"], .bf-promo-av[data-c="c"] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bf-feed-av[data-c="d"], .bf-promo-av[data-c="d"] { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.bf-feed-av[data-c="e"], .bf-promo-av[data-c="e"] { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.bf-feed-av[data-c="g"], .bf-promo-av[data-c="g"] { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }

.bf-kpi-l {
    display: block;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 6px;
}
.bf-kpi-d {
    display: block;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
}
.bf-kpi-d.up { color: #4ade80; }

/* ─── #1 NIGHTCLUBS · Door dashboard ─── */
.bf-cap {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
}
.bf-cap-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.bf-cap-label {
    display: block;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}
.bf-cap-num {
    font-family: var(--display, 'Inter', sans-serif);
    line-height: 1;
}
.bf-cap-num strong {
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.5px;
}
.bf-cap-num em {
    font-style: normal;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}
.bf-cap-bar {
    height: 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 10px;
}
.bf-cap-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #00c2ff, #fbbf24 80%, #f97316);
    border-radius: 100px;
    box-shadow: 0 0 12px rgba(0, 194, 255, 0.45);
}
.bf-cap-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
}

.bf-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.bf-kpi {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
}
.bf-kpi-v {
    display: block;
    font-family: var(--display, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 22px;
    color: #fff;
    letter-spacing: -0.4px;
    line-height: 1;
}

.bf-feed {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
}
.bf-feed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}
.bf-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bf-feed-list li {
    display: grid;
    grid-template-columns: 26px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    border-radius: 8px;
    transition: background 0.2s;
}
.bf-feed-list li:hover { background: rgba(255, 255, 255, 0.025); }
.bf-feed-av {
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 10px;
}
.bf-feed-name {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    color: #fff;
    font-weight: 500;
    font-size: 12.5px;
    min-width: 0;
}
.bf-feed-name em {
    font-style: normal;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    margin-top: 1px;
}
.bf-feed-tag {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-weight: 600;
    white-space: nowrap;
}
.bf-feed-tag-ok {
    background: rgba(52, 211, 153, 0.10);
    color: #4ade80;
    border-color: rgba(52, 211, 153, 0.28);
}
.bf-feed-tag-bad {
    background: rgba(244, 63, 94, 0.10);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.30);
}
.bf-feed-tag-pend {
    background: rgba(251, 191, 36, 0.10);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.30);
}
.bf-feed-time,
.bf-feed-cm {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}
.bf-feed-cm { color: #4ade80; font-weight: 600; }

/* ─── #2 PROMOTERS · gst.li page ─── */
.bf-promo-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bf-promo-av {
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 14px;
}
.bf-promo-id {
    flex: 1;
    line-height: 1.25;
    min-width: 0;
}
.bf-promo-id strong {
    display: block;
    font-family: var(--display, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    letter-spacing: -0.2px;
}
.bf-promo-id span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

.bf-promo-earn {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 12px;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.07), rgba(0, 194, 255, 0.02));
    border: 1px solid rgba(0, 194, 255, 0.18);
    border-radius: 12px;
    padding: 14px 16px;
}
.bf-promo-earn-v {
    display: block;
    font-family: var(--display, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 32px;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.8px;
}
.bf-promo-earn-v i {
    font-style: normal;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.55);
}
.bf-promo-spark {
    width: 100%;
    height: 44px;
    display: block;
}

.bf-promo-q {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
}

.bf-promo-pay {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.bf-promo-pay-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(0, 194, 255, 0.10);
    color: #5fd6ff;
}
.bf-promo-pay-t {
    flex: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}
.bf-promo-pay-t strong { color: #fff; font-weight: 600; }

/* ─── #3 GROUPS · Group HQ ─── */
.bf-grp-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
}
.bf-grp-sum-row {
    display: flex;
    gap: 22px;
    margin-top: 4px;
}
.bf-grp-sum-row > div {
    line-height: 1.15;
}
.bf-grp-sum-row strong {
    display: block;
    font-family: var(--display, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 22px;
    color: #fff;
    letter-spacing: -0.4px;
}
.bf-grp-sum-row em {
    font-style: normal;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 2px;
    display: block;
}

.bf-venues {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.bf-venue {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
}
.bf-venue-h {
    display: grid;
    grid-template-columns: 28px 1fr 12px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.bf-venue-h > div { line-height: 1.2; min-width: 0; }
.bf-venue-h strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}
.bf-venue-h em {
    font-style: normal;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
}
.bf-venue-tag {
    width: 28px; height: 28px;
    border-radius: 8px;
    font-size: 12px;
}
.bf-venue-tag[data-v="m"] { background: linear-gradient(135deg, #4a5dff, #6a40ff); }
.bf-venue-tag[data-v="o"] { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.bf-venue-tag[data-v="h"] { background: linear-gradient(135deg, #f472b6, #ec4899); }
.bf-venue-tag[data-v="d"] { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }
.bf-status {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}
.bf-status-warn {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
.bf-venue-bar {
    height: 4px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 6px;
}
.bf-venue-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #00c2ff, #5fd6ff);
    border-radius: 100px;
}
.bf-venue-bar-warn > span {
    background: linear-gradient(90deg, #fbbf24, #f97316);
}
.bf-venue-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
}
.bf-venue-foot b {
    color: #fff;
    font-weight: 600;
}

.bf-grp-roles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}
.bf-roles-l {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.bf-roles-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bf-role {
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-weight: 600;
    white-space: nowrap;
}
.bf-role-own  { background: rgba(0, 194, 255, 0.10);  color: #5fd6ff; border-color: rgba(0, 194, 255, 0.28); }
.bf-role-mgr  { background: rgba(168, 85, 247, 0.10); color: #c4b5fd; border-color: rgba(168, 85, 247, 0.28); }
.bf-role-door { background: rgba(52, 211, 153, 0.10); color: #4ade80; border-color: rgba(52, 211, 153, 0.28); }
.bf-role-prom { background: rgba(244, 114, 182, 0.10); color: #f472b6; border-color: rgba(244, 114, 182, 0.28); }

/* ─── Mobile cleanups for the mocks ─── */
@media (max-width: 768px) {
    .bf-mock { font-size: 12px; }
    .bf-mock-bar-c { display: none; }
    .bf-mock-body { padding: 14px; gap: 12px; }
    .bf-cap-num strong { font-size: 24px; }
    .bf-promo-earn { grid-template-columns: 1fr; }
    .bf-promo-spark { display: none; }
    .bf-grp-sum-row { gap: 14px; flex-wrap: wrap; }
    .bf-grp-sum-row strong { font-size: 18px; }
    .bf-venues { grid-template-columns: 1fr; }
    .bf-feed-list li { grid-template-columns: 24px 1fr auto; }
    .bf-feed-time, .bf-feed-cm { display: none; }
    .bf-feed-list li .bf-feed-time,
    .bf-feed-list li .bf-feed-cm { display: inline; }
}

/* ════════════════════════════════════════════════════════════
   NUMBERS
   ════════════════════════════════════════════════════════════ */

.numbers {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
    background: var(--bg-elevated);
    position: relative;
    overflow: hidden;
}

.numbers::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px; height: 400px;
    background: radial-gradient(ellipse, rgba(0, 194, 255, 0.06), transparent 65%);
    pointer-events: none;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
    position: relative;
}

.num-card {
    padding: 48px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: all 0.4s var(--ease);
}

.num-card:hover {
    border-color: var(--border-light);
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.num-value {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 64px);
    color: var(--white);
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #fff 30%, rgba(0, 194, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.num-label {
    display: block;
    font-size: 14px;
    color: var(--text-2);
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════════════════ */

.testimonials {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
}

.test-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 12px 0 64px;
    max-width: 760px;
}

.test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.test-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 40px 36px;
    position: relative;
    transition: all 0.4s var(--ease);
    display: flex;
    flex-direction: column;
}

.test-card:hover {
    border-color: var(--border-light);
    transform: translateY(-4px);
}

.test-card-feature {
    background: linear-gradient(180deg, var(--bg-card), rgba(0, 194, 255, 0.04));
    border-color: var(--accent-soft);
}

.test-quote {
    font-family: var(--serif);
    font-size: 64px;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 12px;
    height: 32px;
    overflow: hidden;
}

.test-card blockquote {
    font-size: 17px;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 32px;
    flex: 1;
    font-weight: 400;
}

.test-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.test-avatar {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card-hover));
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.test-avatar-1 { background: linear-gradient(135deg, #00c2ff, #635bff); }
.test-avatar-2 { background: linear-gradient(135deg, #ff5e8a, #b794f6); }
.test-avatar-3 { background: linear-gradient(135deg, #f59e0b, #ff5e8a); }

.test-author strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.test-author span {
    font-size: 12px;
    color: var(--text-3);
}

/* ════════════════════════════════════════════════════════════
   INTEGRATIONS
   ════════════════════════════════════════════════════════════ */

.integrations {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.int-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 48px);
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 12px 0 56px;
}

.int-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

.int-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: all 0.4s var(--ease);
}

.int-card:hover {
    border-color: var(--border-light);
    transform: translateY(-4px);
    background: var(--bg-card-hover);
}

.int-logo {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--c);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 4px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--c) 30%, transparent);
}

.int-card strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.int-card span {
    font-size: 12px;
    color: var(--text-3);
}

/* ════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════ */

.faq {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
}

.faq-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.faq-head {
    position: sticky;
    top: 100px;
}

.faq-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 12px 0 16px;
}

.faq-sub {
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.6;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
}

.faq-item[open] {
    border-color: var(--border-light);
    background: var(--bg-card-hover);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    transition: color 0.3s;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--white); }

.faq-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-2);
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
    font-weight: 300;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

.faq-body {
    padding: 0 26px 24px;
}

.faq-body p {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.65;
}

.faq-body strong { color: var(--text); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   CTA
   ════════════════════════════════════════════════════════════ */

.cta-bottom {
    position: relative;
    padding: 180px 0;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.cta-aurora {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px; height: 600px;
    background: radial-gradient(ellipse, rgba(0, 194, 255, 0.18), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    animation: auroraDrift 16s ease-in-out infinite alternate;
}

.cta-aurora-2 {
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(0, 194, 255, 0.06), transparent 65%);
    animation-direction: alternate-reverse;
    animation-duration: 20s;
}

.cta-inner {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 88px);
    letter-spacing: -2.5px;
    line-height: 1.0;
    margin: 12px 0 24px;
}

.cta-sub {
    font-size: 19px;
    color: var(--text-2);
    margin-bottom: 48px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */

.footer {
    position: relative;
    border-top: 1px solid var(--border);
    background: var(--bg);
    overflow: hidden;
    isolation: isolate;
}

/* ════════════════════════════════════════════════════════════
   FOOTER STAGE RIG  —  mirror of the hero nightclub-bg.
   Same beams, same swing animations, same colour palette,
   but originating from the BOTTOM and shining UP, so the page
   feels bookended: ceiling lights at the top, floor lights at
   the bottom.
   ════════════════════════════════════════════════════════════ */

/* Cyan glow on the divider — like the lights are leaking through. */
.footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 90%);
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 194, 255, 0.95) 50%,
        transparent 100%);
    filter: blur(1px);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 24px rgba(0, 194, 255, 0.5);
}

.footer-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* All beams swing from the floor (bottom center). */
.footer-stage > div {
    position: absolute;
    transform-origin: bottom center;
    pointer-events: none;
    will-change: transform, opacity;
}

/* --- CENTER SPOTLIGHTS (rising from floor) --- */
.fs-center-main {
    bottom: 0;
    left: 50%;
    width: 360px;
    height: 100%;
    transform: translateX(-50%);
    opacity: 0.5;
    background: linear-gradient(
        0deg,
        rgba(191, 219, 254, 0.7) 0%,
        rgba(147, 197, 253, 0.5) 22%,
        rgba(59, 130, 246, 0.3) 55%,
        transparent 100%
    );
    filter: blur(55px);
    animation: fsCenterMain 4s linear infinite;
}

@keyframes fsCenterMain {
    0%   { transform: translateX(-50%) rotate(-5deg); opacity: 0.4;  }
    25%  { transform: translateX(-50%) rotate(8deg);  opacity: 0.55; }
    50%  { transform: translateX(-50%) rotate(-3deg); opacity: 0.45; }
    75%  { transform: translateX(-50%) rotate(6deg);  opacity: 0.5;  }
    100% { transform: translateX(-50%) rotate(-5deg); opacity: 0.4;  }
}

.fs-center-secondary {
    bottom: 0;
    left: 50%;
    width: 250px;
    height: 100%;
    transform: translateX(-50%);
    opacity: 0.55;
    background: linear-gradient(
        0deg,
        rgba(219, 234, 254, 0.7) 0%,
        rgba(191, 219, 254, 0.6) 18%,
        rgba(96, 165, 250, 0.4) 45%,
        transparent 100%
    );
    filter: blur(38px);
    animation: fsCenterSecondary 3.5s linear infinite;
}

@keyframes fsCenterSecondary {
    0%   { transform: translateX(-50%) rotate(3deg);  opacity: 0.45; }
    25%  { transform: translateX(-50%) rotate(-4deg); opacity: 0.6;  }
    50%  { transform: translateX(-50%) rotate(5deg);  opacity: 0.5;  }
    75%  { transform: translateX(-50%) rotate(-2deg); opacity: 0.55; }
    100% { transform: translateX(-50%) rotate(3deg);  opacity: 0.45; }
}

/* --- SIDE SPOTLIGHTS --- */
.fs-side-left,
.fs-side-right {
    bottom: 0;
    width: 150px;
    height: 100%;
    filter: blur(34px);
}

.fs-side-left {
    left: 10%;
    background: linear-gradient(
        0deg,
        rgba(59, 130, 246, 0.8) 0%,
        rgba(37, 99, 235, 0.35) 45%,
        transparent 100%
    );
    animation: fsSweepLeft 3.5s linear infinite;
}

@keyframes fsSweepLeft {
    0%   { transform: rotate(30deg);  opacity: 0.35; }
    25%  { transform: rotate(55deg);  opacity: 0.55; }
    50%  { transform: rotate(25deg);  opacity: 0.4;  }
    75%  { transform: rotate(60deg);  opacity: 0.5;  }
    100% { transform: rotate(30deg);  opacity: 0.35; }
}

.fs-side-right {
    right: 10%;
    background: linear-gradient(
        0deg,
        rgba(96, 165, 250, 0.85) 0%,
        rgba(59, 130, 246, 0.32) 45%,
        transparent 100%
    );
    animation: fsSweepRight 4s linear infinite;
}

@keyframes fsSweepRight {
    0%   { transform: rotate(-28deg); opacity: 0.32; }
    25%  { transform: rotate(-52deg); opacity: 0.52; }
    50%  { transform: rotate(-35deg); opacity: 0.4;  }
    75%  { transform: rotate(-50deg); opacity: 0.47; }
    100% { transform: rotate(-28deg); opacity: 0.32; }
}

/* --- MID LIGHTS --- */
.fs-mid-left,
.fs-mid-right {
    bottom: 0;
    width: 130px;
    height: 100%;
    filter: blur(36px);
}

.fs-mid-left {
    left: 28%;
    background: linear-gradient(
        0deg,
        rgba(147, 197, 253, 0.75) 0%,
        rgba(96, 165, 250, 0.3) 42%,
        transparent 100%
    );
    animation: fsMidLeft 3.2s linear infinite;
}

.fs-mid-right {
    right: 28%;
    background: linear-gradient(
        0deg,
        rgba(59, 130, 246, 0.78) 0%,
        rgba(37, 99, 235, 0.35) 44%,
        transparent 100%
    );
    animation: fsMidRight 3.8s linear infinite;
}

@keyframes fsMidLeft {
    0%   { transform: rotate(22deg);  opacity: 0.28; }
    25%  { transform: rotate(5deg);   opacity: 0.48; }
    50%  { transform: rotate(18deg);  opacity: 0.35; }
    75%  { transform: rotate(10deg);  opacity: 0.43; }
    100% { transform: rotate(22deg);  opacity: 0.28; }
}

@keyframes fsMidRight {
    0%   { transform: rotate(-18deg); opacity: 0.3;  }
    25%  { transform: rotate(-8deg);  opacity: 0.5;  }
    50%  { transform: rotate(-25deg); opacity: 0.38; }
    75%  { transform: rotate(-12deg); opacity: 0.45; }
    100% { transform: rotate(-18deg); opacity: 0.3;  }
}

/* --- HOTSPOT GLOW at the floor --- */
.fs-glow {
    bottom: -40px;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translateX(-50%);
    transform-origin: center center;
    border-radius: 50%;
    filter: blur(14px);
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.7),
        rgba(219, 234, 254, 0.7),
        transparent 70%
    );
    animation: fsGlowPulse 2.4s linear infinite;
}

@keyframes fsGlowPulse {
    0%   { transform: translateX(-50%) scale(1);    opacity: 0.55; }
    25%  { transform: translateX(-50%) scale(1.25); opacity: 0.75; }
    50%  { transform: translateX(-50%) scale(0.95); opacity: 0.6;  }
    75%  { transform: translateX(-50%) scale(1.2);  opacity: 0.7;  }
    100% { transform: translateX(-50%) scale(1);    opacity: 0.55; }
}

/* --- CEILING WASH (soft glow at top edge of footer) --- */
.fs-ceiling {
    top: 0;
    left: 50%;
    width: 700px;
    height: 220px;
    transform: translateX(-50%);
    transform-origin: top center;
    background: radial-gradient(
        ellipse at top,
        rgba(147, 197, 253, 0.45),
        rgba(59, 130, 246, 0.18),
        transparent 70%
    );
    filter: blur(50px);
    opacity: 0.45;
    animation: fsCeilingPulse 3.6s linear infinite;
}

@keyframes fsCeilingPulse {
    0%   { transform: translateX(-50%) scale(1);    opacity: 0.3;  }
    25%  { transform: translateX(-50%) scale(1.12); opacity: 0.5;  }
    50%  { transform: translateX(-50%) scale(0.95); opacity: 0.35; }
    75%  { transform: translateX(-50%) scale(1.1);  opacity: 0.45; }
    100% { transform: translateX(-50%) scale(1);    opacity: 0.3;  }
}

@media (prefers-reduced-motion: reduce) {
    .footer-stage > div { animation: none !important; }
}

@media (max-width: 768px) {
    .fs-side-left,
    .fs-side-right,
    .fs-mid-left,
    .fs-mid-right { display: none; }
    .fs-center-main  { width: 240px; }
    .fs-center-secondary { width: 170px; }
}

.footer > .container {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 56px;
    padding: 80px 0 56px;
}

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 16px;
    line-height: 0;
}
.footer-logo img {
    display: block;
    height: 26px;
    width: auto;
}

.footer-brand p {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.6;
    margin-bottom: 24px;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Social row under the status pill in the footer brand column */
.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover {
    color: #fff;
    transform: translateY(-2px);
}
/* LinkedIn brand blue on hover */
.footer-social a[data-social="linkedin"]:hover {
    background: #0a66c2;
    border-color: #0a66c2;
}
/* Instagram signature gradient on hover */
.footer-social a[data-social="instagram"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: #dc2743;
}
.footer-social svg { display: block; }

/* App store links — grouped by app, with iOS / Android store icons.
   One row per app; small square icon buttons sit to the right of
   the app name so the layout stays readable in the narrow footer
   brand column. */
.footer-apps {
    margin-top: 22px;
}
.footer-apps-label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-3);
    margin-bottom: 12px;
}
.footer-apps-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.footer-apps-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
    letter-spacing: -0.1px;
}
.footer-apps-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-apps-row a:hover {
    transform: translateY(-1px);
}
/* Apple App Store — black background, white glyph */
.footer-apps-row a[data-store="ios"]:hover {
    background: #000;
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}
/* Google Play — Google green (matches Play Store branding) */
.footer-apps-row a[data-store="android"]:hover {
    background: #34a853;
    border-color: #34a853;
    color: #fff;
}
.footer-apps-row svg { display: block; }

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-col h4 {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-3);
    margin-bottom: 8px;
}

.footer-col a {
    font-size: 14px;
    color: var(--text-2);
    transition: color 0.2s;
}

.footer-col a:hover { color: var(--white); }

.footer-line {
    border-top: 1px solid var(--border);
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-3);
}

/* ════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════════════════════ */

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   JOURNEY RAIL - vertical spine connecting product chapters
   Inspired by Railway's left-hand timeline. Each .chapter-rail
   gets a marker (time + label) auto-positioned by JS.
   ════════════════════════════════════════════════════════════ */
.journey {
    position: relative;
}

.journey-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(28px, calc(50vw - 600px));
    width: 28px;
    pointer-events: none;
    z-index: 5;
    display: none; /* shown at >= 1180px */
}
@media (min-width: 1180px) {
    .journey-rail { display: block; }
    .chapter-rail { padding-left: 0; }
}

.rail-track,
.rail-progress {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    border-radius: 1px;
}
.rail-track {
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 4%,
        rgba(255, 255, 255, 0.07) 96%,
        transparent 100%);
}
.rail-progress {
    height: 0;
    background: linear-gradient(180deg,
        rgba(0, 194, 255, 0.95) 0%,
        rgba(0, 194, 255, 0.55) 100%);
    box-shadow: 0 0 14px rgba(0, 194, 255, 0.5);
    transition: height 0.4s linear;
}

/* Chapter markers - created by JS, positioned at each chapter's top */
.chapter-rail {
    position: relative;
}

.rail-marker {
    position: absolute;
    top: 64px;
    left: max(28px, calc(50vw - 600px));
    width: 28px;
    height: 28px;
    pointer-events: none;
    z-index: 6;
    display: none;
}
@media (min-width: 1180px) {
    .rail-marker { display: block; }
}
.rail-marker-dot {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 4px rgba(10, 10, 24, 1);
    transition: border-color 0.4s, box-shadow 0.4s, background 0.4s;
}
.rail-marker.is-active .rail-marker-dot {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(10, 10, 24, 1), 0 0 18px rgba(0, 194, 255, 0.7);
}
.rail-marker.is-passed .rail-marker-dot {
    background: rgba(0, 194, 255, 0.4);
    border-color: rgba(0, 194, 255, 0.6);
}
.rail-marker-flag {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    background: rgba(8, 8, 26, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-3);
    white-space: nowrap;
    letter-spacing: 0.04em;
    transition: color 0.4s, border-color 0.4s;
}
.rail-marker-flag strong {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.rail-marker.is-active .rail-marker-flag {
    color: var(--text);
    border-color: rgba(0, 194, 255, 0.35);
    box-shadow: 0 0 24px rgba(0, 194, 255, 0.15);
}

/* ── Chapter chip eyebrows (Railway-style) ───────────────── */
.chapter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 22px;
    border: 1px solid;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.chapter-chip .chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* All chapter chips share the same cyan family - the only colour we use atmospherically. */
.chapter-chip-cyan,
.chapter-chip-violet,
.chapter-chip-magenta,
.chapter-chip-amber,
.chapter-chip-mint {
    background: rgba(0, 194, 255, 0.08);
    border-color: rgba(0, 194, 255, 0.25);
    color: #7dd3fc;
}
.chapter-chip-cyan .chip-dot,
.chapter-chip-violet .chip-dot,
.chapter-chip-magenta .chip-dot,
.chapter-chip-amber .chip-dot,
.chapter-chip-mint .chip-dot {
    background: #00c2ff;
    box-shadow: 0 0 8px rgba(0, 194, 255, 0.7);
}

/* ── Alternative-to row at the bottom of each chapter ───── */
.alt-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.alt-label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-4);
}
.alt-mark {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.3s;
}
.alt-mark:hover { color: rgba(255, 255, 255, 0.7); }

/* Guest Line section uses Delight, so override alt-mark font for cohesion */
.chapter-guestline .alt-mark {
    font-family: 'Delight', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* ════════════════════════════════════════════════════════════
   PAYOUTS · Campaigns & settlement (.chapter-payouts / .po-*)
   Two-stage flow: Build the campaign → Settle the night
   ════════════════════════════════════════════════════════════ */
.chapter-payouts {
    border-bottom: 1px solid var(--border);
}

.po-flow {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 24px;
}

.po-stage-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
    max-width: 720px;
}
.po-stage-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(0, 194, 255, 0.08);
    border: 1px solid rgba(0, 194, 255, 0.22);
    color: #5fd6ff;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.po-stage-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(22px, 2.3vw, 28px);
    letter-spacing: -0.6px;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--text);
}
.po-stage-sub {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
}

/* Connector chip between the two stages */
.po-connect {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    color: var(--text-3);
}
.po-connect-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.18), transparent);
}
.po-connect-chip {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Shared mock chrome ─── */
.po-mock {
    background: linear-gradient(180deg, #0d1020 0%, #07091a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 28px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.po-mock-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.po-mock-bar-l { display: flex; gap: 5px; }
.po-mock-bar-c {
    flex: 1;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.42);
    text-transform: lowercase;
}
.po-mock-bar-r {
    display: flex;
    justify-content: flex-end;
    min-width: 110px;
}
.po-mock-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}
.po-mock-dot-r { background: #ff6058; }
.po-mock-dot-y { background: #ffbd2e; }
.po-mock-dot-g { background: #28ca42; }

.po-mock-body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ─── Pills + checks shared between stages ─── */
.po-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}
.po-pill-mint {
    background: rgba(52, 211, 153, 0.10);
    border-color: rgba(52, 211, 153, 0.30);
    color: #4ade80;
}
.po-pill-pend {
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.30);
    color: #fbbf24;
}
.po-pill-ghost { color: rgba(255, 255, 255, 0.55); }
.po-pill-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: poPulse 1.6s ease-in-out infinite;
}
@keyframes poPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

.po-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
}
.po-check-ok {
    background: rgba(52, 211, 153, 0.12);
    color: #4ade80;
    border: 1px solid rgba(52, 211, 153, 0.32);
}
.po-check-warn {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.32);
}

/* Avatar palette reused between roster + table */
.po-rost-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #4a5dff, #6a40ff);
}
.po-rost-av-sm { width: 24px; height: 24px; font-size: 9.5px; }
.po-rost-av[data-c="a"] { background: linear-gradient(135deg, #f472b6, #ec4899); }
.po-rost-av[data-c="d"] { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.po-rost-av[data-c="e"] { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.po-rost-av[data-c="g"] { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }

/* ════════════════════════════════════════════════════════════
   STAGE 01 · Build the campaign
   ════════════════════════════════════════════════════════════ */
.po-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.po-step-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.po-field {
    display: flex;
    align-items: center;
    gap: 12px;
}
.po-field-l {
    width: 96px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.po-field-input {
    flex: 1;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
}

.po-rule {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(0, 194, 255, 0.04);
    border: 1px solid rgba(0, 194, 255, 0.18);
    border-radius: 12px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
}
.po-rule-amt {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}
.po-rule-pill {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}
.po-add {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--mono);
}
.po-add em { font-style: normal; color: rgba(255, 255, 255, 0.32); }

.po-event {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
.po-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 12px;
    background: rgba(0, 194, 255, 0.08);
    border: 1px solid rgba(0, 194, 255, 0.2);
    line-height: 1;
}
.po-event-date strong {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.po-event-date em {
    display: block;
    font-style: normal;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #5fd6ff;
    margin-top: 3px;
}
.po-event-meta { line-height: 1.3; min-width: 0; }
.po-event-meta strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}
.po-event-meta span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--mono);
}

.po-rost {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.po-rost li {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.po-rost-name {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
}
.po-rost-name em {
    font-style: normal;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
    font-weight: 400;
}
.po-rost-rule {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.po-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.po-actions-l {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--mono);
    line-height: 1.4;
}

.po-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: default;
    white-space: nowrap;
    border: 1px solid transparent;
}
.po-btn-primary {
    background: var(--accent);
    color: #001218;
    border-color: var(--accent);
    box-shadow: 0 0 18px rgba(0, 194, 255, 0.28);
}
.po-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════
   STAGE 02 · Settle the night
   ════════════════════════════════════════════════════════════ */
.po-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: end;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.06), rgba(0, 194, 255, 0.01));
    border: 1px solid rgba(0, 194, 255, 0.18);
    border-radius: 14px;
}
.po-summary-tag {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}
.po-summary-num {
    font-family: var(--sans);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.po-summary-num strong {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1.2px;
}
.po-summary-num em {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 2px;
}
.po-summary-meta {
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--mono);
}
.po-summary-r {
    display: flex;
    gap: 14px;
}
.po-mini { line-height: 1.2; text-align: right; }
.po-mini span {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}
.po-mini strong {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.po-table {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}
.po-table-head,
.po-table-row,
.po-table-foot {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 0.9fr 0.6fr 0.6fr;
    gap: 12px;
    align-items: center;
    padding: 11px 16px;
}
.po-table-head {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.po-table-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s;
}
.po-table-row:last-of-type { border-bottom: none; }
.po-table-row:hover { background: rgba(255, 255, 255, 0.02); }
.po-table-row-warn {
    background: rgba(251, 191, 36, 0.04);
}
.po-table-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
}
.po-table-c {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--mono);
    text-align: center;
}
.po-table-amt {
    color: #fff;
    font-weight: 600;
    text-align: right;
}
.po-table-foot {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    grid-template-columns: 1fr auto;
    font-family: var(--mono);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
}
.po-table-foot strong {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.po-payout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.po-payout-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.25s, background 0.25s;
}
.po-payout-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}
.po-payout-h {
    display: flex;
    align-items: center;
    gap: 12px;
}
.po-payout-h > div { line-height: 1.3; min-width: 0; }
.po-payout-h strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}
.po-payout-h em {
    font-style: normal;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}
.po-payout-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}
.po-payout-mark-xero {
    background: rgba(19, 181, 234, 0.10);
    color: #13b5ea;
    border: 1px solid rgba(19, 181, 234, 0.28);
}
.po-payout-mark-aba {
    background: rgba(0, 194, 255, 0.10);
    color: #5fd6ff;
    border: 1px solid rgba(0, 194, 255, 0.28);
}

/* ─── Trust strip below the flow ─── */
.po-trust {
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.po-trust li {
    padding: 22px 24px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.po-trust li:last-child { border-right: none; }
.po-trust strong {
    font-family: var(--display);
    font-weight: 500;
    font-size: 16px;
    color: var(--text);
    letter-spacing: -0.2px;
}
.po-trust span {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.5;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .po-payout { grid-template-columns: 1fr; }
    .po-summary { grid-template-columns: 1fr; align-items: flex-start; }
    .po-summary-r { justify-content: flex-start; }
    .po-table-head,
    .po-table-row { grid-template-columns: 1.4fr 0.6fr 0.9fr 0.5fr 0.5fr; gap: 8px; }
    .po-trust { grid-template-columns: repeat(2, 1fr); }
    .po-trust li:nth-child(2) { border-right: none; }
    .po-trust li:nth-child(1),
    .po-trust li:nth-child(2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 700px) {
    .po-mock-bar-c { display: none; }
    .po-mock-body { padding: 16px; gap: 14px; }
    .po-stage-head { gap: 12px; margin-bottom: 16px; }
    .po-stage-num { width: 36px; height: 36px; font-size: 12px; }
    .po-rule { font-size: 12.5px; }
    .po-rule-amt { font-size: 16px; }
    .po-event { grid-template-columns: 48px 1fr; }
    .po-event > .po-pill { grid-column: 1 / -1; justify-self: flex-start; }
    .po-rost li { grid-template-columns: 28px 1fr auto; }
    .po-rost-rule { display: none; }
    .po-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .po-actions-l { text-align: center; }
    .po-summary-num strong { font-size: 30px; }
    .po-table-head { display: none; }
    .po-table-row,
    .po-table-foot { grid-template-columns: 1fr auto; gap: 6px; padding: 12px 14px; }
    .po-table-row .po-table-c:not(.po-table-amt) { display: none; }
    .po-table-name { font-size: 13px; }
    .po-trust { grid-template-columns: 1fr; }
    .po-trust li { border-right: none; border-bottom: 1px solid var(--border); }
    .po-trust li:last-child { border-bottom: none; }
    .po-connect-chip { font-size: 10px; padding: 5px 10px; }
}
.chapter-guestline .alt-row { border-top-color: rgba(255, 255, 255, 0.10); }

/* ════════════════════════════════════════════════════════════
   LED DEPARTURE BOARD - branded stats moment
   Train-station / club-LED-matrix display showing platform numbers.
   ════════════════════════════════════════════════════════════ */
.led-board {
    padding: 140px 0 120px;
    background: linear-gradient(180deg, var(--bg) 0%, #050511 100%);
    position: relative;
    overflow: hidden;
}
.led-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 30%, rgba(0, 194, 255, 0.07), transparent 60%);
    pointer-events: none;
}

.led-container { position: relative; z-index: 1; }

.led-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.led-title {
    font-family: var(--display);
    font-size: clamp(32px, 4.4vw, 54px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 16px 0 18px;
    color: var(--text);
}
.led-head { max-width: 820px; }
.led-title em {
    font-style: normal;
    background: linear-gradient(180deg, #6e87ff, #3a5cff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
.led-cursor {
    display: inline-block;
    width: 0.5em;
    height: 0.85em;
    background: rgba(0, 194, 255, 0.85);
    margin-left: 0.1em;
    vertical-align: -0.05em;
    animation: ledBlink 1s steps(2) infinite;
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.6);
}
@keyframes ledBlink {
    50% { opacity: 0; }
}
.led-sub {
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.5;
}

/* The display itself - bezel + matrix + scanlines */
.led-display {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 0 80px rgba(0, 194, 255, 0.08);
}
.led-bezel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.45);
}
.led-bezel-foot {
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(0deg, #1a1a1a 0%, #0e0e0e 100%);
}
.led-bezel-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
    animation: pulse 2s infinite;
}
.led-bezel-text {
    flex: 1;
    text-align: center;
}
.led-bezel-time,
.led-bezel-status {
    color: rgba(0, 194, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

/* The matrix - rows of dot-matrix style numbers */
.led-matrix {
    padding: 8px 0;
    background:
        linear-gradient(180deg, #060606 0%, #020202 100%);
    background-image:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0) 1px,
            rgba(255, 255, 255, 0.012) 1px,
            rgba(255, 255, 255, 0.012) 2px);
}
.led-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 14px 28px;
    gap: 28px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.led-row:last-child { border-bottom: none; }

.led-row-label {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 194, 255, 0.6);
    letter-spacing: 0.14em;
    text-shadow: 0 0 8px rgba(0, 194, 255, 0.25);
}
.led-row-value {
    font-family: var(--mono);
    font-size: clamp(22px, 3.6vw, 38px);
    font-weight: 700;
    color: #7be4ff;
    letter-spacing: 0.02em;
    text-shadow:
        0 0 8px rgba(0, 194, 255, 0.55),
        0 0 18px rgba(0, 194, 255, 0.25);
    font-variant-numeric: tabular-nums;
    text-align: right;
    transition: color 0.2s;
}
.led-row-value.is-flicker {
    animation: ledFlicker 0.4s ease-out;
}
@keyframes ledFlicker {
    0%   { color: #fff;    text-shadow: 0 0 12px #fff, 0 0 24px rgba(0, 194, 255, 0.8); }
    100% { color: #7be4ff; text-shadow: 0 0  8px rgba(0, 194, 255, 0.55), 0 0 18px rgba(0, 194, 255, 0.25); }
}

/* CRT scanline + glare overlays */
.led-scanlines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.18) 2px,
        rgba(0, 0, 0, 0.18) 3px);
    pointer-events: none;
    mix-blend-mode: multiply;
}
.led-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 30% at 50% 0%,
        rgba(255, 255, 255, 0.04),
        transparent 60%);
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   WRISTBAND CTA - door-pass closing capsule
   ════════════════════════════════════════════════════════════ */
.wristband {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    margin-top: 56px;
    border-radius: 6px;
    background: linear-gradient(180deg, #f5f3ed 0%, #ddd9cf 100%);
    color: #0a0a18;
    overflow: hidden;
    text-decoration: none;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;
    transform: rotate(-1.5deg);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--mono);
}
.wristband:hover {
    transform: rotate(0) translateY(-2px);
}

/* Perforated edges (the tear-strip dots) */
.wristband-perf {
    width: 8px;
    flex-shrink: 0;
    background-image: radial-gradient(circle at 50% 50%,
        rgba(10, 10, 24, 0.3) 1.5px,
        transparent 2px);
    background-size: 8px 8px;
    background-repeat: repeat-y;
    background-position: center top;
}

/* Holographic gradient strip on the left */
.wristband-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        #ec4899 0%,
        #a78bfa 35%,
        #00c2ff 70%,
        #fbbf24 100%);
    background-size: 200% 200%;
    animation: holoShift 6s ease-in-out infinite;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border-right: 1px dashed rgba(0, 0, 0, 0.25);
}
@keyframes holoShift {
    0%, 100% { background-position: 0 0; }
    50%      { background-position: 100% 100%; }
}
.wristband-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    animation: pulse 2s infinite;
}
.wristband-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
}

/* Main body - name + meta */
.wristband-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 16px 22px;
    background-image:
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent 14px,
            rgba(10, 10, 24, 0.04) 14px,
            rgba(10, 10, 24, 0.04) 15px);
}
.wristband-name {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    color: #0a0a18;
    letter-spacing: -0.3px;
}
.wristband-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wristband-tag {
    display: inline-block;
    padding: 2px 7px;
    background: #0a0a18;
    color: #f5f3ed;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    border-radius: 2px;
}
.wristband-arrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #0a0a18;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.wristband-arrow svg {
    transition: transform 0.3s;
}
.wristband:hover .wristband-arrow svg {
    transform: translateX(3px);
}

/* Holographic shimmer overlay */
.wristband-holo {
    position: absolute;
    top: 0; left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%);
    pointer-events: none;
    animation: wristbandShimmer 4s ease-in-out infinite;
}
@keyframes wristbandShimmer {
    0%, 100% { left: -50%; }
    60%, 100% { left: 150%; }
}

.chapter-grid > .chap-card { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.chapter-grid.visible > .chap-card { opacity: 1; transform: translateY(0); }
.chapter-grid.visible > .chap-card:nth-child(2) { transition-delay: 0.08s; }
.chapter-grid.visible > .chap-card:nth-child(3) { transition-delay: 0.16s; }
.chapter-grid.visible > .chap-card:nth-child(4) { transition-delay: 0.24s; }
.chapter-grid.visible > .chap-card:nth-child(5) { transition-delay: 0.32s; }

.growth-cards > .g-card { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.growth-cards.visible > .g-card { opacity: 1; transform: translateY(0); }
.growth-cards.visible > .g-card:nth-child(2) { transition-delay: 0.1s; }
.growth-cards.visible > .g-card:nth-child(3) { transition-delay: 0.2s; }

.test-grid > .test-card { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.test-grid.visible > .test-card { opacity: 1; transform: translateY(0); }
.test-grid.visible > .test-card:nth-child(2) { transition-delay: 0.1s; }
.test-grid.visible > .test-card:nth-child(3) { transition-delay: 0.2s; }

.numbers-grid > .num-card { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.numbers-grid.visible > .num-card { opacity: 1; transform: translateY(0); }
.numbers-grid.visible > .num-card:nth-child(2) { transition-delay: 0.08s; }
.numbers-grid.visible > .num-card:nth-child(3) { transition-delay: 0.16s; }
.numbers-grid.visible > .num-card:nth-child(4) { transition-delay: 0.24s; }

.int-grid > .int-card { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.int-grid.visible > .int-card { opacity: 1; transform: translateY(0); }
.int-grid.visible > .int-card:nth-child(2) { transition-delay: 0.05s; }
.int-grid.visible > .int-card:nth-child(3) { transition-delay: 0.10s; }
.int-grid.visible > .int-card:nth-child(4) { transition-delay: 0.15s; }
.int-grid.visible > .int-card:nth-child(5) { transition-delay: 0.20s; }
.int-grid.visible > .int-card:nth-child(6) { transition-delay: 0.25s; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .nav-links { display: none; }
    .nav-ticker { display: none; }

    .chapter-grid { grid-template-columns: repeat(4, 1fr); }
    .chap-card { grid-column: span 2; }
    .chap-card-lg { grid-column: span 4; }

    .data-grid { grid-template-columns: 1fr; }
    .data-grid-v2 { grid-template-columns: 1fr; gap: 28px; }
    .data-main, .data-segments, .data-side, .data-showcase-stack {
        grid-column: 1; grid-row: auto;
    }
    .data-main-img { aspect-ratio: 16 / 10; }
    /* Sticky segments column unsticks on tablet/mobile so the
       order reads top-to-bottom in normal flow. */
    .data-segments { position: static; }
    .data-showcase img { border-radius: 18px; }
    .data-showcase-cap h4 { font-size: 19px; }

    .int-grid { grid-template-columns: repeat(3, 1fr); }

    .faq-container { grid-template-columns: 1fr; gap: 48px; }
    .faq-head { position: static; }

    .canvas-stats { grid-template-columns: 1fr 1fr; }
    .cstat-feature { grid-column: 1 / -1; }
    .cstat-bar { grid-column: 1 / -1; }
    .cstat-value { font-size: 22px; }
    .cstat-feature .cstat-value { font-size: 32px; }
    .canvas-body { grid-template-columns: 1fr; }
    .canvas-feed { min-height: 0; }
    .canvas-capacity { width: 180px; }
    .canvas-event-title { font-size: 18px; }

    .door-stage {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
    .door-arrow { display: none; }
}

@media (max-width: 820px) {
    .nav-toggle { display: flex; }
    .nav-mobile.open { display: flex; }
    .nav-right .nav-cta { display: none; }
    /* Hide desktop login pill on phones — the slide-down menu has
       its own full-width Log in entry, no need to also cram the
       pill next to the hamburger. */
    .nav-right .nav-login { display: none; }

    .container { padding: 0 20px; }

    .hero { padding: 110px 18px 0; }
    .hero-title { letter-spacing: -1.5px; }
    .hero-pill { font-size: 11.5px; padding: 7px 14px; max-width: calc(100vw - 40px); }
    .hero-pill-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hero-sub br { display: none; }
    .hero-sub { font-size: 15.5px; padding: 0 6px; }
    .hero-actions { gap: 10px; width: 100%; }
    .hero-actions .btn { flex: 1; min-width: 140px; justify-content: center; }
    .hero-trust { margin-top: 40px; gap: 10px; }
    .hero-trust-label { font-size: 9.5px; letter-spacing: 0.16em; }
    .hero-trust-row { gap: 12px; }
    .hero-trust-mark { font-size: 13px; letter-spacing: 0.05em; }
    .hero-trust-dot { width: 2.5px; height: 2.5px; }
    .hero-aurora-3 { display: none; }
    .hero-proof { gap: 12px; flex-direction: column; padding-bottom: 60px; }
    .proof-dot { display: none; }

    .hero-canvas-wrap { margin-top: 48px; }
    .hero-phone { display: none; }

    .door-section { padding: 90px 0 100px; }
    .door-head { margin-bottom: 56px; }
    .door-stage { grid-template-columns: 1fr; gap: 60px; max-width: 320px; }
    .door-phone-1 .iphone, .door-phone-2 .iphone, .door-phone-3 .iphone { transform: rotate(0); }
    .door-phone-1.is-active .iphone, .door-phone-3.is-active .iphone { transform: rotate(0) scale(1.02); }
    .door-phone-2.is-active .iphone { transform: rotate(0) scale(1.02); }
    .door-foot { grid-template-columns: 1fr 1fr; margin-top: 60px; }
    .dfoot-stat strong { font-size: 22px; }

    /* ───── Hero dashboard → fixed rectangle preview on mobile ─────
       Instead of restructuring the desktop dashboard (which produces a
       very tall scrolling stack), we render it at full desktop width
       inside a scaler that's scaled down to fit the viewport. The wrap
       gets a fixed aspect ratio so it looks like a single rectangular
       screenshot of the live app. */
    .hero-canvas-wrap {
        perspective: none;
        overflow: hidden;
        border-radius: 14px;
    }
    .hero-canvas-scaler {
        display: block;
        width: 1180px;
        transform-origin: top left;
        /* JS sets transform + container height precisely; this is fallback */
        transform: scale(0.3);
    }
    .hero-canvas {
        width: 1180px;
        max-width: 1180px;
    }

    .marquee-section { padding: 40px 0 44px; }
    .venue-cloud { gap: 32px 40px; padding: 0 16px; }
    .venue-logo { height: 28px; max-width: 120px; }
    .venue-logo.is-icon { height: 36px; }

    /* New components - mobile */
    .alt-row { gap: 12px 18px; margin-top: 48px; padding-top: 18px; }
    .alt-label { font-size: 10px; letter-spacing: 0.14em; }
    .alt-mark { font-size: 12px; letter-spacing: 0.05em; }

    .led-board { padding: 90px 0 80px; }
    .led-head { margin-bottom: 36px; padding: 0 6px; }
    .led-display { border-radius: 10px; }
    .led-bezel { padding: 9px 14px; font-size: 9px; letter-spacing: 0.12em; }
    .led-bezel-text { font-size: 8.5px; }
    .led-row { padding: 11px 16px; gap: 14px; grid-template-columns: 1fr auto; }
    .led-row-label { font-size: 10.5px; letter-spacing: 0.1em; }
    .led-row-value { font-size: 19px; }

    .wristband { transform: rotate(-1deg); margin-top: 40px; max-width: 100%; }
    .wristband-name { font-size: 16px; }
    .wristband-body { padding: 13px 16px; gap: 5px; }
    .wristband-meta { gap: 10px; flex-wrap: wrap; }
    .wristband-strip { padding: 12px 12px; }
    .wristband-eyebrow { font-size: 8.5px; }

    .chapter { padding: 100px 0 80px; }
    .chapter-head { margin-bottom: 56px; }

    .chapter-grid { grid-template-columns: 1fr; }
    .chap-card, .chap-card-lg { grid-column: span 1; }

    .growth-feature, .growth-feature-reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .growth-feature-reverse .phone-frame { order: 0; }

    .growth-cards { grid-template-columns: 1fr; }

    .bf-panel { padding: 32px 24px; grid-template-columns: 1fr; gap: 32px; }

    .numbers-grid { grid-template-columns: repeat(2, 1fr); }

    .test-grid { grid-template-columns: 1fr; }

    .int-grid { grid-template-columns: repeat(2, 1fr); }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

    .cta-bottom { padding: 120px 0; }

    .flywheel { width: 92vw; height: 92vw; }
    /* Pull the orbit radius in so 130px-wide cards stay inside the
       viewport on 360-430px phones (was translateX(36vw), which made
       the left/right cards clip on the smallest screens). */
    .fw-node { width: 128px; transform: rotate(var(--angle)) translateX(30vw) rotate(calc(-1 * var(--angle))) translate(-50%, -50%); }
    .fw-node-inner { padding: 10px 12px; }
    .fw-node-text { font-size: 11.5px; }
    .fw-node-num { font-size: 10px; margin-bottom: 4px; }
    .fw-node-stat { font-size: 9.5px; margin-top: 6px; padding-top: 6px; }
    .fw-node-stat strong { font-size: 11px; }
    .flywheel-core { width: 140px; height: 140px; }
    .flywheel-core-cycle { font-size: 26px; margin: 3px 0 4px; }
    .flywheel-core-cycle-label { font-size: 8.5px; letter-spacing: 2px; }
    .flywheel-core-tick { font-size: 8.5px; letter-spacing: 1px; }
    /* Cut the loop's vertical padding on phones/tablets so the
       flywheel doesn't sit in a giant empty section. */
    .loop { padding: 100px 0 120px; }
    .loop-sub { margin-bottom: 50px; }
}

/* Sub-480 tightening for the cycle.
   Constraints on a 360px viewport (worst common case):
     container        = 92vw         = 331px   (half = 165)
     translateX       = 32vw         = 115px
     node half        = 100/2        = 50px
     node far edge    = 115 + 50     = 165   = container edge       ✓
     centre disk half = 100/2        = 50px
     node near edge   = 115 - 50     = 65   > 50 (15px from centre)  ✓ */
@media (max-width: 480px) {
    .loop { padding: 80px 0 100px; }
    .loop-sub { margin-bottom: 40px; }

    .flywheel { width: 92vw; height: 92vw; }
    .fw-node {
        width: 100px;
        transform: rotate(var(--angle)) translateX(32vw) rotate(calc(-1 * var(--angle))) translate(-50%, -50%);
    }
    .fw-node-inner { padding: 8px 9px; border-radius: 12px; }
    .fw-node-text { font-size: 10.5px; line-height: 1.3; }
    .fw-node-num { font-size: 9px; margin-bottom: 3px; letter-spacing: 1px; }
    .fw-node-stat { font-size: 8.5px; margin-top: 4px; padding-top: 4px; }
    .fw-node-stat strong { font-size: 10px; display: block; }
    .flywheel-core { width: 100px; height: 100px; }
    .flywheel-core-cycle { font-size: 20px; margin: 2px 0 3px; }
    .flywheel-core-cycle-label { font-size: 8px; letter-spacing: 1.5px; }
    .flywheel-core-tick { font-size: 7.5px; letter-spacing: 0.5px; }
}

@media (max-width: 480px) {
    .hero { padding: 96px 16px 0; }
    .hero-title { font-size: 44px; letter-spacing: -1px; margin-bottom: 24px; }
    .hero-pill { font-size: 10.5px; margin-bottom: 22px; }
    .hero-pill-text { display: inline-block; max-width: 78vw; }
    .hero-sub { font-size: 14.5px; margin-bottom: 28px; line-height: 1.55; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; padding: 14px 22px; font-size: 14.5px; }
    .hero-trust { margin-top: 32px; }
    .hero-trust-row { gap: 9px; }
    .hero-trust-mark { font-size: 11.5px; }
    .hero-canvas-wrap { margin-top: 32px; }

    /* Smallest phones - LED board + wristband ultra-tight */
    .led-row { grid-template-columns: 1fr; gap: 4px; padding: 11px 14px; }
    .led-row-value { text-align: left; font-size: 22px; }
    .led-row-label { font-size: 9.5px; }
    .led-bezel-text { display: none; }
    .led-bezel { justify-content: space-between; }

    .wristband { flex-wrap: wrap; transform: rotate(-0.5deg); }
    .wristband-name { font-size: 15px; }
    .wristband-meta { gap: 8px; }
    .wristband-arrow { font-size: 10px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-line { flex-direction: column; gap: 8px; }
    .bf-tabs { gap: 4px; }
    .bf-tab { padding: 10px 16px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   CASE STUDY (Heaven)
   ════════════════════════════════════════════════════════════ */

.case {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.case::before {
    content: "";
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 720px;
    height: 720px;
    background: radial-gradient(circle, var(--accent-soft), transparent 65%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
}
.case-container { position: relative; z-index: 1; }

.case-head {
    max-width: 760px;
    margin: 0 0 64px;
}
.case-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 14px 0 18px;
}
.case-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.case-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-2);
    max-width: 620px;
}

.case-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: stretch;
}

/* Left visual card */
.case-card {
    position: relative;
    border-radius: 24px;
    border: 1px solid var(--border-light);
    background: linear-gradient(160deg, #0a0a1a 0%, #050510 100%);
    padding: 36px 32px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(0, 194, 255, 0.06) inset;
}
.case-card-grain {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 194, 255, 0.04) 0, transparent 50%);
    mix-blend-mode: screen;
    pointer-events: none;
}
.case-card-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
}
.case-card-meta {
    position: relative; z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.case-card-eyebrow::before {
    content: "●";
    color: #4ade80;
    margin-right: 8px;
    font-size: 8px;
    vertical-align: middle;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.case-card-mark {
    position: relative; z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}
.case-card-logo {
    height: 80px;
    width: auto;
    max-width: 80%;
    opacity: 0.92;
    filter: drop-shadow(0 0 24px rgba(0, 194, 255, 0.15));
}
.case-card-foot {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.case-card-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--text-3);
}
.case-card-line strong {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Right body */
.case-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.case-quote {
    position: relative;
    padding: 28px 28px 24px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    border-left: 3px solid var(--accent);
}
.case-quote-mark {
    position: absolute;
    top: -8px;
    left: 18px;
    font-family: var(--serif);
    font-size: 80px;
    color: var(--accent);
    opacity: 0.35;
    line-height: 1;
    pointer-events: none;
}
.case-quote blockquote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: var(--text);
    margin: 0 0 18px;
    letter-spacing: -0.3px;
}
.case-quote-author { display: flex; flex-direction: column; }
.case-quote-author strong { font-size: 14px; color: var(--text); font-weight: 600; }
.case-quote-author span { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.case-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.case-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 18px 16px;
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.case-stat:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}
.case-stat-label {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
}
.case-stat-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.case-stat-from {
    font-size: 14px;
    color: var(--text-3);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.2);
}
.case-stat-arrow {
    font-size: 14px;
    color: var(--text-3);
}
.case-stat-to {
    font-family: var(--display);
    font-weight: 700;
    font-size: 28px;
    color: var(--accent);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.case-stat-delta {
    display: block;
    font-size: 12px;
    color: var(--text-2);
}

.case-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.case-meta-pill {
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-2);
    font-family: var(--mono);
    letter-spacing: 0.3px;
}

/* ════════════════════════════════════════════════════════════
   COMPARISON TABLE
   ════════════════════════════════════════════════════════════ */

.compare {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
}
.compare-head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}
.compare-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 14px 0 18px;
}
.compare-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.compare-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-2);
    margin: 0 auto;
    max-width: 580px;
}

.compare-table-wrap {
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid var(--border-light);
    border-radius: 24px;
    background: var(--bg-card);
    overflow: hidden;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.compare-table thead th {
    padding: 22px 14px 18px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-3);
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.compare-th-feature {
    text-align: left !important;
    padding-left: 28px !important;
    width: 32%;
}

.compare-th-us {
    background: linear-gradient(180deg, rgba(0, 194, 255, 0.12), rgba(0, 194, 255, 0.04)) !important;
    border-bottom: 1px solid rgba(0, 194, 255, 0.3) !important;
    position: relative;
}
.compare-th-us::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}
.compare-us-mark {
    display: inline-block;
    color: var(--accent);
    font-family: var(--display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    padding: 6px 12px;
    background: rgba(0, 194, 255, 0.1);
    border: 1px solid rgba(0, 194, 255, 0.3);
    border-radius: 8px;
}

.compare-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s ease;
}
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table tbody tr:hover { background: rgba(255, 255, 255, 0.015); }

.compare-table tbody td {
    padding: 18px 14px;
    text-align: center;
    color: var(--text-2);
    vertical-align: middle;
}

.compare-td-feature {
    text-align: left !important;
    padding-left: 28px !important;
}
.compare-td-feature strong {
    display: block;
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 3px;
    letter-spacing: -0.1px;
}
.compare-td-feature span {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.4;
}

.compare-td-us {
    background: rgba(0, 194, 255, 0.04);
    border-left: 1px solid rgba(0, 194, 255, 0.15);
    border-right: 1px solid rgba(0, 194, 255, 0.15);
}

.compare-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0, 194, 255, 0.18);
    color: var(--accent);
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(0, 194, 255, 0.4);
}
.compare-td-us .compare-tick {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 0 16px rgba(0, 194, 255, 0.4);
    border: none;
}
.compare-tick-partial {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
    font-weight: 500;
}
.compare-cross {
    display: inline-block;
    color: var(--text-3);
    font-size: 18px;
    opacity: 0.5;
}

.compare-value {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.compare-td-us .compare-value {
    color: var(--accent);
    background: rgba(0, 194, 255, 0.12);
}
.compare-value-bad {
    color: var(--text-3);
    background: rgba(255, 255, 255, 0.02);
}

.compare-foot {
    text-align: center;
    margin: 28px auto 0;
    font-size: 13px;
    color: var(--text-3);
    max-width: 600px;
}
.compare-foot a { color: var(--accent); text-decoration: none; }
.compare-foot a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   PRICING CALCULATOR ("Run the maths")
   ────────────────────────────────────────────────────────────
   Two-column layout: sliders on the left drive a live cost
   table on the right. Guestii row is highlighted in cyan and
   the savings strip below pulls the dollar gap vs whichever
   competitor charges the most for the user's scenario.
   ════════════════════════════════════════════════════════════ */

.calc {
    margin-top: 80px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(0, 194, 255, 0.06), transparent 60%),
        linear-gradient(180deg, #0c0e22 0%, #07091a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 48px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 32px 80px rgba(0, 0, 0, 0.4);
}

.calc-head {
    text-align: center;
    margin-bottom: 40px;
}

.calc-label { display: inline-block; margin-bottom: 12px; }

.calc-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.calc-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

.calc-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-2);
    max-width: 640px;
    margin: 0 auto;
}

.calc-sub strong {
    color: var(--text);
    font-weight: 600;
}

.calc-passed-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.calc-passed-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
}

.calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    gap: 36px;
    align-items: start;
}

/* ─── Controls (sliders) ─── */
.calc-controls {
    display: flex;
    flex-direction: column;
    gap: 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 24px;
}

.calc-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calc-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.calc-field-value {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.5px;
    color: var(--text);
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--accent) 0%,
        var(--accent) var(--p, 20%),
        rgba(255, 255, 255, 0.08) var(--p, 20%),
        rgba(255, 255, 255, 0.08) 100%);
    outline: none;
    cursor: pointer;
    transition: background 0.15s;
}

.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--accent);
    box-shadow: 0 4px 14px rgba(0, 194, 255, 0.45), 0 0 0 1px rgba(0,0,0,0.3);
    cursor: grab;
    transition: transform 0.15s;
}
.calc-slider::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }

.calc-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--accent);
    box-shadow: 0 4px 14px rgba(0, 194, 255, 0.45);
    cursor: grab;
}

.calc-field-marks {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.04em;
}

.calc-gmv {
    margin-top: 4px;
    padding: 16px;
    background: rgba(0, 194, 255, 0.05);
    border: 1px solid rgba(0, 194, 255, 0.18);
    border-radius: 12px;
    text-align: center;
}

.calc-gmv-label {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.calc-gmv-value {
    display: block;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 28px;
    color: var(--text);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

/* ─── Results table ─── */
.calc-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.calc-table {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.calc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 90px minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}
.calc-row:last-child { border-bottom: none; }

.calc-row-head {
    background: rgba(255, 255, 255, 0.025);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 12px 20px;
}

.calc-row-us {
    background:
        linear-gradient(90deg, rgba(0, 194, 255, 0.12), rgba(0, 194, 255, 0.04));
    box-shadow: inset 3px 0 0 var(--accent);
}

.calc-platform {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.calc-platform strong {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
}

.calc-platform em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.45);
}

.calc-row-us .calc-platform strong { color: var(--accent); }
.calc-row-us .calc-platform em { color: rgba(0, 194, 255, 0.65); }

.calc-cell {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    transition: color 0.15s;
}

.calc-cell-keep,
.calc-cell-pay,
.calc-cell-year {
    color: rgba(255, 255, 255, 0.95);
}

.calc-row-us .calc-cell-keep,
.calc-row-us .calc-cell-pay,
.calc-row-us .calc-cell-year {
    color: var(--accent);
    font-weight: 700;
}

/* Brief flash when a cell value updates */
.calc-cell.is-updating {
    color: var(--accent);
}

/* ─── Savings strip ─── */
.calc-save {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 22px 24px;
    background:
        linear-gradient(135deg, rgba(0, 194, 255, 0.10), rgba(0, 194, 255, 0.02));
    border: 1px solid rgba(0, 194, 255, 0.25);
    border-radius: 16px;
    box-shadow:
        0 0 30px rgba(0, 194, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.calc-save-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.calc-save-label {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.calc-save-value {
    font-family: var(--display);
    font-weight: 400;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.calc-save-value-secondary { color: var(--text); }

.calc-save-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}

.calc-save-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.calc-save-tag {
    margin: 14px auto 0;
    text-align: center;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
    max-width: 480px;
}

/* Nightlife-specific tag row sitting below the savings strip.
   Tells the buyer "this calculator is built for your world,
   not generic event tickets". */
.calc-built-for {
    list-style: none;
    margin: 22px auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    max-width: 640px;
}
.calc-built-for li {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-2);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 100px;
}
.calc-built-for li:first-child {
    background: transparent;
    border: none;
    color: var(--text-3);
    padding-left: 4px;
    padding-right: 4px;
}
.calc-built-for li:first-child span {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.02em;
    font-family: 'Instrument Serif', serif;
    font-size: 14px;
}

/* Brutal line under the hero — the "$30 ticket isn't $30" callout.
   Sits between the hero copy and the trust pills, framed like a
   pulled quote so it reads as a punchline, not a footnote. */
.pr-hero-quote {
    max-width: 620px;
    margin: 28px auto 0;
    padding: 18px 26px;
    text-align: center;
    border-left: 2px solid var(--brand);
    background: linear-gradient(90deg, rgba(0, 194, 255, 0.06), transparent 80%);
    font-family: 'Instrument Serif', serif;
    font-size: 22px;
    line-height: 1.45;
    color: var(--text);
    letter-spacing: -0.005em;
    border-radius: 6px;
}
.pr-hero-quote strong {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-style: normal;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}
.pr-hero-quote em {
    display: block;
    margin-top: 6px;
    font-style: italic;
    color: var(--brand);
    font-size: 18px;
}
@media (max-width: 600px) {
    .pr-hero-quote {
        font-size: 18px;
        padding: 16px 18px;
        margin-top: 22px;
    }
    .pr-hero-quote em { font-size: 15px; }
}

.calc-foot {
    margin-top: 28px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-3);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Responsive ─── */
@media (max-width: 1023px) {
    .calc { padding: 32px 24px; }
    .calc-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 720px) {
    .calc { padding: 24px 16px; border-radius: 22px; }
    .calc-row {
        grid-template-columns: minmax(0, 1.3fr) 60px minmax(0, 0.85fr);
        gap: 10px;
        padding: 14px 14px;
    }
    /* Drop the "You keep" column on narrow screens - the Monthly fees + savings strip already tells the story. */
    .calc-row > :last-child { display: none; }
    .calc-row-head { padding: 10px 14px; }

    .calc-platform strong { font-size: 13px; }
    .calc-platform em { font-size: 10px; }
    .calc-cell { font-size: 12.5px; }

    .calc-save {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 18px;
        text-align: center;
    }
    .calc-save-divider {
        width: 80%;
        height: 1px;
        margin: 0 auto;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    }
    .calc-save-value { font-size: 30px; }

    .calc-field-value { font-size: 22px; }
    .calc-gmv-value { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════════ */

.pricing {
    padding: 140px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.pricing::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, var(--accent-soft), transparent 60%);
    filter: blur(100px);
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}
.pricing > .container { position: relative; z-index: 1; }

.pricing-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}
.pricing-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 14px 0 18px;
}
.pricing-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.pricing-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-2);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.price-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.price-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-4px);
}

.price-card-featured {
    background: linear-gradient(180deg, rgba(0, 194, 255, 0.08), rgba(0, 194, 255, 0.02));
    border-color: rgba(0, 194, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 194, 255, 0.15),
                0 30px 80px rgba(0, 194, 255, 0.08);
    transform: translateY(-8px);
}
.price-card-featured:hover { transform: translateY(-12px); }

.price-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    background: var(--accent);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 194, 255, 0.4);
}

.price-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.price-tier {
    font-family: var(--display);
    font-weight: 700;
    font-size: 20px;
    color: var(--text);
    letter-spacing: -0.3px;
}
.price-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
}
.price-card-featured .price-tag {
    color: var(--accent);
    border-color: rgba(0, 194, 255, 0.3);
    background: rgba(0, 194, 255, 0.08);
}

.price-card-sub {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-3);
    margin: 0 0 28px;
    min-height: 42px;
}

.price-amount {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px dashed var(--border);
}
.price-amount-value {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    color: var(--text);
    letter-spacing: -2px;
    margin-bottom: 6px;
}
.price-card-featured .price-amount-value { color: var(--accent); }
.price-amount-unit {
    font-size: 13px;
    color: var(--text-3);
}

.price-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.price-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.4;
}
.price-list li span {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(0, 194, 255, 0.12);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.price-cta {
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s var(--ease);
    letter-spacing: -0.1px;
}
.price-cta-primary {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 8px 24px rgba(0, 194, 255, 0.3);
}
.price-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 194, 255, 0.4);
}
.price-cta-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-light);
}
.price-cta-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pricing-foot {
    text-align: center;
    margin: 48px auto 0;
    font-size: 13px;
    color: var(--text-3);
    max-width: 640px;
}

/* ════════════════════════════════════════════════════════════
   INTEGRATIONS - TRUST STRIP (overrides legacy .int-grid)
   ════════════════════════════════════════════════════════════ */

.int-container { max-width: 1100px; margin: 0 auto; }

.int-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.int-head .int-title {
    margin: 14px 0 16px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}
.int-head .int-title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.int-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--text-2);
    margin: 0;
}

.int-strip {
    margin: 0 auto 32px;
    text-align: center;
}
.int-strip-label {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 22px;
}
.int-strip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.int-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
    color: var(--text-2);
}
.int-pill:hover {
    border-color: var(--border-strong);
    color: var(--text);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}
.int-pill-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.int-pill:hover .int-pill-mark {
    color: var(--accent);
    background: rgba(0, 194, 255, 0.1);
}
.int-pill-name {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.1px;
}

.int-pill-square:hover { border-color: rgba(45, 204, 111, 0.4); }
.int-pill-square:hover .int-pill-mark { color: #2dcc6f; background: rgba(45, 204, 111, 0.1); }

/* Native Guestii product variant · branded, distinguishes own product from third-party integrations */
.int-pill-house {
    border-color: rgba(0, 194, 255, 0.28);
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.06), rgba(0, 194, 255, 0.02));
    color: var(--text);
    padding-right: 6px;
}
.int-pill-house .int-pill-mark {
    color: var(--accent);
    background: rgba(0, 194, 255, 0.12);
}
.int-pill-house:hover {
    border-color: rgba(0, 194, 255, 0.55);
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.10), rgba(0, 194, 255, 0.04));
    transform: translateY(-2px);
}
.int-pill-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.18);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-left: 2px;
}

/* Clickable variant - used on Square pill which links to /square */
.int-pill-link {
    text-decoration: none;
    cursor: pointer;
    padding-right: 14px;
}
.int-pill-link .int-pill-arrow {
    color: var(--text-3);
    font-size: 13px;
    margin-left: 2px;
    transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.int-pill-link:hover .int-pill-arrow {
    transform: translateX(3px);
    color: #2dcc6f;
}

/* "Powered by Square" link inside the Door Payments ops card */
.ops-card-link {
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: 0.1px;
    transition: gap 0.25s var(--ease), color 0.25s var(--ease);
    align-self: flex-start;
}
.ops-card-link:hover {
    gap: 10px;
    color: #ffffff;
}
.int-pill-apple:hover .int-pill-mark { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.int-pill-google:hover .int-pill-mark { color: #4285f4; background: rgba(66, 133, 244, 0.1); }

.int-foot {
    text-align: center;
    margin: 32px auto 0;
    font-size: 13px;
    color: var(--text-3);
    max-width: 600px;
}
.int-foot a { color: var(--accent); text-decoration: none; }
.int-foot a:hover { text-decoration: underline; }

/* Reveal animations */
.case-grid > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.case-grid.visible > * { opacity: 1; transform: translateY(0); }
.case-grid.visible > *:nth-child(2) { transition-delay: 0.1s; }

.compare-table-wrap { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.compare-table-wrap.visible { opacity: 1; transform: translateY(0); }

.pricing-grid > .price-card { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.pricing-grid.visible > .price-card { opacity: 1; transform: translateY(0); }
.pricing-grid.visible > .price-card:nth-child(1) { transition-delay: 0s; }
.pricing-grid.visible > .price-card:nth-child(2) { transition-delay: 0.08s; }
.pricing-grid.visible > .price-card:nth-child(3) { transition-delay: 0.16s; }
.pricing-grid.visible > .price-card-featured { transform: translateY(28px); }
.pricing-grid.visible > .price-card-featured { transform: translateY(-8px); }

.int-strip { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.int-strip.visible, .integrations.visible .int-strip { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   CASE / COMPARE / PRICING / INT - RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .case, .compare, .pricing, .integrations { padding: 100px 0; }
    .case-grid { grid-template-columns: 1fr; gap: 32px; }
    .case-card { min-height: 360px; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 520px; }
    .price-card-featured { transform: translateY(0); }
    .price-card-featured:hover { transform: translateY(-4px); }
    .pricing-grid.visible > .price-card-featured { transform: translateY(0); }
    .compare-table { font-size: 13px; }
    .compare-th-feature, .compare-td-feature { padding-left: 18px !important; }
}

@media (max-width: 768px) {
    .case, .compare, .pricing, .integrations { padding: 72px 0; }

    .case-head { margin-bottom: 36px; }
    .case-card { padding: 24px 20px; min-height: 300px; }
    .case-card-logo { height: 56px; }
    .case-card-foot { gap: 8px 16px; }
    .case-quote { padding: 22px 20px 18px 24px; }
    .case-quote blockquote { font-size: 17px; }
    .case-stats { grid-template-columns: 1fr; gap: 10px; }
    .case-stat { padding: 14px 16px 12px; }
    .case-stat-to { font-size: 22px; }
    .case-meta-pill { font-size: 11px; padding: 6px 12px; }

    /* Compare table → switch to a card-stack layout on mobile */
    .compare-table-wrap { border-radius: 18px; }
    .compare-table thead { display: none; }
    .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; width: 100%; }
    .compare-table tbody tr {
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
    }
    .compare-td-feature {
        padding: 0 18px 12px !important;
        text-align: left !important;
    }
    .compare-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 18px;
        text-align: right;
        border: none;
        background: transparent !important;
    }
    .compare-table tbody td::before {
        content: attr(data-label);
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-3);
    }
    .compare-td-us {
        background: rgba(0, 194, 255, 0.05) !important;
        border-radius: 8px;
        margin: 4px 12px;
        padding: 10px 14px !important;
    }
    .compare-td-us::before { content: "Guestii" !important; color: var(--accent) !important; }
    .compare-table tbody td:nth-of-type(2):not(.compare-td-us)::before { content: "Eventbrite"; }
    .compare-table tbody td:nth-of-type(3)::before { content: "Humanitix"; }
    .compare-table tbody td:nth-of-type(4)::before { content: "Posh"; }
    .compare-foot { padding: 0 24px; margin-top: 20px; }

    .pricing-head { margin-bottom: 40px; }
    .price-card { padding: 28px 24px 24px; }
    .price-amount-value { font-size: 38px; }
    .price-card-sub { min-height: auto; margin-bottom: 22px; }
    .price-amount { padding-bottom: 22px; margin-bottom: 22px; }
    .price-list { margin-bottom: 24px; }

    .int-head { margin-bottom: 36px; }
    .int-head .int-title { font-size: clamp(26px, 8vw, 36px); }
    .int-strip { margin-bottom: 24px; }
    .int-strip-row { gap: 8px; }
    .int-pill { padding: 10px 14px 10px 12px; }
    .int-pill-mark { width: 22px; height: 22px; }
    .int-pill-mark svg { width: 14px; height: 14px; }
    .int-pill-name { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════
   GROWTH (Guest Line) - flush product showcases
   The product screenshots already include their own iPhone mockup
   chrome, so we display them flush rather than wrapping them in
   another phone frame.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   GUEST LINE - HORIZONTAL SCROLL-JACK (desktop ≥ 1024px)
   ────────────────────────────────────────────────────────────
   .gl-pin-wrap is a tall vertical container (4× viewport tall).
   Inside, .gl-pin-sticky sticks to the viewport while the user
   scrolls past it, and .gl-h-track is translated horizontally
   (via JS in script.js) in lockstep with vertical scroll.
   The result: vertical scroll moves the page horizontally
   through the section's panels, then resumes vertical motion.
   ════════════════════════════════════════════════════════════ */

.gl-pin-wrap {
    position: relative;
    /* Total scroll distance = (panels - 1) × 100vh of vertical
       travel. With 4 panels we want 3 viewports worth of scroll
       to traverse them, plus 1 viewport for the section itself
       to fully enter/exit = 4 × 100vh. */
    height: 400vh;
    /* Override the default chapter padding inside the pin */
    margin-top: 0;
}

/* Neutralise default chapter padding when pinning is active */
.chapter-guestline { padding: 0; }

.gl-pin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    /* GPU compositor hint - the contents will be translated */
    contain: paint;
    background: #000;
}

.gl-h-track {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.gl-panel {
    flex: 0 0 100vw;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 80px 0 60px;
    overflow: hidden;
    box-sizing: border-box;
}

.gl-panel .container {
    width: 100%;
    box-sizing: border-box;
}

/* Intro panel - centered hero copy */
.gl-panel-intro .chapter-head {
    margin: 0 auto;
    max-width: 820px;
    text-align: center;
}

.gl-panel-intro .chapter-brand {
    justify-content: center;
    display: flex;
}

.gl-panel-intro .chapter-sub {
    margin-left: auto;
    margin-right: auto;
}

/* Soft scroll-cue under the intro chip */
.gl-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Delight', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.02);
    animation: glHintNudge 2.4s ease-in-out infinite;
}

.gl-scroll-hint svg {
    color: rgba(255, 255, 255, 0.9);
}

@keyframes glHintNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}

/* Feature panels - keep gl-feature centered with sane width */
.gl-panel-feature .gl-feature {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

/* ─── Progress UI (top of pinned viewport) ─── */
.gl-pin-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 5;
    pointer-events: none;
}

.gl-pin-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
    transform-origin: left center;
    will-change: width;
}

/* Panel counter top-right */
.gl-pin-counter {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Delight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.gl-pin-counter-current {
    color: rgba(255, 255, 255, 1);
    font-size: 22px;
    font-weight: 700;
    transition: color 0.25s ease;
}

.gl-pin-counter-divider {
    margin: 0 4px;
    color: rgba(255, 255, 255, 0.35);
}

/* ─── Mobile / tablet: revert to native vertical layout ─── */
@media (max-width: 1023px) {
    .gl-pin-wrap {
        height: auto;
    }
    .gl-pin-sticky {
        position: relative;
        height: auto;
        overflow: visible;
        contain: none;
    }
    .gl-h-track {
        display: block;
        transform: none !important;
        will-change: auto;
    }
    .gl-panel {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 60px 0;
    }
    .gl-pin-progress,
    .gl-pin-counter,
    .gl-scroll-hint {
        display: none;
    }
    .chapter-guestline {
        padding: 100px 0 80px;
    }
}

/* ─── Reduced motion: also fall back to vertical (no scroll-jack) ─── */
@media (prefers-reduced-motion: reduce) {
    .gl-pin-wrap {
        height: auto;
    }
    .gl-pin-sticky {
        position: relative;
        height: auto;
        overflow: visible;
        contain: none;
    }
    .gl-h-track {
        display: block;
        transform: none !important;
        will-change: auto;
    }
    .gl-panel {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 60px 0;
    }
    .gl-pin-progress,
    .gl-pin-counter,
    .gl-scroll-hint {
        display: none;
    }
    .chapter-guestline {
        padding: 100px 0 80px;
    }
    .gl-pin-progress-bar { width: 100% !important; }
}

.gl-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 80px;
    align-items: center;
}

.gl-feature-reverse {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.gl-feature-reverse .gl-showcase {
    order: 2;
}

.gl-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.gl-showcase::before {
    /* Soft brand glow behind the product, follows the brand cobalt */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--brand-soft), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

.gl-showcase img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 40px 100px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 60px rgba(0, 194, 255, 0.08));
    transition: transform 0.6s var(--ease);
    /* Source PNGs ship with their own near-black background, which reads
       as a visible rectangle against the page. Feather the outer edges
       so the image dissolves cleanly into the section bg. */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%),
        linear-gradient(to right,  transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%),
        linear-gradient(to right,  transparent 0%, #000 4%, #000 96%, transparent 100%);
            mask-composite: intersect;
}

.gl-feature:hover .gl-showcase img {
    transform: translateY(-4px);
}

/* Per-variant max widths so the single, duo, and trio shots feel
   visually balanced - single is tightest, trio is widest. */
.gl-showcase-single img { max-width: 320px; }
.gl-showcase-duo    img { max-width: 540px; }
.gl-showcase-trio   img { max-width: 620px; }

.gl-body {
    max-width: 480px;
}

.gl-body h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 42px);
    letter-spacing: -1px;
    margin: 14px 0 16px;
    line-height: 1.1;
    color: var(--text);
}

.gl-body p {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 28px;
}

.gl-body p strong {
    color: var(--text);
    font-weight: 600;
}

.gl-body .growth-list em {
    font-family: var(--mono);
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0.4px;
    color: var(--text-3);
}

/* Stagger the three big features in on scroll */
.gl-feature {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.gl-feature.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1100px) {
    .gl-feature,
    .gl-feature-reverse {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .gl-feature-reverse .gl-showcase { order: 0; }
    .gl-showcase-single img { max-width: 260px; }
    .gl-showcase-duo    img { max-width: 460px; }
    .gl-showcase-trio   img { max-width: 540px; }
    .gl-body { max-width: 600px; }
}

@media (max-width: 768px) {
    .gl-showcase-single img { max-width: 220px; }
    .gl-showcase-duo    img { max-width: 100%; }
    .gl-showcase-trio   img { max-width: 100%; }
    .gl-body h3 { font-size: clamp(24px, 7vw, 32px); }
    .gl-body p  { font-size: 16px; margin-bottom: 22px; }
}

/* ════════════════════════════════════════════════════════════
   OPERATIONS - redesigned (Run the door)
   Lead feature + 3-card grid + capability strip
   ════════════════════════════════════════════════════════════ */

/* ── Lead feature row ── */
.ops-lead {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 100px;
    position: relative;
}

.ops-lead-visual {
    position: relative;
}

.ops-lead-visual::before {
    content: '';
    position: absolute;
    inset: -40px -10px -40px -40px;
    background: radial-gradient(
        ellipse at center,
        var(--accent-soft),
        transparent 65%
    );
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.ops-lead-visual .window {
    position: relative;
    z-index: 1;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.55),
        0 0 0 1px var(--border);
}

/* ═══════════════════════════════════════════════════════════
   DOOR-SCAN COMPOSITION  (custom CSS-rendered visual)
   ───────────────────────────────────────────────────────────
   Replaces the static dashboard screenshot with an in-product
   moment: a scanner phone (foreground, tilted) + a sync card
   (background, right) connected by a dashed cyan beam. Sells
   three claims at once: dark-room scanning, offline-safe,
   multi-device synced.
   ═══════════════════════════════════════════════════════════ */
.ops-scan-stage {
    position: relative;
    z-index: 1;
    aspect-ratio: 1.25 / 1;
    width: 100%;
    min-height: 380px;
}

/* Connecting dashed beam - sits between phone and sync card */
.ops-beam {
    position: absolute;
    top: 32%;
    left: 18%;
    width: 75%;
    height: 28%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
    animation: opsBeamDrift 5s linear infinite;
}
@keyframes opsBeamDrift {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -36; }
}
.ops-beam path {
    stroke-dashoffset: 0;
    stroke-dasharray: 2 4;
    animation: opsBeamDrift 5s linear infinite;
}

/* ─── PHONE ───────────────────────────────────────────────── */
.ops-phone {
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%) rotate(-4deg);
    width: 45%;
    max-width: 260px;
    aspect-ratio: 9 / 19.5;
    background: #050510;
    border-radius: 36px;
    border: 8px solid #1a1a24;
    box-shadow:
        0 50px 120px rgba(0, 0, 0, 0.7),
        0 0 0 1.5px rgba(255, 255, 255, 0.06),
        0 0 80px rgba(0, 194, 255, 0.18);
    overflow: hidden;
    z-index: 3;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}
.ops-phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 16px;
    background: #000;
    border-radius: 0 0 14px 14px;
    z-index: 5;
}

/* Status bar */
.ops-phone-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    height: 20px;
}
.ops-phone-status .opt-time { letter-spacing: -0.1px; }
.ops-phone-status .opt-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.78);
}

/* App header */
.ops-phone-app-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ops-phone-app-head .opa-back {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1;
}
.ops-phone-app-head .opa-event {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ops-phone-app-head .opa-event strong {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-phone-app-head .opa-event span {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.2px;
}
.ops-phone-app-head .opa-flash {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 184, 0, 0.16);
    border: 1px solid rgba(255, 184, 0, 0.3);
    color: #ffb800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Offline pill */
.ops-phone-offline {
    margin: 8px 14px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(255, 184, 0, 0.10);
    border: 1px solid rgba(255, 184, 0, 0.28);
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 600;
    color: #ffb800;
    letter-spacing: 0.2px;
    position: relative;
}
.ops-phone-offline .opo-icon { display: inline-flex; }
.ops-phone-offline .opo-pulse {
    position: absolute;
    right: 6px;
    width: 5px;
    height: 5px;
    background: #ffb800;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.6);
    animation: opsOfflineBlip 1.6s ease-in-out infinite;
}
@keyframes opsOfflineBlip {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.5); }
    50%      { opacity: 0.5; box-shadow: 0 0 0 5px rgba(255, 184, 0, 0); }
}

/* Camera viewfinder */
.ops-phone-viewfinder {
    flex: 1;
    margin: 8px 14px;
    position: relative;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 30%, rgba(0, 194, 255, 0.10), transparent 60%),
        #0a0a18;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
    min-height: 0;
}
.opv-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 14px 14px;
    pointer-events: none;
}

/* QR code in centre */
.opv-qr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(2deg);
    width: 60%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: #ffffff;
    padding: 6%;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.05);
}
.opv-qr svg {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    shape-rendering: crispEdges;
}

/* Scan reticle corners */
.opv-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--accent);
    box-shadow: 0 0 12px rgba(0, 194, 255, 0.4);
}
.opv-corner-tl { top: 14px; left: 14px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.opv-corner-tr { top: 14px; right: 14px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.opv-corner-bl { bottom: 14px; left: 14px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.opv-corner-br { bottom: 14px; right: 14px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

/* Scanline sweeping vertically */
.opv-scanline {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 194, 255, 0.9) 30%,
        rgba(0, 194, 255, 0.9) 70%,
        transparent);
    box-shadow: 0 0 16px rgba(0, 194, 255, 0.7);
    border-radius: 2px;
    animation: opvScanSweep 2.4s ease-in-out infinite;
}
@keyframes opvScanSweep {
    0%, 100% { top: 14px; opacity: 0.9; }
    50%      { top: calc(100% - 16px); opacity: 1; }
}

/* Success card sliding up */
.ops-phone-success {
    margin: 0 14px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.16), rgba(74, 222, 128, 0.06));
    border: 1px solid rgba(74, 222, 128, 0.32);
    border-radius: 10px;
    box-shadow: 0 0 24px rgba(74, 222, 128, 0.15);
    animation: opsSuccessIn 4s ease-in-out infinite;
}
@keyframes opsSuccessIn {
    0%, 12% { transform: translateY(40%); opacity: 0; }
    20%, 88% { transform: translateY(0); opacity: 1; }
    96%, 100% { transform: translateY(40%); opacity: 0; }
}
.ops-success-tick {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4ade80;
    color: #062611;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ops-success-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.ops-success-meta strong {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-success-meta span {
    font-size: 9px;
    color: rgba(220, 255, 235, 0.7);
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ops-success-badge {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #4ade80;
    padding: 3px 6px;
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.32);
    border-radius: 4px;
    flex-shrink: 0;
}

/* Footer counters */
.ops-phone-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.opf-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
}
.opf-stat strong {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    font-feature-settings: "tnum";
}
.opf-stat span {
    font-size: 8.5px;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 600;
}
.opf-stat-warn strong { color: #ffb800; }

/* ─── SYNC CARD (right, behind & beside phone) ───────────── */
.ops-sync-card {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%) rotate(2deg);
    width: 50%;
    max-width: 340px;
    background: linear-gradient(180deg, rgba(20, 22, 38, 0.98), rgba(15, 17, 30, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 194, 255, 0.12),
        0 0 60px rgba(0, 194, 255, 0.10);
    overflow: hidden;
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.osc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 194, 255, 0.04);
}
.osc-head .osc-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 194, 255, 0.15);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.osc-head .osc-label {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.1px;
}
.osc-head .osc-time {
    font-size: 10px;
    color: rgba(0, 194, 255, 0.85);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.osc-feed {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.osc-row {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.osc-row:last-child { border-bottom: none; }
.osc-row-new {
    background: rgba(74, 222, 128, 0.06);
    animation: oscRowFlash 4s ease-in-out infinite;
}
@keyframes oscRowFlash {
    0%, 14% { background: rgba(74, 222, 128, 0); }
    20%     { background: rgba(74, 222, 128, 0.18); }
    40%, 90%{ background: rgba(74, 222, 128, 0.06); }
    100%    { background: rgba(74, 222, 128, 0); }
}
.osc-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c1, #00c2ff), var(--c2, #3a5cff));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}
.osc-name {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.osc-tag {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7);
}
.osc-tag-vip {
    background: rgba(250, 204, 21, 0.10);
    border-color: rgba(250, 204, 21, 0.30);
    color: #facc15;
}
.osc-tick {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.osc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.015);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1px;
}
.osc-foot-stat strong {
    color: #ffffff;
    font-weight: 600;
    margin-right: 3px;
    font-feature-settings: "tnum";
}
.osc-foot-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4ade80;
    font-weight: 600;
}
.osc-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    animation: pulse 2s infinite;
}

/* Mobile collapse */
@media (max-width: 768px) {
    .ops-scan-stage {
        aspect-ratio: auto;
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .ops-phone {
        position: relative;
        top: auto;
        left: auto;
        transform: rotate(-3deg);
        width: 65%;
        max-width: 220px;
    }
    .ops-sync-card {
        position: relative;
        top: auto;
        right: auto;
        transform: rotate(2deg);
        width: 92%;
        max-width: 360px;
    }
    .ops-beam { display: none; }
}

/* Live pill that floats on the visual */
.ops-lead-pill {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: var(--text);
    letter-spacing: 0.2px;
    font-weight: 500;
}

.ops-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    animation: opsPillPulse 1.6s ease-in-out infinite;
}

@keyframes opsPillPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

.ops-lead-body h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin: 14px 0 18px;
    color: var(--text);
}

.ops-lead-body p {
    color: var(--text-2);
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 26px;
    max-width: 520px;
}

.ops-lead-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ops-lead-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--text-2);
}

.ops-lead-list li span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── 3-card trio ── */
.ops-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 80px;
}

.ops-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 32px 28px;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
    position: relative;
    overflow: hidden;
}

.ops-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        var(--accent-soft),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
}

.ops-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 194, 255, 0.18);
}
.ops-card:hover::after { opacity: 1; }

.ops-card-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}
.ops-card-mark svg {
    width: 22px;
    height: 22px;
}

.ops-card .chap-tag {
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.ops-card h4 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin: 0 0 12px;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.ops-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ── Capability strip ── */
.ops-strip {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 28px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    flex-wrap: wrap;
}

.ops-strip-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
}

.ops-strip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ops-tag {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-2);
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.ops-tag:hover {
    color: var(--text);
    border-color: rgba(0, 194, 255, 0.25);
}

/* Operations responsive */
@media (max-width: 1100px) {
    .ops-lead {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ops-trio {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .ops-trio {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ops-card { padding: 26px 22px; }
    .ops-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }
    .ops-lead-pill { font-size: 11px; padding: 6px 12px; }
}


/* ════════════════════════════════════════════════════════════
   PASSKIT - Wallet passes / The network
   ════════════════════════════════════════════════════════════ */

.chapter-passkit {
    /* slightly elevated surface so it reads as a connective beat
       between Guest Line (pure black) and Data (cobalt) */
    background:
        radial-gradient(ellipse 60% 40% at 30% 0%, rgba(0, 194, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 60%, rgba(58, 92, 255, 0.05), transparent 70%),
        var(--bg);
}

/* Stage: pass on the left, body on the right */
.passkit-stage {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
}

/* ── The Guest Line Pass (real rendered image) ────────────── */

/* Stack wrapper: holds the main pass + 2 ghost passes behind it.
   The main wallet-pass-img is in normal flow and gives the wrapper
   its size; ghosts are absolutely positioned on top of it. */
.wallet-stack {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    isolation: isolate;
}

.wallet-pass-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px;
    box-shadow:
        0 60px 120px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: rotate(-2deg);
    transition: transform 0.6s var(--ease);
    animation: passFloat 6s ease-in-out infinite;
    position: relative;
    z-index: 3;
}
.wallet-pass-img:hover {
    transform: rotate(0deg) scale(1.02);
    animation-play-state: paused;
}

@keyframes passFloat {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(-2deg) translateY(-8px); }
}

/* Ghost passes behind the main one (network-effect tease) */
.wallet-pass-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: none;
    pointer-events: none;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.wallet-pass-ghost-1 {
    transform: rotate(4deg) translate(8px, 10px) scale(0.96);
    opacity: 0.55;
    z-index: 2;
}
.wallet-pass-ghost-2 {
    transform: rotate(8deg) translate(16px, 20px) scale(0.92);
    opacity: 0.3;
    z-index: 1;
}

/* Annotation outside the pass */
.wallet-note {
    position: relative;
    z-index: 4;
    margin: 32px auto 0;
    max-width: 320px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 194, 255, 0.05);
    border: 1px solid rgba(0, 194, 255, 0.18);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-2);
    letter-spacing: 0.1px;
}
.wallet-note strong {
    color: #ffffff;
    font-weight: 600;
}
.wn-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    margin-top: 6px;
    animation: opsPillPulse 1.6s ease-in-out infinite;
}

.wn-text {
    flex: 1;
    min-width: 0;
}

/* ── Passkit body (3 stacked features) ── */
.passkit-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.pk-feature {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 28px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.pk-feature:hover {
    border-color: rgba(0, 194, 255, 0.18);
    transform: translateX(2px);
}

.pk-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pk-icon svg {
    width: 26px;
    height: 26px;
}

.pk-body h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
    color: var(--text);
}
.pk-body p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
}

/* ── Foot stat row ── */
.passkit-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 36px 28px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 18px;
}

.pkf-stat {
    flex: 1;
    text-align: center;
    padding: 0 24px;
}
.pkf-stat-value {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--text);
    background: linear-gradient(180deg, var(--accent) 0%, var(--brand) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.pkf-stat-label {
    font-size: 13px;
    color: var(--text-3);
    letter-spacing: 0.3px;
}
.pkf-stat-divider {
    width: 1px;
    height: 50px;
    background: var(--border);
    flex-shrink: 0;
}

/* Passkit responsive */
@media (max-width: 1000px) {
    .passkit-stage {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .wallet-stack {
        max-width: 320px;
    }
}

@media (max-width: 700px) {
    .pk-feature {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .pk-icon { margin-bottom: 4px; }
    .passkit-foot {
        flex-direction: column;
        gap: 24px;
        padding: 28px 20px;
    }
    .pkf-stat-divider {
        width: 50px;
        height: 1px;
    }
    .pkf-stat { padding: 0; }
    .wallet-stack { max-width: 280px; }
    .wp-name { font-size: 22px; }
    .wp-mark { height: 32px; }
}


/* ═══════════════════════════════════════════════════════════════
   SQUARE INTEGRATION PAGE  (square.html)
   - Standalone subpage; reuses nav, footer, container, btn, chap-tag
   - Adds its own hero, section scaffolding, flow, data-grid, FAQ, CTA
   ═══════════════════════════════════════════════════════════════ */

.page-square {
    background: var(--bg);
}

/* Subpage nav: always solid, no scroll reactivity needed */
.nav.nav-subpage {
    position: sticky;
    top: 0;
}

/* ── Hero ───────────────────────────────────────────────────── */
.sq-hero {
    position: relative;
    padding: 140px 0 90px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 194, 255, 0.10), transparent 70%),
        var(--bg);
}

.sq-hero-aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70%;
    background:
        radial-gradient(40% 60% at 30% 40%, rgba(0, 194, 255, 0.18), transparent 70%),
        radial-gradient(40% 60% at 70% 50%, rgba(58, 92, 255, 0.14), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.sq-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.sq-hero-cobrand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sq-cobrand-mark {
    height: 22px;
    width: auto;
}
.sq-cobrand-x {
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    font-weight: 300;
}
.sq-cobrand-square {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
}
/* Real Square wordmark (icon + "Square" text baked in).
   Match the visual height of the Guestii wordmark (≈22px). */
.sq-cobrand-square-img {
    height: 22px;
    width: auto;
    display: block;
}

.sq-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.08);
    border: 1px solid rgba(0, 194, 255, 0.22);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin-bottom: 24px;
}
.sq-hero-chip .chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    animation: sqPulse 2s ease-in-out infinite;
}
@keyframes sqPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}

.sq-hero-title {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 auto 22px;
    max-width: 820px;
}
.sq-hero-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}

.sq-hero-sub {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    max-width: 640px;
    margin: 0 auto 36px;
}

.sq-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

.sq-hero-trust {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: 18px 28px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
}
.sq-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sq-trust-item strong {
    font-family: 'Alias', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}
.sq-trust-item span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.2px;
}
.sq-trust-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Ownership trust band ("you own it, we just plug in") ─── */
.sq-band {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(90deg, rgba(0, 194, 255, 0.04), rgba(58, 92, 255, 0.04)),
        var(--bg-elevated);
}
.sq-band-inner {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 32px;
    align-items: center;
}
.sq-band-mark {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(0, 194, 255, 0.12);
    border: 1px solid rgba(0, 194, 255, 0.25);
    color: var(--accent);
    display: grid;
    place-items: center;
}
.sq-band-mark svg {
    width: 26px;
    height: 26px;
}
.sq-band-title {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #ffffff;
    margin: 0 0 6px;
}
.sq-band-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.sq-band-sub {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    max-width: 540px;
}
.sq-band-flow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.25);
}
.sq-band-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 70px;
}
.sq-band-node-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    display: grid;
    place-items: center;
}
.sq-band-node-icon svg { width: 18px; height: 18px; }
.sq-band-node-icon img { width: 18px; height: 18px; display: block; }
/* Square node uses the official square mark - give it a touch more breathing
   room so the negotiated rounded-corner mark reads as the brand, not just an
   icon glyph. */
.sq-band-node-icon-square img { width: 20px; height: 20px; }
.sq-band-node span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.sq-band-node-final .sq-band-node-icon {
    background: rgba(0, 194, 255, 0.12);
    color: var(--accent);
}
.sq-band-node-final span { color: var(--accent); }
.sq-band-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    margin-bottom: 18px;
}

/* ── Section scaffolding ───────────────────────────────────── */
.sq-section {
    padding: 110px 0;
    position: relative;
}
.sq-section + .sq-section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sq-section-head {
    max-width: 720px;
    margin-bottom: 56px;
}
.sq-section-head .section-label {
    display: inline-block;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    letter-spacing: 0.4px;
    font-weight: 500;
}
.sq-section-title {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 18px;
}
.sq-section-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.sq-section-sub {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
}

/* ── 3-card trio ───────────────────────────────────────────── */
.sq-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* ── 4-card quad (the four Square surfaces) ───────────────── */
.sq-quad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.sq-card {
    padding: 32px 28px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
.sq-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 194, 255, 0.25);
    background: var(--bg-card-hover);
}
.sq-card-featured {
    border-color: rgba(0, 194, 255, 0.3);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 194, 255, 0.08), transparent 60%),
        var(--bg-card);
}
.sq-card-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(0, 194, 255, 0.10);
    border: 1px solid rgba(0, 194, 255, 0.22);
    color: var(--accent);
    display: grid;
    place-items: center;
}
.sq-card-mark svg {
    width: 20px;
    height: 20px;
}
.sq-card .chap-tag {
    margin: 4px 0 0;
}
.sq-card h3 {
    font-family: 'Alias', 'Inter', sans-serif;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.4px;
    margin: 0;
}
.sq-card p {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.sq-card-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sq-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}
.sq-card-list li span {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.14);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════
   BAR TRACKING SECTION  (the data moat)
   - Side-by-side: same guest profile in two tiers
     • Featured (with Square POS): live, itemised, drink leaderboard
     • Locked (payments only): blurred items, totals only, upgrade overlay
   ═══════════════════════════════════════════════════════════ */

.sq-section-bar {
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 194, 255, 0.04), transparent 70%),
        var(--bg);
}

.sq-bar-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}

/* ── Card wrapper (tier badge + profile mockup) ───────────── */
.bar-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.bar-card-tier {
    padding: 0 4px;
}
.bar-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.12);
    border: 1px solid rgba(0, 194, 255, 0.28);
    color: var(--accent);
    margin-bottom: 14px;
}
.bar-card-badge-muted {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.5);
}
.bar-card-tier h3 {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.15;
    letter-spacing: -0.3px;
    color: #ffffff;
    margin: 0 0 6px;
}
.bar-card-tier p {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* The featured card gets a subtle cyan glow on the mockup itself */
.bar-card-featured .bar-profile {
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 194, 255, 0.18),
        0 0 60px rgba(0, 194, 255, 0.08);
    border-color: rgba(0, 194, 255, 0.18);
}
.bar-card-locked .bar-profile {
    opacity: 0.92;
}

/* ── Guest profile mockup ─────────────────────────────────── */
.bar-profile {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 194, 255, 0.04);
}

.bar-profile-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bp-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}
.bp-dot:nth-child(1) { background: #ff5f57; }
.bp-dot:nth-child(2) { background: #ffbd2e; }
.bp-dot:nth-child(3) { background: #28c840; }
.bp-chrome-title {
    margin-left: 14px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.2px;
    font-family: 'Inter', monospace;
}

.bar-profile-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Gradient orb avatar with monogram + soft inner highlight */
.bar-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    /* Cyan → cobalt only. Drops the previous purple stop so the avatar speaks
       the same two-tone gradient as the leaderboard bars + CTA card. */
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.25), transparent 50%),
        linear-gradient(140deg, var(--accent) 0%, var(--brand) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -8px 16px rgba(0, 0, 0, 0.35),
        0 4px 14px rgba(0, 194, 255, 0.25);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.bar-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
}
.bar-avatar span {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    z-index: 1;
}
.bar-profile-meta h4 {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}
.bar-profile-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bar-tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.12);
    color: var(--accent);
    text-transform: uppercase;
}
.bar-tag-muted {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    text-transform: none;
    letter-spacing: 0.1px;
}
.bar-profile-stats {
    display: flex;
    gap: 18px;
}
.bar-stat {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.bar-stat-value {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
    letter-spacing: -0.3px;
}
.bar-stat-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.bar-profile-section {
    padding: 18px 24px 6px;
}
.bar-profile-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.bar-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.42);
}
.bar-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(0, 194, 255, 0.10);
    border: 1px solid rgba(0, 194, 255, 0.22);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
/* "Synced" variant: green check, conveys "data is up to date" without
   misleading the user into thinking items are appending in real time */
.bar-section-pill-synced {
    color: #2dcc6f;
    background: rgba(45, 204, 111, 0.10);
    border-color: rgba(45, 204, 111, 0.25);
}
.bar-section-pill-synced svg {
    flex-shrink: 0;
}
.bp-pulse {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    animation: bpPulse 1.6s ease-in-out infinite;
}
@keyframes bpPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

.bar-tab {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bar-tab li {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    font-size: 13.5px;
}
.bar-tab li:last-child { border-bottom: none; }
.bar-tab-time {
    font-family: 'Inter', monospace;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.2px;
}
.bar-tab-item {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.bar-tab-price {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}
.bar-tab-new {
    background: linear-gradient(90deg, rgba(0, 194, 255, 0.10), transparent 70%);
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    animation: tabRowIn 0.55s var(--ease) both;
}
.bar-tab-new .bar-tab-price { color: var(--accent); }
.bar-tab-leaving {
    animation: tabRowOut 0.35s ease forwards;
    overflow: hidden;
}
@keyframes tabRowIn {
    from { opacity: 0; transform: translateX(-12px); max-height: 0; }
    to   { opacity: 1; transform: translateX(0); max-height: 60px; }
}
@keyframes tabRowOut {
    from { opacity: 1; max-height: 60px; padding-top: 10px; padding-bottom: 10px; }
    to   { opacity: 0; max-height: 0;    padding-top: 0;    padding-bottom: 0; }
}

/* ── Locked state (Payments-only tier) ────────────────────── */
.bar-profile-section-locked {
    position: relative;
    padding-bottom: 18px;
}
.bar-section-pill-locked {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.55);
}
.bar-tab-blurred {
    filter: blur(3px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
/* Replace the item label with a redacted bar (so the "what" is visibly hidden) */
.bar-tab-redact {
    display: inline-block;
    height: 12px;
}
.bar-tab-redact span {
    display: block;
    width: 60%;
    height: 100%;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
.bar-tab-blurred li:nth-child(1) .bar-tab-redact span { width: 70%; }
.bar-tab-blurred li:nth-child(2) .bar-tab-redact span { width: 85%; }
.bar-tab-blurred li:nth-child(3) .bar-tab-redact span { width: 55%; }
.bar-tab-blurred li:nth-child(4) .bar-tab-redact span { width: 65%; }

.bar-locked-overlay {
    position: absolute;
    inset: auto 16px 14px 16px;
    top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 18px 16px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(8, 8, 26, 0.55) 0%, rgba(8, 8, 26, 0.92) 50%, rgba(8, 8, 26, 0.95) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.bar-lock-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    display: grid;
    place-items: center;
    margin-bottom: 4px;
}
.bar-locked-overlay strong {
    font-family: 'Alias', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}
.bar-locked-overlay span {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
    max-width: 280px;
}

/* ── Drink-of-the-night leaderboard (featured card only) ─── */
.bar-leaderboard {
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 194, 255, 0.025);
}
.bar-leaderboard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.bar-leaderboard-meta {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.2px;
}
.bar-lb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.bar-lb-list li {
    display: grid;
    grid-template-columns: 22px 110px 1fr 28px;
    gap: 12px;
    align-items: center;
}
.lb-rank {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--brand);
    line-height: 1;
}
.lb-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.lb-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--brand));
    border-radius: 999px;
    animation: lbFill 1.4s var(--ease) forwards;
    box-shadow: 0 0 12px rgba(0, 194, 255, 0.35);
}
@keyframes lbFill {
    from { width: 0; }
    to   { width: var(--w, 100%); }
}
.lb-count {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #ffffff;
    text-align: right;
    letter-spacing: -0.2px;
}

.bar-profile-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 24px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.015);
}
.bar-foot-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bar-foot-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 600;
}
.bar-foot-value {
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: -0.1px;
}

/* ═══════════════════════════════════════════════════════════
   REPEAT-CUSTOMER CALLOUT  (cross-night detection)
   ───────────────────────────────────────────────────────────
   Sits beneath the two-card bar comparison. The pair shows
   "tonight's tab"; this strip reframes Square as the engine
   that recognises the SAME guest across nights and entry
   methods (RSVP / Ticket / Guest list / Walk-in) via the
   stable card token. Two-column on desktop, stacks on mobile.
   ═══════════════════════════════════════════════════════════ */
.bar-repeat {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 32px;
    align-items: stretch;
    padding: 32px;
    border-radius: 20px;
    background:
        radial-gradient(ellipse 60% 100% at 0% 50%, rgba(0, 194, 255, 0.07), transparent 70%),
        rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.bar-repeat-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.bar-repeat-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 194, 255, 0.10);
    border: 1px solid rgba(0, 194, 255, 0.24);
    color: var(--accent);
    align-self: flex-start;
}
.bar-repeat-title {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.12;
    letter-spacing: -0.4px;
    color: #ffffff;
    margin: 0;
}
.bar-repeat-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.bar-repeat-sub {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 46ch;
}
.bar-repeat-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.bar-repeat-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1px;
}
.bar-repeat-tag-accent {
    background: rgba(0, 194, 255, 0.10);
    border-color: rgba(0, 194, 255, 0.28);
    color: var(--accent);
    font-weight: 600;
}
.bar-repeat-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 2px;
}

/* ── Visit timeline mockup ───────────────────────────────── */
.bar-repeat-visual {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 194, 255, 0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.bar-repeat-visits-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.015);
}
.bar-repeat-visits {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}
.bar-repeat-visits li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.bar-repeat-visits li:last-child { border-bottom: none; }
.bar-repeat-visits li.brv-current {
    background: rgba(0, 194, 255, 0.04);
}
.brv-date {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: -0.1px;
}
.brv-current .brv-date { color: #ffffff; font-weight: 600; }
.brv-method {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}
.brv-method-rsvp    { background: rgba(0, 194, 255, 0.10); border-color: rgba(0, 194, 255, 0.26); color: var(--accent); }
.brv-method-ticket  { background: rgba(58, 92, 255, 0.12); border-color: rgba(58, 92, 255, 0.30); color: #8aa0ff; }
.brv-method-list    { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); }
.brv-method-walkin  { background: rgba(255, 184, 0, 0.10); border-color: rgba(255, 184, 0, 0.30); color: #ffc847; }
.brv-spend {
    font-family: 'Inter', sans-serif;
    font-feature-settings: "tnum";
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.2px;
    min-width: 44px;
    text-align: right;
}
.bar-repeat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 194, 255, 0.04);
}
.brf-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(0, 194, 255, 0.85);
    letter-spacing: 0.1px;
}
.brf-result {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    letter-spacing: 0.1px;
}

/* ── Flow (5-step vertical pipeline) ───────────────────────── */
.sq-section-flow {
    background:
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0, 194, 255, 0.04), transparent 70%),
        var(--bg);
}
.sq-flow {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.sq-flow-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 28px;
    padding: 28px 32px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: var(--bg-card);
    align-items: start;
}
.sq-flow-num {
    font-family: 'Instrument Serif', serif;
    font-size: 38px;
    font-style: italic;
    color: var(--brand);
    line-height: 1;
    font-weight: 400;
}
.sq-flow-body h4 {
    font-family: 'Alias', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}
.sq-flow-body p {
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.sq-flow-arrow {
    align-self: center;
    color: rgba(0, 194, 255, 0.5);
    font-size: 20px;
    margin: 12px 0;
    text-align: center;
    padding-left: 36px;
    line-height: 1;
}
.sq-flow-final {
    border-color: rgba(0, 194, 255, 0.3);
    background:
        radial-gradient(ellipse 100% 70% at 50% 0%, rgba(0, 194, 255, 0.08), transparent 60%),
        var(--bg-card);
}

/* ── Why grid (6 items, 3-col) ─────────────────────────────── */
.sq-why-head {
    max-width: 720px;
    margin-bottom: 48px;
}
.sq-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.sq-why-item {
    padding: 26px 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.3s, background 0.3s;
}
.sq-why-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}
/* The two "killer" reasons - ownership + negotiated rates - get a pop */
.sq-why-item-feature {
    border-color: rgba(0, 194, 255, 0.25);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 194, 255, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.015);
}
.sq-why-item-feature:hover { border-color: rgba(0, 194, 255, 0.4); }
.sq-why-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 194, 255, 0.08);
    color: var(--accent);
    display: grid;
    place-items: center;
}
.sq-why-icon svg {
    width: 18px;
    height: 18px;
}
.sq-why-item h4 {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.2px;
}
.sq-why-item p {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ── Data & privacy section (the contract part) ───────────── */
.sq-section-data {
    background:
        linear-gradient(180deg, rgba(0, 194, 255, 0.025), transparent 40%),
        var(--bg);
}
/* Inherits the default brand-cobalt em from .sq-section-title em - kept as a
   hook for future tweaks, but the color override has been removed so all
   section-title emphases speak the same cobalt. */
.sq-data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}
.sq-data-col {
    padding: 28px 26px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: var(--bg-card);
}
.sq-data-col-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sq-data-arrow {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 194, 255, 0.12);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
/* "Data flows back" arrow uses a softer/secondary cyan rather than a second
   accent color - keeps the palette to one functional accent (cyan) for data
   direction, with neutral grey reserved for "never". */
.sq-data-arrow-back {
    background: rgba(0, 194, 255, 0.06);
    color: rgba(0, 194, 255, 0.7);
}
.sq-data-arrow-never {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}
.sq-data-col-head h4 {
    font-family: 'Alias', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.2px;
}
.sq-data-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sq-data-list li {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    padding-left: 14px;
    position: relative;
}
.sq-data-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
}
.sq-data-list li strong {
    color: #ffffff;
    font-weight: 600;
}
/* "Never sent" bullets stay neutral - the column header already conveys the
   negative direction; coloring bullets red would conflict with the rule that
   red is reserved for hard errors only (chaos-card storytelling). */
.sq-data-col-never .sq-data-list li::before {
    background: rgba(255, 255, 255, 0.18);
}

.sq-data-foot {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    overflow: hidden;
}
.sq-data-foot-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}
.sq-data-foot-row:last-child { border-bottom: none; }
.sq-data-foot-label {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    padding-top: 1px;
}
.sq-data-foot-row a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 194, 255, 0.3);
    transition: border-color 0.2s;
}
.sq-data-foot-row a:hover {
    border-color: var(--accent);
}

/* ── Setup steps ───────────────────────────────────────────── */
.sq-setup {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.sq-setup-step {
    padding: 30px 26px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: var(--bg-card);
    position: relative;
}
.sq-setup-num {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 56px;
    color: var(--brand);
    line-height: 1;
    margin-bottom: 14px;
    font-weight: 400;
}
.sq-setup-step h4 {
    font-family: 'Alias', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}
.sq-setup-step p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ── FAQ ───────────────────────────────────────────────────── */
.sq-faq {
    max-width: 760px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sq-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sq-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: 'Alias', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
    transition: color 0.2s;
}
.sq-faq-item summary::-webkit-details-marker { display: none; }
.sq-faq-item summary::after {
    content: '+';
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s var(--ease), color 0.2s;
    flex-shrink: 0;
}
.sq-faq-item[open] summary::after {
    transform: rotate(45deg);
    color: var(--accent);
}
.sq-faq-item summary:hover { color: var(--accent); }
.sq-faq-item p {
    padding: 0 0 22px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
    max-width: 640px;
}

/* ── CTA card ──────────────────────────────────────────────── */
.sq-cta {
    padding: 80px 0 120px;
}
.sq-cta-card {
    position: relative;
    padding: 64px 48px;
    border: 1px solid rgba(0, 194, 255, 0.2);
    border-radius: 28px;
    background:
        radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0, 194, 255, 0.10), transparent 70%),
        radial-gradient(ellipse 60% 60% at 50% 100%, rgba(58, 92, 255, 0.08), transparent 70%),
        var(--bg-card);
    text-align: center;
    overflow: hidden;
}
.sq-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 22px;
}
.sq-cta-badge svg,
.sq-cta-badge .sq-cta-badge-mark {
    width: 16px;
    height: 16px;
    display: block;
}
.sq-cta-title {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0 auto 16px;
    max-width: 720px;
}
.sq-cta-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.sq-cta-sub {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    max-width: 540px;
    margin: 0 auto 30px;
}
.sq-cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .sq-band-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: left;
    }
    .sq-band-flow {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 960px) {
    .sq-trio,
    .sq-quad,
    .sq-why-grid,
    .sq-data-grid,
    .sq-setup,
    .sq-bar-pair {
        grid-template-columns: 1fr;
    }
    .sq-bar-pair { gap: 32px; }
    .bar-repeat {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
        margin-top: 28px;
    }
    .bar-repeat-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .bar-profile-head {
        grid-template-columns: auto 1fr;
        gap: 14px;
    }
    .bar-profile-stats {
        grid-column: 1 / -1;
        justify-content: flex-start;
        gap: 28px;
    }
    .bar-stat { text-align: left; }
    .bar-profile-foot {
        grid-template-columns: 1fr 1fr;
    }
    .bar-foot-item:last-child {
        grid-column: 1 / -1;
    }
    .bar-lb-list li {
        grid-template-columns: 22px 90px 1fr 28px;
        gap: 10px;
    }
    .lb-name { font-size: 12.5px; }
    .sq-data-foot-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .sq-band-flow {
        gap: 8px;
        padding: 12px;
    }
    .sq-band-node { min-width: 60px; }
    .sq-band-node-icon { width: 32px; height: 32px; }
}

@media (max-width: 768px) {
    .sq-hero {
        padding: 100px 0 70px;
    }
    .sq-hero-cobrand {
        gap: 12px;
        padding: 10px 16px;
    }
    .sq-cobrand-mark { height: 18px; }
    .sq-cobrand-square svg { width: 18px; height: 18px; }
    .sq-cobrand-square-text { font-size: 14px; }

    .sq-hero-trust {
        flex-direction: column;
        gap: 14px;
        padding: 18px 22px;
    }
    .sq-trust-divider {
        width: 30px;
        height: 1px;
    }

    .sq-section { padding: 70px 0; }
    .sq-section-head { margin-bottom: 36px; }

    .sq-flow-step {
        grid-template-columns: 50px 1fr;
        gap: 18px;
        padding: 22px 22px;
    }
    .sq-flow-num { font-size: 30px; }
    .sq-flow-arrow { padding-left: 22px; }

    .sq-cta-card { padding: 44px 24px; }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PRICING PAGE  (.page-pricing  /  pricing.html)
   Standalone page hosting the calculator, what's-included grid,
   and a CTA. Reuses subpage nav + footer from .page-square family.
   ════════════════════════════════════════════════════════════════ */

.page-pricing {
    background: var(--bg);
}

/* ── Hero ── */
.pr-hero {
    position: relative;
    padding: 120px 0 70px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0, 194, 255, 0.10), transparent 70%),
        var(--bg);
}
.pr-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.pr-hero-title {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(38px, 5.5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 18px auto 22px;
    max-width: 820px;
}
.pr-hero-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.pr-hero-sub {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    max-width: 660px;
    margin: 0 auto 40px;
}
.pr-hero-sub strong {
    color: #fff;
    font-weight: 600;
}

.pr-hero-trust {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: 16px 26px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
}
.pr-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.pr-trust-item strong {
    font-family: 'Alias', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.4px;
}
.pr-trust-item span {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.2px;
}
.pr-trust-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Calculator wrapper ── */
.pr-calc-section {
    padding: 80px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── What's included ── */
.pr-incl {
    padding: 100px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pr-incl-head {
    text-align: center;
    margin-bottom: 56px;
}
.pr-incl-title {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 16px auto 14px;
    max-width: 720px;
}
.pr-incl-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.pr-incl-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.55;
    max-width: 600px;
    margin: 0 auto;
}

.pr-incl-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.pr-incl-grid li {
    padding: 22px 22px 24px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.25s, background 0.25s;
}
.pr-incl-grid li:hover {
    border-color: rgba(0, 194, 255, 0.25);
    background: rgba(0, 194, 255, 0.03);
}
.pr-incl-grid strong {
    font-family: var(--display, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    letter-spacing: -0.1px;
}
.pr-incl-grid span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

/* ── CTA strip ── */
.pr-cta {
    padding: 100px 0 120px;
    text-align: center;
}
.pr-cta-title {
    font-family: 'Alias', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 auto 12px;
    max-width: 620px;
}
.pr-cta-sub {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.55;
    max-width: 520px;
    margin: 0 auto 32px;
}
.pr-cta-actions {
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pr-incl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .pr-hero { padding: 90px 0 50px; }
    .pr-hero-trust {
        flex-direction: column;
        gap: 14px;
        padding: 18px 22px;
    }
    .pr-trust-divider { width: 32px; height: 1px; }
    .pr-calc-section { padding: 56px 0; }
    .pr-incl { padding: 70px 0; }
    .pr-incl-grid { grid-template-columns: 1fr; }
    .pr-cta { padding: 70px 0 90px; }
}

/* ════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════
   PREMIUM POLISH LAYER
   ────────────────────────────────────────────────────────────
   Everything below is the "premium SaaS" interaction layer:
   login button, scroll progress, magnetic buttons, cursor-glow
   cards, link underline-grow, FAQ +/- morph, copy-to-clipboard,
   floating CTA, scroll reveal, view transitions. Plus the page
   styles for the new About + Privacy + Terms scaffolds.
   ════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════ */

/* ── 1. NAV LOGIN BUTTON ───────────────────────────────────── */
.nav-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px 9px 14px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.nav-login svg {
    opacity: 0.7;
    transition: opacity 0.25s, transform 0.25s var(--ease);
}
.nav-login:hover {
    color: var(--white);
    background: var(--surface);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.nav-login:hover svg {
    opacity: 1;
    transform: translateX(2px);
}
.nav.is-guestline .nav-login {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.15);
}
.nav.is-guestline .nav-login:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}
.nav-mobile .nav-login-mobile {
    margin-top: 8px;
    color: var(--text);
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 14px 18px;
}

/* ── 2. SCROLL PROGRESS BAR ───────────────────────────────────
   Thin gradient bar at the very top of the viewport that fills
   left-to-right as the user scrolls. JS writes --progress on it. */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
}
.scroll-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg,
        var(--brand, #00c2ff) 0%,
        #7c3aed 50%,
        var(--brand, #00c2ff) 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(0, 194, 255, 0.55);
    transition: width 0.08s linear;
    animation: scroll-progress-shimmer 4s linear infinite;
}
@keyframes scroll-progress-shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-progress::after { animation: none; transition: none; }
}

/* ── 3. MAGNETIC BUTTONS ──────────────────────────────────────
   JS sets --mag-x / --mag-y based on cursor proximity. The CSS
   reads them and translates the button toward the cursor. The
   inner `.mag-inner` shifts a fraction further to give a subtle
   parallax. Skipped on touch / reduced-motion in JS. */
.is-magnetic {
    transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.is-magnetic.is-mag-active {
    transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 5. UNDERLINE-GROW HOVER FOR NAV + FOOTER LINKS ───────────
   Replace color-only hover with a clean expanding underline.
   Cleaner than color change, signals "interactive link". */
.nav-links a,
.footer-col a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color 0.25s, background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover,
.footer-col a:hover {
    background-size: 100% 1px;
}
/* Aria-current marker so users see which page is active */
.nav-links a[aria-current="page"],
.footer-col a[aria-current="page"] {
    color: var(--white);
    background-size: 100% 1px;
}

/* ── 6. FAQ +/- ICON MORPH ────────────────────────────────────
   Replace the rotated-plus glyph with a true morph between
   "+" and "-" using two pseudo bars that scale on toggle. */
.faq-icon {
    position: relative;
    /* Hide the textual "+" character so the SVG bars take over. */
    color: transparent !important;
    overflow: hidden;
}
.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 12px;
    height: 1.5px;
    background: var(--text-2);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.3s,
                opacity 0.3s;
}
.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item[open] .faq-icon {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    transform: rotate(0deg) !important;
}
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after {
    background: var(--bg);
}
.faq-item[open] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

/* ── 7. COPY-TO-CLIPBOARD AFFORDANCE ──────────────────────────
   Any element with [data-copy] gets a hover hint + click toast. */
[data-copy] {
    cursor: pointer;
    position: relative;
    transition: opacity 0.2s;
}
[data-copy]::after {
    content: 'Click to copy';
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 5px 10px;
    background: rgba(15, 15, 25, 0.95);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.25s var(--ease);
    z-index: 50;
}
[data-copy]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-copy].is-copied::after {
    content: 'Copied to clipboard ✓';
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.3);
}

/* ── 8. FLOATING DEMO CTA (homepage only) ─────────────────────
   Fixed pill in the bottom-right corner that fades in once the
   user has scrolled past the hero, fades out when in the same
   viewport as the bottom CTA section. */
.float-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 16px;
    background: rgba(15, 15, 25, 0.85);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--white);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    opacity: 0;
    transform: translateY(16px) scale(0.95);
    pointer-events: none;
    transition:
        opacity 0.45s var(--ease),
        transform 0.45s var(--ease),
        box-shadow 0.3s;
}
.float-cta.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.float-cta:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 194, 255, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.float-cta-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    animation: pulse 2s infinite;
}
.float-cta-arrow {
    transition: transform 0.25s var(--ease);
}
.float-cta:hover .float-cta-arrow {
    transform: translateX(3px);
}
@media (max-width: 600px) {
    .float-cta {
        right: 16px; bottom: 16px;
        padding: 10px 14px 10px 12px;
        font-size: 12.5px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .float-cta { transition: opacity 0.25s; transform: none; }
    .float-cta.is-visible { transform: none; }
}

/* ── 9. SCROLL REVEAL [data-reveal] ───────────────────────────
   Drop data-reveal on any block to fade + rise as it enters
   the viewport. JS adds .is-revealed when intersected. */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── 10. VIEW TRANSITIONS API ─────────────────────────────────
   Smooth cross-page fade between same-origin navigations on
   browsers that support it (Chromium-based today). Falls back
   to a hard navigation everywhere else, no penalty. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) {
    animation-name: vt-fade-out;
}
::view-transition-new(root) {
    animation-name: vt-fade-in;
}
@keyframes vt-fade-out {
    to { opacity: 0; transform: translateY(-6px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
}

/* ════════════════════════════════════════════════════════════
   ABOUT PAGE
   ════════════════════════════════════════════════════════════ */
.page-about { background: var(--bg); }

.ab-hero {
    position: relative;
    padding: 130px 0 90px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.ab-hero-aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 80%;
    background:
        radial-gradient(50% 60% at 50% 30%, rgba(0, 194, 255, 0.18), transparent 70%),
        radial-gradient(40% 50% at 70% 60%, rgba(124, 58, 237, 0.14), transparent 70%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}
.ab-hero-inner { max-width: 880px; margin: 0 auto; padding: 0 32px; }
.ab-hero-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.0;
    letter-spacing: -2px;
    margin: 18px 0 24px;
    color: var(--white);
}
.ab-hero-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
    letter-spacing: -1.5px;
}
.ab-hero-sub {
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--text-2);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 36px;
}
.ab-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 12px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
    flex-wrap: wrap;
    justify-content: center;
}
.ab-hero-meta strong {
    color: var(--white);
    font-weight: 600;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}
.ab-hero-meta-divider {
    width: 1px;
    height: 12px;
    background: var(--border-strong);
}

.ab-mission {
    padding: 100px 0;
    border-top: 1px solid var(--border);
}
.ab-mission-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}
.ab-mission-h {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 14px 0 0;
    color: var(--white);
}
.ab-mission-h em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.ab-mission-r p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-2);
    margin-bottom: 18px;
}
.ab-mission-r p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .ab-mission-inner { grid-template-columns: 1fr; gap: 36px; }
}

.ab-team {
    padding: 100px 0;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, transparent, rgba(0, 194, 255, 0.025), transparent);
}
.ab-team-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}
.ab-team-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 14px 0 18px;
    color: var(--white);
}
.ab-team-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.ab-team-sub {
    font-size: 16.5px;
    color: var(--text-2);
    line-height: 1.6;
}
.ab-team-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ab-team-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px;
    transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s;
}
.ab-team-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
}
.ab-team-photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #0d0d18;
    border: 1px solid var(--border);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ab-team-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.ab-team-photo-placeholder {
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, transparent 8px 16px),
        radial-gradient(circle at 50% 50%, rgba(0, 194, 255, 0.05), transparent 70%);
    color: var(--text-3);
    font-family: var(--display);
    font-size: 64px;
    font-weight: 700;
    opacity: 0.4;
}

/* Monogram avatars used until real headshots ship.
   Each card gets a different gradient via [data-c="a|b|c"]. */
.ab-team-photo-mono {
    position: relative;
    color: #fff;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 80px;
    letter-spacing: -0.02em;
    overflow: hidden;
}
.ab-team-photo-mono::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 55%);
    pointer-events: none;
}
.ab-team-photo-mono > span {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.ab-team-photo-mono[data-c="a"] {
    background:
        linear-gradient(135deg, rgba(0, 194, 255, 0.4), transparent 60%),
        linear-gradient(225deg, rgba(124, 58, 237, 0.45), transparent 60%),
        #0d0d18;
}
.ab-team-photo-mono[data-c="b"] {
    background:
        linear-gradient(135deg, rgba(236, 72, 153, 0.42), transparent 60%),
        linear-gradient(225deg, rgba(0, 194, 255, 0.4), transparent 60%),
        #0d0d18;
}
.ab-team-photo-mono[data-c="c"] {
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.4), transparent 55%),
        linear-gradient(225deg, rgba(52, 211, 153, 0.36), transparent 60%),
        #0d0d18;
}

.ab-team-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.ab-team-name-row .ab-team-name {
    margin-bottom: 0;
}
.ab-team-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ab-team-linkedin:hover {
    color: #fff;
    background: #0a66c2;
    border-color: #0a66c2;
    transform: translateY(-1px);
}
.ab-team-linkedin svg { display: block; }

.ab-team-name {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}
.ab-team-role {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--brand);
    margin-bottom: 14px;
}
.ab-team-bio {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
}
@media (max-width: 900px) {
    .ab-team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .ab-team-grid { grid-template-columns: 1fr; }
}

.ab-values {
    padding: 100px 0;
    border-top: 1px solid var(--border);
}
.ab-values-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}
.ab-values-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 14px 0 0;
    color: var(--white);
}
.ab-values-title em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--brand);
}
.ab-values-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.ab-values-grid li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px;
    transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.ab-values-grid li:hover {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
}
.ab-val-num {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-3);
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.ab-values-grid strong {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}
.ab-values-grid p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
}
@media (max-width: 700px) {
    .ab-values-grid { grid-template-columns: 1fr; }
    .ab-mission, .ab-team, .ab-values { padding: 70px 0; }
}

.ab-cta {
    padding: 100px 0 130px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.ab-cta-inner { max-width: 640px; margin: 0 auto; padding: 0 32px; }
.ab-cta-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0 0 16px;
    color: var(--white);
}
.ab-cta-sub {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 32px;
}
.ab-cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   LEGAL PAGES (privacy, terms)
   ════════════════════════════════════════════════════════════ */
.page-legal { background: var(--bg); }

.legal-hero {
    padding: 130px 0 50px;
    border-bottom: 1px solid var(--border);
}
.legal-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(40px, 6vw, 76px);
    letter-spacing: -2px;
    line-height: 1.0;
    margin: 14px 0 22px;
    color: var(--white);
}
.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
    flex-wrap: wrap;
}
.legal-meta strong { color: var(--white); }
.legal-meta-divider {
    width: 1px; height: 12px;
    background: var(--border-strong);
}

.legal-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 60px;
    padding: 60px 32px 130px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
.legal-toc {
    position: sticky;
    top: 110px;
    align-self: start;
}
.legal-toc-l {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-3);
    margin-bottom: 14px;
}
.legal-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--border);
}
.legal-toc li {
    counter-increment: toc-item;
}
.legal-toc a {
    display: block;
    padding: 8px 16px;
    font-size: 13.5px;
    color: var(--text-2);
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.legal-toc a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.02);
}
.legal-toc a.is-active {
    color: var(--white);
    border-left-color: var(--brand);
}

.legal-body {
    max-width: 720px;
    /* Grid items default to `min-width: auto` which lets them grow
       past their column when a child has long unbreakable text
       (URLs, emails, code spans). Force shrink-to-fit so the body
       never pushes the page wider than the viewport on phones. */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.legal-toc { min-width: 0; }
.legal-body section {
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}
.legal-body p,
.legal-body li,
.legal-body a,
.legal-body strong { overflow-wrap: anywhere; }
.legal-body section:last-child { border-bottom: none; }
.legal-body h2 {
    font-family: var(--display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--white);
    margin: 0 0 18px;
    scroll-margin-top: 100px;
    /* Long titles like "Who these Terms apply to" were running off
       the right edge on phones because the container couldn't break
       them. Allow word/character wrapping if needed. */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.legal-body h3 {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    margin: 22px 0 8px;
}
.legal-body p {
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--text-2);
    margin: 0 0 14px;
}
.legal-body p em {
    font-style: italic;
    color: var(--text-3);
    font-size: 14px;
    background: rgba(124, 58, 237, 0.06);
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px dashed rgba(124, 58, 237, 0.2);
}
.legal-body a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 194, 255, 0.3);
    transition: border-color 0.2s, color 0.2s;
}
.legal-body a:hover {
    color: var(--white);
    border-bottom-color: var(--white);
}
.legal-body ul {
    margin: 6px 0 18px;
    padding-left: 22px;
}
.legal-body ul li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
    margin-bottom: 6px;
}
.legal-body strong { color: var(--white); }
@media (max-width: 880px) {
    .legal-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 24px 90px;
    }
    .legal-toc {
        position: static;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border);
    }
    .legal-toc ol { display: flex; flex-wrap: wrap; gap: 6px; border-left: none; }
    .legal-toc a {
        padding: 6px 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 100px;
        margin-left: 0;
    }
    .legal-toc a.is-active { border-color: var(--brand); }
}

/* ════════════════════════════════════════════════════════════
   FINAL MOBILE HARDENING PASS
   ────────────────────────────────────────────────────────────
   Tightens edge cases on the new pages + new components for
   narrow phones (~360px–480px). Site-wide overflow guard at
   the bottom prevents any rogue child from causing a horizontal
   scrollbar on mobile.
   ════════════════════════════════════════════════════════════ */

/* Prevent any element from forcing horizontal overflow on mobile.
   `body` already has `overflow-x: hidden` globally — adding the
   same rule to `html` on iOS Safari creates a *nested* scroll
   container which intercepts vertical touch scrolling (this was
   what made Privacy/Terms feel locked). So leave html alone. */

/* About + Legal hero meta pills:
   The 2-3 segment meta pill ("Founded · HQ · For" / "Version · Updated · Effective")
   wraps onto multiple lines on narrow screens. The 1px vertical
   dividers floating in the middle of a stack look broken, so we
   stack the meta vertically and hide the dividers on phones. */
@media (max-width: 540px) {
    .ab-hero-meta,
    .legal-meta {
        flex-direction: column;
        gap: 6px;
        padding: 12px 18px;
    }
    .ab-hero-meta-divider,
    .legal-meta-divider {
        display: none;
    }
}

/* About hero + CTA padding tighter on phones */
@media (max-width: 600px) {
    .ab-hero { padding: 110px 0 70px; }
    .ab-hero-inner { padding: 0 20px; }
    .ab-cta { padding: 70px 0 90px; }
    .ab-cta-inner { padding: 0 20px; }
    .ab-cta-actions { flex-direction: column; align-items: stretch; }
    .ab-cta-actions .btn { width: 100%; }
}

/* About team card: photo placeholder shrinks on tiny screens
   so the card doesn't dominate the viewport. */
@media (max-width: 480px) {
    .ab-team-card { padding: 22px; }
    .ab-team-photo { aspect-ratio: 1; max-height: 280px; }
    .ab-team-photo-placeholder { font-size: 48px; }
}

/* Legal page tighter on phones */
@media (max-width: 600px) {
    .legal-hero { padding: 110px 0 36px; }
    .legal-grid { padding: 32px 20px 80px; gap: 28px; }
    .legal-body section { padding: 22px 0; }
    .legal-body p { font-size: 15px; line-height: 1.7; }
    .legal-body ul { padding-left: 18px; }
    .legal-body ul li { font-size: 14.5px; }
    /* TOC pills: shrink, allow scroll instead of wrapping the
       whole 18-item list onto 6 rows of stacked pills.
       NOTE: do NOT use `scroll-snap-type` here — on iOS Safari it
       hijacks vertical page scroll whenever a finger touches the
       horizontal strip, and the page felt locked. Plain horizontal
       scroll works fine on its own and lets vertical swipes pass
       through to the document. */
    .legal-toc ol {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 8px;
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
    .legal-toc li { flex: 0 0 auto; }
    .legal-toc a { font-size: 12.5px; padding: 7px 12px; white-space: nowrap; }
    .legal-toc ol::-webkit-scrollbar { display: none; }
    .legal-toc ol { scrollbar-width: none; }

    /* Tighter h2 on small phones so multi-word titles fit cleanly. */
    .legal-body h2 { font-size: 21px; letter-spacing: -0.4px; }

    /* Belt + braces: keep all legal-body text inside the column. */
    .legal-body,
    .legal-body p,
    .legal-body li,
    .legal-body a { overflow-wrap: anywhere; word-break: break-word; }
    .legal-body { min-width: 0; }
}

/* Floating CTA on small phones already shrunk in earlier rule.
   Add safe-area padding for iOS notch / home indicator. */
.float-cta {
    bottom: max(24px, env(safe-area-inset-bottom, 24px));
    right: max(24px, env(safe-area-inset-right, 24px));
}
@media (max-width: 600px) {
    .float-cta {
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
        right: max(16px, env(safe-area-inset-right, 16px));
    }
}