fix: walkthrough scrollytelling rewrite - sticky pin dwell, observer cleanup

- Replace scroll-snap with sticky pin wrappers (120vh dwell per step)
- Steps stick at 25vh while user scrolls through wrapper height
- IntersectionObserver now watches pin wrappers, clears data-step on exit
- Sidebar animates in at step 0, hides when scrolling away
- Remove aggressive scroll-snap-type from html
- Tablet/mobile: fallback to relative positioning with fixed heights

index.html

@@ -418,21 +418,16 @@
     }
 
     /* ═══════════════════════════════════════
-       APP WALKTHROUGH — Sticky Scroll
+       APP WALKTHROUGH — Sticky + IntersectionObserver
        ═══════════════════════════════════════ */
     .walkthrough {
       position: relative;
       z-index: 2;
-      height: 100vh;
+      padding: 80px 0 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
     }
     .walkthrough-inner {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
-      justify-content: center;
       gap: 64px;
       padding: 0 48px;
       max-width: 1200px;
@@ -440,23 +435,47 @@
       width: 100%;
     }
 
-    /* Text column (left) */
+    /* Scroll progress line — left edge */
+    .wt-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 3px;
+      height: 0%;
+      background: linear-gradient(180deg, var(--primary), var(--primary-deep));
+      border-radius: 0 2px 2px 0;
+      transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+      opacity: 0.6;
+    }
+
+    /* Text column — flows naturally, each step creates scroll distance */
     .wt-text {
-      flex: 0 0 320px;
+      flex: 0 0 360px;
       position: relative;
-      min-height: 200px;
+    }
+    .wt-step-pin {
+      min-height: 100vh;
+    }
+    .wt-step-pin:last-child {
+      min-height: 80vh;
     }
     .wt-step {
-      position: absolute;
+      position: sticky;
-      top: 0;
+      top: 25vh;
-      left: 0;
+      display: flex;
-      right: 0;
+      flex-direction: column;
-      opacity: 0;
+      padding: 40px 0;
-      transform: translateY(20px);
+      opacity: 0.12;
+      transform: translateY(16px);
+      filter: blur(1px);
+      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+                  transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+                  filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
     }
     .wt-step.active {
       opacity: 1;
       transform: none;
+      filter: blur(0px);
     }
     .wt-step-num {
       font-size: 0.68rem;
@@ -505,11 +524,13 @@
       transform: scale(1.25);
     }
 
-    /* Device column (right) */
+    /* Device column — sticky, pins below nav while text scrolls */
     .wt-device {
       flex: 1;
       max-width: 640px;
-      position: relative;
+      position: sticky;
+      top: calc(50vh - 240px);
+      align-self: flex-start;
     }
     .wt-device-frame {
       border-radius: 14px;
@@ -520,6 +541,7 @@
         0 8px 20px rgba(0,0,0,0.06),
         0 24px 48px rgba(0,0,0,0.08),
         0 48px 80px rgba(0,0,0,0.05);
+      position: relative;
     }
     .wt-device-frame::before {
       content: '';
@@ -552,7 +574,7 @@
       color: #1a1a1a;
     }
 
-    /* Sidebar */
+    /* Sidebar — CSS-driven reveal */
     .wt-sidebar {
       width: 44px;
       background: #f4f0f4;
@@ -563,6 +585,15 @@
       padding: 10px 0;
       gap: 4px;
       opacity: 0;
+      transform: translateX(-20px);
+      transition: opacity 0.5s ease, transform 0.5s ease;
+    }
+    .walkthrough[data-step="0"] .wt-sidebar,
+    .walkthrough[data-step="1"] .wt-sidebar,
+    .walkthrough[data-step="2"] .wt-sidebar,
+    .walkthrough[data-step="3"] .wt-sidebar {
+      opacity: 1;
+      transform: none;
     }
     .wt-sidebar-logo {
       width: 24px;
@@ -606,10 +637,20 @@
       flex-direction: column;
       background: #fafafa;
     }
+
+    /* Greeting — CSS-driven reveal */
     .wt-greeting {
       opacity: 0;
+      transform: translateY(-10px);
+      transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
       margin-bottom: 4px;
     }
+    .walkthrough[data-step="1"] .wt-greeting,
+    .walkthrough[data-step="2"] .wt-greeting,
+    .walkthrough[data-step="3"] .wt-greeting {
+      opacity: 1;
+      transform: none;
+    }
     .wt-greeting-label {
       font-size: 14px;
       color: #8a8ea9;
@@ -629,18 +670,35 @@
       font-size: 28px;
       line-height: 1;
     }
+
+    /* Brief — CSS-driven reveal */
     .wt-brief {
       opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
       margin: 16px 0 20px;
       font-size: 13px;
       line-height: 1.6;
       color: #555;
       max-width: 480px;
     }
+    .walkthrough[data-step="2"] .wt-brief,
+    .walkthrough[data-step="3"] .wt-brief {
+      opacity: 1;
+      transform: none;
+    }
+
+    /* Chat — CSS-driven reveal */
     .wt-chat {
       opacity: 0;
+      transform: translateY(15px);
+      transition: opacity 0.5s ease, transform 0.5s ease;
       margin-top: auto;
     }
+    .walkthrough[data-step="3"] .wt-chat {
+      opacity: 1;
+      transform: none;
+    }
     .wt-chat-input {
       display: flex;
       align-items: center;
@@ -667,13 +725,21 @@
       flex-shrink: 0;
     }
     .wt-chat-send i { width: 14px; height: 14px; color: #e5a94e; }
+
+    /* Suggestions — CSS-driven reveal */
     .wt-suggestions {
       opacity: 0;
+      transform: translateY(15px);
+      transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
       display: flex;
       flex-direction: column;
       gap: 6px;
       margin-top: 12px;
     }
+    .walkthrough[data-step="3"] .wt-suggestions {
+      opacity: 1;
+      transform: none;
+    }
     .wt-suggestion {
       display: flex;
       align-items: center;
@@ -684,7 +750,7 @@
     }
     .wt-suggestion i { width: 14px; height: 14px; flex-shrink: 0; }
 
-    /* Pillar pills (below device) */
+    /* Pillar pills — CSS-driven reveal */
     .wt-pillars {
       display: flex;
       gap: 16px;
@@ -692,24 +758,66 @@
       flex-wrap: wrap;
       margin-top: 32px;
       opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
+    }
+    .walkthrough[data-step="3"] .wt-pillars {
+      opacity: 1;
+      transform: none;
     }
 
+    /* Walkthrough — Tablet */
     @media (max-width: 900px) {
+      .walkthrough { padding: 40px 0 24px; }
       .walkthrough-inner {
         flex-direction: column;
-        gap: 32px;
+        gap: 0;
-        padding: 80px 20px 24px;
+        padding: 0 20px;
       }
-      .wt-text { flex: none; width: 100%; min-height: 120px; }
+      .wt-progress { display: none; }
-      .wt-device { max-width: 100%; }
+      .wt-device {
-      .wt-app { min-height: 280px; }
+        order: -1;
+        position: sticky;
+        top: 72px;
+        max-width: 100%;
+        z-index: 1;
+        padding-bottom: 16px;
+      }
+      .wt-text {
+        flex: none;
+        width: 100%;
+        position: relative;
+        z-index: 2;
+      }
+      .wt-step-pin { min-height: auto; }
+      .wt-step {
+        position: relative;
+        top: auto;
+        height: 80vh;
+        justify-content: center;
+        padding: 32px 16px;
+        background: linear-gradient(180deg, rgba(244,237,243,0.95) 0%, rgba(244,237,243,0.8) 80%, transparent 100%);
+        border-radius: 16px;
+      }
+      .wt-step:first-child { padding-top: 24px; }
+      .wt-step:last-child { height: 60vh; }
+      .wt-step.active { filter: blur(0px); }
+      .wt-app { min-height: 260px; }
       .wt-main { padding: 20px 24px; }
       .wt-greeting-name { font-size: 24px; }
     }
+
+    /* Walkthrough — Mobile */
     @media (max-width: 640px) {
-      .walkthrough-inner { padding: 72px 16px 16px; gap: 20px; }
+      .walkthrough { padding: 24px 0 16px; }
-      .wt-text { flex: none; }
+      .walkthrough-inner { padding: 0 16px; }
-      .wt-app { min-height: 240px; font-size: 11px; }
+      .wt-device { top: 68px; }
+      .wt-step {
+        height: 75vh;
+        padding: 20px 12px;
+      }
+      .wt-step:last-child { height: 55vh; }
+      .wt-app { min-height: 200px; font-size: 11px; }
       .wt-main { padding: 16px 18px; }
       .wt-greeting-name { font-size: 20px; }
       .wt-greeting-name .wt-sparkle { font-size: 18px; }
@@ -935,8 +1043,10 @@
         transition-duration: 0.01ms !important;
       }
       .gs-reveal { opacity: 1; transform: none; }
-      .wt-step { opacity: 1 !important; transform: none !important; }
+      .wt-step { opacity: 1 !important; transform: none !important; filter: none !important; }
       .wt-sidebar, .wt-greeting, .wt-brief, .wt-chat, .wt-suggestions, .wt-pillars { opacity: 1 !important; transform: none !important; }
+      .wt-device { position: relative !important; top: auto !important; transform: none !important; }
+      .wt-progress { display: none !important; }
       .particle { display: none; }
     }
   </style>
@@ -989,7 +1099,7 @@
       <input type="email" name="email" placeholder="your@email.com" required autocomplete="email" aria-label="Email address">
       <button type="submit" class="btn btn-primary">Get early access</button>
     </form>
-    <p class="form-note hero-el">Free to start · No credit card · Early adopters get priority</p>
+    <p class="form-note hero-el">Free to start · No credit card · <a href="./privacy.html" style="color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;">Privacy policy</a></p>
 
     <div class="form-success" id="success-hero" role="status">
       <div class="check-icon"><i data-lucide="mail" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
@@ -1003,37 +1113,38 @@
     </div>
   </section>
 
-  <!-- ═══════ SOCIAL PROOF BAR ═══════ -->
-  <div class="proof-bar" role="complementary">
-    Gmail, Outlook &amp; Teams
-    <span class="sep">·</span>
-    100% on your device
-  </div>
-
   <!-- ═══════ APP WALKTHROUGH — Sticky Scroll ═══════ -->
   <section class="walkthrough" id="walkthrough">
+      <div class="wt-progress" id="wt-progress"></div>
       <div class="walkthrough-inner">
 
         <!-- Text column -->
         <div class="wt-text">
+          <div class="wt-step-pin">
             <div class="wt-step" data-step="0">
               <p class="wt-step-num">The problem</p>
               <h3>Your important emails hide between newsletters.</h3>
               <p>You miss deadlines buried in threads. Tasks get lost across three different apps. Sound familiar?</p>
               <div class="wt-dots"><span class="wt-dot active"></span><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span></div>
             </div>
+          </div>
+          <div class="wt-step-pin">
             <div class="wt-step" data-step="1">
               <p class="wt-step-num">The greeting</p>
               <h3>Every morning, your AI secretary is ready.</h3>
               <p>Open the app and it already knows what happened overnight — emails scanned, tasks prioritized, deadlines flagged.</p>
               <div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot active"></span><span class="wt-dot"></span><span class="wt-dot"></span></div>
             </div>
+          </div>
+          <div class="wt-step-pin">
             <div class="wt-step" data-step="2">
               <p class="wt-step-num">The brief</p>
               <h3>Meeting notes sit in a doc you'll never open again.</h3>
               <p>Not here. Your daily brief is a clear, AI-generated summary of what matters today — tasks, follow-ups, and deadlines in one place.</p>
               <div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot active"></span><span class="wt-dot"></span></div>
             </div>
+          </div>
+          <div class="wt-step-pin">
             <div class="wt-step" data-step="3">
               <p class="wt-step-num">The result</p>
               <h3 class="emphasis">You don't need another tool.<br>You need <em>a secretary</em>.</h3>
@@ -1041,6 +1152,7 @@
               <div class="wt-dots"><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot"></span><span class="wt-dot active"></span></div>
             </div>
           </div>
+        </div>
 
         <!-- Device column -->
         <div class="wt-device">
@@ -1224,7 +1336,7 @@
         <input type="email" name="email" placeholder="your@email.com" required autocomplete="email" aria-label="Email address">
         <button type="submit" class="btn btn-primary">Join the waitlist</button>
       </form>
-      <p class="form-note gs-reveal">No spam, ever. Unsubscribe anytime.</p>
+      <p class="form-note gs-reveal">No spam, ever. <a href="./privacy.html" style="color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;">Privacy policy</a></p>
 
       <div class="form-success" id="success-footer" role="status">
         <div class="check-icon"><i data-lucide="mail" style="color: var(--primary-deep); width:24px; height:24px;"></i></div>
@@ -1330,63 +1442,51 @@
       });
     });
 
-    // ─── Walkthrough: sticky scroll with progressive app reveal ───
+    // ─── Walkthrough: CSS sticky + IntersectionObserver ───
     const wtSection = document.getElementById('walkthrough');
-    const wtSteps = gsap.utils.toArray('.wt-step');
+    const wtSteps = document.querySelectorAll('.wt-step');
-    const wtSidebar = document.getElementById('wt-sidebar');
+    const wtProgress = document.getElementById('wt-progress');
-    const wtGreeting = document.getElementById('wt-greeting');
-    const wtBrief = document.getElementById('wt-brief');
-    const wtChat = document.getElementById('wt-chat');
-    const wtSuggestions = document.getElementById('wt-suggestions');
-    const wtPillars = document.getElementById('wt-pillars');
 
-    if (wtSection) {
+    if (wtSection && wtSteps.length) {
-      // Set initial states
+      // IntersectionObserver for step activation (observe pin wrappers)
-      gsap.set(wtSteps, { opacity: 0, y: 40 });
+      const wtPins = document.querySelectorAll('.wt-step-pin');
-      gsap.set(wtSteps[0], { opacity: 1, y: 0 });
+      const activeSteps = new Set();
-      gsap.set([wtSidebar], { opacity: 0, x: -30 });
+      const stepObserver = new IntersectionObserver((entries) => {
-      gsap.set([wtGreeting], { opacity: 0, y: -20 });
+        entries.forEach(entry => {
-      gsap.set([wtBrief], { opacity: 0, y: 20 });
+          const stepEl = entry.target.querySelector('.wt-step');
-      gsap.set([wtChat], { opacity: 0, y: 30 });
+          const step = stepEl.getAttribute('data-step');
-      gsap.set([wtSuggestions], { opacity: 0, y: 30 });
+          if (entry.isIntersecting) {
-      gsap.set([wtPillars], { opacity: 0, y: 20 });
+            activeSteps.add(step);
-
+            wtSteps.forEach(s => s.classList.remove('active'));
-      const wtTl = gsap.timeline({
+            stepEl.classList.add('active');
-        scrollTrigger: {
+            wtSection.setAttribute('data-step', step);
-          trigger: wtSection,
+          } else {
-          start: 'top top',
+            activeSteps.delete(step);
-          end: () => '+=' + (window.innerHeight * 3),
+            stepEl.classList.remove('active');
-          scrub: 0.6,
+            if (activeSteps.size === 0) {
-          pin: true,
+              wtSection.removeAttribute('data-step');
-          anticipatePin: 1,
+            }
-          invalidateOnRefresh: true,
+          }
-        },
+        });
+      }, {
+        rootMargin: '-45% 0px -45% 0px',
+        threshold: 0,
       });
 
-      // Use normalized 0-1 positions so timing scales with any scroll distance
+      wtPins.forEach(pin => stepObserver.observe(pin));
-      wtTl
+
-        // Step 0 visible at start → sidebar flies in
+      // Scroll progress indicator
-        .to(wtSidebar, { opacity: 1, x: 0, duration: 0.15, ease: 'power2.out' }, 0)
+      if (wtProgress) {
-        .to(wtSteps[0], { opacity: 0, y: -30, duration: 0.08 }, 0.13)
+        const updateProgress = () => {
-        // Step 1: greeting
+          const rect = wtSection.getBoundingClientRect();
-        .to(wtSteps[1], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.18)
+          const sectionH = wtSection.offsetHeight;
-        .to(wtGreeting, { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.18)
+          const scrolled = -rect.top;
-        // Hold step 1
+          const pct = Math.max(0, Math.min(100, (scrolled / (sectionH - window.innerHeight)) * 100));
-        .to({}, { duration: 0.08 }, 0.28)
+          wtProgress.style.height = pct + '%';
-        // Step 2: brief
+        };
-        .to(wtSteps[1], { opacity: 0, y: -30, duration: 0.08 }, 0.36)
+        window.addEventListener('scroll', updateProgress, { passive: true });
-        .to(wtSteps[2], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.42)
+        updateProgress();
-        .to(wtBrief, { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.42)
+      }
-        // Hold step 2
-        .to({}, { duration: 0.08 }, 0.52)
-        // Step 3: chat + suggestions + pillars
-        .to(wtSteps[2], { opacity: 0, y: -30, duration: 0.08 }, 0.60)
-        .to(wtSteps[3], { opacity: 1, y: 0, duration: 0.1, ease: 'power2.out' }, 0.66)
-        .to(wtChat, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.66)
-        .to(wtSuggestions, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.72)
-        .to(wtPillars, { opacity: 1, y: 0, duration: 0.08, ease: 'power2.out' }, 0.78)
-        // Hold step 3 visible
-        .to({}, { duration: 0.14 }, 0.86);
     }
 
     // ─── Generic scroll reveals for gs-reveal ───

privacy.html

@@ -259,6 +259,7 @@
       <p>We do not sell, rent, or trade your personal information. We share data only with:</p>
       <ul>
         <li><strong>Stripe</strong> — for payment processing (PCI DSS Level 1 compliant)</li>
+        <li><strong>Brevo (Sendinblue SAS)</strong> — for transactional emails (waitlist confirmation, product updates). Your email address is shared with Brevo solely to deliver these messages. Brevo acts as a data processor under GDPR and stores data in the EU. <a href="https://www.brevo.com/legal/privacypolicy/">Brevo Privacy Policy</a></li>
         <li><strong>LLM providers</strong> (OpenAI, Anthropic) — text snippets for AI processing, under no-training data agreements</li>
         <li><strong>Cloud infrastructure</strong> (hosting provider) — encrypted data only for cloud backup/sync features</li>
         <li><strong>Law enforcement</strong> — only when required by law, and limited to data we actually possess (account info, not your local content)</li>
@@ -286,7 +287,8 @@
       <ul>
         <li><strong>Account data:</strong> Retained while your account is active. Deleted within 30 days of account deletion request.</li>
         <li><strong>Encrypted backups:</strong> Deleted within 30 days of account deletion, or on your request.</li>
-        <li><strong>Waitlist emails:</strong> Retained until beta launch, then migrated to account data or deleted.</li>
+        <li><strong>Waitlist (confirmed):</strong> Retained until beta launch, then migrated to account data or deleted on request. Every email includes an unsubscribe link that immediately anonymizes your data.</li>
+        <li><strong>Waitlist (unconfirmed):</strong> Automatically anonymized after 48 hours. The anonymized record (signup date, source) is retained for aggregate analytics but contains no personal data.</li>
         <li><strong>Server logs:</strong> Retained for 90 days, then purged.</li>
         <li><strong>Local data:</strong> Under your control — persists until you delete it or uninstall the app.</li>
       </ul>