v0.2.0-alpha: DOM capture, all three output slices, lead gates

- Extension DOM mode: auth-context serializer — inlines CSS + images as data
  URLs, freezes form state, masks [data-dp-mask], strips scripts (R3 client)
- API: extractDataUrls rewrites large inline resources into content-addressed
  assets (R3 server; verified 939KB inline -> 82-byte row + served asset)
- Lead-gate steps: config on step, player overlay form blocks advance,
  submits to leads endpoint (editor toggle + MCP set_lead_gate)
- Step-guide export (v2 slice): authed markdown + public HTML at /p/:token/guide
- Video export (v3 slice, v0): ffmpeg slideshow of image steps + optional
  narration mux; DOM rasterization deferred to Chromium service (R4)
- Editor: reorder arrows, embed-code copy, guide link, video export
- REST reorder endpoint; MCP surface now 13 tools (export_guide,
  set_lead_gate, render_video)
- ffmpeg added to runtime image

E2E verified incl. R3 extraction round-trip, lead_gate in public JSON,
guide renders, MCP agent exported guide + rendered video.

apps/api/public/player.js

@@ -74,8 +74,50 @@
     });
   }
 
+  var gatePassed = {};
+
+  function showGate(step, after) {
+    var overlay = document.createElement("div");
+    overlay.style.cssText = "position:absolute;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:10";
+    var card = document.createElement("form");
+    card.style.cssText = "background:#fff;border-radius:10px;padding:22px;max-width:320px;width:90%;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 40px rgba(15,23,42,.25)";
+    var h = document.createElement("h3"); h.textContent = "Continue watching"; card.appendChild(h);
+    (step.lead_gate.fields || []).forEach(function (fdef) {
+      var inp = document.createElement("input");
+      inp.name = fdef.name; inp.placeholder = fdef.label + (fdef.required ? " *" : "");
+      inp.required = !!fdef.required;
+      inp.style.cssText = "border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px;font:inherit";
+      card.appendChild(inp);
+    });
+    var btn = document.createElement("button"); btn.textContent = "Continue"; btn.type = "submit";
+    btn.style.cssText = "background:#2563eb;color:#fff;border:none;border-radius:6px;padding:9px;font:inherit;cursor:pointer";
+    card.appendChild(btn);
+    card.addEventListener("submit", function (e) {
+      e.preventDefault();
+      var fields = {};
+      (step.lead_gate.fields || []).forEach(function (fdef) {
+        fields[fdef.name] = card.elements[fdef.name].value;
+      });
+      fetch("/api/public/leads", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ demo_id: state.demo.demo_id, viewer_token: viewerToken, fields: fields }),
+      }).finally(function () {
+        gatePassed[step.id] = true;
+        overlay.remove();
+        after();
+      });
+    });
+    overlay.appendChild(card);
+    snap.appendChild(overlay);
+  }
+
   function next() {
     var cur = state.demo.steps[state.i];
+    if (cur.lead_gate && cur.lead_gate.enabled && !gatePassed[cur.id]) {
+      showGate(cur, next);
+      return;
+    }
     if (state.i >= state.demo.steps.length - 1) {
       beacon("complete", cur.id);
       return;