/* Landing page section styles (H2.2).
   Extracted VERBATIM from the inline <style> block in templates/landing.html when the
   page was migrated onto the shared website shell. Content-section styling only — the
   shell (header, navigation, footer, crisis bar) is now owned by site.css.

   KNOWN DEBT: this file still contains rules for the landing page's OWN former shell
   (.nav, .crisis-bar, .footer, .hamburger, .mobile-menu). They are now unused. They were
   left in place rather than stripped by hand during the migration, because deleting CSS
   from a 1,200-line block by pattern-matching risks silently removing a rule a content
   section depends on. Pruning them is a small, separately verifiable follow-up. */

        /* ============================================================
           RESET & BASE
           ============================================================ */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        /* ============================================================
           DESIGN TOKENS
           ============================================================ */
        :root {
            --brand-gradient:    linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
            --brand-gradient-2:  linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            --brand-primary:     #6366f1;
            --brand-secondary:   #8b5cf6;
            --brand-tertiary:    #06b6d4;

            --bg-page:           #ffffff;
            --bg-surface:        #f6f7fb;
            --bg-elevated:       #ffffff;
            --bg-card:           #ffffff;
            --text-primary:      #0f0f1a;
            --text-secondary:    #4a4a6a;
            --text-muted:        #7a7a9a;
            --border-subtle:     #e4e6f0;
            --border-accent:     rgba(99,102,241,0.22);
            --shadow-sm:         0 2px 8px rgba(0,0,0,0.06);
            --shadow-md:         0 4px 20px rgba(0,0,0,0.09);
            --shadow-lg:         0 8px 40px rgba(0,0,0,0.13);
            --shadow-xl:         0 16px 64px rgba(0,0,0,0.18);
            --nav-bg:            rgba(255,255,255,0.93);
            --nav-border:        rgba(99,102,241,0.12);
            --stats-bg:          #f2f3fb;
            --card-hover-shadow: 0 14px 44px rgba(99,102,241,0.20);
            --footer-bg:         #08081a;
            --footer-text:       rgba(255,255,255,0.60);
            --footer-heading:    #ffffff;
        }

        [data-theme="dark"] {
            --bg-page:           #08081a;
            --bg-surface:        #0e0e24;
            --bg-elevated:       #14142e;
            --bg-card:           #14142e;
            --text-primary:      #f1f1f8;
            --text-secondary:    #a0a0c8;
            --text-muted:        #606080;
            --border-subtle:     rgba(255,255,255,0.06);
            --border-accent:     rgba(99,102,241,0.30);
            --shadow-sm:         0 2px 8px rgba(0,0,0,0.50);
            --shadow-md:         0 4px 20px rgba(0,0,0,0.60);
            --shadow-lg:         0 8px 40px rgba(0,0,0,0.70);
            --shadow-xl:         0 16px 64px rgba(0,0,0,0.80);
            --nav-bg:            rgba(8,8,26,0.94);
            --nav-border:        rgba(99,102,241,0.24);
            --stats-bg:          #0e0e24;
            --card-hover-shadow: 0 14px 44px rgba(99,102,241,0.28);
            --footer-bg:         #04040f;
            --footer-text:       rgba(255,255,255,0.50);
            --footer-heading:    #f1f1f8;
        }

        html { scroll-behavior: smooth; font-size: 16px; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: var(--bg-page);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        h1, h2, h3, h4, h5 {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
        }

        :focus-visible {
            outline: 3px solid var(--brand-primary);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .skip-link {
            position: absolute; top: -120px; left: 16px;
            background: var(--brand-primary); color: #fff;
            padding: 10px 18px; border-radius: 0 0 10px 10px;
            font-weight: 700; font-size: 0.9375rem;
            z-index: 10000; text-decoration: none;
            transition: top 0.2s ease;
        }
        .skip-link:focus { top: 0; }

        /* ============================================================
           NAVBAR
           ============================================================ */
        .nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            background: transparent;
            border-bottom: 1px solid transparent;
            transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .nav.scrolled {
            background: var(--nav-bg);
            backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
            border-bottom-color: var(--nav-border);
            box-shadow: var(--shadow-sm);
        }
        .nav-inner {
            max-width: 1200px; margin: 0 auto; padding: 0 28px;
            height: 74px; display: flex; align-items: center;
            justify-content: space-between; gap: 24px;
        }
        .nav-logo {
            display: flex; align-items: center; gap: 10px;
            text-decoration: none; flex-shrink: 0;
        }
        .nav-logo-img {
            width: 36px; height: 36px; object-fit: contain;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
            transition: transform 0.2s ease;
        }
        .nav-logo:hover .nav-logo-img { transform: scale(1.05); }
        [data-theme="dark"] .nav.scrolled .nav-logo-img {
            filter: brightness(1.5) drop-shadow(0 1px 3px rgba(0,0,0,0.4));
        }
        .nav-logo-wordmark {
            font-size: 1.125rem; font-weight: 700; color: #fff;
            letter-spacing: -0.02em; transition: color 0.3s ease;
        }
        .nav.scrolled .nav-logo-wordmark { color: var(--text-primary); }

        .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
        .nav-links a {
            color: rgba(255,255,255,0.88); text-decoration: none;
            font-size: 0.9375rem; font-weight: 500; position: relative;
            transition: color 0.2s ease;
        }
        .nav-links a::after {
            content: ''; position: absolute; bottom: -5px; left: 0; right: 0;
            height: 2px; background: #fff; transform: scaleX(0);
            transition: transform 0.22s ease; border-radius: 2px;
        }
        .nav-links a:hover { color: #fff; }
        .nav-links a:hover::after { transform: scaleX(1); }
        .nav.scrolled .nav-links a { color: var(--text-secondary); }
        .nav.scrolled .nav-links a::after { background: var(--brand-primary); }
        .nav.scrolled .nav-links a:hover { color: var(--brand-primary); }

        .nav-actions { display: flex; align-items: center; gap: 10px; }

        .theme-toggle {
            width: 40px; height: 40px; border-radius: 50%;
            border: 1.5px solid rgba(255,255,255,0.35);
            background: rgba(255,255,255,0.12); color: #fff;
            cursor: pointer; display: flex; align-items: center;
            justify-content: center; font-size: 1.1rem;
            transition: all 0.22s ease; flex-shrink: 0;
        }
        .theme-toggle:hover { background: rgba(255,255,255,0.24); transform: rotate(18deg); }
        .nav.scrolled .theme-toggle {
            background: var(--bg-surface); border-color: var(--border-subtle);
            color: var(--text-primary);
        }
        .nav.scrolled .theme-toggle:hover { border-color: var(--brand-primary); background: var(--bg-elevated); }

        .btn-login {
            background: #fff; color: var(--brand-primary); border: none;
            padding: 10px 26px; border-radius: 100px;
            font-size: 0.9375rem; font-weight: 700; text-decoration: none;
            display: inline-flex; align-items: center; gap: 6px;
            transition: all 0.22s ease; box-shadow: 0 2px 14px rgba(0,0,0,0.18);
            flex-shrink: 0; white-space: nowrap;
        }
        .btn-login:hover { transform: translateY(-1px); box-shadow: 0 5px 22px rgba(0,0,0,0.24); background: #f0f0ff; }
        .nav.scrolled .btn-login { background: var(--brand-gradient); color: #fff; box-shadow: 0 2px 14px rgba(99,102,241,0.38); }
        .nav.scrolled .btn-login:hover { box-shadow: 0 5px 24px rgba(99,102,241,0.52); }

        .hamburger {
            display: none; flex-direction: column; gap: 5px;
            background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px;
        }
        .hamburger span {
            display: block; width: 24px; height: 2px; background: #fff;
            border-radius: 2px; transition: all 0.3s ease;
        }
        .nav.scrolled .hamburger span { background: var(--text-primary); }
        .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
        .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

        .mobile-menu {
            display: none; position: absolute; top: 74px; left: 0; right: 0;
            background: var(--bg-elevated); border-top: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-lg); padding: 12px 20px 20px;
            flex-direction: column; gap: 2px;
        }
        .mobile-menu.open { display: flex; }
        .mobile-menu a {
            padding: 13px 16px; color: var(--text-primary); text-decoration: none;
            font-size: 1rem; font-weight: 500; border-radius: 10px;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .mobile-menu a:hover { background: var(--bg-surface); color: var(--brand-primary); }
        .mobile-menu .btn-login-mobile {
            margin-top: 8px; background: var(--brand-gradient); color: #fff;
            text-align: center; border-radius: 100px; font-weight: 700;
            box-shadow: 0 2px 14px rgba(99,102,241,0.32);
        }
        .mobile-menu .btn-login-mobile:hover {
            transform: translateY(-1px); box-shadow: 0 5px 22px rgba(99,102,241,0.45);
            background: var(--brand-gradient); color: #fff;
        }

        /* ============================================================
           HERO
           ============================================================ */
        .hero {
            min-height: 100vh; background: var(--brand-gradient);
            display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden; padding: 110px 28px 96px;
        }
        [data-theme="dark"] .hero {
            background: linear-gradient(135deg, #0f1060 0%, #1e0a50 60%, #0a2a40 100%);
        }

        /* Hero decorative blobs */
        .hero-blob {
            position: absolute; border-radius: 50%;
            filter: blur(80px); pointer-events: none;
            z-index: 0;
            animation: hero-blob-float 18s ease-in-out infinite;
        }
        .hero-blob-1 {
            width: 500px; height: 500px;
            background: rgba(99,102,241,0.35);
            top: -100px; left: -120px; animation-delay: 0s;
        }
        .hero-blob-2 {
            width: 420px; height: 420px;
            background: rgba(139,92,246,0.28);
            top: 30%; right: -100px; animation-delay: -6s;
        }
        .hero-blob-3 {
            width: 320px; height: 320px;
            background: rgba(6,182,212,0.20);
            bottom: -60px; left: 40%; animation-delay: -12s;
        }
        @keyframes hero-blob-float {
            0%,100% { transform: translate(0,0) scale(1); }
            33%      { transform: translate(30px,-40px) scale(1.04); }
            66%      { transform: translate(-20px,30px) scale(0.97); }
        }

        .particle {
            position: absolute; border-radius: 50%;
            background: rgba(255,255,255,0.06);
            animation: floatParticle linear infinite; pointer-events: none;
        }
        .particle:nth-child(1) { width:90px;  height:90px;  top:12%; left:8%;  animation-duration:22s; animation-delay:0s;   }
        .particle:nth-child(2) { width:140px; height:140px; top:58%; left:4%;  animation-duration:28s; animation-delay:-6s;  }
        .particle:nth-child(3) { width:55px;  height:55px;  top:28%; left:88%; animation-duration:17s; animation-delay:-3s;  }
        .particle:nth-child(4) { width:180px; height:180px; top:68%; left:82%; animation-duration:34s; animation-delay:-12s; }
        .particle:nth-child(5) { width:45px;  height:45px;  top:82%; left:48%; animation-duration:20s; animation-delay:-8s;  }
        .particle:nth-child(6) { width:110px; height:110px; top:8%;  left:58%; animation-duration:26s; animation-delay:-15s; }
        .particle:nth-child(7) { width:35px;  height:35px;  top:44%; left:28%; animation-duration:16s; animation-delay:-2s;  }
        .particle:nth-child(8) { width:75px;  height:75px;  top:22%; left:42%; animation-duration:24s; animation-delay:-9s;  }

        @keyframes floatParticle {
            0%   { transform:translate(0,0) rotate(0deg);      opacity:0.25; }
            20%  { transform:translate(20px,-30px) rotate(72deg);   opacity:0.55; }
            50%  { transform:translate(-15px,-80px) rotate(180deg);  opacity:0.30; }
            75%  { transform:translate(35px,-120px) rotate(270deg);  opacity:0.50; }
            100% { transform:translate(0,-170px) rotate(360deg);   opacity:0;    }
        }

        .hero-watermark {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: min(640px, 90vw);
            height: auto;
            filter: brightness(0) invert(1);
            opacity: 0.07;
            pointer-events: none;
            z-index: 0;
            user-select: none;
        }
        .hero-content { position:relative; z-index:1; text-align:center; max-width:820px; width:100%; }

        .hero-badge {
            display:inline-flex; align-items:center; gap:8px;
            background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28);
            color:#fff; padding:8px 22px; border-radius:100px;
            font-size:0.875rem; font-weight:500; margin-bottom:30px;
            backdrop-filter:blur(10px); letter-spacing:0.02em;
        }
        .hero-title {
            font-size:clamp(2.25rem,5vw,3.875rem); font-weight:900; color:#fff;
            line-height:1.12; letter-spacing:-0.035em; margin-bottom:24px;
        }
        .hero-subtitle {
            font-size:clamp(1rem,2vw,1.25rem); color:rgba(255,255,255,0.78);
            line-height:1.72; max-width:620px; margin:0 auto 44px; font-weight:400;
        }
        .hero-ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

        .btn-primary-hero {
            background:#fff; color:var(--brand-primary); border:none;
            padding:17px 38px; border-radius:100px; font-size:1.0625rem; font-weight:800;
            cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
            transition:all 0.25s ease; box-shadow:0 4px 28px rgba(0,0,0,0.22); letter-spacing:-0.01em;
        }
        .btn-primary-hero:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,0.30); background:#f2f2ff; color:#5066d4; }

        .btn-secondary-hero {
            background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.55);
            padding:17px 38px; border-radius:100px; font-size:1.0625rem; font-weight:700;
            cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
            transition:all 0.25s ease; letter-spacing:-0.01em;
        }
        .btn-secondary-hero:hover { border-color:#fff; background:rgba(255,255,255,0.12); transform:translateY(-3px); }

        .scroll-chevron {
            position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
            display:flex; flex-direction:column; align-items:center;
            animation:bounceDown 2.2s ease-in-out infinite;
            text-decoration:none; opacity:0.8;
        }
        .scroll-chevron-icon {
            display:block; width:26px; height:26px;
            border-right:2.5px solid rgba(255,255,255,0.75);
            border-bottom:2.5px solid rgba(255,255,255,0.75);
            transform:rotate(45deg);
        }
        @keyframes bounceDown {
            0%,100% { transform:translateX(-50%) translateY(0); opacity:0.7; }
            50%      { transform:translateX(-50%) translateY(10px); opacity:1; }
        }

        /* ============================================================
           SHARED SECTION STYLES
           ============================================================ */
        section { padding:104px 28px; }
        .section-inner { max-width:1200px; margin:0 auto; }
        .section-tag {
            display:inline-block;
            background:linear-gradient(135deg,rgba(99,102,241,0.11),rgba(139,92,246,0.11));
            color:var(--brand-primary); padding:6px 18px; border-radius:100px;
            font-size:0.8125rem; font-weight:700; letter-spacing:0.09em;
            text-transform:uppercase; margin-bottom:16px;
        }
        .section-title {
            font-size:clamp(1.875rem,3.5vw,2.75rem); font-weight:800;
            color:var(--text-primary); line-height:1.18; letter-spacing:-0.03em; margin-bottom:16px;
        }
        .section-subtitle { font-size:1.125rem; color:var(--text-secondary); max-width:580px; line-height:1.72; }

        /* HV-S2-002: restore the horizontal centring these blocks always declared.
           The shell's `.site-body p` rule (specificity 0,1,1) outranks every
           single-class component rule (0,1,0) — the same trap that broke three
           buttons via `.site-body a`, documented in site.css — and flattened each
           landing block whose own rule says `margin: … auto`. Every centre-texted,
           max-width-capped paragraph then sat flush-left inside its centred parent.
           One restore rule, one place; the `.site-body` qualifier is what wins the
           contest (0,2,1). Horizontal margins only: the vertical rhythm the page
           currently renders with is the accepted one. */
        .site-body p.hero-subtitle,
        .site-body p.section-subtitle,
        .site-body p.gap-punch,
        .site-body p.promise-lead,
        .site-body p.loop-punch,
        .site-body p.guide-roadmap-note,
        .site-body p.honesty-foot {
            margin-left: auto;
            margin-right: auto;
        }
        /* The one deliberately left-aligned subtitle: the memory section's split
           layout ranges its copy left; auto margins would nudge it off the left
           edge its own heading sits on. */
        .site-body .memory-copy p.section-subtitle { margin-left: 0; margin-right: 0; }

        /* Fade-in via IntersectionObserver */
        .fade-in { opacity:0; transform:translateY(26px); transition:opacity 0.7s ease, transform 0.7s ease; }
        .fade-in.visible { opacity:1; transform:translateY(0); }
        .fade-in-delay-1 { transition-delay:0.10s; }
        .fade-in-delay-2 { transition-delay:0.20s; }
        .fade-in-delay-3 { transition-delay:0.30s; }
        .fade-in-delay-4 { transition-delay:0.40s; }
        .fade-in-delay-5 { transition-delay:0.50s; }
        .fade-in-delay-6 { transition-delay:0.60s; }

        /* ============================================================
           FOR CLINICIANS — Accordion List
           ============================================================ */
        .for-clinicians { background:var(--bg-page); }
        .clinicians-grid { display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center; }

        .clin-accordion { margin-top:30px; display:flex; flex-direction:column; gap:8px; }

        .clin-item {
            background:var(--bg-surface); border:1px solid var(--border-subtle);
            border-radius:14px; overflow:hidden;
            transition:border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .clin-item.open {
            border-color:var(--border-accent);
            box-shadow:0 4px 20px rgba(99,102,241,0.12);
        }
        .clin-btn {
            width:100%; display:flex; align-items:center; gap:12px;
            padding:14px 18px; background:none; border:none;
            cursor:pointer; text-align:left; font-family:inherit;
            font-size:0.9375rem; font-weight:600; color:var(--text-secondary);
            transition:color 0.2s ease;
        }
        .clin-btn:hover { color:var(--text-primary); }
        .clin-item.open .clin-btn { color:var(--text-primary); }
        .clin-check { color:#22c55e; font-size:1.125rem; flex-shrink:0; }
        .clin-plus {
            margin-left:auto; width:24px; height:24px; border-radius:50%; flex-shrink:0;
            background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(139,92,246,0.12));
            display:flex; align-items:center; justify-content:center;
            color:var(--brand-primary); font-size:1rem; font-weight:300; line-height:1;
            transition:transform 0.28s ease, background 0.22s ease, color 0.22s ease;
        }
        .clin-item.open .clin-plus {
            transform:rotate(45deg);
            background:var(--brand-gradient); color:#fff;
        }
        .clin-detail {
            max-height:0; overflow:hidden;
            transition:max-height 0.38s cubic-bezier(0.4,0,0.2,1);
        }
        .clin-detail-inner {
            padding:0 18px 16px 48px;
            font-size:0.875rem; color:var(--text-muted); line-height:1.70;
            border-left:3px solid var(--brand-primary);
            margin:0 18px 0 44px;
            border-radius:0 0 4px 4px;
        }

        /* CSS Dashboard Illustration */
        .dashboard-mockup { position:relative; height:440px; }
        .mock-card { position:absolute; border-radius:18px; padding:22px; box-shadow:var(--shadow-xl); }
        .mock-main {
            width:86%; height:290px; background:var(--bg-elevated);
            border:1px solid var(--border-subtle); top:0; left:0;
        }
        .mock-header-row {
            display:flex; align-items:center; gap:10px;
            margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border-subtle);
        }
        .mock-avatar-circle { width:34px; height:34px; border-radius:50%; background:var(--brand-gradient); flex-shrink:0; }
        .mock-title-block { display:flex; flex-direction:column; gap:5px; }
        .mock-pill { height:9px; border-radius:5px; background:var(--border-subtle); }
        .mock-pill-wide { width:130px; } .mock-pill-short { width:80px; }
        /* minmax(0,1fr): a bare 1fr floors at min-content, and the fixed-width skeleton
           bars below made each column ~97px — 3 columns overflowed a 320px viewport by
           13px and the whole page scrolled sideways (found by H2.3-S2's 320px gate). */
        .mock-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
        .mock-metric { background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.08)); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:6px; }
        .mock-metric-val { height:14px; width:44px; max-width:100%; background:var(--brand-primary); border-radius:5px; opacity:0.65; }
        .mock-metric-lbl { height:7px; width:66px; max-width:100%; background:var(--border-subtle); border-radius:4px; }
        .mock-bars { display:flex; align-items:flex-end; gap:6px; height:64px; }
        .mock-bar { flex:1; border-radius:5px 5px 0 0; background:var(--brand-gradient); opacity:0.45; }
        .mock-patients {
            width:56%; height:185px; background:var(--brand-gradient);
            bottom:0; right:0; display:flex; flex-direction:column;
            justify-content:center; gap:12px; padding:20px;
        }
        .mock-patient-row { display:flex; align-items:center; gap:9px; }
        .mock-p-avatar { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.28); flex-shrink:0; }
        .mock-p-info { flex:1; display:flex; flex-direction:column; gap:5px; }
        .mock-p-line { height:7px; border-radius:4px; background:rgba(255,255,255,0.5); }
        .mock-status { padding:3px 9px; border-radius:100px; font-size:0.625rem; font-weight:700; flex-shrink:0; letter-spacing:0.03em; }
        .mock-status-green { background:rgba(34,197,94,0.28); color:#86efac; }
        .mock-status-amber { background:rgba(251,191,36,0.28); color:#fde68a; }
        .mock-status-red   { background:rgba(239,68,68,0.28);  color:#fca5a5; }
        .mock-floating {
            width:46%; height:108px; background:var(--bg-elevated);
            border:1px solid var(--border-subtle); top:208px; right:14px;
            display:flex; flex-direction:column; gap:9px; justify-content:center;
        }
        .mock-float-title { height:11px; width:104px; background:var(--brand-primary); border-radius:5px; opacity:0.55; margin-bottom:2px; }
        .mock-risk-row { display:flex; align-items:center; gap:8px; }
        .mock-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
        .mock-risk-line { height:7px; border-radius:4px; background:var(--border-subtle); }

        /* ============================================================
           GUIDE / CAPABILITIES / ROADMAP
           ============================================================ */
        .guide-roadmap { background:var(--bg-surface); }
        .guide-header { text-align:center; margin-bottom:56px; }
        .guide-header .section-subtitle { margin:0 auto; max-width:720px; }
        .guide-grid {
            display:grid; grid-template-columns:repeat(3, 1fr);
            gap:24px; align-items:start;
        }
        .guide-card {
            background:var(--bg-elevated); border:1px solid var(--border-subtle);
            border-radius:22px; padding:30px 28px; box-shadow:var(--shadow-sm);
            transition:transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
            height:100%;
        }
        .guide-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-accent); }
        .guide-kicker {
            display:inline-flex; align-items:center; gap:8px;
            font-size:0.75rem; font-weight:800; letter-spacing:0.08em;
            text-transform:uppercase; color:var(--brand-primary); margin-bottom:14px;
        }
        .guide-card h3 {
            font-size:1.375rem; font-weight:800; letter-spacing:-0.02em;
            color:var(--text-primary); margin-bottom:12px;
        }
        .guide-card p {
            font-size:0.95rem; color:var(--text-secondary); line-height:1.72; margin-bottom:18px;
        }
        .guide-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
        .guide-list li {
            font-size:0.9rem; color:var(--text-secondary); line-height:1.65;
            display:flex; align-items:flex-start; gap:10px;
        }
        .guide-list strong { color:var(--text-primary); }
        .guide-bullet {
            flex-shrink:0; width:22px; height:22px; border-radius:50%;
            display:inline-flex; align-items:center; justify-content:center;
            background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(139,92,246,0.12));
            color:var(--brand-primary); font-size:0.8rem; font-weight:800; margin-top:1px;
        }
        .guide-roadmap-note {
            margin-top:30px; text-align:center; font-size:0.9375rem; color:var(--text-muted);
            line-height:1.7; max-width:820px; margin-left:auto; margin-right:auto;
        }
        .guide-status-strip {
            margin-top:32px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
        }
        .guide-status-card {
            background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:18px;
            padding:18px 18px 16px; box-shadow:var(--shadow-sm);
        }
        .guide-status-label {
            display:inline-flex; align-items:center; gap:8px; font-size:0.75rem; font-weight:800;
            text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;
        }
        .guide-status-live { color:#16a34a; }
        .guide-status-progress { color:#d97706; }
        .guide-status-boundary { color:#2563eb; }
        .guide-status-notyet { color:#7c3aed; }
        .guide-status-card h4 {
            font-size:1rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.02em; margin-bottom:6px;
        }
        .guide-status-card p {
            font-size:0.875rem; color:var(--text-secondary); line-height:1.65;
        }
        .roadmap-board {
            margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
        }
        .roadmap-column {
            background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:22px;
            padding:24px 22px; box-shadow:var(--shadow-sm);
        }
        .roadmap-phase {
            display:inline-flex; align-items:center; gap:8px; border-radius:100px; padding:6px 14px;
            font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
        }
        .roadmap-phase-now { background:rgba(22,163,74,0.11); color:#15803d; }
        .roadmap-phase-next { background:rgba(217,119,6,0.11); color:#b45309; }
        .roadmap-phase-later { background:rgba(124,58,237,0.11); color:#6d28d9; }
        .roadmap-column h4 {
            font-size:1.15rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.02em; margin-bottom:8px;
        }
        .roadmap-column > p {
            font-size:0.9rem; color:var(--text-secondary); line-height:1.65; margin-bottom:16px;
        }
        .roadmap-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
        .roadmap-list li {
            display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--text-secondary); line-height:1.65;
        }
        .roadmap-dot {
            flex-shrink:0; width:20px; height:20px; border-radius:50%; display:inline-flex;
            align-items:center; justify-content:center; font-size:0.78rem; font-weight:800; margin-top:1px;
        }
        .roadmap-dot-now { background:rgba(22,163,74,0.12); color:#15803d; }
        .roadmap-dot-next { background:rgba(217,119,6,0.12); color:#b45309; }
        .roadmap-dot-later { background:rgba(124,58,237,0.12); color:#6d28d9; }
        .roadmap-list strong { color:var(--text-primary); }

        /* ============================================================
           REFERRAL JOURNEY + CLINICIAN ONBOARDING
           ============================================================ */
        .referral-journey { background:var(--bg-page); }
        .journey-header { text-align:center; margin-bottom:54px; }
        .journey-header .section-subtitle { margin:0 auto; max-width:780px; }
        .journey-grid {
            display:grid; grid-template-columns:repeat(4, 1fr);
            gap:18px; align-items:stretch;
        }
        .journey-step {
            background:var(--bg-card); border:1px solid var(--border-subtle);
            border-radius:20px; padding:22px 20px; box-shadow:var(--shadow-sm);
        }
        .journey-step-num {
            width:34px; height:34px; border-radius:50%;
            display:inline-flex; align-items:center; justify-content:center;
            font-size:0.875rem; font-weight:800; color:#fff;
            background:var(--brand-gradient); margin-bottom:12px;
        }
        .journey-step h3 {
            font-size:1.05rem; font-weight:800; color:var(--text-primary);
            letter-spacing:-0.02em; margin-bottom:8px;
        }
        .journey-step p { font-size:0.9rem; color:var(--text-secondary); line-height:1.66; }
        .journey-line {
            margin-top:18px; border:1px solid var(--border-subtle); border-radius:16px;
            padding:16px 18px; background:var(--bg-elevated);
            font-size:0.9rem; color:var(--text-secondary); line-height:1.65;
        }
        .journey-line strong { color:var(--text-primary); }

        .clinician-onboarding { background:var(--bg-surface); }
        .onboarding-header { text-align:center; margin-bottom:44px; }
        .onboarding-header .section-subtitle { margin:0 auto; max-width:760px; }
        .onboarding-strip {
            display:grid; grid-template-columns:repeat(4, 1fr);
            gap:16px;
        }
        .onboarding-phase {
            background:var(--bg-elevated); border:1px solid var(--border-subtle);
            border-radius:18px; padding:18px 16px; box-shadow:var(--shadow-sm);
        }
        .onboarding-badge {
            display:inline-flex; align-items:center; justify-content:center;
            padding:5px 11px; border-radius:100px; font-size:0.75rem;
            font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
            margin-bottom:10px;
        }
        .onboarding-badge-day0 { background:rgba(37,99,235,0.12); color:#1d4ed8; }
        .onboarding-badge-week1 { background:rgba(22,163,74,0.12); color:#15803d; }
        .onboarding-badge-week2 { background:rgba(217,119,6,0.12); color:#b45309; }
        .onboarding-badge-month1 { background:rgba(124,58,237,0.12); color:#6d28d9; }
        .onboarding-phase h3 {
            font-size:1rem; font-weight:800; color:var(--text-primary);
            letter-spacing:-0.02em; margin-bottom:8px;
        }
        .onboarding-phase p { font-size:0.875rem; color:var(--text-secondary); line-height:1.65; }
        .onboarding-note {
            margin-top:18px; font-size:0.875rem; color:var(--text-muted);
            text-align:center; line-height:1.65;
        }
        @media (max-width:980px) {
            .guide-grid { grid-template-columns:1fr; }
            .guide-status-strip { grid-template-columns:1fr 1fr; }
            .roadmap-board { grid-template-columns:1fr; }
            .journey-grid { grid-template-columns:1fr 1fr; }
            .onboarding-strip { grid-template-columns:1fr 1fr; }
        }
        @media (max-width:640px) {
            .guide-status-strip { grid-template-columns:1fr; }
            .journey-grid { grid-template-columns:1fr; }
            .onboarding-strip { grid-template-columns:1fr; }
        }

        /* ============================================================
           FAQ
           ============================================================ */
        .faq { background:var(--bg-page); }
        .faq-header { text-align:center; margin-bottom:60px; }
        .faq-header .section-subtitle { margin:0 auto; }
        .faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }

        .faq-item {
            border:1px solid var(--border-subtle); border-radius:16px;
            overflow:hidden; background:var(--bg-card);
            transition:border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .faq-item.open {
            border-color:var(--border-accent);
            box-shadow:0 4px 20px rgba(99,102,241,0.12);
        }
        .faq-btn {
            width:100%; display:flex; align-items:center; justify-content:space-between;
            padding:20px 24px; background:none; border:none; cursor:pointer;
            text-align:left; font-family:inherit; font-size:1rem; font-weight:600;
            color:var(--text-primary); gap:16px;
        }
        .faq-chevron {
            width:30px; height:30px; border-radius:50%; flex-shrink:0;
            background:linear-gradient(135deg,rgba(99,102,241,0.10),rgba(139,92,246,0.10));
            display:flex; align-items:center; justify-content:center;
            color:var(--brand-primary); font-size:1.125rem; font-style:normal;
            transition:transform 0.28s ease, background 0.22s ease, color 0.22s ease;
            font-weight:300; line-height:1;
        }
        .faq-item.open .faq-chevron {
            transform:rotate(45deg);
            background:var(--brand-gradient); color:#fff;
        }
        .faq-answer {
            max-height:0; overflow:hidden;
            transition:max-height 0.38s cubic-bezier(0.4,0,0.2,1);
        }
        .faq-answer-inner {
            padding:0 24px 22px;
            font-size:0.9375rem; color:var(--text-secondary); line-height:1.72;
            border-top:1px solid var(--border-subtle); padding-top:18px;
        }

        /* ============================================================
           FOUNDER
           ============================================================ */
        .founder { background:var(--bg-surface); padding:80px 28px; }
        .founder-inner { max-width:900px; margin:0 auto; }
        .founder-card {
            background:var(--bg-elevated);
            border:1px solid var(--border-subtle);
            border-radius:24px;
            padding:52px 56px;
            display:grid;
            grid-template-columns:auto 1fr;
            gap:44px;
            align-items:center;
            box-shadow:var(--shadow-md);
            position:relative;
            overflow:hidden;
        }
        .founder-card::before {
            content:'';
            position:absolute;
            top:0; left:0; bottom:0;
            width:5px;
            background:var(--brand-gradient);
        }
        .founder-avatar {
            width:110px; height:110px;
            border-radius:50%;
            background:var(--brand-gradient);
            display:flex; align-items:center; justify-content:center;
            font-size:2.75rem;
            flex-shrink:0;
            box-shadow:0 8px 32px rgba(99,102,241,0.35);
        }
        .founder-tag {
            display:inline-block;
            background:linear-gradient(135deg,rgba(99,102,241,0.11),rgba(139,92,246,0.11));
            color:var(--brand-primary);
            padding:4px 14px; border-radius:100px;
            font-size:0.75rem; font-weight:700;
            letter-spacing:0.09em; text-transform:uppercase;
            margin-bottom:10px;
        }
        .founder-name {
            font-size:1.5rem; font-weight:800; color:var(--text-primary);
            letter-spacing:-0.02em; margin-bottom:4px;
        }
        .founder-title {
            font-size:0.9375rem; color:var(--brand-primary);
            font-weight:600; margin-bottom:18px;
        }
        .founder-quote {
            font-size:1.0625rem; color:var(--text-secondary);
            line-height:1.72; font-style:italic;
            border-left:none;
        }
        .founder-quote::before {
            content:'\201C';
            font-size:2.5rem; color:var(--brand-primary);
            opacity:0.35; line-height:0.8;
            display:block; margin-bottom:8px;
            font-family:Georgia,serif; font-style:normal;
        }
        @media (max-width:680px) {
            .founder-card { grid-template-columns:1fr; gap:28px; padding:32px 28px; text-align:center; }
            .founder-avatar { margin:0 auto; }
        }

        /* ============================================================
           PRICING
           ============================================================ */
        .pricing { background:var(--bg-surface); padding:104px 28px; }
        .pricing-header { text-align:center; margin-bottom:68px; }
        .pricing-header .section-subtitle { margin:0 auto; }

        .pricing-grid {
            display:grid; grid-template-columns:repeat(3,1fr);
            gap:24px; align-items:start; margin-bottom:44px;
        }
        .pricing-card {
            background:var(--bg-card); border:1px solid var(--border-subtle);
            border-radius:24px; padding:38px 34px;
            box-shadow:var(--shadow-sm); position:relative;
            transition:transform 0.3s ease, box-shadow 0.3s ease;
        }
        .pricing-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
        .pricing-card.featured {
            background:var(--brand-gradient); border-color:transparent;
            box-shadow:0 12px 48px rgba(99,102,241,0.38);
            transform:scale(1.04);
        }
        .pricing-card.featured:hover { transform:scale(1.04) translateY(-6px); }

        .pricing-badge {
            position:absolute; top:-15px; left:50%; transform:translateX(-50%);
            background:#f59e0b; color:#fff;
            padding:5px 18px; border-radius:100px;
            font-size:0.6875rem; font-weight:800;
            letter-spacing:0.07em; text-transform:uppercase;
            box-shadow:0 3px 12px rgba(245,158,11,0.45);
            white-space:nowrap;
        }
        .pricing-plan-label {
            font-size:0.75rem; font-weight:700; color:var(--brand-primary);
            text-transform:uppercase; letter-spacing:0.09em; margin-bottom:8px;
        }
        .pricing-card.featured .pricing-plan-label { color:rgba(255,255,255,0.75); }
        .pricing-name {
            font-size:1.5rem; font-weight:800; color:var(--text-primary);
            letter-spacing:-0.02em; margin-bottom:8px;
        }
        .pricing-card.featured .pricing-name { color:#fff; }
        .pricing-desc {
            font-size:0.9rem; color:var(--text-muted); margin-bottom:24px; line-height:1.55;
        }
        .pricing-card.featured .pricing-desc { color:rgba(255,255,255,0.65); }

        .pricing-price-row { display:flex; align-items:flex-end; gap:4px; margin-bottom:4px; }
        .price-currency { font-size:1.375rem; font-weight:700; color:var(--text-primary); padding-bottom:6px; }
        .pricing-card.featured .price-currency { color:#fff; }
        .price-amount { font-size:3.25rem; font-weight:900; color:var(--text-primary); line-height:1; letter-spacing:-0.04em; }
        .pricing-card.featured .price-amount { color:#fff; }
        .price-period-block { display:flex; flex-direction:column; padding-bottom:6px; gap:1px; }
        .price-period { font-size:0.8125rem; color:var(--text-muted); font-weight:500; }
        .pricing-card.featured .price-period { color:rgba(255,255,255,0.65); }
        .price-vat { font-size:0.6875rem; color:var(--text-muted); }
        .pricing-card.featured .price-vat { color:rgba(255,255,255,0.50); }

        .pricing-divider {
            height:1px; background:var(--border-subtle); margin:22px 0;
        }
        .pricing-card.featured .pricing-divider { background:rgba(255,255,255,0.22); }

        .pricing-features {
            list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:32px;
        }
        .pricing-features li {
            display:flex; align-items:flex-start; gap:10px;
            font-size:0.9rem; color:var(--text-secondary); line-height:1.5;
        }
        .pricing-card.featured .pricing-features li { color:rgba(255,255,255,0.88); }
        .pf-check { flex-shrink:0; color:#22c55e; font-size:0.9375rem; margin-top:1px; }
        .pricing-card.featured .pf-check { color:#86efac; }

        .pricing-cta {
            display:block; text-align:center; padding:14px 20px;
            border-radius:100px; font-size:0.9375rem; font-weight:700;
            text-decoration:none; transition:all 0.25s ease; border:2px solid transparent;
        }
        .pricing-cta-gradient {
            background:var(--brand-gradient); color:#fff;
            box-shadow:0 4px 20px rgba(99,102,241,0.30);
        }
        .pricing-cta-gradient:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(99,102,241,0.44); }
        .pricing-card.featured .pricing-cta-gradient {
            background:#fff; color:var(--brand-primary);
            box-shadow:0 4px 20px rgba(0,0,0,0.16);
        }
        .pricing-card.featured .pricing-cta-gradient:hover { background:#f0f0ff; box-shadow:0 8px 28px rgba(0,0,0,0.22); }
        .pricing-cta-outline {
            background:transparent; color:var(--brand-primary);
            border-color:var(--border-accent);
        }
        .pricing-cta-outline:hover { border-color:var(--brand-primary); background:rgba(99,102,241,0.06); }

        .pricing-note {
            text-align:center; font-size:0.875rem; color:var(--text-muted); line-height:1.65;
        }
        .pricing-note a { color:var(--brand-primary); text-decoration:none; }
        .pricing-note a:hover { text-decoration:underline; }

        /* Patient banner */
        .patient-banner {
            display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
            background:linear-gradient(135deg,rgba(34,197,94,0.08),rgba(16,185,129,0.08));
            border:1px solid rgba(34,197,94,0.22); border-radius:14px;
            padding:16px 28px; margin-bottom:40px; text-align:center;
        }
        .patient-banner-icon { font-size:1.25rem; flex-shrink:0; }
        .patient-banner-text { font-size:0.9375rem; color:var(--text-secondary); }
        .patient-banner-text strong { color:#16a34a; font-weight:700; }
        [data-theme="dark"] .patient-banner-text strong { color:#4ade80; }

        /* Tab toggle */
        .pricing-tabs {
            display:flex; justify-content:center; margin-bottom:52px; gap:0;
            background:var(--bg-elevated); border:1px solid var(--border-subtle);
            border-radius:100px; padding:4px; width:fit-content; margin-left:auto; margin-right:auto;
        }
        .pricing-tab-btn {
            padding:11px 32px; border-radius:100px; font-size:0.9375rem; font-weight:700;
            border:none; cursor:pointer; font-family:inherit;
            transition:all 0.25s ease; color:var(--text-muted); background:transparent;
        }
        .pricing-tab-btn.active {
            background:var(--brand-gradient); color:#fff;
            box-shadow:0 4px 18px rgba(99,102,241,0.35);
        }
        .pricing-tab-btn:not(.active):hover { color:var(--text-primary); }

        .pricing-panel[hidden] { display:none; }

        /* Annual toggle */
        .billing-toggle {
            display:flex; align-items:center; justify-content:center; gap:12px;
            margin-bottom:44px;
        }
        .billing-label {
            font-size:0.9rem; font-weight:600; color:var(--text-muted);
            transition:color 0.2s;
        }
        .billing-label.active { color:var(--text-primary); }
        .billing-switch {
            width:44px; height:24px; background:var(--border-subtle);
            border-radius:100px; border:none; cursor:pointer; position:relative;
            transition:background 0.25s ease; flex-shrink:0;
        }
        .billing-switch.on { background:var(--brand-gradient); }
        .billing-switch::after {
            content:''; position:absolute;
            top:3px; left:3px;
            width:18px; height:18px; border-radius:50%; background:#fff;
            transition:transform 0.25s ease;
            box-shadow:0 1px 4px rgba(0,0,0,0.20);
        }
        .billing-switch.on::after { transform:translateX(20px); }
        .billing-save-badge {
            background:#f59e0b; color:#fff;
            padding:2px 10px; border-radius:100px;
            font-size:0.6875rem; font-weight:800; letter-spacing:0.05em;
        }

        @media (max-width:900px) {
            .pricing-grid { grid-template-columns:1fr; gap:20px; }
            .pricing-card.featured { transform:scale(1); }
            .pricing-card.featured:hover { transform:translateY(-6px); }
            .pricing-tab-btn { padding:10px 20px; font-size:0.875rem; }
        }

        /* ============================================================
           CONTACT
           ============================================================ */
        .contact { background:var(--bg-surface); }
        .contact-header { text-align:center; margin-bottom:62px; }
        .contact-header .section-subtitle { margin:0 auto; }

        /* Quick access CTAs */
        .contact-quick {
            display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:52px;
        }
        .contact-cta-btn {
            display:inline-flex; align-items:center; gap:8px;
            padding:13px 28px; border-radius:100px; font-size:0.9375rem; font-weight:700;
            text-decoration:none; transition:all 0.25s ease; border:2px solid transparent;
        }
        .contact-cta-btn-primary {
            background:var(--brand-gradient); color:#fff;
            box-shadow:0 4px 20px rgba(99,102,241,0.30);
        }
        .contact-cta-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(99,102,241,0.44); }
        .contact-cta-btn-secondary {
            background:var(--bg-elevated); color:var(--brand-primary);
            border-color:var(--border-accent);
            box-shadow:var(--shadow-sm);
        }
        .contact-cta-btn-secondary:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--brand-primary); }

        .contact-divider {
            display:flex; align-items:center; gap:16px; margin-bottom:52px;
            max-width:660px; margin-left:auto; margin-right:auto;
        }
        .contact-divider-line { flex:1; height:1px; background:var(--border-subtle); }
        .contact-divider-text { font-size:0.8125rem; color:var(--text-muted); font-weight:500; white-space:nowrap; }

        .contact-cards {
            display:grid;
            grid-template-columns:repeat(2, minmax(240px, 320px));
            justify-content:center;
            gap:22px;
            margin-bottom:52px;
        }
        .contact-card {
            background:var(--bg-elevated); border:1px solid var(--border-subtle);
            border-radius:18px; padding:30px 26px; text-align:center;
            transition:transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
        }
        .contact-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--border-accent); }
        .contact-card-icon { font-size:2.125rem; margin-bottom:12px; }
        .contact-card-title { font-size:1rem; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
        .contact-card-value { font-size:0.9375rem; color:var(--brand-primary); font-weight:500; }
        .contact-card-value a { color:var(--brand-primary); text-decoration:none; }
        .contact-card-value a:hover { text-decoration:underline; }

        /* Enquiry form */
        .form-wrapper {
            max-width:660px; margin:0 auto; background:var(--bg-elevated);
            border:1px solid var(--border-subtle); border-radius:22px; padding:44px;
        }
        .form-title { font-size:1.5rem; font-weight:800; color:var(--text-primary); margin-bottom:28px; text-align:center; letter-spacing:-0.02em; }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
        .form-group { margin-bottom:20px; }
        .form-group label { display:block; font-size:0.9375rem; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
        .form-group input, .form-group textarea {
            width:100%; padding:13px 16px;
            background:var(--bg-card); border:1.5px solid var(--border-subtle);
            border-radius:12px; font-size:0.9375rem; color:var(--text-primary);
            font-family:inherit; transition:border-color 0.2s ease, box-shadow 0.2s ease;
            outline:none; appearance:none;
        }
        .form-group input::placeholder, .form-group textarea::placeholder { color:var(--text-muted); }
        .form-group input:focus, .form-group textarea:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(99,102,241,0.16); }
        .form-group input.field-error, .form-group textarea.field-error { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,0.12); }
        .form-group textarea { min-height:126px; resize:vertical; }
        .btn-submit {
            width:100%; padding:15px; background:var(--brand-gradient); color:#fff;
            border:none; border-radius:100px; font-size:1.0625rem; font-weight:700;
            cursor:pointer; transition:all 0.25s ease;
            box-shadow:0 4px 22px rgba(99,102,241,0.32); letter-spacing:-0.01em;
        }
        .btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(99,102,241,0.44); }
        .btn-submit:active { transform:translateY(0); }

        .success-msg { display:none; text-align:center; padding:40px 20px; }
        .success-msg.visible { display:block; }
        .btn-submit[disabled] { opacity:0.6; cursor:wait; transform:none; }

        .form-error-msg {
            display:none; margin-top:16px; padding:14px 18px; border-radius:12px;
            background:rgba(220,38,38,0.08); border:1px solid rgba(220,38,38,0.35);
            color:var(--text-primary); font-size:0.9375rem; line-height:1.6;
        }
        .form-error-msg.visible { display:block; }
        .form-error-msg a { color:var(--brand-primary); font-weight:700; }

        /* Founding-partner pricing (blueprint I-9) */
        .founding-terms {
            display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:36px;
        }
        .founding-term {
            background:var(--bg-card); border:1px solid var(--border-subtle);
            border-radius:18px; padding:28px; box-shadow:var(--shadow-sm);
        }
        .founding-term h3 { font-size:1.125rem; font-weight:800; color:var(--text-primary); margin-bottom:10px; letter-spacing:-0.02em; }
        .founding-term p { font-size:0.9375rem; color:var(--text-secondary); line-height:1.65; }
        @media (max-width: 860px) { .founding-terms { grid-template-columns:1fr; } }

        /* ============================================================
           REDUCED MOTION (blueprint I-3, WCAG 2.1 SC 2.3.3)
           The hero runs 3 blurred blobs + 8 continuously animated
           particles; under prefers-reduced-motion they are decorative
           noise at best and a vestibular trigger at worst. Transitions
           become instant rather than removed so JS-awaited state
           changes still complete, and fade-in content is simply shown.
           ============================================================ */
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .hero-blob, .particle { display: none; }
            .fade-in { opacity: 1; transform: none; }
        }
        .success-icon { font-size:3.25rem; margin-bottom:16px; }
        .success-title { font-size:1.5rem; font-weight:800; color:var(--text-primary); margin-bottom:10px; letter-spacing:-0.02em; }
        .success-text { font-size:1rem; color:var(--text-secondary); line-height:1.65; }

        /* ============================================================
           FOOTER
           ============================================================ */
        .footer { background:var(--footer-bg); color:var(--footer-text); padding:72px 28px 0; }
        .footer-inner { max-width:1200px; margin:0 auto; }
        .footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:52px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,0.08); }
        .footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
        .footer-logo-img { width:32px; height:32px; object-fit:contain; filter:brightness(1.2); }
        [data-theme="dark"] .footer-logo-img { filter: brightness(1.5) saturate(1.15); }
        .footer-logo .wordmark { font-size:1.125rem; font-weight:700; color:var(--footer-heading); }
        .footer-tagline { font-size:0.9375rem; color:var(--footer-text); line-height:1.68; max-width:290px; }
        .footer-col-heading { font-size:0.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:0.10em; color:var(--footer-heading); margin-bottom:20px; }
        .footer-links-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
        .footer-links-list a { color:var(--footer-text); text-decoration:none; font-size:0.9375rem; transition:color 0.2s ease; }
        .footer-links-list a:hover { color:#fff; }
        .footer-bottom { max-width:1200px; margin:0 auto; padding:26px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
        .footer-copy { font-size:0.875rem; color:var(--footer-text); }
        /* WCAG 2.1 SC 1.4.3: 0.38 alpha computed to 3.49:1 against the footer. 0.60 gives ~5.9:1. */
        .footer-back-top { font-size:0.875rem; color:rgba(255,255,255,0.60); text-decoration:none; transition:color 0.2s ease; }
        .footer-back-top:hover { color:rgba(255,255,255,0.70); }
        /* WCAG 2.1 SC 1.4.3: 0.35 alpha computed to 3.10:1. 0.60 gives ~6.0:1. */
        .footer-strip { background:rgba(0,0,0,0.32); text-align:center; padding:14px 28px; font-size:0.875rem; color:rgba(255,255,255,0.60); }

        /* ============================================================
           STICKY CTA BAR
           ============================================================ */
        .sticky-cta {
            position:fixed; bottom:0; left:0; right:0; z-index:900;
            background:var(--brand-gradient);
            padding:14px 28px;
            display:flex; align-items:center; justify-content:space-between; gap:16px;
            transform:translateY(100%);
            transition:transform 0.38s cubic-bezier(0.4,0,0.2,1);
            box-shadow:0 -4px 28px rgba(99,102,241,0.30);
        }
        .sticky-cta.visible { transform:translateY(0); }
        .sticky-cta-left { display:flex; align-items:center; gap:12px; }
        .sticky-cta-emoji { font-size:1.25rem; flex-shrink:0; }
        .sticky-cta-text { color:#fff; font-size:0.9375rem; font-weight:500; }
        .sticky-cta-text strong { font-weight:800; }
        .sticky-cta-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
        .sticky-btn-white {
            /* H2.2 remediation: was var(--brand-primary) (#6366f1), which is 4.42:1 on
               white — just under the 4.5:1 AA minimum, and the only serious axe finding
               left on the home page. --border-focus (#5457d6) is the accessible primary
               agreed in Horizon 1 I-5 and reaches 6.4:1. It is written literally rather
               than as the token because this button's background is a hardcoded #fff:
               a fixed background needs a foreground that cannot be re-themed out from
               under it, which is exactly how the dark-mode button defects arose. */
            background:#fff; color:#5457d6; border:none;
            padding:9px 22px; border-radius:100px; font-size:0.875rem; font-weight:700;
            text-decoration:none; cursor:pointer; font-family:inherit;
            transition:all 0.2s ease; white-space:nowrap;
        }
        .sticky-btn-white:hover { background:#f0f0ff; transform:translateY(-1px); }
        .sticky-btn-ghost {
            background:rgba(255,255,255,0.15); color:#fff;
            border:1.5px solid rgba(255,255,255,0.45);
            padding:9px 22px; border-radius:100px; font-size:0.875rem; font-weight:600;
            text-decoration:none; cursor:pointer; font-family:inherit;
            transition:all 0.2s ease; white-space:nowrap;
        }
        .sticky-btn-ghost:hover { background:rgba(255,255,255,0.24); border-color:#fff; }
        .sticky-close {
            background:rgba(255,255,255,0.15); border:1.5px solid rgba(255,255,255,0.30);
            color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer;
            font-size:1rem; display:flex; align-items:center; justify-content:center;
            transition:all 0.2s ease; flex-shrink:0; font-family:inherit;
        }
        .sticky-close:hover { background:rgba(255,255,255,0.28); }

        /* ============================================================
           RESPONSIVE
           ============================================================ */
        @media (max-width:1100px) {
            .clinicians-grid { grid-template-columns:1fr; gap:56px; }
            .dashboard-mockup { height:320px; }
        }
        @media (max-width:900px) {
            .form-row { grid-template-columns:1fr; }
        }
        @media (max-width:768px) {
            section { padding:76px 20px; }
            .nav-inner { padding:0 20px; }
            .nav-links { display:none; }
            .hamburger { display:flex; }
            .contact-cards { grid-template-columns:1fr; }
            .contact-quick { flex-direction:column; align-items:center; }
            .footer-grid { grid-template-columns:1fr; gap:36px; }
            .footer-bottom { flex-direction:column; text-align:center; }
            .form-wrapper { padding:30px 22px; }
            .sticky-cta { padding:12px 16px; }
            .sticky-cta-text { font-size:0.8125rem; }
            .sticky-btn-white, .sticky-btn-ghost { padding:8px 16px; font-size:0.8125rem; }
        }
        @media (max-width:600px) {
        }
        @media (max-width:520px) {
            .hero-ctas { flex-direction:column; align-items:center; }
            .btn-primary-hero, .btn-secondary-hero { width:100%; max-width:320px; justify-content:center; }
            .sticky-cta-text span { display:none; }
        }

        /* ============================================================
           CRISIS SAFETY BAR
           ============================================================ */
        .crisis-bar {
            background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
            color: white; padding: 10px 48px 10px 20px;
            text-align: center; font-size: 0.875rem; font-weight: 500;
            position: fixed; top: 0; left: 0; right: 0; width: 100%;
            z-index: 10001;
            display: flex; align-items: center; justify-content: center;
            gap: 10px; line-height: 1.5; flex-wrap: wrap;
        }
        .crisis-bar a { color: white; font-weight: 700; text-decoration: underline; white-space: nowrap; }
        .crisis-bar a:hover { opacity: 0.85; }
        .crisis-bar-dismiss {
            position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
            background: transparent; border: none; color: white;
            font-size: 1.35rem; cursor: pointer; opacity: 0.7;
            line-height: 1; padding: 2px 6px; border-radius: 4px;
            transition: opacity 0.15s;
        }
        .crisis-bar-dismiss:hover { opacity: 1; background: rgba(255,255,255,0.15); }
        @media (max-width:600px) {
            .crisis-bar { font-size: 0.8rem; text-align: left; padding: 10px 44px 10px 14px; }
        }

        /* ============================================================
           BOOK A DEMO CTA
           ============================================================ */
        .demo-cta {
            background: var(--brand-gradient); padding: 96px 28px;
            text-align: center; position: relative; overflow: hidden;
        }
        .demo-cta::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(ellipse at top left, rgba(255,255,255,0.12) 0%, transparent 60%),
                        radial-gradient(ellipse at bottom right, rgba(0,0,0,0.15) 0%, transparent 60%);
            pointer-events: none;
        }
        .demo-cta-inner { max-width: 680px; margin: 0 auto; position: relative; }
        .demo-cta-tag {
            display: inline-block; background: rgba(255,255,255,0.18);
            border: 1px solid rgba(255,255,255,0.35); color: white;
            font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.10em; padding: 5px 16px; border-radius: 50px; margin-bottom: 20px;
        }
        .demo-cta-title {
            font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800;
            color: white; margin-bottom: 14px;
            letter-spacing: -0.02em; line-height: 1.2;
        }
        .demo-cta-sub {
            font-size: 1.0625rem; color: rgba(255,255,255,0.85);
            margin-bottom: 38px; line-height: 1.65;
        }
        .demo-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
        .demo-btn-primary {
            background: white; color: var(--brand-secondary);
            padding: 15px 34px; border-radius: 50px; font-size: 1rem;
            font-weight: 700; text-decoration: none; display: inline-flex;
            align-items: center; gap: 8px; transition: all 0.2s ease;
            box-shadow: 0 4px 24px rgba(0,0,0,0.22);
        }
        .demo-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,0.30); }
        .demo-btn-secondary {
            background: transparent; color: white; padding: 15px 34px;
            border-radius: 50px; font-size: 1rem; font-weight: 600;
            text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
            border: 2px solid rgba(255,255,255,0.50); transition: all 0.2s ease;
        }
        .demo-btn-secondary:hover { border-color: white; background: rgba(255,255,255,0.12); }
        .demo-cta-reassurance {
            margin-top: 24px; font-size: 0.8125rem; color: rgba(255,255,255,0.65);
            display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
        }
        .demo-cta-reassurance span { display: flex; align-items: center; gap: 5px; }
        @media (max-width:600px) {
            .demo-cta { padding: 64px 20px; }
            .demo-cta-btns { flex-direction: column; align-items: center; }
            .demo-btn-primary, .demo-btn-secondary { width: 100%; max-width: 300px; justify-content: center; }
            .demo-cta-reassurance { flex-direction: column; align-items: center; gap: 8px; }
        }

        /* Founder logo */
        .founder-logo-img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; background: var(--bg-surface); padding: 4px; }
        /* Display-heading full stops. Plus Jakarta Sans draws its stop with a wide left
           side-bearing, and under the tight negative tracking these headings use that
           gap reads as a typed space ("nothing to give ."), which was reported as a
           typo. The stop is pulled back by roughly the excess. Scoped to a class the
           home template puts on each stop, so body text and every other font are
           untouched. */
        .hs-stop { margin-left: -0.11em; }