diff --git a/apps/desktop/package-lock.json b/apps/desktop/package-lock.json
index 6c014ca29..fe2000954 100644
--- a/apps/desktop/package-lock.json
+++ b/apps/desktop/package-lock.json
@@ -64,6 +64,7 @@
         "papaparse": "^5.5.3",
         "path-browserify": "^1.0.1",
         "pdfjs-dist": "^4.10.38",
+        "qrcode.react": "^4.2.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-markdown": "^10.1.0",
@@ -17144,6 +17145,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.15.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 2ff37d6a7..82fb68b9e 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -111,6 +111,7 @@
     "papaparse": "^5.5.3",
     "path-browserify": "^1.0.1",
     "pdfjs-dist": "^4.10.38",
+    "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
diff --git a/apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.test.tsx b/apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.test.tsx
index e203ce793..e9804ca75 100644
--- a/apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.test.tsx
+++ b/apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.test.tsx
@@ -10,6 +10,9 @@ import {
   ADE_WELCOME_VIDEO_VERSION,
 } from "../../../shared/welcomeVideo";
 import { ADE_MOBILE_TESTFLIGHT_URL } from "../../../shared/productLinks";
+import { docs } from "../../onboarding/docsLinks";
+
+const DIALOG_NAME = /welcome to ade/i;
 
 describe("WelcomeVideoGate", () => {
   const originalAde = window.ade;
@@ -18,6 +21,8 @@ describe("WelcomeVideoGate", () => {
   const openExternal = vi.fn();
 
   beforeEach(() => {
+    window.history.pushState({}, "", "/");
+    Object.assign(navigator, { clipboard: undefined });
     getWelcomeVideoState.mockReset();
     markWelcomeVideoSeen.mockReset();
     openExternal.mockReset();
@@ -43,7 +48,7 @@ describe("WelcomeVideoGate", () => {
     window.ade = originalAde;
   });
 
-  it("opens for an unseen video and marks it completed from Continue", async () => {
+  it("opens for an unseen video and dismisses from the close button", async () => {
     getWelcomeVideoState.mockResolvedValue({
       videoId: ADE_WELCOME_VIDEO_ID,
       version: ADE_WELCOME_VIDEO_VERSION,
@@ -53,22 +58,75 @@ describe("WelcomeVideoGate", () => {
 
     render(<WelcomeVideoGate />);
 
-    expect(await screen.findByRole("dialog", { name: /welcome to ade/i })).toBeTruthy();
-    expect(screen.queryByText(/start here/i)).toBeNull();
-    expect(screen.queryByText(/quick orientation/i)).toBeNull();
+    expect(await screen.findByRole("dialog", { name: DIALOG_NAME })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: /close welcome/i }));
+
+    await waitFor(() => {
+      expect(markWelcomeVideoSeen).toHaveBeenCalledWith("dismissed");
+    });
+    expect(screen.queryByRole("dialog", { name: DIALOG_NAME })).toBeNull();
+  });
+
+  it("lazily loads the sandboxed video iframe only after the poster is clicked", async () => {
+    getWelcomeVideoState.mockResolvedValue({
+      videoId: ADE_WELCOME_VIDEO_ID,
+      version: ADE_WELCOME_VIDEO_VERSION,
+      completedAt: null,
+      dismissedAt: null,
+    });
+
+    render(<WelcomeVideoGate />);
+
+    await screen.findByRole("dialog", { name: DIALOG_NAME });
+
+    // No iframe up front; the poster stands in until the user opts to play.
+    expect(screen.queryByTitle("Welcome to ADE video")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /play the ade intro video/i }));
+
     const video = screen.getByTitle("Welcome to ADE video");
-    expect(video).toBeTruthy();
     expect(video.getAttribute("sandbox")).toBe(
       "allow-scripts allow-same-origin allow-presentation allow-popups",
     );
     expect(video.getAttribute("allow")).toBe("autoplay; encrypted-media; picture-in-picture");
+    expect(video.getAttribute("src")).toContain("autoplay=1");
+  });
 
-    fireEvent.click(screen.getByRole("button", { name: /continue/i }));
-
-    await waitFor(() => {
-      expect(markWelcomeVideoSeen).toHaveBeenCalledWith("completed");
+  it("uses route-stable public asset URLs on nested browser routes", async () => {
+    window.history.pushState({}, "", "/automations/templates");
+    getWelcomeVideoState.mockResolvedValue({
+      videoId: ADE_WELCOME_VIDEO_ID,
+      version: ADE_WELCOME_VIDEO_VERSION,
+      completedAt: null,
+      dismissedAt: null,
     });
-    expect(screen.queryByRole("dialog", { name: /welcome to ade/i })).toBeNull();
+
+    render(<WelcomeVideoGate />);
+
+    await screen.findByRole("dialog", { name: DIALOG_NAME });
+
+    expect(document.querySelector('img[aria-hidden="true"]')?.getAttribute("src")).toBe(
+      "/logo.png",
+    );
+    expect(
+      screen
+        .getByRole("button", { name: /^desktop:/i })
+        .querySelector("img")
+        ?.getAttribute("src"),
+    ).toBe("/welcome/desktop.webp");
+    expect(
+      screen
+        .getByRole("button", { name: /^mobile:/i })
+        .querySelector("img")
+        ?.getAttribute("src"),
+    ).toBe("/welcome/mobile.webp");
+    expect(
+      screen
+        .getByRole("button", { name: /^terminal:/i })
+        .querySelector("img")
+        ?.getAttribute("src"),
+    ).toBe("/welcome/tui.webp");
   });
 
   it("stays hidden after a seen video until the replay event opens it", async () => {
@@ -84,20 +142,20 @@ describe("WelcomeVideoGate", () => {
     await waitFor(() => {
       expect(getWelcomeVideoState).toHaveBeenCalledTimes(1);
     });
-    expect(screen.queryByRole("dialog", { name: /welcome to ade/i })).toBeNull();
+    expect(screen.queryByRole("dialog", { name: DIALOG_NAME })).toBeNull();
 
     window.dispatchEvent(new Event(ADE_WELCOME_VIDEO_REPLAY_EVENT));
 
-    expect(await screen.findByRole("dialog", { name: /welcome to ade/i })).toBeTruthy();
-    fireEvent.click(screen.getByRole("button", { name: /close welcome video/i }));
+    expect(await screen.findByRole("dialog", { name: DIALOG_NAME })).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: /close welcome/i }));
 
     await waitFor(() => {
       expect(markWelcomeVideoSeen).toHaveBeenCalledWith("dismissed");
     });
-    expect(screen.queryByRole("dialog", { name: /welcome to ade/i })).toBeNull();
+    expect(screen.queryByRole("dialog", { name: DIALOG_NAME })).toBeNull();
   });
 
-  it("opens the mobile install link from the welcome actions", async () => {
+  it("downloads the mobile app from the QR panel", async () => {
     getWelcomeVideoState.mockResolvedValue({
       videoId: ADE_WELCOME_VIDEO_ID,
       version: ADE_WELCOME_VIDEO_VERSION,
@@ -107,8 +165,87 @@ describe("WelcomeVideoGate", () => {
 
     render(<WelcomeVideoGate />);
 
-    fireEvent.click(await screen.findByRole("button", { name: /install mobile app/i }));
+    fireEvent.click(await screen.findByRole("button", { name: /download for ios/i }));
 
     expect(openExternal).toHaveBeenCalledWith(ADE_MOBILE_TESTFLIGHT_URL);
   });
+
+  it("copies the install link through the desktop clipboard bridge when available", async () => {
+    getWelcomeVideoState.mockResolvedValue({
+      videoId: ADE_WELCOME_VIDEO_ID,
+      version: ADE_WELCOME_VIDEO_VERSION,
+      completedAt: null,
+      dismissedAt: null,
+    });
+    const writeClipboardText = vi.fn().mockResolvedValue(undefined);
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    window.ade = ({
+      app: {
+        ...window.ade.app,
+        writeClipboardText,
+      },
+    } as unknown) as typeof window.ade;
+    Object.assign(navigator, { clipboard: { writeText } });
+
+    render(<WelcomeVideoGate />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /copy install link/i }));
+
+    await waitFor(() => {
+      expect(writeClipboardText).toHaveBeenCalledWith(ADE_MOBILE_TESTFLIGHT_URL);
+    });
+    expect(writeText).not.toHaveBeenCalled();
+    expect(await screen.findByRole("button", { name: /link copied/i })).toBeTruthy();
+  });
+
+  it("falls back to the browser clipboard and confirms it in place", async () => {
+    getWelcomeVideoState.mockResolvedValue({
+      videoId: ADE_WELCOME_VIDEO_ID,
+      version: ADE_WELCOME_VIDEO_VERSION,
+      completedAt: null,
+      dismissedAt: null,
+    });
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, { clipboard: { writeText } });
+
+    render(<WelcomeVideoGate />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /copy install link/i }));
+
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith(ADE_MOBILE_TESTFLIGHT_URL);
+    });
+    expect(await screen.findByRole("button", { name: /link copied/i })).toBeTruthy();
+  });
+
+  it("reports copy failure when the Clipboard API is unavailable", async () => {
+    getWelcomeVideoState.mockResolvedValue({
+      videoId: ADE_WELCOME_VIDEO_ID,
+      version: ADE_WELCOME_VIDEO_VERSION,
+      completedAt: null,
+      dismissedAt: null,
+    });
+    Object.assign(navigator, { clipboard: undefined });
+
+    render(<WelcomeVideoGate />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /copy install link/i }));
+
+    expect(await screen.findByRole("button", { name: /copy failed/i })).toBeTruthy();
+  });
+
+  it("opens the matching docs section from a surface tile", async () => {
+    getWelcomeVideoState.mockResolvedValue({
+      videoId: ADE_WELCOME_VIDEO_ID,
+      version: ADE_WELCOME_VIDEO_VERSION,
+      completedAt: null,
+      dismissedAt: null,
+    });
+
+    render(<WelcomeVideoGate />);
+
+    fireEvent.click(await screen.findByRole("button", { name: /^desktop:/i }));
+
+    expect(openExternal).toHaveBeenCalledWith(docs.home);
+  });
 });
diff --git a/apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.tsx b/apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.tsx
index 9648bef50..6ff105b62 100644
--- a/apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.tsx
+++ b/apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.tsx
@@ -1,10 +1,12 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
+import { QRCodeSVG } from "qrcode.react";
 import {
   ArrowSquareOut,
-  DeviceMobile,
+  Check,
+  Copy,
   GithubLogo,
-  PlayCircle,
+  Play,
   X,
 } from "@phosphor-icons/react";
 import { docs } from "../../onboarding/docsLinks";
@@ -12,7 +14,6 @@ import { openExternalUrl } from "../../lib/openExternal";
 import {
   ADE_WELCOME_VIDEO_EMBED_URL,
   ADE_WELCOME_VIDEO_REPLAY_EVENT,
-  ADE_WELCOME_VIDEO_WATCH_URL,
 } from "../../../shared/welcomeVideo";
 import {
   ADE_GITHUB_URL,
@@ -23,9 +24,61 @@ type WelcomeVideoGateProps = {
   onVisibilityChange?: (visible: boolean, checking: boolean) => void;
 };
 
+type DeviceKind = "macbook" | "phone" | "terminal";
+type CopyState = "idle" | "copied" | "failed";
+
+type Surface = {
+  key: string;
+  label: string;
+  blurb: string;
+  img: string;
+  url: string;
+  device: DeviceKind;
+};
+
+export function publicAssetUrl(path: string): string {
+  const normalized = path.replace(/^\/+/, "");
+  if (typeof window !== "undefined" && /^https?:$/.test(window.location.protocol)) {
+    return `/${normalized}`;
+  }
+  return `./${normalized}`;
+}
+
+// The three surfaces ADE runs on. Each tile frames a real screenshot in its
+// device chrome and doubles as navigation into the matching docs section.
+const SURFACES: ReadonlyArray<Surface> = [
+  {
+    key: "desktop",
+    label: "Desktop",
+    blurb: "The full lane workspace",
+    img: publicAssetUrl("welcome/desktop.webp"),
+    url: docs.home,
+    device: "macbook",
+  },
+  {
+    key: "mobile",
+    label: "Mobile",
+    blurb: "Review & approve on the go",
+    img: publicAssetUrl("welcome/mobile.webp"),
+    url: docs.syncMultiDevice,
+    device: "phone",
+  },
+  {
+    key: "tui",
+    label: "Terminal",
+    blurb: "ADE Code in your shell",
+    img: publicAssetUrl("welcome/tui.webp"),
+    url: docs.terminals,
+    device: "terminal",
+  },
+];
+
 export function WelcomeVideoGate({ onVisibilityChange }: WelcomeVideoGateProps) {
   const [visible, setVisible] = useState(false);
   const [checking, setChecking] = useState(true);
+  const [playing, setPlaying] = useState(false);
+  const [copyState, setCopyState] = useState<CopyState>("idle");
+  const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     onVisibilityChange?.(visible, checking);
@@ -48,24 +101,65 @@ export function WelcomeVideoGate({ onVisibilityChange }: WelcomeVideoGateProps)
 
     const replay = () => {
       setChecking(false);
+      setPlaying(false);
+      setCopyState("idle");
       setVisible(true);
     };
     window.addEventListener(ADE_WELCOME_VIDEO_REPLAY_EVENT, replay);
     return () => {
       cancelled = true;
       window.removeEventListener(ADE_WELCOME_VIDEO_REPLAY_EVENT, replay);
+      if (copyTimer.current) clearTimeout(copyTimer.current);
     };
   }, []);
 
-  const close = useCallback((reason: "completed" | "dismissed") => {
+  const dismissWelcome = useCallback(() => {
     setVisible(false);
-    void window.ade.app.markWelcomeVideoSeen(reason).catch(() => {});
+    setPlaying(false);
+    setCopyState("idle");
+    void window.ade.app.markWelcomeVideoSeen("dismissed").catch(() => {});
   }, []);
 
   const openGitHub = useCallback(() => openExternalUrl(ADE_GITHUB_URL), []);
   const openDocs = useCallback(() => openExternalUrl(docs.home), []);
-  const openMobileApp = useCallback(() => openExternalUrl(ADE_MOBILE_TESTFLIGHT_URL), []);
-  const openVideo = useCallback(() => openExternalUrl(ADE_WELCOME_VIDEO_WATCH_URL), []);
+  const openMobileApp = useCallback(
+    () => openExternalUrl(ADE_MOBILE_TESTFLIGHT_URL),
+    [],
+  );
+
+  const copyMobileLink = useCallback(() => {
+    const finish = (state: CopyState) => {
+      setCopyState(state);
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => setCopyState("idle"), 1800);
+    };
+
+    const copyWithNavigator = () => {
+      try {
+        const write = navigator.clipboard?.writeText;
+        if (!write) {
+          finish("failed");
+          return;
+        }
+        void write
+          .call(navigator.clipboard, ADE_MOBILE_TESTFLIGHT_URL)
+          .then(() => finish("copied"), () => finish("failed"));
+      } catch {
+        finish("failed");
+      }
+    };
+
+    const appBridge = window.ade?.app;
+    const writeClipboardText = appBridge?.writeClipboardText;
+    if (typeof writeClipboardText === "function") {
+      void writeClipboardText
+        .call(appBridge, ADE_MOBILE_TESTFLIGHT_URL)
+        .then(() => finish("copied"), copyWithNavigator);
+      return;
+    }
+
+    copyWithNavigator();
+  }, []);
 
   const handleOpenChange = useCallback(
     (next: boolean) => {
@@ -73,9 +167,9 @@ export function WelcomeVideoGate({ onVisibilityChange }: WelcomeVideoGateProps)
         setVisible(true);
         return;
       }
-      if (visible) close("dismissed");
+      if (visible) dismissWelcome();
     },
-    [close, visible],
+    [dismissWelcome, visible],
   );
 
   return (
@@ -94,16 +188,17 @@ export function WelcomeVideoGate({ onVisibilityChange }: WelcomeVideoGateProps)
         />
         <Dialog.Content
           aria-describedby={undefined}
+          className="ade-welcome-card"
           style={{
             position: "fixed",
             left: "50%",
             top: "50%",
             zIndex: 10021,
-            width: "min(920px, calc(100vw - 32px))",
-            maxHeight: "min(92dvh, 820px)",
+            width: "min(940px, calc(100vw - 32px))",
+            maxHeight: "min(92dvh, 860px)",
             overflow: "auto",
             transform: "translate(-50%, -50%)",
-            borderRadius: 14,
+            borderRadius: 16,
             border: "1px solid color-mix(in srgb, var(--color-accent, #A78BFA) 22%, var(--color-border, rgba(255,255,255,0.14)))",
             background:
               "linear-gradient(180deg, color-mix(in srgb, var(--color-card, #171326) 95%, var(--color-accent, #A78BFA) 5%), var(--color-card, #12101D))",
@@ -113,128 +208,135 @@ export function WelcomeVideoGate({ onVisibilityChange }: WelcomeVideoGateProps)
             outline: "none",
           }}
         >
-          <div
-            style={{
-              display: "flex",
-              alignItems: "flex-start",
-              justifyContent: "space-between",
-              gap: 16,
-              padding: "22px 24px 16px",
-              borderBottom: "1px solid color-mix(in srgb, var(--color-fg, #fff) 8%, transparent)",
-            }}
-          >
-            <div style={{ minWidth: 0 }}>
-              <Dialog.Title
-                style={{
-                  margin: 0,
-                  fontSize: 30,
-                  lineHeight: 1.08,
-                  letterSpacing: 0,
-                }}
-              >
-                Welcome to ADE
-              </Dialog.Title>
-            </div>
-            <button
-              type="button"
-              aria-label="Close welcome video"
-              onClick={() => close("dismissed")}
-              className="ade-shell-control"
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: 28,
-                height: 28,
-                borderRadius: 7,
-                border: "1px solid rgba(255,255,255,0.08)",
-                background: "rgba(255,255,255,0.04)",
-                color: "var(--color-muted-fg, #A8A4B8)",
-                cursor: "pointer",
-                flex: "0 0 auto",
-              }}
-            >
-              <X size={14} weight="bold" />
-            </button>
-          </div>
+          {/* Ambient brand glow behind the header (static) */}
+          <div className="ade-welcome-card__glow" aria-hidden="true" />
 
-          <div style={{ padding: "18px 24px 24px" }}>
+          <div style={{ position: "relative", zIndex: 1 }}>
+            {/* Header: ADE logo, with GitHub/Docs/close */}
             <div
               style={{
                 display: "flex",
-                flexWrap: "wrap",
                 alignItems: "center",
-                gap: 9,
-                marginBottom: 16,
+                justifyContent: "space-between",
+                flexWrap: "wrap",
+                gap: 16,
+                padding: "18px 24px 16px",
+                borderBottom:
+                  "1px solid color-mix(in srgb, var(--color-fg, #fff) 8%, transparent)",
               }}
             >
-              <WelcomeActionButton
-                onClick={openGitHub}
-                icon={<GithubLogo size={14} weight="fill" />}
-              >
-                GitHub
-              </WelcomeActionButton>
-              <WelcomeActionButton onClick={openDocs} icon={<ArrowSquareOut size={13} />}>
-                Docs
-              </WelcomeActionButton>
-              <WelcomeActionButton
-                onClick={openMobileApp}
-                icon={<DeviceMobile size={14} weight="regular" />}
-              >
-                Install mobile app
-              </WelcomeActionButton>
-              <WelcomeActionButton
-                onClick={openVideo}
-                icon={<PlayCircle size={14} weight="fill" />}
-              >
-                Open video
-              </WelcomeActionButton>
-              <button
-                type="button"
-                onClick={() => close("completed")}
+              <Dialog.Title style={{ margin: 0, display: "flex", alignItems: "center", minWidth: 0 }}>
+                <img
+                  src={publicAssetUrl("logo.png")}
+                  alt=""
+                  aria-hidden="true"
+                  draggable={false}
+                  style={{
+                    height: 40,
+                    width: "auto",
+                    maxWidth: "min(140px, 45vw)",
+                    objectFit: "contain",
+                    display: "block",
+                  }}
+                />
+                <span
+                  style={{
+                    position: "absolute",
+                    width: 1,
+                    height: 1,
+                    padding: 0,
+                    margin: -1,
+                    overflow: "hidden",
+                    clip: "rect(0, 0, 0, 0)",
+                    whiteSpace: "nowrap",
+                    border: 0,
+                  }}
+                >
+                  Welcome to ADE
+                </span>
+              </Dialog.Title>
+              <div
                 style={{
-                  marginLeft: "auto",
-                  minHeight: 32,
-                  border: "1px solid color-mix(in srgb, var(--color-accent, #A78BFA) 44%, transparent)",
-                  borderRadius: 7,
-                  background: "var(--color-accent, #A78BFA)",
-                  color: "var(--color-accent-fg, #0B0A14)",
-                  padding: "0 13px",
-                  fontSize: 12,
-                  fontWeight: 700,
-                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  flexWrap: "wrap",
+                  justifyContent: "flex-end",
+                  gap: 8,
+                  flex: "0 0 auto",
                 }}
               >
-                Continue
-              </button>
+                <WelcomeActionButton
+                  onClick={openGitHub}
+                  icon={<GithubLogo size={14} weight="fill" />}
+                >
+                  GitHub
+                </WelcomeActionButton>
+                <WelcomeActionButton
+                  onClick={openDocs}
+                  icon={<ArrowSquareOut size={13} />}
+                >
+                  Docs
+                </WelcomeActionButton>
+                <button
+                  type="button"
+                  aria-label="Close welcome"
+                  onClick={dismissWelcome}
+                  className="ade-shell-control"
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 30,
+                    height: 30,
+                    borderRadius: 8,
+                    border: "1px solid rgba(255,255,255,0.08)",
+                    background: "rgba(255,255,255,0.04)",
+                    color: "var(--color-muted-fg, #A8A4B8)",
+                    cursor: "pointer",
+                  }}
+                >
+                  <X size={14} weight="bold" />
+                </button>
+              </div>
             </div>
 
-            <div
-              style={{
-                position: "relative",
-                overflow: "hidden",
-                borderRadius: 10,
-                border: "1px solid color-mix(in srgb, var(--color-fg, #fff) 12%, transparent)",
-                background: "#050507",
-                aspectRatio: "16 / 9",
-                boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.04)",
-              }}
-            >
-              <iframe
-                title="Welcome to ADE video"
-                src={ADE_WELCOME_VIDEO_EMBED_URL}
-                sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
-                allow="autoplay; encrypted-media; picture-in-picture"
-                allowFullScreen
-                referrerPolicy="strict-origin-when-cross-origin"
-                style={{
-                  position: "absolute",
-                  inset: 0,
-                  width: "100%",
-                  height: "100%",
-                  border: 0,
-                }}
-              />
+            <div style={{ padding: "18px 24px 24px" }}>
+              {/* Body: video (left) + iOS QR panel (right) */}
+              <div className="ade-welcome-card__body">
+                <VideoPanel
+                  playing={playing}
+                  onPlay={() => setPlaying(true)}
+                />
+                <PhonePanel
+                  copyState={copyState}
+                  onDownload={openMobileApp}
+                  onCopy={copyMobileLink}
+                />
+              </div>
+
+              {/* Surfaces strip: one app, every surface */}
+              <div style={{ marginTop: 22 }}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 6,
+                    fontSize: 11.5,
+                    fontWeight: 650,
+                    letterSpacing: 0,
+                    textTransform: "uppercase",
+                    color: "var(--color-muted-fg, #A8A4B8)",
+                  }}
+                >
+                  One app, every surface
+                </div>
+                <div className="ade-welcome-card__surfaces">
+                  {SURFACES.map((surface, index) => (
+                    <SurfaceTile key={surface.key} surface={surface} index={index} />
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
         </Dialog.Content>
@@ -243,6 +345,436 @@ export function WelcomeVideoGate({ onVisibilityChange }: WelcomeVideoGateProps)
   );
 }
 
+function VideoPanel({
+  playing,
+  onPlay,
+}: {
+  playing: boolean;
+  onPlay: () => void;
+}) {
+  return (
+    <div
+      style={{
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: 12,
+        border: "1px solid color-mix(in srgb, var(--color-fg, #fff) 12%, transparent)",
+        background: "#050507",
+        aspectRatio: "16 / 9",
+        boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.04)",
+      }}
+    >
+      {playing ? (
+        <iframe
+          title="Welcome to ADE video"
+          src={`${ADE_WELCOME_VIDEO_EMBED_URL}&autoplay=1`}
+          sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"
+          allow="autoplay; encrypted-media; picture-in-picture"
+          allowFullScreen
+          referrerPolicy="strict-origin-when-cross-origin"
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            border: 0,
+          }}
+        />
+      ) : (
+        <button
+          type="button"
+          onClick={onPlay}
+          aria-label="Play the ADE intro video"
+          className="ade-welcome-card__poster"
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            border: 0,
+            padding: 0,
+            cursor: "pointer",
+            backgroundImage: `linear-gradient(180deg, rgba(8,6,18,0) 40%, rgba(8,6,18,0.5)), url("${publicAssetUrl("welcome/video-poster.jpg")}")`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        >
+          <span
+            className="ade-welcome-card__play"
+            style={{
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 64,
+              height: 64,
+              borderRadius: "999px",
+              background: "var(--color-accent, #A78BFA)",
+              color: "var(--color-accent-fg, #0B0A14)",
+              boxShadow: "0 12px 30px -8px rgba(124,58,237,0.7)",
+            }}
+          >
+            <Play size={26} weight="fill" />
+          </span>
+          <span
+            style={{
+              position: "absolute",
+              left: 14,
+              bottom: 12,
+              fontSize: 12.5,
+              fontWeight: 600,
+              color: "#fff",
+              textShadow: "0 1px 6px rgba(0,0,0,0.6)",
+            }}
+          >
+            Watch the intro guide
+          </span>
+        </button>
+      )}
+    </div>
+  );
+}
+
+function PhonePanel({
+  copyState,
+  onDownload,
+  onCopy,
+}: {
+  copyState: CopyState;
+  onDownload: () => void;
+  onCopy: () => void;
+}) {
+  const copied = copyState === "copied";
+  const copyFailed = copyState === "failed";
+  let copyLabel = "Copy install link";
+  let copyColor = "var(--color-fg, #F5F3FF)";
+  if (copied) {
+    copyLabel = "Link copied";
+    copyColor = "var(--color-accent-bright, #C4B5FD)";
+  } else if (copyFailed) {
+    copyLabel = "Copy failed";
+    copyColor = "#FCA5A5";
+  }
+
+  return (
+    <aside
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 16,
+        padding: "18px 18px",
+        borderRadius: 12,
+        border: "1px solid color-mix(in srgb, var(--color-accent, #A78BFA) 24%, transparent)",
+        background:
+          "linear-gradient(180deg, color-mix(in srgb, var(--color-accent, #A78BFA) 8%, transparent), color-mix(in srgb, var(--color-accent, #A78BFA) 2%, transparent))",
+      }}
+    >
+      <div style={{ fontSize: 15, fontWeight: 650, textAlign: "center" }}>
+        Get it on your phone
+      </div>
+
+      <div
+        className="ade-welcome-card__qr"
+        style={{
+          display: "inline-flex",
+          padding: 14,
+          borderRadius: 14,
+          background: "#FFFFFF",
+          border: "1px solid color-mix(in srgb, var(--color-accent, #A78BFA) 30%, transparent)",
+        }}
+      >
+        <QRCodeSVG
+          value={ADE_MOBILE_TESTFLIGHT_URL}
+          size={176}
+          level="H"
+          marginSize={1}
+          bgColor="#FFFFFF"
+          fgColor="#111827"
+          title="QR code to install ADE Mobile via TestFlight"
+          imageSettings={{
+            src: publicAssetUrl("welcome/ade-icon.webp"),
+            height: 38,
+            width: 38,
+            excavate: true,
+          }}
+        />
+      </div>
+
+      <div style={{ display: "flex", gap: 8, width: "100%" }}>
+        <button
+          type="button"
+          onClick={onDownload}
+          style={{
+            flex: 1,
+            minHeight: 36,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 7,
+            border:
+              "1px solid color-mix(in srgb, var(--color-accent, #A78BFA) 44%, transparent)",
+            borderRadius: 9,
+            background: "var(--color-accent, #A78BFA)",
+            color: "var(--color-accent-fg, #0B0A14)",
+            fontSize: 12.5,
+            fontWeight: 700,
+            cursor: "pointer",
+          }}
+        >
+          Download for iOS
+        </button>
+        <button
+          type="button"
+          onClick={onCopy}
+          aria-label={copyLabel}
+          title={copyLabel}
+          style={{
+            width: 40,
+            minHeight: 36,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            border:
+              "1px solid color-mix(in srgb, var(--color-accent, #A78BFA) 40%, transparent)",
+            borderRadius: 9,
+            background: "color-mix(in srgb, var(--color-accent, #A78BFA) 12%, transparent)",
+            color: copyColor,
+            cursor: "pointer",
+          }}
+        >
+          {copied ? <Check size={15} weight="bold" /> : <Copy size={15} />}
+        </button>
+      </div>
+    </aside>
+  );
+}
+
+function SurfaceTile({
+  index,
+  surface,
+}: {
+  index: number;
+  surface: Surface;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => openExternalUrl(surface.url)}
+      className="ade-welcome-card__tile"
+      aria-label={`${surface.label}: ${surface.blurb}`}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: 0,
+        border: "none",
+        background: "transparent",
+        color: "var(--color-fg, #F5F3FF)",
+        cursor: "pointer",
+        animationDelay: `${(index + 1) * 60}ms`,
+      }}
+    >
+      <div
+        style={{
+          width: "100%",
+          height: 200,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {surface.device === "macbook" && <MacBookFrame src={surface.img} />}
+        {surface.device === "phone" && <PhoneFrame src={surface.img} />}
+        {surface.device === "terminal" && <TerminalFrame src={surface.img} />}
+      </div>
+      <div style={{ textAlign: "center", paddingTop: 12 }}>
+        <div style={{ fontSize: 13, fontWeight: 650 }}>{surface.label}</div>
+        <div
+          style={{
+            marginTop: 2,
+            fontSize: 11,
+            color: "var(--color-muted-fg, #A8A4B8)",
+          }}
+        >
+          {surface.blurb}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+function MacBookFrame({ src }: { src: string }) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        maxWidth: 262,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <div
+        style={{
+          width: "90%",
+          background: "#0a0a10",
+          border: "3px solid #3a3a45",
+          borderRadius: "10px 10px 4px 4px",
+          padding: 3,
+          boxShadow: "0 8px 18px -10px rgba(0,0,0,0.7)",
+        }}
+      >
+        <div
+          style={{
+            aspectRatio: "16 / 10",
+            borderRadius: 4,
+            overflow: "hidden",
+            background: "#000",
+          }}
+        >
+          <img
+            src={src}
+            alt=""
+            draggable={false}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              objectPosition: "top center",
+              display: "block",
+            }}
+          />
+        </div>
+      </div>
+      {/* Base and hinge, wider than the screen for the laptop silhouette. */}
+      <div
+        style={{
+          width: "112%",
+          height: 9,
+          background: "linear-gradient(180deg, #51515d, #26262e)",
+          borderRadius: "1px 1px 8px 8px",
+          position: "relative",
+          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.2)",
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: "22%",
+            height: 4,
+            background: "#15151b",
+            borderRadius: "0 0 5px 5px",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function PhoneFrame({ src }: { src: string }) {
+  return (
+    <div
+      style={{
+        width: 96,
+        margin: "0 auto",
+        background: "#0a0a10",
+        border: "3px solid #3a3a45",
+        borderRadius: 20,
+        padding: 3,
+        position: "relative",
+        boxShadow: "0 10px 24px -10px rgba(0,0,0,0.75)",
+      }}
+    >
+      {/* dynamic island */}
+      <div
+        style={{
+          position: "absolute",
+          top: 9,
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: 30,
+          height: 7,
+          background: "#000",
+          borderRadius: 5,
+          zIndex: 2,
+        }}
+      />
+      <div style={{ borderRadius: 16, overflow: "hidden", background: "#000" }}>
+        <img
+          src={src}
+          alt=""
+          draggable={false}
+          style={{ width: "100%", display: "block" }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function TerminalFrame({ src }: { src: string }) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        maxWidth: 262,
+        borderRadius: 9,
+        overflow: "hidden",
+        border: "1px solid #2c2c36",
+        background: "#0a0a0f",
+        boxShadow: "0 8px 18px -10px rgba(0,0,0,0.7)",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 5,
+          padding: "7px 9px",
+          background: "#17171f",
+          borderBottom: "1px solid #2a2a33",
+        }}
+      >
+        <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#ff5f57" }} />
+        <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#febc2e" }} />
+        <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#28c840" }} />
+        <span
+          style={{
+            marginLeft: 6,
+            fontSize: 9.5,
+            letterSpacing: 0,
+            color: "var(--color-muted-fg, #A8A4B8)",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+          }}
+        >
+          ade - zsh
+        </span>
+      </div>
+      <div style={{ aspectRatio: "16 / 9", overflow: "hidden", background: "#000" }}>
+        <img
+          src={src}
+          alt=""
+          draggable={false}
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            objectPosition: "top center",
+            display: "block",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
 function WelcomeActionButton({
   children,
   icon,
@@ -262,7 +794,7 @@ function WelcomeActionButton({
         alignItems: "center",
         gap: 7,
         border: "1px solid color-mix(in srgb, var(--color-fg, #fff) 12%, transparent)",
-        borderRadius: 7,
+        borderRadius: 8,
         background: "color-mix(in srgb, var(--color-fg, #fff) 5%, transparent)",
         color: "var(--color-fg, #F5F3FF)",
         padding: "0 11px",
diff --git a/apps/desktop/src/renderer/index.css b/apps/desktop/src/renderer/index.css
index dc3f28d2f..fabf96140 100644
--- a/apps/desktop/src/renderer/index.css
+++ b/apps/desktop/src/renderer/index.css
@@ -3976,3 +3976,95 @@ button:active, [role="button"]:active {
 .ade-fade-in {
   animation: ade-fade-slide-up 0.3s ease-out both;
 }
+
+/*
+   Welcome card (onboarding): split-hero layout.
+*/
+
+/* Card-specific entrance that preserves vertical centering (the global
+   dialog keyframe drops the -50% Y offset, which jumps a tall card). */
+.ade-welcome-card[data-state="open"] {
+  animation: ade-welcome-card-in 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+@keyframes ade-welcome-card-in {
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+.ade-welcome-card__glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 220px;
+  pointer-events: none;
+  z-index: 0;
+  background:
+    radial-gradient(120% 140% at 18% -20%, var(--color-accent-glow-strong, rgba(168, 130, 255, 0.22)), transparent 60%),
+    radial-gradient(90% 120% at 100% -10%, rgba(124, 58, 237, 0.16), transparent 55%);
+}
+
+.ade-welcome-card__body {
+  display: grid;
+  grid-template-columns: 1.55fr 1fr;
+  gap: 24px;
+  align-items: stretch;
+}
+
+.ade-welcome-card__surfaces {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.ade-welcome-card__tile {
+  animation: ade-welcome-tile-in 380ms cubic-bezier(0.34, 1.2, 0.64, 1) both;
+  transition: transform 160ms ease;
+}
+.ade-welcome-card__tile:hover {
+  transform: translateY(-3px);
+}
+
+.ade-welcome-card__qr {
+  transition: transform 180ms ease;
+}
+.ade-welcome-card__qr:hover {
+  transform: scale(1.06);
+}
+
+.ade-welcome-card__play {
+  transition: transform 160ms ease, box-shadow 160ms ease;
+}
+.ade-welcome-card__poster:hover .ade-welcome-card__play {
+  transform: translate(-50%, -50%) scale(1.08);
+}
+
+@keyframes ade-welcome-tile-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 720px) {
+  .ade-welcome-card__body { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 640px) {
+  .ade-welcome-card__surfaces {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ade-welcome-card[data-state="open"] { animation: none; }
+  .ade-welcome-card__tile,
+  .ade-welcome-card__qr,
+  .ade-welcome-card__play {
+    animation: none !important;
+    transition: none !important;
+  }
+  .ade-welcome-card__tile:hover { transform: none; }
+  .ade-welcome-card__qr:hover { transform: none; }
+  .ade-welcome-card__poster:hover .ade-welcome-card__play { transform: translate(-50%, -50%); }
+}
diff --git a/apps/desktop/src/renderer/public/welcome/ade-icon.webp b/apps/desktop/src/renderer/public/welcome/ade-icon.webp
new file mode 100644
index 000000000..c935dee53
Binary files /dev/null and b/apps/desktop/src/renderer/public/welcome/ade-icon.webp differ
diff --git a/apps/desktop/src/renderer/public/welcome/desktop.webp b/apps/desktop/src/renderer/public/welcome/desktop.webp
new file mode 100644
index 000000000..fffebdb96
Binary files /dev/null and b/apps/desktop/src/renderer/public/welcome/desktop.webp differ
diff --git a/apps/desktop/src/renderer/public/welcome/mobile.webp b/apps/desktop/src/renderer/public/welcome/mobile.webp
new file mode 100644
index 000000000..9f560def4
Binary files /dev/null and b/apps/desktop/src/renderer/public/welcome/mobile.webp differ
diff --git a/apps/desktop/src/renderer/public/welcome/tui.webp b/apps/desktop/src/renderer/public/welcome/tui.webp
new file mode 100644
index 000000000..e4a4a30f9
Binary files /dev/null and b/apps/desktop/src/renderer/public/welcome/tui.webp differ
diff --git a/apps/desktop/src/renderer/public/welcome/video-poster.jpg b/apps/desktop/src/renderer/public/welcome/video-poster.jpg
new file mode 100644
index 000000000..1f5eead5c
Binary files /dev/null and b/apps/desktop/src/renderer/public/welcome/video-poster.jpg differ
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 2565d2390..325f9c8cd 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -664,7 +664,7 @@ Themes: six shipped themes (`e-paper`, `bloomberg`, `github`, `rainbow`, `sky`,
 
 - `renderer/lib/dialogBus.ts` — tiny pub/sub that lets shared UI open/close dialogs by a stable id (`lanes.create`, `settings.ai`, etc.) without prop-drilling. Dialogs subscribe by id; a `subscribeAll` channel exists for devtools. Default singleton export `dialogBus`.
 - `renderer/onboarding/docsLinks.ts` — typed registry of internal/public doc URLs (`docs.lanes`, `docs.cto`, …) used by `DidYouKnow`, glossary/help surfaces, and the `HelpMenu`.
-- `renderer/components/onboarding/WelcomeVideoGate.tsx` — app-level one-time welcome video overlay. Seen/dismissed state is stored in the global app state file, separate from per-project setup onboarding.
+- `renderer/components/onboarding/WelcomeVideoGate.tsx` — app-level one-time welcome card overlay with sanitized bundled screenshots/assets, a lazy intro video, and an ADE Mobile TestFlight QR/download/copy panel. Seen/dismissed state is stored in the global app state file, separate from per-project setup onboarding.
 
 Related UI docs: [Terminals UI surfaces](./features/terminals-and-sessions/ui-surfaces.md), [Files and editor](./features/files-and-editor/README.md), and [Onboarding and settings](./features/onboarding-and-settings/README.md).
 
diff --git a/docs/features/onboarding-and-settings/README.md b/docs/features/onboarding-and-settings/README.md
index c0d2f28d3..14defbdf3 100644
--- a/docs/features/onboarding-and-settings/README.md
+++ b/docs/features/onboarding-and-settings/README.md
@@ -104,10 +104,13 @@ Renderer — onboarding:
   video gate plus `DidYouKnow`; guided per-tab tours and the old
   welcome wizard are no longer mounted.
 - `apps/desktop/src/renderer/components/onboarding/WelcomeVideoGate.tsx`
-  — one-time app-level welcome screen backed by global app state. It
-  links to GitHub, the docs site, the ADE Mobile TestFlight install,
-  and the current welcome YouTube video. The Help menu can replay it
+  — one-time app-level welcome card backed by global app state. It
+  uses sanitized bundled welcome assets, lazy-loads the intro video,
+  links to GitHub and the docs site, and includes an ADE Mobile
+  TestFlight QR/download/copy panel. The Help menu can replay it
   without resetting setup.
+- `apps/desktop/src/renderer/public/welcome/` — sanitized bundled
+  screenshots/poster/icon assets consumed by the welcome card.
 - `apps/desktop/src/renderer/components/onboarding/HelpMenu.tsx`
   — persistent help menu in the top bar: glossary, docs links, welcome
   video replay, and help preferences. Tour replay entries were removed