/* ═══════════════════════════════════════════════════════════
           LAUNCHPAD MEDICARE — CARIBBEAN DRIFT (STAGED)
           Design System: Caribbean Drift + Inter
           Font: Inter (display + body) / Space Mono (data)
           Palette: Light ocean base / Split spectrum accents
           Rule: Cool environment, warm actions. Never say AI.
           ═══════════════════════════════════════════════════════════ */

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { overflow-x: hidden; max-width: 100vw; }

        :root {
            --bg-deep: #f8fafc;
            --bg-surface: #ffffff;
            --bg-card: rgba(15, 23, 42, 0.03);
            --bg-card-hover: rgba(15, 23, 42, 0.06);
            --border-subtle: rgba(15, 23, 42, 0.08);
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-dim: #94a3b8;
            --accent-primary: #0891b2;
            --accent-deep: #164e63;
            --accent-light: #06b6d4;
            --accent-data: #64748b;
            --accent-green: #0891b2;
            --accent-cyan: #06b6d4;
            --accent-violet: #7c3aed;
            --glow-primary: 0 0 40px rgba(8, 145, 178, 0.08);
            --font-display: 'Inter', -apple-system, sans-serif;
            --font-body: 'Inter', -apple-system, sans-serif;
            --font-mono: 'Space Mono', monospace;
            --max-width: 1200px;
            --section-pad: 120px;
        }

        body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

        /* Ocean shimmer — ambient background */
        .bg-grid { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: none; pointer-events: none; z-index: 0; }
        .bg-grid::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 10% 5%, rgba(6,182,212,0.08) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 90% 15%, rgba(14,165,233,0.06) 0%, transparent 50%), radial-gradient(ellipse 45% 35% at 55% 85%, rgba(124,58,237,0.05) 0%, transparent 45%); animation: oceanDrift 18s ease-in-out infinite alternate; }
        @keyframes oceanDrift { 0% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03) translate(5px, -3px); } 100% { opacity: 0.8; transform: scale(1) translate(-3px, 3px); } }

        /* ─── NAV ─── */
        nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
        .nav-brand { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.4rem; text-decoration: none; word-spacing: -0.05em; }
        .nav-brand .bird { height: 24px; width: auto; flex-shrink: 0; }
        .nav-brand .lp { background: linear-gradient(90deg, #164e7a 0%, #1a6baf 30%, #2980b9 50%, #1a6baf 70%, #164e7a 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: lp-shimmer 10s ease-in-out infinite; }
        .nav-brand .mc { color: #475569; }
        @keyframes lp-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
        .nav-right { display: flex; align-items: center; gap: 1.5rem; }
        .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s; }
        .nav-link:hover { color: var(--text-primary); }
        .nav-cta { background: #0f172a; color: #fff; padding: 0.55rem 1.25rem; border-radius: 100px; text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; }
        .nav-cta:hover { background: #1e293b; box-shadow: 0 4px 20px rgba(8,145,178,0.2); }

        /* ─── LIVE HOURS BANNER ─── */
        .live-hours-bar { position: fixed; top: 60px; left: 0; right: 0; z-index: 999; padding: 0.4rem 2rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(15,23,42,0.06); text-align: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.03em; transition: opacity 0.3s; }
        .live-hours-bar .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
        .live-hours-bar .live-dot.online { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); animation: pulse-dot 2s ease-in-out infinite; }
        .live-hours-bar .live-dot.offline { background: #64748b; }
        .live-hours-bar .hours-text { color: var(--text-secondary); }
        .live-hours-bar .hours-status { font-weight: 600; }
        .live-hours-bar .hours-status.online { color: #34d399; }
        .live-hours-bar .hours-status.offline { color: #94a3b8; }

        /* ─── MESSAGE US MODAL ─── */
        .msg-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 3000; align-items: center; justify-content: center; }
        .msg-modal-overlay.open { display: flex; }
        .msg-modal { background: #ffffff; border: 1px solid rgba(15,23,42,0.08); border-radius: 20px; padding: 2.5rem; max-width: 440px; width: 90%; position: relative; box-shadow: 0 20px 60px rgba(15,23,42,0.15); }
        .msg-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--text-dim); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0.25rem; }
        .msg-modal-close:hover { color: var(--text-primary); }
        .msg-modal h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.4rem; }
        .msg-modal .msg-subtitle { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.5; }
        .msg-modal label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); }
        /* 16px floor — iOS Safari auto-zooms inputs <16px on focus, jolts the layout mid-type. Stay at 16px. */
        .msg-modal input, .msg-modal textarea { width: 100%; background: #f8fafc; border: 1.5px solid rgba(15,23,42,0.1); border-radius: 10px; padding: 0.7rem 1rem; color: var(--text-primary); font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color 0.2s; margin-bottom: 1rem; }
        .msg-modal input:focus, .msg-modal textarea:focus { border-color: rgba(8,145,178,0.5); }
        .msg-modal input::placeholder, .msg-modal textarea::placeholder { color: #94a3b8; }
        .msg-modal textarea { resize: vertical; min-height: 80px; }
        .msg-modal-submit { width: 100%; background: #0f172a; color: #fff; border: none; border-radius: 100px; padding: 0.8rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s; }
        .msg-modal-submit:hover { background: #1e293b; box-shadow: 0 4px 20px rgba(8,145,178,0.2); }
        .msg-modal-submit:disabled { opacity: 0.5; cursor: not-allowed; }
        .msg-modal-success { display: none; text-align: center; padding: 1rem 0; }
        .msg-modal-success .check-circle { width: 48px; height: 48px; border-radius: 50%; background: rgba(52,211,153,0.15); border: 2px solid #34d399; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
        .msg-modal-success h3 { color: #34d399; margin-bottom: 0.5rem; }
        .msg-modal-success p { color: var(--text-secondary); font-size: 0.88rem; }

        /* ─── HERO ─── */
        .hero { position: relative; z-index: 1; padding: calc(var(--section-pad) + 60px) 2rem var(--section-pad); text-align: center; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .hero::before { content: ''; position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse at center, rgba(8,145,178,0.06) 0%, rgba(14,165,233,0.03) 40%, transparent 70%); pointer-events: none; filter: blur(40px); }
        .hero-inner { position: relative; z-index: 2; max-width: 900px; }
        .hero-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; color: var(--accent-primary); background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.15); padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 2rem; }
        .hero-tag .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary); }
        .hero h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 1.5rem; color: var(--text-primary); }
        .hero h1 .hero-line { display: block; }
        @keyframes spectrumText { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        .hero h1 .gradient-text { background: linear-gradient(90deg, #0891b2, #06b6d4, #0ea5e9, #6366f1, #7c3aed, #0891b2, #06b6d4, #0ea5e9); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: spectrumText 6s ease infinite; padding-bottom: 0.12em; }
        .hero-sub { font-size: 1.15rem; color: var(--text-secondary); max-width: 560px; margin: 0 auto 2.25rem; line-height: 1.75; font-weight: 400; }
        .hero-cta-group { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; }
        .cta-primary { background: #ffffff; color: #0f172a; padding: 0.85rem 2rem; border-radius: 100px; text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: all 0.3s; border: 2px solid rgba(8,145,178,0.15); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
        .cta-primary:hover { border-color: var(--accent-primary); box-shadow: 0 0 20px rgba(8,145,178,0.15); transform: scale(1.02); }
        .cta-secondary { color: var(--text-secondary); padding: 0.85rem 2rem; border-radius: 100px; text-decoration: none; font-weight: 500; font-size: 0.95rem; border: 1px solid rgba(15,23,42,0.12); transition: all 0.25s; display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; }
        .cta-secondary:hover { color: var(--text-primary); border-color: rgba(15,23,42,0.2); background: rgba(15,23,42,0.02); }
        .hero-proof { margin-top: 2.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }
        .hero-proof span { color: var(--text-secondary); }

        /* ─── STAT BAR ─── */
        .stat-bar { position: relative; z-index: 1; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 2.25rem 2rem; background: var(--bg-surface); }
        .stat-bar-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
        .stat-number { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; }
        .stat-label { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.2rem; }

        /* ─── SECTIONS ─── */
        .section-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-cyan); margin-bottom: 1rem; }
        .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 1rem; max-width: 700px; }
        .section-desc { font-size: 1.05rem; color: var(--text-secondary); max-width: 560px; line-height: 1.7; margin-bottom: 3.5rem; }

        /* ─── THE SYSTEM ─── */
        .system-section { position: relative; z-index: 1; padding: var(--section-pad) 2rem; }
        .section-inner { max-width: var(--max-width); margin: 0 auto; }
        .system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(15,23,42,0.06); border-radius: 20px; overflow: hidden; border: 1px solid rgba(15,23,42,0.06); }
        .system-card { background: var(--bg-surface); padding: 2.25rem; transition: all 0.3s; position: relative; }
        .system-card:hover { background: rgba(8,145,178,0.02); }
        .system-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; transition: background 0.3s; }
        .system-card:hover::before { background: linear-gradient(90deg, #06b6d4, #0ea5e9, #6366f1); }
        .card-icon { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 12px rgba(56, 189, 248, 0.5); margin-bottom: 1.15rem; display: block; }
        .system-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--text-primary); }
        .system-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
        .card-metric { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-data); }

        /* ─── HERO TAGLINE ─── */
        .hero-tagline { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 1.25rem; font-weight: 400; }

        /* ─── FLIGHTPLAN PREVIEW ─── */
        .flightplan-section { position: relative; z-index: 1; padding: var(--section-pad) 2rem; background: rgba(248,250,252,0.8); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
        .flightplan-layout { display: flex; flex-direction: column; align-items: center; gap: 3rem; }

        .fp-dashboard { width: 100%; max-width: 960px; background: #ffffff; border: 1px solid rgba(15,23,42,0.08); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04); }

        .fp-topbar { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; background: rgba(248,250,252,0.8); border-bottom: 1px solid rgba(15,23,42,0.06); }
        .fp-topbar-left { display: flex; align-items: center; gap: 0.5rem; }
        .fp-logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary); }
        .fp-logo-text { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
        .fp-topbar-right { display: flex; gap: 1.25rem; }
        .fp-nav-item { font-size: 0.75rem; color: var(--text-dim); font-weight: 500; }
        .fp-nav-active { color: var(--text-primary); }

        .fp-body { display: grid; grid-template-columns: 1fr 280px; gap: 1px; background: rgba(15,23,42,0.04); }
        .fp-main { background: #ffffff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
        .fp-sidebar { background: #ffffff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; border-left: 1px solid rgba(15,23,42,0.06); }

        .fp-welcome { display: flex; justify-content: space-between; align-items: center; }
        .fp-welcome-tag { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent-primary); background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.15); padding: 0.2rem 0.6rem; border-radius: 100px; display: inline-block; margin-bottom: 0.4rem; }
        .fp-welcome-name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
        .fp-welcome-name span { color: var(--accent-light); }
        .fp-welcome-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.2rem; }

        .fp-score-ring { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
        .fp-ring-svg { width: 100%; height: 100%; }
        .fp-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .fp-ring-number { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
        .fp-ring-text { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }

        .fp-section-title { font-size: 0.72rem; font-family: var(--font-mono); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }

        .fp-checklist { display: flex; flex-direction: column; gap: 0.4rem; }
        .fp-check-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: rgba(248,250,252,0.8); border: 1px solid rgba(15,23,42,0.06); border-radius: 8px; font-size: 0.82rem; }
        .fp-check-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgba(15,23,42,0.15); flex-shrink: 0; }
        .fp-check-label { color: var(--text-secondary); flex: 1; }
        .fp-check-action { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-primary); white-space: nowrap; }
        .fp-check-done { opacity: 0.85; }
        .fp-check-done .fp-check-label { color: var(--text-primary); text-decoration: none; }
        .fp-checked { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; font-weight: 700; }
        .fp-tag-green { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.3); color: var(--accent-primary); }

        .fp-carrier-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; }
        .fp-carrier { background: rgba(248,250,252,0.8); border: 1px solid rgba(15,23,42,0.06); border-radius: 8px; padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }
        .fp-carrier-name { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
        .fp-carrier-status { font-size: 0.65rem; font-family: var(--font-mono); color: var(--text-dim); }
        .fp-carrier-active { border-color: rgba(56,189,248,0.2); background: rgba(56,189,248,0.04); }
        .fp-carrier-pending { border-color: rgba(148,163,184,0.2); background: rgba(148,163,184,0.04); }
        .fp-status-active { color: var(--accent-primary); }
        .fp-status-pending { color: var(--accent-data); }
        .fp-num-person { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.25); font-size: 0.7rem; }
        .fp-num-team { background: rgba(148,163,184,0.1); border-color: rgba(148,163,184,0.2); color: var(--accent-data); font-size: 0.7rem; }

        .fp-arlo-preview { background: rgba(56,189,248,0.04); border: 1px solid rgba(56,189,248,0.1); border-radius: 12px; overflow: hidden; }
        .fp-arlo-header { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid rgba(56,189,248,0.08); }
        .fp-arlo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 6px var(--accent-primary); }
        .fp-arlo-name { font-weight: 700; font-size: 0.78rem; }
        .fp-arlo-status { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent-primary); margin-left: auto; }
        .fp-arlo-msg { padding: 0.7rem 0.85rem; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; border-bottom: 1px solid rgba(56,189,248,0.05); }
        .fp-arlo-msg:last-child { border-bottom: none; }

        .fp-next-steps { display: flex; flex-direction: column; gap: 0.5rem; }
        .fp-next-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--text-secondary); }
        .fp-next-num { width: 20px; height: 20px; border-radius: 50%; background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: var(--accent-primary); flex-shrink: 0; }

        .fp-cta-area { text-align: center; max-width: 480px; }
        .fp-cta-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
        .fp-cta-sub { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1.5rem; }
        .fp-form { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
        .fp-input { background: #ffffff; border: 1.5px solid rgba(15,23,42,0.12); border-radius: 100px; padding: 0.75rem 1.25rem; color: var(--text-primary); font-family: var(--font-body); font-size: 16px; outline: none; transition: border-color 0.2s; flex: 1; min-width: 140px; }
        .fp-input:focus { border-color: rgba(8,145,178,0.5); }
        .fp-input::placeholder { color: #94a3b8; }
        .fp-submit { background: #0f172a; color: #fff; border: none; border-radius: 100px; padding: 0.75rem 1.75rem; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
        .fp-submit:hover { background: #1e293b; box-shadow: 0 4px 20px rgba(8,145,178,0.2); transform: translateY(-1px); }
        .fp-consent { margin-top: 0.75rem; font-size: 0.68rem; color: var(--text-dim); line-height: 1.5; max-width: 440px; margin-left: auto; margin-right: auto; }
        .fp-cta-note { margin-top: 0.85rem; font-size: 0.78rem; color: var(--text-dim); }
        .fp-success-msg { text-align: center; padding: 1.5rem; animation: fadeIn 0.4s ease; }
        .fp-success-msg h3 { color: #34d399; font-size: 1.3rem; margin-bottom: 0.5rem; }
        .fp-success-msg p { color: var(--text-secondary); font-size: 0.9rem; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 768px) {
            .fp-body { grid-template-columns: 1fr; }
            .fp-sidebar { border-left: none; border-top: 1px solid var(--border-subtle); }
            .fp-carrier-grid { grid-template-columns: 1fr 1fr; }
            .fp-welcome { flex-direction: column; text-align: center; gap: 1rem; }
            .fp-form { flex-direction: column; }
            .fp-input { min-width: auto; }
            .fp-dashboard { border-radius: 12px; }
        }

        /* ─── VIDEO SECTION ─── */
        .video-section { position: relative; z-index: 1; padding: var(--section-pad) 2rem; background: var(--bg-deep); }
        .video-inner { max-width: 900px; margin: 0 auto; text-align: center; }
        .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--border-subtle); box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 60px rgba(56,189,248,0.06); margin-bottom: 2rem; }
        .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
        .video-cta-row { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }

        /* ─── PERSONA SELECTOR ─── */
        .persona-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 900px; margin: 0 auto 2rem; }
        .persona-card { background: #ffffff; border: 1px solid rgba(15,23,42,0.08); border-radius: 12px; padding: 1.5rem 1.25rem; cursor: pointer; transition: all 0.3s ease; text-align: center; }
        .persona-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(8,145,178,0.08); }
        .persona-card.active { border-color: var(--accent-primary); background: rgba(8,145,178,0.04); box-shadow: 0 0 20px rgba(8,145,178,0.08); }
        .persona-emoji { font-size: 2rem; margin-bottom: 0.75rem; display: block; }
        .persona-label { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.35rem; }
        .persona-desc { font-size: 0.8rem; color: var(--text-dim); line-height: 1.4; }
        @media (max-width: 768px) {
            .persona-selector { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
            .persona-card { min-width: 0; flex: 1; padding: 0.5rem 0.4rem; border-radius: 8px; }
            .persona-emoji { font-size: 1rem; margin-bottom: 0.15rem; }
            .persona-label { font-size: 0.7rem; line-height: 1.2; }
            .persona-desc { display: none; }
            .video-wrapper { margin-bottom: 1rem; }
        }

        /* ─── DIFFERENTIATOR ─── */
        .diff-section { position: relative; z-index: 1; padding: var(--section-pad) 2rem; background: #ffffff; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
        .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .diff-comparison { display: flex; flex-direction: column; gap: 1.5rem; }
        .diff-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; font-size: 0.9rem; }
        .diff-old { color: var(--text-dim); text-align: right; text-decoration: line-through; font-style: italic; }
        .diff-arrow { color: var(--accent-primary); font-size: 1.1rem; }
        .diff-new { color: var(--text-primary); font-weight: 600; }

        /* Dashboard card */
        .dashboard-card { background: #ffffff; border: 1px solid rgba(15,23,42,0.08); border-radius: 14px; padding: 1.75rem; max-width: 360px; margin: 0 auto; box-shadow: 0 8px 30px rgba(15,23,42,0.06); position: relative; overflow: hidden; }
        .dashboard-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #06b6d4, #0ea5e9, #6366f1); }
        .dc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
        .dc-name { font-weight: 600; font-size: 1rem; }
        .dc-status { font-size: 0.72rem; color: var(--accent-primary); display: flex; align-items: center; gap: 0.3rem; }
        .dc-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 6px var(--accent-primary); }
        .dc-row { display: flex; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.85rem; }
        .dc-row:last-child { border-bottom: none; }
        .dc-label { color: var(--text-dim); }
        .dc-value { color: var(--text-primary); font-weight: 500; }
        .dc-value.highlight { color: #ffffff; }
        .dc-value.green { color: var(--accent-primary); }
        .dc-value.emerald { color: var(--accent-light); }

        /* ─── PROOF ─── */
        .proof-section { position: relative; z-index: 1; padding: var(--section-pad) 2rem; }
        .proof-card { max-width: 800px; margin: 3rem auto 0; background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: 16px; padding: 3rem; position: relative; overflow: hidden; }
        .proof-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #34d399, #06b6d4, #8b5cf6, #ec4899); }
        .proof-quote { font-size: 1.4rem; font-weight: 500; line-height: 1.5; color: var(--text-primary); margin-bottom: 1.5rem; letter-spacing: -0.01em; }
        .proof-meta { display: flex; align-items: center; gap: 1rem; }
        .proof-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-deep), var(--accent-light)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; }
        .proof-name { font-weight: 600; color: var(--text-primary); }
        .proof-role { font-size: 0.875rem; color: var(--text-dim); }
        .proof-stats-row { display: flex; gap: 3rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-subtle); }
        .proof-stat-num { font-size: 1.5rem; font-weight: 700; color: #ffffff; }
        .proof-stat-label { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.15rem; }

        /* ─── TESTIMONIAL GRID ─── */
        .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
        .tcard { background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color 0.2s; }
        .tcard:hover { border-color: rgba(56,189,248,0.2); }
        .tcard-stars { color: #fbbf24; font-size: 0.85rem; letter-spacing: 2px; }
        .tcard-quote { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; flex: 1; font-style: italic; }
        .tcard-author { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
        .tcard-context { font-size: 0.78rem; color: var(--accent-primary); font-family: var(--font-mono); margin-top: 0.1rem; }
        @media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } }

        /* ─── VIDEO TESTIMONIALS ─── */
        .video-section { position: relative; z-index: 1; padding: var(--section-pad) 2rem; }
        .video-hero { max-width: 800px; margin: 3rem auto 0; border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 16/9; background: #000; border: 1.5px solid var(--border-subtle); }
        .video-hero iframe { width: 100%; height: 100%; border: none; }
        .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; max-width: 1000px; margin-left: auto; margin-right: auto; }
        .vcard { background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: 12px; overflow: hidden; transition: all 0.3s; cursor: pointer; }
        .vcard:hover { border-color: rgba(59,130,246,0.25); transform: translateY(-2px); box-shadow: 0 0 30px rgba(59,130,246,0.1); }
        .vcard-thumb { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
        .vcard-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,15,0.1) 0%, rgba(6,8,15,0.5) 100%); pointer-events: none; transition: opacity 0.3s; }
        .vcard:hover .vcard-thumb::after { opacity: 0.6; }
        .vcard-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: all 0.3s; filter: saturate(0.8); }
        .vcard-custom-thumb { width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative; }
        .vcard-custom-thumb::after { content:'';position:absolute;inset:0;opacity:0.06;background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.3) 1px, transparent 0);background-size:20px 20px; }
        .vcard:hover .vcard-thumb img { opacity: 1; filter: saturate(1); }
        .vcard-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
        .vcard-play-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(59,130,246,0.9); display: flex; align-items: center; justify-content: center; transition: all 0.3s; backdrop-filter: blur(4px); }
        .vcard:hover .vcard-play-btn { background: rgba(59,130,246,1); transform: scale(1.1); box-shadow: 0 0 20px rgba(59,130,246,0.4); }
        .vcard-play-btn svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }
        .vcard-info { padding: 1rem 1.25rem; }
        .vcard-name { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
        .vcard-loc { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-primary); margin-top: 0.15rem; }
        .vcard-desc { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.5rem; line-height: 1.5; }
        @media (max-width: 768px) { .video-grid { grid-template-columns: 1fr; } }

        /* ─── FAQ ─── */
        .faq-section { position: relative; z-index: 1; padding: var(--section-pad) 2rem; background: var(--bg-surface); border-top: 1.5px solid var(--border-subtle); border-bottom: 1.5px solid var(--border-subtle); }
        .faq-list { max-width: 760px; margin: 3rem auto 0; display: flex; flex-direction: column; gap: 0.5rem; }
        .faq-item { background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
        .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--text-primary); gap: 1rem; transition: background 0.2s; }
        .faq-question:hover { background: rgba(255,255,255,0.03); }
        .faq-icon { font-size: 1.4rem; color: var(--accent-primary); font-weight: 300; flex-shrink: 0; line-height: 1; transition: transform 0.2s; }
        .faq-item.open .faq-icon { transform: rotate(45deg); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
        .faq-item.open .faq-answer { max-height: 400px; }
        .faq-answer-inner { padding: 0 1.5rem 1.5rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75; }

        /* ─── FINAL CTA ─── */
        .final-cta { position: relative; z-index: 1; padding: var(--section-pad) 2rem; text-align: center; border-top: 1.5px solid var(--border-subtle); }
        .final-cta::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 500px; height: 350px; background: radial-gradient(ellipse at center, rgba(139,92,246,0.06) 0%, transparent 70%); pointer-events: none; filter: blur(40px); }
        .final-inner { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; }
        .final-cta h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 0.85rem; }
        .final-cta p { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 2.25rem; line-height: 1.7; max-width: 550px; margin-left: auto; margin-right: auto; }
        .final-note { margin-top: 1.25rem; font-size: 0.82rem; color: var(--text-dim); }

        /* ─── FOOTER ─── */
        footer { position: relative; z-index: 1; border-top: 1.5px solid var(--border-subtle); padding: 4rem 2rem 2rem; }
        .footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
        .footer-brand { font-weight: 700; font-size: 1.1rem; color: var(--text-primary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
        .footer-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); }
        .footer-tagline { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; }
        .footer-contact { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); line-height: 2; }
        .footer-contact a { color: var(--text-secondary); text-decoration: none; }
        .footer-contact a:hover { color: var(--accent-primary); }
        .footer-col h4 { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-primary); margin-bottom: 1rem; }
        .footer-col a { display: block; font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; padding: 0.25rem 0; transition: color 0.2s; }
        .footer-col a:hover { color: var(--text-primary); }
        .footer-bottom { max-width: 1100px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
        .footer-bottom p { font-size: 0.75rem; color: var(--text-dim); }
        .footer-bottom a { color: var(--text-dim); text-decoration: none; }
        .footer-bottom a:hover { color: var(--accent-primary); }
        .footer-legal { font-size: 0.7rem; color: var(--text-dim); max-width: 1100px; margin: 1.5rem auto 0; line-height: 1.6; }
        @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; text-align: center; } }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 900px) {
            .system-grid { grid-template-columns: 1fr; }
            .diff-grid { grid-template-columns: 1fr; gap: 3rem; }
        }
        /* ─── HAMBURGER MENU ─── */
        .nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1001; }
        .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-primary); margin: 5px 0; transition: all 0.3s; border-radius: 2px; }
        .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .nav-hamburger.open span:nth-child(2) { opacity: 0; }
        .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

        @media (max-width: 768px) {
            /* ── Global mobile safety ── */
            :root { --section-pad: 80px; }
            body { overflow-x: hidden; }

            /* ── Hours bar ── */
            .live-hours-bar { font-size: 0.62rem; padding: 0.35rem 1rem; top: 52px; }

            /* ── Hero ── */
            .hero { min-height: auto; padding-top: 120px; padding-bottom: 60px; }
            .hero h1 { font-size: clamp(2.2rem, 8vw, 3.2rem); margin-bottom: 1rem; }
            .hero-inner { max-width: 100%; padding: 0 1rem; }
            .hero-sub { max-width: 100%; font-size: 1rem; margin-bottom: 1.5rem; }
            .hero-tag { font-size: 0.68rem; padding: 0.35rem 0.75rem; }
            .hero-proof { font-size: 0.75rem; }
            .hero-skip-link { padding: 0.75rem 0; min-height: 44px; display: inline-flex; align-items: center; }

            /* ── Sections ── */
            .stat-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
            .section-inner { padding: 0; }
            .diff-row { grid-template-columns: 1fr; gap: 0.25rem; text-align: left; }
            .diff-old { display: none; }
            .diff-arrow { display: none; }
            .proof-stats-row { flex-direction: column; gap: 1.5rem; }
            .section-label { font-size: 0.72rem; }
            .card-metric { font-size: 0.75rem; }
            .testimonial-grid { grid-template-columns: 1fr; }

            /* ── Mobile nav ── */
            .nav-hamburger { display: block; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
            .nav-brand { min-height: 44px; display: flex; align-items: center; }
            .nav-right { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: var(--bg-surface); border-left: 1px solid var(--border-subtle); flex-direction: column; align-items: flex-start; padding: 5rem 2rem 2rem; gap: 0.5rem; transition: right 0.3s ease; z-index: 1000; }
            .nav-right.open { right: 0; }
            .nav-link { display: block; font-size: 1.1rem; color: var(--text-primary); padding: 0.75rem 0; min-height: 44px; }
            .nav-cta { width: 100%; text-align: center; padding: 0.85rem 1.5rem; min-height: 44px; margin-top: 0.5rem; }
            .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; }
            .mobile-nav-overlay.open { display: block; }

            /* ── Video section ── */
            .video-section { padding: 40px 1rem; }
            .video-inner .section-title { font-size: 1.3rem; margin-bottom: 0.25rem; }
            .video-inner .section-desc { font-size: 0.85rem; margin-bottom: 1rem !important; }
            .video-wrapper { border-radius: 12px; }

            /* ── Arlo teaser responsive ── */
            .arlo-teaser { max-width: 100%; margin: 1.5rem 0 0; }
            .arlo-teaser-reply { flex-direction: column; gap: 0.6rem; padding: 0.75rem 1rem; }
            .hero-arlo-input { width: 100%; padding: 0.75rem 0; min-height: 44px; font-size: 16px; }
            .arlo-teaser-cta { width: 100%; text-align: center; padding: 0.75rem 1rem; min-height: 44px; font-size: 0.85rem; }

            /* ── FAQ touch targets ── */
            .faq-question { min-height: 52px; padding: 1rem 1.25rem; }

            /* ── Footer ── */
            footer { padding: 2rem 1.5rem; }
            footer p { font-size: 0.82rem; line-height: 1.8; }
        }
        /* ─── CARRIER LOGOS BAR ─── */
        .carrier-bar { position: relative; z-index: 1; padding: 2.5rem 2rem; border-bottom: 1.5px solid var(--border-subtle); }
        .carrier-bar-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
        .carrier-bar-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 1.5rem; }
        .carrier-logos { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
        .arlo-teaser-badge { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent-primary); background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); padding: 0.15rem 0.5rem; border-radius: 100px; letter-spacing: 0.03em; }
        .carrier-logo { opacity: 0.5; transition: opacity 0.3s; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: center; }
        .carrier-logo:hover { opacity: 0.85; }
        .carrier-logo img { height: 28px; width: auto; object-fit: contain; filter: grayscale(100%); transition: filter 0.3s; }
        .carrier-logo:nth-child(1) img { height: 22px; } /* Humana — wide logo, scale down slightly */
        .carrier-logo:nth-child(3) img { height: 18px; } /* UHC — very wide logo, scale down */
        .carrier-logo:nth-child(4) img { height: 38px; } /* WellCare — small SVG, boost */
        .carrier-logo:nth-child(5) img { height: 42px; } /* Cigna — near-square SVG */
        .carrier-logo:nth-child(6) img { height: 64px; } /* Anthem — square logo with internal padding */
        .carrier-logo:hover img { filter: grayscale(0%); }
        @media (max-width: 768px) { .carrier-logos { gap: 1rem; } .carrier-logo img { height: 20px; } .carrier-logo:nth-child(1) img { height: 16px; } .carrier-logo:nth-child(3) img { height: 13px; } .carrier-logo:nth-child(4) img { height: 27px; } .carrier-logo:nth-child(5) img { height: 30px; } .carrier-logo:nth-child(6) img { height: 46px; } }

        /* ─── RETENTION BADGE ─── */
        .retention-badge { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(56, 189, 248, 0.06); border: 1.5px solid rgba(56, 189, 248, 0.2); border-radius: 100px; padding: 0.5rem 1.25rem; margin-top: 1.25rem; }
        .retention-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 10px rgba(56, 189, 248, 0.4); }
        .retention-badge-text { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-light); font-weight: 400; }

        /* ─── VALIDATION SECTION ─── */
        .validation-section { position: relative; z-index: 1; padding: var(--section-pad) 2rem; }
        .validation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; max-width: 900px; }
        .validation-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: 12px; transition: border-color 0.2s; }
        .validation-item:hover { border-color: rgba(56, 189, 248, 0.25); }
        .validation-check { color: var(--accent-primary); font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
        .validation-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
        @media (max-width: 768px) { .validation-grid { grid-template-columns: 1fr; } }

        /* ─── GAME CTA PANEL ─── */
        .game-panel { position: relative; z-index: 1; padding: var(--section-pad) 2rem; background: var(--bg-deep); border-top: 1.5px solid var(--border-subtle); border-bottom: 1.5px solid var(--border-subtle); overflow: hidden; }
        .game-panel::before { content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(ellipse at center, rgba(139,92,246,0.06) 0%, rgba(56,189,248,0.03) 30%, transparent 60%); pointer-events: none; filter: blur(60px); }
        .game-panel-inner { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
        .game-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; color: #a78bfa; background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.15); padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
        .game-tag .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; animation: pulse-dot 2s ease-in-out infinite; }
        .game-headline { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1rem; }
        .game-headline .game-gradient { background: linear-gradient(90deg, #a78bfa, #38bdf8, #34d399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .game-sub { font-size: 1.1rem; color: var(--text-secondary); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.7; }
        .game-cta { display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; padding: 1rem 2.5rem; border-radius: 100px; text-decoration: none; font-weight: 700; font-size: 1.05rem; transition: all 0.3s; border: none; cursor: pointer; box-shadow: 0 0 30px rgba(124, 58, 237, 0.2); }
        .game-cta:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(124, 58, 237, 0.35), 0 0 80px rgba(99, 102, 241, 0.15); }
        .game-cta .play-icon { font-size: 1.2rem; }
        .game-fine { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }

        /* ─── PHONE CTA STRIP ─── */
        .phone-strip { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
        .phone-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.6rem 1.25rem; border: 1.5px solid var(--border-subtle); border-radius: 100px; transition: all 0.2s; }
        .phone-link:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.04); }
        .phone-link svg { width: 16px; height: 16px; }

        /* ─── NOT-MLM BADGE ─── */
        .trust-badges { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
        .trust-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); background: rgba(255, 255, 255, 0.03); border: 1.5px solid rgba(255, 255, 255, 0.1); padding: 0.4rem 1rem; border-radius: 100px; }
        .trust-badge-icon { width: 14px; height: 14px; color: var(--accent-primary); }

    /* ─── ARLO CHAT ─── */
    @keyframes spectrumSpin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
    .spectrum-spinner { position:absolute;inset:-50%;width:200%;height:200%;transform-origin:center center; }
    .arlo-panel { position:fixed;bottom:24px;right:24px;width:440px;max-width:calc(100vw - 40px);max-height:calc(100vh - 80px);background:transparent;border:none;border-radius:22px;z-index:2000;display:none;flex-direction:column;overflow:visible;padding:0; }
    .arlo-panel-border { position:absolute;inset:-3px;border-radius:23px;z-index:0;pointer-events:none;background:linear-gradient(135deg, #34d399, #06b6d4, #8b5cf6, #ec4899, #f59e0b, #34d399); }
    .arlo-glow { position:absolute;inset:-12px;border-radius:34px;z-index:-1;pointer-events:none;filter:blur(24px);opacity:0.6;background:linear-gradient(135deg, rgba(52,211,153,0.5), rgba(6,182,212,0.5), rgba(139,92,246,0.5), rgba(236,72,153,0.5), rgba(245,158,11,0.5), rgba(52,211,153,0.5)); }
    .arlo-panel.open { display:flex; }
    .arlo-panel > .arlo-panel-inner { position:relative;z-index:2; }
    .arlo-panel-inner { background:#ffffff;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;width:100%;max-width:100%;max-height:calc(100vh - 120px);min-height:0;position:relative;z-index:2;box-shadow:0 20px 60px rgba(15,23,42,0.15); }
    .arlo-header { display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(15,23,42,0.06);background:rgba(248,250,252,0.8); }
    .arlo-header-left { display:flex;align-items:center;gap:0.5rem; }
    .arlo-dot { width:8px;height:8px;border-radius:50%;background:var(--accent-primary);box-shadow:0 0 8px var(--accent-primary); }
    .arlo-title { font-weight:700;font-size:0.95rem; }
    /* WS-132 Path B regression #11 — status row come-alive: 200ms opacity
       cross-fade between Ready / Listening / Thinking. JS toggles the
       .is-swapping class for the duration of the swap; CSS hides the text
       so the change is invisible. data-state drives the dot tint via
       .arlo-dot rules below. Reduced-motion gets an instant swap. */
    .arlo-status { font-family:var(--font-mono);font-size:0.65rem;color:var(--accent-primary);transition:opacity 0.20s cubic-bezier(0.22,0.61,0.36,1),color 0.20s cubic-bezier(0.22,0.61,0.36,1); }
    .arlo-status.is-swapping { opacity:0; }
    .arlo-status[data-state="thinking"] { color:var(--text-dim); }
    @media (prefers-reduced-motion: reduce) {
        .arlo-status { transition:none; }
        .arlo-status.is-swapping { opacity:1; }
    }
    /* Dot tint follows the status state on the panel header. The dot lives
       in the same .arlo-header-left as .arlo-status, so a sibling selector
       reaches it. Listening keeps the existing accent; Thinking softens. */
    .arlo-header-left:has(.arlo-status[data-state="thinking"]) .arlo-dot { background:var(--text-dim);box-shadow:0 0 6px var(--text-dim);transition:background 0.20s cubic-bezier(0.22,0.61,0.36,1),box-shadow 0.20s cubic-bezier(0.22,0.61,0.36,1); }
    .arlo-header-left:has(.arlo-status[data-state="listening"]) .arlo-dot { background:var(--accent-primary);box-shadow:0 0 8px var(--accent-primary);transition:background 0.20s cubic-bezier(0.22,0.61,0.36,1),box-shadow 0.20s cubic-bezier(0.22,0.61,0.36,1); }
    .arlo-close { background:none;border:none;color:var(--text-dim);font-size:1.5rem;cursor:pointer;padding:0 0.25rem;line-height:1; }
    .arlo-close:hover { color:var(--text-primary); }
    .arlo-messages { flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:0.85rem;min-height:200px;max-height:calc(100vh - 200px); }
    .arlo-msg { max-width:85%;padding:0.75rem 1rem;border-radius:14px;font-size:0.88rem;line-height:1.55;animation:msgIn 0.2s ease; }
    @keyframes msgIn { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
    @keyframes msgPop { 0%{opacity:0;transform:scale(0.3) translateY(20px)}40%{opacity:1;transform:scale(1.08) translateY(-2px)}70%{transform:scale(0.96) translateY(1px)}100%{transform:scale(1) translateY(0)} }
    .arlo-msg.pop-in { animation: msgPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
    .arlo-msg.arlo { background:rgba(8,145,178,0.06);border:1px solid rgba(8,145,178,0.1);align-self:flex-start;border-bottom-left-radius:4px; }
    .arlo-msg.user { background:rgba(15,23,42,0.04);border:1px solid rgba(15,23,42,0.06);align-self:flex-end;border-bottom-right-radius:4px; }
    .arlo-msg.typing { color:var(--text-dim);font-style:italic; }
    .arlo-buttons { display:flex;flex-direction:column;gap:0.4rem;padding:0 1.25rem;animation:msgIn 0.25s ease; }
    .arlo-btn-option { background:rgba(56,189,248,0.06);border:1.5px solid rgba(56,189,248,0.2);border-radius:10px;padding:0.6rem 1rem;color:var(--text-primary);font-family:var(--font-body);font-size:0.85rem;cursor:pointer;transition:all 0.2s;text-align:left; }
    .arlo-btn-option:hover { background:rgba(56,189,248,0.12);border-color:rgba(56,189,248,0.4);transform:translateX(3px); }
    .arlo-btn-option:active { transform:translateX(3px) scale(0.98); }
    .arlo-buttons-used .arlo-btn-option { opacity:0.4;pointer-events:none;cursor:default; }
    .arlo-buttons-used .arlo-btn-option.selected { opacity:1;background:rgba(56,189,248,0.15);border-color:rgba(56,189,248,0.4); }
    .arlo-btn-hint { font-size:0.72rem;color:var(--text-dim);text-align:center;padding:0.3rem 0 0;cursor:pointer; }
    .arlo-btn-hint:hover { color:var(--accent-primary); }
    .arlo-buttons-used .arlo-btn-hint { display:none; }
    /* Subtle chip variant — used on cockpit_authed surface (PR-1143-FOLLOWUP).
       Smaller, inline, lower-contrast than the marketing card buttons.
       Authed users get task-aware chips below the greeting; the loud
       4-button card style would over-emphasize wrong CTAs. */
    .arlo-buttons-subtle { flex-direction:row;flex-wrap:wrap;gap:0.35rem;padding:0.25rem 1.25rem 0.4rem; }
    .arlo-buttons-subtle .arlo-btn-option { font-size:0.78rem;padding:0.4rem 0.75rem;border-radius:999px;background:rgba(56,189,248,0.04);border:1px solid rgba(56,189,248,0.18);color:var(--text-primary);text-align:center; }
    .arlo-buttons-subtle .arlo-btn-option:hover { background:rgba(56,189,248,0.1);border-color:rgba(56,189,248,0.32);transform:none; }
    .arlo-buttons-subtle .arlo-btn-option:active { transform:scale(0.97); }
    .arlo-input-wrap { display:flex;gap:0.5rem;padding:0.75rem 1rem;border-top:1px solid rgba(15,23,42,0.06);background:rgba(248,250,252,0.5); }
    .arlo-input { flex:1;background:#ffffff;border:1.5px solid rgba(15,23,42,0.1);border-radius:100px;padding:0.6rem 1rem;color:var(--text-primary);font-family:var(--font-body);font-size:16px;outline:none;transition:border-color 0.2s; }
    .arlo-input:focus { border-color:rgba(8,145,178,0.5); }
    .arlo-input::placeholder { color:#94a3b8; }
    .arlo-send { background:var(--accent-deep);border:none;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all 0.2s;flex-shrink:0; }
    .arlo-send:hover { background:var(--accent-primary);box-shadow:var(--glow-primary); }
    .arlo-send:disabled { opacity:0.4;cursor:not-allowed;background:var(--text-dim); }
    .arlo-send:disabled:hover { box-shadow:none;background:var(--text-dim); }
    .arlo-calendar-embed { padding:0.5rem;border-top:1px solid var(--border-subtle);background:rgba(255,255,255,0.02);flex:1;overflow:hidden;display:flex;flex-direction:column; }
    .arlo-calendar-embed iframe { width:100%;flex:1;min-height:500px;border:none;border-radius:10px;background:#fff; }
    .arlo-calendar-label { font-size:0.8rem;color:var(--accent-primary);font-family:var(--font-mono);text-align:center;margin-bottom:0.5rem;letter-spacing:0.02em; }
    /* .booking-overlay CSS removed 2026-04-27 — overlay surface retired
       in booking-entry-point consolidation (board-approved). Booking
       lives in the cockpit `book` task-tile. */
    /* WS-141: right margin now respects iOS landscape notch via
       safe-area-inset-right, and the bubble's outermost child (.arlo-bubble-blur,
       inset:-8px + filter:blur(12px) extending ~20px past the button bounds)
       gets clearance so the glow/blur isn't clipped at the viewport edge. */
    .arlo-bubble { position:fixed;bottom:calc(24px + env(safe-area-inset-bottom, 0px));right:calc(24px + env(safe-area-inset-right, 0px));width:56px;height:56px;border-radius:50%;background:var(--accent-deep);border:none;color:#fff;cursor:pointer;z-index:2000;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(30,58,138,0.3);transition:all 0.3s;overflow:visible; }
    .arlo-bubble-glow { position:absolute;inset:-4px;border-radius:50%;pointer-events:none;z-index:-1;background:conic-gradient(#34d399,#06b6d4,#8b5cf6,#ec4899,#f59e0b,#34d399); }
    .arlo-bubble-blur { position:absolute;inset:-8px;border-radius:50%;pointer-events:none;z-index:-2;filter:blur(12px);opacity:0.6;background:conic-gradient(rgba(52,211,153,0.5),rgba(6,182,212,0.5),rgba(139,92,246,0.5),rgba(236,72,153,0.5),rgba(245,158,11,0.5),rgba(52,211,153,0.5)); }
    .arlo-bubble:hover { background:var(--accent-deep);transform:scale(1.05);box-shadow:0 6px 30px rgba(139,92,246,0.4); }
    .arlo-bubble.hidden { display:none; }
    /* ─── MOBILE CHAT — CSS-DRIVEN, NO JS SIZING ─── */
    /* Rebuild 2026-04-26: removed all the JS-driven sizing workarounds
       (visualViewport listeners, panel.style.height/top writes, scrim
       div, MutationObserver). Modern iOS Safari (15.4+) handles
       100dvh + interactive-widget=resizes-content natively when nothing
       overrides it. The previous JS layer was the source of every
       "panel mid-screen", "whitespace gap", "keyboard moves away on
       msg 2" bug — none of which are possible without JS overriding CSS. */
    @media (max-width:768px) {
        /* Full-screen takeover. 100dvh shrinks when the iOS keyboard
           opens (with viewport meta interactive-widget=resizes-content).
           100vh is the fallback for browsers that don't support dvh. */
        .arlo-panel {
            position:fixed;top:0;left:0;right:0;bottom:0;
            width:100vw;height:100vh;height:100dvh;
            max-width:none;max-height:none;
            margin:0;padding:0;
            border-radius:0;
            z-index:2001;
            overflow:hidden;
        }
        .arlo-panel-border, .arlo-glow { display:none; }
        .arlo-panel-inner {
            border-radius:0;width:100%;max-width:none;max-height:none;
            height:100%;
            box-shadow:none;
            display:flex;flex-direction:column;
        }
        /* Messages fill all available space between header and input.
           overscroll-behavior:contain prevents momentum-scroll from
           propagating to body during iOS keyboard transitions. */
        .arlo-messages {
            min-height:0;
            max-height:none;
            flex:1 1 0%;
            overflow-y:auto;
            -webkit-overflow-scrolling:touch;
            overscroll-behavior:contain;
            padding-bottom:1rem;
        }
        /* Bottom-align content when it fits (standard chat-app pattern).
           When the conversation is short — e.g. just the opener + persona
           buttons — the messages stack at the BOTTOM of the container,
           flush above the input bar. When the keyboard opens and the
           container shrinks, content stays anchored to the bottom instead
           of the top sliding off-screen. The auto top-margin on the
           first child gets squeezed to zero when content overflows, so
           normal scroll-up-to-read-history still works.
           This was the chronic "first message disappears above the screen"
           bug from before the rebuild — the JS sizing workarounds were
           masking it; removing them exposed it cleanly. */
        .arlo-messages > *:first-child {
            margin-top:auto;
        }
        /* Input-wrap sits flush at the panel bottom (last flex child). */
        .arlo-input-wrap {
            padding:0.75rem 1rem;
            flex-shrink:0;
        }
        /* Send button — bigger and obviously tappable on mobile. */
        .arlo-send { width:48px;height:48px;flex-shrink:0;box-shadow:0 2px 10px rgba(8,145,178,0.3); }
        .arlo-send svg { width:22px;height:22px; }
        /* Lock body scroll when chat is open so the page doesn't scroll
           behind the panel. Single overflow:hidden — no touch-action or
           overscroll-behavior on body (those previously fought the
           interactive-widget=resizes-content shrink). */
        body.arlo-open { overflow:hidden; }
        html:has(body.arlo-open) { overflow:hidden; }
        .arlo-panel-inner { overscroll-behavior:contain; }
        /* Calendar embed on mobile — fill remaining space properly */
        .arlo-calendar-embed { flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0; }
        .arlo-calendar-embed iframe { min-height:400px;height:100%; }
    }
    /* ─── STICKY MOBILE CTA BAR ─── */
    .mobile-cta-bar { display:none; }
    @media (max-width:768px) {
        .mobile-cta-bar { display:flex;position:fixed;bottom:0;left:0;right:0;z-index:1999;background:rgba(255,255,255,0.92);border-top:1px solid rgba(15,23,42,0.06);padding:0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 20px));justify-content:center;gap:0.5rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); }
        /* White plate below the sticky CTA bar — kills page-content peek-through
           during iOS Safari elastic rubber-band on scroll-up, where the fixed
           bar briefly shifts and exposes body content beneath. Anchored to the
           bar (position:absolute relative to the fixed parent) so it travels
           with the bar during the elastic shift, painting any newly-exposed
           area white instead of body. Pointer-events:none keeps tap handling
           on the bar intact. */
        .mobile-cta-bar::after { content:'';position:absolute;top:100%;left:0;right:0;height:100vh;background:#fff;pointer-events:none; }
        .mobile-cta-bar.hidden { display:none; }
        .mobile-cta-btn { border:none;border-radius:100px;padding:0.7rem 1.1rem;font-family:var(--font-body);font-size:0.85rem;font-weight:600;cursor:pointer;flex:1;max-width:200px;text-align:center;display:inline-flex;align-items:center;justify-content:center;transition:all 0.3s; }
        .mobile-cta-primary { background:#0f172a;color:#fff; }
        .mobile-cta-primary:hover { background:#1e293b;box-shadow:0 4px 20px rgba(8,145,178,0.2); }
        .mobile-cta-secondary { background:transparent;color:#0f172a;border:1px solid rgba(15,23,42,0.18); }
        .mobile-cta-secondary:hover { background:rgba(15,23,42,0.04);border-color:rgba(15,23,42,0.32); }
        .arlo-bubble { display:none; }
        body { padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px)); }
    }

    /* ─── ARLO HERO TEASER ─── */
    .arlo-teaser { max-width:484px;margin:2rem auto 0;background:transparent;border:none;border-radius:22px;overflow:visible;transition:all 0.3s;text-align:left;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;position:relative;padding:0; }
    .arlo-teaser-border { position:absolute;inset:-2px;border-radius:22px;z-index:0;pointer-events:none;background:linear-gradient(135deg, #34d399, #06b6d4, #8b5cf6, #ec4899, #f59e0b, #34d399);opacity:0.8; }
    .arlo-teaser-inner { background:rgba(255,255,255,0.97);border-radius:20px;overflow:hidden;position:relative;z-index:1;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); }
    .arlo-teaser:hover { transform:translateY(-2px); }
    .arlo-teaser-glow { position:absolute;inset:-10px;border-radius:32px;z-index:-1;pointer-events:none;filter:blur(20px);opacity:0.45;background:linear-gradient(135deg, rgba(52,211,153,0.4), rgba(6,182,212,0.4), rgba(139,92,246,0.4), rgba(236,72,153,0.4), rgba(245,158,11,0.4), rgba(52,211,153,0.4)); }
    .arlo-teaser-header { display:flex;align-items:center;gap:0.5rem;padding:0.85rem 1.25rem;border-bottom:1px solid rgba(255,255,255,0.05);background:rgba(56,189,248,0.04); }
    .arlo-teaser-dot { width:8px;height:8px;border-radius:50%;background:var(--accent-primary);box-shadow:0 0 8px var(--accent-primary);animation:pulse-dot 2s ease-in-out infinite;flex-shrink:0; }
    .arlo-teaser-name { font-weight:700;font-size:0.9rem;color:var(--text-primary); }
    .arlo-teaser-status { font-family:var(--font-mono);font-size:0.65rem;color:var(--accent-primary);margin-left:auto; }
    .arlo-teaser-bubble { padding:1.1rem 1.25rem;font-size:1rem;color:var(--text-primary);line-height:1.6; }
    .arlo-teaser-reply { display:flex;align-items:center;padding:0.6rem 0.75rem 0.6rem 1.25rem;background:rgba(255,255,255,0.03);border-top:1px solid rgba(255,255,255,0.05);gap:0.5rem; }
    .hero-arlo-input { flex:1;background:transparent;border:none;outline:none;color:var(--text-primary);font-family:var(--font-body);font-size:16px;padding:0.35rem 0; }
    .hero-arlo-input::placeholder { color:var(--text-dim);font-style:italic; }
    .arlo-teaser-cta { font-size:0.75rem;font-weight:700;color:var(--accent-primary);font-family:var(--font-mono);background:none;border:1px solid rgba(56,189,248,0.2);border-radius:100px;padding:0.45rem 1rem;cursor:pointer;white-space:nowrap;transition:all 0.2s; }
    .arlo-teaser-cta:hover { background:rgba(56,189,248,0.08);border-color:rgba(56,189,248,0.4); }
    .hero-skip-link { display:block;margin-top:1.25rem;font-size:0.82rem;color:var(--text-dim);text-decoration:none;transition:color 0.2s; }
    .hero-skip-link:hover { color:var(--text-secondary); }

    /* EXIT-INTENT MODAL CSS removed 2026-05-02 — modal HTML+JS deleted in PR
       #985, no remaining users of .exit-modal-* selectors. modalIn keyframe
       was modal-only; spectrumSlide kept its own definition in blog-post.css. */

    /* WS-113.B1 — Cloudflare Turnstile reserved-height slot.
       Managed mode is ~65px tall when challenge fires, 0px invisible otherwise.
       Reserve the larger size to prevent layout shift per WS-13 layout discipline. */
    .cockpit-turnstile-slot { min-height: 65px; display: block; }
    .cockpit-turnstile-slot .cockpit-turnstile-msg { font-size:0.875rem;color:var(--text-secondary);padding-top:0.5rem; }