diff --git a/README.md b/README.md
index 6e9939d1e..202f30b4b 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@
 
 </div>
 
-Joltrin (formerly SOP) is an open-source Go library that checks an AI agent's action against the recorded trace before the action commits. The agent proposes. A separate verifier decides, using fixed preconditions and the steps the server has actually recorded. It does not use the agent's claims, its prompt context, its self-evaluation, or its confidence.
+Joltrin blocks an AI agent's risky step, like dropping a database, until the steps before it are recorded, and tells the agent what to do first. It is an open-source Go library that checks the action against the recorded trace before it commits. The agent proposes. A separate verifier decides, using fixed preconditions and the steps the server has actually recorded. It does not use the agent's claims, its prompt context, its self-evaluation, or its confidence.
 
 **The problem.** An agent can propose a destructive action and report success from its own context. If the same agent also judges the action safe, both judgments can fail for the same reason. That correlated failure is the production risk, and asking the agent to be careful does not remove it.
 
diff --git a/demo/index.html b/demo/index.html
index f33b41571..7be1a85f8 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,20 +17,23 @@
   <meta property="og:title" content="Your AI agent wants to delete production. Who is stopping it?" />
   <meta property="og:description" content="Joltrin refuses an AI agent's risky step, like dropping a database, until the steps before it are recorded, and tells the agent what to run first. It checks the recorded trace, not the world. Open source Go. Try it in your browser." />
   <meta property="og:image" content="https://joltrinhq.com/og-image.png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:image:alt" content="Joltrin blocks an AI agent from dropping a production database until the backup steps are recorded." />
 
   <!-- Twitter / X -->
-  <meta property="twitter:card" content="summary_large_image" />
-  <meta property="twitter:url" content="https://joltrinhq.com/" />
-  <meta property="twitter:title" content="Your AI agent wants to delete production. Who is stopping it?" />
-  <meta property="twitter:description" content="Joltrin refuses an AI agent's risky step, like dropping a database, until the steps before it are recorded, and tells the agent what to run first. It checks the recorded trace, not the world. Open source Go. Try it in your browser." />
-  <meta property="twitter:image" content="https://joltrinhq.com/og-image.png" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:url" content="https://joltrinhq.com/" />
+  <meta name="twitter:title" content="Your AI agent wants to delete production. Who is stopping it?" />
+  <meta name="twitter:description" content="Joltrin refuses an AI agent's risky step, like dropping a database, until the steps before it are recorded, and tells the agent what to run first. It checks the recorded trace, not the world. Open source Go. Try it in your browser." />
+  <meta name="twitter:image" content="https://joltrinhq.com/og-image.png" />
+  <meta name="twitter:image:alt" content="Joltrin blocks an AI agent from dropping a production database until the backup steps are recorded." />
 
   <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
   <link rel="alternate icon" href="./favicon.ico" />
 
-  <!-- Start the icon CDN connection and the 6 MB engine download while the HTML is still parsing -->
+  <!-- Start the icon CDN connection while the HTML is still parsing. The 6 MB engine is fetched on first interaction, see startWasmEngine() -->
   <link rel="preconnect" href="https://unpkg.com" crossorigin>
-  <link rel="preload" href="sop.wasm" as="fetch" type="application/wasm" crossorigin>
 
   <!-- Built by scripts/build-css.sh from this page; replaces the Tailwind CDN script -->
   <link rel="stylesheet" href="./tailwind.css" />
@@ -68,7 +71,7 @@
   </script>
 
   <!-- Go WebAssembly Runtime Support -->
-  <script src="wasm_exec.js"></script>
+  <script src="wasm_exec.js" defer></script>
 
   <!--
     OPFS (Origin Private File System) bridge, called from Go via js.Global().Call(...).
@@ -443,6 +446,11 @@
     .story-note span { display: inline; }
     .story-verdict span.v-final { }
     @media (prefers-color-scheme: light) { .story-verdict .v-allow { color: #047857; } .story-row .no { color: #be123c; } .story-row .ok { color: #047857; } .story-cta .primary { color: #fff; background: #047857; } .story-card { box-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.25); } }
+    #hero-wrap { padding-top: 1rem; z-index: 2; }
+    .pro-link-decoration { text-decoration-color: rgb(var(--c-dark-600)); }
+    #demo-video-play img { object-fit: cover; opacity: 0.8; }
+    #demo-video-play:hover img { opacity: 1; }
+    #demo-video-play:hover .video-play-disc { background-color: #34d399; }
     .sound-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 40; padding: 0.45rem 0.85rem; border-radius: 999px; border: 1px solid rgb(var(--c-dark-700)); background: rgb(var(--c-dark-900) / 0.85); backdrop-filter: blur(8px); color: rgb(var(--c-slate-300)); font: 600 0.72rem 'JetBrains Mono', 'JetBrains Fallback', monospace; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
     .sound-toggle:hover, .sound-toggle:focus-visible { color: rgb(var(--c-fg)); border-color: rgb(var(--c-slate-500)); }
     .sound-toggle[aria-pressed="true"] { color: #10b981; border-color: #10b981; }
@@ -492,13 +500,13 @@
       input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }
       /* WebKit draws a native dropdown at its own height, so it is drawn by the page here, with its own arrow. */
       select { -webkit-appearance: none; appearance: none; min-height: 44px; padding: 0.5rem 2.25rem 0.5rem 0.75rem; background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); }
-      main button, main summary, .sound-toggle { min-height: 44px; }
+      main button, main summary, :where(#hero-wrap) button, .sound-toggle { min-height: 44px; }
       /* The Copy button is a full 44 pixel target, so its code box is tall enough to hold it. */
       #quickstart-cmd { min-height: 3.5rem; display: flex; align-items: center; }
       #quickstart-copy { top: 0.375rem; right: 0.375rem; display: flex; }
-      main button:not(.tab-btn):not(.team-tab):not([role="tab"]) { display: inline-flex; align-items: center; justify-content: center; }
-      main a:where(.flex, .inline-flex, .block, .inline-block):not(.hidden) { min-height: 44px; align-items: center; }
-      main a:where(.block, .inline-block) { display: inline-flex; }
+      main button:not(.tab-btn):not(.team-tab):not([role="tab"]), :where(#hero-wrap) button { display: inline-flex; align-items: center; justify-content: center; }
+      main a:where(.flex, .inline-flex, .block, .inline-block):not(.hidden), :where(#hero-wrap) a:where(.flex, .inline-flex, .block, .inline-block):not(.hidden) { min-height: 44px; align-items: center; }
+      main a:where(.block, .inline-block), :where(#hero-wrap) a:where(.block, .inline-block) { display: inline-flex; }
       footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
     }
   </style>
@@ -619,14 +627,14 @@
         </div>
 
         <a href="#demo-video" id="watch-demo-btn"
-           class="flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg bg-brand-500 hover:bg-brand-400 text-black text-xs font-bold whitespace-nowrap transition">
+           class="flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg bg-dark-800 hover:bg-dark-700 border border-dark-700 text-xs font-medium text-slate-200 whitespace-nowrap transition">
           <svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
           <span class="sm:hidden">Demo</span><span class="hidden sm:inline">Watch demo</span>
         </a>
 
         <button type="button" id="top-pro-btn" onclick="track('pro_click'); openProCheckoutModal()"
-                class="flex items-center space-x-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-500 hover:to-brand-400 text-black text-xs font-bold whitespace-nowrap shadow-lg shadow-brand-500/20 transition cursor-pointer">
-          <span class="sm:hidden" aria-hidden="true">Pro</span><span class="hidden sm:inline">Request Pro</span><span class="sr-only sm:hidden">Request Pro</span><span class="hidden sm:inline font-mono font-medium">$49/mo</span>
+                class="flex items-center space-x-1.5 px-2 py-1.5 text-slate-300 hover:text-white underline underline-offset-4 pro-link-decoration text-xs font-medium whitespace-nowrap transition cursor-pointer">
+          <span class="sm:hidden" aria-hidden="true">Pro</span><span class="hidden sm:inline">Request Pro</span><span class="sr-only sm:hidden">Request Pro</span><span class="hidden sm:inline font-mono text-slate-400">$49/mo</span>
         </button>
 
         <button onclick="openCommandPalette()" aria-label="Open command palette"
@@ -686,54 +694,8 @@
     </div>
   </div>
 
-  <!-- Main Container -->
-  <!-- Scroll story: the barrier decision sequence, played by scrolling -->
-  <div class="story" id="story">
-    <section class="story-intro" aria-labelledby="story-line">
-      <div>
-        <p class="story-eyebrow">Independent verification</p>
-        <p class="story-words" id="story-line"><span class="w">An</span> <span class="w">agent</span> <span class="w">says</span> <span class="w">it</span> <span class="w">backed</span> <span class="w">up</span> <span class="w">the</span> <span class="w">database.</span> <span class="w">Joltrin</span> <span class="w">checks</span> <span class="w">the</span> <span class="w">record,</span> <span class="w">not</span> <span class="w">the</span> <span class="w">claim.</span></p>
-        <p class="story-hint" id="story-hint">Scroll down to continue <span aria-hidden="true">&darr;</span> <a href="#start" class="underline text-brand-400 hover:text-brand-300 ml-3">Skip to the demo</a></p>
-      </div>
-    </section>
-
-    <section class="story-pin" aria-label="How the barrier decides">
-      <div class="story-stage">
-        <div>
-          <p class="story-verdict" aria-live="off">
-            <span class="v-block" data-for="0 1">Blocked.</span>
-            <span class="v-allow" data-for="2 3 4">Allowed.</span>
-          </p>
-          <p class="story-note">
-            <span data-for="0">The agent asks to drop the production database. The recorded trace has no validated backup, so the barrier refuses.</span>
-            <span data-for="1">It tries to validate a backup that was never taken. Refused again, with the missing state named.</span>
-            <span data-for="2">It takes the backup. That step has everything it needs, so it is recorded.</span>
-            <span data-for="3">Now the validation passes, because the backup it depends on exists in the trace.</span>
-            <span data-for="4">The drop is committed. The order was enforced by the barrier, whatever the agent said it had already done.</span>
-          </p>
-        </div>
-        <div class="story-card" role="img" aria-label="Runbook decisions: drop_prod_db blocked, validate_backup blocked, take_backup allowed, validate_backup allowed, drop_prod_db allowed">
-          <p class="hd">// db-maintenance runbook</p>
-          <div class="story-row" aria-hidden="true"><b>drop_prod_db</b><span><b class="no">BLOCKED</b> <span class="why">backup_validated missing</span></span></div>
-          <div class="story-row" aria-hidden="true"><b>validate_backup</b><span><b class="no">BLOCKED</b> <span class="why">backup_taken missing</span></span></div>
-          <div class="story-row" aria-hidden="true"><b>take_backup</b><span><b class="ok">ALLOWED</b></span></div>
-          <div class="story-row" aria-hidden="true"><b>validate_backup</b><span><b class="ok">ALLOWED</b></span></div>
-          <div class="story-row" aria-hidden="true"><b>drop_prod_db</b><span><b class="ok">ALLOWED</b></span></div>
-        </div>
-      </div>
-    </section>
-
-    <section class="story-end" aria-labelledby="story-end-h">
-      <h2 id="story-end-h">Check before it <em>commits.</em></h2>
-      <div class="story-cta">
-        <a class="primary" href="./agents/">Open the barrier demo</a>
-        <a class="ghost" href="https://github.com/SharedCode/joltrin#try-it-in-five-minutes" target="_blank" rel="noopener noreferrer">Read the quickstart</a>
-      </div>
-    </section>
-  </div>
-
-  <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
-
+  <!-- Hero: first thing on the page, ahead of the scroll story, so the headline and the one primary action load in the first screen -->
+  <div id="hero-wrap" role="region" aria-label="Introduction" class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 relative">
     <!-- Hero -->
     <section id="start" class="hero-calm relative mb-16 pt-6 sm:pt-14 scroll-mt-20">
       <div class="relative z-10 flex flex-col gap-12 min-w-0">
@@ -763,19 +725,18 @@ <h1 class="display text-[clamp(2.4rem,6.5vw,4.5rem)] text-white mb-6">
               <span>Watch the short demo</span>
             </a>
             <a href="#pricing"
-               class="text-slate-300 hover:text-white font-medium text-sm flex items-center space-x-2 transition">
-              <i data-lucide="sparkles" class="w-4 h-4 text-accent-violet"></i>
+               class="text-slate-400 hover:text-white underline underline-offset-4 pro-link-decoration text-sm transition">
               <span>See Pro</span>
             </a>
           </div>
           <p class="mt-6 text-[11px] font-mono uppercase tracking-wider text-slate-400">MIT licensed &middot; Go &middot; 500+ test files &middot; runs in your browser, no signup</p>
           <div class="mt-10 min-w-0 w-full text-left max-w-xl mx-auto">
-            <p class="text-[11px] font-mono uppercase tracking-wider text-slate-500 mb-1.5">Run with Go on macOS, Linux or Windows (Go 1.26.10+)</p>
+            <p class="text-xs font-mono uppercase tracking-wider text-slate-400 mb-1.5">Run with Go on macOS, Linux or Windows (Go 1.26.10+)</p>
             <div class="relative">
               <pre id="quickstart-cmd" tabindex="0" class="rounded-lg bg-dark-950 border border-dark-700 pl-3 pr-16 py-2 font-mono text-xs text-slate-200 overflow-x-auto"><code>go run github.com/sharedcode/joltrin/v5/examples/verify_barrier@latest</code></pre>
               <button type="button" id="quickstart-copy" onclick="copyQuickstart(this)" class="absolute right-1.5 top-1.5 px-2 py-0.5 rounded-md bg-dark-800 hover:bg-dark-700 border border-dark-700 text-[11px] font-mono text-slate-300 transition cursor-pointer">Copy</button>
             </div>
-            <p class="text-[11px] text-slate-500 mt-1.5">It checks the recorded trace, not the world. <a href="#limits" class="underline text-brand-400 hover:text-brand-300">What this does not prove</a></p>
+            <p class="text-xs text-slate-400 mt-1.5">It checks the recorded trace, not the world. <a href="#limits" class="underline text-brand-400 hover:text-brand-300">What this does not prove</a></p>
             <div id="quickstart-platforms" class="text-xs text-slate-400 mt-2">
               <p>No Go installed? Choose your terminal for the MCP server install:</p>
               <p class="mt-1 flex flex-wrap justify-center gap-x-4 gap-y-2">
@@ -784,7 +745,7 @@ <h1 class="display text-[clamp(2.4rem,6.5vw,4.5rem)] text-white mb-6">
                 <a href="./docs/#mcp-command-powershell" class="underline text-brand-400 hover:text-brand-300">Windows PowerShell</a>
                 <a href="./docs/#mcp-command-cmd" class="underline text-brand-400 hover:text-brand-300">Windows Command Prompt (CMD)</a>
               </p>
-              <p class="mt-2 text-[11px] text-slate-500">The Go command above is the same in all four terminals. The installer commands differ. Installers register with Claude Code, Codex or Gemini CLI, whichever are installed.</p>
+              <p class="mt-2 text-xs text-slate-400">The Go command above is the same in all four terminals. The installer commands differ. Installers register with Claude Code, Codex or Gemini CLI, whichever are installed.</p>
             </div>
           </div>
         </div>
@@ -799,7 +760,7 @@ <h1 class="display text-[clamp(2.4rem,6.5vw,4.5rem)] text-white mb-6">
             <div class="sm:whitespace-nowrap"><span class="text-white">validate_backup</span>  <span class="text-brand-400 font-bold">ALLOWED</span></div>
             <div class="sm:whitespace-nowrap"><span class="text-white">drop_prod_db</span>     <span class="text-brand-400 font-bold">ALLOWED</span></div>
           </div>
-          <p class="text-[11px] text-slate-500 mt-3 leading-relaxed font-sans">The order is enforced by the barrier, whatever the agent says it already did.</p>
+          <p class="text-xs text-slate-400 mt-3 leading-relaxed font-sans">The order is enforced by the barrier, whatever the agent says it already did.</p>
         </div>
 
         <div id="hero-play" class="min-w-0 rounded-xl bg-dark-950 border border-dark-700 p-4">
@@ -813,20 +774,75 @@ <h1 class="display text-[clamp(2.4rem,6.5vw,4.5rem)] text-white mb-6">
           </div>
           <ol id="hero-play-log" aria-live="polite" class="mt-3 font-mono text-xs space-y-1 min-h-[2.5rem]"></ol>
           <p id="hero-play-score" class="mt-2 text-[11px] text-slate-400"></p>
-          <p class="mt-2 text-[11px] text-slate-500">These are the same rules, replayed in the page. For the real compiled check, <a href="./agents/" class="underline text-brand-400 hover:text-brand-300">use the agents page</a>.</p>
+          <p class="mt-2 text-xs text-slate-400">These are the same rules, replayed in the page. For the real compiled check, <a href="./agents/" class="underline text-brand-400 hover:text-brand-300">use the agents page</a>.</p>
+        </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <!-- Main Container -->
+  <!-- Scroll story: the barrier decision sequence, played by scrolling -->
+  <div class="story" id="story">
+    <section class="story-intro" aria-labelledby="story-line">
+      <div>
+        <p class="story-eyebrow">Independent verification</p>
+        <p class="story-words" id="story-line"><span class="w">An</span> <span class="w">agent</span> <span class="w">says</span> <span class="w">it</span> <span class="w">backed</span> <span class="w">up</span> <span class="w">the</span> <span class="w">database.</span> <span class="w">Joltrin</span> <span class="w">checks</span> <span class="w">the</span> <span class="w">record,</span> <span class="w">not</span> <span class="w">the</span> <span class="w">claim.</span></p>
+        <p class="story-hint" id="story-hint">Scroll down to continue <span aria-hidden="true">&darr;</span> <a href="#demo-video" class="underline text-brand-400 hover:text-brand-300 ml-3">Skip to the demo</a></p>
+      </div>
+    </section>
+
+    <section class="story-pin" aria-label="How the barrier decides">
+      <div class="story-stage">
+        <div>
+          <p class="story-verdict" aria-live="off">
+            <span class="v-block" data-for="0 1">Blocked.</span>
+            <span class="v-allow" data-for="2 3 4">Allowed.</span>
+          </p>
+          <p class="story-note">
+            <span data-for="0">The agent asks to drop the production database. The recorded trace has no validated backup, so the barrier refuses.</span>
+            <span data-for="1">It tries to validate a backup that was never taken. Refused again, with the missing state named.</span>
+            <span data-for="2">It takes the backup. That step has everything it needs, so it is recorded.</span>
+            <span data-for="3">Now the validation passes, because the backup it depends on exists in the trace.</span>
+            <span data-for="4">The drop is committed. The order was enforced by the barrier, whatever the agent said it had already done.</span>
+          </p>
         </div>
+        <div class="story-card" role="img" aria-label="Runbook decisions: drop_prod_db blocked, validate_backup blocked, take_backup allowed, validate_backup allowed, drop_prod_db allowed">
+          <p class="hd">// db-maintenance runbook</p>
+          <div class="story-row" aria-hidden="true"><b>drop_prod_db</b><span><b class="no">BLOCKED</b> <span class="why">backup_validated missing</span></span></div>
+          <div class="story-row" aria-hidden="true"><b>validate_backup</b><span><b class="no">BLOCKED</b> <span class="why">backup_taken missing</span></span></div>
+          <div class="story-row" aria-hidden="true"><b>take_backup</b><span><b class="ok">ALLOWED</b></span></div>
+          <div class="story-row" aria-hidden="true"><b>validate_backup</b><span><b class="ok">ALLOWED</b></span></div>
+          <div class="story-row" aria-hidden="true"><b>drop_prod_db</b><span><b class="ok">ALLOWED</b></span></div>
         </div>
       </div>
     </section>
 
-    <!-- Intro video (muted so browsers allow autoplay) -->
+    <section class="story-end" aria-labelledby="story-end-h">
+      <h2 id="story-end-h">Check before it <em>commits.</em></h2>
+      <div class="story-cta">
+        <a class="primary" href="./agents/">Open the barrier demo</a>
+        <a class="ghost" href="https://github.com/SharedCode/joltrin#try-it-in-five-minutes" target="_blank" rel="noopener noreferrer">Read the quickstart</a>
+      </div>
+    </section>
+  </div>
+
+  <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
+
+    <!-- Intro video: a click-to-play thumbnail. The YouTube player (about 5 MB of scripts) loads only when the visitor presses play. -->
     <section id="demo-video" aria-label="Joltrin intro video" class="scroll-mt-20 mb-8 rounded-2xl overflow-hidden border border-dark-700/80 bg-dark-900">
       <div class="relative w-full" style="aspect-ratio:16/9">
-        <iframe class="absolute inset-0 w-full h-full"
-          data-src="https://www.youtube-nocookie.com/embed/WZbz868nTi4?autoplay=1&mute=1&loop=1&playlist=WZbz868nTi4&playsinline=1&rel=0"
-          title="Joltrin intro video"
-          allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
-          referrerpolicy="strict-origin-when-cross-origin"></iframe>
+        <button type="button" id="demo-video-play" data-embed="https://www.youtube-nocookie.com/embed/WZbz868nTi4?autoplay=1&playsinline=1&rel=0"
+          aria-label="Play the Joltrin intro video"
+          class="absolute inset-0 w-full h-full group cursor-pointer bg-dark-950">
+          <img src="https://i.ytimg.com/vi/WZbz868nTi4/hqdefault.jpg" alt="" width="480" height="360" loading="lazy" decoding="async"
+            class="absolute inset-0 w-full h-full transition" />
+          <span class="absolute inset-0 flex items-center justify-center">
+            <span class="w-16 h-16 rounded-full bg-brand-500 video-play-disc text-black flex items-center justify-center transition">
+              <svg viewBox="0 0 24 24" fill="currentColor" class="w-7 h-7" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
+            </span>
+          </span>
+        </button>
       </div>
     </section>
 
@@ -2282,31 +2298,83 @@ <h4 class="font-mono text-xs uppercase font-bold text-white mb-3">Open Source &a
   <script>
     let selectedBenchOps = 5000;
 
+    // The one place the billing API host is named. Only the production site calls it cross-origin.
+    const BILLING_API_HOST = 'https://joltrin-app.livelybay-0f85ed7b.eastus.azurecontainerapps.io';
+    const BILLING_API = ['joltrinhq.com', 'www.joltrinhq.com'].includes(location.hostname) ? BILLING_API_HOST : '';
+
+    // POSTs JSON and resolves { ok, status, data }. status 0 means the request never got an answer (offline, blocked or timed out).
+    // A lost response leaves delivery unconfirmed, so POSTs are not retried. A 4xx is an answer and is not retried.
+    async function postJson(path, body, timeoutMs) {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), timeoutMs);
+      try {
+        // A lost response does not prove a POST failed. Let the visitor choose whether to resubmit.
+        const res = await fetch(BILLING_API + path, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+          signal: controller.signal
+        });
+        let data = null;
+        try { data = await res.json(); } catch (_) {}
+        return { ok: res.ok, status: res.status, data };
+      } catch (_) {
+        return { ok: false, status: 0, data: null };
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+
     // Anything a visitor typed goes through this before it is placed in markup.
     function escapeHtml(v) { return String(v).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]); }
 
-    // The intro video player is about 5 MB of scripts. It starts once the video is
-    // within a screen of the viewport, so a visitor who never scrolls to it never
-    // downloads it. Without IntersectionObserver it starts after the page loads.
-    window.addEventListener("load", () => {
-      const frame = document.querySelector('#demo-video iframe[data-src]');
-      if (!frame) return;
-      const start = () => { frame.src = frame.dataset.src; };
-      if (!('IntersectionObserver' in window)) return start();
-      const io = new IntersectionObserver((entries) => {
-        if (entries.some((e) => e.isIntersecting)) { io.disconnect(); start(); }
-      }, { rootMargin: '600px 0px' });
-      io.observe(frame);
+    // The intro video player is about 5 MB of scripts. It loads only when the visitor presses play.
+    document.addEventListener("click", (e) => {
+      const btn = e.target.closest && e.target.closest('#demo-video-play');
+      if (!btn) return;
+      const frame = document.createElement('iframe');
+      frame.className = 'absolute inset-0 w-full h-full';
+      frame.src = btn.dataset.embed;
+      frame.title = 'Joltrin intro video';
+      frame.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen';
+      frame.referrerPolicy = 'strict-origin-when-cross-origin';
+      frame.setAttribute('allowfullscreen', '');
+      btn.replaceWith(frame);
+      frame.focus();
+      track('demo_video_play');
     });
 
     // Initialize Lucide Icons
     document.addEventListener("DOMContentLoaded", () => {
-      // Start the engine first so a slow icon CDN cannot hold it up.
-      initWasmEngine();
+      // The engine (about 6 MB) starts on the first interaction, or when a section that needs it scrolls near. Hovering a call to action counts.
+      armWasmEngine();
       if (window.lucide) lucide.createIcons();
       else console.error('Lucide icon library failed to load from unpkg.com; icons will not render.');
     });
 
+    // Starts the engine once. Triggers: first pointer, key or touch input, hover or focus on a call to action,
+    // or the live engine sections scrolling within a screen of the viewport. Without IntersectionObserver it starts on load.
+    let wasmStarted = false;
+    function startWasmEngine() {
+      if (wasmStarted) return;
+      wasmStarted = true;
+      initWasmEngine();
+    }
+    function armWasmEngine() {
+      ['pointerdown', 'keydown', 'touchstart', 'wheel'].forEach((ev) => {
+        document.addEventListener(ev, startWasmEngine, { once: true, passive: true });
+      });
+      ['pointerover', 'focusin'].forEach((ev) => {
+        document.addEventListener(ev, (e) => { if (e.target.closest && e.target.closest('a, button')) startWasmEngine(); }, { passive: true });
+      });
+      const live = document.getElementById('under-the-hood') || document.getElementById('durable-memory');
+      if (!('IntersectionObserver' in window) || !live) return startWasmEngine();
+      const io = new IntersectionObserver((entries) => {
+        if (entries.some((e) => e.isIntersecting)) { io.disconnect(); startWasmEngine(); }
+      }, { rootMargin: '800px 0px' });
+      io.observe(live);
+    }
+
     // WASM Engine Initializer
     async function initWasmEngine() {
       try {
@@ -2759,27 +2827,13 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
         // local storage may be restricted in some iframe contexts
       }
 
-      let serverSuccess = false;
-      try {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 3500);
-        const apiBase = ['joltrinhq.com', 'www.joltrinhq.com'].includes(location.hostname) ? 'https://joltrin-app.livelybay-0f85ed7b.eastus.azurecontainerapps.io' : '';
-        const res = await fetch(apiBase + '/api/billing/enterprise-contact', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-          signal: controller.signal
-        });
-        clearTimeout(timeoutId);
-        if (res.ok) {
-          serverSuccess = true;
-        }
-      } catch (netErr) {
-        // The server was unreachable or slow. The email fallback below covers it.
-      }
+      const result = await postJson('/api/billing/enterprise-contact', payload, 8000);
+      const serverSuccess = result.ok;
 
       submitBtn.disabled = false;
-      submitBtn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i><span>Inquiry Sent</span>';
+      submitBtn.innerHTML = serverSuccess
+        ? '<i data-lucide="check" class="w-4 h-4"></i><span>Inquiry Sent</span>'
+        : '<i data-lucide="alert-triangle" class="w-4 h-4"></i><span>Submission Unconfirmed</span>';
       lucide.createIcons();
 
       const mailtoSubject = encodeURIComponent(`Joltrin ${payload.tier.toUpperCase()} Inquiry - ${payload.company}`);
@@ -2813,10 +2867,10 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
         ` : `
           <div class="flex items-center space-x-2 text-amber-400 font-bold text-sm">
             <i data-lucide="alert-triangle" class="w-4 h-4"></i>
-            <span>${escapeHtml(payload.name)}, this form can't reach our server right now.</span>
+            <span>${escapeHtml(payload.name)}, ${result.status === 0 ? "we could not confirm delivery to our server." : 'our server returned an error (' + result.status + ').'}</span>
           </div>
           <p class="text-slate-300 leading-relaxed">
-            Nothing was sent yet. Click below to email it directly instead. Your answers are saved on this device either way.
+            We could not confirm this submission. Your answers are saved on this device. You can email us below.
           </p>
           <div class="pt-2 flex flex-wrap items-center gap-3">
             <a href="${mailtoLink}" class="px-3 py-1.5 rounded-lg bg-amber-500 hover:bg-amber-400 text-black font-bold font-mono text-[11px] flex items-center space-x-1.5 transition">
@@ -2832,7 +2886,8 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
         statusAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
       }
 
-      form.reset();
+      // Keep the answers until the server confirms receipt.
+      if (serverSuccess) form.reset();
     }
 
     // ===== Joltrin Pro Checkout & Modal Handlers =====
@@ -2882,42 +2937,26 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
       btnText.innerText = 'Creating Checkout Session...';
 
       let redirectUrl = null;
-      let sessionData = null;
-
-      try {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 15000);
-        const apiBase = ['joltrinhq.com', 'www.joltrinhq.com'].includes(location.hostname) ? 'https://joltrin-app.livelybay-0f85ed7b.eastus.azurecontainerapps.io' : '';
-        const res = await fetch(apiBase + '/api/billing/public-checkout', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            tier: 'pro',
-            workspace_name: workspace,
-            email: email,
-            billing_cycle: cycle
-          }),
-          signal: controller.signal
-        });
-        clearTimeout(timeoutId);
-
-        if (res.ok) {
-          const data = await res.json();
-          if (data.checkout_url) {
-            redirectUrl = data.checkout_url;
-          } else if (data.session_id) {
-            sessionData = data;
-          }
-        }
-      } catch (err) {
-        // Backend offline or static site environment fallback
-      }
+      const result = await postJson('/api/billing/public-checkout', {
+        tier: 'pro',
+        workspace_name: workspace,
+        email: email,
+        billing_cycle: cycle
+      }, 15000);
+      if (result.ok && result.data && result.data.checkout_url) redirectUrl = result.data.checkout_url;
 
       if (redirectUrl) {
         window.location.href = redirectUrl;
         return;
       }
 
+      // Say why there is no checkout: the service did not answer, it answered with an error, or it answered with no checkout link.
+      const reason = result.status === 0
+        ? 'The billing service did not respond.'
+        : result.ok
+          ? 'The billing service did not return a checkout link.'
+          : 'The billing service returned an error (' + result.status + ').';
+
       // No billing backend reachable from this static site (e.g. this is the
       // GitHub Pages deployment, which serves static files only). Be honest
       // about that instead of faking a checkout session.
@@ -2938,7 +2977,7 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
             <span>Online checkout isn't available on this site yet</span>
           </div>
           <p class="text-slate-300 leading-relaxed">
-            Pro is design-partner access today, and self-serve checkout is not open yet. Email us your workspace name and we'll set up <strong class="text-white font-mono">${escapeHtml(workspace)}</strong> on the $49/month plan directly.
+            ${reason} Pro is design-partner access today, and self-serve checkout is not open yet. Email us your workspace name and we'll set up <strong class="text-white font-mono">${escapeHtml(workspace)}</strong> on the $49/month plan directly.
           </p>
           <div class="pt-1 flex items-center justify-between">
             <a href="${mailtoLink}" class="px-3 py-1.5 rounded-lg bg-brand-500 text-black font-bold text-[11px] flex items-center space-x-1.5">
@@ -2957,7 +2996,7 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
       // instead of emailing.
       try {
         const stored = JSON.parse(localStorage.getItem('joltrin_pro_orders') || '[]');
-        stored.push({ workspace, email, cycle, date: new Date().toISOString(), backendReached: false });
+        stored.push({ workspace, email, cycle, date: new Date().toISOString(), backendResponded: result.status !== 0, status: result.status });
         localStorage.setItem('joltrin_pro_orders', JSON.stringify(stored));
       } catch (_) {}
     }
@@ -3026,7 +3065,6 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
         });
       }, { threshold: 0.06, rootMargin: '0px 0px -8% 0px' });
       targets.forEach(function (el, i) {
-        if (i === 0) return; // the hero moves with scroll instead
         el.classList.add('reveal');
         io.observe(el);
       });
@@ -3037,7 +3075,7 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
         card.style.setProperty('--reveal-delay', (i * 90) + 'ms');
       });
 
-      var hero = document.querySelector('main > section');
+      var hero = document.getElementById('start');
       var bar = document.querySelector('.scroll-progress');
       var ticking = false;
       function frame() {
@@ -3088,10 +3126,10 @@ <h3 class="font-bold text-white text-sm">${res.title}</h3>
       }, 600);
       function frame() {
         ticking = false;
-        if (hint) hint.classList.toggle('gone', window.scrollY > 40);
         var vh = window.innerHeight;
         // Words: lit across the pinned intro track.
         var r = intro.getBoundingClientRect();
+        if (hint) hint.classList.toggle('gone', r.top < -40);
         var p = Math.min(1, Math.max(0, (-r.top - vh * 0.05) / (vh * 0.5)));
         var lit = Math.max(Math.round(p * words.length), timed);
         words.forEach(function (w, i) { w.classList.toggle('lit', i < lit); });
diff --git a/tests/a11y.spec.ts b/tests/a11y.spec.ts
index b185c001b..0ff9def36 100644
--- a/tests/a11y.spec.ts
+++ b/tests/a11y.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { createRequire } from 'node:module';
+import { waitForWasmReady } from './helpers/wasm-lifecycle';
 
 /**
  * Every page passes the automated WCAG 2 A and AA checks, in the dark and the
@@ -17,7 +18,23 @@ for (const scheme of ['dark', 'light'] as const) {
     for (const path of PAGES) {
       test(`${path} has no WCAG A or AA violations`, async ({ page }) => {
         await page.goto(path, { waitUntil: 'load' });
-        await page.waitForTimeout(1200);
+        await waitForWasmReady(page);
+        if (path === '/private-intent/') {
+          await expect(page.locator('#b-attempt')).toBeEnabled({ timeout: 30_000 });
+        }
+        // Scan the settled text, rather than a partially transparent entrance frame.
+        await page.evaluate(async () => {
+          await document.fonts.ready;
+          await new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+          // Poll playState: WebKit can leave animation.finished unresolved for animations that have already finished.
+          const settled = () => document.getAnimations()
+            .filter(animation => Number.isFinite(animation.effect?.getComputedTiming().endTime))
+            .every(animation => animation.playState !== 'running');
+          const deadline = performance.now() + 5_000;
+          while (!settled() && performance.now() < deadline) {
+            await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+          }
+        });
         await page.addScriptTag({ path: axePath });
         const result = await page.evaluate(async () =>
           // @ts-expect-error axe is injected above
diff --git a/tests/helpers/wasm-lifecycle.ts b/tests/helpers/wasm-lifecycle.ts
index 022cb8527..235affebb 100644
--- a/tests/helpers/wasm-lifecycle.ts
+++ b/tests/helpers/wasm-lifecycle.ts
@@ -7,6 +7,9 @@ import { Page, expect } from '@playwright/test';
  * and WebAssembly execution boundary listeners.
  */
 export async function waitForWasmReady(page: Page): Promise<void> {
+  // The homepage downloads its engine on the first interaction. Tests that wait for it start it here.
+  await page.evaluate(() => (window as any).startWasmEngine?.());
+
   // Wait for the loader overlay to hide (opacity-0 class added upon WASM instantiation)
   const overlay = page.locator('#wasm-loader-overlay');
   if (await overlay.count() > 0) {
@@ -52,3 +55,29 @@ export async function waitForCanvasRendered(page: Page, canvasSelector = 'canvas
     });
   });
 }
+
+/**
+ * Lets the page run a few animation frames, so scroll handlers and timers that react to the
+ * last action have run. Use it before asserting that something did NOT happen.
+ */
+export async function nextFrames(page: Page, frames = 5): Promise<void> {
+  await page.evaluate(
+    (n) =>
+      new Promise<void>((resolve) => {
+        const step = (left: number) => (left <= 0 ? resolve() : requestAnimationFrame(() => step(left - 1)));
+        step(n);
+      }),
+    frames,
+  );
+}
+
+/** Waits until the page's form-velocity guard (render timestamp older than 1.2 s) lets a submit through. */
+export async function waitForFormReady(page: Page, tsId: string): Promise<void> {
+  await page.waitForFunction(
+    (id) => {
+      const el = document.getElementById(id) as HTMLInputElement | null;
+      return !!el && el.value !== '' && Date.now() - Number(el.value) > 1300;
+    },
+    tsId,
+  );
+}
diff --git a/tests/homepage.spec.ts b/tests/homepage.spec.ts
index b80641a6c..5f4362799 100644
--- a/tests/homepage.spec.ts
+++ b/tests/homepage.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test';
-import { waitForWasmReady } from './helpers/wasm-lifecycle';
+import { waitForWasmReady, waitForFormReady } from './helpers/wasm-lifecycle';
 
 /**
  * Homepage positioning, pricing honesty, and metadata.
@@ -22,6 +22,26 @@ test.describe('Homepage', () => {
     expect(fits, 'the headline fits the viewport').toBe(true);
   });
 
+  test('headline and the one primary action are in the first screen, and the engine is not preloaded', async ({ page }) => {
+    await page.goto('/', { waitUntil: 'domcontentloaded' });
+    const vh = page.viewportSize()!.height;
+    const h1 = await page.getByRole('heading', { level: 1 }).boundingBox();
+    expect(h1!.y + h1!.height, 'the headline ends inside the first screen').toBeLessThan(vh);
+    const cta = await page.getByRole('link', { name: /try to make an agent drop a database/i }).boundingBox();
+    expect(cta!.y + cta!.height, 'the primary action ends inside the first screen').toBeLessThan(vh);
+    await expect(page.locator('link[rel="preload"][href$="sop.wasm"]')).toHaveCount(0);
+  });
+
+  test('the 6 MB engine downloads only after the visitor interacts', async ({ page }) => {
+    let fetched = 0;
+    await page.route('**/sop.wasm', (route) => { fetched++; route.continue(); });
+    await page.goto('/', { waitUntil: 'load' });
+    await page.evaluate(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))));
+    expect(fetched, 'no engine download before any interaction').toBe(0);
+    await page.getByRole('link', { name: /try to make an agent drop a database/i }).hover();
+    await expect.poll(() => fetched).toBeGreaterThan(0);
+  });
+
   test('nothing covers the hero when the icon CDN is unreachable', async ({ page }) => {
     // The boot overlay once stayed up for good after the icon script failed to load,
     // and the homepage was a black screen that still answered 200.
@@ -29,8 +49,6 @@ test.describe('Homepage', () => {
     await page.goto('/', { waitUntil: 'load' });
     const h1 = page.getByRole('heading', { level: 1 });
     await expect(h1).toBeAttached();
-    // The scroll story sits above the hero, so bring the headline into view first.
-    await h1.scrollIntoViewIfNeeded();
     await expect(h1).toBeVisible();
     await expect
       .poll(
@@ -81,21 +99,26 @@ test.describe('Homepage', () => {
 
   test('the page does not lead with database or infrastructure claims', async ({ page }) => {
     await page.goto('/', { waitUntil: 'domcontentloaded' });
-    const hero = (await page.locator('main section').first().innerText()).toLowerCase();
+    const hero = (await page.locator('#start').innerText()).toLowerCase();
     for (const phrase of ['future of databases', 'ai-native', 'autonomous agent platform']) {
       expect(hero).not.toContain(phrase);
     }
   });
 
-  test('intro video sits below the hero and autoplays muted', async ({ page }) => {
+  test('intro video is a click-to-play thumbnail that loads YouTube only on click', async ({ page }) => {
     await page.goto('/', { waitUntil: 'domcontentloaded' });
+    const play = page.locator('#demo-video-play');
+    await expect(page.locator('#demo-video iframe')).toHaveCount(0);
+    await play.scrollIntoViewIfNeeded();
+    await expect(page.locator('#demo-video iframe')).toHaveCount(0);
+    const playY = (await play.boundingBox())!.y + (await page.evaluate(() => window.scrollY));
+    const heroY = (await page.getByRole('heading', { level: 1 }).boundingBox())!.y + (await page.evaluate(() => window.scrollY));
+    expect(playY).toBeGreaterThan(heroY);
+    await page.route('**/youtube-nocookie.com/**', (route) => route.fulfill({ status: 200, contentType: 'text/html', body: '' }));
+    await play.click();
     const frame = page.locator('iframe[title="Joltrin intro video"]');
-    await expect(frame).not.toHaveAttribute('src', /./);
-    await frame.scrollIntoViewIfNeeded();
-    await expect(frame).toHaveAttribute('src', /youtube-nocookie\.com\/embed\/WZbz868nTi4\?.*autoplay=1.*mute=1/);
-    const frameY = (await frame.boundingBox())!.y;
-    const heroY = (await page.getByRole('heading', { level: 1 }).boundingBox())!.y;
-    expect(frameY).toBeGreaterThan(heroY);
+    await expect(frame).toHaveAttribute('src', /youtube-nocookie\.com\/embed\/WZbz868nTi4\?.*autoplay=1/);
+    expect(await frame.getAttribute('src')).not.toMatch(/loop=1/);
   });
 
   test('header has a Watch demo button that jumps to the video', async ({ page }) => {
@@ -103,7 +126,7 @@ test.describe('Homepage', () => {
     const btn = page.locator('#watch-demo-btn');
     await expect(btn).toBeVisible();
     await expect(btn).toHaveAttribute('href', '#demo-video');
-    await expect(page.locator('#demo-video iframe')).toHaveCount(1);
+    await expect(page.locator('#demo-video-play')).toHaveCount(1);
   });
 
   test('explains how to test the barrier with your own AI agent', async ({ page }) => {
@@ -261,7 +284,7 @@ test.describe('Homepage', () => {
   test('share preview text matches the hero on the homepage and the agents page', async ({ request }) => {
     const home = await (await request.get('/')).text();
     expect(home).toContain('property="og:title" content="Your AI agent wants to delete production.');
-    expect(home).toContain('property="twitter:title" content="Your AI agent wants to delete production.');
+    expect(home).toContain('name="twitter:title" content="Your AI agent wants to delete production.');
     expect(home).toContain('It checks the recorded trace, not the world.');
     const agents = await (await request.get('/agents/')).text();
     const og = agents.match(/property="og:title" content="([^"]+)"/)?.[1];
@@ -276,6 +299,31 @@ test.describe('Homepage', () => {
     expect(overflow).toBeLessThanOrEqual(0);
   });
 
+  for (const outcome of ['accepted', 'server error', 'lost response'] as const) {
+    test(`an inquiry is posted once and reports ${outcome} accurately`, async ({ page }) => {
+      let posts = 0;
+      await page.route('**/api/billing/enterprise-contact', route => {
+        posts++;
+        return outcome === 'lost response' ? route.abort('failed')
+          : route.fulfill({ status: outcome === 'accepted' ? 200 : 503, body: '{}' });
+      });
+      await page.goto('/', { waitUntil: 'domcontentloaded' });
+      await waitForFormReady(page, 'interest-ts');
+      await page.fill('#inq-name', 'Test Person');
+      await page.fill('#inq-email', 'test@example.test');
+      await page.fill('#inq-company', 'Test Company');
+      await page.click('#inq-submit-btn');
+      const status = page.locator('#form-status-alert');
+      await expect(status).toContainText(outcome === 'accepted' ? 'inquiry has been received' : 'We could not confirm this submission');
+      expect(posts).toBe(1);
+      await expect(page.locator('#inq-name')).toHaveValue(outcome === 'accepted' ? '' : 'Test Person');
+      if (outcome !== 'accepted') {
+        await expect(page.locator('#inq-submit-btn')).toContainText('Submission Unconfirmed');
+        await expect(status).not.toContainText('Nothing was sent');
+      }
+    });
+  }
+
   test('enterprise inquiry status is announced to screen readers', async ({ page }) => {
     await page.goto('/', { waitUntil: 'domcontentloaded' });
     await expect(page.locator('#form-status-alert')).toHaveAttribute('role', 'status');
@@ -288,8 +336,12 @@ test.describe('Homepage', () => {
       await expect(page.locator('html')).toHaveClass(/js-story/);
 
       const total = await page.locator('.story-words .w').count();
-      const introHeight = await page.locator('.story-intro').evaluate((el) => (el as HTMLElement).offsetHeight);
-      await page.evaluate((y) => window.scrollTo(0, y), introHeight * 0.9);
+      // The story sits below the hero, so scroll relative to where it starts.
+      const [storyTop, introHeight] = await page.locator('.story-intro').evaluate((el) => [
+        el.getBoundingClientRect().top + window.scrollY,
+        (el as HTMLElement).offsetHeight,
+      ]);
+      await page.evaluate((y) => window.scrollTo(0, y), storyTop + introHeight * 0.9);
       await expect.poll(() => page.locator('.story-words .w.lit').count()).toBe(total);
 
       const pin = page.locator('.story-pin');
@@ -316,9 +368,10 @@ test.describe('Homepage', () => {
       const hint = page.locator('#story-hint');
       await expect(hint).toBeVisible();
       await expect(hint).toContainText('Scroll down to continue');
-      await page.evaluate(() => window.scrollTo(0, 200));
+      const storyTop = await page.locator('.story-intro').evaluate((el) => el.getBoundingClientRect().top + window.scrollY);
+      await page.evaluate((y) => window.scrollTo(0, y), storyTop + 200);
       await expect(hint).toHaveClass(/gone/);
-      await page.evaluate(() => window.scrollTo(0, 0));
+      await page.evaluate((y) => window.scrollTo(0, y), storyTop);
       await expect(hint).not.toHaveClass(/gone/);
     });
 
@@ -336,9 +389,9 @@ test.describe('Homepage', () => {
     });
   });
 
-  test('hero is fully opaque when it first comes into view below the scroll story', async ({ page }) => {
+  test('the first section after the scroll story is fully opaque when it comes into view', async ({ page }) => {
     await page.goto('/', { waitUntil: 'domcontentloaded' });
-    await page.locator('h1').scrollIntoViewIfNeeded();
+    await page.locator('main > section').first().scrollIntoViewIfNeeded();
     await page.evaluate(() => window.scrollBy(0, -100));
     await expect
       .poll(() => page.locator('main > section').first().evaluate((el) => Number(getComputedStyle(el).opacity)))
diff --git a/tests/page-sound.spec.ts b/tests/page-sound.spec.ts
index f1fee97f8..ffc342202 100644
--- a/tests/page-sound.spec.ts
+++ b/tests/page-sound.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect, Page } from '@playwright/test';
-import { waitForWasmReady } from './helpers/wasm-lifecycle';
+import { waitForWasmReady, nextFrames } from './helpers/wasm-lifecycle';
 
 /**
  * The Private Intent and Agents pages share one sound layer (assets/site-sound.js).
@@ -38,7 +38,7 @@ test.describe('Sound on the Private Intent page', () => {
   test('stays locked until a press, and the first press does not switch it off', async ({ page }) => {
     const toggle = page.locator('.site-sound');
     await expect(toggle).toHaveText('Tap for sound');
-    await page.waitForTimeout(800);
+    await nextFrames(page);
     expect(await oscillators(page)).toBe(0);
     await toggle.click();
     await expect(toggle).toHaveText('Sound on');
@@ -56,7 +56,7 @@ test.describe('Sound on the Private Intent page', () => {
     const muted = await oscillators(page);
     await page.locator('#b-reset').click();
     await page.locator('#b-attempt').click();
-    await page.waitForTimeout(500);
+    await nextFrames(page);
     expect(await oscillators(page)).toBe(muted);
   });
 });
diff --git a/tests/playful.spec.ts b/tests/playful.spec.ts
index 678a9d0be..083303bb3 100644
--- a/tests/playful.spec.ts
+++ b/tests/playful.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { waitForFormReady } from './helpers/wasm-lifecycle';
 
 /**
  * The playful parts: the homepage "Be the agent" panel, the agent barrier
@@ -126,7 +127,7 @@ test.describe('Agents page inquiry form', () => {
       (window as any).plausible = (name: string, opts?: unknown) => (window as any).__events.push([name, opts]);
     });
     await page.goto('/agents/', { waitUntil: 'domcontentloaded' });
-    await page.waitForTimeout(1500);
+    await waitForFormReady(page, 'interest-ts-agents');
     await page.fill('#interest-form-agents [name="name"]', 'Test Person');
     await page.fill('#interest-form-agents [name="email"]', 'test@example.com');
     await page.fill('#interest-form-agents [name="company"]', 'Test Co');
@@ -142,7 +143,7 @@ test.describe('Agents page inquiry form', () => {
     await page.route('**/plausible.io/**', (route) => route.abort());
     await page.route('**/api/billing/enterprise-contact', (route) => route.fulfill({ status: 500, body: '{}' }));
     await page.goto('/agents/', { waitUntil: 'domcontentloaded' });
-    await page.waitForTimeout(1500);
+    await waitForFormReady(page, 'interest-ts-agents');
     await page.fill('#interest-form-agents [name="name"]', 'Test Person');
     await page.fill('#interest-form-agents [name="email"]', 'test@example.com');
     await page.fill('#interest-form-agents [name="company"]', 'Test Co');
@@ -157,7 +158,7 @@ test.describe('Agents page inquiry form', () => {
     await page.route('**/plausible.io/**', (route) => route.abort());
     await page.route('**/api/billing/enterprise-contact', (route) => route.fulfill({ status: 200, body: '{}' }));
     await page.goto('/agents/', { waitUntil: 'domcontentloaded' });
-    await page.waitForTimeout(1500);
+    await waitForFormReady(page, 'interest-ts-agents');
     const name = '<img src=x onerror="window.__xss=1">';
     await page.fill('#interest-form-agents [name="name"]', name);
     await page.fill('#interest-form-agents [name="email"]', 'test@example.com');
diff --git a/tests/private-intent.spec.ts b/tests/private-intent.spec.ts
index 6d5ac7d6c..20c352dbc 100644
--- a/tests/private-intent.spec.ts
+++ b/tests/private-intent.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { nextFrames } from './helpers/wasm-lifecycle';
 
 /**
  * The Private Intent demo runs the real intent package in WebAssembly.
@@ -432,7 +433,7 @@ test.describe('Share a run', () => {
   for (const [label, hash] of [['unknown letters', '#run=QQQ'], ['markup', '#run=A%3Cscript%3E'], ['lower case', '#run=aba'], ['too many steps', '#run=' + 'A'.repeat(41)]]) {
     test(`a link with ${label} is ignored`, async ({ page }) => {
       await ready(page, hash);
-      await page.waitForTimeout(1500);
+      await nextFrames(page, 30);
       await expect(page.locator('#replay-note')).toBeHidden();
       await expect(page.locator('#log li')).toHaveCount(0);
       await expect(page.locator('#banner-title')).toHaveText('READY');
diff --git a/tests/sound.spec.ts b/tests/sound.spec.ts
index 244228ba8..bc9051807 100644
--- a/tests/sound.spec.ts
+++ b/tests/sound.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { nextFrames } from './helpers/wasm-lifecycle';
 
 /**
  * The homepage sound layer is on by default and can be turned off. It plays
@@ -58,16 +59,15 @@ test.describe('Homepage sound toggle', () => {
     await expect(toggle).toHaveText('Sound off');
     await page.evaluate(() => { (window as any).__oscillators = 0; });
     await page.evaluate(() => window.scrollBy(0, 4000));
-    await page.waitForTimeout(600);
+    await nextFrames(page);
     expect(await page.evaluate(() => (window as any).__oscillators)).toBe(0);
 
     await toggle.click();
     await page.evaluate(() => { (window as any).__oscillators = 0; });
     await page.evaluate(() => window.scrollTo(0, 0));
-    await page.waitForTimeout(200);
+    await nextFrames(page);
     await page.evaluate(() => window.scrollBy(0, 4000));
-    await page.waitForTimeout(800);
-    expect(await page.evaluate(() => (window as any).__oscillators)).toBeGreaterThan(0);
+    await expect.poll(() => page.evaluate(() => (window as any).__oscillators)).toBeGreaterThan(0);
   });
 });
 
@@ -104,16 +104,15 @@ test.describe('Homepage sound under the browser autoplay policy', () => {
     await expect(toggle).toHaveText('Tap for sound');
     // Scrolling is not a click, tap or key press, so the browser keeps audio locked.
     await page.evaluate(() => window.scrollBy(0, 4000));
-    await page.waitForTimeout(600);
+    await nextFrames(page);
     expect(await page.evaluate(() => (window as any).__oscillators)).toBe(0);
     await toggle.click();
     await expect(toggle).toHaveText('Sound on');
     await page.evaluate(() => { (window as any).__oscillators = 0; });
     await page.evaluate(() => window.scrollTo(0, 0));
-    await page.waitForTimeout(200);
+    await nextFrames(page);
     await page.evaluate(() => window.scrollBy(0, 4000));
-    await page.waitForTimeout(800);
-    expect(await page.evaluate(() => (window as any).__oscillators)).toBeGreaterThan(0);
+    await expect.poll(() => page.evaluate(() => (window as any).__oscillators)).toBeGreaterThan(0);
   });
 
   test('a click anywhere on the page unlocks audio and the banner follows', async ({ page }) => {
@@ -170,7 +169,7 @@ test.describe('Homepage sound when the browser refuses audio', () => {
     await page.locator('.sound-toggle').click();
     await page.locator('.sound-toggle').click();
     await page.evaluate(() => window.scrollBy(0, 4000));
-    await page.waitForTimeout(600);
+    await nextFrames(page);
     expect(errors).toEqual([]);
     expect(await page.evaluate(() => (window as any).__oscillators)).toBe(0);
   });
diff --git a/tests/visual-animation.spec.ts b/tests/visual-animation.spec.ts
index c8d116b77..c7a2ba531 100644
--- a/tests/visual-animation.spec.ts
+++ b/tests/visual-animation.spec.ts
@@ -67,6 +67,9 @@ test.describe('Visual, Animation & Layout Stability Suite', () => {
     const overlay = page.locator('#wasm-loader-overlay');
     await expect(overlay).toBeAttached();
 
+    // The engine starts on the first interaction, so make one.
+    await page.evaluate(() => (window as any).startWasmEngine());
+
     // Overlay transitions to opacity-0 and pointer-events-none without being indefinitely stuck
     await expect(overlay).toHaveClass(/opacity-0/, { timeout: 25_000 });
     await expect(overlay).toHaveClass(/pointer-events-none/, { timeout: 25_000 });