TigerYWang · Oct 21, 2026 · Oct 21, 2026 · Oct 21, 2026
diff --git a/.gitleaksignore b/.gitleaksignore
@@ -1,2 +1,4 @@
 0e7070138c71b77563f40ed5835535bae02e6f0d:scripts/test-render.mjs:generic-api-key:400
 7e52c8555c74565850efe78d41ad4a8fd676cdbf:scripts/test-render.mjs:generic-api-key:406
+52451f6cd78a942408602b8c1ca67eb85ba74eea:scripts/test-vm-identity.mjs:generic-api-key:505
+52451f6cd78a942408602b8c1ca67eb85ba74eea:scripts/test-vm-identity.mjs:generic-api-key:510
diff --git a/site/README.md b/site/README.md
@@ -6,11 +6,11 @@ The marketing page for Bops: plain HTML and CSS (no build step), from the Paper
 python3 -m http.server 4321 --directory site   # then open http://localhost:4321
 ```
 
-- `index.html`: the page. Mascots and icons are SVG symbols defined once at the top.
+- `index.html`: the page. Mascots and icons are SVG symbols defined once at the top. Boppy is drawn as the app icon draws it; the hero's and the badge's Boppy are their own copies, so their eyes (and the hero's mouth) can move.
 - `styles.css`: everything visual. Colors are the app's: ink `#0A0A0A`, highlighter `#E9FF3B`, paper white.
 - `main.js`: the illustrated scenes (hero cards, badge, thread) keep their designed size and scale down to fit smaller screens. Below 1180 px the fit is content-aware (it crops a scene's empty margins, so the scene draws larger), and on phones `styles.css` recomposes the hero and the thread into a narrower layout of the same parts. From 1180 px up the page renders exactly as before.
 - `lanyard.js`: the badge in "Hire a bot" drops onto its lanyard (with a little wind) the first time it scrolls into view, then swings when you hover, drag or tap it (a few springs and a CSS 3D transform). At rest, with reduced motion or without JavaScript it is exactly the static design.
-- `notes.js`: music notes drift out of the hero Boppy's headphones; clicking or tapping it makes a burst of them. Off with reduced motion.
+- `notes.js`: music notes drift out of the hero Boppy's headphones; clicking or tapping it makes a burst of them. It sings along (its mouth, a flat line as it listens, opens with the notes), its eyes follow the pointer and blink, and it squints happily in a burst. Off with reduced motion.
 - `download.js`: the three Download for Mac buttons go to `/download/Bops.dmg`. On a Mac they open Get First Access first: leave an email (it goes to PostHog) or skip, and either way the download starts and the card says so. At the card's foot, What's new in the newest release: its version and lines from `/download/latest.json` (written with each release by Orgo's `scripts/download-publish.sh`, in its private OrgoAI/bops-secrets), left out when that can't be read. Anywhere else (iPhone, iPad, Android, Windows, Linux) they open a short note to get Bops on a Mac instead, with Send to my Mac (the share sheet, so AirDrop or Messages) and Copy link. An Intel Mac in Chrome gets the note's Apple silicon version. Without JS the buttons simply download. Test it with `node scripts/test-site.mjs`.
 - Pricing (`#pricing`, linked from the nav): Free, Pro and Max in exactly the app's words (`PLAN_CARDS` in `lib/plan-includes.ts`, which the app's Settings shows); `scripts/test-site.mjs` fails when the two differ. Change the plans there and here together.
 - PostHog: the snippet in `index.html` sends to Orgo's production project, with `site: bops.bot` on every event. The card's events are `bops_download_click` (with which button: nav, hero or footer), `bops_download_email` (and an identify by the email), `bops_download_skip_email` and `bops_download_note` (the non-Mac or Intel note). Every call is guarded, so a blocker can't break the buttons.

diff --git a/site/apple-touch-icon.png b/site/apple-touch-icon.png
diff --git a/site/boppy.svg b/site/boppy.svg
diff --git a/site/download.js b/site/download.js
@@ -27,7 +27,7 @@
    try {
      const p = window.posthog;
      if (p && typeof p[method] === "function") p[method](...args);
    } catch (_) {}
  }

  const NOTES = {
@@ -36,7 +36,7 @@
   };
   const CLOSE =
     '<button class="mac-note-close" type="button" aria-label="Close"><svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg></button>';
-  const DISC = '<span class="mac-note-disc"><svg width="60" height="60" aria-hidden="true"><use href="#boppy" /></svg></span>';
+  const DISC = '<span class="mac-note-disc"><svg width="80" height="80" aria-hidden="true"><use href="#boppy" /></svg></span>';
   const canShare = typeof navigator.share === "function";
   let note, title, body, share, copy, anyway, status, opener, copyTimer;
   let access, ask, form, email, error, done, doneTitle, from;
@@ -137,7 +137,7 @@
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (_) {
      // No clipboard API (an older browser, or not https): the old way, from inside the dialog.
      const area = document.createElement("textarea");
      area.className = "mac-note-copy";
@@ -147,7 +147,7 @@
      area.select();
      area.setSelectionRange(0, text.length);
      let ok = false;
      try { ok = document.execCommand("copy"); } catch (_) { ok = false; }
      area.remove();
      copy.focus();
      return ok;
@@ -239,7 +239,7 @@
  // A download doesn't leave the page (the server sends it as an attachment), so the card stays up and
  // turns into the done state.
  function download() {
    location.href = DMG;
    ask.hidden = true;
    done.hidden = false;
    access.setAttribute("aria-labelledby", "access-done-title");

diff --git a/site/index.html b/site/index.html
@@ -14,17 +14,17 @@
   <meta property="og:site_name" content="Bops" />
   <meta property="og:title" content="Bops: business ops, run by bots" />
   <meta property="og:description" content="A team of AI bots that runs your business ops: inbox, pipeline, invoices, reports. Each one has its own computer, email and phone number, and remembers everything." />
-  <meta property="og:image" content="https://bops.bot/og.png" />
+  <meta property="og:image" content="https://bops.bot/og.png?v=2" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="Bops: business ops, run by bots" />
   <meta name="twitter:description" content="A team of AI bots that runs your business ops. Each one has its own computer, email and phone number." />
-  <meta name="twitter:image" content="https://bops.bot/og.png" />
+  <meta name="twitter:image" content="https://bops.bot/og.png?v=2" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Geist+Mono:wght@500;600&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="styles.css?v=9" />
+  <link rel="stylesheet" href="styles.css?v=10" />
   <!-- PostHog (the Orgo project), for the download card's events (download.js). -->
   <script>
       !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],Object.defineProperty(u,"toString",{configurable:!0,enumerable:!0,writable:!0,value:function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e}}),Object.defineProperty(u.people,"toString",{configurable:!0,enumerable:!0,writable:!0,value:function(){return u.toString(1)+".people (stub)"}}),o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagResult isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
@@ -37,12 +37,12 @@
   </script>
 </head>
 <body>
-  <!-- Boppy and the team, drawn once and reused (same shapes as the app's mascots). -->
+  <!-- Boppy and the team, drawn once and reused: Boppy as the app icon draws it, the others as the app does. -->
   <svg width="0" height="0" style="position:absolute" aria-hidden="true">
     <defs>
       <path id="blob" d="M20 4c7.5 0 13.5 4.5 15.5 11 2.8 2.4 3.8 6 2.8 9.6C36.6 32.5 29.6 37 20 37S3.4 32.5 1.7 24.6C.7 21 1.7 17.4 4.5 15 6.5 8.5 12.5 4 20 4z" />
       <symbol id="boppy" viewBox="0 0 40 40">
-        <g transform="translate(20 23) scale(.8) translate(-20 -21)"><path d="M20 4c7.5 0 13.5 4.5 15.5 11 2.8 2.4 3.8 6 2.8 9.6C36.6 32.5 29.6 37 20 37S3.4 32.5 1.7 24.6C.7 21 1.7 17.4 4.5 15 6.5 8.5 12.5 4 20 4z" fill="#0A0A0A"/><ellipse class="eye" cx="15.5" cy="22.3" rx="1.9" ry="2.6" fill="#fff"/><ellipse class="eye" cx="24.5" cy="22.3" rx="1.9" ry="2.6" fill="#fff"/></g><path d="M6.3 21.5C6.3 8.9 12.4 3.6 20 3.6s13.7 5.3 13.7 17.9" fill="none" stroke="#3A3A38" stroke-width="2.1" stroke-linecap="round"/><rect x="2.4" y="17" width="6.4" height="11" rx="3" fill="#3A3A38"/><rect x="31.2" y="17" width="6.4" height="11" rx="3" fill="#3A3A38"/><rect x="7.4" y="18.6" width="1.6" height="7.8" rx=".8" fill="#1C1C1B"/><rect x="31" y="18.6" width="1.6" height="7.8" rx=".8" fill="#1C1C1B"/>
+        <g transform="translate(20 21) scale(.9) translate(-20 -20)"><g transform="rotate(-9 20 20)"><path d="M5.3 17.6C4.4 8.4 11.1 2 20 2s15.6 6.4 14.7 15.6" fill="none" stroke="#0A0A0A" stroke-width="2.8" stroke-linecap="round"/><path d="M20 6c8.5 0 14 6 14 13.5S28.5 34 20 34 6 27 6 19.5 11.5 6 20 6z" fill="#0A0A0A"/><g transform="translate(.6 -1.5)"><ellipse cx="15.6" cy="20" rx="2.4" ry="3.15" fill="#fff"/><ellipse cx="24.4" cy="20" rx="2.4" ry="3.15" fill="#fff"/></g><ellipse cx="20.78" cy="26.9" rx="1.4" ry="1.7" fill="#fff"/><rect x="4" y="16" width="7" height="11" rx="3.5" fill="#E9FF3B" stroke="#0A0A0A" stroke-width="2"/><rect x="29" y="16" width="7" height="11" rx="3.5" fill="#E9FF3B" stroke="#0A0A0A" stroke-width="2"/></g></g>
       </symbol>
       <symbol id="penny" viewBox="0 0 40 40">
         <g transform="translate(20 23) scale(.8) translate(-20 -21)"><path d="M20 35C11 29 3 23 3 14.5 3 9 7 5 12 5c3.5 0 6.4 2 8 5 1.6-3 4.5-5 8-5 5 0 9 4 9 9.5C37 23 29 29 20 35z" fill="#FF6FB5"/><path d="M13.6 22.2q1.9 1.8 3.8 0M22.6 22.2q1.9 1.8 3.8 0" fill="none" stroke="#1C1C1B" stroke-width="1.6" stroke-linecap="round"/></g><path d="M6.3 21.5C6.3 8.9 12.4 3.6 20 3.6s13.7 5.3 13.7 17.9" fill="none" stroke="#1C1C1B" stroke-width="2.1" stroke-linecap="round"/><rect x="2.4" y="17" width="6.4" height="11" rx="3" fill="#1C1C1B"/><rect x="31.2" y="17" width="6.4" height="11" rx="3" fill="#1C1C1B"/><rect x="7.4" y="18.6" width="1.6" height="7.8" rx=".8" fill="#3A3A38"/><rect x="31" y="18.6" width="1.6" height="7.8" rx=".8" fill="#3A3A38"/>
@@ -106,7 +106,7 @@ <h1 class="hero-title">Bops<br />dot<br />bot.</h1>
       <div class="fit" data-w="800" data-h="790">
         <div class="stage" style="width:800px;height:790px">
           <div class="spot" style="left:90px;top:40px;width:640px;height:640px"></div>
-          <svg class="boppy-float" style="position:absolute;left:270px;top:92px" width="280" height="280" role="img" aria-label="Boppy"><use href="#boppy" /></svg>
+          <svg class="boppy-float" style="position:absolute;left:270px;top:92px" width="280" height="280" viewBox="0 0 40 40" role="img" aria-label="Boppy"><g transform="translate(20 21) scale(.9) translate(-20 -20)"><g transform="rotate(-9 20 20)"><path d="M5.3 17.6C4.4 8.4 11.1 2 20 2s15.6 6.4 14.7 15.6" fill="none" stroke="#0A0A0A" stroke-width="2.8" stroke-linecap="round"/><path d="M20 6c8.5 0 14 6 14 13.5S28.5 34 20 34 6 27 6 19.5 11.5 6 20 6z" fill="#0A0A0A"/><g transform="translate(.6 -1.5)"><g class="hero-eyes"><ellipse cx="15.6" cy="20" rx="2.4" ry="3.15" fill="#fff"/><ellipse cx="24.4" cy="20" rx="2.4" ry="3.15" fill="#fff"/></g></g><ellipse class="hero-mouth" cx="20.78" cy="26.9" rx="1.4" ry="1.7" fill="#fff"/><rect x="4" y="16" width="7" height="11" rx="3.5" fill="#E9FF3B" stroke="#0A0A0A" stroke-width="2"/><rect x="29" y="16" width="7" height="11" rx="3.5" fill="#E9FF3B" stroke="#0A0A0A" stroke-width="2"/></g></g></svg>
 
           <div class="card needs" style="left:476px;top:34px;width:268px">
             <div class="needs-head"><span class="dot-amber"></span><span class="mono-label ink">NEEDS YOU</span></div>
@@ -149,7 +149,7 @@ <h2 class="h2">Hire a bot,<br />not a chatbot.</h2>
               <div class="badge-top">
                 <span class="slot"></span>
                 <div class="badge-id">
-                  <span class="photo"><svg width="68" height="68"><svg width="100%" height="100%" viewBox="0 0 40 40"><g transform="translate(20 23) scale(.8) translate(-20 -21)"><path d="M20 4c7.5 0 13.5 4.5 15.5 11 2.8 2.4 3.8 6 2.8 9.6C36.6 32.5 29.6 37 20 37S3.4 32.5 1.7 24.6C.7 21 1.7 17.4 4.5 15 6.5 8.5 12.5 4 20 4z" fill="#0A0A0A"/><ellipse class="eye" cx="15.5" cy="22.3" rx="1.9" ry="2.6" fill="#fff"/><ellipse class="eye" cx="24.5" cy="22.3" rx="1.9" ry="2.6" fill="#fff"/></g><path d="M6.3 21.5C6.3 8.9 12.4 3.6 20 3.6s13.7 5.3 13.7 17.9" fill="none" stroke="#3A3A38" stroke-width="2.1" stroke-linecap="round"/><rect x="2.4" y="17" width="6.4" height="11" rx="3" fill="#3A3A38"/><rect x="31.2" y="17" width="6.4" height="11" rx="3" fill="#3A3A38"/><rect x="7.4" y="18.6" width="1.6" height="7.8" rx=".8" fill="#1C1C1B"/><rect x="31" y="18.6" width="1.6" height="7.8" rx=".8" fill="#1C1C1B"/></svg></svg></span>
+                  <span class="photo"><svg width="96" height="96" viewBox="0 0 40 40"><g transform="translate(20 21) scale(.9) translate(-20 -20)"><g transform="rotate(-9 20 20)"><path d="M5.3 17.6C4.4 8.4 11.1 2 20 2s15.6 6.4 14.7 15.6" fill="none" stroke="#0A0A0A" stroke-width="2.8" stroke-linecap="round"/><path d="M20 6c8.5 0 14 6 14 13.5S28.5 34 20 34 6 27 6 19.5 11.5 6 20 6z" fill="#0A0A0A"/><g transform="translate(.6 -1.5)"><ellipse class="eye" cx="15.6" cy="20" rx="2.4" ry="3.15" fill="#fff"/><ellipse class="eye" cx="24.4" cy="20" rx="2.4" ry="3.15" fill="#fff"/></g><ellipse cx="20.78" cy="26.9" rx="1.4" ry="1.7" fill="#fff"/><rect x="4" y="16" width="7" height="11" rx="3.5" fill="#E9FF3B" stroke="#0A0A0A" stroke-width="2"/><rect x="29" y="16" width="7" height="11" rx="3.5" fill="#E9FF3B" stroke="#0A0A0A" stroke-width="2"/></g></g></svg></span>
                   <div class="badge-name"><span class="mono-label">BOPS · STAFF ID 0001</span><span class="name">Boppy</span><span class="t15 muted">Chief of Staff · Acme Inc</span></div>
                 </div>
               </div>
@@ -282,7 +282,7 @@ <h2 class="h2-xl" id="pricing-title">Pick a plan.</h2>
     <!-- 6. Close. -->
     <section class="band ink">
       <div class="center wrap s5">
-        <span class="final-disc"><svg width="88" height="88"><use href="#boppy" /></svg></span>
+        <span class="final-disc"><svg width="128" height="128"><use href="#boppy" /></svg></span>
         <h2 class="h2-final">Hire your first Bop.</h2>
         <p class="lede final-lede">Download for Mac and say hi to Boppy. It takes it from there.</p>
         <div class="ctas">
@@ -299,8 +299,8 @@ <h2 class="h2-final">Hire your first Bop.</h2>
   </footer>
 
   <script src="main.js?v=5"></script>
-  <script src="lanyard.js?v=5" defer></script>
-  <script src="download.js?v=7" defer></script>
-  <script src="notes.js?v=5" defer></script>
+  <script src="lanyard.js?v=6" defer></script>
+  <script src="download.js?v=8" defer></script>
+  <script src="notes.js?v=6" defer></script>
 </body>
 </html>
diff --git a/site/lanyard.js b/site/lanyard.js
@@ -71,11 +71,13 @@
   const trails = TRAIL.map(() => []);
   let gust = 0, windAt = 0, OFF = TRAIL.map(([off]) => off); // OFF: the offsets in use, pulled in on narrow screens
   const calm = () => trails.forEach((t) => (t.length = 0));
-  // Boppy on the badge is its own copy of the symbol, so only these two eyes ever move.
+  // Boppy on the badge is its own copy of the symbol, so only these two eyes ever move. EYE: where they
+  // sit at rest (as index.html draws them) and their size.
   const eyeEls = [...badge.querySelectorAll(".photo .eye")];
+  const EYE = { cx: [15.6, 24.4], cy: 20, rx: 2.4, ry: 3.15 };
   const drawEyes = (dx, cy, rx, ry) =>
     eyeEls.forEach((el, i) => {
-      const at = { cx: dx === 0 ? [15.5, 24.5][i] : f2([15.5, 24.5][i] + dx), cy, rx, ry };
+      const at = { cx: dx === 0 ? EYE.cx[i] : f2(EYE.cx[i] + dx), cy, rx, ry };
       for (const k in at) el.setAttribute(k, at[k]);
     });
 
@@ -116,7 +118,7 @@
     } else {
       badge.style.removeProperty("transform");
       badge.style.removeProperty("transform-origin");
-      drawEyes(0, "22.3", "1.9", "2.6");
+      drawEyes(0, EYE.cy, EYE.rx, EYE.ry);
       eyes.drawn = "";
     }
     stage.classList.toggle("is-moving", on);
@@ -220,7 +222,8 @@
     let lx = 0, ly = falling ? -1 : 0;
     if (ptr.on && !falling) {
       const dx = ptr.x - eyeAt[0], dy = ptr.y - eyeAt[1], d = Math.hypot(dx, dy) || 1, k = (1.1 * Math.min(1, d / 160)) / d;
-      lx = dx * k;
+      // Not as far right: the right eye, already glancing that way (and wider in a squint), would slip under its cup's outline.
+      lx = Math.min(0.3, dx * k);
       ly = dy * k;
     }
     const k = 1 - Math.exp(-dt * 16), happy = grab || now < eyes.happy ? 1 : 0;
@@ -232,7 +235,7 @@
       eyes.next = now + 2 + Math.random() * 3;
     } else if (eyes.blink < 0 && now > eyes.next && !falling) eyes.blink = 0;
     const open = eyes.blink < 0 ? 1 : Math.max(0.12, Math.abs(1 - eyes.blink / 0.08)), sq = eyes.squint;
-    const key = [eyes.x, 22.3 + eyes.y + 0.6 * sq, 1.9 * (1 + 0.12 * sq), 2.6 * open * (1 - 0.62 * sq)].map(f2);
+    const key = [eyes.x, EYE.cy + eyes.y + 0.6 * sq, EYE.rx * (1 + 0.12 * sq), EYE.ry * open * (1 - 0.62 * sq)].map(f2);
     if (key.join() !== eyes.drawn) drawEyes(eyes.x, key[1], key[2], key[3]);
     eyes.drawn = key.join();
     return eyes.blink >= 0 || Math.abs(lx - eyes.x) + Math.abs(ly - eyes.y) > 0.02 || Math.abs(happy - sq) > 0.01;
@@ -339,7 +342,7 @@
  function hold(e, p) {
    try {
      badge.setPointerCapture(e.pointerId);
    } catch (err) {} // the browser already took this pointer for a scroll
    grab = { id: e.pointerId, x0: p[0], y0: p[1], a0: s.a, b0: angle(p[0], p[1]), t0: performance.now(), moved: 0, mouse: e.pointerType === "mouse" };
    const [x, y] = toStage(e);
    Object.assign(ptr, { x, y, px: x, py: y, vx: 0, vy: 0, on: true });