diff --git a/docs/analytics.md b/docs/analytics.md
index d9ee3e7..0589830 100644
--- a/docs/analytics.md
+++ b/docs/analytics.md
@@ -5,6 +5,15 @@ acceptance. They are not part of the desktop app. Source:
 `src/lib/analytics.ts`, `src/lib/analyticsConsent.ts`, and
 `src/components/PrivacyChoices.tsx`. Policy text lives in `src/data/legal.ts`.
 
+The same choice panel is prerendered into `#openstudio-privacy`, outside the
+temporarily hidden route root. A small pre-paint script uses the shared
+`consentRecord.ts` validator to hide it for an unexpired saved choice. This
+script never loads analytics or grants consent. The client portal replaces the
+inert static panel before paint and keeps router links, focus and choice handlers
+inside the existing app. Without JavaScript, or when initial application loading
+fails, the static panel stays hidden so unusable controls cannot cover legal text.
+The original loader still covers initial non-legal navigation until it finishes.
+
 ## Build configuration
 
 Set these in the hosting provider's **build** environment; Vite embeds them at
diff --git a/docs/hero-aura.md b/docs/hero-aura.md
new file mode 100644
index 0000000..72342d6
--- /dev/null
+++ b/docs/hero-aura.md
@@ -0,0 +1,86 @@
+# Home hero Aura lifecycle
+
+The hero retains the original `pastel-abstract-background-soft-glowing-hd-web-designs`
+embed at `aura.promad.design`, with `theme=light`. No renderer settings, effects,
+colours, resolution or frame rate are overridden by the website.
+
+The page renders its existing light fallback before JavaScript. Loading the iframe
+starts automatically after the route-ready and intro-hidden signals, two animation
+frames and an idle opportunity, with a visible hero in a visible document. There
+is no interaction requirement or fixed quiet-period delay. The idle callback has
+a two-second maximum scheduling wait; browsers without that API start after the
+paint frames. Initial reduced motion does not mount the iframe.
+
+The readiness signals describe the rendered page, not every lazy image, optional
+animation engine or third-party network request. On client navigation the mounted
+hero gets its own paint frames even when the initial readiness flags are already
+set. Unmounting or enabling reduced motion cancels pending startup work.
+
+## Readiness and failure
+
+An iframe's load event cannot confirm that the asynchronous scene request or lazy
+renderer succeeded, and is not used to trigger readiness. Active startup frames
+remain renderable at zero opacity: `visibility:hidden` can suspend frame callbacks
+in a visible browser and deadlock readiness. The host uses the provider's existing `promad-aura:capture`
+message API and validates replies against the exact origin, iframe window and
+request ID. This API was inspected and exercised against the live embed on
+20 September 2026. It is an external, unversioned integration; it is not a web
+standard or a provider-guaranteed readiness contract.
+
+Readiness requires an actual PNG with the opaque, near-white upper centre of this
+specific light scene, followed by another successful check after a
+1-second settling period. The current capture implementation returns black if
+the lazy canvas is absent/unpainted, and an error if the scene container is absent.
+Neither is revealed. Replies containing malformed, oversized, transparent or dark
+images also leave the fallback in place. A 30-second foreground probe timeout
+removes an unresponsive iframe. Unsupported/changed provider behaviour therefore
+keeps the fallback instead of revealing a browser error or black background.
+The timeout does not automatically retry; a new iframe instance is needed.
+Pixel readiness does not establish a healthy frame rate. There is currently no
+automatic fallback for slow software rendering after the frame has been verified.
+
+After verification, the frame fades in over 650 ms using `ease-in-out`. The same
+duration applies to fade-out and viewport re-entry. The settling period is a
+presentation buffer, not proof of readiness; both successful frame checks remain
+required. These shorter timings remove 4.25 seconds of deliberate waiting compared
+with the previous 3.5-second settle and 2.4-second fade. Network time and renderer
+settings are unchanged. The former interaction/10-second gate has been removed.
+
+Captures use quarter-size output only for the startup check, never for the visible
+animation. The PNG passes between frames inside the browser; the host does not
+upload it or invoke a Netlify function. This adds the provider's capture helper download and a small amount of
+startup work. Probes stop after readiness, while offscreen, in a hidden tab, on
+reduced motion, and on unmount. The timeout restarts if an unfinished scene returns
+to the viewport. It does not run indefinitely while offscreen.
+
+## Pause and resume
+
+Scrolling away retains the same iframe and its ready state; returning reveals the
+same scene without a reload or repeated startup checks. The host tracks viewport
+intersection and document visibility and hides the frame when inactive. The
+observer consumes all queued visibility records in order: under CPU throttling,
+the hidden initial layout and its visible replacement can arrive in one batch.
+Reading only the first record strands startup until another viewport change.
+The browser regression suite explicitly reproduces this batch.
+The current provider also observes intersection and reduced motion internally.
+Chromium checks verify actual animation callbacks stop offscreen and resume on
+return, not merely that the host's `data-playing` attribute changes. CSS visibility
+alone is not a cross-browser pause API, so other engines require live verification.
+
+Changing the OS reduced-motion preference removes the iframe. Re-enabling motion
+creates a new component instance with fresh readiness and cancelled old probes.
+This accessibility preference is separate from ordinary viewport pause/resume.
+
+## Verification
+
+`test/hero-aura-browser.test.mjs` exercises the cross-origin protocol with controlled
+slow, dark, unresponsive and successful scenes, stale readiness after preference
+changes, and iframe identity across scrolling. Run `npm run build`, `npm run lint`,
+`npm test` and `npm run verify:perf`.
+
+The initial-load performance gate can now include the automatically started iframe.
+Inspect the live scene after activation as well; passing the short gate does not
+demonstrate low ongoing CPU use. Preserve the approved scene when comparing visuals, including
+phone, tablet, both sides of the 900 px navigation breakpoint, and desktop, and
+test delayed uncached navigation and reduced motion. Never make CI depend on live
+third-party availability.
diff --git a/docs/illustration-loading.md b/docs/illustration-loading.md
index 0a5973a..8b669f4 100644
--- a/docs/illustration-loading.md
+++ b/docs/illustration-loading.md
@@ -25,6 +25,17 @@ their bandwidth without fixing the scene change.
 
 ## Current implementation
 
+- Meter canvases use `stage/meterPlayback.ts` in addition to the GSAP gate.
+  Each canvas must intersect the viewport and the document must be visible;
+  continuous drawing also requires an active stage and normal motion. Pauses
+  retain the canvas, RMS smoothing and peak-hold time. Visible static/reduced-motion
+  meters receive a rest-frame paint, including after resizing, without a loop.
+  The upstream drawing code and 20 fps limit are unchanged; the integration is a
+  reproducible patch in `scripts/vendor-openstudio-ui.mjs`.
+- Track activity and mixer meters update through local contexts so unchanged
+  labels/controls skip React rendering. Clip artwork has a separate memoized
+  boundary whose props exclude playhead time and continuously changing levels.
+  Choreography, styles and the 30 fps timeline commit rate are unchanged.
 - Each lazy route imports the renderers it uses. Home, Features, AI and NAM Rack
   render their real controls and scene in the rest state. There is no temporary
   screenshot, bitmap crossfade or second scene to replace it.
diff --git a/index.html b/index.html
index ea8ef21..5fc81ad 100644
--- a/index.html
+++ b/index.html
@@ -561,6 +561,8 @@
         );
       })();
     </script>
+    <div id="openstudio-privacy" class="sp-root min-h-0 bg-transparent" hidden inert></div>
+    <!-- privacy-bootstrap -->
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/scripts/prerender-site.mjs b/scripts/prerender-site.mjs
index 8452357..9b4f9b1 100644
--- a/scripts/prerender-site.mjs
+++ b/scripts/prerender-site.mjs
@@ -112,6 +112,11 @@ export function buildRouteHtml(template, route, { manifest, imageIndex = {} }) {
   }
   const content = route.html.replace(/(data-sp-reveal="[^"]+")/g, '$1 data-sp-in="true"');
   html = html.replace(/<div id="root"><\/div>/, `<div id="root"><div data-static-route-content>${content}</div></div>`);
+  if (route.privacyHtml && route.privacyBootstrap) {
+    html = html.replace('id="openstudio-privacy" class="sp-root min-h-0 bg-transparent" hidden inert></div>',
+      `id="openstudio-privacy" class="sp-root min-h-0 bg-transparent" hidden inert><div data-privacy-prerender>${route.privacyHtml}</div></div>`)
+      .replace('<!-- privacy-bootstrap -->', `<script>${route.privacyBootstrap}</script>`);
+  }
   if (/^\/(privacy|security|terms)$/.test(route.path)) {
     html = html
       .replace('<html lang="en">', '<html lang="en" data-openstudio-immediate-content>')
diff --git a/scripts/vendor-openstudio-ui.mjs b/scripts/vendor-openstudio-ui.mjs
index 2c95892..d25557c 100644
--- a/scripts/vendor-openstudio-ui.mjs
+++ b/scripts/vendor-openstudio-ui.mjs
@@ -31,7 +31,15 @@ const ATLAS_COLUMNS = 11;
 /** @type {{ from: string; to: string; patches?: [string, string][] }[]} */
 const FILES = [
   { from: "components/meterConfig.ts", to: "meterConfig.ts" },
-  { from: "components/PeakMeter.tsx", to: "PeakMeter.tsx" },
+  { from: "components/PeakMeter.tsx", to: "PeakMeter.tsx", patches: [
+    ['import { useEffect, useRef, useCallback } from "react";', 'import { useEffect, useRef, useCallback } from "react";\nimport { startMeterPlayback } from "../stage/meterPlayback";'],
+    ['  const animFrameRef = useRef<number | null>(null);\n', ''],
+    ['{ animFrameRef.current = requestAnimationFrame(draw); return; }', '{ return; }'],
+    ['        animFrameRef.current = requestAnimationFrame(draw);\n', ''],
+    ['      animFrameRef.current = requestAnimationFrame(draw);\n', ''],
+    ['    animFrameRef.current = requestAnimationFrame(draw);\n', ''],
+    ['    return () => {\n      if (animFrameRef.current !== null) {\n        cancelAnimationFrame(animFrameRef.current);\n      }\n    };', '    const canvas = canvasRef.current;\n    if (!canvas) return;\n    return startMeterPlayback(canvas, draw, lastDrawTimeRef.current);'],
+  ] },
   { from: "components/MasterPeakMeterCluster.tsx", to: "MasterPeakMeterCluster.tsx" },
   {
     from: "components/NAMRackControlAssets.ts",
diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
new file mode 100644
index 0000000..5fe592d
--- /dev/null
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from "react";
+import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion";
+import { afterHeroPageReady } from "@/features/hero-aura/startup";
+import { AURA_ORIGIN, observeAuraReadiness } from "@/features/hero-aura/readiness";
+
+const AURA_SCENE = "pastel-abstract-background-soft-glowing-hd-web-designs";
+const AURA_SRC = `${AURA_ORIGIN}/embed/${AURA_SCENE}?theme=light`;
+/**
+ * Full-bleed original Aura scene behind the home hero.
+ *
+ * The host repeats the intro loader's surface, so the reveal is continuous, and is what
+ * prerendering, no-JavaScript and reduced-motion visitors see. The live embed is requested only after the page has
+ * rendered and the initial loader has finished, and only
+ * while the hero is on screen in a visible tab. It fades in once its scene has settled,
+ * and fades out to `visibility: hidden` whenever the hero leaves the viewport or the tab
+ * is hidden, so the embed stops compositing when nobody can see it.
+ */
+const HeroAuraBackdrop = () => {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const reducedMotion = usePrefersReducedMotion();
+  const [triggered, setTriggered] = useState(false);
+  const [active, setActive] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  // Hero on screen and the document visible.
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || !("IntersectionObserver" in window)) return;
+    let intersecting = false;
+    const update = () => setActive(intersecting && document.visibilityState === "visible");
+    const observer = new IntersectionObserver((entries) => {
+      // A busy main thread can batch the hidden initial layout and its reveal.
+      // Consume every record so an earlier hidden state cannot strand startup.
+      for (const entry of entries) {
+        if (entry.target === host) intersecting = entry.isIntersecting;
+      }
+      update();
+    });
+    observer.observe(host);
+    document.addEventListener("visibilitychange", update);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", update);
+    };
+  }, []);
+
+  // Start automatically after the page is ready; no interaction or quiet timer.
+  useEffect(() => {
+    if (reducedMotion || triggered) return;
+    return afterHeroPageReady(() => setTriggered(true));
+  }, [reducedMotion, triggered]);
+
+  useEffect(() => {
+    if (triggered && active && !reducedMotion) setMounted(true);
+  }, [triggered, active, reducedMotion]);
+
+  const showFrame = mounted && !reducedMotion;
+
+  return (
+    <div
+      aria-hidden="true"
+      className="sp-hero-aura__bg"
+      data-aura-scene={AURA_SCENE}
+      data-playing={showFrame && active ? "true" : "false"}
+      ref={hostRef}
+    >
+      {showFrame ? <AuraFrame active={active} /> : null}
+    </div>
+  );
+};
+
+// Own readiness alongside the iframe: removing it for reduced motion also
+// discards readiness. Scrolling offscreen keeps this same instance mounted.
+const AuraFrame = ({ active }: { active: boolean }) => {
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const [ready, setReady] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame || !active || ready || failed) return;
+    return observeAuraReadiness(frame, () => setReady(true), () => setFailed(true));
+  }, [active, ready, failed]);
+
+  if (failed) return null;
+  return (
+    <iframe
+      ref={frameRef}
+      className="sp-hero-aura__frame"
+      data-ready={ready ? "true" : "false"}
+      src={AURA_SRC}
+      tabIndex={-1}
+      title="Pastel Abstract Background – Soft Glowing HD Web Designs"
+    />
+  );
+};
+
+export default HeroAuraBackdrop;
diff --git a/src/components/PrivacyChoicesPortal.tsx b/src/components/PrivacyChoicesPortal.tsx
new file mode 100644
index 0000000..6cd067d
--- /dev/null
+++ b/src/components/PrivacyChoicesPortal.tsx
@@ -0,0 +1,15 @@
+import { useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import PrivacyChoices from "./PrivacyChoices";
+
+/** Keep consent outside the route root, which is hidden during lazy startup. */
+export default function PrivacyChoicesPortal() {
+  const host = document.getElementById("openstudio-privacy");
+  useLayoutEffect(() => {
+    if (!host) return;
+    host.querySelector("[data-privacy-prerender]")?.remove();
+    host.hidden = false;
+    host.removeAttribute("inert");
+  }, [host]);
+  return host ? createPortal(<PrivacyChoices />, host) : <PrivacyChoices />;
+}
diff --git a/src/components/layout/SiteShell.tsx b/src/components/layout/SiteShell.tsx
index af4018f..fad9533 100644
--- a/src/components/layout/SiteShell.tsx
+++ b/src/components/layout/SiteShell.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useContext, useState, type ReactNode } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import { StaticRenderContext } from "@/lib/staticRender";
-import PrivacyChoices from "@/components/PrivacyChoices";
+import PrivacyChoicesPortal from "@/components/PrivacyChoicesPortal";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
 import { IconGradientDefs } from "@/components/ui/primitives";
 import { useHashScroll } from "@/hooks/useHashScroll";
@@ -34,7 +34,7 @@ const SiteShell = () => {
           </ErrorBoundary>
         </main>
         <SiteFooter lead={footerLead} />
-        {staticRender ? null : <PrivacyChoices />}
+        {staticRender ? null : <PrivacyChoicesPortal />}
       </div>
     </FooterLeadContext.Provider>
   );
diff --git a/src/features/daw-preview/ArrangementLanes.tsx b/src/features/daw-preview/ArrangementLanes.tsx
index 7c20587..e6f1901 100644
--- a/src/features/daw-preview/ArrangementLanes.tsx
+++ b/src/features/daw-preview/ArrangementLanes.tsx
@@ -151,37 +151,9 @@ export const ArrangementLanes = memo(function ArrangementLanes({
               data-lane={lane.name}
               style={{ height: laneHeight, background: index % 2 === 0 ? "#1a1a1a" : "#171717" }}
             >
-              {lane.clips.map((clip) => {
-                const metrics = rowMetrics(clip.kind === "midi" ? "midi" : kind, laneHeight);
-                const clipWidth = Math.max(0, clip.duration * pixelsPerSecond);
-                if (clipWidth < 1) return null;
-                const common = {
-                  color: lane.color,
-                  duration: clip.duration,
-                  height: metrics.clipHeight,
-                  muted: lane.muted,
-                  name: clip.label,
-                  offset: clip.offset,
-                  pixelsPerSecond,
-                  recording: clip.recording,
-                  seed: clip.seed ?? index + 1,
-                  tempo,
-                  width: clipWidth,
-                };
-                return (
-                  <div
-                    key={clip.label}
-                    className="absolute z-[1] transition-opacity duration-300"
-                    style={{ left: clip.start * pixelsPerSecond, top: metrics.clipInsetY, width: clipWidth, height: metrics.clipHeight, opacity: silenced && transport === "playing" ? 0.45 : 1 }}
-                  >
-                    {clip.kind === "midi" ? (
-                      <MidiClipLite {...common} profile={(clip.profile as MidiProfile) ?? "keys"} selected={clip.selected} />
-                    ) : (
-                      <AudioClipLite {...common} profile={(clip.profile as AudioProfile) ?? "mix"} />
-                    )}
-                  </div>
-                );
-              })}
+              <LaneClips clips={lane.clips} color={lane.color} muted={lane.muted} kind={kind}
+                seed={index + 1} laneHeight={laneHeight} pixelsPerSecond={pixelsPerSecond} tempo={tempo}
+                silenced={silenced && transport === "playing"} />
             </div>
           );
         })}
@@ -192,3 +164,45 @@ export const ArrangementLanes = memo(function ArrangementLanes({
     </div>
   );
 });
+
+// Time and meter levels change every frame; the clip artwork usually does not.
+const LaneClips = memo(function LaneClips({ clips, color, muted, kind, seed, laneHeight, pixelsPerSecond, tempo, silenced }: {
+  clips: readonly LaneClip[]; color: string; muted?: boolean; kind: "audio" | "midi";
+  seed: number; laneHeight: number; pixelsPerSecond: number; tempo: number; silenced: boolean;
+}) {
+  return (
+    <>
+      {clips.map((clip) => {
+        const metrics = rowMetrics(clip.kind === "midi" ? "midi" : kind, laneHeight);
+        const clipWidth = Math.max(0, clip.duration * pixelsPerSecond);
+        if (clipWidth < 1) return null;
+        const common = {
+          color,
+          duration: clip.duration,
+          height: metrics.clipHeight,
+          muted,
+          name: clip.label,
+          offset: clip.offset,
+          pixelsPerSecond,
+          recording: clip.recording,
+          seed: clip.seed ?? seed,
+          tempo,
+          width: clipWidth,
+        };
+        return (
+          <div
+            key={clip.label}
+            className="absolute z-[1] transition-opacity duration-300"
+            style={{ left: clip.start * pixelsPerSecond, top: metrics.clipInsetY, width: clipWidth, height: metrics.clipHeight, opacity: silenced ? 0.45 : 1 }}
+          >
+            {clip.kind === "midi" ? (
+              <MidiClipLite {...common} profile={(clip.profile as MidiProfile) ?? "keys"} selected={clip.selected} />
+            ) : (
+              <AudioClipLite {...common} profile={(clip.profile as AudioProfile) ?? "mix"} />
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/src/features/daw-preview/ChannelStripLite.tsx b/src/features/daw-preview/ChannelStripLite.tsx
index d2c445b..6262e81 100644
--- a/src/features/daw-preview/ChannelStripLite.tsx
+++ b/src/features/daw-preview/ChannelStripLite.tsx
@@ -3,7 +3,7 @@
 // Every `useDAWStore` selector is a prop, and the FX chain panel, context menu,
 // native-bridge clip reset, scoped-action executor and grouped wheel handlers
 // are dropped. Markup and Tailwind classes are otherwise kept as-is.
-import { memo } from "react";
+import { createContext, memo, useContext, useMemo } from "react";
 import { ChevronDown, Power } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { DawButton } from "./DawButton";
@@ -94,7 +94,23 @@ export interface ChannelStripLiteProps {
   sendCount?: number;
 }
 
-export const ChannelStripLite = memo(function ChannelStripLite({
+const MeterContext = createContext({ level: 0, clipping: false });
+
+const ChannelMeter = ({ isMaster, name }: { isMaster: boolean; name: string }) => {
+  const { level, clipping } = useContext(MeterContext);
+  return isMaster ? <MasterPeakMeterCluster level={level} clipping={clipping} /> : (
+    <PeakMeter level={level} ariaLabel={`${name} meter: audio output`} stereo={true}
+      clipping={clipping} scaleMode="extended" showThresholdLine={true} />
+  );
+};
+
+// Meter values update independently of the much larger control/label subtree.
+export const ChannelStripLite = memo(function ChannelStripLite({ level, clipping = false, ...controls }: ChannelStripLiteProps) {
+  const meter = useMemo(() => ({ level, clipping }), [level, clipping]);
+  return <MeterContext.Provider value={meter}><ChannelStripControls {...controls} /></MeterContext.Provider>;
+});
+
+const ChannelStripControls = memo(function ChannelStripControls({
   name,
   trackIndex,
   color,
@@ -108,13 +124,11 @@ export const ChannelStripLite = memo(function ChannelStripLite({
   armed = false,
   isSelected = false,
   isMaster = false,
-  level,
-  clipping = false,
   mono = false,
   automationRead = true,
   automationWrite = false,
   sendCount = 0,
-}: ChannelStripLiteProps) {
+}: Omit<ChannelStripLiteProps, "level" | "clipping">) {
   const panDisplay = pan === 0 ? "C" : pan > 0 ? `R${Math.round(Math.abs(pan * 100))}` : `L${Math.round(Math.abs(pan * 100))}`;
   const dbMarks = isMaster ? DB_MARKS : DB_MARKS.filter((m) => [12, 0, -12, -48, -60].includes(m.db));
 
@@ -273,18 +287,7 @@ export const ChannelStripLite = memo(function ChannelStripLite({
       {/* Meter + Fader Section */}
       <div className="flex-1 flex gap-0.5 px-1 py-0.5 min-h-0 overflow-hidden">
         <div className="shrink-0 h-full">
-          {isMaster ? (
-            <MasterPeakMeterCluster level={level} clipping={clipping} />
-          ) : (
-            <PeakMeter
-              level={level}
-              ariaLabel={`${name} meter: audio output`}
-              stereo={true}
-              clipping={clipping}
-              scaleMode="extended"
-              showThresholdLine={true}
-            />
-          )}
+          <ChannelMeter isMaster={isMaster} name={name} />
         </div>
 
         <div className={`relative ${CHANNEL_STRIP_DB_LABEL_WIDTH_CLASS} shrink-0 h-full`}>
diff --git a/src/features/daw-preview/TrackHeaderLite.tsx b/src/features/daw-preview/TrackHeaderLite.tsx
index 5c20ca5..d7668d8 100644
--- a/src/features/daw-preview/TrackHeaderLite.tsx
+++ b/src/features/daw-preview/TrackHeaderLite.tsx
@@ -5,7 +5,7 @@
 // dropped. The control row wraps exactly like upstream's TCP (a flex-wrap
 // row that the lane height clips), at a 20 px density so two rows fit the
 // 48 px lanes of a 640 px stage.
-import { memo } from "react";
+import { createContext, memo, useContext } from "react";
 import { Power, StickyNote, Volume2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { DawButton } from "./DawButton";
@@ -103,7 +103,28 @@ export interface TrackHeaderLiteProps {
 /** Meter gradient thresholds from upstream getMeterColor(). */
 const meterColor = (dbNorm: number) => (dbNorm > 0.92 ? "#ef4444" : dbNorm > 0.85 ? "#facc15" : "#16a34a");
 
-export const TrackHeaderLite = memo(function TrackHeaderLite({
+const ActivityContext = createContext(0);
+const TrackActivity = ({ type }: { type: TrackType }) => {
+  const level = useContext(ActivityContext);
+  const dbNorm = level > 0.001 ? Math.max(0, (20 * Math.log10(level) + 60) / 72) : 0;
+  return (
+    <div className="w-2 pt-1 bg-neutral-900 flex flex-col-reverse border-l border-neutral-800 shrink-0 mr-1" data-meter-source={type === "audio" ? "audio_output" : "midi_input"}>
+      <div
+        className="w-full"
+        style={{
+          height: `${Math.min(100, dbNorm * 100)}%`,
+          background: type === "audio" ? meterColor(dbNorm) : "linear-gradient(to top, #22d3ee, #a5f3fc)",
+        }}
+      />
+    </div>
+  );
+};
+
+export const TrackHeaderLite = memo(function TrackHeaderLite({ level = 0, ...controls }: TrackHeaderLiteProps) {
+  return <ActivityContext.Provider value={level}><TrackControls {...controls} /></ActivityContext.Provider>;
+});
+
+const TrackControls = memo(function TrackControls({
   name,
   color,
   type = "audio",
@@ -117,11 +138,9 @@ export const TrackHeaderLite = memo(function TrackHeaderLite({
   soloed = false,
   armed = false,
   selected = false,
-  level = 0,
   height,
   entering = false,
-}: TrackHeaderLiteProps) {
-  const dbNorm = level > 0.001 ? Math.max(0, (20 * Math.log10(level) + 60) / 72) : 0;
+}: Omit<TrackHeaderLiteProps, "level">) {
   const twoRows = height >= TWO_ROW_LANE_HEIGHT;
   const typeLabel = type === "audio" ? "Audio" : type === "midi" ? "MIDI" : "Instrument";
 
@@ -189,15 +208,7 @@ export const TrackHeaderLite = memo(function TrackHeaderLite({
         {/* Right side: vertical activity meter. Upstream pulses this while an
             armed track has signal and eases it over 75 ms; the stage feeds it
             every frame, so both read as flicker and are left out. */}
-        <div className="w-2 pt-1 bg-neutral-900 flex flex-col-reverse border-l border-neutral-800 shrink-0 mr-1" data-meter-source={type === "audio" ? "audio_output" : "midi_input"}>
-          <div
-            className="w-full"
-            style={{
-              height: `${Math.min(100, dbNorm * 100)}%`,
-              background: type === "audio" ? meterColor(dbNorm) : "linear-gradient(to top, #22d3ee, #a5f3fc)",
-            }}
-          />
-        </div>
+        <TrackActivity type={type} />
       </div>
     </div>
   );
diff --git a/src/features/daw-preview/stage/meterPlayback.ts b/src/features/daw-preview/stage/meterPlayback.ts
new file mode 100644
index 0000000..6054d44
--- /dev/null
+++ b/src/features/daw-preview/stage/meterPlayback.ts
@@ -0,0 +1,53 @@
+/** Schedule a meter only when its own canvas is visible and its stage can play.
+ * Keep the canvas and elapsed animation time across pauses; never clear on exit.
+ */
+export function startMeterPlayback(canvas: HTMLCanvasElement, draw: (time: number) => void, initialTime = 0) {
+  const stage = canvas.closest<HTMLElement>(".daw-session");
+  const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  let intersecting = !("IntersectionObserver" in window);
+  let frame: number | null = null;
+  let lastTime: number | null = null;
+  let elapsed = initialTime;
+  let disposed = false;
+  const visible = () => intersecting && document.visibilityState === "visible";
+  const playing = () => visible() && !motion.matches && (!stage || stage.dataset.stagePlaying === "true");
+  const tick = (time: number) => {
+    frame = null;
+    if (disposed || !visible()) return;
+    // The upstream meter uses timestamps for peak hold/decay. Hidden time must
+    // not advance it or produce a jump when the same canvas resumes.
+    elapsed += lastTime === null ? 50 : time - lastTime;
+    lastTime = time;
+    draw(elapsed);
+    if (playing()) frame = requestAnimationFrame(tick);
+    else lastTime = null;
+  };
+  const sync = () => {
+    if (frame !== null) cancelAnimationFrame(frame);
+    frame = null;
+    lastTime = null;
+    // One rest-frame paint also keeps reduced-motion and resized meters legible.
+    if (visible()) frame = requestAnimationFrame(tick);
+  };
+  const observer = "IntersectionObserver" in window ? new IntersectionObserver(entries => {
+    for (const entry of entries) if (entry.target === canvas) intersecting = entry.isIntersecting;
+    sync();
+  }) : null;
+  observer?.observe(canvas);
+  const stageObserver = new MutationObserver(sync);
+  if (stage) stageObserver.observe(stage, { attributes: true, attributeFilter: ["data-stage-playing"] });
+  const resizeObserver = new ResizeObserver(sync);
+  resizeObserver.observe(canvas);
+  document.addEventListener("visibilitychange", sync);
+  motion.addEventListener("change", sync);
+  sync();
+  return () => {
+    disposed = true;
+    if (frame !== null) cancelAnimationFrame(frame);
+    observer?.disconnect();
+    stageObserver.disconnect();
+    resizeObserver.disconnect();
+    document.removeEventListener("visibilitychange", sync);
+    motion.removeEventListener("change", sync);
+  };
+}
diff --git a/src/features/daw-preview/stage/useStageTimeline.ts b/src/features/daw-preview/stage/useStageTimeline.ts
index e1c46cf..6219170 100644
--- a/src/features/daw-preview/stage/useStageTimeline.ts
+++ b/src/features/daw-preview/stage/useStageTimeline.ts
@@ -58,6 +58,7 @@ export const useStageTimeline = <TState,>(
 
   useEffect(() => {
     if (!animate) {
+      if (scope.current) scope.current.dataset.stagePlaying = "false";
       setState(spec.static());
       return;
     }
@@ -90,6 +91,8 @@ export const useStageTimeline = <TState,>(
 
     const syncPlayback = () => {
       const shouldPlay = pageVisible && isStageAllowed(entry);
+      const playing = String(shouldPlay && Boolean(timeline));
+      if (element.dataset.stagePlaying !== playing) element.dataset.stagePlaying = playing;
       if (!timeline) {
         if (shouldPlay) prepareTimeline();
         return;
@@ -129,8 +132,9 @@ export const useStageTimeline = <TState,>(
       "IntersectionObserver" in window
         ? new IntersectionObserver(
             (entries) => {
-              const visible = entries.find((item) => item.target === element);
-              if (visible) updateStageRatio(entry, visible.isIntersecting ? Math.max(visible.intersectionRatio, 0.01) : 0);
+              for (const visible of entries) {
+                if (visible.target === element) updateStageRatio(entry, visible.isIntersecting ? Math.max(visible.intersectionRatio, 0.01) : 0);
+              }
             },
             { threshold: [0, 0.05, 0.25, 0.5, 0.75, 1] },
           )
@@ -166,6 +170,7 @@ export const useStageTimeline = <TState,>(
       document.removeEventListener("visibilitychange", onVisibility);
       unregister();
       timeline?.kill();
+      element.dataset.stagePlaying = "false";
     };
   }, [animate, scope, spec, startDelay, fps, priority]);
 
diff --git a/src/features/daw-preview/vendor/PeakMeter.tsx b/src/features/daw-preview/vendor/PeakMeter.tsx
index feeffc2..d43d643 100644
--- a/src/features/daw-preview/vendor/PeakMeter.tsx
+++ b/src/features/daw-preview/vendor/PeakMeter.tsx
@@ -1,6 +1,7 @@
 // Source: OpenStudio frontend/src/components/PeakMeter.tsx @ d2056151222fefcede123ef614ec38c6893cbfd5
 // Vendored by scripts/vendor-openstudio-ui.mjs — do not edit by hand, re-run the script.
 import { useEffect, useRef, useCallback } from "react";
+import { startMeterPlayback } from "../stage/meterPlayback";
 import {
   getMeterSegmentColor,
   getPeakIndicatorColor,
@@ -94,7 +95,6 @@ export function PeakMeter({
   // Peak hold with 3 dB/sec decay
   const peakHoldLevelRef = useRef(0);
   const peakHoldTimerRef = useRef(0); // timestamp when peak was captured
-  const animFrameRef = useRef<number | null>(null);
   const lastDrawTimeRef = useRef(0);
 
   // RMS simulation via exponential smoothing of squared peak values
@@ -163,13 +163,12 @@ export function PeakMeter({
   useEffect(() => {
     const draw = (timestamp: number) => {
       const canvas = canvasRef.current;
-      if (!canvas) { animFrameRef.current = requestAnimationFrame(draw); return; }
+      if (!canvas) { return; }
       const ctx = canvas.getContext("2d");
-      if (!ctx) { animFrameRef.current = requestAnimationFrame(draw); return; }
+      if (!ctx) { return; }
 
       // Throttle to ~20fps; backend meter events arrive around 10Hz.
       if (timestamp - lastDrawTimeRef.current < 50) {
-        animFrameRef.current = requestAnimationFrame(draw);
         return;
       }
       lastDrawTimeRef.current = timestamp;
@@ -191,7 +190,7 @@ export function PeakMeter({
       const shouldShowRulingLines = showRulingLinesRef.current;
       const currentColorScheme = colorSchemeRef.current;
       const ch = height || containerHeightRef.current;
-      if (ch <= 0) { animFrameRef.current = requestAnimationFrame(draw); return; }
+      if (ch <= 0) { return; }
 
       // Sync canvas pixel resolution only when it actually changed
       if (canvas.height !== ch) {
@@ -384,15 +383,11 @@ export function PeakMeter({
         ctx.fillRect(0, 0, width, 3);
       }
 
-      animFrameRef.current = requestAnimationFrame(draw);
     };
 
-    animFrameRef.current = requestAnimationFrame(draw);
-    return () => {
-      if (animFrameRef.current !== null) {
-        cancelAnimationFrame(animFrameRef.current);
-      }
-    };
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    return startMeterPlayback(canvas, draw, lastDrawTimeRef.current);
   }, [height]);
 
   return (
diff --git a/src/features/daw-preview/vendor/README.md b/src/features/daw-preview/vendor/README.md
index bf6ec40..9cd0661 100644
--- a/src/features/daw-preview/vendor/README.md
+++ b/src/features/daw-preview/vendor/README.md
@@ -17,6 +17,7 @@ What the script changes on the way in:
 
 | File | Change |
 |---|---|
+| `PeakMeter.tsx` | drawing is unchanged; the local meter scheduler gates frame callbacks by canvas intersection, stage playback, tab visibility and reduced motion, retaining the canvas and peak-hold time while paused |
 | `NAMRackControlAssets.ts` | `new URL(../assets/…, import.meta.url)` → `/assets/openstudio/nam/controls/…` public paths; frame size 192 → 96 px |
 | `NAMRackKnob.tsx` | store-bound imports (`services/NativeBridge`, `utils/builtInParamValue`, `utils/parameterWheel`) → `./stubs/*` |
 | `stubs/builtInParamValue.ts` | same import rewrite |
diff --git a/src/features/hero-aura/readiness.ts b/src/features/hero-aura/readiness.ts
new file mode 100644
index 0000000..a4f15cd
--- /dev/null
+++ b/src/features/hero-aura/readiness.ts
@@ -0,0 +1,93 @@
+export const AURA_ORIGIN = "https://aura.promad.design";
+
+const SETTLE_MS = 1000;
+const RESPONSE_TIMEOUT_MS = 4000;
+const LOAD_TIMEOUT_MS = 30_000;
+
+// Aura's capture API returns black when its lazy canvas has not painted yet.
+// This particular light-theme scene has an opaque, near-white upper centre.
+// Check actual pixels, not merely a successful iframe load or a PNG response.
+const hasLightFrame = async (dataUrl: string): Promise<boolean> => {
+  const image = new Image();
+  image.src = dataUrl;
+  try {
+    await image.decode();
+    if (!image.naturalWidth || !image.naturalHeight) return false;
+    const canvas = document.createElement("canvas");
+    canvas.width = 8;
+    canvas.height = 8;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (!context) return false;
+    // Avoid the original scene's dark edge vignette; do not alter the scene itself.
+    context.drawImage(image, image.naturalWidth / 4, image.naturalHeight / 8,
+      image.naturalWidth / 2, image.naturalHeight / 4, 0, 0, 8, 8);
+    const pixels = context.getImageData(0, 0, 8, 8).data;
+    let lightPixels = 0;
+    for (let i = 0; i < pixels.length; i += 4) {
+      if (pixels[i] > 210 && pixels[i + 1] > 210 && pixels[i + 2] > 210 && pixels[i + 3] > 245) lightPixels++;
+    }
+    return lightPixels >= 58;
+  } catch {
+    return false;
+  }
+};
+
+/** Probe only during startup. No capture requests are sent after readiness. */
+export const observeAuraReadiness = (
+  frame: HTMLIFrameElement,
+  onReady: () => void,
+  onFailure: () => void,
+): (() => void) => {
+  let cancelled = false;
+  let requestId: string | null = null;
+  let retryTimer = 0;
+  let responseTimer = 0;
+  let settled = false;
+
+  const cleanup = () => {
+    cancelled = true;
+    window.clearTimeout(retryTimer);
+    window.clearTimeout(responseTimer);
+    window.clearTimeout(deadline);
+    window.removeEventListener("message", receive);
+  };
+  const fail = () => { cleanup(); onFailure(); };
+  const request = () => {
+    if (cancelled || !frame.contentWindow) return;
+    requestId = `aura-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    // The smaller capture is only a readiness probe. The visible iframe retains
+    // its original resolution, effects, colours and frame rate.
+    frame.contentWindow.postMessage({ type: "promad-aura:capture", requestId, pixelRatio: 0.25 }, AURA_ORIGIN);
+    responseTimer = window.setTimeout(() => {
+      requestId = null;
+      retryTimer = window.setTimeout(request, 750);
+    }, RESPONSE_TIMEOUT_MS);
+  };
+  const receive = async (event: MessageEvent<unknown>) => {
+    if (cancelled || !requestId || event.origin !== AURA_ORIGIN || event.source !== frame.contentWindow) return;
+    const data = event.data;
+    if (!data || typeof data !== "object" || !("type" in data) || data.type !== "promad-aura:capture-result" ||
+      !("requestId" in data) || data.requestId !== requestId) return;
+    requestId = null;
+    window.clearTimeout(responseTimer);
+    const valid = "dataUrl" in data && typeof data.dataUrl === "string" &&
+      data.dataUrl.startsWith("data:image/png;base64,") && data.dataUrl.length <= 2_000_000 &&
+      await hasLightFrame(data.dataUrl);
+    if (cancelled) return;
+    if (!valid) {
+      settled = false;
+      retryTimer = window.setTimeout(request, 750);
+    } else if (!settled) {
+      // Start settling after a real frame, then verify again before revealing.
+      settled = true;
+      retryTimer = window.setTimeout(request, SETTLE_MS);
+    } else {
+      cleanup();
+      onReady();
+    }
+  };
+  const deadline = window.setTimeout(fail, LOAD_TIMEOUT_MS);
+  window.addEventListener("message", receive);
+  retryTimer = window.setTimeout(request, 500);
+  return cleanup;
+};
diff --git a/src/features/hero-aura/startup.ts b/src/features/hero-aura/startup.ts
new file mode 100644
index 0000000..8c8bb32
--- /dev/null
+++ b/src/features/hero-aura/startup.ts
@@ -0,0 +1,47 @@
+/** Start decorative work after the route is rendered and the initial loader exits. */
+export const afterHeroPageReady = (callback: () => void): (() => void) => {
+  let cancelled = false;
+  let scheduled = false;
+  let firstFrame = 0;
+  let secondFrame = 0;
+  let idleId = 0;
+
+  const removeListeners = () => {
+    window.removeEventListener("openstudio:app-ready", check);
+    window.removeEventListener("openstudio:intro-hidden", check);
+  };
+  const run = () => {
+    if (cancelled) return;
+    cancelled = true;
+    removeListeners();
+    callback();
+  };
+  function check() {
+    if (cancelled || scheduled || !window.__openstudioAppReady || !window.__openstudioIntroHidden) return;
+    scheduled = true;
+    removeListeners();
+    // Also paint the newly mounted hero on client navigation, when the one-time
+    // readiness flags are already set. Do not wait for lazy below-fold resources.
+    firstFrame = window.requestAnimationFrame(() => {
+      secondFrame = window.requestAnimationFrame(() => {
+        if (cancelled) return;
+        if (typeof window.requestIdleCallback === "function") {
+          // Maximum idle scheduling wait, not a mandatory two-second delay.
+          idleId = window.requestIdleCallback(run, { timeout: 2000 });
+        } else {
+          run();
+        }
+      });
+    });
+  }
+  window.addEventListener("openstudio:app-ready", check);
+  window.addEventListener("openstudio:intro-hidden", check);
+  check();
+  return () => {
+    cancelled = true;
+    removeListeners();
+    window.cancelAnimationFrame(firstFrame);
+    window.cancelAnimationFrame(secondFrame);
+    if (idleId) window.cancelIdleCallback?.(idleId);
+  };
+};
diff --git a/src/lib/analyticsConsent.ts b/src/lib/analyticsConsent.ts
index 5fd4b54..e7aa8f4 100644
--- a/src/lib/analyticsConsent.ts
+++ b/src/lib/analyticsConsent.ts
@@ -1,7 +1,8 @@
+import { CONSENT_KEY, CONSENT_MAX_AGE_MS, parseConsentRecord } from "./consentRecord";
 export const CONSENT_EVENT = "openstudio:analytics-consent";
 export const PRIVACY_CHOICES_EVENT = "openstudio:privacy-choices";
-const KEY = "openstudio.analytics-consent.v1";
-const MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000;
+const KEY = CONSENT_KEY;
+const MAX_AGE_MS = CONSENT_MAX_AGE_MS;
 // Browsers overflow longer timeout delays, so renew the timer for distant expiry.
 const MAX_TIMEOUT_MS = 2 ** 31 - 1;
 export type AnalyticsConsent = "accepted" | "rejected" | null;
@@ -11,16 +12,7 @@ function readStoredConsent(): { choice: Exclude<AnalyticsConsent, null>; time: n
   if (typeof window === "undefined") return null;
 
   try {
-    const record = JSON.parse(window.localStorage.getItem(KEY) ?? "null");
-    if (
-      record &&
-      (record.choice === "accepted" || record.choice === "rejected") &&
-      Number.isFinite(record.time) &&
-      Date.now() >= record.time &&
-      Date.now() - record.time < MAX_AGE_MS
-    ) {
-      return record;
-    }
+    return parseConsentRecord(window.localStorage.getItem(KEY), Date.now(), MAX_AGE_MS);
   } catch {
     // Only an explicit choice made in this page can enable analytics without storage.
   }
diff --git a/src/lib/consentRecord.ts b/src/lib/consentRecord.ts
new file mode 100644
index 0000000..8a75377
--- /dev/null
+++ b/src/lib/consentRecord.ts
@@ -0,0 +1,16 @@
+export const CONSENT_KEY = "openstudio.analytics-consent.v1";
+export const CONSENT_MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000;
+
+// Self-contained so prerendering can serialize this same validation into the
+// tiny pre-paint bootstrap. Never treat malformed/expired storage as consent.
+export function parseConsentRecord(raw: string | null, now: number, maxAge: number): { choice: "accepted" | "rejected"; time: number } | null {
+  try {
+    const record: unknown = JSON.parse(raw ?? "null");
+    if (record && typeof record === "object" && "choice" in record && "time" in record &&
+      (record.choice === "accepted" || record.choice === "rejected") &&
+      typeof record.time === "number" && Number.isFinite(record.time) && now >= record.time && now - record.time < maxAge) {
+      return { choice: record.choice, time: record.time };
+    }
+  } catch { /* Unavailable or invalid storage requires a new choice. */ }
+  return null;
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 9297f0a..c771ffa 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -27,6 +27,7 @@ import { SITE_PATHS, docPath } from "@/constants/routes";
 import { formatBytes, formatCount, formatDate } from "@/lib/format";
 import { ArrowLink, Cta, DownloadCta, Eyebrow, Frame, GradIcon, Kicker } from "@/components/ui/primitives";
 import { LiveStage, type StageSelection } from "@/features/daw-preview/stage/LiveStage";
+import HeroAuraBackdrop from "@/components/HeroAuraBackdrop";
 import LiveSession from "@/features/daw-preview/LiveSession";
 import ArrangementStage from "@/features/daw-preview/stages/ArrangementStage";
 import MixerStage from "@/features/daw-preview/stages/MixerStage";
@@ -382,38 +383,41 @@ const HomePage = () => {
       />
 
       {/* Hero */}
-      <div className="sp-container">
-        <div className="sp-hero-stack">
-          <div data-sp-reveal="hero">
-            <h1 className="sp-h1 sp-h1--hero">
-              <span className="sp-hero-stack__line">Record, edit, mix, and generate.</span>{" "}
-              <span className="sp-hero-stack__line">One free DAW.</span>
-            </h1>
-            <Eyebrow icon={ShieldCheck}>Free · Open source · AGPLv3</Eyebrow>
-          </div>
-          <Frame hero className="sp-home-session" reveal="rise">
-            <ErrorBoundary
-              fallback={<div className="grid h-full place-items-center text-sm text-slate-300">Illustration unavailable</div>}
-            >
-              <LiveSession />
-            </ErrorBoundary>
-          </Frame>
-          <div className="sp-hero-stack__copy" data-sp-reveal="hero">
-            <div className="flex items-center justify-center gap-[16px] flex-wrap mb-[12px]">
-              <DownloadCta />
-              <ArrowLink to={SITE_PATHS.features} tone="plain">
-                See all features
-              </ArrowLink>
+      <section className="sp-hero-aura">
+        <HeroAuraBackdrop />
+        <div className="sp-container sp-hero-aura__content">
+          <div className="sp-hero-stack">
+            <div data-sp-reveal="hero">
+              <h1 className="sp-h1 sp-h1--hero">
+                <span className="sp-hero-stack__line">Record, edit, mix, and generate.</span>{" "}
+                <span className="sp-hero-stack__line">One free DAW.</span>
+              </h1>
+              <Eyebrow icon={ShieldCheck}>Free · Open source · AGPLv3</Eyebrow>
+            </div>
+            <Frame hero className="sp-home-session" reveal="rise">
+              <ErrorBoundary
+                fallback={<div className="grid h-full place-items-center text-sm text-slate-300">Illustration unavailable</div>}
+              >
+                <LiveSession />
+              </ErrorBoundary>
+            </Frame>
+            <div className="sp-hero-stack__copy" data-sp-reveal="hero">
+              <div className="flex items-center justify-center gap-[16px] flex-wrap mb-[12px]">
+                <DownloadCta />
+                <ArrowLink to={SITE_PATHS.features} tone="plain">
+                  See all features
+                </ArrowLink>
+              </div>
+              <div className="sp-mono leading-[1.5] mb-[22px]">{heroMeta}</div>
+              <p className="sp-lede text-[17px] leading-[1.6] max-w-[640px] mb-[16px]">
+                Multitrack recording, MIDI, a full mixer, VST3/CLAP/LV2 hosting, graphical pitch editing, local AI
+                generation and stem separation, and a Neural Amp Modeler guitar rig. All of it is in the base app, on
+                Windows, macOS, and Linux.
+              </p>
             </div>
-            <div className="sp-mono leading-[1.5] mb-[22px]">{heroMeta}</div>
-            <p className="sp-lede text-[17px] leading-[1.6] max-w-[640px] mb-[16px]">
-              Multitrack recording, MIDI, a full mixer, VST3/CLAP/LV2 hosting, graphical pitch editing, local AI
-              generation and stem separation, and a Neural Amp Modeler guitar rig. All of it is in the base app, on
-              Windows, macOS, and Linux.
-            </p>
           </div>
         </div>
-      </div>
+      </section>
 
       {/* Showcase (dark) */}
       <section className="sp-dark-panel" data-sp-reveal="band">
diff --git a/src/prerender.tsx b/src/prerender.tsx
index 490d8f0..0108247 100644
--- a/src/prerender.tsx
+++ b/src/prerender.tsx
@@ -2,6 +2,8 @@ import { type ComponentType, type ReactElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import SiteShell from "@/components/layout/SiteShell";
+import PrivacyChoices from "@/components/PrivacyChoices";
+import { CONSENT_KEY, CONSENT_MAX_AGE_MS, parseConsentRecord } from "./lib/consentRecord";
 import { DOCS, loadDocContent } from "@/features/docs";
 import { blogPosts } from "./data/blogs";
 import { loadBlogPostContent } from "./data/blogContent";
@@ -91,5 +93,17 @@ export async function renderRoute(pathname: string) {
   renderToStaticMarkup(tree());
   const html = renderToStaticMarkup(tree());
   if (!state.seo) throw new Error(`Missing SEO: ${pathname}`);
-  return { html, seo: state.seo, updated: state.docContent?.updated };
+  const privacyHtml = renderToStaticMarkup(<MemoryRouter><PrivacyChoices /></MemoryRouter>);
+  // The parser is shared with runtime consent. This only controls visibility;
+  // it cannot initialize analytics or grant permission.
+  const privacyBootstrap = `(() => {
+    let chosen = false;
+    try { chosen = Boolean((${parseConsentRecord.toString()})(localStorage.getItem(${JSON.stringify(CONSENT_KEY)}), Date.now(), ${CONSENT_MAX_AGE_MS})); } catch {}
+    const host = document.getElementById("openstudio-privacy");
+    if (host) host.hidden = chosen;
+    window.addEventListener("openstudio:static-route-restored", () => {
+      if (host?.querySelector("[data-privacy-prerender]")) host.hidden = true;
+    }, { once: true });
+  })();`;
+  return { html, privacyHtml, privacyBootstrap, seo: state.seo, updated: state.docContent?.updated };
 }
diff --git a/src/styles/site.css b/src/styles/site.css
index 797632e..8cecc00 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -277,6 +277,71 @@
   border-radius: 12px;
 }
 
+/* home: the aura embed sits behind the hero as a full-bleed, non-interactive background */
+.sp-hero-aura {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  /* the embed paints black until its scene is up, so the page ground stays underneath */
+  background: var(--sp-paper);
+}
+
+/* the intro loader's surface (same base, same mint and pink glows, held still: animating
+   them under the hero halved the desktop frame rate) stays under the hero until the live
+   embed has settled and faded in over it */
+.sp-hero-aura__bg {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse at 30% 65%, rgba(0, 234, 210, 0.32), transparent 48%),
+    radial-gradient(ellipse at 72% 30%, rgba(241, 63, 154, 0.24), transparent 46%),
+    #fcfcff;
+}
+
+/* Hide inactive frames after the fade. An active startup frame must remain
+   renderable at zero opacity: visibility:hidden can suspend its animation frames,
+   preventing both the renderer and its readiness capture from ever completing. */
+.sp-hero-aura__frame {
+  position: relative;
+  z-index: 1;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 650ms ease-in-out,
+    visibility 0s linear 650ms;
+}
+
+.sp-hero-aura__bg[data-playing="true"] .sp-hero-aura__frame {
+  visibility: visible;
+  transition:
+    opacity 650ms ease-in-out,
+    visibility 0s;
+}
+
+.sp-hero-aura__bg[data-playing="true"] .sp-hero-aura__frame[data-ready="true"] {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sp-hero-aura__frame {
+    transition: none;
+  }
+}
+
+.sp-hero-aura__frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.sp-hero-aura__content {
+  position: relative;
+}
+
 /* home: the hero is one centred column — title, live session, then the copy */
 .sp-hero-stack {
   display: flex;
diff --git a/test/daw-meter-playback-browser.test.mjs b/test/daw-meter-playback-browser.test.mjs
new file mode 100644
index 0000000..4796500
--- /dev/null
+++ b/test/daw-meter-playback-browser.test.mjs
@@ -0,0 +1,70 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { chromium } from "playwright";
+import { preview } from "vite";
+
+test("meter canvases stop drawing offscreen, hidden and in reduced motion, and resume in place", { timeout: 60_000 }, async t => {
+  const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0 } });
+  const browser = await chromium.launch();
+  try {
+    for (const width of [390, 1440]) await t.test(`${width}px viewport`, async () => {
+      const context = await browser.newContext({ viewport: { width, height: 900 } });
+      await context.route("https://**/*", route => route.abort());
+      await context.addInitScript(() => {
+        localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }));
+        const counts = new WeakMap();
+        const fill = CanvasRenderingContext2D.prototype.fillRect;
+        CanvasRenderingContext2D.prototype.fillRect = function(x, y, w, h) {
+          if (this.canvas.matches("canvas[data-meter-source]") && x === 0 && y === 0 && w === this.canvas.width && h === this.canvas.height) {
+            counts.set(this.canvas, (counts.get(this.canvas) ?? 0) + 1);
+          }
+          return fill.call(this, x, y, w, h);
+        };
+        window.meterPaints = () => [...document.querySelectorAll("canvas[data-meter-source]")].reduce((sum, canvas) => sum + (counts.get(canvas) ?? 0), 0);
+      });
+      const page = await context.newPage();
+      try {
+        await page.goto(server.resolvedUrls.local[0]);
+        await page.waitForFunction(() => window.__openstudioAppReady && window.__openstudioIntroHidden);
+        const meter = page.locator("canvas[data-meter-source]").first();
+        await meter.scrollIntoViewIfNeeded();
+        await page.waitForFunction(() => window.meterPaints() > 5);
+        await meter.evaluate(el => { window.originalMeter = el; });
+        const sample = () => page.evaluate(() => window.meterPaints());
+        const stopped = async () => {
+          await page.waitForTimeout(250);
+          const before = await sample();
+          await page.waitForTimeout(800);
+          assert.equal(await sample(), before, "no canvas draw work while paused");
+        };
+        const resumed = async () => {
+          const before = await sample();
+          await page.waitForFunction(previous => window.meterPaints() > previous + 4, before);
+          assert.equal(await meter.evaluate(el => el === window.originalMeter), true);
+        };
+        await page.evaluate(() => scrollTo({ top: document.body.scrollHeight, behavior: "instant" }));
+        await stopped();
+        await meter.scrollIntoViewIfNeeded();
+        await resumed();
+        // Exercise our visibility handler explicitly; not a physical OS-tab test.
+        await page.evaluate(() => {
+          Object.defineProperty(document, "visibilityState", { configurable: true, value: "hidden" });
+          document.dispatchEvent(new Event("visibilitychange"));
+        });
+        await stopped();
+        await page.evaluate(() => {
+          delete document.visibilityState;
+          document.dispatchEvent(new Event("visibilitychange"));
+        });
+        await resumed();
+        await page.emulateMedia({ reducedMotion: "reduce" });
+        await stopped();
+        await page.emulateMedia({ reducedMotion: "no-preference" });
+        await resumed();
+      } finally { await context.close(); }
+    });
+  } finally {
+    await browser.close();
+    await new Promise(resolve => server.httpServer.close(resolve));
+  }
+});
diff --git a/test/first-load-animation-browser.test.mjs b/test/first-load-animation-browser.test.mjs
index f48d4fc..c357a5c 100644
--- a/test/first-load-animation-browser.test.mjs
+++ b/test/first-load-animation-browser.test.mjs
@@ -41,7 +41,7 @@ test("illustrations start after slow first loads and uncached navigation", { tim
           await gate;
           await route.continue().catch(() => undefined);
         });
-        await context.addInitScript(() => localStorage.setItem(
+        await context.addInitScript(() => window.top === window && localStorage.setItem(
           "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
         ));
         if (entry.lateVisibility) await context.addInitScript(() => {
diff --git a/test/hero-aura-browser.test.mjs b/test/hero-aura-browser.test.mjs
new file mode 100644
index 0000000..19cf786
--- /dev/null
+++ b/test/hero-aura-browser.test.mjs
@@ -0,0 +1,165 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { chromium } from "playwright";
+import { preview } from "vite";
+
+const origin = "https://aura.promad.design";
+const embed = `${origin}/embed/**`;
+const selector = ".sp-hero-aura__frame";
+// Exercise the existing cross-origin capture protocol, including actual PNG
+// decoding. The live-service smoke check is documented separately.
+const fixture = `<!doctype html><body><canvas width="64" height="64"></canvas><script>
+window.allowed = false;
+window.captures = 0;
+window.firstRequest = null;
+window.fill = '#fff';
+addEventListener('message', async event => {
+  if (event.data?.type !== 'promad-aura:capture') return;
+  window.firstRequest ||= event.data.requestId;
+  window.captures++;
+  if (!window.allowed) return;
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  const canvas = document.querySelector('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = window.fill; ctx.fillRect(0, 0, 64, 64);
+  event.source.postMessage({ type:'promad-aura:capture-result', requestId:event.data.requestId,
+    dataUrl:canvas.toDataURL('image/png') }, event.origin);
+});
+</script>`;
+
+test("Aura starts when one visibility batch contains hidden then visible records", { timeout: 20_000 }, async () => {
+  const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0, strictPort: true } });
+  const browser = await chromium.launch();
+  try {
+    const context = await browser.newContext({ viewport: { width: 390, height: 844 } });
+    await context.route("https://**/*", route => route.abort());
+    await context.route(embed, route => route.fulfill({ contentType: "text/html", body: fixture }));
+    await context.addInitScript(() => {
+      if (window.top !== window) return;
+      localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }));
+      const NativeObserver = window.IntersectionObserver;
+      window.IntersectionObserver = class extends NativeObserver {
+        constructor(callback, options) {
+          super((entries, observer) => {
+            const latest = entries.at(-1);
+            if (latest?.target.classList.contains("sp-hero-aura__bg")) {
+              // A hidden first layout and the revealed layout can be queued
+              // together while the main thread is busy. Keep their order.
+              window.__auraBatchedVisibility = latest.isIntersecting;
+              callback([{ target: latest.target, isIntersecting: !latest.isIntersecting }, latest], observer);
+            } else callback(entries, observer);
+          }, options);
+        }
+      };
+    });
+    const page = await context.newPage();
+    await page.goto(server.resolvedUrls.local[0]);
+    await page.waitForFunction(() => window.__openstudioAppReady && window.__openstudioIntroHidden && window.__auraBatchedVisibility);
+    await page.locator(selector).waitFor({ state: "attached", timeout: 4000 });
+    assert.equal(await page.locator(".sp-hero-aura__bg").getAttribute("data-playing"), "true");
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await page.waitForFunction(() => document.querySelector(".sp-hero-aura__bg").dataset.playing === "false");
+  } finally {
+    await browser.close();
+    await new Promise(resolve => server.httpServer.close(resolve));
+  }
+});
+
+test("Aura only reveals a verified frame and preserves its viewport lifecycle", { timeout: 150_000 }, async (t) => {
+  const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0, strictPort: true } });
+  const browser = await chromium.launch();
+  const base = server.resolvedUrls.local[0];
+  const open = async (options = {}) => {
+    const context = await browser.newContext({ viewport: { width: 1440, height: 900 }, ...options });
+    await context.route("https://**/*", route => route.abort());
+    await context.route(embed, route => route.fulfill({ contentType: "text/html", body: fixture }));
+    await context.addInitScript(() => {
+      if (window.top === window) localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }));
+    });
+    const page = await context.newPage();
+    await page.goto(base);
+    await page.waitForFunction(() => window.__openstudioAppReady && window.__openstudioIntroHidden);
+    return { context, page };
+  };
+  const activate = async page => {
+    // No input is sent: the scene must start once the page is ready.
+    await page.locator(selector).waitFor({ state: "attached", timeout: 4000 });
+    const frame = await (await page.locator(selector).elementHandle()).contentFrame();
+    await frame.waitForFunction(() => typeof window.allowed === "boolean");
+    return frame;
+  };
+  const ready = page => page.locator(`${selector}[data-ready="true"]`).waitFor({ state: "attached", timeout: 18_000 });
+  try {
+    await t.test("slow, dark and forged responses keep the fallback; real light frames reveal", async () => {
+      const { context, page } = await open();
+      try {
+        const frame = await activate(page);
+        assert.deepEqual(await page.locator(selector).evaluate(e=>({visibility:getComputedStyle(e).visibility,opacity:getComputedStyle(e).opacity})),
+          {visibility:"visible",opacity:"0"}, "startup stays renderable but transparent until a frame is verified");
+        await frame.waitForFunction(() => window.firstRequest !== null);
+        const id = await frame.evaluate(() => window.firstRequest);
+        await page.evaluate(({id, origin}) => window.dispatchEvent(new MessageEvent("message", {
+          origin, source: window, data: {type:"promad-aura:capture-result", requestId:id, dataUrl:"data:image/png;base64,AAAA"},
+        })), {id, origin});
+        await page.waitForTimeout(4200);
+        assert.equal(await page.locator(selector).getAttribute("data-ready"), "false", "iframe load alone never reveals it");
+        await frame.evaluate(() => {window.allowed=true; window.fill="#000";});
+        await page.waitForTimeout(5000);
+        assert.equal(await page.locator(selector).getAttribute("data-ready"), "false", "a successfully captured black frame is not ready");
+        await frame.evaluate(() => {window.fill="#fff";});
+        await ready(page);
+        const count = await frame.evaluate(() => window.captures);
+        await page.waitForTimeout(1200);
+        assert.equal(await frame.evaluate(() => window.captures), count, "startup probes stop after readiness");
+      } finally { await context.close(); }
+    });
+
+    await t.test("scrolling preserves the iframe; reduced-motion remounts start unready", async () => {
+      const { context, page } = await open({ viewport: {width:390,height:844}, isMobile:true, hasTouch:true });
+      try {
+        const frame = await activate(page);
+        await frame.evaluate(() => {window.allowed=true; window.instance="original";});
+        await ready(page);
+        await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+        await page.waitForFunction(() => document.querySelector('.sp-hero-aura__bg').dataset.playing === 'false');
+        await page.waitForTimeout(2600);
+        assert.equal(await page.locator(selector).evaluate(e=>getComputedStyle(e).visibility), "hidden");
+        await page.evaluate(() => window.scrollTo(0, 0));
+        await page.waitForFunction(() => document.querySelector('.sp-hero-aura__bg').dataset.playing === 'true');
+        assert.equal(await frame.evaluate(() => window.instance), "original", "scrolling never reloads the scene");
+        assert.equal(await page.locator(selector).getAttribute("data-ready"), "true");
+        await page.emulateMedia({ reducedMotion:"reduce" });
+        await page.locator(selector).waitFor({state:"detached"});
+        await page.emulateMedia({ reducedMotion:"no-preference" });
+        await page.locator(selector).waitFor({state:"attached"});
+        await page.waitForTimeout(4500);
+        assert.equal(await page.locator(selector).getAttribute("data-ready"), "false", "replacement has not proved readiness");
+        const replacement=await (await page.locator(selector).elementHandle()).contentFrame();
+        await replacement.evaluate(()=>{window.allowed=true;});
+        await ready(page);
+      } finally { await context.close(); }
+    });
+
+    await t.test("an unresponsive embed times out to the fallback", async () => {
+      const { context, page } = await open();
+      try {
+        await activate(page);
+        await page.locator(selector).waitFor({state:"detached", timeout:35_000});
+        assert.equal(await page.locator('.sp-hero-aura__bg').isVisible(), true);
+        assert.equal(await page.locator('h1').isVisible(), true);
+      } finally { await context.close(); }
+    });
+
+    await t.test("initial reduced motion does not request an iframe", async () => {
+      const { context, page } = await open({reducedMotion:"reduce"});
+      try {
+        await page.mouse.move(100,100);
+        await page.waitForTimeout(1200);
+        assert.equal(await page.locator(selector).count(),0);
+      } finally { await context.close(); }
+    });
+  } finally {
+    await browser.close();
+    await new Promise(resolve => server.httpServer.close(resolve));
+  }
+});
diff --git a/test/hero-aura-startup.test.mjs b/test/hero-aura-startup.test.mjs
new file mode 100644
index 0000000..a0eeb7f
--- /dev/null
+++ b/test/hero-aura-startup.test.mjs
@@ -0,0 +1,85 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "node:test";
+import { runInNewContext } from "node:vm";
+import ts from "typescript";
+
+const source = ts.transpileModule(
+  readFileSync(new URL("../src/features/hero-aura/startup.ts", import.meta.url), "utf8"),
+  { compilerOptions: { module: ts.ModuleKind.CommonJS } },
+).outputText;
+
+function harness() {
+  let id = 0;
+  const frames = new Map();
+  const idle = new Map();
+  const window = Object.assign(new EventTarget(), {
+    __openstudioAppReady: false, __openstudioIntroHidden: false,
+    requestAnimationFrame: callback => { frames.set(++id, callback); return id; },
+    cancelAnimationFrame: id => frames.delete(id),
+    requestIdleCallback: callback => { idle.set(++id, callback); return id; },
+    cancelIdleCallback: id => idle.delete(id),
+  });
+  const exports = {};
+  runInNewContext(source, { window, exports });
+  return {
+    window, frames, idle, schedule: exports.afterHeroPageReady,
+    emit: name => window.dispatchEvent(new Event(name)),
+    flush(queue) {
+      for (const [key, callback] of [...queue]) { queue.delete(key); callback(); }
+    },
+    ready() {
+      window.__openstudioAppReady = window.__openstudioIntroHidden = true;
+      window.dispatchEvent(new Event("openstudio:app-ready"));
+      window.dispatchEvent(new Event("openstudio:intro-hidden"));
+    },
+  };
+}
+
+test("Aura waits for both page signals, then starts without input or a quiet timer", () => {
+  for (const first of ["app", "intro"]) {
+    const h = harness();
+    let calls = 0;
+    h.schedule(() => calls++);
+    h.window[first === "app" ? "__openstudioAppReady" : "__openstudioIntroHidden"] = true;
+    h.emit(first === "app" ? "openstudio:app-ready" : "openstudio:intro-hidden");
+    h.emit("pointerdown");
+    assert.equal(h.frames.size, 0, "one signal or input cannot bypass readiness");
+    h.ready();
+    h.flush(h.frames);
+    h.flush(h.frames);
+    assert.equal(calls, 0);
+    h.flush(h.idle);
+    h.ready();
+    assert.equal(calls, 1);
+    assert.equal(h.frames.size, 0);
+  }
+});
+
+test("an already-ready client route starts without another event or an idle API", () => {
+  const h = harness();
+  h.ready();
+  delete h.window.requestIdleCallback;
+  let calls = 0;
+  h.schedule(() => calls++);
+  h.flush(h.frames);
+  assert.equal(calls, 0, "allow the newly mounted hero to paint");
+  h.flush(h.frames);
+  assert.equal(calls, 1);
+});
+
+test("unmount or reduced motion cancels every pending startup phase", () => {
+  for (const phase of ["signals", "first-frame", "second-frame", "idle"]) {
+    const h = harness();
+    let calls = 0;
+    const cancel = h.schedule(() => calls++);
+    if (phase !== "signals") h.ready();
+    if (phase === "second-frame" || phase === "idle") h.flush(h.frames);
+    if (phase === "idle") h.flush(h.frames);
+    cancel();
+    h.ready();
+    h.flush(h.frames); h.flush(h.frames); h.flush(h.idle);
+    assert.equal(calls, 0, phase);
+    assert.equal(h.frames.size + h.idle.size, 0, phase);
+  }
+});
diff --git a/test/image-delivery-browser.test.mjs b/test/image-delivery-browser.test.mjs
index 77bdd9f..c6f0e3c 100644
--- a/test/image-delivery-browser.test.mjs
+++ b/test/image-delivery-browser.test.mjs
@@ -18,7 +18,7 @@ test("image requests follow card widths at standard and high pixel densities", {
           const context = await browser.newContext({ viewport: { width, height: 900 }, deviceScaleFactor: dpr, reducedMotion: "reduce" });
           try {
             await context.route("https://**/*", (route) => route.abort());
-            await context.addInitScript(() => localStorage.setItem(
+            await context.addInitScript(() => window.top === window && localStorage.setItem(
               "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
             ));
             const page = await context.newPage();
diff --git a/test/loader-and-ai-visual-browser.test.mjs b/test/loader-and-ai-visual-browser.test.mjs
index 16cb6a7..bf7ec3c 100644
--- a/test/loader-and-ai-visual-browser.test.mjs
+++ b/test/loader-and-ai-visual-browser.test.mjs
@@ -58,7 +58,7 @@ test("production loader artwork and AI layouts", { timeout: 120_000 }, async (t)
     const newContext = async (options) => {
       const context = await browser.newContext(options);
       await context.route("https://**/*", (route) => route.abort());
-      await context.addInitScript(() => localStorage.setItem(
+      await context.addInitScript(() => window.top === window && localStorage.setItem(
         "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
       ));
       return context;
diff --git a/test/mobile-illustrations-browser.test.mjs b/test/mobile-illustrations-browser.test.mjs
index 495eb3d..a871d55 100644
--- a/test/mobile-illustrations-browser.test.mjs
+++ b/test/mobile-illustrations-browser.test.mjs
@@ -41,7 +41,7 @@ test("phone illustrations animate at every size and pause outside the viewport",
       });
       try {
         await context.route("https://**/*", (route) => route.abort());
-        await context.addInitScript(() => localStorage.setItem(
+        await context.addInitScript(() => window.top === window && localStorage.setItem(
           "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
         ));
         const page = await context.newPage();
diff --git a/test/privacy-prerender-browser.test.mjs b/test/privacy-prerender-browser.test.mjs
new file mode 100644
index 0000000..8f4002e
--- /dev/null
+++ b/test/privacy-prerender-browser.test.mjs
@@ -0,0 +1,70 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { chromium } from "playwright";
+import { preview } from "vite";
+
+test("prerendered privacy choices preserve stored consent before application JavaScript", { timeout: 60_000 }, async t => {
+  const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0 } });
+  const browser = await chromium.launch();
+  try {
+    for (const [name, record, visible] of [
+      ["fresh", null, true],
+      ["accepted", { choice: "accepted", time: Date.now() }, false],
+      ["rejected", { choice: "rejected", time: Date.now() }, false],
+      ["expired", { choice: "accepted", time: 0 }, true],
+      ["future", { choice: "accepted", time: Date.now() + 86400000 }, true],
+      ["malformed", { choice: "yes", time: Date.now() }, true],
+    ]) await t.test(name, async () => {
+      const context = await browser.newContext();
+      await context.route("https://**/*", route => route.abort());
+      await context.addInitScript(value => {
+        if (value) localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify(value));
+      }, record);
+      let release;
+      const held = new Promise(resolve => { release = resolve; });
+      await context.route("**/assets/*.js", async route => { await held; await route.continue().catch(() => {}); });
+      const page = await context.newPage();
+      try {
+        await page.goto(server.resolvedUrls.local[0] + "privacy", { waitUntil: "commit" });
+        await page.locator("[data-privacy-prerender]").waitFor({ state: "attached" });
+        await page.waitForFunction(() => document.readyState !== "loading" || document.querySelector("#openstudio-privacy + script"));
+        assert.equal(await page.locator("#openstudio-privacy section").isVisible(), visible);
+        assert.equal(await page.evaluate(() => Boolean(window.__openstudioAppReady)), false);
+        release();
+        await page.waitForFunction(() => window.__openstudioAppReady);
+        const banner = page.getByRole("region", { name: "Website privacy choices" });
+        assert.equal(await banner.count(), visible ? 1 : 0, "exactly one banner after the handoff");
+        assert.equal(await page.locator("[data-privacy-prerender]").count(), 0);
+        if (visible) {
+          await page.getByRole("button", { name: "Reject analytics", exact: true }).click();
+          await banner.waitFor({ state: "detached" });
+        }
+        await page.getByRole("button", { name: "Privacy choices", exact: true }).click();
+        await banner.waitFor();
+      } finally { release(); await context.close(); }
+    });
+    await t.test("a failed application download removes the inert panel", async () => {
+      const context = await browser.newContext();
+      try {
+        await context.route("**/assets/*.js", route => route.abort());
+        const page = await context.newPage();
+        await page.goto(server.resolvedUrls.local[0] + "privacy");
+        await page.waitForFunction(() => window.__openstudioStaticRouteRestored);
+        assert.equal(await page.locator("#openstudio-privacy section").isVisible(), false);
+        assert.equal(await page.locator("h1").isVisible(), true);
+      } finally { await context.close(); }
+    });
+    await t.test("no JavaScript leaves legal text readable without inert consent controls", async () => {
+      const context = await browser.newContext({ javaScriptEnabled: false });
+      try {
+        const page = await context.newPage();
+        await page.goto(server.resolvedUrls.local[0] + "privacy");
+        assert.equal(await page.locator("#openstudio-privacy section").isVisible(), false);
+        assert.equal(await page.locator("h1").isVisible(), true);
+      } finally { await context.close(); }
+    });
+  } finally {
+    await browser.close();
+    await new Promise(resolve => server.httpServer.close(resolve));
+  }
+});
diff --git a/test/seo-pages-browser.test.mjs b/test/seo-pages-browser.test.mjs
index bffddd8..6cc592b 100644
--- a/test/seo-pages-browser.test.mjs
+++ b/test/seo-pages-browser.test.mjs
@@ -91,7 +91,7 @@ test("all sitemap pages expose matching SEO before and after JavaScript", { time
   const runtimeContext = await browser.newContext({ reducedMotion: "reduce" });
   try {
     for (const context of [staticContext, runtimeContext]) await context.route("https://**/*", route => route.abort());
-    await runtimeContext.addInitScript(() => localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({choice: "rejected", time: Date.now()})));
+    await runtimeContext.addInitScript(() => window.top === window && localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({choice: "rejected", time: Date.now()})));
     const staticPage = await staticContext.newPage();
     const runtimePage = await runtimeContext.newPage();
     const errors = [];
diff --git a/test/still-frame-browser.test.mjs b/test/still-frame-browser.test.mjs
index 1f30c3e..d6b7b97 100644
--- a/test/still-frame-browser.test.mjs
+++ b/test/still-frame-browser.test.mjs
@@ -22,7 +22,7 @@ test("illustrations keep the same rendered frame while the animation engine load
             await pending;
             await route.continue().catch(() => undefined);
           });
-          await context.addInitScript(() => localStorage.setItem(
+          await context.addInitScript(() => window.top === window && localStorage.setItem(
             "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
           ));
           const page = await context.newPage();