diff --git a/objects/product.toml b/objects/product.toml
index 8a78263..121a16e 100644
--- a/objects/product.toml
+++ b/objects/product.toml
@@ -31,10 +31,3 @@ title = "Every change, tracked forever"
 content = """
 Archival remembers every change you've ever made. Browse your full history, see exactly what changed and when, and roll back anything instantly, from a single edit to a whole day's work. Archival websites, and all changes to them, last forever.
 """
-
-[[sections]]
-key = "cta"
-title = "Build yours right now."
-content = """
-Describe what type of site you'd like to create and we'll get you live in a few minutes.
-"""
diff --git a/pages/_build-cta.liquid b/pages/_build-cta.liquid
index e7f5dcd..778df6c 100644
--- a/pages/_build-cta.liquid
+++ b/pages/_build-cta.liquid
@@ -4,10 +4,33 @@
   pages that do not.
 {% endcomment %}
 
-<p class="build-or">or</p>
+{% comment %}
+  Deliberately a quiet line rather than a second button: the prompt above is the
+  primary action, and a peer-weight CTA next to it splits the ask. Still a real
+  <button> - it opens a dialog, it does not navigate - and it keeps the id, which
+  is how src/build-with-claude.ts binds it. The "or" that used to sit above only
+  earns its place between two buttons.
+{% endcomment %}
+<p class="build-alt">Rather work in your terminal?</p>
 
-<button id="bwc-launch" type="button" class="primary-cta bwc-launch" data-umami-event="bwc-deeplink">
-  Open in Claude Code
+<button id="bwc-launch" type="button" class="build-alt-cta" data-umami-event="bwc-deeplink">
+  {% comment %}
+    Anthropic's official Spark mark, kept in its own clay rather than
+    recoloured. Sized to 24px to match the icon in the manifesto CTA this borrows from.
+  {% endcomment %}
+  <svg
+    class="build-alt-mark"
+    data-cds="Spark"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    fill="var(--cds-clay, #d97757)"
+    aria-hidden="true"
+  >
+    <path
+      d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z"
+    ></path>
+  </svg>
+  Build it with Claude Code
 </button>
 
 {% comment %}
diff --git a/pages/_nav.liquid b/pages/_nav.liquid
index 71cd283..9f3e95d 100644
--- a/pages/_nav.liquid
+++ b/pages/_nav.liquid
@@ -44,8 +44,23 @@
     </button>
   </div>
   <ul class="flex-shrink justify-end gap-8 items-center flex-wrap hidden md:flex">
-    <li class="nav-text {% if area == 'product' %}nav-active{% endif %}">
-      <a href="/product.html" data-umami-event="nav-product">Product</a>
+    {% comment %}
+      The tour lives on the homepage now, so this item has no page of its own to
+      match on. index.liquid scroll-spies it instead: active while the tour is
+      actually on screen. Desktop only — the mobile item sits in a closed menu,
+      where an active state has nothing to tell anyone.
+    {% endcomment %}
+    <li class="nav-text" data-nav-product>
+      {% comment %}
+        Bare "#product" on the homepage itself. "/#product" is a different
+        document from "/index.html", so the browser reloads the whole page and
+        only then jumps — which reads as a long stall followed by a snap.
+      {% endcomment %}
+      <a
+        href="{% if area == 'home' %}#product{% else %}/#product{% endif %}"
+        data-umami-event="nav-product"
+        >Product</a
+      >
     </li>
     {% assign docs_link = objects.docs | first %}
     <li class="nav-text {% if area == 'docs' %}nav-active{% endif %}">
@@ -134,7 +149,12 @@
 >
   <ul class="flex flex-col">
     <li class="mobile-nav-item">
-      <a class="flex-1" href="/product.html" data-umami-event="mobile-nav-product">Product</a>
+      <a
+        class="flex-1"
+        href="{% if area == 'home' %}#product{% else %}/#product{% endif %}"
+        data-umami-event="mobile-nav-product"
+        >Product</a
+      >
     </li>
     {% assign docs_link = objects.docs | first %}
     <li class="mobile-nav-item">
diff --git a/pages/index.liquid b/pages/index.liquid
index dc71f68..e2a6d1b 100644
--- a/pages/index.liquid
+++ b/pages/index.liquid
@@ -1,46 +1,83 @@
 {% layout 'theme' area: "home", description: home.description, path: "" %}
 {% assign home = objects.home %}
+{% assign product = objects.product %}
 
 <div id="header" class="w-full flex flex-col justify-center items-center gap-6 pt-60 relative">
   <h1 class="hero-message" data-tilt-hero>
     <span class="hero-line-1">websites for</span>
     <span class="hero-line-2">everyone</span>
   </h1>
-  <div id="header-logo" class="flex items-center justify-between flex-col w-full">
-    {% comment %}
-      <div class="shadow-image w-64 h-64 relative flex items-center justify-center scale-90 md:scale-100">
-        {% comment %} <img
-          id="header-shadow"
-          class="bg absolute z-0"
-          src="/img/logo-shadow.png"
-          alt="archival" />
+</div>
+
+{% comment %}
+  Demo video. Falls back to the poster as a plain still when no video has been
+  attached yet, so the slot holds its place instead of leaving a hole under the
+  hero — and the layout doesn't shift when the real video lands in the same frame.
+  The still deliberately carries no play affordance: a play button that does
+  nothing is worse than no button. Attaching a video to home.videos (editor or
+  objects/home.toml) promotes it to a real player. With neither a video nor a
+  poster, the whole section is absent.
+{% endcomment %}
+
+{% comment %}
+  TEMPORARY, while Jesse finishes the video: the poster placeholder stays hidden.
+  Flip this to true to bring it back before the video itself is ready. Attaching a
+  real video turns the section on regardless of this flag, so nothing here needs
+  remembering when the video lands.
+{% endcomment %}
+{% assign show_poster_placeholder = false %}
+
+{% assign demo = home.videos | first %}
+{% assign demo_file = demo.video.filename %}
+{% assign has_demo = false %}
+{% unless demo_file == blank %}
+  {% assign has_demo = true %}
+{% endunless %}
+{% if show_poster_placeholder %}
+  {% unless demo.poster == blank %}
+    {% assign has_demo = true %}
+  {% endunless %}
+{% endif %}
+
+{% if has_demo %}
+  <section class="demo-video">
+    <div class="demo-video-frame">
+      {% if demo_file == blank %}
         <img
-          id="header-image"
-          src="/img/logo.png"
-          class="fg z-10"
-          alt="archival" /> {% endcomment %}
-        {% comment %}
-          <video
-          class="header-video absolute top-0 w-full h-full hidden"
-          muted
-          preload="auto"
-          playsinline>
-          <source src="/vid/ttp.mov" type='video/mp4; codecs="hvc1"'>
-          <source src="/vid/ttp.webm" type="video/webm">
-          </video>
-          <video
-          class="header-video absolute top-0 w-full h-full hidden"
-          muted
-          preload="auto"
-          playsinline>
-          <source src="/vid/ptt.mov" type='video/mp4; codecs="hvc1"'>
-          <source src="/vid/ptt.webm" type="video/webm">
-          </video>
-        {% endcomment %}
-      </div>
+          class="demo-video-player demo-video-still"
+          src="{{ demo.poster }}"
+          alt="A site built with Archival"
+          decoding="async"
+        >
+      {% else %}
+        <video
+          class="demo-video-player"
+          {% if demo.poster %}
+            poster="{{ demo.poster }}"
+          {% endif %}
+          controls
+          playsinline
+          preload="metadata"
+        >
+          <source
+            src="{{ demo.video.url }}"
+            name="{{ demo.video.filename }}"
+            type="{{ demo.video.mime }}"
+          >
+        </video>
+      {% endif %}
+    </div>
+    {% comment %}
+      The caption rides with the real video only: "in less than 10 minutes"
+      alongside a still that cannot play is a promise the page can't keep.
     {% endcomment %}
-  </div>
-</div>
+    {% unless demo_file == blank %}
+      {% if demo.title %}
+        <p class="demo-video-caption">{{ demo.title }}</p>
+      {% endif %}
+    {% endunless %}
+  </section>
+{% endif %}
 
 {% comment %} Build Section {% endcomment %}
 
@@ -56,35 +93,630 @@
 </div>
 
 {% comment %}
-  Video Section (Disabled until produced)
-
-  <div class="content w-full max-w-screen-lg mb-40 md:max-w-[1200px]">
-    <div id="videos" class="w-full">
-      {% for video in home.videos %}
-        <div class="flex flex-col items-center gap-4">
-          <video
-            title="{{video.title}}"
-            {% if video.poster %}
-              poster="{{video.poster}}"
-            {% endif %}
-            controls
-            class="w-full bg-pink-light shadow-lg lg:rounded-2xl">
-            <source
-              src="{{video.video.url}}"
-              name="{{video.video.filename}}"
-              type="{{video.video.mime}}">
-          </video>
-        </div>
-      {% endfor %}
-    </div>
-  </div>
+  Product tour. The .product-page wrapper is load-bearing: every callout marker
+  coordinate in style/product.css is a custom property scoped to it, so the whole
+  stylesheet applies here unchanged. #product is the nav's anchor target.
 {% endcomment %}
 
+<div class="product-page" id="product">
+  {% for section in product.sections %}
+    {% assign n = forloop.index %}
+    <section
+      class="product-section {% cycle 'frame-right', 'frame-left' %}"
+      data-product-section
+      data-section="{{ n }}"
+    >
+      <div class="product-copy">
+        <h2 class="section-title">{{ section.title }}</h2>
+        <div class="section-content">{{ section.content }}</div>
+      </div>
+      <div class="product-frame-wrap" data-tilt>
+        {% if section.key == "editor" %}
+          <div class="product-frame product-frame--shell">
+            <div class="product-frame-glow" aria-hidden="true"></div>
+
+            <div class="pf-window">
+              {% comment %} Top chrome bar {% endcomment %}
+              <div class="pf-chrome" data-callout-target="1">
+                <span class="pf-chrome-btn">History</span>
+                <div class="pf-mode-toggle">
+                  <span class="on">Content</span>
+                  <span>Task</span>
+                </div>
+                <div class="pf-chrome-right">
+                  <span class="pf-chrome-btn" data-callout-target="4">Mobile</span>
+                  <span class="pf-chrome-btn">View Live</span>
+                  <span class="pf-status">
+                    <i class="pf-dot ok"></i>
+                  </span>
+                </div>
+              </div>
+
+              <div class="pf-body">
+                {% comment %} Site sections sidebar {% endcomment %}
+                <div class="pf-sidebar">
+                  <div class="pf-sidebar-item active">Site</div>
+                  <div class="pf-sidebar-item">Gallery</div>
+                  <div class="pf-sidebar-item">About</div>
+                  <div class="pf-sidebar-item">Contact</div>
+                </div>
+
+                {% comment %} Glass editing panel {% endcomment %}
+                <div class="pf-panel pf-glass" data-callout-target="2">
+                  <div class="pf-field">
+                    <label>Title</label>
+                    <div class="pf-input">Hello, world</div>
+                  </div>
+                  <div class="pf-field">
+                    <label>Published</label>
+                    <div class="pf-input">Jul 6, 2026</div>
+                  </div>
+                  <div class="pf-field">
+                    <label>Draft</label>
+                    <div class="pf-toggle"></div>
+                  </div>
+                </div>
+
+                {% comment %} Live preview: desktop website wireframe {% endcomment %}
+                <div class="pf-preview" data-callout-target="3">
+                  <div class="pf-browser">
+                    <div class="pf-browser-bar">
+                      <span class="pf-browser-dot"></span>
+                      <span class="pf-browser-dot"></span>
+                      <span class="pf-browser-dot"></span>
+                      <div class="pf-browser-url"></div>
+                    </div>
+                    <div class="pf-browser-page">
+                      <div class="pf-wire-nav">
+                        <div class="pf-wire-logo"></div>
+                        <div class="pf-wire-navlinks">
+                          <span></span>
+                          <span></span>
+                          <span></span>
+                        </div>
+                      </div>
+                      <div class="pf-wire-hero">
+                        <div class="pf-wire-hero-copy">
+                          <div class="pf-wire-line pf-wire-line--title"></div>
+                          <div class="pf-wire-line"></div>
+                          <div class="pf-wire-line pf-wire-line--short"></div>
+                          <div class="pf-wire-btn"></div>
+                        </div>
+                        <div class="pf-wire-hero-art"></div>
+                      </div>
+                      <div class="pf-wire-cards">
+                        <div class="pf-wire-card"></div>
+                        <div class="pf-wire-card"></div>
+                        <div class="pf-wire-card"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="1"
+              style="--i:1;"
+              aria-describedby="c1-1"
+            >
+              1
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="2"
+              style="--i:2;"
+              aria-describedby="c1-2"
+            >
+              2
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="3"
+              style="--i:3;"
+              aria-describedby="c1-3"
+            >
+              3
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="4"
+              style="--i:4;"
+              aria-describedby="c1-4"
+            >
+              4
+            </button>
+          </div>
+
+          <ol class="callout-legend">
+            <li
+              class="callout-item"
+              data-callout="1"
+              id="c1-1"
+              style="--i:1;"
+            >
+              <b>1</b>
+              Switch between editing content and task mode.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="2"
+              id="c1-2"
+              style="--i:2;"
+            >
+              <b>2</b>
+              Make quick edits in the editor panel.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="3"
+              id="c1-3"
+              style="--i:3;"
+            >
+              <b>3</b>
+              Your live site, previewed right as you edit.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="4"
+              id="c1-4"
+              style="--i:4;"
+            >
+              <b>4</b>
+              Preview your site on mobile any time.
+            </li>
+          </ol>
+        {% elsif section.key == "prompt" %}
+          <div class="product-frame product-frame--prompt">
+            <div class="product-frame-glow" aria-hidden="true"></div>
+
+            {% comment %} Glowing AI prompt card {% endcomment %}
+            <div class="pf-prompt-card pf-glass">
+              <div class="pf-prompt-textarea" data-callout-target="1">
+                Describe what type of site you'd like to create&hellip;
+              </div>
+              <div class="pf-prompt-row">
+                <div class="pf-attach-row" data-callout-target="2">
+                  <span class="pf-chip"> <i class="pf-chip-icon" aria-hidden="true"></i>Photos</span>
+                  <span class="pf-chip"> <i class="pf-chip-icon" aria-hidden="true"></i>Video</span>
+                  <span class="pf-chip"> <i class="pf-chip-icon" aria-hidden="true"></i>Audio</span>
+                </div>
+                <button class="pf-cta pf-generate-btn" type="button">Generate</button>
+              </div>
+            </div>
+
+            {% comment %} 3-up generated template chooser {% endcomment %}
+            <div class="pf-chooser" data-callout-target="3">
+              <button
+                class="pf-paddle pf-paddle-prev"
+                type="button"
+                aria-label="Previous site"
+              >
+                &#8249;
+              </button>
+
+              <div class="pf-site-card">
+                <div class="pf-site-header"></div>
+                <div class="pf-site-block pf-site-block--wide"></div>
+                <div class="pf-site-block"></div>
+              </div>
+
+              <div class="pf-site-card pf-site-card--active">
+                <div class="pf-site-header"></div>
+                <div class="pf-site-block pf-site-block--wide"></div>
+                <div class="pf-site-block"></div>
+                <button class="pf-cta pf-golive-btn" type="button">Go Live</button>
+              </div>
+
+              <div class="pf-site-card">
+                <div class="pf-site-header"></div>
+                <div class="pf-site-block pf-site-block--wide"></div>
+                <div class="pf-site-block"></div>
+              </div>
+
+              <button
+                class="pf-paddle pf-paddle-next"
+                type="button"
+                aria-label="Next site"
+              >
+                &#8250;
+              </button>
+            </div>
+
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="1"
+              style="--i:1;"
+              aria-describedby="c2-1"
+            >
+              1
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="2"
+              style="--i:2;"
+              aria-describedby="c2-2"
+            >
+              2
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="3"
+              style="--i:3;"
+              aria-describedby="c2-3"
+            >
+              3
+            </button>
+          </div>
+
+          <ol class="callout-legend">
+            <li
+              class="callout-item"
+              data-callout="1"
+              id="c2-1"
+              style="--i:1;"
+            >
+              <b>1</b>
+              Describe your site in plain language.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="2"
+              id="c2-2"
+              style="--i:2;"
+            >
+              <b>2</b>
+              Attach photos, video, or audio you already have.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="3"
+              id="c2-3"
+              style="--i:3;"
+            >
+              <b>3</b>
+              Pick from several complete, real sites and go live.
+            </li>
+          </ol>
+        {% elsif section.key == "media" %}
+          <div class="product-frame product-frame--media">
+            <div class="product-frame-glow" aria-hidden="true"></div>
+
+            {% comment %} Image field editor: dropzone + upload progress + conversion/CDN badges {% endcomment %}
+            <div class="pf-media-card pf-glass">
+              <div class="pf-dropzone" data-callout-target="1">
+                <div class="pf-thumb" aria-hidden="true"></div>
+                <div class="pf-dropzone-text">
+                  <span class="pf-dropzone-title">Drop image to upload</span>
+                  <span class="pf-dropzone-sub">or click to browse</span>
+                </div>
+              </div>
+
+              <div class="pf-upload-progress" data-callout-target="2">
+                <div class="pf-progress-track">
+                  <div class="pf-progress-fill" style="width: 67%;"></div>
+                </div>
+                <div class="pf-progress-label">Uploading&hellip; 67%</div>
+              </div>
+
+              <div class="pf-media-badges">
+                <span class="pf-badge">HEIC &rarr; PNG, auto</span>
+                <span class="pf-badge pf-badge--cdn" data-callout-target="3"
+                  >Served from CDN &middot; deduplicated</span
+                >
+              </div>
+            </div>
+
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="1"
+              style="--i:1;"
+              aria-describedby="c4-1"
+            >
+              1
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="2"
+              style="--i:2;"
+              aria-describedby="c4-2"
+            >
+              2
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="3"
+              style="--i:3;"
+              aria-describedby="c4-3"
+            >
+              3
+            </button>
+          </div>
+
+          <ol class="callout-legend">
+            <li
+              class="callout-item"
+              data-callout="1"
+              id="c4-1"
+              style="--i:1;"
+            >
+              <b>1</b>
+              Drag in a photo. That's the whole workflow.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="2"
+              id="c4-2"
+              style="--i:2;"
+            >
+              <b>2</b>
+              Phone formats like HEIC convert automatically.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="3"
+              id="c4-3"
+              style="--i:3;"
+            >
+              <b>3</b>
+              Served from a fast CDN, and never stored twice.
+            </li>
+          </ol>
+        {% elsif section.key == "settings" %}
+          <div class="product-frame product-frame--settings">
+            <div class="product-frame-glow" aria-hidden="true"></div>
+
+            {% comment %} Overview + DNS + recent deploys {% endcomment %}
+            <div class="pf-settings-card pf-glass">
+              <div class="pf-settings-overview">
+                <div class="pf-settings-row">
+                  <span class="pf-settings-site"> <i class="pf-dot ok" aria-hidden="true"></i>acme.com</span>
+                  <span class="pf-settings-live">Live</span>
+                </div>
+                <div class="pf-settings-row">
+                  <span class="pf-settings-label">Plan</span>
+                  <span class="pf-settings-value">Editor &middot; $15/mo</span>
+                </div>
+                <div class="pf-settings-row" data-callout-target="1">
+                  <span class="pf-settings-label">GitHub</span>
+                  <span class="pf-settings-value">acme-studio/acme-site</span>
+                </div>
+                <div class="pf-settings-row">
+                  <span class="pf-settings-label">Billing</span>
+                  <span class="pf-settings-value">&bull;&bull;&bull;&bull; 4242</span>
+                </div>
+              </div>
+
+              <div class="pf-deploys" data-callout-target="2">
+                <div class="pf-deploys-title">Recent deploys</div>
+                <div class="pf-deploy-row">
+                  <span class="pf-deploy-date">Jul 6</span>
+                  <span class="pf-deploy-msg">Update homepage copy</span>
+                  <i class="pf-dot ok" aria-hidden="true"></i>
+                </div>
+                <div class="pf-deploy-row">
+                  <span class="pf-deploy-date">Jul 4</span>
+                  <span class="pf-deploy-msg">Add new gallery images</span>
+                  <i class="pf-dot ok" aria-hidden="true"></i>
+                </div>
+                <div class="pf-deploy-row">
+                  <span class="pf-deploy-date">Jul 1</span>
+                  <span class="pf-deploy-msg">Fix contact form styling</span>
+                  <i class="pf-dot ok" aria-hidden="true"></i>
+                </div>
+              </div>
+
+              <div class="pf-dns" data-callout-target="3">
+                <div class="pf-dns-title">DNS records</div>
+                <div class="pf-dns-row">
+                  <span class="pf-dns-type">A</span>
+                  <span class="pf-dns-host">@</span>
+                  <span class="pf-dns-value">76.76.21.21</span>
+                </div>
+                <div class="pf-dns-row">
+                  <span class="pf-dns-type">CNAME</span>
+                  <span class="pf-dns-host">www</span>
+                  <span class="pf-dns-value">cname.archival.dev</span>
+                </div>
+                <div class="pf-dns-row">
+                  <span class="pf-dns-type">TXT</span>
+                  <span class="pf-dns-host">@</span>
+                  <span class="pf-dns-value">v=spf1 include:_spf&hellip;</span>
+                </div>
+              </div>
+            </div>
+
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="1"
+              style="--i:1;"
+              aria-describedby="c5-1"
+            >
+              1
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="2"
+              style="--i:2;"
+              aria-describedby="c5-2"
+            >
+              2
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="3"
+              style="--i:3;"
+              aria-describedby="c5-3"
+            >
+              3
+            </button>
+          </div>
+
+          <ol class="callout-legend">
+            <li
+              class="callout-item"
+              data-callout="1"
+              id="c5-1"
+              style="--i:1;"
+            >
+              <b>1</b>
+              Backed by a real repository you control.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="2"
+              id="c5-2"
+              style="--i:2;"
+            >
+              <b>2</b>
+              A timestamped deployment history.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="3"
+              id="c5-3"
+              style="--i:3;"
+            >
+              <b>3</b>
+              Full DNS configurability.
+            </li>
+          </ol>
+        {% elsif section.key == "history" %}
+          <div class="product-frame product-frame--history">
+            <div class="product-frame-glow" aria-hidden="true"></div>
+
+            {% comment %} Slide-in History panel: uncommitted changes + published commits {% endcomment %}
+            <div class="pf-history-panel pf-glass">
+              <div class="pf-history-header">
+                <span class="pf-history-title">History</span>
+              </div>
+
+              <div class="pf-history-group" data-callout-target="1">
+                <div class="pf-history-group-label">Upcoming changes</div>
+                <div class="pf-change-row">
+                  <i class="pf-dot warn" aria-hidden="true"></i>
+                  <span class="pf-change-desc">Edited: Home &rsaquo; Hero title</span>
+                </div>
+                <div class="pf-change-row">
+                  <i class="pf-dot warn" aria-hidden="true"></i>
+                  <span class="pf-change-desc">Added: Post &rsaquo; Summer sale</span>
+                </div>
+              </div>
+
+              <div class="pf-history-group">
+                <div class="pf-history-group-label">Published</div>
+                <div class="pf-commit-row">
+                  <i class="pf-dot ok" aria-hidden="true"></i>
+                  <span class="pf-commit-date">Jul 5</span>
+                  <span class="pf-commit-msg">Publish spring collection</span>
+                  <button class="pf-revert-btn" type="button">Revert</button>
+                </div>
+                <div class="pf-commit-row" data-callout-target="2">
+                  <i class="pf-dot ok" aria-hidden="true"></i>
+                  <span class="pf-commit-date">Jul 2</span>
+                  <span class="pf-commit-msg">Rewrite about page</span>
+                  <button class="pf-revert-btn" type="button">Revert</button>
+                </div>
+                <div class="pf-commit-row">
+                  <i class="pf-dot ok" aria-hidden="true"></i>
+                  <span class="pf-commit-date">Jun 28</span>
+                  <span class="pf-commit-msg">Update team photos</span>
+                  <button
+                    class="pf-revert-btn"
+                    type="button"
+                    data-callout-target="3"
+                  >
+                    Revert
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="1"
+              style="--i:1;"
+              aria-describedby="c6-1"
+            >
+              1
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="2"
+              style="--i:2;"
+              aria-describedby="c6-2"
+            >
+              2
+            </button>
+            <button
+              type="button"
+              class="callout-marker"
+              data-callout="3"
+              style="--i:3;"
+              aria-describedby="c6-3"
+            >
+              3
+            </button>
+          </div>
+
+          <ol class="callout-legend">
+            <li
+              class="callout-item"
+              data-callout="1"
+              id="c6-1"
+              style="--i:1;"
+            >
+              <b>1</b>
+              See exactly what's changed before it goes live.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="2"
+              id="c6-2"
+              style="--i:2;"
+            >
+              <b>2</b>
+              Every publish is a point you can return to.
+            </li>
+            <li
+              class="callout-item"
+              data-callout="3"
+              id="c6-3"
+              style="--i:3;"
+            >
+              <b>3</b>
+              Roll back any change instantly.
+            </li>
+          </ol>
+        {% else %}
+          {% comment %} FRAME {{ n }}: bespoke editor UI added by its task {% endcomment %}
+        {% endif %}
+      </div>
+    </section>
+  {% endfor %}
+</div>
+
 {% comment %} Benefit Sections {% endcomment %}
 
-<div class="benefit-grid md:max-w-[1200px] md:mt-40 md:mb-40 mt-20 mb-20">
+<div class="benefit-grid benefit-grid--compact">
   {% for section in home.sections %}
-    <div class="benefit" data-tilt>
+    <div class="benefit" data-glow>
       <h2 class="section-title">{{ section.title }}</h2>
       <div class="section-content">
         {{ section.content }}
@@ -93,98 +725,281 @@
   {% endfor %}
 </div>
 
+{% comment %} Manifesto CTA {% endcomment %}
+
+<div class="md:max-w-[1200px] w-full mb-40">
+  <a href="/manifesto.html" class="manifesto-cta" data-umami-event="cta-read-manifesto"> Read the Manifesto </a>
+</div>
+
+{% comment %} Contact Section {% endcomment %}
+
+{% include "connect" %}
+
 <script>
   (function () {
-    // Card tilt effect
-    const cards = document.querySelectorAll('[data-tilt]');
-    const maxTilt = 8;
-    const perspective = 1000;
-    const transitionDuration = 150;
+    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-    cards.forEach((card) => {
-      let bounds;
-      let isHovering = false;
-
-      function handleMouseEnter() {
-        bounds = card.getBoundingClientRect();
-        isHovering = true;
-        card.style.transition = 'none';
+    // Uniformly scale each product frame to fit its column. The frame is laid out
+    // at a fixed design width (--pf-dw), so its internal layout never reflows; zoom
+    // scales the whole thing — content and the %-pinned callout markers alike —
+    // keeping every marker aligned to its target at any window size.
+    var rootFontPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    var frames = [];
+    document.querySelectorAll('.product-frame-wrap').forEach(function (wrap) {
+      var frame = wrap.querySelector('.product-frame');
+      if (!frame) return;
+      var dwRaw = getComputedStyle(frame).getPropertyValue('--pf-dw').trim();
+      var dw = dwRaw.indexOf('rem') > -1 ? parseFloat(dwRaw) * rootFontPx : parseFloat(dwRaw);
+      if (dw) {
+        frames.push({ wrap: wrap, frame: frame, dw: dw });
       }
+    });
+    function fit() {
+      frames.forEach(function (f) {
+        var cw = f.wrap.clientWidth;
+        if (!cw) return;
+        // Never scale past the design size; only shrink to fit narrower columns.
+        f.frame.style.zoom = Math.min(1, cw / f.dw);
+      });
+    }
+    fit();
+    if ('ResizeObserver' in window) {
+      var ro = new ResizeObserver(fit);
+      frames.forEach(function (f) {
+        ro.observe(f.wrap);
+      });
+    } else {
+      window.addEventListener('resize', fit);
+    }
 
-      function handleMouseMove(e) {
-        if (!isHovering) return;
+    // Reveal product sections on scroll
+    var sections = document.querySelectorAll('[data-product-section]');
+    if (reduce) {
+      sections.forEach(function (s) {
+        s.classList.add('is-visible');
+      });
+    } else if ('IntersectionObserver' in window) {
+      var io = new IntersectionObserver(
+        function (entries) {
+          entries.forEach(function (e) {
+            if (e.isIntersecting) {
+              e.target.classList.add('is-visible');
+              io.unobserve(e.target);
+            }
+          });
+        },
+        { threshold: 0.25 },
+      );
+      sections.forEach(function (s) {
+        io.observe(s);
+      });
+    } else {
+      sections.forEach(function (s) {
+        s.classList.add('is-visible');
+      });
+    }
+
+    // Cross-highlight callouts: marker <-> line <-> legend <-> target
+    sections.forEach(function (section) {
+      var frame = section.querySelector('.product-frame');
+      function setActive(n, on) {
+        section
+          .querySelectorAll('[data-callout="' + n + '"], [data-callout-target="' + n + '"]')
+          .forEach(function (el) {
+            el.classList.toggle('callout-active', on);
+          });
+        if (frame) {
+          frame.classList.toggle('is-focusing', on);
+        }
+      }
+      section.querySelectorAll('[data-callout]').forEach(function (trigger) {
+        var n = trigger.getAttribute('data-callout');
+        trigger.addEventListener('mouseenter', function () {
+          setActive(n, true);
+        });
+        trigger.addEventListener('mouseleave', function () {
+          setActive(n, false);
+        });
+        trigger.addEventListener('focus', function () {
+          setActive(n, true);
+        });
+        trigger.addEventListener('blur', function () {
+          setActive(n, false);
+        });
+      });
+    });
 
-        const mouseX = e.clientX - bounds.left;
-        const mouseY = e.clientY - bounds.top;
-        const centerX = bounds.width / 2;
-        const centerY = bounds.height / 2;
+    // Scroll-spy the nav's Product item: lit while the tour is the thing you're
+    // looking at, dark otherwise. The rootMargin collapses the viewport to a thin
+    // band at its middle, so the state flips as the tour crosses the centre line
+    // rather than the moment its first pixel appears.
+    var navProduct = document.querySelectorAll('[data-nav-product]');
+    var tour = document.getElementById('product');
+    if (navProduct.length && tour && 'IntersectionObserver' in window) {
+      new IntersectionObserver(
+        function (entries) {
+          entries.forEach(function (e) {
+            navProduct.forEach(function (item) {
+              item.classList.toggle('nav-active', e.isIntersecting);
+            });
+          });
+        },
+        { rootMargin: '-45% 0px -45% 0px' },
+      ).observe(tour);
+    }
 
-        const rotateX = ((mouseY - centerY) / centerY) * -maxTilt;
-        const rotateY = ((mouseX - centerX) / centerX) * maxTilt;
+    // In-page nav: the tour anchor and the logo both move within this document
+    // rather than loading one. Without taking these over, "/#product" and "/" are
+    // each a *different* document from "/index.html", so the browser reloads the
+    // whole page and only then lands — which reads as a stall followed by a snap.
+    var navOffset = tour ? parseFloat(getComputedStyle(tour).scrollMarginTop) || 0 : 0;
+    var mobileMenu = document.getElementById('mobile-menu');
+    var menuClose = document.getElementById('menu-open');
 
-        const percentX = (mouseX / bounds.width) * 100;
-        const percentY = (mouseY / bounds.height) * 100;
-        card.style.setProperty('--mouse-x', percentX + '%');
-        card.style.setProperty('--mouse-y', percentY + '%');
+    // Leave modified clicks alone so open-in-new-tab still works.
+    function plainClick(e) {
+      return !(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0);
+    }
 
-        card.style.transform = `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
+    // The mobile menu only dismisses via its own X or the backdrop, so a
+    // same-document move would otherwise scroll the page behind an open menu.
+    function closeMobileMenu() {
+      if (mobileMenu && menuClose && !mobileMenu.classList.contains('hidden')) {
+        menuClose.click();
       }
+    }
 
-      function handleMouseLeave() {
-        isHovering = false;
-        card.style.transition = `transform ${transitionDuration}ms ease-out`;
-        card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
-        card.style.setProperty('--mouse-x', '50%');
-        card.style.setProperty('--mouse-y', '50%');
+    // Duration is capped so a long page doesn't mean a long wait; reduced motion
+    // gets the destination with no travel.
+    function scrollToY(targetY) {
+      var startY = window.scrollY;
+      var dy = targetY - startY;
+      if (reduce || !dy) {
+        window.scrollTo(0, targetY);
+        return;
       }
+      var dur = Math.min(600, Math.max(280, Math.abs(dy) * 0.25));
+      var t0 = null;
+      requestAnimationFrame(function step(ts) {
+        if (t0 === null) t0 = ts;
+        var p = Math.min(1, (ts - t0) / dur);
+        var eased = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
+        window.scrollTo(0, startY + dy * eased);
+        if (p < 1) requestAnimationFrame(step);
+      });
+    }
 
-      card.addEventListener('mouseenter', handleMouseEnter);
-      card.addEventListener('mousemove', handleMouseMove);
-      card.addEventListener('mouseleave', handleMouseLeave);
-    });
-
-    // Hero title tilt effect (more subtle, tracks mouse across viewport)
-    const heroes = document.querySelectorAll('[data-tilt-hero]');
-    const heroMaxTilt = 12;
-    const heroPerspective = 1200;
+    function takeOver(links, getTargetY, url) {
+      links.forEach(function (link) {
+        // umami (public/umami.js) installs a capture-phase listener on document:
+        // for any <a data-umami-event> it calls preventDefault itself, awaits its
+        // tracking request, then assigns location.href — a script-initiated
+        // navigation ours cannot cancel, and the reason clicking these used to
+        // stall and then snap. Take the attribute off and report the event here,
+        // so the analytics still land and the navigation stays ours. Anything
+        // still carrying the attribute (every other page) is untouched.
+        var event = link.getAttribute('data-umami-event');
+        if (event) link.removeAttribute('data-umami-event');
 
-    heroes.forEach((hero) => {
-      function handleMouseMove(e) {
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
+        link.addEventListener('click', function (e) {
+          if (!plainClick(e)) return;
+          e.preventDefault();
+          if (event && typeof umami !== 'undefined') umami.track(event);
+          closeMobileMenu();
+          history.replaceState(null, '', url);
+          scrollToY(getTargetY());
+        });
+      });
+    }
 
-        const rotateX = ((e.clientY - centerY) / centerY) * -heroMaxTilt;
-        const rotateY = ((e.clientX - centerX) / centerX) * heroMaxTilt;
+    var tourLinks = document.querySelectorAll('a[href="#product"], a[href="/#product"]');
+    if (tour && tourLinks.length) {
+      takeOver(
+        tourLinks,
+        function () {
+          return Math.round(tour.getBoundingClientRect().top + window.scrollY - navOffset);
+        },
+        '#product',
+      );
+    }
 
-        // Update color gradient position
-        const percentX = (e.clientX / window.innerWidth) * 100;
-        const percentY = (e.clientY / window.innerHeight) * 100;
-        hero.style.setProperty('--hero-mouse-x', percentX + '%');
-        hero.style.setProperty('--hero-mouse-y', percentY + '%');
+    // The logo already means "home" — on the homepage that's the top of this page.
+    // Dropping the hash keeps the URL honest about where the reader ended up.
+    takeOver(
+      document.querySelectorAll('#logo a'),
+      function () {
+        return 0;
+      },
+      location.pathname + location.search,
+    );
 
-        hero.style.transform = `perspective(${heroPerspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-      }
+    if (reduce) return;
 
-      function handleMouseLeave() {
-        hero.style.transition = 'transform 0.5s ease-out';
-        hero.style.transform = 'perspective(1200px) rotateX(0deg) rotateY(0deg)';
-        setTimeout(() => {
-          hero.style.transition = 'none';
-        }, 500);
-      }
+    // Benefit cards track the pointer to place their hover glow, but do not tilt:
+    // at a quarter of their former size the tilt read as jitter, and the row's job
+    // this late in the page is to sit still.
+    document.querySelectorAll('[data-glow]').forEach(function (card) {
+      var bounds;
+      card.addEventListener('mouseenter', function () {
+        bounds = card.getBoundingClientRect();
+      });
+      card.addEventListener('mousemove', function (e) {
+        if (!bounds) return;
+        card.style.setProperty('--mouse-x', ((e.clientX - bounds.left) / bounds.width) * 100 + '%');
+        card.style.setProperty('--mouse-y', ((e.clientY - bounds.top) / bounds.height) * 100 + '%');
+      });
+      card.addEventListener('mouseleave', function () {
+        card.style.setProperty('--mouse-x', '50%');
+        card.style.setProperty('--mouse-y', '50%');
+      });
+    });
 
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseleave', handleMouseLeave);
+    // 3D tilt on product frames
+    document.querySelectorAll('.product-frame-wrap[data-tilt]').forEach(function (card) {
+      var frame = card.querySelector('.product-frame');
+      if (!frame) return;
+      var maxTilt = 6,
+        bounds;
+      card.addEventListener('mouseenter', function () {
+        bounds = frame.getBoundingClientRect();
+        frame.style.transition = 'none';
+      });
+      card.addEventListener('mousemove', function (e) {
+        if (!bounds) return;
+        var mx = e.clientX - bounds.left,
+          my = e.clientY - bounds.top;
+        var rx = ((my - bounds.height / 2) / (bounds.height / 2)) * -maxTilt;
+        var ry = ((mx - bounds.width / 2) / (bounds.width / 2)) * maxTilt;
+        frame.style.transform = 'perspective(1200px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)';
+      });
+      card.addEventListener('mouseleave', function () {
+        frame.style.transition = 'transform 0.4s ease-out';
+        frame.style.transform = 'perspective(1200px) rotateX(0) rotateY(0)';
+      });
     });
+
+    // Hero tilt, bound once. Both source pages registered their own mousemove
+    // handler for [data-tilt-hero]; merged naively that was two handlers writing
+    // conflicting transforms to the same element.
+    var heroMaxTilt = 12,
+      heroPerspective = 1200;
+    var heroes = document.querySelectorAll('[data-tilt-hero]');
+    if (heroes.length) {
+      document.addEventListener('mousemove', function (e) {
+        var rx = ((e.clientY - window.innerHeight / 2) / (window.innerHeight / 2)) * -heroMaxTilt;
+        var ry = ((e.clientX - window.innerWidth / 2) / (window.innerWidth / 2)) * heroMaxTilt;
+        heroes.forEach(function (hero) {
+          hero.style.setProperty('--hero-mouse-x', (e.clientX / window.innerWidth) * 100 + '%');
+          hero.style.setProperty('--hero-mouse-y', (e.clientY / window.innerHeight) * 100 + '%');
+          hero.style.transform = 'perspective(' + heroPerspective + 'px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)';
+        });
+      });
+      document.addEventListener('mouseleave', function () {
+        heroes.forEach(function (hero) {
+          hero.style.transition = 'transform 0.5s ease-out';
+          hero.style.transform = 'perspective(1200px) rotateX(0deg) rotateY(0deg)';
+        });
+      });
+    }
   })();
 </script>
-
-{% comment %} Manifesto CTA {% endcomment %}
-
-<div class="md:max-w-[1200px] md:w-[1200px] w-full mb-40">
-  <a href="/manifesto.html" class="manifesto-cta" data-umami-event="cta-read-manifesto"> Read the Manifesto </a>
-</div>
-
-{% comment %} Contact Section {% endcomment %}
-
-{% include "connect" %}
diff --git a/pages/product.liquid b/pages/product.liquid
deleted file mode 100644
index 4747c76..0000000
--- a/pages/product.liquid
+++ /dev/null
@@ -1,781 +0,0 @@
-{%
-  layout 'theme' title: objects.product.title
-  , description: objects.product.description
-  , path: "product"
-  , area: "product"
-%}
-{% assign product = objects.product %}
-
-<div class="product-page w-full flex flex-col items-center">
-  <header class="product-hero w-full max-w-[1200px] px-8 pt-60 pb-20 text-center">
-    <h1 class="hero-message" data-tilt-hero>
-      <span class="hero-line-1">an editor for</span>
-      <span class="hero-line-2">everyone</span>
-    </h1>
-  </header>
-
-  {% comment %} Feature sections, each filled by an implementation task {% endcomment %}
-  {% for section in product.sections %}
-    {% assign n = forloop.index %}
-    {% comment %} The closing CTA (last section) is rendered separately below. {% endcomment %}
-    {% unless forloop.last %}
-      <section
-        class="product-section {% cycle 'frame-right', 'frame-left' %}"
-        data-product-section
-        data-section="{{ n }}"
-      >
-        <div class="product-copy">
-          <h2 class="section-title">{{ section.title }}</h2>
-          <div class="section-content">{{ section.content }}</div>
-        </div>
-        <div class="product-frame-wrap" data-tilt>
-          {% if section.key == "editor" %}
-            <div class="product-frame product-frame--shell">
-              <div class="product-frame-glow" aria-hidden="true"></div>
-
-              <div class="pf-window">
-                {% comment %} Top chrome bar {% endcomment %}
-                <div class="pf-chrome" data-callout-target="1">
-                  <span class="pf-chrome-btn">History</span>
-                  <div class="pf-mode-toggle">
-                    <span class="on">Content</span>
-                    <span>Task</span>
-                  </div>
-                  <div class="pf-chrome-right">
-                    <span class="pf-chrome-btn" data-callout-target="4">Mobile</span>
-                    <span class="pf-chrome-btn">View Live</span>
-                    <span class="pf-status">
-                      <i class="pf-dot ok"></i>
-                    </span>
-                  </div>
-                </div>
-
-                <div class="pf-body">
-                  {% comment %} Site sections sidebar {% endcomment %}
-                  <div class="pf-sidebar">
-                    <div class="pf-sidebar-item active">Site</div>
-                    <div class="pf-sidebar-item">Gallery</div>
-                    <div class="pf-sidebar-item">About</div>
-                    <div class="pf-sidebar-item">Contact</div>
-                  </div>
-
-                  {% comment %} Glass editing panel {% endcomment %}
-                  <div class="pf-panel pf-glass" data-callout-target="2">
-                    <div class="pf-field">
-                      <label>Title</label>
-                      <div class="pf-input">Hello, world</div>
-                    </div>
-                    <div class="pf-field">
-                      <label>Published</label>
-                      <div class="pf-input">Jul 6, 2026</div>
-                    </div>
-                    <div class="pf-field">
-                      <label>Draft</label>
-                      <div class="pf-toggle"></div>
-                    </div>
-                  </div>
-
-                  {% comment %} Live preview: desktop website wireframe {% endcomment %}
-                  <div class="pf-preview" data-callout-target="3">
-                    <div class="pf-browser">
-                      <div class="pf-browser-bar">
-                        <span class="pf-browser-dot"></span>
-                        <span class="pf-browser-dot"></span>
-                        <span class="pf-browser-dot"></span>
-                        <div class="pf-browser-url"></div>
-                      </div>
-                      <div class="pf-browser-page">
-                        <div class="pf-wire-nav">
-                          <div class="pf-wire-logo"></div>
-                          <div class="pf-wire-navlinks">
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                          </div>
-                        </div>
-                        <div class="pf-wire-hero">
-                          <div class="pf-wire-hero-copy">
-                            <div class="pf-wire-line pf-wire-line--title"></div>
-                            <div class="pf-wire-line"></div>
-                            <div class="pf-wire-line pf-wire-line--short"></div>
-                            <div class="pf-wire-btn"></div>
-                          </div>
-                          <div class="pf-wire-hero-art"></div>
-                        </div>
-                        <div class="pf-wire-cards">
-                          <div class="pf-wire-card"></div>
-                          <div class="pf-wire-card"></div>
-                          <div class="pf-wire-card"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="1"
-                style="--i:1;"
-                aria-describedby="c1-1"
-              >
-                1
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="2"
-                style="--i:2;"
-                aria-describedby="c1-2"
-              >
-                2
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="3"
-                style="--i:3;"
-                aria-describedby="c1-3"
-              >
-                3
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="4"
-                style="--i:4;"
-                aria-describedby="c1-4"
-              >
-                4
-              </button>
-            </div>
-
-            <ol class="callout-legend">
-              <li
-                class="callout-item"
-                data-callout="1"
-                id="c1-1"
-                style="--i:1;"
-              >
-                <b>1</b>
-                Switch between editing content and task mode.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="2"
-                id="c1-2"
-                style="--i:2;"
-              >
-                <b>2</b>
-                Make quick edits in the editor panel.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="3"
-                id="c1-3"
-                style="--i:3;"
-              >
-                <b>3</b>
-                Your live site, previewed right as you edit.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="4"
-                id="c1-4"
-                style="--i:4;"
-              >
-                <b>4</b>
-                Preview your site on mobile any time.
-              </li>
-            </ol>
-          {% elsif section.key == "prompt" %}
-            <div class="product-frame product-frame--prompt">
-              <div class="product-frame-glow" aria-hidden="true"></div>
-
-              {% comment %} Glowing AI prompt card {% endcomment %}
-              <div class="pf-prompt-card pf-glass">
-                <div class="pf-prompt-textarea" data-callout-target="1">
-                  Describe what type of site you'd like to create&hellip;
-                </div>
-                <div class="pf-prompt-row">
-                  <div class="pf-attach-row" data-callout-target="2">
-                    <span class="pf-chip"> <i class="pf-chip-icon" aria-hidden="true"></i>Photos</span>
-                    <span class="pf-chip"> <i class="pf-chip-icon" aria-hidden="true"></i>Video</span>
-                    <span class="pf-chip"> <i class="pf-chip-icon" aria-hidden="true"></i>Audio</span>
-                  </div>
-                  <button class="pf-cta pf-generate-btn" type="button">Generate</button>
-                </div>
-              </div>
-
-              {% comment %} 3-up generated template chooser {% endcomment %}
-              <div class="pf-chooser" data-callout-target="3">
-                <button
-                  class="pf-paddle pf-paddle-prev"
-                  type="button"
-                  aria-label="Previous site"
-                >
-                  &#8249;
-                </button>
-
-                <div class="pf-site-card">
-                  <div class="pf-site-header"></div>
-                  <div class="pf-site-block pf-site-block--wide"></div>
-                  <div class="pf-site-block"></div>
-                </div>
-
-                <div class="pf-site-card pf-site-card--active">
-                  <div class="pf-site-header"></div>
-                  <div class="pf-site-block pf-site-block--wide"></div>
-                  <div class="pf-site-block"></div>
-                  <button class="pf-cta pf-golive-btn" type="button">Go Live</button>
-                </div>
-
-                <div class="pf-site-card">
-                  <div class="pf-site-header"></div>
-                  <div class="pf-site-block pf-site-block--wide"></div>
-                  <div class="pf-site-block"></div>
-                </div>
-
-                <button
-                  class="pf-paddle pf-paddle-next"
-                  type="button"
-                  aria-label="Next site"
-                >
-                  &#8250;
-                </button>
-              </div>
-
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="1"
-                style="--i:1;"
-                aria-describedby="c2-1"
-              >
-                1
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="2"
-                style="--i:2;"
-                aria-describedby="c2-2"
-              >
-                2
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="3"
-                style="--i:3;"
-                aria-describedby="c2-3"
-              >
-                3
-              </button>
-            </div>
-
-            <ol class="callout-legend">
-              <li
-                class="callout-item"
-                data-callout="1"
-                id="c2-1"
-                style="--i:1;"
-              >
-                <b>1</b>
-                Describe your site in plain language.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="2"
-                id="c2-2"
-                style="--i:2;"
-              >
-                <b>2</b>
-                Attach photos, video, or audio you already have.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="3"
-                id="c2-3"
-                style="--i:3;"
-              >
-                <b>3</b>
-                Pick from several complete, real sites and go live.
-              </li>
-            </ol>
-          {% elsif section.key == "media" %}
-            <div class="product-frame product-frame--media">
-              <div class="product-frame-glow" aria-hidden="true"></div>
-
-              {% comment %} Image field editor: dropzone + upload progress + conversion/CDN badges {% endcomment %}
-              <div class="pf-media-card pf-glass">
-                <div class="pf-dropzone" data-callout-target="1">
-                  <div class="pf-thumb" aria-hidden="true"></div>
-                  <div class="pf-dropzone-text">
-                    <span class="pf-dropzone-title">Drop image to upload</span>
-                    <span class="pf-dropzone-sub">or click to browse</span>
-                  </div>
-                </div>
-
-                <div class="pf-upload-progress" data-callout-target="2">
-                  <div class="pf-progress-track">
-                    <div class="pf-progress-fill" style="width: 67%;"></div>
-                  </div>
-                  <div class="pf-progress-label">Uploading&hellip; 67%</div>
-                </div>
-
-                <div class="pf-media-badges">
-                  <span class="pf-badge">HEIC &rarr; PNG, auto</span>
-                  <span class="pf-badge pf-badge--cdn" data-callout-target="3"
-                    >Served from CDN &middot; deduplicated</span
-                  >
-                </div>
-              </div>
-
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="1"
-                style="--i:1;"
-                aria-describedby="c4-1"
-              >
-                1
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="2"
-                style="--i:2;"
-                aria-describedby="c4-2"
-              >
-                2
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="3"
-                style="--i:3;"
-                aria-describedby="c4-3"
-              >
-                3
-              </button>
-            </div>
-
-            <ol class="callout-legend">
-              <li
-                class="callout-item"
-                data-callout="1"
-                id="c4-1"
-                style="--i:1;"
-              >
-                <b>1</b>
-                Drag in a photo. That's the whole workflow.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="2"
-                id="c4-2"
-                style="--i:2;"
-              >
-                <b>2</b>
-                Phone formats like HEIC convert automatically.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="3"
-                id="c4-3"
-                style="--i:3;"
-              >
-                <b>3</b>
-                Served from a fast CDN, and never stored twice.
-              </li>
-            </ol>
-          {% elsif section.key == "settings" %}
-            <div class="product-frame product-frame--settings">
-              <div class="product-frame-glow" aria-hidden="true"></div>
-
-              {% comment %} Overview + DNS + recent deploys {% endcomment %}
-              <div class="pf-settings-card pf-glass">
-                <div class="pf-settings-overview">
-                  <div class="pf-settings-row">
-                    <span class="pf-settings-site"> <i class="pf-dot ok" aria-hidden="true"></i>acme.com</span>
-                    <span class="pf-settings-live">Live</span>
-                  </div>
-                  <div class="pf-settings-row">
-                    <span class="pf-settings-label">Plan</span>
-                    <span class="pf-settings-value">Editor &middot; $15/mo</span>
-                  </div>
-                  <div class="pf-settings-row" data-callout-target="1">
-                    <span class="pf-settings-label">GitHub</span>
-                    <span class="pf-settings-value">acme-studio/acme-site</span>
-                  </div>
-                  <div class="pf-settings-row">
-                    <span class="pf-settings-label">Billing</span>
-                    <span class="pf-settings-value">&bull;&bull;&bull;&bull; 4242</span>
-                  </div>
-                </div>
-
-                <div class="pf-deploys" data-callout-target="2">
-                  <div class="pf-deploys-title">Recent deploys</div>
-                  <div class="pf-deploy-row">
-                    <span class="pf-deploy-date">Jul 6</span>
-                    <span class="pf-deploy-msg">Update homepage copy</span>
-                    <i class="pf-dot ok" aria-hidden="true"></i>
-                  </div>
-                  <div class="pf-deploy-row">
-                    <span class="pf-deploy-date">Jul 4</span>
-                    <span class="pf-deploy-msg">Add new gallery images</span>
-                    <i class="pf-dot ok" aria-hidden="true"></i>
-                  </div>
-                  <div class="pf-deploy-row">
-                    <span class="pf-deploy-date">Jul 1</span>
-                    <span class="pf-deploy-msg">Fix contact form styling</span>
-                    <i class="pf-dot ok" aria-hidden="true"></i>
-                  </div>
-                </div>
-
-                <div class="pf-dns" data-callout-target="3">
-                  <div class="pf-dns-title">DNS records</div>
-                  <div class="pf-dns-row">
-                    <span class="pf-dns-type">A</span>
-                    <span class="pf-dns-host">@</span>
-                    <span class="pf-dns-value">76.76.21.21</span>
-                  </div>
-                  <div class="pf-dns-row">
-                    <span class="pf-dns-type">CNAME</span>
-                    <span class="pf-dns-host">www</span>
-                    <span class="pf-dns-value">cname.archival.dev</span>
-                  </div>
-                  <div class="pf-dns-row">
-                    <span class="pf-dns-type">TXT</span>
-                    <span class="pf-dns-host">@</span>
-                    <span class="pf-dns-value">v=spf1 include:_spf&hellip;</span>
-                  </div>
-                </div>
-              </div>
-
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="1"
-                style="--i:1;"
-                aria-describedby="c5-1"
-              >
-                1
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="2"
-                style="--i:2;"
-                aria-describedby="c5-2"
-              >
-                2
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="3"
-                style="--i:3;"
-                aria-describedby="c5-3"
-              >
-                3
-              </button>
-            </div>
-
-            <ol class="callout-legend">
-              <li
-                class="callout-item"
-                data-callout="1"
-                id="c5-1"
-                style="--i:1;"
-              >
-                <b>1</b>
-                Backed by a real repository you control.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="2"
-                id="c5-2"
-                style="--i:2;"
-              >
-                <b>2</b>
-                A timestamped deployment history.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="3"
-                id="c5-3"
-                style="--i:3;"
-              >
-                <b>3</b>
-                Full DNS configurability.
-              </li>
-            </ol>
-          {% elsif section.key == "history" %}
-            <div class="product-frame product-frame--history">
-              <div class="product-frame-glow" aria-hidden="true"></div>
-
-              {% comment %} Slide-in History panel: uncommitted changes + published commits {% endcomment %}
-              <div class="pf-history-panel pf-glass">
-                <div class="pf-history-header">
-                  <span class="pf-history-title">History</span>
-                </div>
-
-                <div class="pf-history-group" data-callout-target="1">
-                  <div class="pf-history-group-label">Upcoming changes</div>
-                  <div class="pf-change-row">
-                    <i class="pf-dot warn" aria-hidden="true"></i>
-                    <span class="pf-change-desc">Edited: Home &rsaquo; Hero title</span>
-                  </div>
-                  <div class="pf-change-row">
-                    <i class="pf-dot warn" aria-hidden="true"></i>
-                    <span class="pf-change-desc">Added: Post &rsaquo; Summer sale</span>
-                  </div>
-                </div>
-
-                <div class="pf-history-group">
-                  <div class="pf-history-group-label">Published</div>
-                  <div class="pf-commit-row">
-                    <i class="pf-dot ok" aria-hidden="true"></i>
-                    <span class="pf-commit-date">Jul 5</span>
-                    <span class="pf-commit-msg">Publish spring collection</span>
-                    <button class="pf-revert-btn" type="button">Revert</button>
-                  </div>
-                  <div class="pf-commit-row" data-callout-target="2">
-                    <i class="pf-dot ok" aria-hidden="true"></i>
-                    <span class="pf-commit-date">Jul 2</span>
-                    <span class="pf-commit-msg">Rewrite about page</span>
-                    <button class="pf-revert-btn" type="button">Revert</button>
-                  </div>
-                  <div class="pf-commit-row">
-                    <i class="pf-dot ok" aria-hidden="true"></i>
-                    <span class="pf-commit-date">Jun 28</span>
-                    <span class="pf-commit-msg">Update team photos</span>
-                    <button
-                      class="pf-revert-btn"
-                      type="button"
-                      data-callout-target="3"
-                    >
-                      Revert
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="1"
-                style="--i:1;"
-                aria-describedby="c6-1"
-              >
-                1
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="2"
-                style="--i:2;"
-                aria-describedby="c6-2"
-              >
-                2
-              </button>
-              <button
-                type="button"
-                class="callout-marker"
-                data-callout="3"
-                style="--i:3;"
-                aria-describedby="c6-3"
-              >
-                3
-              </button>
-            </div>
-
-            <ol class="callout-legend">
-              <li
-                class="callout-item"
-                data-callout="1"
-                id="c6-1"
-                style="--i:1;"
-              >
-                <b>1</b>
-                See exactly what's changed before it goes live.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="2"
-                id="c6-2"
-                style="--i:2;"
-              >
-                <b>2</b>
-                Every publish is a point you can return to.
-              </li>
-              <li
-                class="callout-item"
-                data-callout="3"
-                id="c6-3"
-                style="--i:3;"
-              >
-                <b>3</b>
-                Roll back any change instantly.
-              </li>
-            </ol>
-          {% else %}
-            {% comment %} FRAME {{ n }}: bespoke editor UI added by its task {% endcomment %}
-          {% endif %}
-        </div>
-      </section>
-    {% endunless %}
-  {% endfor %}
-
-  {% comment %} Closing CTA (reuses homepage prompt iframe pattern) {% endcomment %}
-  {% assign cta = product.sections | last %}
-  <section class="product-cta build-section">
-    <h2 class="build-heading">{{ cta.title }}</h2>
-    <div class="build-description">{{ cta.content }}</div>
-    <iframe id="generate-frame"></iframe>
-  </section>
-
-  <script>
-    (function () {
-      var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-      // Uniformly scale each frame to fit its column. The frame is laid out at a
-      // fixed design width (--pf-dw), so its internal layout never reflows; zoom
-      // scales the whole thing — content and the %-pinned callout markers alike —
-      // keeping every marker aligned to its target at any window size.
-      var rootFontPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
-      var frames = [];
-      document.querySelectorAll('.product-frame-wrap').forEach(function (wrap) {
-        var frame = wrap.querySelector('.product-frame');
-        if (!frame) return;
-        var dwRaw = getComputedStyle(frame).getPropertyValue('--pf-dw').trim();
-        var dw = dwRaw.indexOf('rem') > -1 ? parseFloat(dwRaw) * rootFontPx : parseFloat(dwRaw);
-        if (dw) {
-          frames.push({ wrap: wrap, frame: frame, dw: dw });
-        }
-      });
-      function fit() {
-        frames.forEach(function (f) {
-          var cw = f.wrap.clientWidth;
-          if (!cw) return;
-          // Never scale past the design size; only shrink to fit narrower columns.
-          f.frame.style.zoom = Math.min(1, cw / f.dw);
-        });
-      }
-      fit();
-      if ('ResizeObserver' in window) {
-        var ro = new ResizeObserver(fit);
-        frames.forEach(function (f) {
-          ro.observe(f.wrap);
-        });
-      } else {
-        window.addEventListener('resize', fit);
-      }
-
-      // Reveal sections on scroll
-      var sections = document.querySelectorAll('[data-product-section]');
-      if (reduce) {
-        sections.forEach(function (s) {
-          s.classList.add('is-visible');
-        });
-      } else if ('IntersectionObserver' in window) {
-        var io = new IntersectionObserver(
-          function (entries) {
-            entries.forEach(function (e) {
-              if (e.isIntersecting) {
-                e.target.classList.add('is-visible');
-                io.unobserve(e.target);
-              }
-            });
-          },
-          { threshold: 0.25 },
-        );
-        sections.forEach(function (s) {
-          io.observe(s);
-        });
-      } else {
-        sections.forEach(function (s) {
-          s.classList.add('is-visible');
-        });
-      }
-
-      // Cross-highlight callouts: marker <-> line <-> legend <-> target
-      sections.forEach(function (section) {
-        var frame = section.querySelector('.product-frame');
-        function setActive(n, on) {
-          section
-            .querySelectorAll('[data-callout="' + n + '"], [data-callout-target="' + n + '"]')
-            .forEach(function (el) {
-              el.classList.toggle('callout-active', on);
-            });
-          if (frame) {
-            frame.classList.toggle('is-focusing', on);
-          }
-        }
-        section.querySelectorAll('[data-callout]').forEach(function (trigger) {
-          var n = trigger.getAttribute('data-callout');
-          trigger.addEventListener('mouseenter', function () {
-            setActive(n, true);
-          });
-          trigger.addEventListener('mouseleave', function () {
-            setActive(n, false);
-          });
-          trigger.addEventListener('focus', function () {
-            setActive(n, true);
-          });
-          trigger.addEventListener('blur', function () {
-            setActive(n, false);
-          });
-        });
-      });
-
-      // 3D tilt on frames (adapted from the homepage tilt script)
-      if (!reduce) {
-        document.querySelectorAll('.product-frame-wrap[data-tilt]').forEach(function (card) {
-          var frame = card.querySelector('.product-frame');
-          if (!frame) return;
-          var maxTilt = 6,
-            bounds;
-          card.addEventListener('mouseenter', function () {
-            bounds = frame.getBoundingClientRect();
-            frame.style.transition = 'none';
-          });
-          card.addEventListener('mousemove', function (e) {
-            if (!bounds) return;
-            var mx = e.clientX - bounds.left,
-              my = e.clientY - bounds.top;
-            var rx = ((my - bounds.height / 2) / (bounds.height / 2)) * -maxTilt;
-            var ry = ((mx - bounds.width / 2) / (bounds.width / 2)) * maxTilt;
-            frame.style.transform = 'perspective(1200px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)';
-          });
-          card.addEventListener('mouseleave', function () {
-            frame.style.transition = 'transform 0.4s ease-out';
-            frame.style.transform = 'perspective(1200px) rotateX(0) rotateY(0)';
-          });
-        });
-
-        // Mouse-follow tilt on the hero (matches the homepage hero-tilt behavior)
-        document.querySelectorAll('[data-tilt-hero]').forEach(function (hero) {
-          var heroMaxTilt = 12,
-            heroPerspective = 1200;
-          document.addEventListener('mousemove', function (e) {
-            var rx = ((e.clientY - window.innerHeight / 2) / (window.innerHeight / 2)) * -heroMaxTilt;
-            var ry = ((e.clientX - window.innerWidth / 2) / (window.innerWidth / 2)) * heroMaxTilt;
-            hero.style.setProperty('--hero-mouse-x', (e.clientX / window.innerWidth) * 100 + '%');
-            hero.style.setProperty('--hero-mouse-y', (e.clientY / window.innerHeight) * 100 + '%');
-            hero.style.transform =
-              'perspective(' + heroPerspective + 'px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)';
-          });
-          document.addEventListener('mouseleave', function () {
-            hero.style.transition = 'transform 0.5s ease-out';
-            hero.style.transform = 'perspective(1200px) rotateX(0deg) rotateY(0deg)';
-          });
-        });
-      }
-    })();
-  </script>
-</div>
-{% include "connect" %}
diff --git a/pages/sitemap.xml.liquid b/pages/sitemap.xml.liquid
index 6b8dade..db1ebfe 100644
--- a/pages/sitemap.xml.liquid
+++ b/pages/sitemap.xml.liquid
@@ -4,10 +4,6 @@
     <loc>{{ site_url }}/</loc>
     <priority>1.0</priority>
   </url>
-  <url>
-    <loc>{{ site_url }}/product</loc>
-    <priority>0.9</priority>
-  </url>
   <url>
     <loc>{{ site_url }}/pricing</loc>
     <priority>0.9</priority>
diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..95aed5d
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1,4 @@
+# The product tour merged into the homepage. Keep both spellings of the old URL
+# alive so inbound links and the previous nav target land on the tour in place.
+/product.html    /#product    301
+/product         /#product    301
diff --git a/style/main.css b/style/main.css
index b0ce5f0..381cb69 100644
--- a/style/main.css
+++ b/style/main.css
@@ -1048,13 +1048,14 @@ h1.pricing-title {
   opacity: 1;
 }
 
-.manifesto-cta {
-  display: block;
+/* Outlined icon CTA: an icon, a label, a hairline box that brightens on hover.
+   Shared by the manifesto link and the Claude Code launcher. */
+.manifesto-cta,
+.build-alt-cta {
+  font-family: inherit;
   font-size: var(--typo-body-size);
   font-weight: var(--typo-body-weight);
   padding: 1rem 2rem;
-  padding-left: 4.5rem;
-  background: transparent url(/img/icon-docs.svg) left 2rem center no-repeat;
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: 0.5rem;
   width: fit-content;
@@ -1062,16 +1063,60 @@ h1.pricing-title {
   transition: border-color 0.3s ease-in-out;
 }
 
-.manifesto-cta:hover {
+.manifesto-cta:hover,
+.build-alt-cta:hover,
+.build-alt-cta:focus-visible {
   border-color: rgba(255, 255, 255, 1);
 }
 
-#videos video {
-  box-shadow: var(--style-double-border);
+.manifesto-cta {
+  display: block;
+  /* Clears the background-image icon sitting at left 2rem. */
+  padding-left: 4.5rem;
+  background: transparent url(/img/icon-docs.svg) left 2rem center no-repeat;
+}
+
+/* Demo video. Sits directly under the hero, inside the hero's own ambient glow —
+   it needs no second glow of its own. The frame is the site's existing double-ring
+   token plus the product frames' drop shadow, so it reads as part of the same
+   family as the tour below it. */
+.demo-video {
+  width: 100%;
+  max-width: 1200px;
+  margin: 4rem auto 0;
+  padding: 0 2rem;
+}
+
+.demo-video-frame {
+  position: relative;
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow:
+    var(--style-double-border),
+    0 24px 60px rgba(0, 0, 0, 0.5);
+}
+
+.demo-video-player {
+  display: block;
+  width: 100%;
+  height: auto;
+  /* Reserve the slot before metadata loads so the page doesn't jump. */
+  aspect-ratio: 16 / 9;
+  background: var(--color-main-bg);
 }
 
-#videos {
-  padding: 0 0.75rem;
+/* The poster-only still fills the 16:9 slot; the <video> keeps its default
+   contain so a non-16:9 file letterboxes on black rather than cropping. */
+.demo-video-still {
+  object-fit: cover;
+}
+
+.demo-video-caption {
+  margin: 1rem 0 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.6);
+  text-align: center;
 }
 
 .benefit-grid {
@@ -1083,9 +1128,10 @@ h1.pricing-title {
 
 /* Feature Card Styling */
 .benefit {
+  --benefit-radius: 1.5rem;
   position: relative;
   padding: 2.5rem;
-  border-radius: 1.5rem;
+  border-radius: var(--benefit-radius);
   border: 1px solid var(--color-transparent-border);
   background: rgba(20, 20, 20, 0.25);
   backdrop-filter: blur(16px);
@@ -1104,7 +1150,7 @@ h1.pricing-title {
   content: "";
   position: absolute;
   inset: 0;
-  border-radius: 1.5rem;
+  border-radius: var(--benefit-radius);
   background: radial-gradient(
     ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%),
     rgba(6, 214, 160, 0.15) 0%,
@@ -1134,7 +1180,7 @@ h1.pricing-title {
   content: "";
   position: absolute;
   inset: 0;
-  border-radius: 1.5rem;
+  border-radius: var(--benefit-radius);
   background: linear-gradient(
     135deg,
     rgba(255, 255, 255, 0.1) 0%,
@@ -1157,6 +1203,68 @@ h1.pricing-title {
   z-index: 2;
 }
 
+/* Compact benefit row. By the time the reader reaches this, four elaborate product
+   frames have already had their turn — so the closing argument is the still thing on
+   the page: same glass card, a quarter of the size, no tilt and no glare layer.
+   Scoped as a modifier because showcase.liquid still uses the full-size cards. */
+.benefit-grid--compact {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1.25rem;
+  max-width: 1200px;
+  margin: 8rem auto;
+  padding: 0 2rem;
+}
+
+.benefit-grid--compact .benefit {
+  --benefit-radius: 1rem;
+  padding: 1.5rem;
+}
+
+/* The diagonal glare reads as a smudge at this size. */
+.benefit-grid--compact .benefit::after {
+  display: none;
+}
+
+.benefit-grid--compact .section-title {
+  font-size: 1.5rem;
+  line-height: 1.15;
+  margin: 0 0 0.75rem;
+  /* Four across, one title wraps to two lines and the rest don't — reserving the
+     second line keeps all four bodies starting on the same baseline. Released
+     below, where the columns are wide enough that every title fits on one line. */
+  min-height: 2.3em;
+}
+
+.benefit-grid--compact .section-content {
+  font-size: 0.9375rem;
+  line-height: 1.55;
+}
+
+.benefit-grid--compact .section-content p {
+  margin: 0 0 0.75rem;
+}
+
+.benefit-grid--compact .section-content p:last-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 1100px) {
+  .benefit-grid--compact {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .benefit-grid--compact .section-title {
+    min-height: 0;
+  }
+}
+
+@media (max-width: 640px) {
+  .benefit-grid--compact {
+    grid-template-columns: minmax(0, 1fr);
+    margin: 5rem auto;
+  }
+}
+
 .section-title {
   font-family: "Build", system-ui, sans-serif;
   font-size: var(--typo-subheader-size);
@@ -1483,14 +1591,11 @@ h1.pricing-title {
     padding: 0 2rem;
   }
 
-  #videos {
+  .demo-video {
     padding: 0 4rem;
   }
 
-  #videos video {
-    border-radius: 1rem;
-  }
-  .benefit-grid,
+  .benefit-grid:not(.benefit-grid--compact),
   .pricing-container {
     padding: 0 4rem;
     gap: 3rem 2rem;
@@ -1519,7 +1624,7 @@ h1.pricing-title {
     padding: 0 1.5rem;
   }
 
-  .benefit-grid,
+  .benefit-grid:not(.benefit-grid--compact),
   .pricing-container {
     grid-template-columns: 1fr;
     gap: 2rem;
@@ -1559,8 +1664,8 @@ h1.pricing-title {
     padding-top: 8rem;
   }
 
-  #videos {
-    padding: 0 2rem;
+  .demo-video {
+    padding: 0 1rem;
   }
 
   .md h1.cli-header {
@@ -1606,7 +1711,7 @@ h1.pricing-title {
     min-height: 28rem;
   }
 
-  .benefit-grid,
+  .benefit-grid:not(.benefit-grid--compact),
   .pricing-container {
     padding: 0 2rem;
   }
@@ -1842,8 +1947,36 @@ h1.pricing-title {
 
 /* Separates the prompt frame from the Claude Code button. On its own line so
    the two calls to action read as alternatives rather than a sequence. */
-.build-or {
-  margin: 1.5rem 0;
+/* The lead-in sits above the CTA as its own quiet line. */
+.build-alt {
+  margin: 2rem 0 1rem;
+  font-size: var(--typo-body-size);
   color: var(--color-typography-secondary);
-  text-transform: lowercase;
+  line-height: 1.6;
+}
+
+/* A real <button> (it opens a dialog) wearing the outlined-CTA look. Flex with a
+   1rem gap reproduces the manifesto link's icon-to-label spacing, which its
+   background-image + padding-left achieves a different way. */
+.build-alt-cta {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: none;
+  color: var(--color-primary-cta-highlight);
+  cursor: pointer;
+}
+
+/* cursor: progress, matching what the button used to show: the disable lasts for
+   the Turnstile round-trip, so it means "working", not "unavailable". */
+.build-alt-cta[disabled] {
+  opacity: 0.6;
+  cursor: progress;
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.build-alt-mark {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
 }
diff --git a/style/product.css b/style/product.css
index 19d0f1a..83c980f 100644
--- a/style/product.css
+++ b/style/product.css
@@ -2,6 +2,9 @@
 .product-page {
   width: 100%;
   overflow-x: clip;
+  /* #product is the nav's anchor target; clear the fixed nav on jump.
+     Matches the offset used for docs headings in markdown.css. */
+  scroll-margin-top: 100px;
 }
 
 /* ============ Callout marker positions ============ */
@@ -156,6 +159,15 @@
 .product-cta {
   margin-top: 4rem;
 }
+/* On the homepage the tour is a mid-page band rather than a whole page: tighten
+   the leading and trailing gaps so it reads as one run of sections between the
+   prompt CTA above and the benefit row below. */
+.product-page > .product-section:first-of-type {
+  margin-top: 4rem;
+}
+.product-page > .product-section:last-of-type {
+  margin-bottom: 4rem;
+}
 @media (max-width: 768px) {
   .product-section {
     /* minmax(0, …) — not a bare 1fr — so the single column can shrink below