* { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --coral: #F2A09A;
            --coral-light: #FDF5F4;
            --coral-dark: #E88B84;
            --teal: #4CB5AE;
            --teal-dark: #3A9A94;
            --teal-light: #E8F6F5;
            --navy: #1A2B3C;
            --text-dark: #2D3748;
            --text-gray: #5A6B7D;
            --text-light: #8899AA;
            --white: #FFFFFF;
            --bg-cream: #FFFAF9;
            --border: #E8ECF1;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-dark);
            line-height: 1.6;
            background: var(--white);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }

        .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

        .eyebrow {
            display: inline-flex; align-items: center; gap: 10px;
            margin-bottom: 18px; padding: 8px 16px; border-radius: 999px;
            background: rgba(76, 181, 174, 0.14); color: var(--teal-dark);
            font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
        }
        .eyebrow::before {
            content: ''; width: 8px; height: 8px; border-radius: 999px;
            background: var(--teal); box-shadow: 0 0 0 6px rgba(76, 181, 174, 0.14);
        }
        .eyebrow-light { background: rgba(255,255,255,0.12); color: #CFEFEC; }
        .eyebrow-light::before { background: var(--teal); box-shadow: 0 0 0 6px rgba(76,181,174,0.18); }

        .section-subtitle {
            text-align: center; color: var(--text-gray); font-size: 1.05rem;
            margin: 0 auto 48px; max-width: 640px; padding: 0 20px;
        }

        /* ============================================
           BUTTONS
        ============================================ */
        .btn-teal {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            background: var(--teal); color: white; padding: 14px 28px; border-radius: 30px;
            text-decoration: none; font-weight: 600; text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 14px rgba(76, 181, 174, 0.3);
        }
        .btn-teal:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(76, 181, 174, 0.4); }

        .store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
        .store-btn {
            display: inline-flex; align-items: center; gap: 12px;
            background: var(--navy); color: var(--white);
            padding: 12px 22px; border-radius: 999px; text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 22px rgba(26, 43, 60, 0.18);
        }
        .store-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26, 43, 60, 0.26); }
        .store-btn svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
        .store-btn span { display: block; line-height: 1.15; }
        .store-btn .store-kicker { font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.72; font-weight: 600; }
        .store-btn .store-name { font-size: 1rem; font-weight: 700; }
        .store-btn-light { background: var(--white); color: var(--navy); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }

        /* ============================================
           HERO
        ============================================ */
        .mob-hero {
            background: linear-gradient(160deg, var(--teal-light) 0%, var(--bg-cream) 55%, var(--coral-light) 100%);
            padding: 140px 20px 72px; position: relative; overflow: hidden;
        }
        .mob-hero::before {
            content: ''; position: absolute; top: -160px; right: -120px; width: 460px; height: 460px;
            background: radial-gradient(circle, rgba(76,181,174,0.16) 0%, transparent 70%); border-radius: 50%;
        }
        .mob-hero-inner {
            max-width: 1140px; margin: 0 auto; position: relative; z-index: 1;
            display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center;
        }
        .mob-hero h1 {
            font-size: clamp(2.3rem, 5.4vw, 3.7rem); line-height: 1.06; color: var(--navy);
            max-width: 16ch; margin-bottom: 20px;
        }
        .mob-hero h1 .hl { color: var(--teal-dark); }
        .mob-hero-lead { font-size: 1.12rem; color: var(--text-gray); line-height: 1.7; max-width: 46ch; }
        .mob-hero-note { margin-top: 18px; font-size: 0.9rem; color: var(--text-light); }

        /* Phone cluster */
        .phone-cluster { display: flex; justify-content: center; align-items: flex-end; gap: 0; }
        .phone {
            background: var(--navy); border-radius: 38px; padding: 9px;
            box-shadow: 0 24px 60px rgba(26, 43, 60, 0.28), 0 0 0 1px rgba(26, 43, 60, 0.08);
            width: 232px; flex-shrink: 0;
        }
        .phone-screen { border-radius: 30px; overflow: hidden; background: #F4F9F8; display: block; }
        .phone-screen img { width: 100%; height: auto; display: block; aspect-ratio: 780 / 1600; object-fit: cover; background: #F4F9F8; }
        .phone-sm { width: 196px; }
        .cluster-left  { transform: rotate(-6deg) translateY(26px); z-index: 1; margin-right: -34px; }
        .cluster-mid   { z-index: 3; }
        .cluster-right { transform: rotate(6deg) translateY(26px); z-index: 2; margin-left: -34px; }

        /* ============================================
           TRUST STRIP
        ============================================ */
        .trust-strip { background: var(--white); border-bottom: 1px solid var(--border); padding: 26px 20px; }
        .trust-inner {
            max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap;
            gap: 14px 36px; justify-content: center; align-items: center;
        }
        .trust-item { display: inline-flex; align-items: center; gap: 9px; color: var(--text-gray); font-size: 0.92rem; font-weight: 500; }
        .trust-item svg { width: 18px; height: 18px; stroke: var(--teal); stroke-width: 2; fill: none; flex-shrink: 0; }

        /* ============================================
           AUDIENCE SWITCH
        ============================================ */
        .aud-switch { display: flex; justify-content: center; gap: 10px; padding: 44px 20px 0; }
        .aud-link {
            display: inline-flex; align-items: center; gap: 9px;
            padding: 11px 22px; border-radius: 999px; text-decoration: none;
            border: 1.5px solid var(--border); background: var(--white);
            color: var(--text-gray); font-weight: 600; font-size: 0.95rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .aud-link:hover { border-color: var(--teal); color: var(--teal-dark); transform: translateY(-2px); }
        .aud-link svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }

        /* ============================================
           SECTIONS
        ============================================ */
        .sec { padding: 80px 20px; }
        .sec-cream { background: var(--bg-cream); }
        .sec-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
        .sec-head h2 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.14; color: var(--navy); margin-bottom: 14px; }
        .sec-head p { color: var(--text-gray); font-size: 1.05rem; line-height: 1.7; }

        /* ============================================
           TOUR
        ============================================ */
        .tour { max-width: 1140px; margin: 0 auto; }
        .tour-rail {
            display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 16px;
            scrollbar-width: none; -ms-overflow-style: none;
        }
        .tour-rail::-webkit-scrollbar { display: none; }
        .tour-step {
            flex: 1 1 0; min-width: 168px; text-align: left; cursor: pointer;
            background: var(--white); border: 1.5px solid var(--border); border-radius: 16px;
            padding: 14px 16px 12px; font-family: inherit; color: var(--text-gray);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
        }
        .tour-step:hover { border-color: var(--teal); color: var(--text-dark); }
        .tour-step.active { border-color: var(--teal); background: var(--teal-light); color: var(--navy); }
        .tour-step-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); display: block; margin-bottom: 3px; }
        .tour-step-label { font-size: 0.97rem; font-weight: 600; display: block; }
        .tour-step-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(76,181,174,0.18); }
        .tour-step-fill { height: 100%; width: 0; background: var(--teal); }
        .tour-auto .tour-step.active .tour-step-fill { animation: tourProgress 8s linear forwards; }
        @keyframes tourProgress { from { width: 0; } to { width: 100%; } }

        .tour-stage {
            display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
            background: var(--white); border: 1px solid var(--border); border-radius: 28px;
            padding: 36px 28px; box-shadow: 0 26px 60px rgba(23, 38, 52, 0.08); margin-top: 8px;
        }
        .tour-panes { position: relative; }
        .tour-pane { display: none; }
        .tour-pane.active { display: block; animation: paneIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
        @keyframes paneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
        .tour-pane h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--navy); margin-bottom: 12px; line-height: 1.24; }
        .tour-pane > p { color: var(--text-gray); font-size: 1.02rem; line-height: 1.72; margin-bottom: 20px; }
        .tour-list { list-style: none; display: grid; gap: 11px; }
        .tour-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-dark); font-size: 0.97rem; line-height: 1.6; }
        .tour-list svg { width: 19px; height: 19px; stroke: var(--teal); stroke-width: 2.4; fill: none; flex-shrink: 0; margin-top: 2px; }
        .tour-shots { position: relative; min-height: 470px; display: flex; justify-content: center; align-items: center; }
        .tour-shot { position: absolute; opacity: 0; transform: translateY(16px) scale(0.985); transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
        .tour-shot.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

        /* ============================================
           CALENDAR SYNC
        ============================================ */
        .sync-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 22px; }
        .sync-flow {
            background: var(--white); border: 2px solid var(--teal); border-radius: 24px;
            padding: 34px 28px; position: relative; overflow: hidden;
            display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; text-align: center;
        }
        .sync-flow::before {
            content: ''; position: absolute; top: -70px; right: -70px; width: 220px; height: 220px;
            background: radial-gradient(circle, rgba(76,181,174,0.12) 0%, transparent 70%); border-radius: 50%;
        }
        .sync-node { position: relative; z-index: 1; }
        .sync-node-badge {
            width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 12px;
            display: flex; align-items: center; justify-content: center;
            background: var(--teal-light); border: 1.5px solid rgba(76,181,174,0.35);
        }
        .sync-node-badge svg { width: 32px; height: 32px; stroke: var(--teal-dark); stroke-width: 1.8; fill: none; }
        .sync-node-badge.solid { background: var(--teal); border-color: var(--teal); box-shadow: 0 8px 24px rgba(76,181,174,0.3); }
        .sync-node-badge.solid svg { stroke: white; }
        .sync-node strong { display: block; color: var(--navy); font-size: 1rem; }
        .sync-node span { color: var(--text-light); font-size: 0.85rem; }
        .sync-arrows { position: relative; z-index: 1; display: grid; gap: 12px; }
        .sync-arrow {
            display: flex; align-items: center; gap: 10px; justify-content: center;
            background: var(--bg-cream); border: 1px solid var(--border); border-radius: 999px;
            padding: 9px 16px; font-size: 0.86rem; font-weight: 600; color: var(--text-gray);
        }
        .sync-arrow svg { width: 18px; height: 18px; stroke: var(--teal); stroke-width: 2.2; fill: none; flex-shrink: 0; }
        .sync-notes { display: grid; gap: 14px; }
        .sync-note {
            background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px;
        }
        .sync-note h4 { font-family: 'DM Sans', sans-serif; font-size: 0.98rem; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
        .sync-note p { color: var(--text-gray); font-size: 0.93rem; line-height: 1.65; }

        /* ============================================
           FEATURE CARDS
        ============================================ */
        .cards { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; }
        .card {
            background: var(--white); border: 1px solid var(--border); border-radius: 20px;
            padding: 28px 26px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card:hover { transform: translateY(-3px); border-color: rgba(76,181,174,0.5); box-shadow: 0 18px 40px rgba(23, 38, 52, 0.09); }
        .card-icon {
            width: 48px; height: 48px; border-radius: 14px; background: var(--teal-light);
            display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
        }
        .card-icon svg { width: 24px; height: 24px; stroke: var(--teal-dark); stroke-width: 1.9; fill: none; }
        .card h3 { font-size: 1.22rem; color: var(--navy); margin-bottom: 9px; line-height: 1.3; }
        .card p { color: var(--text-gray); font-size: 0.95rem; line-height: 1.68; }
        .card .card-tag {
            display: inline-block; margin-top: 13px; padding: 4px 11px; border-radius: 999px;
            background: var(--coral-light); color: var(--coral-dark);
            font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
        }
        .card .card-tag.tag-teal { background: var(--teal-light); color: var(--teal-dark); }

        /* ============================================
           SECURITY BAND
        ============================================ */
        .sec-navy { background: var(--navy); color: rgba(255,255,255,0.86); padding: 88px 20px; position: relative; overflow: hidden; }
        .sec-navy::before {
            content: ''; position: absolute; bottom: -140px; left: -100px; width: 420px; height: 420px;
            background: radial-gradient(circle, rgba(76,181,174,0.14) 0%, transparent 70%); border-radius: 50%;
        }
        .sec-navy .sec-head h2 { color: var(--white); }
        .sec-navy .sec-head p { color: rgba(255,255,255,0.68); }
        .sec-navy-inner { position: relative; z-index: 1; }
        .sec-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 18px; }
        .sec-card {
            background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.12);
            border-radius: 18px; padding: 24px 22px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sec-card:hover { background: rgba(255,255,255,0.09); border-color: rgba(76,181,174,0.5); transform: translateY(-3px); }
        .sec-card-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(76,181,174,0.18); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
        .sec-card-icon svg { width: 21px; height: 21px; stroke: var(--teal); stroke-width: 2; fill: none; }
        .sec-card h3 { font-size: 1.1rem; color: var(--white); margin-bottom: 8px; line-height: 1.35; }
        .sec-card p { color: rgba(255,255,255,0.66); font-size: 0.92rem; line-height: 1.65; }
        .sec-foot {
            max-width: 800px; margin: 40px auto 0; text-align: center;
            color: rgba(255,255,255,0.55); font-size: 0.88rem; line-height: 1.7;
        }
        .sec-foot a { color: #9FD9D4; }

        /* ============================================
           PATIENT SHOWCASE
        ============================================ */
        .pt-showcase { max-width: 1140px; margin: 0 auto 52px; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
        .pt-phones { display: flex; justify-content: center; gap: 0; }
        .pt-phones .cluster-left { margin-right: -14px; transform: rotate(-5deg) translateY(22px); }
        .pt-phones .cluster-right { margin-left: -14px; }
        .pt-copy h3 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); color: var(--navy); margin-bottom: 14px; line-height: 1.22; }
        .pt-copy > p { color: var(--text-gray); font-size: 1.03rem; line-height: 1.72; margin-bottom: 20px; }

        /* ============================================
           EVERYTHING TABLE
        ============================================ */
        .matrix { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 22px; }
        .matrix-col { background: var(--white); border: 1px solid var(--border); border-radius: 24px; padding: 32px 28px; }
        .matrix-col h3 { font-size: 1.35rem; color: var(--navy); margin-bottom: 4px; }
        .matrix-col > span { display: block; color: var(--text-light); font-size: 0.88rem; margin-bottom: 20px; }
        .matrix-group { margin-bottom: 20px; }
        .matrix-group:last-child { margin-bottom: 0; }
        .matrix-group h4 {
            font-family: 'DM Sans', sans-serif; font-size: 0.74rem; font-weight: 700;
            letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 9px;
        }
        .matrix-group ul { list-style: none; display: grid; gap: 7px; }
        .matrix-group li { display: flex; gap: 9px; align-items: flex-start; color: var(--text-gray); font-size: 0.92rem; line-height: 1.55; }
        .matrix-group li::before { content: '·'; color: var(--teal); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }

        /* ============================================
           CTA
        ============================================ */
        .mob-cta { background: linear-gradient(135deg, var(--teal) 0%, var(--coral) 100%); padding: 84px 20px; text-align: center; }
        .mob-cta-card {
            max-width: 900px; margin: 0 auto; background: var(--white); border-radius: 24px;
            padding: 52px 36px; box-shadow: 0 30px 80px rgba(0,0,0,0.12);
        }
        .mob-cta-card h2 { font-size: clamp(1.9rem, 4.4vw, 2.6rem); color: var(--navy); margin-bottom: 14px; line-height: 1.18; }
        .mob-cta-card p { color: var(--text-gray); font-size: 1.04rem; line-height: 1.7; max-width: 56ch; margin: 0 auto; }
        .mob-cta-card .store-row { justify-content: center; }
        .mob-cta-links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; }
        .mob-cta-links a { color: var(--teal-dark); font-weight: 600; font-size: 0.96rem; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: gap 0.3s; }
        .mob-cta-links a:hover { gap: 12px; }

        /* ============================================
           REVEAL
        ============================================ */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* ============================================
           SPLIT (copy beside a device)
        ============================================ */
        .split { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
        .split-phone { display: flex; justify-content: center; }
        .split-stack { display: grid; gap: 18px; }

        /* ============================================
           RESPONSIVE
        ============================================ */
        /* On a phone the overlapping cluster is wider than the screen — show the
           hero device on its own rather than letting the row overflow. */
        @media (max-width: 767px) {
            .cluster-left, .cluster-right { display: none; }
            .cluster-mid { transform: none; }
            .phone { width: min(232px, 62vw); }
            .tour-shots { min-height: 0; }
            .tour-shot { position: relative; }
            .tour-shot:not(.active) { display: none; }
        }

        @media (min-width: 768px) {
            .sec { padding: 96px 40px; }
            .sec-navy { padding: 100px 40px; }
            .cards { grid-template-columns: repeat(2, 1fr); }
            .sec-grid { grid-template-columns: repeat(2, 1fr); }
            .matrix { grid-template-columns: repeat(2, 1fr); }
            .sync-flow { grid-template-columns: 1fr auto 1fr; gap: 28px; }
            .sync-notes { grid-template-columns: repeat(2, 1fr); }
            .split { grid-template-columns: 0.8fr 1.2fr; gap: 48px; }
            .split-reverse { grid-template-columns: 1.4fr 0.6fr; }
            .tour-stage { grid-template-columns: 1.05fr 0.95fr; padding: 44px 40px; }
            .pt-showcase { grid-template-columns: 0.95fr 1.05fr; }
            .mob-hero { padding: 160px 40px 88px; }
            .mob-hero-inner { grid-template-columns: 1.02fr 0.98fr; }
            .phone { width: 244px; }
            .phone-sm { width: 208px; }
        }
        @media (min-width: 1024px) {
            .cards { grid-template-columns: repeat(3, 1fr); }
            .sec-grid { grid-template-columns: repeat(3, 1fr); }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }