/* Extracted verbatim from public/index.html inline <style> blocks so /for/consultants.html
   matches the site design system exactly. Do not hand-edit; regenerate from index.html. */


        /* Self-hosted VARIABLE fonts (fvar/gvar) — one face per family with a weight
           RANGE so every font-weight maps to the axis (DM Sans 100-1000, Space Grotesk
           300-700). Was 7 single-weight faces pointing at duplicate copies of the same
           variable file. */
        @font-face {
            font-family: 'DM Sans';
            font-style: normal;
            font-weight: 100 1000; font-display: swap;
            src: url('/fonts/dm-sans.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Space Grotesk';
            font-style: normal;
            font-weight: 300 700; font-display: swap;
            src: url('/fonts/space-grotesk.woff2') format('woff2');
        }
* { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg: #0A0A0B;
            --surface: #2C2C2E;
            --surface-2: #3A3A3C;
            --border: rgba(255, 255, 255, 0.08);
            --text: #FFFFFF;
            --text-muted: rgba(255, 255, 255, 0.6);
            --accent: #C9933A;
            --accent-glow: rgba(201, 147, 58, 0.15);
            --accent-secondary: #C9933A;
            --accent-secondary-glow: rgba(201, 147, 58, 0.12);
            --green: #30D158;
            --red: #FF453A;
            /* Hero-only exception to var(--section-y) on mobile: the shared
               token's ~67-69px mobile minimum pushes the hero CTA button
               below the fold on common phone viewport heights. Every other
               section uses --section-y everywhere per R2-E; the hero is the
               one place fold visibility on the primary CTA outweighs that
               consistency. Desktop hero still uses --section-y unchanged. */
            --hero-section-y-mobile: 40px;
        }

        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            /* Explicit (was relying on the browser default of 16px) so that linking
               tokens.css - whose own bare `body{}` rule sets font-size:var(--fs-body) -
               doesn't silently change it. See R2-C note above. */
            font-size: 16px;
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ADD 2 — Subtle noise grain overlay (removes flat-black feel) */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            opacity: 0.035;
            pointer-events: none;
            z-index: 9999;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 200px 200px;
        }

        /* ADD 5 — Tighten heading letter-spacing */
        h2, .section-headline {
            letter-spacing: -0.03em !important;
        }
        h3, .card-headline {
            letter-spacing: -0.02em !important;
        }

        h1, h2, h3, h4 {
            font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            letter-spacing: -0.5px;
        }

        h2 {
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            line-height: 1.1;
        }

        h3 {
            font-size: clamp(18px, 2.5vw, 22px);
            font-weight: 700;
            letter-spacing: -0.5px;
            /* Explicit (was inheriting body's line-height: 1.6, computing to 28.8px at
               the 18px floor) so that linking tokens.css - whose own `h3,.h3{}` rule
               sets line-height:var(--lh-heading) - doesn't silently change it. See
               R2-C note above. */
            line-height: 1.6;
        }

        h4 {
            font-size: clamp(16px, 2vw, 18px);
            font-weight: 600;
        }

        p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.7;
        }

        /* Nav */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* ADD 1 — Scroll-aware frosted nav wrapper */
        .nav-outer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 300;
            /* Always-on backdrop (R2-G) rather than fully transparent until
               .scrolled kicks in at 80px - keeps hamburger/logo/CTA legible
               over any section from the very first frame, not just after
               scrolling starts. .scrolled below strengthens it further. */
            background: rgba(10, 10, 11, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid transparent;
            transition: background 0.3s ease,
                        backdrop-filter 0.3s ease,
                        -webkit-backdrop-filter 0.3s ease,
                        border-color 0.3s ease;
        }
        .nav-outer.scrolled {
            background: rgba(10, 10, 10, 0.80);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom-color: rgba(255, 255, 255, 0.06);
        }
        .logo {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 22px;
            color: var(--text);
            text-decoration: none;
        }
        .logo span { color: var(--accent); }
        .logo img { height: 24px; width: auto; display: block; }
        .nav-buttons {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        .nav-login {
            color: var(--text);
            padding: 10px 20px;
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            transition: color 0.2s;
        }
        .nav-login:hover { color: var(--accent); }
        .nav-cta {
            background: var(--accent);
            color: var(--on-accent);
            padding: 10px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: opacity 0.2s;
        }
        .nav-cta:hover { opacity: 0.85; }

        /* Hero Wrapper - contains nav + hero with WebGL background */
        .hero-wrapper {
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            background: #0A0A0B;
        }
        /* Premium gradient fallback — always visible behind canvas as safety net */
        /* Focal zone matches shader: ellipse centred at 50% x, 38% y (behind headline) */
        .hero-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse 65% 42% at 50% 38%, rgba(201,147,58,0.16) 0%, transparent 60%),
                radial-gradient(ellipse 45% 35% at 30% 60%, rgba(201,147,58,0.04) 0%, transparent 55%),
                radial-gradient(ellipse 40% 40% at 72% 28%, rgba(201,147,58,0.03) 0%, transparent 50%),
                #0A0A0B;
        }
        /* Smooth bottom fade — blends hero into next section */
        .hero-wrapper::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 120px;
            background: linear-gradient(to bottom, transparent, #1C1C1E);
            z-index: 5;
            pointer-events: none;
        }
        .hero-wrapper nav {
            position: relative;
            z-index: 300;
        }
        /* Offset hero content so it doesn't hide behind fixed nav */
        .hero-wrapper {
            padding-top: 70px;
        }

        /* Hero */
        .hero {
            max-width: 1800px;
            margin: 0 auto;
            padding: var(--section-y) 40px;
            text-align: center;
            position: relative;
            z-index: 10;
        }
        .badge {
            display: inline-block;
            background: var(--accent-glow);
            border: 1px solid rgba(201, 147, 58, 0.3);
            color: var(--accent);
            padding: 6px 16px;
            border-radius: 100px;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 24px;
            letter-spacing: 0.5px;
            cursor: default;
            opacity: 0.8;
        }
        .hero h1 {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            /* Cap is 92px, not the original 108px. Headline was later shortened to
               "Every cancellation is money walking out the door." (dropped "NeverGap
               gets it back." - the subheadline already covers the solution), which no
               longer needs as tight a cap as the old 84px (added when the headline still
               had the second sentence and was overlapping the sticky nav's backdrop-blur
               zone on scroll - see the nav-overlap fix logged 2026-07-23). Re-measured
               with the shorter text across 1024/1280/1440/1920px: 92px gives the same or
               fewer wrapped lines than the original 108px at every one of those widths,
               while rendering visibly smaller/tighter, so there's no overlap regression
               and no need to go back to the full 108px. */
            font-size: clamp(64px, 9vw, 92px);
            font-weight: 800;
            line-height: 1.02;
            margin-bottom: 20px;
            letter-spacing: -1.5px;
            color: #F2F2F4;
        }
        .hero h1 .highlight {
            position: relative;
            display: inline-block;
            /* overflow-wrap (not word-break) so long words like "cancellation"
               wrap at the word boundary onto their own line instead of being
               split mid-word; still falls back to breaking a single word that
               can't fit even alone on a line, so nothing can overflow. */
            word-break: normal;
            overflow-wrap: break-word;
        }
        .hero h1 .highlight em {
            font-style: normal;
            color: #F2F2F4;
            font-weight: 800;
        }
        /* Headline light sweep — v6: elliptical radial glass reflection */
        /* Soft ellipse travels across the highlight like light caught in glass */
        /* Longer cycle (14s), slower traversal, more cinematic first-sweep delay */
        @keyframes headline-sweep {
            /* Travel: -160% to +160% — ellipse is wide so it enters/exits softly */
            /* Active travel ~20% of 14s = ~2.8s; invisible ~11.2s — feels rare, precious */
            0%    { left: -160%; opacity: 0; }
            4%    { opacity: 1; }
            20%   { left: 160%;  opacity: 0.8; }
            23%   { opacity: 0; }
            100%  { left: 160%;  opacity: 0; }
        }
        .hero h1 .highlight::after {
            content: '';
            position: absolute;
            top: 50%;
            left: -160%;
            transform: translateY(-50%);
            width: 65%;
            height: 200%;
            /* Radial ellipse: soft centre peak, fully transparent at edges */
            /* Mimics a focused light source grazing across polished text */
            background: radial-gradient(
                ellipse 50% 50% at 50% 50%,
                rgba(255, 220, 130, 0.28) 0%,
                rgba(255, 200, 90, 0.16) 35%,
                rgba(201, 147, 58, 0.05) 65%,
                transparent 100%
            );
            pointer-events: none;
            mix-blend-mode: screen;
            animation: headline-sweep 14s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            animation-delay: 6s; /* First sweep 6s after page load */
        }
        .hero p {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: clamp(17px, 2vw, 22px);
            font-weight: 400;
            color: #A0A0A8;
            max-width: 560px;
            margin: 0 auto 32px;
            line-height: 1.6;
        }
        .hero-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .hero-cta {
            display: inline-block;
            background: var(--accent);
            color: var(--on-accent);
            padding: 16px 40px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 700;
            font-size: 16px;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 0 40px rgba(201, 147, 58, 0.2);
        }
        .hero-cta:hover {
            transform: translateY(-1px);
            box-shadow:
                0 0 24px rgba(201, 147, 58, 0.45),
                0 0 8px rgba(201, 147, 58, 0.30);
            transition: all 0.2s ease;
        }
        .hero-cta:active {
            /* scale added alongside the existing translateY(0) — that reset
               alone is a no-op on touch, since mobile never hovers first and
               starts at translateY(0) already. The scale is what actually
               gives a tap visible feedback. */
            transform: translateY(0) scale(0.97);
            box-shadow: 0 0 12px rgba(201, 147, 58, 0.30);
        }
        .hero-sub {
            margin-top: 16px;
            font-size: 13px;
            color: var(--text-muted);
        }

        /* Hero line-break: desktop-only, natural wrap on mobile */
        .hero-desktop-br {
            display: none;
        }
        @media (min-width: 768px) {
            .hero-desktop-br {
                display: inline;
            }
        }

        /* Stats row below CTAs */
        .hero-stats {
            margin-top: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 36px;
            flex-wrap: wrap;
        }
        .stat-item {
            text-align: center;
        }
        .hero-stats .stat-number {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 36px;
            font-weight: 800;
            color: #C9933A;
            line-height: 1;
        }
        .hero-stats .stat-label {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-weight: 600;
            font-size: 11px;
            color: #A0A0A8;
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .stat-divider {
            width: 1px;
            height: 40px;
            background: rgba(255, 255, 255, 0.07);
        }

        /* Mobile: Stats grid layout */
        @media (max-width: 768px) {
            .hero-stats {
                margin-top: 40px;
                gap: 20px;
                grid-template-columns: 1fr 1fr;
                display: grid;
                width: 100%;
            }
            .stat-divider {
                display: none;
            }
        }

        /* ================================================================
           CINEMATIC SCROLL SYSTEM v7 — lerp-driven choreography
           All scroll transforms use ONLY transform + opacity (no layout props)
           will-change applied to each animated hero element
           ================================================================ */

        /* Vignette overlay: sits between WebGL canvas (z:1) and hero content (z:10) */
        .hero-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(
                ellipse at 50% 40%,
                transparent 30%,
                rgba(10,10,11,0.4) 70%,
                rgba(10,10,11,0.9) 100%
            );
            pointer-events: none;
            z-index: 2;
            transform-origin: center center;
            will-change: transform;
        }

        /* Fine-grained will-change on each hero element */
        #heroBadge {
            will-change: transform, opacity;
        }
        #heroHeadline {
            will-change: transform, opacity;
        }
        #heroSubheadline {
            will-change: transform, opacity;
        }
        #heroCtaGroup {
            will-change: transform, opacity;
        }
        #heroStatsRow {
            will-change: transform, opacity;
        }

        /* Keep legacy blocks for backwards compat */
        .hero-headline-block {
            will-change: transform, opacity;
        }
        .hero-cta-block {
            will-change: transform, opacity;
        }

        /* ================================================================
           ENTRY ANIMATIONS — staggered reveal on page load (plays once)
           animation-fill-mode: both — elements start invisible, settle visible
           ================================================================ */

        @keyframes heroFadeUp {
            from {
                opacity: 0;
                transform: translateY(var(--entry-y, 20px));
            }
            to {
                opacity: 1;
                transform: translateY(0px);
            }
        }

        #heroBadge {
            --entry-y: 16px;
            opacity: 0;
            animation: heroFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.1s both;
        }
        #heroHeadline {
            --entry-y: 24px;
            opacity: 0;
            animation: heroFadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.2s both;
        }
        #heroSubheadline {
            --entry-y: 20px;
            opacity: 0;
            animation: heroFadeUp 0.6s ease-out 0.35s both;
        }
        #heroCtaGroup {
            --entry-y: 16px;
            opacity: 0;
            animation: heroFadeUp 0.6s ease-out 0.5s both;
        }
        #heroStatsRow {
            --entry-y: 12px;
            opacity: 0;
            animation: heroFadeUp 0.6s ease-out 0.65s both;
        }
        /* ================================================================
           AI RECOVERY LOOP — CSS-only 6s animation cycle
           Desktop: floats right of headline | Mobile: below headline, above CTA
           ================================================================ */

        /* Hero layout: two-column on desktop */
        .hero-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .hero-left {
            flex: 1 1 auto;
            text-align: center;
        }
        .hero-right {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            margin-top: 32px;
        }
        @media (min-width: 900px) {
            .hero-inner {
                flex-direction: row;
                align-items: flex-start;
                gap: 48px;
                text-align: left;
            }
            .hero-left {
                text-align: left;
            }
            .hero-left .badge {
                text-align: left;
            }
            .hero-left p {
                margin-left: 0;
                margin-right: 0;
            }
            .hero-left .hero-buttons {
                justify-content: flex-start;
            }
            .hero-stats {
                justify-content: flex-start;
            }
            .hero-right {
                margin-top: 8px;
                justify-content: flex-start;
            }
        }

        /* .hero-right::before (a fixed 600x400px radial-glow pseudo-element,
           same "doesn't scale with viewport" flaw as the old two-orb setup)
           removed — redundant with the unified .hero-ambient-glow and the
           wireframe scene, which are the intended focal visuals for this
           column now. .hero-right keeps position:relative — .recovery-loop
           and the wireframe canvas both rely on it as their positioning
           context. */
        .hero-right {
            position: relative;
        }
        .recovery-loop {
            position: relative;
            z-index: 1;
        }

        /* Recovery loop container */
        .recovery-loop {
            background: #1A1A1C;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            padding: 20px;
            width: 300px;
            max-width: 320px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            position: relative;
            flex-shrink: 0;
        }

        /* LIVE badge */
        .recovery-live-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(52,199,89,0.15);
            color: #34C759;
            font-size: 10px;
            font-weight: 700;
            border-radius: 4px;
            padding: 2px 6px;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 4px;
            z-index: 2;
        }
        .recovery-live-dot {
            display: inline-block;
            animation: live-dot-pulse 2s ease-in-out infinite;
        }
        @keyframes live-dot-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        /* Bubble base styles */
        .recovery-bubble {
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .recovery-bubble + .recovery-bubble {
            margin-top: 8px;
        }
        .bubble-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .bubble-icon {
            font-size: 16px;
            line-height: 1;
            flex-shrink: 0;
        }
        .bubble-text {
            font-size: 14px;
            line-height: 1.4;
        }
        .bubble-subtext {
            font-size: 12px;
            margin-left: 24px;
        }
        .bubble-loading-bar-track {
            height: 3px;
            background: rgba(201,147,58,0.2);
            border-radius: 2px;
            margin-top: 6px;
            margin-left: 24px;
            overflow: hidden;
        }
        .bubble-loading-bar-fill {
            height: 100%;
            border-radius: 2px;
            background: #C9933A;
            width: 0%;
        }

        /* Bubble 1 — Cancellation (grey) */
        .bubble-cancel {
            background: #2C2C2E;
        }
        .bubble-cancel .bubble-text {
            color: #F2F2F4;
        }
        .bubble-cancel .bubble-subtext {
            color: var(--text-muted);
        }

        /* Bubble 2 — AI activating (gold) */
        .bubble-ai {
            background: rgba(201,147,58,0.10);
            border: 1px solid rgba(201,147,58,0.25);
        }
        .bubble-ai .bubble-text {
            color: #C9933A;
        }

        /* Bubble 3 — Slot filled (green) */
        .bubble-filled {
            background: rgba(52,199,89,0.10);
            border: 1px solid rgba(52,199,89,0.25);
        }
        .bubble-filled .bubble-text {
            color: #34C759;
            font-weight: 600;
        }
        .bubble-filled .bubble-subtext {
            color: #34C759;
            font-size: 13px;
        }

        /* ================================================================
           6-SECOND ANIMATION SEQUENCE
           Frame 1: 0–1.5s  — cancellation bubble appears
           Frame 2: 1.5–3s  — AI bubble appears + loading bar animates
           Frame 3: 3–5s    — Filled bubble appears, loading bar removed
           Frame 4: 5–6s    — Everything fades out
           Loop repeats
           ================================================================ */

        /* BUBBLE 1: fade in at 0s, stay visible until 5s, fade out 5–6s */
        @keyframes bubble1-anim {
            0%     { opacity: 0; transform: translateY(8px); }
            6.67%  { opacity: 1; transform: translateY(0); } /* 0.4s in (0.4/6=6.67%) */
            83.33% { opacity: 1; transform: translateY(0); } /* hold until 5s */
            100%   { opacity: 0; transform: translateY(0); } /* fade out by 6s */
        }

        /* BUBBLE 2: appears at 1.5s, stays until 3s (loading bar phase), then replaced */
        @keyframes bubble2-anim {
            0%     { opacity: 0; transform: translateY(8px); }
            25%    { opacity: 0; transform: translateY(8px); } /* 1.5s mark */
            31.67% { opacity: 1; transform: translateY(0); }   /* 1.5s + 0.4s = 1.9s (31.67%) */
            83.33% { opacity: 1; transform: translateY(0); }   /* hold until 5s */
            100%   { opacity: 0; transform: translateY(0); }
        }

        /* BUBBLE 3: appears at 3s, stays until 5s, fades 5–6s */
        @keyframes bubble3-anim {
            0%     { opacity: 0; transform: translateY(8px); }
            50%    { opacity: 0; transform: translateY(8px); } /* 3s mark */
            56.67% { opacity: 1; transform: translateY(0); }   /* 3s + 0.4s = 3.4s (56.67%) */
            83.33% { opacity: 1; transform: translateY(0); }   /* hold until 5s */
            100%   { opacity: 0; transform: translateY(0); }
        }

        /* LOADING BAR: starts at 1.5s, fills over 1.5s (reaches 100% at 3s), then hides */
        @keyframes loading-bar-anim {
            0%     { width: 0%; opacity: 0; }
            25%    { width: 0%; opacity: 0; }    /* 1.5s: starts */
            25.01% { width: 0%; opacity: 1; }   /* show bar */
            50%    { width: 100%; opacity: 1; } /* 3s: full */
            56.67% { width: 100%; opacity: 0; } /* bubble3 arrives, bar fades */
            100%   { width: 100%; opacity: 0; }
        }

        /* JS-driven animation: bubbles start hidden, JS toggles .visible/.fade-out */
        .recovery-bubble-1,
        .recovery-bubble-2,
        .recovery-bubble-3 {
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
        }
        .recovery-bubble-1.visible,
        .recovery-bubble-2.visible,
        .recovery-bubble-3.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .recovery-bubble-1.fade-out,
        .recovery-bubble-2.fade-out,
        .recovery-bubble-3.fade-out {
            opacity: 0;
            transform: translateY(0);
            transition: opacity 0.5s ease-in;
        }
        .recovery-bubble-2 .bubble-loading-bar-fill {
            width: 0%;
            transition: none;
        }
        .recovery-bubble-2 .bubble-loading-bar-fill.filling {
            width: 100%;
            transition: width 1.5s linear;
        }

        /* Show/hide logic: mobile version hidden on desktop, desktop version hidden on mobile */
        .hero-right--mobile {
            display: flex;
        }
        .hero-right--desktop {
            display: none;
        }
        /* Was implicitly hidden below 900px by living inside
           .hero-right--desktop (display:none there). Now a direct child of
           .hero instead (see HTML), so it needs its own explicit hide —
           without this it renders as a bare, unstyled 300x150 default
           canvas box sitting in normal document flow on mobile. */
        #heroCanvasDesktop {
            display: none;
        }
        @media (min-width: 900px) {
            .hero-right--mobile {
                display: none;
            }
            .hero-right--desktop {
                display: flex;
                flex: 0 0 48%;
                min-height: 560px;
                align-items: center;
                justify-content: center;
                position: relative;
            }
            /* Desktop wireframe — same icosahedron used everywhere else on
               the page, given real presence (opacity 0.85 vs the ambient
               background canvas's 0.4). Direct child of .hero now, not
               confined to .hero-right--desktop's column, so it can grow
               past that band on scroll (see initHeroSceneDesktop). Sits
               just above the -1-tier background layers (ambient glow,
               mobile canvas) and below .hero-inner's content. transform
               is set per-frame by JS (scale from ~half-hero at rest up to
               1 = full hero by scroll-exit); transform-origin anchors that
               growth toward the right side, where it already sits at rest,
               instead of growing symmetrically from the center. No mask
               here (unlike the old confined version) — a hard-edged mask
               fighting against a scale animation that's supposed to read
               as "filling the whole hero" would undercut the effect. */
            #heroCanvasDesktop {
                display: block;
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                opacity: 0.85;
                pointer-events: none;
                transform-origin: 74% 50%;
                will-change: transform;
            }
        }

        /* On desktop, hero is left-aligned inside the left column */
        @media (min-width: 900px) {
            .hero {
                text-align: left;
            }
            .hero p {
                margin-left: 0;
                margin-right: 0;
            }
            .hero-buttons {
                justify-content: flex-start;
            }
            .hero-sub {
                text-align: left;
            }
        }

        /* Mobile: recovery loop sits between headline and CTA with some spacing */
        .hero-right--mobile {
            margin-bottom: 24px;
        }

        /* Mobile: shrink container a bit on small screens */
        @media (max-width: 400px) {
            .recovery-loop {
                width: 100%;
                max-width: 100%;
            }
        }

        .hero-demo {
            display: inline-block;
            background: transparent;
            color: var(--text);
            border: 2px solid var(--border);
            padding: 14px 32px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.2s;
            cursor: pointer;
        }
        .hero-demo:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* Stats bar */
        .stats {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 40px 50px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            text-align: center;
        }
        .stat {
            padding: 32px 20px;
            background: rgba(44, 44, 46, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 16px;
            transition: all 0.3s;
        }
        .stat:nth-child(2) {
            background: #1A1A1C;
            border: 1px solid rgba(255,255,255,0.07);
        }
        .stat-num {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 36px;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 4px;
        }
        .stat:nth-child(2) .stat-num {
            color: var(--accent);
        }
        /* ADD 6 — Stat label typography: reads as certification, not caption */
        .stat-label {
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.68rem;
            font-weight: 600;
            color: #636368;
        }

        /* Trust Indicators */
        .trust-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px 40px 50px;
            text-align: center;
        }
        .trust-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 32px;
        }
        .trust-icon {
            width: 28px;
            height: 28px;
            background: rgba(48, 209, 88, 0.15);
            border: 1px solid rgba(48, 209, 88, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--green);
            font-size: 14px;
            font-weight: 700;
        }
        .trust-badge p {
            font-size: 15px;
            color: var(--text-muted);
            margin: 0;
        }
        .trust-badges {
            display: grid;
            grid-template-columns: repeat(2, minmax(240px, 1fr));
            gap: 16px 32px;
            justify-content: center;
            max-width: 640px;
            margin: 0 auto;
        }
        .trust-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--text);
            font-weight: 500;
        }
        .trust-emoji {
            width: 20px;
            height: 20px;
            stroke: var(--accent);
            stroke-width: 2;
            fill: none;
            flex-shrink: 0;
        }

        /* How It Works - Visual Walkthrough */
        .how-it-works-section {
            background: linear-gradient(180deg,
                var(--bg) 0%,
                rgba(100, 181, 246, 0.02) 50%,
                var(--bg) 100%
            );
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--section-y) 40px;
            text-align: center;
        }
        .how-it-works-section h2 {
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 16px;
        }
        .steps-container {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 24px;
            margin-top: 60px;
        }
        .step-card {
            flex: 1;
            max-width: 320px;
            background: rgba(44, 44, 46, 0.4);
            backdrop-filter: blur(10px);
            border: 2px solid var(--border);
            border-radius: 20px;
            padding: 24px 32px;
            position: relative;
            transition: all 0.3s;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }
        .step-card:hover {
            border-color: rgba(201, 147, 58, 0.5);
            background: rgba(44, 44, 46, 0.6);
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }
        .step-card:nth-child(3) {
            border-color: rgba(255, 255, 255, 0.07);
        }
        .step-card:nth-child(3):hover {
            border-color: rgba(201, 147, 58, 0.5);
        }
        .step-number {
            position: absolute;
            /* Was top:-8px, left:-4px — negative offsets pushed this large
               (56px) numeral outside the card's own padding box, so it
               clipped against the card's border and 20px border-radius
               corner instead of sitting inside it. Positive offsets keep it
               within the padding box, clear of both the straight border
               edges and the rounded corner's curve. */
            top: 16px;
            left: 20px;
            font-size: 56px;
            font-weight: 800;
            color: #C9933A;
            opacity: 0.12;
            line-height: 1;
            user-select: none;
            pointer-events: none;
            z-index: 0;
        }
        .step-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 20px;
            stroke: var(--accent);
            stroke-width: 2;
            fill: none;
            position: relative;
            z-index: 1;
        }
        .step-card h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #F2F2F4;
            position: relative;
            z-index: 1;
        }
        .step-card p {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.7;
        }
        .step-arrow {
            font-size: 32px;
            color: var(--accent);
            font-weight: 300;
            flex-shrink: 0;
        }

        /* Client Booking Page Mockup */
        .booking-mockup-section {
            background: linear-gradient(180deg,
                var(--bg) 0%,
                rgba(201, 147, 58, 0.02) 50%,
                var(--bg) 100%
            );
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 40px;
            text-align: center;
        }
        .booking-mockup-section .section-label {
            color: var(--accent-secondary);
        }
        .booking-mockup-section h2 {
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 16px;
        }
        .booking-mockup-container {
            display: flex;
            justify-content: center;
            margin-top: 60px;
        }
        .booking-mockup-device {
            width: 100%;
            max-width: 520px;
            background: rgba(44, 44, 46, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 24px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        }
        .booking-mockup-screen {
            background: rgba(28, 28, 30, 0.8);
            border-radius: 16px;
            padding: 24px;
            text-align: left;
        }
        .booking-step {
            margin-bottom: 24px;
        }
        .booking-step:last-child {
            margin-bottom: 0;
        }
        .booking-step-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 12px;
            letter-spacing: -0.3px;
        }
        .service-card-mockup {
            background: rgba(58, 58, 60, 0.6);
            border: 2px solid var(--accent);
            border-radius: 12px;
            padding: 16px;
            position: relative;
            overflow: hidden;
            min-height: 64px;
        }
        .service-card-mockup::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            pointer-events: none;
            border-radius: 10px;
        }
        .service-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
            transition: opacity 0.4s ease-in-out;
            position: relative;
            z-index: 1;
        }
        .service-details {
            font-size: 13px;
            color: var(--text-muted);
            transition: opacity 0.4s ease-in-out;
            position: relative;
            z-index: 1;
        }
        .service-card-mockup.fading {
            opacity: 0.3;
        }
        .service-card-mockup.fading .service-name,
        .service-card-mockup.fading .service-details {
            opacity: 0;
        }
        .calendar-mockup {
            background: rgba(58, 58, 60, 0.4);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
        }
        .calendar-header {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 12px;
            text-align: center;
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            text-align: center;
        }
        .calendar-day {
            font-size: 10px;
            color: var(--text-muted);
            padding: 4px;
            font-weight: 600;
        }
        .calendar-date {
            font-size: 12px;
            color: var(--text);
            padding: 6px;
            border-radius: 6px;
            cursor: pointer;
        }
        .calendar-date.selected {
            background: var(--accent-secondary);
            color: var(--on-accent);
            font-weight: 600;
        }
        .time-slots-mockup {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        .time-slot {
            background: rgba(58, 58, 60, 0.4);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px;
            font-size: 13px;
            color: var(--text);
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .time-slot.selected {
            border: 2px solid #C9933A;
            background: rgba(201,147,58,0.12);
            color: #C9933A;
            font-weight: 700;
        }
        .form-mockup {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .form-field {
            background: rgba(58, 58, 60, 0.4);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            color: var(--text-muted);
        }
        .book-button-mockup {
            background: var(--accent);
            color: var(--on-accent);
            border-radius: 12px;
            padding: 14px;
            font-size: 15px;
            font-weight: 700;
            text-align: center;
            margin-top: 16px;
            box-shadow: 0 0 30px rgba(201, 147, 58, 0.3);
        }

        /* ── Demo Step Dots ─────────────────────────────── */
        .demo-step-dots {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin-bottom: 20px;
        }
        .demo-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            transition: background 0.3s, transform 0.3s;
            flex-shrink: 0;
        }
        .demo-dot.active {
            background: #C9933A;
            transform: scale(1.3);
            box-shadow: 0 0 8px rgba(201,147,58,0.5);
        }
        .demo-dot.done {
            background: rgba(201,147,58,0.45);
        }
        .demo-dot-line {
            width: 20px;
            height: 2px;
            background: rgba(255,255,255,0.10);
            flex-shrink: 0;
        }
        .demo-dot-line.done {
            background: rgba(201,147,58,0.4);
        }
        /* Step panels */
        .demo-step-panel {
            display: none;
        }
        .demo-step-panel.active {
            display: block;
        }
        /* Service cards */
        .demo-service-card {
            background: rgba(58,58,60,0.5);
            border: 1.5px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            position: relative;
        }
        .demo-service-card.selected {
            border: 2px solid #C9933A;
            background: rgba(201,147,58,0.08);
        }
        .demo-service-card-left {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .demo-svc-name {
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
        }
        .demo-svc-meta {
            font-size: 12px;
            color: rgba(255,255,255,0.55);
        }
        .demo-svc-price {
            font-size: 14px;
            font-weight: 700;
            color: #C9933A;
        }
        .demo-selected-badge {
            display: none;
            font-size: 10px;
            font-weight: 700;
            color: #C9933A;
            background: rgba(201,147,58,0.10);
            border-radius: 999px;
            padding: 3px 8px;
            letter-spacing: 0.02em;
        }
        .demo-service-card.selected .demo-selected-badge {
            display: inline-block;
        }
        /* price always visible, even when selected */
        /* Calendar */
        .demo-calendar {
            background: rgba(58,58,60,0.35);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 14px;
            margin-bottom: 12px;
        }
        .demo-cal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .demo-cal-month {
            font-size: 13px;
            font-weight: 700;
            color: #FFFFFF;
        }
        .demo-cal-nav {
            font-size: 14px;
            color: rgba(255,255,255,0.4);
            cursor: default;
            padding: 0 4px;
        }
        .demo-cal-days-row {
            display: grid;
            grid-template-columns: repeat(7,1fr);
            gap: 2px;
            margin-bottom: 4px;
        }
        .demo-cal-dow {
            font-size: 9px;
            font-weight: 600;
            color: rgba(255,255,255,0.35);
            text-align: center;
            padding: 2px 0;
            letter-spacing: 0.04em;
        }
        .demo-cal-grid {
            display: grid;
            grid-template-columns: repeat(7,1fr);
            gap: 2px;
        }
        .demo-cal-cell {
            font-size: 11px;
            color: rgba(255,255,255,0.7);
            text-align: center;
            padding: 5px 2px 2px;
            border-radius: 50%;
            position: relative;
            cursor: default;
            line-height: 1.2;
        }
        .demo-cal-cell.empty { visibility: hidden; }
        .demo-cal-cell.past { color: rgba(255,255,255,0.2); }
        .demo-cal-cell.available::after {
            content: '';
            display: block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #C9933A;
            margin: 2px auto 0;
        }
        .demo-cal-cell.selected-date {
            background: #C9933A;
            color: #000000;
            font-weight: 700;
            border-radius: 50%;
        }
        .demo-cal-cell.selected-date::after {
            display: none;
        }
        /* Next available link */
        .demo-next-avail {
            font-size: 11px;
            color: #C9933A;
            text-align: right;
            margin-bottom: 10px;
            cursor: default;
            letter-spacing: -0.01em;
        }
        /* Pill time slots */
        .demo-time-grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 7px;
            margin-bottom: 4px;
        }
        .demo-time-pill {
            background: rgba(58,58,60,0.45);
            border: 1.5px solid rgba(255,255,255,0.10);
            border-radius: 999px;
            padding: 8px 4px;
            font-size: 11px;
            font-weight: 500;
            color: rgba(255,255,255,0.75);
            text-align: center;
            cursor: pointer;
            transition: all 0.15s;
        }
        .demo-time-pill.selected {
            background: #C9933A;
            border-color: #C9933A;
            color: #000000;
            font-weight: 700;
            box-shadow: 0 0 10px rgba(201,147,58,0.35);
        }
        .demo-tz-label {
            font-size: 10px;
            color: rgba(255,255,255,0.3);
            text-align: center;
            margin-top: 6px;
            letter-spacing: 0.02em;
        }
        /* Continue button sticky at bottom */
        .demo-continue-btn {
            width: 100%;
            background: #C9933A;
            color: #000000;
            border: none;
            border-radius: 12px;
            padding: 14px;
            font-size: 15px;
            font-weight: 700;
            text-align: center;
            margin-top: 16px;
            cursor: pointer;
            box-shadow: 0 0 20px rgba(201,147,58,0.3);
            letter-spacing: -0.01em;
            transition: opacity 0.15s;
        }
        .demo-continue-btn:hover { opacity: 0.9; }
        /* Confirmation banner */
        .demo-confirm-banner {
            background: #C9933A;
            border-radius: 12px 12px 0 0;
            padding: 16px;
            text-align: center;
            margin: -24px -24px 20px -24px;
        }
        .demo-confirm-banner h3 {
            font-size: 17px;
            font-weight: 800;
            color: #000000;
            margin: 0 0 2px;
            letter-spacing: -0.03em;
        }
        .demo-confirm-banner p {
            font-size: 12px;
            color: rgba(0,0,0,0.6);
            margin: 0;
        }
        .demo-confirm-detail {
            background: rgba(58,58,60,0.4);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 10px;
        }
        .demo-confirm-label {
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.35);
            text-transform: uppercase;
            letter-spacing: 0.07em;
            margin-bottom: 4px;
        }
        .demo-confirm-value {
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
        }
        .demo-add-cal {
            width: 100%;
            background: transparent;
            border: 1.5px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            padding: 11px;
            font-size: 13px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            text-align: center;
            margin-top: 14px;
            cursor: default;
            letter-spacing: -0.01em;
        }
        /* Business name in mockup header */
        .demo-biz-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }
        .demo-biz-avatar {
            width: 40px;
            height: 40px;
            border: 1.5px dashed rgba(255,255,255,0.30);
            border-radius: 8px;
            background: rgba(255,255,255,0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: opacity 300ms ease;
        }
        .demo-avatar-initials-wrap {
            position: relative;
            width: 100%;
            height: 12px;
            overflow: hidden;
        }
        .demo-avatar-initials {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 9px;
            color: var(--text-muted);
            font-weight: 400;
            text-align: center;
            transition: opacity 400ms ease-in-out;
        }
        .demo-avatar-initials.crossfade-hidden { opacity: 0; }
        .demo-avatar-initials.crossfade-visible { opacity: 1; }
        .demo-biz-name-wrap {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .demo-biz-name-crossfade {
            position: relative;
            height: 24px;
            overflow: hidden;
        }
        .demo-biz-name {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 15px;
            font-weight: 700;
            color: #FFFFFF;
            letter-spacing: -0.02em;
            transition: opacity 400ms ease-in-out;
        }
        .demo-biz-name.crossfade-hidden { opacity: 0; }
        .demo-biz-name.crossfade-visible { opacity: 1; }
        .demo-biz-brand-line {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 400;
            margin-top: 3px;
        }
        .demo-step-label {
            font-size: 11px;
            font-weight: 700;
            color: rgba(255,255,255,0.35);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 12px;
        }

        /* Dashboard Preview */
        .dashboard-preview-section {
            background: linear-gradient(180deg,
                var(--bg) 0%,
                rgba(100, 181, 246, 0.01) 50%,
                var(--bg) 100%
            );
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 40px;
            text-align: center;
        }
        .dashboard-preview-section h2 {
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 16px;
        }
        .dashboard-preview {
            margin: 60px 0;
        }
        .preview-image-container {
            display: flex;
            justify-content: center;
            margin-bottom: 60px;
        }
        .preview-mockup {
            width: 100%;
            max-width: 900px;
            background: rgba(44, 44, 46, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        }
        .mockup-header {
            background: rgba(58, 58, 60, 0.7);
            border-bottom: 1px solid var(--border);
            padding: 20px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .mockup-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
        }
        .mockup-badge {
            background: rgba(201, 147, 58, 0.1);
            border: 1px solid rgba(201, 147, 58, 0.3);
            color: var(--accent);
            padding: 4px 12px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .mockup-content {
            padding: 32px;
        }
        .mockup-stats-row-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        .mockup-stat-card {
            background: rgba(58, 58, 60, 0.5);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            text-align: left;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .mockup-stat-card:nth-child(2),
        .mockup-stat-card:nth-child(4) {
            background: #1A1A1C;
            border: 1px solid rgba(255,255,255,0.07);
        }
        .mockup-stat-label {
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 8px;
            line-height: 1.3;
        }
        .mockup-stat-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--text);
        }
        .mockup-chart-section {
            background: rgba(58, 58, 60, 0.5);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .mockup-chart-placeholder {
            background: rgba(44, 44, 46, 0.3);
            border-radius: 8px;
            padding: 16px;
            overflow: hidden;
        }
        .mockup-activity-section {
            background: rgba(58, 58, 60, 0.5);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .mockup-activity-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .mockup-activity-item {
            background: rgba(44, 44, 46, 0.4);
            border: 1px solid var(--border);
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 13px;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mockup-activity-item span {
            color: var(--green);
            font-weight: 600;
        }
        .preview-features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }
        .preview-feature {
            text-align: center;
            padding: 20px;
            border-radius: 12px;
            transition: all 0.3s;
        }
        .preview-feature:hover {
            background: rgba(58, 58, 60, 0.3);
        }
        .preview-feature-icon {
            width: 36px;
            height: 36px;
            margin: 0 auto 12px;
            stroke: var(--accent);
            stroke-width: 2;
            fill: none;
        }
        .preview-feature h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text);
        }
        .preview-feature p {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* How it works */
        .section {
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--section-y) 40px;
        }
        .section-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 20px;
        }
        .section-subtitle {
            font-size: 17px;
            color: rgba(255, 255, 255, 0.65);
            font-weight: 400;
            line-height: 1.6;
        }
        .section h2 {
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 60px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        .feature-card {
            background: rgba(58, 58, 60, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 40px;
            transition: all 0.3s;
        }
        .feature-card:hover {
            border-color: rgba(201, 147, 58, 0.25);
            background: rgba(58, 58, 60, 0.8);
            transform: translateY(-2px);
        }
        .feature-card:nth-child(even) {
            background: rgba(44, 44, 46, 0.6);
        }
        .feature-icon {
            width: 48px;
            height: 48px;
            background: rgba(201, 147, 58, 0.1);
            border: 1px solid rgba(201, 147, 58, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            padding: 12px;
        }
        .feature-icon svg {
            width: 100%;
            height: 100%;
            stroke: var(--accent);
            stroke-width: 2;
            fill: none;
        }
        .feature-card h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .feature-card p {
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.7;
        }

        /* Comparison */
        .comparison {
            background: rgba(44, 44, 46, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 48px;
            margin-top: 80px;
        }
        .comparison h3 {
            font-size: 24px;
            margin-bottom: 32px;
            text-align: center;
        }
        .comp-table {
            width: 100%;
            border-collapse: collapse;
        }
        .comp-table th {
            text-align: left;
            padding: 12px 16px;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
        }
        .comp-table th:last-child {
            color: var(--accent);
        }
        .comp-table td {
            padding: 16px;
            font-size: 15px;
            border-bottom: 1px solid var(--border);
            color: var(--text-muted);
        }
        .comp-table td:last-child {
            color: var(--text);
        }
        .comp-table tr:last-child td { border-bottom: none; }
        .check { color: #C9933A; font-weight: 700; }
        .cross { color: var(--text-muted); }

        /* CTA Section */
        .cta-section {
            text-align: center;
            padding: 88px 40px;
            max-width: 700px;
            margin: 0 auto;
        }
        .cta-section h2 {
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 700;
            letter-spacing: -2px;
            margin-bottom: 20px;
        }
        .cta-section p {
            font-size: 18px;
            color: var(--text-muted);
            margin-bottom: 40px;
        }

        /* Pricing Section */
        .pricing-section {
            position: relative;
            padding-top: var(--section-y);
            padding-bottom: var(--section-y);
        }
        /* Full-bleed background/border via a ::before that escapes the
           section's own max-width:1200px box (from the shared .section
           class) instead of living on the section element itself. Without
           this, the visible background panel and its top/bottom border
           lines were capped at 1200px too — on any monitor wider than
           ~1280px that reads as a floating, hard-edged box in the middle
           of the page instead of the full-width panel it's meant to be.
           Standard full-bleed-within-a-centered-container pattern: 100vw
           centered via left:50%/translateX(-50%), independent of whatever
           padding/max-width the content itself uses. */
        .pricing-section::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 100vw;
            transform: translateX(-50%);
            background: var(--surface);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            z-index: -1;
        }
        .pricing-header {
            text-align: center;
            margin-bottom: 60px;
        }
        /* ROI micro-calculator — reframes $19 against the cost of doing
           nothing. Inputs wrap via flex-wrap rather than a media query, so
           it stacks naturally on narrow screens without extra breakpoints. */
        .roi-calc {
            max-width: 560px;
            margin: 40px auto 0;
            background: rgba(58, 58, 60, 0.5);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 28px 24px;
        }
        .roi-calc-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 18px;
            text-align: center;
        }
        .roi-calc-inputs {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        .roi-calc-field {
            flex: 1;
            min-width: 180px;
        }
        .roi-calc-field label {
            display: block;
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 6px;
        }
        .roi-calc-field input {
            width: 100%;
            padding: 10px 12px;
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: #F2F2F4;
            font-size: 16px;
            box-sizing: border-box;
        }
        .roi-calc-field input:focus {
            outline: none;
            border-color: var(--accent);
        }
        .roi-calc-result {
            margin-top: 22px;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: #F2F2F4;
            line-height: 1.5;
        }
        .roi-calc-amount {
            color: var(--accent);
            font-weight: 800;
        }
        .roi-calc-nevergap {
            color: var(--green);
            font-weight: 800;
        }
        .roi-calc-note {
            margin-top: 8px;
            text-align: center;
            font-size: 11px;
            color: var(--text-muted);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 1120px;
            margin: 0 auto;
            align-items: start;
        }
        .pricing-card {
            background: rgba(58, 58, 60, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 48px 32px;
            transition: all 0.3s;
            position: relative;
        }
        .pricing-card:hover {
            border-color: rgba(201, 147, 58, 0.3);
            background: rgba(58, 58, 60, 0.7);
            transform: translateY(-2px);
        }
        .pricing-card.pro {
            border-color: rgba(201, 147, 58, 0.3);
            background: rgba(201, 147, 58, 0.05);
            transform: scale(1.05);
        }
        .pricing-card.pro:hover {
            transform: scale(1.05) translateY(-2px);
        }
        .pricing-badge {
            position: absolute;
            top: -12px;
            left: 24px;
            background: var(--accent);
            color: var(--on-accent);
            padding: 4px 12px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        /* Solo's audience/fit tag — deliberately muted (outline, not gold-filled) so it
           gives Solo an identity without competing with Pro's "Most Popular" badge. */
        .pricing-fit-tag {
            position: absolute;
            top: -12px;
            left: 24px;
            background: rgba(255,255,255,0.06);
            color: var(--text-muted);
            border: 1px solid var(--border);
            padding: 4px 12px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .billing-toggle {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-top: 32px;
            margin-bottom: 32px;
        }
        .billing-toggle-btn {
            padding: 10px 24px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            font-size: 15px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .billing-toggle-btn.active {
            background: var(--accent);
            color: var(--on-accent);
        }
        .billing-toggle-btn:not(.active) {
            background: rgba(255,255,255,0.1);
            color: var(--text-muted);
            border: 1px solid var(--border);
        }
        .savings-badge {
            background: rgba(201,147,58,0.15);
            color: #C9933A;
            border: 1px solid rgba(201,147,58,0.35);
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
        .pricing-name {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .pricing-price {
            font-size: 36px;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 4px;
        }
        .pricing-desc {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 32px;
        }
        .pricing-list {
            list-style: none;
            margin-bottom: 32px;
        }
        .pricing-list li {
            padding: 12px 0;
            font-size: 14px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .pricing-list li:last-child {
            border-bottom: none;
        }
        .pricing-list .check {
            color: #C9933A;
            font-weight: 700;
            font-size: 16px;
        }
        .pricing-list .cross {
            color: var(--text-muted);
            font-weight: 700;
            font-size: 16px;
        }
        .pricing-cta {
            display: block;
            width: 100%;
            padding: 14px 20px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            text-align: center;
            transition: all 0.2s;
            border: none;
            cursor: pointer;
        }
        .pricing-cta.free {
            background: var(--surface);
            color: var(--text);
            border: 1px solid var(--border);
        }
        .pricing-cta.free:hover {
            background: var(--border);
        }
        .pricing-cta.free:active {
            transform: scale(0.97);
        }
        .pricing-cta.pro {
            background: var(--accent);
            color: var(--on-accent);
            box-shadow: 0 0 30px rgba(201, 147, 58, 0.2);
        }
        .pricing-cta.pro:hover {
            box-shadow:
                0 0 24px rgba(201, 147, 58, 0.45),
                0 0 8px rgba(201, 147, 58, 0.30);
            transform: translateY(-1px);
            transition: all 0.2s ease;
        }
        .pricing-cta.pro:active {
            transform: translateY(0) scale(0.97);
            box-shadow: 0 0 12px rgba(201, 147, 58, 0.30);
        }
        /* Solo CTA — outlined gold: more inviting than Free's plain outline, quieter than Pro's filled glow */
        .pricing-cta.solo {
            background: rgba(201, 147, 58, 0.10);
            color: #C9933A;
            border: 1px solid rgba(201, 147, 58, 0.35);
        }
        .pricing-cta.solo:hover {
            background: rgba(201, 147, 58, 0.18);
        }
        .pricing-cta.solo:active {
            transform: scale(0.97);
        }

        /* ADD 4 — CTA glow also on nav-cta */
        .nav-cta:hover {
            box-shadow:
                0 0 20px rgba(201, 147, 58, 0.40),
                0 0 6px rgba(201, 147, 58, 0.25);
            transform: translateY(-1px);
            opacity: 1 !important;
            transition: all 0.2s ease;
        }
        .nav-cta:active {
            transform: translateY(0);
        }

        /* Competitor Takedown Section */
        .competitor-takedown {
            display: flex;
            gap: 20px;
            max-width: 900px;
            margin: 48px auto 0;
            padding: 0 24px;
        }
        .competitor-takedown .takedown-card {
            flex: 1;
            background: rgba(40, 40, 42, 0.6);
            border-radius: 16px;
            padding: 28px;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .competitor-takedown .vagaro-card {
            opacity: 0.7;
            background: rgba(60, 60, 62, 0.4);
        }
        .competitor-takedown .vagaro-card .card-title { color: var(--text-muted); }
        .competitor-takedown .nevergap-card {
            border: 2px solid #C9933A;
            background: rgba(201, 147, 58, 0.05);
        }
        .competitor-takedown .card-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 6px;
        }
        .competitor-takedown .card-subtitle {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 20px;
        }
        .competitor-takedown .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 12px;
            font-size: 14px;
        }
        .competitor-takedown .feature-icon {
            font-size: 14px;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .competitor-takedown .feature-text { color: #D0D0D8; }

        /* Feature Proof Strip */
        .feature-strip {
            max-width: 1000px;
            margin: var(--section-y) auto 0;
            padding: 0 24px;
        }
        .feature-strip .feature-strip-title {
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            line-height: 1.2;
            margin: 0 0 28px;
        }
        .feature-strip .feature-strip-row {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 12px;
            scrollbar-width: thin;
            scrollbar-color: rgba(201,147,58,0.3) transparent;
        }
        .feature-strip .feature-strip-row::-webkit-scrollbar { height: 4px; }
        .feature-strip .feature-strip-row::-webkit-scrollbar-track { background: transparent; }
        .feature-strip .feature-strip-row::-webkit-scrollbar-thumb { background: rgba(201,147,58,0.3); border-radius: 2px; }
        .feature-strip .feature-strip-card {
            flex: 0 0 300px;
            background: #111113;
            border: 1px solid rgba(255,255,255,0.06);
            border-left: 3px solid #C9933A;
            border-radius: 12px;
            padding: 24px;
            scroll-snap-align: start;
        }
        .feature-strip .feature-strip-icon {
            margin-bottom: 14px;
        }
        .feature-strip .feature-strip-icon svg {
            width: 24px;
            height: 24px;
            stroke: var(--accent);
            stroke-width: 2;
            fill: none;
        }
        .feature-strip .feature-strip-heading {
            font-size: 15px;
            font-weight: 700;
            color: #FFFFFF;
            margin-bottom: 8px;
        }
        .feature-strip .feature-strip-desc {
            font-size: 14px;
            color: #C8C8CC;
            line-height: 1.6;
            margin-bottom: 14px;
        }
        .feature-strip .feature-strip-sub {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* Unified Three-Column Comparison Table */
        .comparison-table {
            background: #1A1A1C;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            overflow: hidden;
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Mobile-only simplified list — same data as the table above,
           shown instead of it below 640px (see media query). Hidden on
           desktop by default. */
        .comparison-mobile-list {
            display: none;
            background: #1A1A1C;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            overflow: hidden;
            max-width: 680px;
            margin: 0 auto;
        }
        .comparison-mobile-row {
            padding: 14px 20px;
            font-size: 14px;
            line-height: 1.5;
            color: #F2F2F4;
            text-align: left;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        .comparison-mobile-row:first-child {
            border-top: none;
        }
        .comparison-mobile-row .win-mark {
            color: #C9933A;
            font-weight: 700;
            margin-right: 6px;
        }
        .comparison-table-header {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .comparison-table-header-cell {
            padding: 16px 20px;
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            color: #636368;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .comparison-table-header-cell:first-child {
            text-align: left;
            background: transparent;
            font-size: 13px;
            font-weight: 700;
            color: #F2F2F4;
            text-transform: none;
            letter-spacing: normal;
        }

        .comparison-table-header-cell.nevergap-col {
            background: rgba(201,147,58,0.15);
            border-top: 2px solid #C9933A;
            border-left: 1px solid rgba(201,147,58,0.20);
            border-right: 1px solid rgba(201,147,58,0.20);
            box-shadow: 0 0 20px rgba(201,147,58,0.15);
        }

        .comparison-table-header-cell.nevergap-col .header-name {
            font-size: 13px;
            font-weight: 700;
            color: #C9933A;
            display: block;
            margin-bottom: 2px;
        }

        .comparison-table-header-cell.nevergap-col .header-price {
            font-size: 12px;
            color: #C9933A;
            display: block;
        }

        .comparison-table-header-cell.calendly-col {
            background: rgba(255,255,255,0.03);
            padding: 16px 20px;
        }

        .comparison-table-header-cell.calendly-col .header-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            display: block;
            margin-bottom: 2px;
        }

        .comparison-table-header-cell.calendly-col .header-price {
            font-size: 12px;
            color: var(--text-muted);
            display: block;
        }

        .comparison-table-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            min-height: 44px;
            border-top: 1px solid rgba(255,255,255,0.05);
        }

        .comparison-table-row:nth-child(even) {
            background: rgba(255,255,255,0.02);
        }

        .comparison-table-row:nth-child(odd) {
            background: transparent;
        }

        .comparison-table-cell {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }

        .comparison-table-cell:first-child {
            text-align: left;
            justify-content: flex-start;
            color: #F2F2F4;
            font-weight: 400;
        }

        .comparison-table-cell.nevergap-col {
            background: rgba(201,147,58,0.06);
            border-left: 1px solid rgba(201,147,58,0.12);
            border-right: 1px solid rgba(201,147,58,0.12);
            color: #C9933A;
            font-weight: 600;
        }

        .comparison-table-cell.calendly-col {
            color: var(--text-muted);
        }

        .comparison-table-cell.check {
            color: var(--text-muted);
        }

        .comparison-table-cell.cross {
            color: var(--text-muted);
        }

        /* Mobile responsive — simplified list instead of a resized table.
           The 3-column grid doesn't read as a table on narrow screens; below
           640px we hide it entirely and show .comparison-mobile-list, which
           carries the same data in a one-line-per-feature format instead. */
        @media (max-width: 640px) {
            .comparison-table {
                display: none;
            }

            .comparison-mobile-list {
                display: block;
            }

            /* Widen the next-card edge-peek so the horizontal scroll is more
               obviously noticeable — was a fixed 300px card width, which only
               left ~22px of the next card visible at common phone widths. A
               calc-based width keeps the peek consistent (~28px) across
               narrower phones too, instead of being tied to one viewport size. */
            .feature-strip .feature-strip-card {
                flex: 0 0 calc(100% - 48px);
            }
        }

        /* Footer */
        footer {
            border-top: 1px solid var(--border);
            padding: var(--section-y) 40px 0;
            padding-bottom: var(--section-y);
            color: var(--text-muted);
            font-size: 13px;
        }
        footer a {
            color: var(--text-muted);
            text-decoration: none;
        }
        footer a:hover {
            color: var(--text);
        }
        .footer-inner {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 40px;
            max-width: 1000px;
            margin: 0 auto;
            flex-wrap: wrap;
            text-align: left;
        }
        .footer-brand {
            max-width: 260px;
        }
        .footer-logo {
            font-size: 18px;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 8px;
        }
        .footer-tagline {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.5;
        }
        .footer-columns {
            display: flex;
            gap: 48px;
            flex-wrap: wrap;
        }
        .footer-col {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .footer-col-title {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--text);
            margin-bottom: 4px;
        }
        .footer-cta p {
            margin-bottom: 12px;
            color: var(--text);
            font-weight: 600;
        }
        .footer-cta .hero-cta {
            padding: 10px 22px;
            font-size: 14px;
            box-shadow: none;
        }
        /* Brand-column trust badges (R2-F) — reuses the exact claim wording
           already established and vetted elsewhere on this page (pricing
           section's security list, this footer's own prior copy) rather
           than inventing new claims. */
        .footer-trust-badges {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 16px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.55);
        }
        /* Comparison strip — near pricing, honest jab at competitors' setup
           fees/contracts/sales calls/feature paywalls. */
        .comparison-strip {
            text-align: center;
            margin-top: 24px;
            font-size: 14px;
            font-weight: 600;
            color: #F2F2F4;
        }
        .footer-bottom {
            text-align: center;
            margin-top: 40px;
            padding-top: 24px;
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        @media (max-width: 640px) {
            .footer-inner {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .footer-brand {
                max-width: 100%;
            }
            .footer-trust-badges {
                align-items: center;
            }
            .footer-columns {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                width: 100%;
                gap: 32px;
            }
            .footer-col {
                align-items: center;
                gap: 0;
            }
            /* 44px tap target per R2-F, not just visual gap - each link gets
               its own padded hit area rather than relying on inter-link
               spacing alone. */
            .footer-col a {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 12px 0;
                min-height: 44px;
                box-sizing: border-box;
            }
            .footer-cta {
                text-align: center;
            }
        }

        /* FAQ Accordion Section */
        .comparison-section {
            padding-top: var(--section-y);
            padding-bottom: var(--section-y);
        }
        .faq-section {
            text-align: center;
            padding-top: var(--section-y);
            padding-bottom: var(--section-y);
        }
        .faq-container {
            max-width: 1000px;
            margin: 0 auto;
            text-align: left;
        }
        .faq-accordion-item {
            background: rgba(44, 44, 46, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: border-color 0.3s, background-color 0.3s;
        }
        .faq-accordion-item:hover {
            border-color: rgba(201, 147, 58, 0.3);
            background: rgba(44, 44, 46, 0.7);
        }
        .faq-accordion-item.active {
            border-color: rgba(201, 147, 58, 0.5);
        }
        .faq-accordion-header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: transparent;
            border: none;
            color: var(--text);
            font-size: 16px;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            transition: all 0.2s;
            -webkit-tap-highlight-color: transparent;
        }
        .faq-accordion-header:hover {
            color: var(--accent);
        }
        .faq-accordion-header:active {
            opacity: 0.7;
        }
        .faq-accordion-header span:first-child {
            flex: 1;
            padding-right: 20px;
        }
        .faq-icon {
            font-size: 24px;
            font-weight: 300;
            color: var(--accent);
            transition: transform 300ms ease;
            flex-shrink: 0;
        }
        .faq-accordion-item.active .faq-icon {
            transform: rotate(45deg);
        }
        .faq-accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 300ms ease-out, padding 300ms ease-out;
            padding: 0 24px;
        }
        .faq-accordion-item.active .faq-accordion-content {
            max-height: 500px;
            padding: 0 24px 20px 24px;
        }
        .faq-accordion-content p {
            margin: 0;
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.7;
        }
        .faq-accordion-content a {
            color: var(--accent);
            text-decoration: none;
        }
        .faq-accordion-content a:hover {
            text-decoration: underline;
        }

        /* ================================================================
           ANIMATION 1: HERO STATS COUNT-UP ON SCROLL
           Uses IntersectionObserver to trigger once when stats enter viewport
           ================================================================ */
        .stat-number {
            min-height: 1.2em;
        }

        /* ================================================================
           ANIMATION 2: CTA BUTTON SHIMMER SWEEP
           Diagonal shine overlay that animates every 5 seconds
           ================================================================ */
        @keyframes btn-shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }

        .hero-cta,
        .pricing-cta.pro {
            position: relative;
            overflow: hidden;
        }

        .hero-cta::after,
        .pricing-cta.pro::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                105deg,
                transparent 40%,
                rgba(255, 255, 255, 0.15) 50%,
                transparent 60%
            );
            background-size: 200% auto;
            animation: btn-shimmer 5s ease-in-out infinite;
            border-radius: inherit;
            pointer-events: none;
        }

        /* ================================================================
           ANIMATION 4: HERO BACKGROUND LIGHT DRIFT
           Two slow-drifting radial gradients in gold/warm amber
           ================================================================ */
        @keyframes ambient-drift {
            0% { transform: translate3d(0, 0, 0) scale(1); }
            100% { transform: translate3d(38px, 26px, 0) scale(1.11); }
        }

        /* Replaces the old two-orb setup (.hero-orb-1/-2, fixed 600px/500px
           circles positioned from opposite edges). Those were tuned
           independently and, at real viewport widths, left a genuine gap
           between them with no coverage at all — confirmed by measuring
           their actual box positions, not just eyeballing it. Root cause:
           fixed-pixel boxes don't scale with viewport width, so any
           "overlap" tuned at one width silently reopens at another.
           This is one element sized in percentages of .hero's own box
           (ellipse 80% 60%), so it spans proportionally at any viewport
           width by construction — nothing to retune per breakpoint. */
        .hero-ambient-glow {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse 80% 60% at 50% 30%,
                rgba(201, 147, 58, 0.14) 0%,
                rgba(201, 147, 58, 0.06) 40%,
                transparent 75%);
            pointer-events: none;
            z-index: -1;
            animation: ambient-drift 22s ease-in-out infinite alternate;
        }

        .hero-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
            opacity: 0.4;
        }

        /* Ensure hero section positioning for orbs */
        .hero {
            position: relative;
            overflow: hidden;
        }

        /* Scroll-triggered reveal (IntersectionObserver-driven, see script at
           bottom of body). Sections start faded/offset and settle into place
           the first time they enter the viewport. */
        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .reveal.is-visible {
            opacity: 1;
            transform: none;
        }

        /* ================================================================
           ACCESSIBILITY: Disable all animations for users with prefers-reduced-motion
           ================================================================ */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important;
            }
            body::before {
                display: none;
            }
            .btn-shimmer,
            .hero-cta::after,
            .pricing-cta.pro::after,
            .hero-ambient-glow,
            .faq-accordion-content {
                animation: none !important;
                transition: none !important;
            }

            .faq-icon {
                transition: none !important;
            }

            /* Drawer: fade instead of slide (R2-G). More specific than the
               universal transition:none above, so this wins and the drawer
               still gets a brief opacity transition instead of either a
               slide or a hard instant cut. */
            .drawer {
                transform: none !important;
                opacity: 0;
                pointer-events: none;
                transition: opacity 200ms ease !important;
            }
            .drawer.open {
                opacity: 1;
                pointer-events: auto;
            }
        }

        /* Sticky Bottom CTA Bar */
        #stickyCTABar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 64px;
            background: #0A0A0B;
            border-top: 1px solid rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            z-index: 100;
            opacity: 0;
            transform: translateY(8px);
            pointer-events: none;
            transition: opacity 300ms ease, transform 300ms ease;
        }
        #stickyCTABar.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        #stickyCTABar .sticky-cta-left {
            font-size: 14px;
            font-weight: 500;
            color: #F2F2F4;
        }
        #stickyCTABar .sticky-cta-btn {
            background: #C9933A;
            color: #000000;
            font-size: 14px;
            font-weight: 700;
            border-radius: 8px;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            white-space: nowrap;
            display: inline-block;
        }
        @media (max-width: 639px) {
            #stickyCTABar .sticky-cta-left {
                display: none;
            }
            #stickyCTABar .sticky-cta-btn {
                width: calc(100% - 32px);
                margin: 0 auto;
                text-align: center;
                display: block;
            }
            #stickyCTABar {
                padding: 0 16px;
                justify-content: center;
            }
        }

        /* Chatbase widget positioning - push above sticky CTA bar */
        #chatbase-bubble-button {
            bottom: 64px !important;
        }

        /* FIX 2: Hide chatbase bubble initially — shown only after 8s delay or scroll past hero.
           FIX 3: also gate the chat WINDOW itself — Chatbase can auto-open the greeting window
           independently of the bubble button, which was covering the hero CTA, pricing
           features, and FAQ items on load. Gated via a body class (set once, in JS) rather
           than clearing inline styles, since clearing an inline override just falls back to
           this same !important rule and never actually reveals the element.
           FIX 5: this gate class must NOT contain the substring "chatbase" — the FIX 1 rule
           below matches [class*="chatbase"] on any ANCESTOR to catch dynamically-injected
           widget links, and a body class of "chatbase-ready" satisfied that wildcard for
           every link on the page, forcing all button text to the same gold as its background
           (invisible) once this gate flipped. Named "widget-shown" instead — same gate,
           no collision.
           FIX 6: #chatbase-message-bubbles (the proactive greeting bubble) is a third,
           separate element Chatbase injects independently of the button/window above —
           it was never gated, so it rendered immediately on load and overlapped the hero
           stats row and Problem section content regardless of scroll position. Same gate,
           same timing, no reason to treat it differently. */
        body:not(.widget-shown) #chatbase-bubble-button,
        body:not(.widget-shown) #chatbase-bubble-window,
        body:not(.widget-shown) #chatbase-message-bubbles {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            transition: none !important;
        }

        /* FIX 1: Force gold on ALL links inside Chatbase chat widget — no blue allowed */
        #chatbase-bubble-window a,
        #chatbase-bubble-window a:link,
        #chatbase-bubble-window a:visited,
        #chatbase-bubble-window a:hover,
        #chatbase-bubble-window a:active,
        [id*="chatbase"] a,
        [id*="chatbase"] a:link,
        [id*="chatbase"] a:visited,
        [class*="chatbase"] a,
        [class*="chatbase"] a:link,
        [class*="chatbase"] a:visited {
            color: #C9933A !important;
        }

        /* Mobile Nav Right Container (desktop hidden) */
        .mobile-nav-right {
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 300;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }

        /* Hamburger Button */
        .hamburger-button {
            display: none;
            width: 44px;
            height: 44px;
            background: none;
            border: none;
            cursor: pointer;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }
        .hamburger-line {
            display: block;
            width: 24px;
            height: 2px;
            background: #F2F2F4;
            transition: all 0.3s ease;
        }

        /* Drawer Overlay — uses pointer-events instead of display:none for smooth opacity transition */
        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.65);
            z-index: 199;
            opacity: 0;
            pointer-events: none;
            transition: opacity 300ms ease;
        }
        .drawer-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        /* Drawer */
        .drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: 280px;
            max-width: 280px;
            height: 100vh;
            background: #0A0A0B;
            border-left: 1px solid rgba(255, 255, 255, 0.08);
            z-index: 200;
            transform: translateX(100%);
            transition: transform 300ms ease-out;
            overflow-y: auto;
        }
        .drawer.open {
            transform: translateX(0);
        }
        .drawer-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 44px;
            height: 44px;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s;
        }
        .drawer-close:hover {
            color: #A0A0A8;
        }
        .drawer-nav {
            display: flex;
            flex-direction: column;
            padding: 72px 0 32px 0;
        }
        .drawer-nav-link {
            display: flex;
            align-items: center;
            padding: 0 28px;
            height: 56px;
            font-size: 17px;
            font-weight: 500;
            color: #F2F2F4;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            text-decoration: none;
            transition: color 0.2s;
        }
        .drawer-nav-link:hover {
            color: var(--accent);
        }
        .drawer-nav-login {
            margin-top: auto;
            display: flex;
            align-items: center;
            padding: 0 28px;
            height: 56px;
            font-size: 17px;
            font-weight: 500;
            color: #A0A0A8;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            text-decoration: none;
            transition: color 0.2s;
        }
        .drawer-nav-login:hover {
            color: var(--text);
        }

        /* Mobile Get Started Button (inside mobile-nav-right container) */
        .mobile-get-started {
            display: none;
            background: #C9933A;
            color: #000000;
            font-size: 13px;
            font-weight: 700;
            border-radius: 8px;
            padding: 8px 14px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: opacity 0.2s;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .mobile-get-started:hover {
            opacity: 0.85;
        }

        /* 375px small phone — tighter spacing, premium feel */
        @media (max-width: 375px) {
            .hero h1 { font-size: 28px; }
            .hero { padding: var(--hero-section-y-mobile) 16px; }
            .section { padding: var(--section-y) 16px; }
            .pricing-grid { gap: 16px; }
            .cta-section { padding: 40px 16px; }
            .pricing-header h2 { font-size: 26px; }
            /* Tighter vertical rhythm between sections on mobile */
            .steps-container { margin-top: 40px; }
            .features-grid { gap: 14px; }
            .pricing-card.pro,
            .pricing-card.solo,
            .pricing-card.free { padding: 28px 20px; }
            .faq-accordion-item { margin-bottom: 8px; }
            .faq-accordion-header { padding: 16px 20px; font-size: 14px; }
            /* Reduce section padding on compact sections */
            .how-it-works-section { padding: var(--section-y) 16px; }
            .merged-demo-section { padding: var(--section-y) 16px; }
            .feature-strip { margin-top: var(--section-y); }
            .feature-strip .feature-strip-row { gap: 12px; }
            .feature-strip .feature-strip-card { padding: 20px; }
        }

        /* Mobile */
        @media (max-width: 768px) {
            nav {
                padding: 20px 16px;
                display: flex !important;
                justify-content: space-between;
                align-items: center;
                flex-wrap: nowrap;
                width: 100%;
            }
            nav > div:nth-child(2) {
                display: none !important;
            }
            .logo { font-size: 22px; }
            .logo img { height: 28px; }
            .nav-buttons {
                display: none !important;
            }
            .mobile-nav-right {
                display: flex;
            }
            .hamburger-button {
                display: flex;
            }
            .mobile-get-started {
                display: inline-flex;
                align-items: center;
                padding: 6px 10px;
                font-size: 12px;
            }
            .hero { padding: var(--hero-section-y-mobile) 20px; }
            .hero h1 { font-size: 32px; }
            .hero p { font-size: 15px; }
            .hero-buttons { flex-direction: column; gap: 12px; }
            .hero-cta { padding: 14px 32px; font-size: 15px; }
            .hero-demo { padding: 12px 28px; font-size: 15px; }
            .hero-sub { font-size: 12px; }
            .stats { grid-template-columns: 1fr; padding: 0 20px 35px; }
            .section { padding: var(--section-y) 20px; }
            .features-grid { grid-template-columns: 1fr; }
            .comparison { padding: 24px; }
            .comp-table { font-size: 13px; }
            .comp-table th, .comp-table td { padding: 10px 8px; }
            .cta-section { padding: 50px 20px; }
            .pricing-grid {
                grid-template-columns: 1fr;
            }
            /* Mobile: deliberate descending price ladder Pro → Solo → Free.
               Desktop keeps ascending Free → Solo → Pro (no order set outside this query). */
            .pricing-card.pro {
                order: 1;
                transform: scale(1);
            }
            .pricing-card.solo {
                order: 2;
            }
            .pricing-card.free {
                order: 3;
            }
            .pricing-card.pro:hover {
                transform: translateY(-2px);
            }
            .testimonials { grid-template-columns: 1fr; }

            /* Comparison table: handled by 640px breakpoint above (vertical card stacking) */
            .comp-section {
                padding: 24px 16px;
                overflow-x: visible;
            }
            .comp-row {
                min-width: unset;
            }

            /* Trust section mobile */
            .trust-section { padding: 25px 20px 35px; }
            .trust-badge { flex-direction: column; gap: 8px; text-align: center; }
            .trust-badge p { font-size: 14px; }
            .trust-badges { grid-template-columns: 1fr; gap: 16px; }

            /* How It Works mobile */
            .how-it-works-section { padding: var(--section-y) 20px; }
            .steps-container { flex-direction: column; gap: 40px; }
            .step-arrow {
                transform: rotate(90deg);
                font-size: 28px;
            }
            .step-card { max-width: 100%; }

            /* Booking Mockup mobile */
            .booking-mockup-section { padding: 35px 20px; }
            .booking-mockup-device { max-width: 100%; }
            .booking-mockup-screen { padding: 16px; }

            /* Dashboard Preview mobile */
            .dashboard-preview-section { padding: 35px 20px; }
            .preview-mockup { border-radius: 12px; }
            .mockup-header { padding: 16px 20px; flex-direction: column; gap: 8px; align-items: flex-start; }
            .mockup-content { padding: 20px; }
            .mockup-stats-row-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .mockup-stat-card { padding: 14px; }
            .mockup-stat-value { font-size: 20px; }
            .mockup-stat-label { font-size: 10px; }
            .mockup-chart-section { padding: 16px; }
            .mockup-chart-placeholder { padding: 12px; }
            .mockup-activity-section { padding: 16px; }
            .mockup-activity-item { font-size: 12px; padding: 8px 12px; }
            .preview-features { grid-template-columns: 1fr; gap: 32px; }

            /* FIX 2: Chat widget bottom-left on mobile so it never covers sticky CTA bar */
            @media (max-width: 427px) {
                #chatbase-bubble-button {
                    bottom: 64px !important;
                    left: 20px !important;
                    right: auto !important;
                }
            }
        }

        /* Mobile landscape and small tablets (430px+) */
        @media (min-width: 430px) and (max-width: 768px) {
            .mockup-stats-row-4 { grid-template-columns: repeat(2, 1fr); }
            .preview-features { grid-template-columns: repeat(2, 1fr); }
        }

        /* Tablet and up - 4 column layout for stat cards */
        @media (min-width: 769px) {
            .mockup-stats-row-4 { grid-template-columns: repeat(4, 1fr); }
        }
        /* The Problem Section */
        .problem-section-wrapper {
            background: #0D0B08;
        }
        .problem-section {
            max-width: 720px;
            margin: 0 auto;
            padding: var(--section-y) 40px;
            text-align: center;
        }
        .problem-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 20px;
        }
        .problem-headline {
            font-size: clamp(28px, 4vw, 44px);
            font-weight: 800;
            line-height: 1.15;
            color: var(--text);
            margin-bottom: 40px;
            letter-spacing: -1.5px;
        }
        .problem-card {
            background: rgba(44, 44, 46, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent);
            border-radius: 16px;
            padding: 28px 32px;
            text-align: left;
            margin-bottom: 36px;
        }
        .problem-card-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 16px;
            letter-spacing: 0.3px;
        }
        .problem-card-text {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.75);
            line-height: 1.8;
            margin: 0;
        }
        .problem-number {
            font-family: 'DM Sans', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: clamp(80px, 15vw, 140px);
            font-weight: 800;
            color: #F2F2F4;
            line-height: 1;
            margin: 32px 0 20px 0;
            letter-spacing: -3px;
        }
        .problem-subtext {
            font-size: 15px;
            color: var(--text-muted);
            max-width: 480px;
            margin: 0 auto;
            line-height: 1.7;
        }
        .problem-stats-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 32px;
        }
        .problem-stat-card {
            background: rgba(44, 44, 46, 0.4);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 20px 16px;
            text-align: center;
        }
        .problem-stat-value {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 28px;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 6px;
        }
        .problem-stat-label {
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.68rem;
            font-weight: 600;
            color: #636368;
        }
        @media (max-width: 768px) {
            .problem-section { padding: var(--section-y) 20px; }
            .problem-card { padding: 20px 20px; }
            .problem-stats-row { grid-template-columns: 1fr; gap: 12px; }
        }

        /* Built for Service Professionals Trust Section */
        .trust-pro-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 16px 40px 56px;
            text-align: center;
        }
        .trust-pro-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 24px;
        }
        .trust-pro-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .trust-pro-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 24px 16px;
            background: rgba(44, 44, 46, 0.4);
            border: 1px solid var(--border);
            border-radius: 12px;
        }
        .trust-pro-check {
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }
        .trust-pro-text {
            font-size: 14px;
            font-weight: 500;
            color: var(--text);
            margin: 0;
            line-height: 1.4;
        }
        @media (max-width: 768px) {
            .trust-pro-section { padding: 16px 20px 48px; }
            .trust-pro-grid { grid-template-columns: 1fr; gap: 10px; }
            .trust-pro-item { flex-direction: row; text-align: left; padding: 16px 20px; }
        }

        /* Merged Demo Section Tabs */
        .merged-demo-section {
            background: linear-gradient(180deg,
                var(--bg) 0%,
                rgba(201, 147, 58, 0.02) 50%,
                var(--bg) 100%
            );
            max-width: 1800px;
            margin: 0 auto;
            padding: var(--section-y) 40px;
            text-align: center;
        }
        .merged-demo-section .section-label {
            color: #C9933A;
        }
        .merged-demo-section h2 {
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 16px;
        }
        .demo-tabs-wrapper {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin: 32px 0 40px;
            flex-wrap: wrap;
        }
        /* Desktop two-column split: stable copy + benefit list left, the
           active tab's mockup right. Mobile stays exactly as it was —
           a single stacked column, no grid applied below 900px. */
        .demo-benefit-list {
            display: none;
        }
        @media (min-width: 900px) {
            .demo-section-grid {
                display: flex;
                align-items: center;
                gap: 48px;
                text-align: left;
            }
            .demo-section-left {
                flex: 0 0 360px;
            }
            .demo-section-left .section-label,
            .demo-section-left h2 {
                text-align: left;
            }
            .demo-tabs-wrapper {
                justify-content: flex-start;
            }
            .demo-section-right {
                flex: 1 1 auto;
                min-width: 0;
            }
            .demo-benefit-list {
                display: flex;
                flex-direction: column;
                margin-top: 24px;
            }
            .demo-benefit-item {
                padding: 14px 0;
                border-top: 1px solid var(--border);
                font-size: 14px;
                color: var(--text-muted);
                line-height: 1.5;
            }
            .demo-benefit-item:first-child {
                border-top: none;
            }
            .demo-benefit-item b {
                color: var(--text);
            }
        }
        .demo-tab-button {
            background: transparent;
            color: #A0A0A8;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            padding: 8px 20px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 300ms ease;
            white-space: nowrap;
        }
        .demo-tab-button:hover {
            border-color: rgba(255, 255, 255, 0.24);
        }
        /* Touch feedback — no hover state on mobile, so :active is the only
           signal a tap actually registered. transform/opacity only, GPU
           compositor cost, respects prefers-reduced-motion globally. */
        .demo-tab-button:active {
            transform: scale(0.96);
        }
        .demo-tab-button.active {
            background: #C9933A;
            color: #000000;
            border-color: #C9933A;
            font-weight: 700;
        }
        /* CTA into the full-screen walkthrough modal — deliberately a step
           down from .hero-cta/.pricing-cta.pro (both solid gold) since this
           isn't the primary conversion action, it's "go deeper on what you
           just saw above." Outline treatment in the same gold keeps it in
           the same family without competing with Get Started. */
        .demo-walkthrough-cta-wrap {
            margin-top: 40px;
            padding-top: 32px;
            border-top: 1px solid var(--border);
            text-align: center;
        }
        .demo-walkthrough-cta {
            display: inline-block;
            background: transparent;
            color: #C9933A;
            border: 1.5px solid rgba(201, 147, 58, 0.4);
            border-radius: 10px;
            padding: 14px 28px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s ease;
        }
        .demo-walkthrough-cta:hover {
            background: rgba(201, 147, 58, 0.08);
            border-color: #C9933A;
            transform: translateY(-1px);
        }
        .demo-walkthrough-cta:active {
            transform: translateY(0) scale(0.97);
        }
        .demo-walkthrough-subtext {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 12px;
            max-width: 480px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.5;
        }
        .demo-tabs-content {
            display: none;
        }
        .demo-tabs-content.active {
            display: block;
            animation: fadeIn 300ms ease;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        .booking-demo-content {
            /* Booking page demo content */
        }
        .dashboard-demo-content {
            /* Dashboard demo content */
        }
        @media (max-width: 768px) {
            .merged-demo-section { padding: var(--section-y) 20px; }
            .demo-tabs-wrapper { gap: 8px; margin: 24px 0 32px; }
            .demo-tab-button { padding: 8px 16px; font-size: 14px; }
        }

    

/* ---- next block ---- */


        /* =====================================================
           BOOKING PAGE WALKTHROUGH — full-screen overlay
           ===================================================== */

        @keyframes bpwScreenIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
        @keyframes bpwCheckCircle {
            from { stroke-dashoffset: 163; }
            to { stroke-dashoffset: 0; }
        }
        @keyframes bpwCheckMark {
            from { stroke-dashoffset: 50; }
            to { stroke-dashoffset: 0; }
        }

        /* Full-screen overlay — dark bg, scrollable, fade-in */
        .bpw-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: #0A0A0B;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            transition: opacity 200ms ease;
            font-family: Inter, system-ui, -apple-system, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        /* Centered content wrapper */
        .bpw-content-center {
            max-width: 480px;
            margin: 0 auto;
            padding: 16px 16px 48px;
        }
        /* Card — light theme preview */
        .bpw-card {
            background: var(--surface-light);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }

        /* STICKY HEADER — dark, stays at top of overlay scroll */
        .bpw-header-sticky {
            position: sticky;
            top: 0;
            z-index: 10;
            background: #0A0A0B;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        /* Header title — sits on the dark sticky bar (#0A0A0B), not the
           light card, so this needs --text-muted (dark-section token),
           not --ink-500 (light-section token). */
        .bpw-header-title {
            font-size: 12px;
            color: var(--text-muted);
            flex: 1;
        }

        /* Close button — 32×32 tap target — same dark-bar context as above */
        .bpw-close {
            width: 32px; height: 32px;
            border: none; background: transparent;
            color: var(--text-muted);
            font-size: 18px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: color 150ms ease;
            padding: 0;
            flex-shrink: 0;
        }
        .bpw-close:hover { color: #F2F2F4; }

        /* Gold accent bar at card top — 3px, full width */
        .bpw-accent-bar {
            height: 3px;
            background: #C9933A;
            width: 100%;
        }

        /* Screen wrap — no independent scroll, overlay scrolls */
        .bpw-screen-wrap {
            overflow: visible;
        }

        /* Stepper — 8px dots, 2px lines, uppercase 11px labels */
        .bpw-stepper {
            padding: 16px 24px 0;
        }
        .bpw-step-track {
            display: flex;
            align-items: center;
        }
        .bpw-step-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            background: #E5E5EA;
            border: none;
            transition: background 300ms ease, box-shadow 300ms ease;
        }
        .bpw-step-dot.bpw-dot-complete {
            background: #C9933A;
        }
        .bpw-step-dot.bpw-dot-active {
            background: #C9933A;
            box-shadow: 0 0 0 4px rgba(201,147,58,0.15);
        }
        .bpw-step-line {
            flex: 1;
            height: 2px;
            background: #E5E5EA;
            transition: background 400ms ease-out;
        }
        .bpw-step-line.bpw-line-complete { background: #C9933A; }
        .bpw-step-label {
            font-size: 11px; font-weight: 600;
            color: var(--ink-500);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-top: 8px;
            text-align: center;
        }

        /* Mobile biz name - hidden on desktop */
        .bpw-mobile-bizname {
            display: none;
            font-size: 17px; font-weight: 800;
            color: var(--ink-900);
            text-align: center;
            padding: 12px 20px 0;
            letter-spacing: -0.02em;
        }

        .bpw-screen {
            animation: bpwScreenIn 0.15s ease-out;
            padding-bottom: 8px;
        }

        /* Screen titles */
        .bpw-screen-title {
            font-size: 17px; font-weight: 700;
            color: var(--ink-900);
            padding: 16px 24px 12px;
        }

        /* === SCREEN 1: Service cards === */
        .bpw-svc-card {
            background: #FFFFFF;
            border: 1.5px solid #E5E5EA;
            border-radius: 12px;
            padding: 16px 16px 16px 20px;
            margin: 0 20px 10px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            transition: border-color 150ms ease, background 150ms ease;
        }
        @media (hover: hover) {
            .bpw-svc-card:hover {
                background: rgba(201,147,58,0.03);
                border-color: rgba(201,147,58,0.30);
            }
        }
        .bpw-svc-card:focus-visible {
            outline: 2px solid #C9933A;
            outline-offset: 2px;
        }
        .bpw-svc-selected {
            border: 2px solid #C9933A !important;
            background: #FFFFFF;
        }
        /* Left accent bar — slides in on select */
        .bpw-svc-accent-bar {
            position: absolute;
            left: -4px; top: 0; bottom: 0;
            width: 4px;
            background: #C9933A;
            opacity: 0;
            transition: left 150ms ease, opacity 150ms ease;
        }
        .bpw-svc-selected .bpw-svc-accent-bar {
            left: 0;
            opacity: 1;
        }
        /* Circular checkmark bubble — inline in flex column beside price */
        .bpw-svc-check {
            width: 22px; height: 22px;
            border-radius: 50%;
            background: #C9933A;
            color: #000000;
            font-size: 10px;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700;
            flex-shrink: 0;
        }
        .bpw-svc-left { flex: 1; min-width: 0; }
        .bpw-svc-name { font-size: 15px; font-weight: 700; color: var(--ink-900); }
        .bpw-svc-sub { font-size: 13px; color: var(--ink-600); margin-top: 2px; font-weight: 400; }
        .bpw-svc-desc { font-size: 12px; color: var(--ink-500); margin-top: 3px; }
        .bpw-svc-price {
            font-size: 15px; font-weight: 700;
            color: var(--gold-ink);
            white-space: nowrap;
            flex-shrink: 0;
            margin-left: auto;
            padding-left: 8px;
        }

        /* === SCREEN 2: Date & Time === */
        /* Selected service mini bar */
        .bpw-sel-bar {
            background: #FFFFFF;
            border: 1.5px solid #E5E5EA;
            border-radius: 10px;
            padding: 12px 16px;
            margin: 16px 20px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .bpw-sel-service { font-size: 14px; font-weight: 600; color: var(--ink-900); }
        .bpw-sel-detail { font-size: 13px; color: var(--ink-600); margin-top: 2px; }
        .bpw-sel-bar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
        .bpw-sel-badge {
            background: rgba(201,147,58,0.12);
            color: var(--gold-ink);
            font-size: 10px; font-weight: 600;
            border-radius: 999px;
            padding: 3px 9px;
        }
        .bpw-change-link {
            font-size: 12px; color: var(--ink-500);
            text-decoration: none; cursor: pointer;
        }
        .bpw-change-link:hover { color: #C9933A; }

        .bpw-date-header {
            padding: 0 20px 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .bpw-date-title { font-size: 17px; font-weight: 700; color: var(--ink-900); }
        .bpw-next-avail { font-size: 12px; color: var(--gold-ink); cursor: pointer; }

        /* Calendar — recessed panel, var(--surface-light) */
        .bpw-calendar {
            background: var(--surface-light);
            border: 1px solid #E5E5EA;
            border-radius: 12px;
            padding: 16px;
            margin: 0 20px 16px;
        }
        .bpw-cal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .bpw-cal-month {
            font-size: 18px;
            color: var(--ink-900);
        }
        .bpw-cal-month .bpw-cal-month-name { font-weight: 700; }
        .bpw-cal-month .bpw-cal-month-year { font-weight: 400; margin-left: 4px; }
        .bpw-cal-nav {
            width: 32px; height: 32px;
            border-radius: 8px;
            border: 1.5px solid transparent;
            background: transparent;
            cursor: pointer;
            font-size: 18px;
            display: flex; align-items: center; justify-content: center;
            transition: all 150ms ease;
            color: var(--ink-600);
        }
        .bpw-cal-nav-inactive {
            border-color: #E5E5EA;
            color: #C7C7CC;
            cursor: default;
        }
        .bpw-cal-nav-active {
            border-color: rgba(201,147,58,0.30);
            background: rgba(201,147,58,0.03);
            color: var(--gold-ink);
        }
        .bpw-cal-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            margin-bottom: 6px;
        }
        .bpw-cal-weekdays span {
            font-size: 11px;
            color: var(--ink-500);
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing: 0.04em;
        }
        .bpw-cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }
        .bpw-cal-day {
            width: 36px; height: 36px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: default;
            border-radius: 50%;
            margin: 0 auto;
        }
        .bpw-cal-day span:first-child { font-size: 14px; font-weight: 400; color: var(--ink-900); }
        .bpw-cal-past { opacity: 0.4; }
        .bpw-cal-past span:first-child { color: var(--ink-500); }
        .bpw-cal-avail span:first-child { color: var(--ink-900); }
        /* Availability dot — 6px gold */
        .bpw-cal-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #C9933A;
            margin-top: 2px;
            flex-shrink: 0;
        }
        /* Today ring */
        .bpw-cal-today {
            border: 2px solid #C9933A;
        }
        .bpw-cal-today span:first-child { color: var(--ink-900); font-weight: 600; }
        /* Selected — filled gold circle, white number, scale overshoot */
        .bpw-cal-selected {
            background: #C9933A;
            width: 36px; height: 36px;
            border-radius: 50%;
            transform: scale(1.0);
            animation: bpwCalPop 120ms ease-out;
        }
        @keyframes bpwCalPop {
            0% { transform: scale(0.6); }
            60% { transform: scale(1.08); }
            100% { transform: scale(1.0); }
        }
        .bpw-cal-selected span:first-child { font-size: 14px; font-weight: 700; color: var(--on-accent); }
        .bpw-cal-selected .bpw-cal-dot { display: none; }

        /* Time slots */
        .bpw-times-title { font-size: 17px; font-weight: 700; color: var(--ink-900); padding: 0 20px 4px; }
        .bpw-times-tz { font-size: 12px; color: var(--ink-500); padding: 0 20px 12px; }
        .bpw-times-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding: 0 20px;
        }
        .bpw-time-pill {
            background: #FFFFFF;
            border: 1.5px solid #E5E5EA;
            border-radius: 999px;
            padding: 10px 0;
            text-align: center;
            font-size: 14px; font-weight: 500;
            color: var(--ink-900);
            cursor: pointer;
            transition: border-color 150ms ease, background 150ms ease;
        }
        @media (hover: hover) {
            .bpw-time-pill:hover { border-color: #C9933A; }
        }
        .bpw-time-selected {
            background: #C9933A;
            border-color: #C9933A;
            color: var(--on-accent);
            font-weight: 600;
        }

        /* === Navigation row === */
        .bpw-nav-row {
            padding: 16px 20px 24px;
            display: flex;
            gap: 12px;
        }
        .bpw-btn-ghost {
            flex: 1;
            height: 52px;
            background: transparent;
            border: 1.5px solid var(--line-light);
            border-radius: 8px;
            color: var(--ink-600);
            font-size: 15px; font-weight: 500;
            cursor: pointer;
            transition: border-color 150ms ease, color 150ms ease;
            font-family: inherit;
        }
        .bpw-btn-ghost:hover { border-color: var(--ink-500); color: var(--ink-900); }
        .bpw-btn-gold {
            flex: 2;
            height: 52px;
            background: #C9933A;
            border: none;
            border-radius: 8px;
            color: #000000;
            font-size: 16px; font-weight: 700;
            cursor: pointer;
            transition: opacity 150ms ease;
            font-family: inherit;
            letter-spacing: -0.01em;
        }
        .bpw-btn-gold:hover { opacity: 0.88; }
        .bpw-btn-full { flex: 3; }

        /* === SCREEN 3: Form fields === */
        .bpw-field-wrap { margin: 0 20px 16px; }
        .bpw-field-label {
            display: block;
            font-size: 12px; font-weight: 600;
            color: var(--ink-600);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 6px;
        }
        .bpw-optional {
            font-size: 11px; color: var(--ink-500);
            font-weight: 400;
            text-transform: none;
            letter-spacing: normal;
            margin-left: 4px;
        }
        .bpw-field {
            width: 100%;
            height: 48px;
            background: #FFFFFF;
            border: 1.5px solid #E5E5EA;
            border-radius: 10px;
            padding: 0 14px;
            font-size: 15px;
            color: var(--ink-500);
            font-family: inherit;
            box-sizing: border-box;
            outline: none;
            -webkit-appearance: none;
        }
        /* Gold focus ring */
        .bpw-field-focused {
            border-color: #C9933A;
            box-shadow: 0 0 0 3px rgba(201,147,58,0.15);
            color: var(--ink-900);
        }
        .bpw-textarea {
            height: 72px;
            padding: 12px 14px;
            resize: none;
            vertical-align: top;
        }
        .bpw-field-helper {
            font-size: 12px; color: var(--ink-500);
            margin-top: 4px;
            line-height: 1.4;
        }

        /* === SCREEN 4: Summary card === */
        .bpw-summary-card {
            background: #FFFFFF;
            border: 1px solid #E5E5EA;
            border-radius: 16px;
            margin: 0 20px 16px;
            padding: 0 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }
        .bpw-summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--line-light);
        }
        .bpw-summary-label {
            font-size: 11px; font-weight: 600;
            color: var(--ink-500);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .bpw-summary-val {
            font-size: 14px; font-weight: 500;
            color: var(--ink-900);
            text-align: right;
            max-width: 60%;
        }
        /* Consent box */
        .bpw-consent {
            background: var(--surface-light);
            border: 1px solid var(--line-light);
            border-radius: 10px;
            padding: 12px 16px;
            margin: 0 20px 16px;
            font-size: 12px;
            color: var(--ink-500);
            line-height: 1.6;
        }

        /* === SCREEN 5: Confirmation banner (gold) === */
        .bpw-confirm-banner {
            background: #C9933A;
            border-radius: 0;
            padding: 32px 24px 24px;
            text-align: center;
        }
        .bpw-check-svg {
            width: 52px; height: 52px;
            display: block;
            margin: 0 auto;
        }
        .bpw-check-circle {
            stroke-dasharray: 163;
            stroke-dashoffset: 163;
            animation: bpwCheckCircle 400ms ease-out forwards;
        }
        .bpw-check-mark {
            stroke-dasharray: 50;
            stroke-dashoffset: 50;
            animation: bpwCheckMark 250ms ease-out 350ms forwards;
        }
        .bpw-confirm-title {
            font-size: 24px; font-weight: 800;
            color: #000000; letter-spacing: -0.03em;
            margin-top: 12px;
        }
        .bpw-confirm-sub {
            font-size: 14px; font-weight: 400;
            color: rgba(0,0,0,0.75);
            margin-top: 6px;
            line-height: 1.4;
        }
        /* Confirmation summary rows */
        .bpw-confirm-rows {
            padding: 16px 20px 0;
            background: var(--surface-light);
        }
        .bpw-confirm-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 11px 0;
            border-bottom: 1px solid #E5E5EA;
        }
        .bpw-confirm-lbl {
            font-size: 10px; font-weight: 600;
            color: var(--ink-500);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .bpw-confirm-val {
            font-size: 14px; font-weight: 500;
            color: var(--ink-900);
        }
        .bpw-confirm-contact {
            font-size: 13px; color: var(--ink-500);
            text-align: center;
            margin-top: 16px;
            padding: 0 20px;
            background: var(--surface-light);
        }
        /* Calendar add buttons */
        .bpw-cal-btns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 16px 20px;
            background: var(--surface-light);
        }
        .bpw-cal-btn {
            height: 44px;
            background: #FFFFFF;
            border: 1.5px solid #E5E5EA;
            border-radius: 10px;
            font-size: 13px; font-weight: 500;
            color: var(--ink-900);
            cursor: pointer;
            font-family: inherit;
            transition: border-color 150ms ease;
        }
        .bpw-cal-btn:hover { border-color: rgba(201,147,58,0.40); }
        /* Copy pill */
        .bpw-copy-label {
            font-size: 13px; color: var(--ink-500);
            margin-bottom: 8px;
            background: var(--surface-light);
            padding: 0 20px;
        }
        .bpw-copy-pill {
            display: inline-block;
            background: #FFFFFF;
            border: 1.5px solid #E5E5EA;
            border-radius: 999px;
            padding: 10px 20px;
            font-size: 13px; font-weight: 500;
            color: var(--ink-900);
            cursor: pointer;
        }
        .bpw-secure-badge {
            font-size: 11px; color: var(--ink-500);
            text-align: center;
            margin-top: 16px;
            background: var(--surface-light);
            padding: 0 20px;
        }
        /* Upgrade banner */
        .bpw-upgrade-banner {
            background: rgba(201,147,58,0.07);
            border: 1px solid rgba(201,147,58,0.22);
            border-radius: 12px;
            margin: 16px 20px 0;
            padding: 20px 24px;
            text-align: center;
        }
        .bpw-upgrade-title {
            font-size: 15px; font-weight: 600;
            color: var(--ink-900);
            margin-bottom: 12px;
        }
        .bpw-upgrade-cta {
            display: flex;
            width: 100%;
            height: 52px;
            background: #C9933A;
            color: #000000;
            font-size: 15px; font-weight: 700;
            border-radius: 10px;
            text-decoration: none;
            align-items: center; justify-content: center;
            transition: opacity 150ms ease;
            letter-spacing: -0.01em;
        }
        .bpw-upgrade-cta:hover { opacity: 0.88; }
        .bpw-powered {
            font-size: 11px; color: var(--ink-500);
            text-align: center;
            padding: 12px 0 4px;
            background: var(--surface-light);
        }

        /* Dot indicators */
        .bpw-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 12px 0;
            background: var(--surface-light);
        }
        .bpw-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--line-light);
            display: block;
            transition: background 200ms ease;
            cursor: pointer;
        }
        .bpw-dot-active { background: #C9933A !important; }

        /* =====================================================
           MOBILE LAYOUT (< 640px) — full-screen, no border-radius
           ===================================================== */
        @media (max-width: 640px) {
            .bpw-content-center {
                padding: 12px 12px 48px;
            }
            .bpw-card {
                border-radius: 8px;
            }
            .bpw-mobile-bizname { display: block; }
            .bpw-confirm-banner { border-radius: 0; }
        }

/* Brand logomark next to the wordmark (matches every other page's nav) */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-mark { height: 20px; width: auto; color: var(--accent); flex-shrink: 0; }