diff --git a/apps/web/__tests__/unit/checkout-return.test.ts b/apps/web/__tests__/unit/checkout-return.test.ts
new file mode 100644
index 00000000000..126ab0c8121
--- /dev/null
+++ b/apps/web/__tests__/unit/checkout-return.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { resolveCheckoutReturnUrls } from "@/lib/checkout-return";
+
+describe("resolveCheckoutReturnUrls", () => {
+	it("returns null without a return path", () => {
+		expect(resolveCheckoutReturnUrls("https://cap.so", undefined)).toBeNull();
+		expect(resolveCheckoutReturnUrls("https://cap.so", "")).toBeNull();
+		expect(resolveCheckoutReturnUrls("https://cap.so", 42)).toBeNull();
+	});
+
+	it("comes back to the same page after checkout", () => {
+		expect(
+			resolveCheckoutReturnUrls(
+				"https://cap.so/",
+				"/onboarding/loom?url=https%3A%2F%2Fwww.loom.com%2Fshare%2Fabc",
+			),
+		).toEqual({
+			successUrl:
+				"https://cap.so/onboarding/loom?url=https%3A%2F%2Fwww.loom.com%2Fshare%2Fabc&upgrade=true&session_id={CHECKOUT_SESSION_ID}",
+			cancelUrl:
+				"https://cap.so/onboarding/loom?url=https%3A%2F%2Fwww.loom.com%2Fshare%2Fabc",
+		});
+		expect(
+			resolveCheckoutReturnUrls("https://cap.so", "/onboarding/upload#drop"),
+		).toEqual({
+			successUrl:
+				"https://cap.so/onboarding/upload?upgrade=true&session_id={CHECKOUT_SESSION_ID}#drop",
+			cancelUrl: "https://cap.so/onboarding/upload#drop",
+		});
+	});
+
+	it("never leaves the app", () => {
+		expect(
+			resolveCheckoutReturnUrls("https://cap.so", "https://evil.example/x"),
+		).toEqual({
+			successUrl:
+				"https://cap.so/dashboard?upgrade=true&session_id={CHECKOUT_SESSION_ID}",
+			cancelUrl: "https://cap.so/dashboard",
+		});
+		expect(
+			resolveCheckoutReturnUrls("https://cap.so", "//evil.example/x"),
+		).toEqual({
+			successUrl:
+				"https://cap.so/dashboard?upgrade=true&session_id={CHECKOUT_SESSION_ID}",
+			cancelUrl: "https://cap.so/dashboard",
+		});
+	});
+});
diff --git a/apps/web/__tests__/unit/onboarding-flow.test.ts b/apps/web/__tests__/unit/onboarding-flow.test.ts
new file mode 100644
index 00000000000..a3250e1a104
--- /dev/null
+++ b/apps/web/__tests__/unit/onboarding-flow.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect, it } from "vitest";
+import {
+	maskEmail,
+	needsOnboarding,
+	onboardingContinuePath,
+	onboardingHrefForIntent,
+	onboardingIntentFromNextPath,
+	onboardingProgressIndex,
+	onboardingThemeFromCookie,
+	resolveOnboardingStep,
+	resolveOnboardingTheme,
+	splitFullName,
+} from "@/app/(org)/onboarding/onboarding-flow";
+
+describe("needsOnboarding", () => {
+	it("requires a name", () => {
+		expect(needsOnboarding({ name: null, onboardingSteps: null })).toBe(true);
+		expect(needsOnboarding({ name: "   ", onboardingSteps: null })).toBe(true);
+	});
+
+	it("keeps new accounts in onboarding until they pick a start", () => {
+		expect(
+			needsOnboarding({ name: "Ada", onboardingSteps: { getStarted: false } }),
+		).toBe(true);
+		expect(
+			needsOnboarding({ name: "Ada", onboardingSteps: { getStarted: true } }),
+		).toBe(false);
+	});
+
+	it("leaves existing named accounts alone", () => {
+		expect(needsOnboarding({ name: "Ada", onboardingSteps: null })).toBe(false);
+		expect(needsOnboarding({ name: "Ada", onboardingSteps: {} })).toBe(false);
+	});
+});
+
+describe("resolveOnboardingStep", () => {
+	it("sends unnamed users to the name step", () => {
+		expect(resolveOnboardingStep("start", { name: null })).toEqual({
+			kind: "redirect",
+			step: "welcome",
+		});
+		expect(resolveOnboardingStep("welcome", { name: null })).toEqual({
+			kind: "render",
+			step: "welcome",
+		});
+	});
+
+	it("moves named users past the name step", () => {
+		expect(resolveOnboardingStep("welcome", { name: "Ada" })).toEqual({
+			kind: "redirect",
+			step: "start",
+		});
+		expect(resolveOnboardingStep(undefined, { name: "Ada" })).toEqual({
+			kind: "redirect",
+			step: "start",
+		});
+	});
+
+	it("renders the start and path steps", () => {
+		for (const step of ["start", "loom", "record", "upload"] as const) {
+			expect(resolveOnboardingStep(step, { name: "Ada" })).toEqual({
+				kind: "render",
+				step,
+			});
+		}
+	});
+
+	it("redirects the old step urls", () => {
+		expect(
+			resolveOnboardingStep("organization-setup", { name: "Ada" }),
+		).toEqual({ kind: "redirect", step: "start" });
+		expect(resolveOnboardingStep("custom-domain", { name: "Ada" })).toEqual({
+			kind: "redirect",
+			step: "start",
+		});
+		expect(resolveOnboardingStep("invite-team", { name: "Ada" })).toEqual({
+			kind: "redirect",
+			step: "start",
+		});
+		expect(resolveOnboardingStep("download", { name: "Ada" })).toEqual({
+			kind: "redirect",
+			step: "record",
+		});
+		expect(resolveOnboardingStep("nope", { name: "Ada" })).toEqual({
+			kind: "redirect",
+			step: "start",
+		});
+	});
+});
+
+describe("onboardingIntentFromNextPath", () => {
+	it("reads a Loom import link", () => {
+		expect(
+			onboardingIntentFromNextPath(
+				"/dashboard/import/loom?url=https%3A%2F%2Fwww.loom.com%2Fshare%2Fabc1234567",
+			),
+		).toEqual({
+			kind: "loom",
+			loomUrl: "https://www.loom.com/share/abc1234567",
+			bulk: false,
+		});
+		expect(
+			onboardingIntentFromNextPath("/dashboard/import/loom?mode=csv"),
+		).toEqual({ kind: "loom", loomUrl: undefined, bulk: true });
+	});
+
+	it("reads upload and record destinations", () => {
+		expect(onboardingIntentFromNextPath("/dashboard/import/file")).toEqual({
+			kind: "upload",
+		});
+		expect(onboardingIntentFromNextPath("/dashboard/import")).toEqual({
+			kind: "upload",
+		});
+		expect(onboardingIntentFromNextPath("/dashboard/caps/record")).toEqual({
+			kind: "record",
+		});
+	});
+
+	it("keeps other destinations to continue to afterwards", () => {
+		expect(
+			onboardingIntentFromNextPath("/dashboard/settings/billing?tab=plan"),
+		).toEqual({
+			kind: "elsewhere",
+			path: "/dashboard/settings/billing?tab=plan",
+		});
+	});
+
+	it("ignores the dashboard home, onboarding and other origins", () => {
+		expect(onboardingIntentFromNextPath(undefined)).toBeNull();
+		expect(onboardingIntentFromNextPath("/dashboard")).toBeNull();
+		expect(onboardingIntentFromNextPath("/dashboard/caps")).toBeNull();
+		expect(onboardingIntentFromNextPath("/onboarding/start")).toBeNull();
+		expect(onboardingIntentFromNextPath("/invite/abc123")).toBeNull();
+		expect(onboardingIntentFromNextPath("https://evil.example/x")).toBeNull();
+		expect(onboardingIntentFromNextPath("//evil.example/x")).toBeNull();
+	});
+});
+
+describe("onboarding hrefs", () => {
+	it("routes each intent to its step", () => {
+		expect(
+			onboardingHrefForIntent({
+				kind: "loom",
+				loomUrl: "https://www.loom.com/share/abc1234567",
+				bulk: true,
+			}),
+		).toBe(
+			"/onboarding/loom?url=https%3A%2F%2Fwww.loom.com%2Fshare%2Fabc1234567&bulk=1",
+		);
+		expect(onboardingHrefForIntent({ kind: "upload" })).toBe(
+			"/onboarding/upload",
+		);
+		expect(onboardingHrefForIntent({ kind: "record" })).toBe(
+			"/onboarding/record",
+		);
+		expect(
+			onboardingHrefForIntent({ kind: "elsewhere", path: "/dashboard/spaces" }),
+		).toBe("/onboarding/start");
+		expect(onboardingHrefForIntent(null)).toBe("/onboarding/start");
+	});
+
+	it("continues to the remembered destination", () => {
+		expect(
+			onboardingContinuePath({ kind: "elsewhere", path: "/dashboard/spaces" }),
+		).toBe("/dashboard/spaces");
+		expect(onboardingContinuePath(null)).toBe("/dashboard/caps");
+	});
+
+	it("maps steps onto three progress marks", () => {
+		expect(onboardingProgressIndex("welcome")).toBe(0);
+		expect(onboardingProgressIndex("start")).toBe(1);
+		expect(onboardingProgressIndex("loom")).toBe(2);
+		expect(onboardingProgressIndex("upload")).toBe(2);
+	});
+});
+
+describe("splitFullName", () => {
+	it("splits the first word from the rest", () => {
+		expect(splitFullName("  Ada  Lovelace King ")).toEqual({
+			firstName: "Ada",
+			lastName: "Lovelace King",
+		});
+		expect(splitFullName("Cher")).toEqual({ firstName: "Cher", lastName: "" });
+	});
+});
+
+describe("maskEmail", () => {
+	it("hides most of the mailbox name", () => {
+		expect(maskEmail("richie@cap.so")).toBe("ri••••@cap.so");
+		expect(maskEmail("jo@cap.so")).toBe("j•••@cap.so");
+		expect(maskEmail("nadia.1791348130278@example.com")).toBe(
+			"na•••••@example.com",
+		);
+		expect(maskEmail("not-an-email")).toBe("not-an-email");
+	});
+});
+
+describe("onboarding theme", () => {
+	it("follows the device unless the app theme was chosen", () => {
+		expect(onboardingThemeFromCookie(undefined)).toBe("system");
+		expect(onboardingThemeFromCookie("purple")).toBe("system");
+		expect(onboardingThemeFromCookie("dark")).toBe("dark");
+		expect(onboardingThemeFromCookie("light")).toBe("light");
+	});
+
+	it("resolves the device preference", () => {
+		expect(resolveOnboardingTheme("system", true)).toBe("dark");
+		expect(resolveOnboardingTheme("system", false)).toBe("light");
+		expect(resolveOnboardingTheme("light", true)).toBe("light");
+		expect(resolveOnboardingTheme("dark", false)).toBe("dark");
+	});
+});
diff --git a/apps/web/__tests__/unit/onboarding-organization-authorization.test.ts b/apps/web/__tests__/unit/onboarding-organization-authorization.test.ts
index d1029fc48c0..b6f27d0cbee 100644
--- a/apps/web/__tests__/unit/onboarding-organization-authorization.test.ts
+++ b/apps/web/__tests__/unit/onboarding-organization-authorization.test.ts
@@ -108,19 +108,23 @@ function makeFixture(
 	const database = {
 		select: (columns?: Record<string, AnyMySqlColumn>) => ({
 			from: (table: MySqlTable) => ({
-				where: async (condition: SQL | undefined) =>
-					rowsFor(table)
-						.filter((row) => matchesRow(condition, row))
-						.map((row) =>
-							columns
-								? Object.fromEntries(
-										Object.entries(columns).map(([key, column]) => [
-											key,
-											row[column.name],
-										]),
-									)
-								: { ...row },
-						),
+				where: (condition: SQL | undefined) => {
+					const result = Promise.resolve(
+						rowsFor(table)
+							.filter((row) => matchesRow(condition, row))
+							.map((row) =>
+								columns
+									? Object.fromEntries(
+											Object.entries(columns).map(([key, column]) => [
+												key,
+												row[column.name],
+											]),
+										)
+									: { ...row },
+							),
+					);
+					return Object.assign(result, { for: () => result });
+				},
 			}),
 		}),
 		update: (table: MySqlTable) => ({
@@ -422,7 +426,92 @@ describe("onboarding organization authorization", () => {
 			expect(fixture.user.onboardingSteps).toMatchObject({
 				organizationSetup: true,
 				download: true,
+				getStarted: true,
 			});
 		},
 	);
 });
+
+describe("onboarding get started", () => {
+	it("finishes onboarding and personalizes an owner's default organization", async () => {
+		const fixture = makeFixture({
+			user: { name: "Jane", onboardingSteps: { getStarted: false } },
+			organization: { name: "My Organization", ownerId: USER_ID },
+		});
+
+		await fixture.run((service) => service.getStarted({ path: "loom" }));
+
+		expect(fixture.organization.name).toBe("Jane's Organization");
+		expect(fixture.organizations).toHaveLength(1);
+		expect(fixture.user).toMatchObject({
+			activeOrganizationId: ORGANIZATION_ID,
+			defaultOrgId: DEFAULT_ORGANIZATION_ID,
+			onboardingSteps: {
+				welcome: true,
+				organizationSetup: true,
+				customDomain: true,
+				inviteTeam: true,
+				download: true,
+				getStarted: true,
+			},
+		});
+		expect(fixture.user.onboarding_completed_at).toBeInstanceOf(Date);
+	});
+
+	it("leaves a team's organization untouched for members", async () => {
+		const fixture = makeFixture({
+			user: { onboardingSteps: { getStarted: false } },
+			organization: { name: "My Organization" },
+		});
+
+		await fixture.run((service) => service.getStarted({ path: "record" }));
+
+		expect(fixture.organization.name).toBe("My Organization");
+		expect(fixture.organizations).toHaveLength(1);
+		expect(fixture.memberships).toEqual([]);
+		expect(fixture.user).toMatchObject({
+			activeOrganizationId: ORGANIZATION_ID,
+			onboardingSteps: { getStarted: true },
+		});
+	});
+
+	it.each([
+		{ scenario: "no organization", organizationExists: false },
+		{ scenario: "a deleted organization", organizationExists: true },
+	])("creates an organization when the user has $scenario", async (input) => {
+		const fixture = makeFixture({
+			organizationExists: input.organizationExists,
+			organization: { ownerId: USER_ID, tombstoneAt: new Date() },
+			user: {
+				name: "Jane",
+				activeOrganizationId: input.organizationExists
+					? ORGANIZATION_ID
+					: Organisation.OrganisationId.make(""),
+				defaultOrgId: null,
+				onboardingSteps: { getStarted: false },
+			},
+		});
+
+		await fixture.run((service) => service.getStarted({ path: "upload" }));
+
+		const created = fixture.organizations.find(
+			(organization) => organization.id !== ORGANIZATION_ID,
+		);
+		expect(created).toMatchObject({
+			name: "Jane's Organization",
+			ownerId: USER_ID,
+		});
+		expect(fixture.memberships).toEqual([
+			expect.objectContaining({
+				organizationId: created?.id,
+				userId: USER_ID,
+				role: "owner",
+			}),
+		]);
+		expect(fixture.user).toMatchObject({
+			activeOrganizationId: created?.id,
+			defaultOrgId: created?.id,
+			onboardingSteps: { getStarted: true },
+		});
+	});
+});
diff --git a/apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/web-recorder-dialog.tsx b/apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/web-recorder-dialog.tsx
index d25b622b011..f105ac357a6 100644
--- a/apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/web-recorder-dialog.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/web-recorder-dialog.tsx
@@ -56,8 +56,12 @@ const waitForNextFrame = () =>
 		window.requestAnimationFrame(() => resolve());
 	});
 
-export const WebRecorderDialog = () => {
-	const [open, setOpen] = useState(false);
+export const WebRecorderDialog = ({
+	defaultOpen = false,
+}: {
+	defaultOpen?: boolean;
+} = {}) => {
+	const [open, setOpen] = useState(defaultOpen);
 	const [settingsOpen, setSettingsOpen] = useState(false);
 	const [howItWorksOpen, setHowItWorksOpen] = useState(false);
 	const [recordingMode, setRecordingMode] =
diff --git a/apps/web/app/(org)/dashboard/caps/record/RecordVideoPage.tsx b/apps/web/app/(org)/dashboard/caps/record/RecordVideoPage.tsx
index 9f8537e51f3..8f0bd95f280 100644
--- a/apps/web/app/(org)/dashboard/caps/record/RecordVideoPage.tsx
+++ b/apps/web/app/(org)/dashboard/caps/record/RecordVideoPage.tsx
@@ -11,7 +11,11 @@ import { CHROME_EXTENSION_BUTTON_CLASS } from "@/lib/chrome-extension";
 import { FREE_PLAN_MAX_RECORDING_MS } from "../components/web-recorder-dialog/web-recorder-constants";
 import { WebRecorderDialog } from "../components/web-recorder-dialog/web-recorder-dialog";
 
-export const RecordVideoPage = () => {
+export const RecordVideoPage = ({
+	openBrowserRecorder = false,
+}: {
+	openBrowserRecorder?: boolean;
+}) => {
 	const checkingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	const openDesktop = useCallback(() => {
@@ -62,7 +66,7 @@ export const RecordVideoPage = () => {
 								Open Cap Desktop
 							</Button>
 							<p className="text-sm text-gray-10">or</p>
-							<WebRecorderDialog />
+							<WebRecorderDialog defaultOpen={openBrowserRecorder} />
 							<ChromeRecorderButton
 								size="sm"
 								className={`${CHROME_EXTENSION_BUTTON_CLASS} font-medium`}
diff --git a/apps/web/app/(org)/dashboard/caps/record/page.tsx b/apps/web/app/(org)/dashboard/caps/record/page.tsx
index d6902884695..a43a682c3f7 100644
--- a/apps/web/app/(org)/dashboard/caps/record/page.tsx
+++ b/apps/web/app/(org)/dashboard/caps/record/page.tsx
@@ -5,6 +5,11 @@ export const metadata: Metadata = {
 	title: "Record a Cap",
 };
 
-export default function RecordVideoRoute() {
-	return <RecordVideoPage />;
+export default async function RecordVideoRoute({
+	searchParams,
+}: {
+	searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+	const { recorder } = await searchParams;
+	return <RecordVideoPage openBrowserRecorder={recorder === "browser"} />;
 }
diff --git a/apps/web/app/(org)/dashboard/import/import-media.ts b/apps/web/app/(org)/dashboard/import/import-media.ts
index 3a2a4ab7dce..d80b0e4ec6d 100644
--- a/apps/web/app/(org)/dashboard/import/import-media.ts
+++ b/apps/web/app/(org)/dashboard/import/import-media.ts
@@ -20,11 +20,13 @@ export async function importMediaFile({
 	folderId,
 	orgId,
 	setUploadStatus,
+	showSuccessToast = true,
 }: {
 	file: File;
 	folderId?: Folder.FolderId;
 	orgId: Organisation.OrganisationId;
 	setUploadStatus: (state: UploadStatus | undefined) => void;
+	showSuccessToast?: boolean;
 }) {
 	const imageContentType = getSupportedImageContentType(file);
 
@@ -44,6 +46,7 @@ export async function importMediaFile({
 			folderId,
 			orgId,
 			setUploadStatus,
+			showSuccessToast,
 		);
 	}
 
@@ -116,6 +119,7 @@ async function uploadVideoForServerProcessing(
 	folderId: Folder.FolderId | undefined,
 	orgId: Organisation.OrganisationId,
 	setUploadStatus: (state: UploadStatus | undefined) => void,
+	showSuccessToast: boolean,
 ) {
 	try {
 		setUploadStatus({ status: "parsing" });
@@ -265,9 +269,11 @@ async function uploadVideoForServerProcessing(
 		}
 
 		setUploadStatus(undefined);
-		toast.success(
-			"Video uploaded! Processing will continue in the background.",
-		);
+		if (showSuccessToast) {
+			toast.success(
+				"Video uploaded! Processing will continue in the background.",
+			);
+		}
 		return true;
 	} catch (err) {
 		console.error("Video upload failed", err);
diff --git a/apps/web/app/(org)/dashboard/layout.tsx b/apps/web/app/(org)/dashboard/layout.tsx
index bd9ceb66594..156a6cedd94 100644
--- a/apps/web/app/(org)/dashboard/layout.tsx
+++ b/apps/web/app/(org)/dashboard/layout.tsx
@@ -9,6 +9,7 @@ import { AuthContextProvider } from "@/app/Layout/AuthContext";
 import { resolveCurrentUser } from "@/app/Layout/current-user";
 import { runPromise } from "@/lib/server";
 import { getShareableLinkUsage } from "@/lib/shareable-link-quota";
+import { needsOnboarding } from "../onboarding/onboarding-flow";
 import DashboardInner from "./_components/DashboardInner";
 import { DashboardPasteImport } from "./_components/DashboardPasteImport";
 import MobileTab from "./_components/MobileTab";
@@ -52,9 +53,7 @@ export default async function DashboardLayout({
 	const pendingInviteId = await getPendingInviteIdForUser(user.email);
 	if (pendingInviteId) redirect(`/invite/${pendingInviteId}`);
 
-	if (!user.name || user.name.length === 0) {
-		redirect("/onboarding/welcome");
-	}
+	if (needsOnboarding(user)) redirect("/onboarding");
 
 	let organizationSelect: Organization[] = [];
 	let userCapsCount: number | null = 0;
diff --git a/apps/web/app/(org)/invite/[inviteId]/InviteAccept.tsx b/apps/web/app/(org)/invite/[inviteId]/InviteAccept.tsx
index 3768f4f1644..188f4884562 100644
--- a/apps/web/app/(org)/invite/[inviteId]/InviteAccept.tsx
+++ b/apps/web/app/(org)/invite/[inviteId]/InviteAccept.tsx
@@ -1,121 +1,257 @@
 "use client";
 
-import type { userSelectProps } from "@cap/database/auth/session";
-import { Button, Logo } from "@cap/ui";
-import { LogOut } from "lucide-react";
+import { ArrowRight, LoaderCircle } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { signOut } from "next-auth/react";
-import { useState } from "react";
+import { type CSSProperties, useState } from "react";
 import { toast } from "sonner";
+import { resetUser, trackEvent } from "@/app/utils/analytics";
+import { ThemeToggle } from "../../onboarding/components/PaperRoot";
+import { CapWordmark, Explainer } from "../../onboarding/components/paper";
+import {
+	StepLede,
+	StepPage,
+	StepTitle,
+} from "../../onboarding/components/StepChrome";
+import { JoinScene } from "../../onboarding/components/scenes";
+import { clearOnboardingNextPath } from "../../onboarding-next";
 
 type InviteAcceptProps = {
 	inviteId: string;
 	organizationName: string;
 	inviterName: string;
-	user: typeof userSelectProps | null;
+	maskedEmail: string;
+	invitedInitial: string;
+	signedInEmail: string | null;
+	emailMatches: boolean;
+	needsOnboarding: boolean;
 };
 
 export function InviteAccept({
 	inviteId,
 	organizationName,
 	inviterName,
-	user,
+	maskedEmail,
+	invitedInitial,
+	signedInEmail,
+	emailMatches,
+	needsOnboarding,
 }: InviteAcceptProps) {
 	const router = useRouter();
-	const [isLoading, setIsLoading] = useState(false);
+	const [pending, setPending] = useState<
+		"accept" | "decline" | "switch" | null
+	>(null);
+	const invitePath = `/invite/${inviteId}`;
+	const signedIn = signedInEmail !== null;
+	const inviterFirstName = inviterName.trim().split(/\s+/)[0] ?? inviterName;
 
-	const handleAccept = async () => {
-		setIsLoading(true);
+	const respond = async (action: "accept" | "decline") => {
+		setPending(action);
 		try {
-			if (!user) {
-				router.push(`/login?next=/invite/${inviteId}`);
-				return;
-			}
-
-			const response = await fetch("/api/invite/accept", {
+			const response = await fetch(`/api/invite/${action}`, {
 				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
+				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({ inviteId }),
 			});
 
-			if (response.ok) {
-				toast.success("Invite accepted successfully");
-				router.push("/dashboard");
-			} else {
-				const error = await response.text();
-				toast.error(`Failed to accept invite: ${error}`);
-			}
-		} catch (error) {
-			console.error("Error accepting invite:", error);
-			toast.error("An error occurred while accepting the invite");
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	const handleDecline = async () => {
-		setIsLoading(true);
-		try {
-			if (!user) {
-				router.push(`/login?next=/invite/${inviteId}`);
+			if (!response.ok) {
+				const message =
+					response.status === 403
+						? "This invite was sent to a different email address."
+						: response.status === 404
+							? "This invite is no longer available. Ask your teammate to send a new one."
+							: "Something went wrong. Please try again.";
+				toast.error(message);
+				setPending(null);
 				return;
 			}
 
-			const response = await fetch("/api/invite/decline", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({ inviteId }),
-			});
-
-			if (response.ok) {
-				toast.success("Invite declined");
-				router.push("/");
+			clearOnboardingNextPath();
+			if (action === "accept") {
+				trackEvent("invite_accepted");
+				router.push(needsOnboarding ? "/onboarding" : "/dashboard/caps");
 			} else {
-				const error = await response.text();
-				toast.error(`Failed to decline invite: ${error}`);
+				trackEvent("invite_declined");
+				router.push("/dashboard");
 			}
-		} catch (error) {
-			console.error("Error declining invite:", error);
-			toast.error("An error occurred while declining the invite");
-		} finally {
-			setIsLoading(false);
+			router.refresh();
+		} catch {
+			toast.error("Something went wrong. Please try again.");
+			setPending(null);
 		}
 	};
 
+	const switchAccount = () => {
+		setPending("switch");
+		resetUser();
+		signOut({ callbackUrl: `/login?next=${encodeURIComponent(invitePath)}` });
+	};
+
 	return (
-		<div className="flex flex-col items-center justify-center min-h-screen bg-gray-1 relative">
-			<div className="bg-gray-50 p-4 rounded-[20px] border-[1px] border-gray-200 shadow-[0px 8px 16px rgba(18, 22, 31, 0.04)]">
-				<Logo className="w-20 h-auto mb-4" />
-				<h1 className="text-xl mb-4">
-					You're invited to join <strong>{organizationName}</strong> on Cap
-				</h1>
-				<p className="text-gray-600 text-sm mb-6">
-					{inviterName} invited you to join their organization on Cap.
-				</p>
-				<div className="flex space-x-2">
-					<Button onClick={handleAccept} variant="primary" disabled={isLoading}>
-						{isLoading ? "Processing..." : "Accept"}
-					</Button>
-					<Button onClick={handleDecline} variant="gray" disabled={isLoading}>
-						{isLoading ? "Processing..." : "Decline"}
-					</Button>
+		<>
+			<header className="mx-auto flex w-full max-w-[1180px] items-center justify-between gap-3 px-5 pt-5 sm:px-8 sm:pt-7">
+				<CapWordmark className="h-[26px] w-auto text-[var(--ob-ink)] sm:h-7" />
+				<div className="flex min-w-0 items-center gap-3">
+					{signedIn && (
+						<span className="hidden min-w-0 truncate text-[13px] text-[var(--ob-ink-soft)] sm:inline">
+							{signedInEmail}
+						</span>
+					)}
+					<ThemeToggle />
 				</div>
-			</div>
-			{!user && (
-				<Button
-					onClick={() => signOut({ callbackUrl: "/login" })}
-					size="sm"
-					variant="white"
-					className="absolute bottom-4 left-4 text-gray-1 hover:text-gray-700"
-				>
-					<LogOut className="w-4 h-4 mr-2" />
-					Sign Out
-				</Button>
-			)}
-		</div>
+			</header>
+			<main className="flex flex-1 flex-col">
+				<StepPage>
+					<div className="grid flex-1 items-center gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.05fr)] lg:gap-14">
+						<div className="flex min-w-0 flex-col">
+							<div className="ob-rise mb-5 flex items-center gap-3">
+								<span className="flex size-12 items-center justify-center rounded-full bg-[var(--ob-accent)] text-[18px] font-medium text-white">
+									{inviterFirstName.charAt(0).toUpperCase()}
+								</span>
+								<p className="text-[15px] leading-snug text-[var(--ob-ink-soft)]">
+									<span className="font-medium text-[var(--ob-ink)]">
+										{inviterName}
+									</span>{" "}
+									invited you
+								</p>
+							</div>
+							<StepTitle>
+								Join <span className="break-words">{organizationName}</span> on
+								Cap
+							</StepTitle>
+							<StepLede>
+								Watch your team's videos, record your own and share them in one
+								place. It only takes a minute to get set up.
+							</StepLede>
+
+							<div
+								className="ob-rise mt-8 flex flex-col gap-3"
+								style={{ "--d": "0.12s" } as CSSProperties}
+							>
+								{!signedIn ? (
+									<>
+										<Link
+											href={`/signup?next=${encodeURIComponent(invitePath)}`}
+											className="ob-cta w-full sm:w-fit"
+											onClick={() => trackEvent("invite_join_clicked")}
+										>
+											Join {organizationName}
+											<ArrowRight className="ob-cta-arrow size-4" aria-hidden />
+										</Link>
+										<p className="text-[14px] text-[var(--ob-ink-soft)]">
+											Use {maskedEmail}, the address this invite was sent to.
+											Already on Cap?{" "}
+											<Link
+												href={`/login?next=${encodeURIComponent(invitePath)}`}
+												className="ob-link !inline whitespace-nowrap !text-[14px]"
+											>
+												Log in
+											</Link>
+										</p>
+									</>
+								) : emailMatches ? (
+									<>
+										<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+											<button
+												type="button"
+												className="ob-cta w-full sm:w-fit"
+												disabled={pending !== null}
+												onClick={() => respond("accept")}
+											>
+												{pending === "accept" ? (
+													<>
+														<LoaderCircle
+															className="size-4 animate-spin"
+															aria-hidden
+														/>
+														Joining…
+													</>
+												) : (
+													<>
+														Join {organizationName}
+														<ArrowRight
+															className="ob-cta-arrow size-4"
+															aria-hidden
+														/>
+													</>
+												)}
+											</button>
+											<button
+												type="button"
+												className="ob-link self-center sm:self-auto"
+												disabled={pending !== null}
+												onClick={() => respond("decline")}
+											>
+												{pending === "decline" ? "Declining…" : "Not now"}
+											</button>
+										</div>
+										<p className="text-[14px] text-[var(--ob-ink-soft)]">
+											You're signed in as {signedInEmail}.
+										</p>
+									</>
+								) : (
+									<>
+										<div className="rounded-2xl border-[1.5px] border-dashed border-[var(--ob-track-strong)] bg-[var(--ob-surface-soft)] px-4 py-3.5 text-[14.5px] leading-relaxed text-[var(--ob-ink-2)]">
+											This invite was sent to{" "}
+											<span className="font-medium text-[var(--ob-ink)]">
+												{maskedEmail}
+											</span>
+											, but you're signed in as{" "}
+											<span className="font-medium text-[var(--ob-ink)] break-all">
+												{signedInEmail}
+											</span>
+											. Switch to that account to join.
+										</div>
+										<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+											<button
+												type="button"
+												className="ob-cta w-full sm:w-fit"
+												disabled={pending !== null}
+												onClick={switchAccount}
+											>
+												{pending === "switch" ? "Switching…" : "Switch account"}
+											</button>
+											<Link
+												href="/dashboard"
+												className="ob-link self-center sm:self-auto"
+											>
+												Go to my library
+											</Link>
+										</div>
+									</>
+								)}
+							</div>
+						</div>
+
+						<Explainer
+							className="ob-rise"
+							label={`How joining ${organizationName} works`}
+							loopSeconds={8}
+							scene={
+								<JoinScene
+									organizationName={organizationName}
+									initial={invitedInitial}
+								/>
+							}
+							steps={[
+								{
+									title: "Press Join",
+									body: `Use ${maskedEmail}, the address this invite was sent to.`,
+								},
+								{
+									title: "Say hello",
+									body: "Add your name so your teammates know it's you.",
+								},
+								{
+									title: "Watch, record and share together",
+									body: `Everything ${organizationName} records lands in one shared library.`,
+								},
+							]}
+						/>
+					</div>
+				</StepPage>
+			</main>
+		</>
 	);
 }
diff --git a/apps/web/app/(org)/invite/[inviteId]/page.tsx b/apps/web/app/(org)/invite/[inviteId]/page.tsx
index 81d36d1e39c..c5b3186bd73 100644
--- a/apps/web/app/(org)/invite/[inviteId]/page.tsx
+++ b/apps/web/app/(org)/invite/[inviteId]/page.tsx
@@ -1,8 +1,6 @@
+import "../../onboarding/onboarding.css";
 import { db } from "@cap/database";
-import {
-	getCurrentUser,
-	type userSelectProps,
-} from "@cap/database/auth/session";
+import { getCurrentUser } from "@cap/database/auth/session";
 import {
 	organizationInvites,
 	organizations,
@@ -10,8 +8,16 @@ import {
 } from "@cap/database/schema";
 import { eq } from "drizzle-orm";
 import type { Metadata } from "next";
+import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
-import { InviteAccept } from ".//InviteAccept";
+import { PaperRoot } from "../../onboarding/components/PaperRoot";
+import {
+	maskEmail,
+	needsOnboarding,
+	onboardingThemeFromCookie,
+	THEME_COOKIE,
+} from "../../onboarding/onboarding-flow";
+import { InviteAccept } from "./InviteAccept";
 
 type Props = {
 	params: Promise<{ inviteId: string }>;
@@ -64,12 +70,25 @@ export default async function InvitePage(props: Props) {
 		return notFound();
 	}
 
+	const invitedEmail = inviteDetails.invite.invitedEmail;
+	const theme = onboardingThemeFromCookie(
+		(await cookies()).get(THEME_COOKIE)?.value,
+	);
+
 	return (
-		<InviteAccept
-			inviteId={inviteId}
-			organizationName={inviteDetails.organizationName}
-			inviterName={inviteDetails.inviterName}
-			user={user as typeof userSelectProps | null}
-		/>
+		<PaperRoot initialTheme={theme}>
+			<InviteAccept
+				inviteId={inviteId}
+				organizationName={inviteDetails.organizationName}
+				inviterName={inviteDetails.inviterName}
+				maskedEmail={maskEmail(invitedEmail)}
+				invitedInitial={invitedEmail.charAt(0).toUpperCase()}
+				signedInEmail={user?.email ?? null}
+				emailMatches={
+					user ? user.email.toLowerCase() === invitedEmail.toLowerCase() : false
+				}
+				needsOnboarding={user ? needsOnboarding(user) : false}
+			/>
+		</PaperRoot>
 	);
 }
diff --git a/apps/web/app/(org)/onboarding-next.ts b/apps/web/app/(org)/onboarding-next.ts
index e4f26f66930..582ef6a1237 100644
--- a/apps/web/app/(org)/onboarding-next.ts
+++ b/apps/web/app/(org)/onboarding-next.ts
@@ -1,7 +1,7 @@
 import Cookies from "js-cookie";
+import { ONBOARDING_NEXT_COOKIE as COOKIE_NAME } from "./onboarding/onboarding-flow";
 import { getSafeNextPath } from "./safe-next";
 
-const COOKIE_NAME = "cap_onboarding_next";
 const EXPIRES_DAYS = 1 / 24;
 
 export const rememberOnboardingNextPath = (path: string) => {
diff --git a/apps/web/app/(org)/onboarding/[...steps]/layout.tsx b/apps/web/app/(org)/onboarding/[...steps]/layout.tsx
deleted file mode 100644
index 19007be208f..00000000000
--- a/apps/web/app/(org)/onboarding/[...steps]/layout.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { getCurrentUser } from "@cap/database/auth/session";
-import { redirect } from "next/navigation";
-
-export default async function OnboardingStepLayout({
-	children,
-	params,
-}: {
-	children: React.ReactNode;
-	params: Promise<{ steps: string[] }>;
-}) {
-	const user = await getCurrentUser();
-
-	if (!user) {
-		redirect("/login");
-	}
-
-	const steps = user.onboardingSteps || {};
-	const currentStep = (await params).steps?.[0] ?? "welcome";
-
-	const ordered = [
-		"welcome",
-		"organization-setup",
-		"custom-domain",
-		"invite-team",
-		"download",
-	] as const;
-	const isComplete = (s: (typeof ordered)[number]) =>
-		s === "welcome"
-			? Boolean(steps.welcome && user.name)
-			: s === "organization-setup"
-				? Boolean(steps.organizationSetup)
-				: s === "custom-domain"
-					? Boolean(steps.customDomain)
-					: s === "invite-team"
-						? Boolean(steps.inviteTeam)
-						: Boolean(steps.download);
-
-	const firstIncomplete = ordered.find((s) => !isComplete(s)) ?? "download";
-
-	if (currentStep !== firstIncomplete) {
-		redirect(`/onboarding/${firstIncomplete}`);
-	}
-
-	return children;
-}
diff --git a/apps/web/app/(org)/onboarding/[...steps]/page.tsx b/apps/web/app/(org)/onboarding/[...steps]/page.tsx
index a9ffe7d3c66..62981286184 100644
--- a/apps/web/app/(org)/onboarding/[...steps]/page.tsx
+++ b/apps/web/app/(org)/onboarding/[...steps]/page.tsx
@@ -1,38 +1,150 @@
+import { db } from "@cap/database";
 import { getCurrentUser } from "@cap/database/auth/session";
-import { CustomDomainPage } from "../components/CustomDomainPage";
-import { DownloadPage } from "../components/DownloadPage";
-import { InviteTeamPage } from "../components/InviteTeamPage";
-import { OrganizationSetupPage } from "../components/OrganizationSetupPage";
-import { WelcomePage } from "../components/WelcomePage";
+import { organizationMembers, organizations } from "@cap/database/schema";
+import { userIsPro } from "@cap/utils";
+import { and, eq, isNull } from "drizzle-orm";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import {
+	canManageOrganizationSettings,
+	getEffectiveOrganizationRole,
+} from "@/lib/permissions/roles";
+import { LoomStep } from "../components/LoomStep";
+import { RecordStep } from "../components/RecordStep";
+import { StartStep } from "../components/StartStep";
+import { UploadStep } from "../components/UploadStep";
+import { WelcomeStep } from "../components/WelcomeStep";
+import {
+	ONBOARDING_NEXT_COOKIE,
+	onboardingContinuePath,
+	onboardingHrefForIntent,
+	onboardingIntentFromNextPath,
+	onboardingStepHref,
+	resolveOnboardingStep,
+} from "../onboarding-flow";
+
+type SearchParams = Record<string, string | string[] | undefined>;
+
+const firstParam = (value: string | string[] | undefined) =>
+	Array.isArray(value) ? value[0] : value;
+
+type CurrentUser = NonNullable<Awaited<ReturnType<typeof getCurrentUser>>>;
+
+async function getOnboardingOrganization(
+	user: Pick<CurrentUser, "id" | "activeOrganizationId" | "defaultOrgId">,
+) {
+	const organizationId = user.activeOrganizationId || user.defaultOrgId;
+	if (!organizationId) return null;
+
+	const [row] = await db()
+		.select({
+			id: organizations.id,
+			name: organizations.name,
+			ownerId: organizations.ownerId,
+			memberRole: organizationMembers.role,
+		})
+		.from(organizations)
+		.leftJoin(
+			organizationMembers,
+			and(
+				eq(organizationMembers.organizationId, organizations.id),
+				eq(organizationMembers.userId, user.id),
+			),
+		)
+		.where(
+			and(
+				eq(organizations.id, organizationId),
+				isNull(organizations.tombstoneAt),
+			),
+		)
+		.limit(1);
+
+	if (!row) return null;
+	const isOwner = row.ownerId === user.id;
+	if (!isOwner && !row.memberRole) return null;
+
+	return {
+		id: row.id,
+		name: row.name,
+		isOwner,
+		canManage: canManageOrganizationSettings(
+			getEffectiveOrganizationRole({
+				userId: user.id,
+				ownerId: row.ownerId,
+				memberRole: row.memberRole,
+			}),
+		),
+	};
+}
 
 export default async function OnboardingStepPage({
 	params,
+	searchParams,
 }: {
-	params: Promise<{
-		steps:
-			| "welcome"
-			| "organization-setup"
-			| "custom-domain"
-			| "invite-team"
-			| "download";
-	}>;
+	params: Promise<{ steps?: string[] }>;
+	searchParams: Promise<SearchParams>;
 }) {
-	const step = (await params).steps[0];
+	const user = await getCurrentUser();
+	if (!user) redirect("/login");
+
+	const resolution = resolveOnboardingStep((await params).steps?.[0], user);
+	if (resolution.kind === "redirect") {
+		redirect(onboardingStepHref(resolution.step));
+	}
+
+	const query = await searchParams;
+	const intent = onboardingIntentFromNextPath(
+		(await cookies()).get(ONBOARDING_NEXT_COOKIE)?.value,
+	);
+	const organization = await getOnboardingOrganization(user);
+	const teamName =
+		organization && !organization.isOwner ? organization.name : null;
+	const completed =
+		user.onboardingSteps?.getStarted !== false && organization !== null;
+	const isPro = userIsPro(user);
 
-	switch (step) {
+	switch (resolution.step) {
 		case "welcome":
-			return <WelcomePage />;
-		case "organization-setup": {
-			const user = await getCurrentUser();
-			return <OrganizationSetupPage firstName={user?.name} />;
-		}
-		case "custom-domain":
-			return <CustomDomainPage />;
-		case "invite-team":
-			return <InviteTeamPage />;
-		case "download":
-			return <DownloadPage />;
-		default:
-			return null;
+			return (
+				<WelcomeStep
+					organizationName={teamName}
+					nextHref={onboardingHrefForIntent(intent)}
+				/>
+			);
+		case "start":
+			return (
+				<StartStep
+					firstName={user.name?.trim() ?? ""}
+					organizationName={teamName}
+					continuePath={onboardingContinuePath(intent)}
+					completed={completed}
+				/>
+			);
+		case "loom":
+			return (
+				<LoomStep
+					key={firstParam(query.url) ?? ""}
+					organizationId={organization?.id ?? null}
+					initialUrl={firstParam(query.url)?.trim() ?? ""}
+					bulk={firstParam(query.bulk) === "1"}
+					canBulkImport={organization?.canManage ?? false}
+					isPro={isPro}
+					justUpgraded={firstParam(query.upgrade) === "true"}
+					completed={completed}
+				/>
+			);
+		case "record":
+			return (
+				<RecordStep isPro={isPro} email={user.email} completed={completed} />
+			);
+		case "upload":
+			return (
+				<UploadStep
+					organizationId={organization?.id ?? null}
+					isPro={isPro}
+					justUpgraded={firstParam(query.upgrade) === "true"}
+					completed={completed}
+				/>
+			);
 	}
 }
diff --git a/apps/web/app/(org)/onboarding/components/Base.tsx b/apps/web/app/(org)/onboarding/components/Base.tsx
deleted file mode 100644
index f6c611626ef..00000000000
--- a/apps/web/app/(org)/onboarding/components/Base.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client";
-
-import { LogoBadge } from "@cap/ui";
-import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import clsx from "clsx";
-import { useRouter } from "next/navigation";
-
-export const Base = ({
-	children,
-	title,
-	description,
-	descriptionClassName,
-	hideBackButton = true,
-}: {
-	children: React.ReactNode;
-	title: string;
-	description: string | React.ReactNode;
-	descriptionClassName?: string;
-	hideBackButton?: boolean;
-}) => {
-	const router = useRouter();
-	return (
-		<div className="relative w-[calc(100%-2%)] z-10 space-y-7 p-7 max-w-[472px] bg-gray-2 border border-gray-4 rounded-2xl">
-			{!hideBackButton && (
-				<div
-					onClick={() => router.back()}
-					className="absolute overflow-hidden flex top-5 rounded-full left-5 z-20 hover:bg-gray-1 gap-2 items-center py-1.5 px-3 text-gray-12 bg-transparent border border-gray-4 transition-colors duration-300 cursor-pointer"
-				>
-					<FontAwesomeIcon className="w-2" icon={faArrowLeft} />
-					<p className="text-xs text-inherit">Back</p>
-				</div>
-			)}
-			<a href="/">
-				<LogoBadge className="mx-auto w-auto h-12" />
-			</a>
-			<div className="flex flex-col justify-center items-center space-y-1 text-center">
-				<h2 className="text-2xl font-semibold text-gray-12">{title}</h2>
-				{typeof description === "string" ? (
-					<p
-						className={clsx(
-							"w-full text-base max-w-[260px] text-gray-10",
-							descriptionClassName,
-						)}
-					>
-						{description}
-					</p>
-				) : (
-					description
-				)}
-			</div>
-			{children}
-		</div>
-	);
-};
diff --git a/apps/web/app/(org)/onboarding/components/Bottom.tsx b/apps/web/app/(org)/onboarding/components/Bottom.tsx
deleted file mode 100644
index 7cc81911b0e..00000000000
--- a/apps/web/app/(org)/onboarding/components/Bottom.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client";
-
-import { Button } from "@cap/ui";
-import { useRouter } from "next/navigation";
-import { signOut } from "next-auth/react";
-import { startTransition } from "react";
-import { toast } from "sonner";
-import { resetUser } from "@/app/utils/analytics";
-import { useEffectMutation, useRpcClient } from "@/lib/EffectRuntime";
-import { consumeOnboardingNextPath } from "../../onboarding-next";
-
-export const Bottom = () => {
-	const router = useRouter();
-
-	const rpc = useRpcClient();
-
-	const skipToDashboard = useEffectMutation({
-		mutationFn: () =>
-			rpc.UserCompleteOnboardingStep({
-				step: "skipToDashboard",
-				data: undefined,
-			}),
-		onSuccess: () => {
-			startTransition(() => {
-				router.push(consumeOnboardingNextPath("/dashboard/caps"));
-				router.refresh();
-			});
-		},
-		onError: () => {
-			toast.error("An error occurred, please try again");
-		},
-	});
-
-	return (
-		<div className="flex right-0 bottom-0 left-0 justify-between items-center p-0 lg:mb-10 my-5 mx-auto w-full lg:w-[calc(100%-120px)] lg:absolute lg:mt-0">
-			<Button
-				className="w-fit"
-				variant="outline"
-				size="sm"
-				onClick={() => {
-					resetUser();
-					signOut();
-				}}
-			>
-				Sign out
-			</Button>
-			<Button
-				className="px-0 w-fit"
-				variant="transparent"
-				spinner={skipToDashboard.isPending}
-				spinnerColor="black"
-				spinnerBorderColor="rgba(0, 0, 0, 0.2)"
-				disabled={skipToDashboard.isPending || skipToDashboard.isSuccess}
-				size="sm"
-				onClick={() => skipToDashboard.mutate()}
-			>
-				{skipToDashboard.isPending ? "Skipping..." : "Skip to dashboard"}
-			</Button>
-		</div>
-	);
-};
-
-export default Bottom;
diff --git a/apps/web/app/(org)/onboarding/components/CustomDomainPage.tsx b/apps/web/app/(org)/onboarding/components/CustomDomainPage.tsx
deleted file mode 100644
index 45dec1e3260..00000000000
--- a/apps/web/app/(org)/onboarding/components/CustomDomainPage.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-"use client";
-
-import { Button } from "@cap/ui";
-import { useRouter } from "next/navigation";
-import { startTransition, useState } from "react";
-import { toast } from "sonner";
-import { UpgradeModal } from "@/components/UpgradeModal";
-import { useEffectMutation, useRpcClient } from "@/lib/EffectRuntime";
-import { Base } from "./Base";
-
-export function CustomDomainPage() {
-	const router = useRouter();
-	const rpc = useRpcClient();
-	const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-
-	const customDomainMutation = useEffectMutation({
-		mutationFn: (_redirect: boolean) =>
-			rpc.UserCompleteOnboardingStep({
-				step: "customDomain",
-				data: undefined,
-			}),
-		onSuccess: (_, redirect) => {
-			startTransition(() => {
-				if (redirect) {
-					router.push("/onboarding/invite-team");
-					router.refresh();
-				}
-			});
-		},
-		onError: () => {
-			toast.error("An error occurred, please try again");
-		},
-	});
-
-	const handleSubmit = async (redirect = true) =>
-		await customDomainMutation.mutateAsync(redirect);
-
-	return (
-		<Base
-			title="Custom Domain"
-			description={
-				<div>
-					<p className="w-full text-base max-w-[340px] text-gray-10">
-						Pro users can setup a custom domain to access their shareable Cap
-						links i.e{" "}
-						<span className="font-medium text-blue-500">
-							cap.yourdomain.com
-						</span>
-					</p>
-				</div>
-			}
-			descriptionClassName="max-w-[400px]"
-		>
-			<Button
-				onClick={() => setShowUpgradeModal(true)}
-				className="w-full"
-				disabled={customDomainMutation.isPending}
-				variant="blue"
-			>
-				Upgrade to Pro
-			</Button>
-			<div className="w-full h-px bg-gray-4" />
-			<Button
-				type="button"
-				variant="dark"
-				spinner={customDomainMutation.isPending}
-				disabled={customDomainMutation.isPending}
-				className="mx-auto w-full"
-				onClick={() => handleSubmit()}
-			>
-				Skip
-			</Button>
-			<UpgradeModal
-				onCheckout={async () => {
-					await handleSubmit();
-				}}
-				onboarding={true}
-				open={showUpgradeModal}
-				onOpenChange={setShowUpgradeModal}
-			/>
-		</Base>
-	);
-}
diff --git a/apps/web/app/(org)/onboarding/components/DownloadPage.tsx b/apps/web/app/(org)/onboarding/components/DownloadPage.tsx
deleted file mode 100644
index 606d1a3d4f0..00000000000
--- a/apps/web/app/(org)/onboarding/components/DownloadPage.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { Button, LogoBadge } from "@cap/ui";
-import { useDetectPlatform } from "hooks/useDetectPlatform";
-import { Clapperboard, Zap } from "lucide-react";
-import { useRouter } from "next/navigation";
-import {
-	getDownloadButtonText,
-	getDownloadUrl,
-	getPlatformIcon,
-} from "@/utils/platform";
-import { consumeOnboardingNextPath } from "../../onboarding-next";
-
-const recordingModes = [
-	{
-		name: "Instant Mode",
-		icon: <Zap fill="yellow" className="mb-4 size-8" strokeWidth={1.5} />,
-		description:
-			"Hit record, stop, share link. Your video is live in seconds with automatically generated captions, a title, summary, chapters, and more. Perfect for quick feedback, bug reports, or when you just need to show something fast.",
-	},
-	{
-		name: "Studio Mode",
-		icon: (
-			<Clapperboard
-				fill="var(--blue-9)"
-				className="mb-4 size-8"
-				strokeWidth={1.5}
-			/>
-		),
-		description:
-			"Professional recordings with local editing, custom backgrounds, and export options. When you need pixel-perfect demos, tutorials, or presentations that represent your brand.",
-	},
-];
-
-export function DownloadPage() {
-	const { platform, isIntel } = useDetectPlatform();
-	const loading = platform === null;
-	const router = useRouter();
-
-	return (
-		<div className="flex flex-col gap-12 justify-center items-center min-h-fit lg:gap-20">
-			<div className="space-y-10">
-				<div className="flex flex-col gap-6 justify-center items-center">
-					<LogoBadge className="mx-auto w-auto h-12" />
-					<div className="space-y-1 text-center">
-						<h1 className="text-3xl font-medium text-gray-12">Download Cap</h1>
-						<p className="text-lg text-center text-gray-11 text-pretty">
-							Start recording beautiful screen recordings today
-						</p>
-					</div>
-				</div>
-				<div className="flex flex-wrap gap-10 justify-center items-center w-full max-w-[1000px] mx-auto">
-					{recordingModes.map((recordingMode) => (
-						<div
-							key={recordingMode.name}
-							className="flex flex-col w-full max-w-[440px] gap-2 items-center p-6 text-center rounded-xl border bg-gray-2 border-gray-3"
-						>
-							{recordingMode.icon}
-							<h2 className="text-xl font-medium text-gray-12">
-								{recordingMode.name}
-							</h2>
-							<p className="text-base text-gray-10 text-pretty">
-								{recordingMode.description}
-							</p>
-						</div>
-					))}
-				</div>
-			</div>
-			<div className="flex flex-wrap gap-4 justify-center">
-				<Button
-					variant="blue"
-					size="lg"
-					href={getDownloadUrl(platform, isIntel)}
-					className="hidden justify-center items-center py-6 font-medium text-white lg:flex"
-				>
-					{!loading && getPlatformIcon(platform)}
-					{getDownloadButtonText(platform, loading, isIntel)}
-				</Button>
-				<Button
-					onClick={() =>
-						router.push(consumeOnboardingNextPath("/dashboard/caps"))
-					}
-					className="min-w-[120px]"
-					variant="dark"
-					size="lg"
-				>
-					Continue
-				</Button>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/web/app/(org)/onboarding/components/InviteTeamPage.tsx b/apps/web/app/(org)/onboarding/components/InviteTeamPage.tsx
deleted file mode 100644
index d1cc9d28118..00000000000
--- a/apps/web/app/(org)/onboarding/components/InviteTeamPage.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-"use client";
-
-import { Button, Switch } from "@cap/ui";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import NumberFlow from "@number-flow/react";
-import { useMutation } from "@tanstack/react-query";
-import clsx from "clsx";
-import { useCurrency } from "hooks/useCurrency";
-import { useRouter } from "next/navigation";
-import { type MouseEvent, startTransition, useId, useState } from "react";
-import { toast } from "sonner";
-import { useStripeContext } from "@/app/Layout/StripeContext";
-import { useEffectMutation, useRpcClient } from "@/lib/EffectRuntime";
-import { homepageCopy } from "../../../../data/homepage-copy";
-import { Base } from "./Base";
-
-export function InviteTeamPage() {
-	const billingCycleId = useId();
-	const stripeCtx = useStripeContext();
-	const { currency, symbol } = useCurrency();
-	const [users, setUsers] = useState(1);
-	const [isAnnually, setIsAnnually] = useState(true);
-	const router = useRouter();
-	const rpc = useRpcClient();
-
-	const CAP_PRO_ANNUAL_PRICE_PER_USER = homepageCopy.pricing.pro.pricing.annual;
-	const CAP_PRO_MONTHLY_PRICE_PER_USER =
-		homepageCopy.pricing.pro.pricing.monthly;
-
-	const currentTotalPrice =
-		users *
-		(isAnnually
-			? CAP_PRO_ANNUAL_PRICE_PER_USER
-			: CAP_PRO_MONTHLY_PRICE_PER_USER);
-	const billingCycleText = isAnnually
-		? "per user, billed annually"
-		: "per user, billed monthly";
-
-	const incrementUsers = () => setUsers((n) => n + 1);
-	const decrementUsers = () => setUsers((n) => (n > 1 ? n - 1 : 1));
-
-	const inviteTeamMutation = useEffectMutation({
-		mutationFn: (_redirect: boolean) =>
-			rpc.UserCompleteOnboardingStep({
-				step: "inviteTeam",
-				data: undefined,
-			}),
-		onSuccess: (_, redirect: boolean) => {
-			startTransition(() => {
-				if (redirect) {
-					router.push("/onboarding/download");
-					router.refresh();
-				}
-			});
-		},
-		onError: () => {
-			toast.error("An error occurred, please try again");
-		},
-	});
-
-	const handleSubmit = async (
-		e: MouseEvent<HTMLButtonElement>,
-		redirect = true,
-	) => {
-		e.preventDefault();
-		await inviteTeamMutation.mutateAsync(redirect);
-	};
-
-	const planCheckout = async (e: MouseEvent<HTMLButtonElement>) => {
-		e.preventDefault();
-		try {
-			const planId = stripeCtx.plans[isAnnually ? "yearly" : "monthly"];
-
-			const response = await fetch(`/api/settings/billing/subscribe`, {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
-					priceId: planId,
-					quantity: users,
-					isOnBoarding: true,
-				}),
-			});
-			if (!response.ok) {
-				toast.error("Unable to start checkout. Please try again.");
-				return;
-			}
-			const data = await response.json();
-			if (data.subscription === true) {
-				toast.success("You are already on the Cap Pro plan");
-				return;
-			}
-
-			await handleSubmit(e, false);
-
-			if (data.url) {
-				window.location.href = data.url;
-			}
-		} catch (error) {
-			console.error("Plan checkout error:", error);
-			toast.error("Something went wrong. Please try again.");
-		}
-	};
-
-	const planCheckoutMutation = useMutation({
-		mutationFn: (e: MouseEvent<HTMLButtonElement>) => planCheckout(e),
-		onError: (error) => {
-			console.error("Plan checkout error:", error);
-			toast.error("Something went wrong. Please try again.");
-		},
-	});
-
-	return (
-		<Base
-			title="Invite your team"
-			descriptionClassName="max-w-[360px]"
-			description="Invite members of your team to join your organization and share Caps together"
-		>
-			<div className="text-center">
-				<span className="mr-2 text-2xl tabular-nums lg:text-3xl text-gray-12">
-					{symbol}
-					<NumberFlow suffix="/mo" value={currentTotalPrice} />
-				</span>
-				<span className="text-base tabular-nums text-gray-10">
-					{" "}
-					{billingCycleText}
-				</span>
-				{isAnnually ? (
-					<p className="text-base text-gray-10">
-						or,{" "}
-						<NumberFlow
-							value={CAP_PRO_MONTHLY_PRICE_PER_USER * users}
-							className="text-sm tabular-nums lg:text-base text-gray-12"
-							format={{
-								notation: "compact",
-								style: "currency",
-								currency: currency.toUpperCase(),
-							}}
-							suffix="/mo"
-						/>{" "}
-						{users === 1 ? (
-							"per user, "
-						) : (
-							<>
-								for{" "}
-								<NumberFlow value={users} className="text-base tabular-nums" />{" "}
-								users,{" "}
-							</>
-						)}
-						billed monthly
-					</p>
-				) : (
-					<p className="text-base text-gray-10">
-						or,{" "}
-						<NumberFlow
-							value={CAP_PRO_ANNUAL_PRICE_PER_USER * users}
-							className="text-sm tabular-nums lg:text-base text-gray-12"
-							format={{
-								notation: "compact",
-								style: "currency",
-								currency: currency.toUpperCase(),
-							}}
-							suffix="/mo"
-						/>{" "}
-						{users === 1 ? (
-							"per user, "
-						) : (
-							<>
-								for{" "}
-								<NumberFlow value={users} className="text-base tabular-nums" />{" "}
-								users,{" "}
-							</>
-						)}
-						billed annually
-					</p>
-				)}
-			</div>
-
-			<div className="space-y-3">
-				<div className="flex flex-wrap gap-5 justify-center items-center p-5 w-full rounded-xl border bg-gray-3 border-gray-4 xs:gap-3 xs:p-3 xs:rounded-full xs:justify-between">
-					<div className="flex gap-2 items-center">
-						<p className="text-sm text-gray-12">Per user</p>
-						<div className="flex items-center">
-							<Button
-								onClick={decrementUsers}
-								className="p-1 bg-gray-12 hover:bg-gray-11 min-w-fit h-fit"
-								aria-label="Decrease user count"
-							>
-								<FontAwesomeIcon
-									icon={faMinus}
-									className="text-gray-1 size-2.5"
-								/>
-							</Button>
-							<span className="w-6 font-medium tabular-nums text-center text-gray-12">
-								<NumberFlow value={users} />
-							</span>
-							<Button
-								onClick={incrementUsers}
-								className="p-1 bg-gray-12 hover:bg-gray-11 min-w-fit h-fit"
-								aria-label="Increase user count"
-							>
-								<FontAwesomeIcon
-									icon={faPlus}
-									className="text-gray-1 size-2.5"
-								/>
-							</Button>
-						</div>
-					</div>
-					<div className="flex items-center">
-						<span
-							className={clsx(
-								"text-sm",
-								!isAnnually ? "text-gray-12" : "text-gray-10",
-							)}
-						>
-							{homepageCopy.pricing.pro.labels.monthly}
-						</span>
-						<Switch
-							checked={isAnnually}
-							onCheckedChange={setIsAnnually}
-							aria-label="Billing Cycle"
-							className="scale-75"
-							id={billingCycleId}
-						/>
-						<span
-							className={clsx(
-								"text-sm",
-								isAnnually ? "text-gray-12" : "text-gray-10",
-							)}
-						>
-							{homepageCopy.pricing.pro.labels.annually}
-						</span>
-					</div>
-				</div>
-				<Button
-					className="w-full"
-					variant="blue"
-					spinner={planCheckoutMutation.isPending}
-					disabled={planCheckoutMutation.isPending}
-					onClick={planCheckoutMutation.mutate}
-				>
-					Get Started
-				</Button>
-			</div>
-			<div className="w-full h-px bg-gray-4" />
-			<Button
-				variant="dark"
-				className="mx-auto w-full"
-				onClick={handleSubmit}
-				spinner={inviteTeamMutation.isPending}
-				disabled={inviteTeamMutation.isPending}
-			>
-				Skip
-			</Button>
-		</Base>
-	);
-}
diff --git a/apps/web/app/(org)/onboarding/components/LoomStep.tsx b/apps/web/app/(org)/onboarding/components/LoomStep.tsx
new file mode 100644
index 00000000000..e7cbacf6e67
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/LoomStep.tsx
@@ -0,0 +1,411 @@
+"use client";
+
+import type { Organisation } from "@cap/web-domain";
+import clsx from "clsx";
+import { ArrowRight, LoaderCircle } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+	type CSSProperties,
+	type FormEvent,
+	useEffect,
+	useId,
+	useRef,
+	useState,
+} from "react";
+import { toast } from "sonner";
+import { importFromLoom } from "@/actions/loom";
+import { trackEvent } from "@/app/utils/analytics";
+import { UpgradeModal } from "@/components/UpgradeModal";
+import { isLoomShareUrl } from "@/lib/loom-import-href";
+import { onboardingStepHref } from "../onboarding-flow";
+import { Explainer, LOOM_MARK_PATH, LoomMark } from "./paper";
+import { BackLink, ProNote, StepLede, StepPage, StepTitle } from "./StepChrome";
+import { DoneDoodle, LoomScene } from "./scenes";
+import { useGetStarted } from "./use-get-started";
+import { useUpgradeConfirmation } from "./use-upgrade-confirmation";
+
+const CsvGlyph = () => (
+	<span className="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-[var(--ob-paper-2)]">
+		<svg
+			viewBox="0 0 28 28"
+			className="ob-boil size-6 overflow-visible"
+			aria-hidden="true"
+		>
+			<rect x="3.5" y="4.5" width="21" height="19" rx="3" className="ob-ink" />
+			<path
+				d="M 3.5 10.5 L 24.5 10.5 M 3.5 16.5 L 24.5 16.5 M 11 4.5 L 11 23.5"
+				className="ob-ink"
+				style={{ strokeWidth: 1.6 }}
+			/>
+			<path
+				d={LOOM_MARK_PATH}
+				transform="translate(14.2 12) scale(0.36)"
+				fill="var(--ob-loom)"
+			/>
+		</svg>
+	</span>
+);
+
+const LoomToCapBadge = () => (
+	<div className="ob-rise mb-5 flex items-center gap-2">
+		<span className="flex size-11 items-center justify-center rounded-2xl border-[1.5px] border-[var(--ob-track)] bg-[var(--ob-surface)]">
+			<LoomMark size={22} />
+		</span>
+		<svg
+			viewBox="0 0 44 20"
+			className="ob-boil h-5 w-11 overflow-visible"
+			aria-hidden="true"
+		>
+			<path
+				pathLength={1}
+				className="ob-ink ob-draw"
+				style={{ "--d": "0.2s" } as CSSProperties}
+				d="M 3 12 C 14 4 26 4 38 10"
+			/>
+			<path
+				pathLength={1}
+				className="ob-ink ob-draw"
+				style={{ "--d": "0.7s" } as CSSProperties}
+				d="M 31 5 L 39 10.5 L 31 15"
+			/>
+		</svg>
+		<span className="flex size-11 items-center justify-center rounded-2xl border-[1.5px] border-[var(--ob-track)] bg-[var(--ob-surface)]">
+			<svg viewBox="0 0 40 40" className="size-6" aria-hidden="true">
+				<circle cx="20" cy="20" r="16" fill="#4785FF" />
+				<circle cx="20" cy="20" r="13" fill="#ADC9FF" />
+				<circle cx="20" cy="20" r="10" fill="#fff" />
+			</svg>
+		</span>
+	</div>
+);
+
+export const LoomStep = ({
+	organizationId,
+	initialUrl,
+	bulk,
+	canBulkImport,
+	isPro,
+	justUpgraded,
+	completed,
+}: {
+	organizationId: Organisation.OrganisationId | null;
+	initialUrl: string;
+	bulk: boolean;
+	canBulkImport: boolean;
+	isPro: boolean;
+	justUpgraded: boolean;
+	completed: boolean;
+}) => {
+	const router = useRouter();
+	const inputId = useId();
+	const messageId = useId();
+	const inputRef = useRef<HTMLInputElement>(null);
+	const { complete } = useGetStarted(completed, "loom");
+	const [url, setUrl] = useState(initialUrl);
+	const [touched, setTouched] = useState(Boolean(initialUrl));
+	const [status, setStatus] = useState<"idle" | "importing" | "done">("idle");
+	const [upgradeOpen, setUpgradeOpen] = useState(false);
+	const [leaving, setLeaving] = useState(false);
+	const upgrade = useUpgradeConfirmation({ justUpgraded, isPro });
+
+	const trimmed = url.trim();
+	const valid = isLoomShareUrl(trimmed);
+	const showError = touched && trimmed.length > 0 && !valid;
+
+	useEffect(() => {
+		if (organizationId) return;
+		complete("loom")
+			.then(() => router.refresh())
+			.catch(() => undefined);
+	}, [organizationId, complete, router]);
+
+	useEffect(() => {
+		if (!initialUrl) inputRef.current?.focus();
+	}, [initialUrl]);
+
+	const leaveTo = async (href: string) => {
+		setLeaving(true);
+		try {
+			await complete("loom");
+			router.push(href);
+		} catch {
+			setLeaving(false);
+			toast.error("Something went wrong. Please try again.");
+		}
+	};
+
+	const submit = async (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		setTouched(true);
+		if (!valid) {
+			inputRef.current?.focus();
+			return;
+		}
+		if (!isPro) {
+			trackEvent("onboarding_loom_upgrade_prompted");
+			setUpgradeOpen(true);
+			return;
+		}
+		if (!organizationId) {
+			toast.info("Your library is still being set up. Try again in a second.");
+			router.refresh();
+			return;
+		}
+
+		setStatus("importing");
+		try {
+			await complete("loom").catch(() => undefined);
+			const result = await importFromLoom({
+				loomUrl: trimmed,
+				orgId: organizationId,
+			});
+			if (!result?.success) {
+				toast.error(result?.error || "We couldn't import that video.");
+				setStatus("idle");
+				return;
+			}
+			trackEvent("onboarding_loom_imported");
+			setStatus("done");
+		} catch {
+			toast.error("Something went wrong. Please try again.");
+			setStatus("idle");
+		}
+	};
+
+	const importing = status === "importing";
+
+	return (
+		<StepPage>
+			<BackLink />
+			<div className="grid items-start gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.05fr)] lg:gap-14">
+				<div className="flex min-w-0 flex-col">
+					<LoomToCapBadge />
+					<StepTitle>Bring your Looms to Cap</StepTitle>
+					<StepLede>
+						Paste a Loom share link and we'll copy the video into your Cap
+						library, or bring your whole library over with a CSV. Your Looms
+						stay exactly where they are.
+					</StepLede>
+
+					{status === "done" ? (
+						<div className="ob-card ob-rise mt-8 flex flex-col items-start p-6 sm:p-7">
+							<DoneDoodle />
+							<h2 className="mt-3 text-[22px] font-medium tracking-[-0.01em]">
+								Your Loom is on its way
+							</h2>
+							<p className="mt-1.5 text-[15px] leading-relaxed text-[var(--ob-ink-soft)]">
+								We're copying it into My Caps now. It usually takes a minute or
+								two, and it keeps going if you leave this page.
+							</p>
+							<div className="mt-6 flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
+								<button
+									type="button"
+									className="ob-cta"
+									disabled={leaving}
+									onClick={() => leaveTo("/dashboard/caps")}
+								>
+									Go to my Caps
+									<ArrowRight className="ob-cta-arrow size-4" aria-hidden />
+								</button>
+								<button
+									type="button"
+									className="ob-cta is-quiet"
+									onClick={() => {
+										setUrl("");
+										setTouched(false);
+										setStatus("idle");
+										requestAnimationFrame(() => inputRef.current?.focus());
+									}}
+								>
+									Import another
+								</button>
+							</div>
+						</div>
+					) : (
+						<form
+							noValidate
+							onSubmit={submit}
+							className="ob-rise mt-8 flex flex-col gap-3"
+							style={{ "--d": "0.12s" } as CSSProperties}
+						>
+							<label
+								htmlFor={inputId}
+								className="text-[14px] font-medium text-[var(--ob-ink-2)]"
+							>
+								Loom share link
+							</label>
+							<div className="relative">
+								<LoomMark
+									size={20}
+									className="pointer-events-none absolute left-[18px] top-1/2 -translate-y-1/2"
+								/>
+								<input
+									ref={inputRef}
+									id={inputId}
+									type="url"
+									inputMode="url"
+									autoComplete="off"
+									spellCheck={false}
+									enterKeyHint="go"
+									className="ob-input !pl-12 !pr-12"
+									placeholder="https://www.loom.com/share/…"
+									value={url}
+									disabled={importing}
+									onChange={(event) => setUrl(event.target.value)}
+									onBlur={() => setTouched(true)}
+									onPaste={() => setTouched(true)}
+									aria-invalid={showError}
+									aria-describedby={messageId}
+								/>
+								{valid && (
+									<svg
+										viewBox="0 0 24 24"
+										className="pointer-events-none absolute right-4 top-1/2 size-6 -translate-y-1/2 overflow-visible"
+										aria-hidden="true"
+									>
+										<path
+											pathLength={1}
+											className="ob-ink is-green is-bold ob-draw"
+											style={{ "--d": "0s" } as CSSProperties}
+											d="M 5 12.5 L 10 17 L 19 7"
+										/>
+									</svg>
+								)}
+							</div>
+							<p
+								id={messageId}
+								role={showError ? "alert" : undefined}
+								className={
+									showError
+										? "text-[13.5px] leading-relaxed text-[var(--ob-red)]"
+										: "text-[13.5px] leading-relaxed text-[var(--ob-ink-soft)]"
+								}
+							>
+								{showError
+									? "That doesn't look like a Loom share link. It should start with loom.com/share/."
+									: valid
+										? "Looks good. Press import and we'll take it from here."
+										: "On any Loom video, press Share, then Copy link."}
+							</p>
+							<div className="mt-2 flex flex-col gap-3 sm:flex-row sm:items-center">
+								<button
+									type="submit"
+									className="ob-cta"
+									disabled={importing || upgrade.waiting}
+								>
+									{importing ? (
+										<>
+											<LoaderCircle
+												className="size-4 animate-spin"
+												aria-hidden
+											/>
+											Starting your import…
+										</>
+									) : (
+										<>
+											{isPro ? "Import video" : "Import with Cap Pro"}
+											<ArrowRight className="ob-cta-arrow size-4" aria-hidden />
+										</>
+									)}
+								</button>
+							</div>
+							{upgrade.waiting ? (
+								<ProNote className="mt-3">
+									<span className="inline-flex items-center gap-2">
+										<LoaderCircle
+											className="size-3.5 animate-spin"
+											aria-hidden
+										/>
+										Finishing your upgrade. This only takes a moment.
+									</span>
+								</ProNote>
+							) : upgrade.timedOut ? (
+								<ProNote className="mt-3">
+									Your upgrade is taking a little longer than usual. Refresh
+									this page in a moment and your import will be ready to go.
+								</ProNote>
+							) : (
+								!isPro && (
+									<ProNote className="mt-3">
+										Moving from Loom is part of Cap Pro, so you can bring over
+										as many videos as you like.{" "}
+										<Link
+											href={onboardingStepHref("record")}
+											className="ob-link !inline !text-[14px]"
+										>
+											Or record something new for free
+										</Link>
+									</ProNote>
+								)
+							)}
+						</form>
+					)}
+
+					{status !== "done" && (
+						<div
+							className={clsx(
+								"ob-card ob-rise mt-6 flex items-start gap-4 p-5 sm:p-6",
+								bulk && "!border-[var(--ob-ink)]",
+							)}
+							style={{ "--d": "0.2s" } as CSSProperties}
+						>
+							<CsvGlyph />
+							<div className="flex min-w-0 flex-col">
+								<h2 className="text-[16px] font-medium tracking-[-0.01em]">
+									Moving lots of videos?
+								</h2>
+								<p className="mt-1 text-[14px] leading-relaxed text-[var(--ob-ink-soft)]">
+									Add your Loom links to a spreadsheet and import up to 500 at a
+									time. We'll give you a template, and each video can go to the
+									right person and space.
+								</p>
+								{canBulkImport ? (
+									<button
+										type="button"
+										className="ob-cta is-quiet is-small mt-4 w-full sm:w-fit"
+										disabled={leaving}
+										onClick={() => leaveTo("/dashboard/import/loom?mode=csv")}
+									>
+										Bulk import from a CSV
+										<ArrowRight className="ob-cta-arrow size-4" aria-hidden />
+									</button>
+								) : (
+									<p className="mt-2 text-[13.5px] text-[var(--ob-ink-2)]">
+										Ask an admin on your team to run a bulk import.
+									</p>
+								)}
+							</div>
+						</div>
+					)}
+				</div>
+
+				<Explainer
+					className="ob-rise lg:sticky lg:top-8"
+					label="How moving from Loom works"
+					loopSeconds={9}
+					scene={<LoomScene />}
+					steps={[
+						{
+							title: "Copy the link from Loom",
+							body: "Open any Loom video, press Share, then Copy link.",
+						},
+						{
+							title: "Paste it here and press Import",
+							body: "We check the link as soon as you paste it.",
+						},
+						{
+							title: "Find it in your Cap library",
+							body: "Same video with a Cap link you can share. Nothing changes on Loom.",
+						},
+					]}
+				/>
+			</div>
+			<UpgradeModal
+				open={upgradeOpen}
+				onOpenChange={setUpgradeOpen}
+				returnPath={onboardingStepHref("loom", { url: trimmed || undefined })}
+			/>
+		</StepPage>
+	);
+};
diff --git a/apps/web/app/(org)/onboarding/components/OnboardingHeader.tsx b/apps/web/app/(org)/onboarding/components/OnboardingHeader.tsx
new file mode 100644
index 00000000000..258335b72be
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/OnboardingHeader.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { signOut } from "next-auth/react";
+import { useState } from "react";
+import { resetUser } from "@/app/utils/analytics";
+import { clearOnboardingNextPath } from "../../onboarding-next";
+import { isOnboardingStep, onboardingProgressIndex } from "../onboarding-flow";
+import { ThemeToggle } from "./PaperRoot";
+import { CapWordmark, ProgressMarks } from "./paper";
+
+export const OnboardingHeader = ({ email }: { email: string }) => {
+	const pathname = usePathname();
+	const [signingOut, setSigningOut] = useState(false);
+	const segment = pathname?.split("/")[2] ?? "";
+	const step = isOnboardingStep(segment) ? segment : null;
+
+	return (
+		<header className="relative z-10 mx-auto grid w-full max-w-[1180px] grid-cols-[1fr_auto_1fr] items-center gap-3 px-5 pt-5 sm:px-8 sm:pt-7">
+			<CapWordmark className="h-[26px] w-auto text-[var(--ob-ink)] sm:h-7" />
+			<div className="justify-self-center">
+				{step && <ProgressMarks index={onboardingProgressIndex(step)} />}
+			</div>
+			<div className="flex min-w-0 items-center justify-end gap-2.5 sm:gap-3">
+				<span className="hidden max-w-[220px] truncate text-[13px] text-[var(--ob-ink-soft)] lg:inline">
+					{email}
+				</span>
+				<ThemeToggle />
+				<button
+					type="button"
+					className="ob-link shrink-0 !text-[13px]"
+					disabled={signingOut}
+					onClick={() => {
+						setSigningOut(true);
+						clearOnboardingNextPath();
+						resetUser();
+						signOut({ callbackUrl: "/login" });
+					}}
+				>
+					{signingOut ? "Signing out…" : "Sign out"}
+				</button>
+			</div>
+		</header>
+	);
+};
diff --git a/apps/web/app/(org)/onboarding/components/OrganizationSetupPage.tsx b/apps/web/app/(org)/onboarding/components/OrganizationSetupPage.tsx
deleted file mode 100644
index 6b314f06333..00000000000
--- a/apps/web/app/(org)/onboarding/components/OrganizationSetupPage.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-"use client";
-
-import { Button, Input } from "@cap/ui";
-import { faImage } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Effect } from "effect";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import { startTransition, useRef, useState } from "react";
-import { toast } from "sonner";
-import { useEffectMutation, useRpcClient } from "@/lib/EffectRuntime";
-import { Base } from "./Base";
-
-export function OrganizationSetupPage({
-	firstName,
-}: {
-	firstName: string | null | undefined;
-}) {
-	const [organizationName, setOrganizationName] = useState(
-		firstName ? `${firstName}'s organization` : "",
-	);
-	const [selectedFile, setSelectedFile] = useState<File | null>(null);
-	const fileInputRef = useRef<HTMLInputElement>(null);
-	const router = useRouter();
-	const rpc = useRpcClient();
-
-	const handleFileChange = () => {
-		const file = fileInputRef.current?.files?.[0];
-		if (file) {
-			setSelectedFile(file);
-		}
-	};
-
-	const orgSetupMutation = useEffectMutation({
-		mutationFn: (data: { organizationName: string; icon?: File }) =>
-			Effect.gen(function* () {
-				let organizationIcon:
-					| {
-							data: Uint8Array;
-							contentType: string;
-							fileName: string;
-					  }
-					| undefined;
-
-				if (data.icon) {
-					const icon = data.icon;
-					const arrayBuffer = yield* Effect.promise(() => icon.arrayBuffer());
-					organizationIcon = {
-						data: new Uint8Array(arrayBuffer),
-						contentType: icon.type,
-						fileName: icon.name,
-					};
-				}
-
-				yield* rpc.UserCompleteOnboardingStep({
-					step: "organizationSetup",
-					data: {
-						organizationName: data.organizationName,
-						organizationIcon,
-					},
-				});
-			}),
-		onSuccess: () => {
-			startTransition(() => {
-				router.push("/onboarding/custom-domain");
-				router.refresh();
-			});
-		},
-		onError: (error) => {
-			console.error(error);
-			toast.error("An error occurred, please try again");
-		},
-	});
-
-	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		orgSetupMutation.mutate({
-			organizationName,
-			icon: selectedFile || undefined,
-		});
-	};
-
-	return (
-		<Base
-			title="Organization Setup"
-			description="Let's get your dashboard setup with your organization"
-		>
-			<form onSubmit={handleSubmit} className="space-y-7">
-				<div className="space-y-3">
-					<Input
-						type="text"
-						disabled={orgSetupMutation.isPending}
-						value={organizationName}
-						onChange={(e) => setOrganizationName(e.target.value)}
-						placeholder="Organization Name"
-						name="organizationName"
-						required
-					/>
-					<div className="rounded-xl border bg-gray-1 h-fit border-gray-4">
-						<h3 className="px-3 py-3 text-sm font-medium border-b border-gray-4 text-gray-12">
-							Organization Logo
-						</h3>
-						<div className="flex gap-5 p-5">
-							<div className="flex justify-center items-center rounded-full border border-dashed size-14 bg-gray-3 border-gray-6">
-								{selectedFile ? (
-									<Image
-										src={URL.createObjectURL(selectedFile)}
-										alt="Selected File"
-										width={56}
-										className="object-cover rounded-full size-14"
-										height={56}
-									/>
-								) : (
-									<FontAwesomeIcon
-										icon={faImage}
-										className="size-4 text-gray-9"
-									/>
-								)}
-							</div>
-							<input
-								type="file"
-								className="hidden h-0"
-								accept="image/jpeg, image/jpg, image/png, image/svg+xml"
-								ref={fileInputRef}
-								onChange={handleFileChange}
-							/>
-							<div className="space-y-3">
-								<Button
-									type="button"
-									variant="gray"
-									disabled={orgSetupMutation.isPending}
-									size="xs"
-									onClick={() => fileInputRef.current?.click()}
-								>
-									Upload Image
-								</Button>
-								<p className="text-xs text-gray-10">
-									Recommended size: 120x120
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div className="w-full h-px bg-gray-4" />
-				<Button
-					type="submit"
-					variant="dark"
-					className="mx-auto w-full"
-					spinner={orgSetupMutation.isPending}
-					disabled={orgSetupMutation.isPending}
-				>
-					Create Organization
-				</Button>
-			</form>
-		</Base>
-	);
-}
diff --git a/apps/web/app/(org)/onboarding/components/PaperRoot.tsx b/apps/web/app/(org)/onboarding/components/PaperRoot.tsx
new file mode 100644
index 00000000000..e8217d66458
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/PaperRoot.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import clsx from "clsx";
+import Cookies from "js-cookie";
+import {
+	type CSSProperties,
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useId,
+	useState,
+} from "react";
+import { trackEvent } from "@/app/utils/analytics";
+import {
+	type OnboardingThemePreference,
+	resolveOnboardingTheme,
+	THEME_COOKIE,
+} from "../onboarding-flow";
+import { BoilFilter } from "./paper";
+
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+
+const ThemeToggleContext = createContext<(() => void) | null>(null);
+
+export const useToggleOnboardingTheme = () => {
+	const toggle = useContext(ThemeToggleContext);
+	if (!toggle) throw new Error("useToggleOnboardingTheme needs a PaperRoot");
+	return toggle;
+};
+
+export const PaperRoot = ({
+	children,
+	className,
+	initialTheme,
+}: {
+	children: ReactNode;
+	className?: string;
+	initialTheme: OnboardingThemePreference;
+}) => {
+	const filterId = `ob-boil-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const [preference, setPreference] = useState(initialTheme);
+
+	useEffect(() => {
+		const media = window.matchMedia(DARK_QUERY);
+		const previous = document.body.className;
+		const apply = () => {
+			document.body.className = resolveOnboardingTheme(
+				preference,
+				media.matches,
+			);
+		};
+		apply();
+		media.addEventListener("change", apply);
+		return () => {
+			media.removeEventListener("change", apply);
+			document.body.className = previous;
+		};
+	}, [preference]);
+
+	const toggle = useCallback(() => {
+		const current = resolveOnboardingTheme(
+			preference,
+			window.matchMedia(DARK_QUERY).matches,
+		);
+		const next = current === "dark" ? "light" : "dark";
+		setPreference(next);
+		Cookies.set(THEME_COOKIE, next, { expires: 365 });
+		trackEvent("onboarding_theme_toggled", { theme: next });
+	}, [preference]);
+
+	return (
+		<ThemeToggleContext.Provider value={toggle}>
+			<div
+				className={clsx("cap-ob flex flex-col", className)}
+				data-theme={preference}
+				style={{ "--ob-boil-filter": `url(#${filterId})` } as CSSProperties}
+			>
+				<BoilFilter id={filterId} />
+				{children}
+			</div>
+		</ThemeToggleContext.Provider>
+	);
+};
+
+export const ThemeToggle = () => {
+	const toggle = useToggleOnboardingTheme();
+
+	return (
+		<button
+			type="button"
+			onClick={toggle}
+			className="ob-theme-toggle ob-focus"
+			title="Switch between light and dark"
+		>
+			<span className="ob-when-light">
+				<span className="sr-only">Switch to dark mode</span>
+				<svg
+					viewBox="0 0 24 24"
+					className="ob-boil ob-theme-icon size-[18px] overflow-visible"
+					aria-hidden="true"
+				>
+					<path
+						className="ob-ink"
+						style={{ strokeWidth: 1.9 }}
+						d="M 19.5 14.6 C 18.4 15.1 17.1 15.4 15.8 15.4 C 11 15.4 7.2 11.6 7.2 6.8 C 7.2 5.5 7.5 4.2 8 3.1 C 4.9 4.4 2.8 7.5 2.8 11 C 2.8 15.9 6.8 19.9 11.7 19.9 C 15.2 19.9 18.2 17.7 19.5 14.6 Z"
+					/>
+					<path
+						className="ob-ink is-accent"
+						style={{ strokeWidth: 1.7 }}
+						d="M 17 3.5 L 17 7.5 M 15 5.5 L 19 5.5"
+					/>
+				</svg>
+			</span>
+			<span className="ob-when-dark">
+				<span className="sr-only">Switch to light mode</span>
+				<svg
+					viewBox="0 0 24 24"
+					className="ob-boil ob-theme-icon size-[18px] overflow-visible"
+					aria-hidden="true"
+				>
+					<circle
+						className="ob-ink"
+						style={{ strokeWidth: 1.9 }}
+						cx="12"
+						cy="12"
+						r="4.2"
+					/>
+					<path
+						className="ob-ink"
+						style={{ strokeWidth: 1.9 }}
+						d="M 12 2.6 L 12 4.6 M 12 19.4 L 12 21.4 M 2.6 12 L 4.6 12 M 19.4 12 L 21.4 12 M 5.4 5.4 L 6.8 6.8 M 17.2 17.2 L 18.6 18.6 M 5.4 18.6 L 6.8 17.2 M 17.2 6.8 L 18.6 5.4"
+					/>
+				</svg>
+			</span>
+		</button>
+	);
+};
diff --git a/apps/web/app/(org)/onboarding/components/RecordStep.tsx b/apps/web/app/(org)/onboarding/components/RecordStep.tsx
new file mode 100644
index 00000000000..af1d8beff91
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/RecordStep.tsx
@@ -0,0 +1,328 @@
+"use client";
+
+import clsx from "clsx";
+import { useCapChromeExtension } from "hooks/useCapChromeExtension";
+import { useDetectPlatform } from "hooks/useDetectPlatform";
+import { ArrowRight, Check, Copy, Download, Puzzle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { type CSSProperties, type ReactNode, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { trackEvent } from "@/app/utils/analytics";
+import { CAP_CHROME_EXTENSION_URL } from "@/lib/chrome-extension";
+import { getDownloadUrl } from "@/utils/platform";
+import { Explainer } from "./paper";
+import { BackLink, StepLede, StepPage, StepTitle } from "./StepChrome";
+import { RecordScene } from "./scenes";
+import { useGetStarted } from "./use-get-started";
+
+const isMobileDevice = () => {
+	if (typeof navigator === "undefined") return false;
+	const ua = navigator.userAgent;
+	return (
+		/iPhone|iPad|iPod|Android/i.test(ua) ||
+		(/Macintosh/.test(ua) && navigator.maxTouchPoints > 1)
+	);
+};
+
+const platformName = (platform: string | null) =>
+	platform === "windows" ? "Windows" : platform === "linux" ? "Linux" : "Mac";
+
+const OptionCard = ({
+	icon,
+	title,
+	tag,
+	children,
+	action,
+	featured = false,
+	delay,
+}: {
+	icon: ReactNode;
+	title: string;
+	tag?: string;
+	children: ReactNode;
+	action: ReactNode;
+	featured?: boolean;
+	delay: number;
+}) => (
+	<li
+		className={clsx(
+			"ob-card ob-rise grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-4 gap-y-3 p-5 sm:gap-x-5 sm:p-6",
+			featured && "!border-[var(--ob-ink)] !bg-[var(--ob-surface)]",
+		)}
+		style={{ "--d": `${delay}s` } as CSSProperties}
+	>
+		<span className="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--ob-paper-2)] sm:row-span-3 sm:self-start">
+			{icon}
+		</span>
+		<div className="flex flex-wrap items-center gap-2">
+			<h2 className="text-[18px] font-medium tracking-[-0.01em]">{title}</h2>
+			{tag && (
+				<span className="rounded-full bg-[var(--ob-accent-soft)] px-2.5 py-0.5 text-[12.5px] font-medium text-[var(--ob-accent)]">
+					{tag}
+				</span>
+			)}
+		</div>
+		<div className="col-span-2 text-[14.5px] leading-relaxed text-[var(--ob-ink-soft)] sm:col-span-1 sm:col-start-2 sm:-mt-2">
+			{children}
+		</div>
+		<div className="col-span-2 mt-1 sm:col-span-1 sm:col-start-2">{action}</div>
+	</li>
+);
+
+const BrowserGlyph = () => (
+	<svg
+		viewBox="0 0 32 32"
+		className="ob-boil size-7 overflow-visible"
+		aria-hidden="true"
+	>
+		<rect x="3" y="6" width="26" height="20" rx="4" className="ob-ink" />
+		<path d="M 3 11.5 L 29 11.5" className="ob-ink" />
+		<circle cx="16" cy="19" r="3.4" fill="var(--ob-red)" className="ob-pulse" />
+	</svg>
+);
+
+const AppGlyph = () => (
+	<svg
+		viewBox="0 0 32 32"
+		className="ob-boil size-7 overflow-visible"
+		aria-hidden="true"
+	>
+		<rect x="4" y="5" width="24" height="17" rx="3" className="ob-ink" />
+		<path
+			d="M 13 22 L 12 27 M 19 22 L 20 27 M 10 27.5 L 22 27.5"
+			className="ob-ink"
+		/>
+		<circle cx="16" cy="13.5" r="4" fill="var(--ob-accent)" />
+		<circle cx="16" cy="13.5" r="1.9" fill="#fff" />
+	</svg>
+);
+
+export const RecordStep = ({
+	isPro,
+	email,
+	completed,
+}: {
+	isPro: boolean;
+	email: string;
+	completed: boolean;
+}) => {
+	const router = useRouter();
+	const { complete } = useGetStarted(completed, "record");
+	const { platform, isIntel } = useDetectPlatform();
+	const { isChromeBrowser, isInstalled, openRecorder } =
+		useCapChromeExtension();
+	const [mobile, setMobile] = useState(false);
+	const [downloaded, setDownloaded] = useState(false);
+	const [copied, setCopied] = useState(false);
+	const [leaving, setLeaving] = useState(false);
+
+	useEffect(() => {
+		setMobile(isMobileDevice());
+		router.prefetch("/dashboard/caps/record");
+	}, [router]);
+
+	const leaveTo = async (href: string) => {
+		setLeaving(true);
+		try {
+			await complete("record");
+			router.push(href);
+		} catch {
+			setLeaving(false);
+			toast.error("Something went wrong. Please try again.");
+		}
+	};
+
+	const copyDownloadLink = async () => {
+		try {
+			await navigator.clipboard.writeText(`${window.location.origin}/download`);
+			setCopied(true);
+			trackEvent("onboarding_download_link_copied");
+		} catch {
+			toast.error(
+				"Couldn't copy the link. Visit cap.so/download on your computer.",
+			);
+		}
+	};
+
+	const showExtension = !mobile && (isChromeBrowser || isInstalled);
+	const os = platformName(platform);
+
+	return (
+		<StepPage>
+			<BackLink />
+			<div className="grid items-start gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.05fr)] lg:gap-14">
+				<div className="flex min-w-0 flex-col">
+					<StepTitle>Record your first Cap</StepTitle>
+					<StepLede>
+						Show it instead of typing it out. Pick how you'd like to record and
+						you'll have a link to share as soon as you stop.
+					</StepLede>
+
+					<ul className="mt-8 flex flex-col gap-3.5">
+						<OptionCard
+							featured
+							delay={0.1}
+							icon={<BrowserGlyph />}
+							title="Record in your browser"
+							tag="Fastest"
+							action={
+								<button
+									type="button"
+									className="ob-cta w-full sm:w-fit"
+									disabled={leaving}
+									onClick={() => {
+										trackEvent("onboarding_record_selected", {
+											via: "browser",
+										});
+										leaveTo("/dashboard/caps/record?recorder=browser");
+									}}
+								>
+									Open the recorder
+									<ArrowRight className="ob-cta-arrow size-4" aria-hidden />
+								</button>
+							}
+						>
+							{mobile
+								? "Nothing to install. Record yourself with your camera, right here."
+								: "Nothing to install. Share your screen, turn on your camera and talk it through."}
+							{!isPro && " Free recordings can be up to 5 minutes."}
+						</OptionCard>
+
+						<OptionCard
+							delay={0.16}
+							icon={<AppGlyph />}
+							title="Get the Cap app"
+							action={
+								mobile ? (
+									<button
+										type="button"
+										className="ob-cta is-quiet w-full sm:w-fit"
+										onClick={copyDownloadLink}
+									>
+										{copied ? (
+											<Check className="size-4" aria-hidden />
+										) : (
+											<Copy className="size-4" aria-hidden />
+										)}
+										{copied ? "Link copied" : "Copy the download link"}
+									</button>
+								) : downloaded ? (
+									<div className="flex flex-col gap-4">
+										<ol className="flex flex-col gap-2 text-[14px] text-[var(--ob-ink-2)]">
+											{[
+												"Open the file you just downloaded and install Cap",
+												`Sign in with ${email}`,
+												"Press record, and your link is ready when you stop",
+											].map((line, index) => (
+												<li key={line} className="flex items-start gap-2.5">
+													<span className="mt-px flex size-5 shrink-0 items-center justify-center rounded-full border-[1.5px] border-[var(--ob-track-strong)] text-[11.5px] font-medium tabular-nums">
+														{index + 1}
+													</span>
+													<span className="min-w-0 break-words">{line}</span>
+												</li>
+											))}
+										</ol>
+										<button
+											type="button"
+											className="ob-cta is-quiet w-full sm:w-fit"
+											disabled={leaving}
+											onClick={() => leaveTo("/dashboard/caps")}
+										>
+											Continue to my Caps
+										</button>
+									</div>
+								) : (
+									<a
+										href={getDownloadUrl(platform, isIntel)}
+										className="ob-cta is-outline w-full sm:w-fit"
+										onClick={() => {
+											setDownloaded(true);
+											trackEvent("onboarding_record_selected", {
+												via: "desktop",
+												platform,
+											});
+											complete("record").catch(() => undefined);
+										}}
+									>
+										<Download className="size-4" aria-hidden />
+										Download for {os}
+									</a>
+								)
+							}
+						>
+							{mobile
+								? "Studio-quality recordings and editing for Mac and Windows. Grab it on your computer."
+								: `Studio-quality recordings, local editing and 4K exports for ${os}.`}
+						</OptionCard>
+
+						{showExtension && (
+							<OptionCard
+								delay={0.22}
+								icon={
+									<Puzzle className="size-6 text-[var(--ob-ink)]" aria-hidden />
+								}
+								title="Use the Chrome extension"
+								action={
+									isInstalled ? (
+										<button
+											type="button"
+											className="ob-cta is-quiet w-full sm:w-fit"
+											onClick={() => {
+												trackEvent("onboarding_record_selected", {
+													via: "extension",
+												});
+												complete("record").catch(() => undefined);
+												openRecorder();
+											}}
+										>
+											Record with Chrome
+										</button>
+									) : (
+										<a
+											href={CAP_CHROME_EXTENSION_URL}
+											target="_blank"
+											rel="noreferrer"
+											className="ob-cta is-quiet w-full sm:w-fit"
+											onClick={() => {
+												trackEvent("onboarding_record_selected", {
+													via: "extension_install",
+												});
+												complete("record").catch(() => undefined);
+											}}
+										>
+											Add to Chrome
+										</a>
+									)
+								}
+							>
+								Record any tab from your toolbar without leaving what you're
+								doing.
+							</OptionCard>
+						)}
+					</ul>
+				</div>
+
+				<Explainer
+					className="ob-rise lg:sticky lg:top-8"
+					label="How recording works"
+					loopSeconds={9}
+					scene={<RecordScene />}
+					steps={[
+						{
+							title: "Choose what to record",
+							body: "Your whole screen, a window or a tab, plus your camera and mic.",
+						},
+						{
+							title: "Hit record and talk it through",
+							body: "Pause or start over whenever you like.",
+						},
+						{
+							title: "Stop, and your link is ready",
+							body: "It uploads while you record, so there's nothing to wait for.",
+						},
+					]}
+				/>
+			</div>
+		</StepPage>
+	);
+};
diff --git a/apps/web/app/(org)/onboarding/components/SharePreview.tsx b/apps/web/app/(org)/onboarding/components/SharePreview.tsx
new file mode 100644
index 00000000000..6e600cc4787
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/SharePreview.tsx
@@ -0,0 +1,202 @@
+import clsx from "clsx";
+import { Lock } from "lucide-react";
+
+const COLUMNS = [
+	{
+		title: "Now",
+		x: 16,
+		cards: [
+			{ y: 50, tag: "var(--ob-green)", line: 52 },
+			{ y: 84, tag: "var(--ob-green)", line: 38 },
+		],
+	},
+	{
+		title: "Next",
+		x: 117,
+		cards: [
+			{ y: 50, tag: "var(--ob-accent)", line: 46 },
+			{ y: 84, tag: "var(--ob-accent)", line: 56 },
+			{ y: 118, tag: "var(--ob-accent)", line: 30 },
+		],
+	},
+	{
+		title: "Later",
+		x: 218,
+		cards: [{ y: 50, tag: "var(--ob-camera)", line: 42 }],
+	},
+] as const;
+
+const CARD_WIDTH = 86;
+const CARD_HEIGHT = 26;
+
+const Recording = () => (
+	<svg
+		viewBox="0 0 320 180"
+		className="absolute inset-0 size-full"
+		aria-hidden="true"
+	>
+		<rect width="320" height="180" fill="var(--ob-surface)" />
+		<text x="16" y="25" fontSize="10.5" fontWeight="500" className="ob-label">
+			Roadmap
+		</text>
+		<circle cx="288" cy="21" r="5.5" fill="var(--ob-team-2)" />
+		<circle cx="300" cy="21" r="5.5" fill="var(--ob-team-1)" />
+		{COLUMNS.map((column) => (
+			<text
+				key={column.title}
+				x={column.x + 2}
+				y="42"
+				fontSize="8"
+				fontWeight="500"
+				className="ob-label is-soft"
+			>
+				{column.title}
+				<tspan className="ob-label is-faint"> {column.cards.length}</tspan>
+			</text>
+		))}
+		<g className="ob-boil">
+			{COLUMNS.flatMap((column) =>
+				column.cards.map((card) => (
+					<g key={`${column.title}-${card.y}`}>
+						<rect
+							x={column.x}
+							y={card.y}
+							width={CARD_WIDTH}
+							height={CARD_HEIGHT}
+							rx="6"
+							fill="var(--ob-surface)"
+							stroke="var(--ob-track-strong)"
+							strokeWidth="1.5"
+						/>
+						<path
+							d={`M ${column.x + 8} ${card.y + 9} L ${column.x + 20} ${card.y + 9}`}
+							stroke={card.tag}
+							strokeWidth="3"
+							strokeLinecap="round"
+						/>
+						<path
+							d={`M ${column.x + 8} ${card.y + 18} L ${column.x + 8 + card.line} ${card.y + 18}`}
+							stroke="var(--ob-ink-faint)"
+							strokeWidth="2.2"
+							strokeLinecap="round"
+						/>
+					</g>
+				)),
+			)}
+			<path
+				pathLength={1}
+				className="ob-ink is-accent ob-pv-circle"
+				style={{ strokeWidth: 2.2 }}
+				d="M 110 90 C 116 75 196 72 208 89 C 218 104 192 117 158 117 C 124 117 104 108 108 95"
+			/>
+		</g>
+		<g className="ob-pv-cursor">
+			<path
+				d="M 0 0 L 0 13 L 3.4 9.8 L 5.8 15 L 7.9 14.1 L 5.6 9 L 9.9 8.7 Z"
+				fill="var(--ob-ink)"
+				stroke="var(--ob-surface)"
+				strokeWidth="1.1"
+				strokeLinejoin="round"
+			/>
+		</g>
+	</svg>
+);
+
+const Webcam = () => (
+	<span className="ob-pv-cam absolute bottom-[40px] right-3 flex aspect-square w-[19%] items-end justify-center overflow-hidden rounded-full border-2 border-[var(--ob-surface)] bg-[color-mix(in_srgb,var(--ob-camera)_22%,var(--ob-paper-2))] shadow-[0_6px_16px_-8px_var(--ob-shadow)]">
+		<svg viewBox="0 0 40 40" className="h-[86%] w-[86%]" aria-hidden="true">
+			<circle
+				cx="20"
+				cy="16"
+				r="7.5"
+				fill="color-mix(in srgb, var(--ob-camera) 55%, var(--ob-surface))"
+			/>
+			<path
+				d="M 5 40 C 5 30 11 25.5 20 25.5 C 29 25.5 35 30 35 40 Z"
+				fill="color-mix(in srgb, var(--ob-camera) 55%, var(--ob-surface))"
+			/>
+		</svg>
+	</span>
+);
+
+export const SharePreview = ({ name }: { name: string }) => {
+	const trimmed = name.trim();
+	const initial = trimmed.charAt(0).toUpperCase();
+
+	return (
+		<figure className="ob-rise mx-auto w-full max-w-[460px]">
+			<div className="overflow-hidden rounded-[18px] border-[1.5px] border-[var(--ob-track)] bg-[var(--ob-surface)] shadow-[0_40px_80px_-52px_var(--ob-shadow)]">
+				<div className="flex items-center gap-3 border-b-[1.5px] border-[var(--ob-track)] px-3.5 py-2.5">
+					<span className="flex shrink-0 gap-1.5" aria-hidden="true">
+						<span className="size-2 rounded-full bg-[var(--ob-track-strong)]" />
+						<span className="size-2 rounded-full bg-[var(--ob-track-strong)]" />
+						<span className="size-2 rounded-full bg-[var(--ob-track-strong)]" />
+					</span>
+					<span className="flex h-7 min-w-0 flex-1 items-center justify-center gap-1.5 rounded-full bg-[var(--ob-paper-2)] px-3 text-[12px] text-[var(--ob-ink-soft)]">
+						<Lock className="size-3 shrink-0" aria-hidden />
+						<span className="truncate">cap.link/m4k2p9x</span>
+					</span>
+					<span className="w-[42px] shrink-0" aria-hidden="true" />
+				</div>
+				<div className="p-4 sm:p-5">
+					<div className="flex items-start justify-between gap-3">
+						<p className="min-w-0 truncate text-[16px] font-medium tracking-[-0.01em] text-[var(--ob-ink)] sm:text-[17px]">
+							Q3 roadmap walkthrough
+						</p>
+						<span className="flex h-7 shrink-0 items-center rounded-full border-[1.5px] border-[var(--ob-track)] px-2.5 text-[11.5px] font-medium text-[var(--ob-ink-2)]">
+							Copy link
+						</span>
+					</div>
+					<div className="mt-2.5 flex items-center gap-2.5">
+						<span
+							className={clsx(
+								"flex size-8 shrink-0 items-center justify-center rounded-full text-[14px] font-medium transition-colors duration-300",
+								initial
+									? "bg-[var(--ob-accent)] text-white"
+									: "bg-[var(--ob-paper-2)] text-[var(--ob-ink-faint)]",
+							)}
+						>
+							<span key={initial} className="ob-fade">
+								{initial || "?"}
+							</span>
+						</span>
+						<div className="min-w-0 leading-tight">
+							<p
+								className={clsx(
+									"truncate text-[13.5px] transition-colors",
+									trimmed
+										? "text-[var(--ob-ink)]"
+										: "text-[var(--ob-ink-faint)]",
+								)}
+							>
+								{trimmed || "Your name"}
+							</p>
+							<p className="mt-0.5 truncate text-[12px] text-[var(--ob-ink-soft)]">
+								just now
+							</p>
+						</div>
+					</div>
+					<div className="relative mt-4 aspect-video overflow-hidden rounded-xl border-[1.5px] border-[var(--ob-track)]">
+						<Recording />
+						<Webcam />
+						<div className="absolute inset-x-0 bottom-0 flex h-[30px] items-center gap-2.5 border-t-[1.5px] border-[var(--ob-track)] bg-[var(--ob-surface)] px-3">
+							<span className="flex shrink-0 gap-[3px]" aria-hidden="true">
+								<span className="h-2.5 w-[3px] rounded-full bg-[var(--ob-ink)]" />
+								<span className="h-2.5 w-[3px] rounded-full bg-[var(--ob-ink)]" />
+							</span>
+							<span className="relative h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-[var(--ob-track)]">
+								<span className="ob-pv-progress absolute inset-0 rounded-full bg-[var(--ob-accent)]" />
+							</span>
+							<span className="shrink-0 text-[10.5px] tabular-nums text-[var(--ob-ink-soft)]">
+								2:14
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+			<figcaption className="mt-4 text-center text-[13.5px] text-[var(--ob-ink-soft)]">
+				This is what people see when you send them a Cap.
+			</figcaption>
+		</figure>
+	);
+};
diff --git a/apps/web/app/(org)/onboarding/components/StartStep.tsx b/apps/web/app/(org)/onboarding/components/StartStep.tsx
new file mode 100644
index 00000000000..a0d300efd62
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/StartStep.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import type { User } from "@cap/web-domain";
+import { ArrowRight } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { type CSSProperties, type ReactNode, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { trackEvent } from "@/app/utils/analytics";
+import { onboardingStepHref } from "../onboarding-flow";
+import { StepLede, StepPage, StepTitle } from "./StepChrome";
+import { LoomToCapDoodle, RecordDoodle, UploadDoodle } from "./scenes";
+import { useGetStarted } from "./use-get-started";
+
+type Choice = {
+	path: "loom" | "record" | "upload";
+	title: string;
+	body: string;
+	cue: string;
+	doodle: ReactNode;
+};
+
+const CHOICES: readonly Choice[] = [
+	{
+		path: "loom",
+		title: "Bring my videos from Loom",
+		body: "Paste a link, or bring your whole library over with a CSV. Nothing changes on Loom.",
+		cue: "One link or a whole CSV",
+		doodle: <LoomToCapDoodle />,
+	},
+	{
+		path: "record",
+		title: "Record a video",
+		body: "Capture your screen, camera and mic. Your link is ready the moment you stop.",
+		cue: "No download needed",
+		doodle: <RecordDoodle />,
+	},
+	{
+		path: "upload",
+		title: "Upload a video",
+		body: "Turn a recording you already have into a link you can share anywhere.",
+		cue: "MP4, MOV or WebM",
+		doodle: <UploadDoodle />,
+	},
+];
+
+export const StartStep = ({
+	firstName,
+	organizationName,
+	continuePath,
+	completed,
+}: {
+	firstName: string;
+	organizationName: string | null;
+	continuePath: string;
+	completed: boolean;
+}) => {
+	const router = useRouter();
+	const { complete } = useGetStarted(completed);
+	const [leaving, setLeaving] = useState<User.OnboardingStartPath | null>(null);
+
+	useEffect(() => {
+		for (const choice of CHOICES)
+			router.prefetch(onboardingStepHref(choice.path));
+	}, [router]);
+
+	const choose = (path: Choice["path"]) => {
+		trackEvent("onboarding_start_selected", { path });
+		setLeaving(path);
+		router.push(onboardingStepHref(path));
+	};
+
+	const lookAround = async () => {
+		trackEvent("onboarding_start_selected", { path: "explore" });
+		setLeaving("explore");
+		try {
+			await complete("explore");
+			router.push(continuePath);
+			router.refresh();
+		} catch {
+			setLeaving(null);
+			toast.error("Something went wrong. Please try again.");
+		}
+	};
+
+	return (
+		<StepPage className="justify-center">
+			<div className="mx-auto flex w-full max-w-[760px] flex-col items-center text-center">
+				<StepTitle>
+					{organizationName
+						? `Welcome to ${organizationName}${firstName ? `, ${firstName}` : ""}`
+						: firstName
+							? `Hi ${firstName}, let's make your first Cap`
+							: "Let's make your first Cap"}
+				</StepTitle>
+				<StepLede className="mx-auto">
+					{organizationName
+						? "Pick where you'd like to start. Everything you make lands in your team's library."
+						: "Pick where you'd like to start. You can do the others any time from your library."}
+				</StepLede>
+			</div>
+
+			<ul className="mx-auto mt-10 grid w-full max-w-[1040px] gap-3.5 sm:mt-12 md:grid-cols-3 md:gap-5">
+				{CHOICES.map((choice, index) => (
+					<li
+						key={choice.path}
+						className="ob-rise flex"
+						style={{ "--d": `${0.12 + index * 0.08}s` } as CSSProperties}
+					>
+						<button
+							type="button"
+							onClick={() => choose(choice.path)}
+							disabled={leaving !== null}
+							aria-busy={leaving === choice.path}
+							className="ob-choice w-full flex-row items-center gap-4 p-4 disabled:cursor-wait sm:p-5 md:flex-col md:items-stretch md:gap-0 md:p-6"
+						>
+							<span className="flex w-[88px] shrink-0 items-center justify-center rounded-2xl bg-[var(--ob-paper-2)] px-2 py-3 sm:w-[104px] md:mb-6 md:w-full md:px-10 md:py-7">
+								<span className="block w-full max-w-[150px]">
+									{choice.doodle}
+								</span>
+							</span>
+							<span className="flex min-w-0 flex-1 flex-col">
+								<span className="text-[17px] font-medium leading-snug tracking-[-0.01em] text-[var(--ob-ink)] md:text-[19px]">
+									{choice.title}
+								</span>
+								<span className="mt-1.5 text-[14px] leading-relaxed text-[var(--ob-ink-soft)] md:text-[14.5px]">
+									{choice.body}
+								</span>
+								<span className="mt-3 hidden items-center justify-between text-[13px] font-medium text-[var(--ob-ink-2)] md:mt-auto md:flex md:pt-6">
+									{choice.cue}
+									<ArrowRight
+										className="ob-choice-arrow size-4 text-[var(--ob-ink-soft)]"
+										aria-hidden
+									/>
+								</span>
+							</span>
+							<ArrowRight
+								className="ob-choice-arrow size-4 shrink-0 text-[var(--ob-ink-soft)] md:hidden"
+								aria-hidden
+							/>
+						</button>
+					</li>
+				))}
+			</ul>
+
+			<div
+				className="ob-rise mt-10 flex flex-col items-center gap-2 text-center"
+				style={{ "--d": "0.4s" } as CSSProperties}
+			>
+				<button
+					type="button"
+					className="ob-link"
+					onClick={lookAround}
+					disabled={leaving !== null}
+				>
+					{leaving === "explore" ? "Taking you in…" : "I'll look around first"}
+					<ArrowRight className="size-3.5" aria-hidden />
+				</button>
+			</div>
+		</StepPage>
+	);
+};
diff --git a/apps/web/app/(org)/onboarding/components/StepChrome.tsx b/apps/web/app/(org)/onboarding/components/StepChrome.tsx
new file mode 100644
index 00000000000..4ac95c0322e
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/StepChrome.tsx
@@ -0,0 +1,112 @@
+import clsx from "clsx";
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import type { CSSProperties, ReactNode } from "react";
+
+export const StepPage = ({
+	children,
+	width = "wide",
+	className,
+}: {
+	children: ReactNode;
+	width?: "narrow" | "wide";
+	className?: string;
+}) => (
+	<div
+		className={clsx(
+			"mx-auto flex w-full flex-1 flex-col px-5 pb-24 pt-8 sm:px-8 sm:pb-16 sm:pt-12 lg:pt-14",
+			width === "narrow" ? "max-w-[640px]" : "max-w-[1120px]",
+			className,
+		)}
+	>
+		{children}
+	</div>
+);
+
+export const BackLink = ({
+	href = "/onboarding/start",
+	children = "Other ways to start",
+}: {
+	href?: string;
+	children?: ReactNode;
+}) => (
+	<Link
+		href={href}
+		className="ob-link ob-rise mb-6 self-start !text-[13.5px] !no-underline hover:!underline sm:mb-8"
+	>
+		<ArrowLeft className="size-3.5" aria-hidden />
+		{children}
+	</Link>
+);
+
+export const StepTitle = ({
+	children,
+	className,
+	delay = 0,
+}: {
+	children: ReactNode;
+	className?: string;
+	delay?: number;
+}) => (
+	<h1
+		className={clsx(
+			"ob-rise text-balance text-[32px] font-medium leading-[1.08] tracking-[-0.03em] text-[var(--ob-ink)] sm:text-[42px]",
+			className,
+		)}
+		style={{ "--d": `${delay}s` } as CSSProperties}
+	>
+		{children}
+	</h1>
+);
+
+export const StepLede = ({
+	children,
+	className,
+	delay = 0.06,
+}: {
+	children: ReactNode;
+	className?: string;
+	delay?: number;
+}) => (
+	<p
+		className={clsx(
+			"ob-rise mt-3 max-w-[560px] text-pretty text-[16px] leading-relaxed text-[var(--ob-ink-soft)] sm:text-[17px]",
+			className,
+		)}
+		style={{ "--d": `${delay}s` } as CSSProperties}
+	>
+		{children}
+	</p>
+);
+
+export const ProNote = ({
+	children,
+	className,
+}: {
+	children: ReactNode;
+	className?: string;
+}) => (
+	<div
+		className={clsx(
+			"flex items-start gap-3 rounded-2xl border-[1.5px] border-dashed border-[var(--ob-track-strong)] bg-[var(--ob-surface-soft)] px-4 py-3.5 text-[14px] leading-relaxed text-[var(--ob-ink-2)]",
+			className,
+		)}
+	>
+		<span className="relative mt-0.5 flex h-[22px] shrink-0 items-center px-2 text-[12px] font-medium text-[var(--ob-accent)]">
+			<svg
+				viewBox="0 0 44 22"
+				preserveAspectRatio="none"
+				className="ob-boil absolute inset-0 size-full overflow-visible"
+				aria-hidden="true"
+			>
+				<path
+					className="ob-ink is-accent"
+					style={{ strokeWidth: 1.6 }}
+					d="M 11 1.6 C 22 0.8 33 1 40 3 C 43.6 5.6 43.4 16.4 40 19 C 31 21.4 14 21.2 5 19.4 C 0.8 16.8 0.6 6 4 3.2 C 6 2 8.6 1.6 12 1.4"
+				/>
+			</svg>
+			Pro
+		</span>
+		<div className="min-w-0">{children}</div>
+	</div>
+);
diff --git a/apps/web/app/(org)/onboarding/components/Stepper.tsx b/apps/web/app/(org)/onboarding/components/Stepper.tsx
deleted file mode 100644
index 70b28743f5d..00000000000
--- a/apps/web/app/(org)/onboarding/components/Stepper.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-"use client";
-
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import clsx from "clsx";
-import { usePathname } from "next/navigation";
-import { Fragment, useMemo } from "react";
-
-export default function Stepper({
-	completedSteps,
-}: {
-	completedSteps: {
-		welcome?: boolean;
-		organizationSetup?: boolean;
-		customDomain?: boolean;
-		inviteTeam?: boolean;
-		download?: boolean;
-	};
-}) {
-	const currentPath = usePathname();
-	const currentStep = useMemo(() => {
-		if (currentPath === "/onboarding/welcome") return "Welcome";
-		if (currentPath === "/onboarding/organization-setup")
-			return "Organization Setup";
-		if (currentPath === "/onboarding/custom-domain") return "Custom Domain";
-		if (currentPath === "/onboarding/invite-team") return "Invite your team";
-		if (currentPath === "/onboarding/download") return "Download";
-	}, [currentPath]);
-
-	const steps = [
-		{
-			id: "1",
-			name: "Welcome",
-			completed: completedSteps.welcome || false,
-		},
-		{
-			id: "2",
-			name: "Organization Setup",
-			completed: completedSteps.organizationSetup || false,
-		},
-		{
-			id: "3",
-			name: "Custom Domain",
-			completed: completedSteps.customDomain || false,
-		},
-		{
-			id: "4",
-			name: "Invite your team",
-			completed: completedSteps.inviteTeam || false,
-		},
-		{
-			id: "5",
-			name: "Download",
-			completed: completedSteps.download || false,
-		},
-	];
-
-	return (
-		<>
-			{/* Mobile Stepper - shows on devices up to 1024px */}
-			<div className="justify-center mx-auto mb-10 max-w-fit lg:hidden">
-				<MobileStepper currentStep={currentStep} steps={steps} />
-			</div>
-
-			{/* Desktop Stepper - shows on devices 1024px and up */}
-			<div className="hidden absolute right-0 left-0 top-6 justify-center items-center p-4 mx-auto rounded-xl border lg:flex max-w-fit bg-gray-2 border-gray-4">
-				{steps.map((step, idx) => {
-					return (
-						<Fragment key={step.id}>
-							<div className="flex justify-center items-center">
-								{idx !== 0 && (
-									<div className="flex-1 mx-5 border-t border-dashed min-w-[72px] h-[2px] border-gray-8" />
-								)}
-								<div className="flex flex-1 gap-2 justify-center items-center min-w-fit">
-									<div
-										className={clsx(
-											"flex justify-center items-center text-xs text-white rounded-full size-5 min-size-5",
-											currentStep === step.name && !step.completed
-												? "bg-blue-500"
-												: step.completed
-													? "bg-green-500"
-													: "bg-gray-7",
-										)}
-									>
-										{step.completed ? (
-											<FontAwesomeIcon
-												icon={faCheck}
-												className="text-white size-2"
-											/>
-										) : (
-											<p>{step.id}</p>
-										)}
-									</div>
-									<p
-										className={clsx(
-											"text-[13px] text-nowrap",
-											step.completed || currentStep === step.name
-												? "text-gray-12"
-												: "text-gray-9",
-										)}
-									>
-										{step.name}
-									</p>
-								</div>
-							</div>
-						</Fragment>
-					);
-				})}
-			</div>
-		</>
-	);
-}
-
-const MobileStepper = ({
-	currentStep,
-	steps,
-}: {
-	currentStep: string | undefined;
-	steps: Array<{
-		id: string;
-		name: string;
-		completed: boolean;
-	}>;
-}) => {
-	const activeStep = steps.find((step) => step.name === currentStep);
-
-	if (!activeStep) return null;
-
-	return (
-		<div className="flex gap-x-4 items-center p-3 rounded-xl border bg-gray-2 border-gray-4">
-			<div className="flex gap-2 items-center">
-				<div
-					className={clsx(
-						"flex justify-center items-center text-xs text-white rounded-full size-5 min-size-5",
-						"bg-blue-500",
-					)}
-				>
-					<p>{activeStep.id}</p>
-				</div>
-				<p className="text-sm font-medium text-gray-12">{activeStep.name}</p>
-			</div>
-			<div>
-				<p className="text-[13px] text-gray-10">
-					Step <span className="text-gray-11">{activeStep.id}/5</span>
-				</p>
-			</div>
-		</div>
-	);
-};
diff --git a/apps/web/app/(org)/onboarding/components/UploadStep.tsx b/apps/web/app/(org)/onboarding/components/UploadStep.tsx
new file mode 100644
index 00000000000..042bba57979
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/UploadStep.tsx
@@ -0,0 +1,330 @@
+"use client";
+
+import type { Organisation } from "@cap/web-domain";
+import { ArrowRight, LoaderCircle } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+	type ChangeEvent,
+	type CSSProperties,
+	type DragEvent,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import { toast } from "sonner";
+import type { UploadStatus } from "@/app/(org)/dashboard/caps/UploadingContext";
+import { importMediaFile } from "@/app/(org)/dashboard/import/import-media";
+import { isSupportedVideoFile } from "@/app/(org)/dashboard/import/media-file-types";
+import { trackEvent } from "@/app/utils/analytics";
+import { UpgradeModal } from "@/components/UpgradeModal";
+import { onboardingStepHref } from "../onboarding-flow";
+import { Explainer, SquiggleProgress } from "./paper";
+import { BackLink, ProNote, StepLede, StepPage, StepTitle } from "./StepChrome";
+import { DoneDoodle, UploadDoodle, UploadScene } from "./scenes";
+import { useGetStarted } from "./use-get-started";
+import { useUpgradeConfirmation } from "./use-upgrade-confirmation";
+
+const VIDEO_ACCEPT = "video/*,.mp4,.mov,.m4v,.webm,.mkv,.avi";
+
+const statusLabel = (status: UploadStatus | undefined) => {
+	switch (status?.status) {
+		case "parsing":
+			return "Reading your video…";
+		case "creating":
+			return "Getting your link ready…";
+		case "uploadingVideo":
+		case "uploadingThumbnail":
+		case "converting":
+			return "Uploading…";
+		case "serverProcessing":
+			return "Almost there…";
+		default:
+			return "Starting…";
+	}
+};
+
+const statusProgress = (status: UploadStatus | undefined) => {
+	if (!status) return null;
+	if (status.status === "serverProcessing") return 1;
+	if ("progress" in status)
+		return Math.min(1, Math.max(0, status.progress / 100));
+	return null;
+};
+
+export const UploadStep = ({
+	organizationId,
+	isPro,
+	justUpgraded,
+	completed,
+}: {
+	organizationId: Organisation.OrganisationId | null;
+	isPro: boolean;
+	justUpgraded: boolean;
+	completed: boolean;
+}) => {
+	const router = useRouter();
+	const inputRef = useRef<HTMLInputElement>(null);
+	const capIdRef = useRef<string | null>(null);
+	const { complete } = useGetStarted(completed, "upload");
+	const upgrade = useUpgradeConfirmation({ justUpgraded, isPro });
+	const [phase, setPhase] = useState<"idle" | "working" | "done">("idle");
+	const [status, setStatus] = useState<UploadStatus | undefined>();
+	const [fileName, setFileName] = useState("");
+	const [capId, setCapId] = useState<string | null>(null);
+	const [over, setOver] = useState(false);
+	const [upgradeOpen, setUpgradeOpen] = useState(false);
+	const [leaving, setLeaving] = useState(false);
+
+	useEffect(() => {
+		if (organizationId) return;
+		complete("upload")
+			.then(() => router.refresh())
+			.catch(() => undefined);
+	}, [organizationId, complete, router]);
+
+	const promptUpgrade = () => {
+		trackEvent("onboarding_upload_upgrade_prompted");
+		setUpgradeOpen(true);
+	};
+
+	const upload = async (file: File) => {
+		if (!isPro) {
+			promptUpgrade();
+			return;
+		}
+		if (!isSupportedVideoFile(file)) {
+			toast.error("Please choose a video file, like an MP4, MOV or WebM.");
+			return;
+		}
+		if (!organizationId) {
+			toast.info("Your library is still being set up. Try again in a second.");
+			router.refresh();
+			return;
+		}
+
+		capIdRef.current = null;
+		setFileName(file.name);
+		setStatus(undefined);
+		setPhase("working");
+		await complete("upload").catch(() => undefined);
+
+		const ok = await importMediaFile({
+			file,
+			orgId: organizationId,
+			showSuccessToast: false,
+			setUploadStatus: (next) => {
+				setStatus(next);
+				if (next && "capId" in next) capIdRef.current = next.capId;
+			},
+		});
+
+		if (ok && capIdRef.current) {
+			trackEvent("onboarding_video_uploaded");
+			setCapId(capIdRef.current);
+			setPhase("done");
+		} else {
+			setPhase("idle");
+		}
+	};
+
+	const onFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0];
+		event.target.value = "";
+		if (file) upload(file);
+	};
+
+	const onDrop = (event: DragEvent<HTMLButtonElement>) => {
+		event.preventDefault();
+		setOver(false);
+		const file = event.dataTransfer.files[0];
+		if (file) upload(file);
+	};
+
+	const leaveTo = async (href: string) => {
+		setLeaving(true);
+		try {
+			await complete("upload");
+			router.push(href);
+		} catch {
+			setLeaving(false);
+			toast.error("Something went wrong. Please try again.");
+		}
+	};
+
+	return (
+		<StepPage>
+			<BackLink />
+			<div className="grid items-start gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.05fr)] lg:gap-14">
+				<div className="flex min-w-0 flex-col">
+					<StepTitle>Upload a video</StepTitle>
+					<StepLede>
+						Drop in a recording you already have and get a link you can share
+						straight away. No attachments, no waiting for exports.
+					</StepLede>
+
+					<input
+						ref={inputRef}
+						type="file"
+						accept={VIDEO_ACCEPT}
+						className="hidden"
+						onChange={onFileChange}
+					/>
+
+					{phase === "done" && capId ? (
+						<div className="ob-card ob-rise mt-8 flex flex-col items-start p-6 sm:p-7">
+							<DoneDoodle />
+							<h2 className="mt-3 text-[22px] font-medium tracking-[-0.01em]">
+								Your video is ready to share
+							</h2>
+							<p className="mt-1.5 break-all text-[15px] leading-relaxed text-[var(--ob-ink-soft)]">
+								{fileName}
+							</p>
+							<p className="mt-1 text-[15px] leading-relaxed text-[var(--ob-ink-soft)]">
+								We're polishing it in the background. Your link already works.
+							</p>
+							<div className="mt-6 flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
+								<button
+									type="button"
+									className="ob-cta"
+									disabled={leaving}
+									onClick={() => leaveTo(`/s/${capId}`)}
+								>
+									Open my video
+									<ArrowRight className="ob-cta-arrow size-4" aria-hidden />
+								</button>
+								<button
+									type="button"
+									className="ob-cta is-quiet"
+									disabled={leaving}
+									onClick={() => leaveTo("/dashboard/caps")}
+								>
+									Go to my Caps
+								</button>
+							</div>
+						</div>
+					) : phase === "working" ? (
+						<div
+							className="ob-card ob-rise mt-8 flex flex-col gap-5 p-6 sm:p-7"
+							aria-live="polite"
+						>
+							<div className="flex items-center gap-3">
+								<LoaderCircle
+									className="size-5 shrink-0 animate-spin text-[var(--ob-accent)]"
+									aria-hidden
+								/>
+								<div className="min-w-0">
+									<p className="text-[16px] font-medium">
+										{statusLabel(status)}
+									</p>
+									<p className="truncate text-[13.5px] text-[var(--ob-ink-soft)]">
+										{fileName}
+									</p>
+								</div>
+							</div>
+							<SquiggleProgress progress={statusProgress(status)} />
+							<p className="text-[13.5px] text-[var(--ob-ink-soft)]">
+								Keep this tab open until the upload finishes.
+							</p>
+						</div>
+					) : (
+						<div
+							className="ob-rise mt-8 flex flex-col gap-3"
+							style={{ "--d": "0.12s" } as CSSProperties}
+						>
+							<button
+								type="button"
+								className="ob-drop ob-focus min-h-[260px] px-6 py-10"
+								data-over={over}
+								onClick={() =>
+									isPro ? inputRef.current?.click() : promptUpgrade()
+								}
+								onDragOver={(event) => {
+									event.preventDefault();
+									setOver(true);
+								}}
+								onDragLeave={() => setOver(false)}
+								onDrop={onDrop}
+								disabled={upgrade.waiting}
+							>
+								<span className="ob-drop-outline ob-boil" aria-hidden="true" />
+								<span className="block w-[92px]">
+									<UploadDoodle />
+								</span>
+								<span className="mt-4 text-[18px] font-medium tracking-[-0.01em]">
+									<span className="ob-pointer-only">
+										{over ? "Let go to upload" : "Drop your video here"}
+									</span>
+									<span className="ob-touch-only">Choose a video</span>
+								</span>
+								<span className="mt-1 text-[14.5px] text-[var(--ob-ink-soft)]">
+									<span className="ob-pointer-only">or </span>
+									<span className="font-medium text-[var(--ob-ink)] underline decoration-[var(--ob-track-strong)] decoration-[1.5px] underline-offset-4">
+										{isPro ? "choose a file" : "upgrade to upload"}
+									</span>
+								</span>
+								<span className="mt-4 text-[12.5px] text-[var(--ob-ink-faint)]">
+									MP4, MOV, WebM, MKV or AVI
+								</span>
+							</button>
+							{upgrade.waiting ? (
+								<ProNote>
+									<span className="inline-flex items-center gap-2">
+										<LoaderCircle
+											className="size-3.5 animate-spin"
+											aria-hidden
+										/>
+										Finishing your upgrade. This only takes a moment.
+									</span>
+								</ProNote>
+							) : upgrade.timedOut ? (
+								<ProNote>
+									Your upgrade is taking a little longer than usual. Refresh
+									this page in a moment to upload.
+								</ProNote>
+							) : (
+								!isPro && (
+									<ProNote>
+										Uploading videos is part of Cap Pro.{" "}
+										<Link
+											href={onboardingStepHref("record")}
+											className="ob-link !inline !text-[14px]"
+										>
+											Or record one for free
+										</Link>
+									</ProNote>
+								)
+							)}
+						</div>
+					)}
+				</div>
+
+				<Explainer
+					className="ob-rise lg:sticky lg:top-8"
+					label="How uploading works"
+					loopSeconds={8}
+					scene={<UploadScene />}
+					steps={[
+						{
+							title: "Drop in a video file",
+							body: "Drag it onto the page or choose it from your computer.",
+						},
+						{
+							title: "We upload it and get it ready",
+							body: "Big files are fine. Keep the tab open while it uploads.",
+						},
+						{
+							title: "Share your link",
+							body: "Send it anywhere. People can watch without signing up.",
+						},
+					]}
+				/>
+			</div>
+			<UpgradeModal
+				open={upgradeOpen}
+				onOpenChange={setUpgradeOpen}
+				returnPath={onboardingStepHref("upload")}
+			/>
+		</StepPage>
+	);
+};
diff --git a/apps/web/app/(org)/onboarding/components/WelcomePage.tsx b/apps/web/app/(org)/onboarding/components/WelcomePage.tsx
deleted file mode 100644
index 5c3168c67b8..00000000000
--- a/apps/web/app/(org)/onboarding/components/WelcomePage.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-
-import { Button, Input } from "@cap/ui";
-import { useRouter } from "next/navigation";
-import { startTransition, useState } from "react";
-import { toast } from "sonner";
-import { useEffectMutation, useRpcClient } from "@/lib/EffectRuntime";
-import { Base } from "./Base";
-
-export function WelcomePage() {
-	const [firstName, setFirstName] = useState("");
-	const [lastName, setLastName] = useState("");
-	const router = useRouter();
-	const rpc = useRpcClient();
-
-	const welcomeMutation = useEffectMutation({
-		mutationFn: (data: { firstName: string; lastName?: string }) =>
-			rpc.UserCompleteOnboardingStep({
-				step: "welcome",
-				data,
-			}),
-		onSuccess: () => {
-			startTransition(() => {
-				router.push("/onboarding/organization-setup");
-				router.refresh();
-			});
-		},
-		onError: () => {
-			toast.error("An error occurred, please try again");
-		},
-	});
-
-	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		welcomeMutation.mutate({ firstName, lastName });
-	};
-
-	return (
-		<Base
-			title="Welcome to Cap"
-			description="Let's get you started"
-			hideBackButton
-		>
-			<form className="space-y-7" onSubmit={handleSubmit}>
-				<div className="space-y-3">
-					<Input
-						value={firstName}
-						disabled={welcomeMutation.isPending}
-						onChange={(e) => setFirstName(e.target.value)}
-						type="text"
-						placeholder="First name"
-						name="firstName"
-						required
-					/>
-					<Input
-						value={lastName}
-						disabled={welcomeMutation.isPending}
-						onChange={(e) => setLastName(e.target.value)}
-						type="text"
-						placeholder="Last name (optional)"
-						name="lastName"
-					/>
-				</div>
-				<div className="w-full h-px bg-gray-4" />
-				<Button
-					spinner={welcomeMutation.isPending}
-					disabled={!firstName || welcomeMutation.isPending}
-					type="submit"
-					variant="dark"
-					className="mx-auto w-full"
-				>
-					Continue
-				</Button>
-			</form>
-		</Base>
-	);
-}
diff --git a/apps/web/app/(org)/onboarding/components/WelcomeStep.tsx b/apps/web/app/(org)/onboarding/components/WelcomeStep.tsx
new file mode 100644
index 00000000000..25b46201890
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/WelcomeStep.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { useRouter } from "next/navigation";
+import {
+	type CSSProperties,
+	type FormEvent,
+	startTransition,
+	useEffect,
+	useId,
+	useRef,
+	useState,
+} from "react";
+import { toast } from "sonner";
+import { trackEvent } from "@/app/utils/analytics";
+import { useEffectMutation, useRpcClient } from "@/lib/EffectRuntime";
+import { splitFullName } from "../onboarding-flow";
+import { SharePreview } from "./SharePreview";
+import { StepLede, StepPage, StepTitle } from "./StepChrome";
+
+const WavingHand = () => (
+	<span className="relative inline-block whitespace-nowrap">
+		<span role="img" aria-label="Waving hand" className="ob-wave">
+			👋
+		</span>
+		<svg
+			viewBox="0 0 24 24"
+			className="ob-boil pointer-events-none absolute -right-[0.42em] -top-[0.32em] size-[0.6em] overflow-visible"
+			aria-hidden="true"
+		>
+			<path
+				pathLength={1}
+				className="ob-ink is-accent ob-draw"
+				style={{ "--d": "0.55s", strokeWidth: 2.4 } as CSSProperties}
+				d="M 5 13 C 8 10 10 7 11 3"
+			/>
+			<path
+				pathLength={1}
+				className="ob-ink is-accent ob-draw"
+				style={{ "--d": "0.75s", strokeWidth: 2.4 } as CSSProperties}
+				d="M 11 19 C 15 17 18 14 20 10"
+			/>
+		</svg>
+	</span>
+);
+
+export const WelcomeStep = ({
+	organizationName,
+	nextHref,
+}: {
+	organizationName: string | null;
+	nextHref: string;
+}) => {
+	const router = useRouter();
+	const rpc = useRpcClient();
+	const inputId = useId();
+	const inputRef = useRef<HTMLInputElement>(null);
+	const [name, setName] = useState("");
+
+	useEffect(() => {
+		inputRef.current?.focus();
+	}, []);
+	const ready = name.trim().length > 0;
+
+	const welcome = useEffectMutation({
+		mutationFn: (data: { firstName: string; lastName?: string }) =>
+			rpc.UserCompleteOnboardingStep({ step: "welcome", data }),
+		onSuccess: () => {
+			trackEvent("onboarding_name_saved");
+			startTransition(() => {
+				router.push(nextHref);
+				router.refresh();
+			});
+		},
+		onError: () => {
+			toast.error("We couldn't save your name. Please try again.");
+		},
+	});
+
+	const submit = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		if (!ready || welcome.isPending || welcome.isSuccess) return;
+		const { firstName, lastName } = splitFullName(name);
+		welcome.mutate({ firstName, lastName: lastName || undefined });
+	};
+
+	const busy = welcome.isPending || welcome.isSuccess;
+
+	return (
+		<StepPage>
+			<div className="grid flex-1 items-center gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:gap-16">
+				<div className="flex flex-col">
+					<StepTitle className="ob-greeting">
+						Hey, welcome to{" "}
+						<span className="break-words">
+							{organizationName ?? "Cap"}
+							{"\u00a0"}
+							<WavingHand />
+						</span>
+					</StepTitle>
+					<StepLede>
+						{organizationName
+							? "You're one step away from your team's videos. What should we call you?"
+							: "Let's get your first video out the door. First, what should we call you?"}
+					</StepLede>
+					<form
+						onSubmit={submit}
+						className="ob-rise mt-8 flex max-w-[480px] flex-col gap-3"
+						style={{ "--d": "0.12s" } as CSSProperties}
+					>
+						<label
+							htmlFor={inputId}
+							className="text-[14px] font-medium text-[var(--ob-ink-2)]"
+						>
+							Your name
+						</label>
+						<input
+							id={inputId}
+							className="ob-input"
+							value={name}
+							onChange={(event) => setName(event.target.value)}
+							placeholder="Ada Lovelace"
+							autoComplete="name"
+							autoCapitalize="words"
+							enterKeyHint="go"
+							maxLength={120}
+							disabled={busy}
+							required
+							ref={inputRef}
+						/>
+						<button
+							type="submit"
+							className="ob-cta mt-2 w-full sm:w-fit"
+							disabled={!ready || busy}
+						>
+							{busy ? "Saving…" : "Continue"}
+							<ArrowRight className="ob-cta-arrow size-4" aria-hidden />
+						</button>
+						<p className="mt-1 text-[13px] text-[var(--ob-ink-soft)]">
+							You can change this any time in settings.
+						</p>
+					</form>
+				</div>
+				<SharePreview name={name} />
+			</div>
+		</StepPage>
+	);
+};
diff --git a/apps/web/app/(org)/onboarding/components/paper.tsx b/apps/web/app/(org)/onboarding/components/paper.tsx
new file mode 100644
index 00000000000..1a9981433bf
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/paper.tsx
@@ -0,0 +1,283 @@
+import clsx from "clsx";
+import type { CSSProperties, ReactNode } from "react";
+import { ONBOARDING_PROGRESS_TOTAL } from "../onboarding-flow";
+
+export const BoilFilter = ({ id }: { id: string }) => (
+	<svg className="absolute size-0" aria-hidden="true" focusable="false">
+		<defs>
+			<filter id={id} x="-15%" y="-15%" width="130%" height="130%">
+				<feTurbulence
+					type="fractalNoise"
+					baseFrequency="0.05"
+					numOctaves="2"
+					seed="1"
+					result="noise"
+				>
+					<animate
+						attributeName="seed"
+						values="1;3;5;7"
+						dur="0.6s"
+						repeatCount="indefinite"
+						calcMode="discrete"
+					/>
+				</feTurbulence>
+				<feDisplacementMap
+					in="SourceGraphic"
+					in2="noise"
+					scale="2.6"
+					xChannelSelector="R"
+					yChannelSelector="G"
+				/>
+			</filter>
+		</defs>
+	</svg>
+);
+
+export const CapWordmark = ({ className }: { className?: string }) => (
+	<svg
+		className={className}
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 103 40"
+		role="img"
+		aria-label="Cap"
+	>
+		<path
+			fill="#4785FF"
+			d="M20 36c8.837 0 16-7.163 16-16S28.837 4 20 4 4 11.164 4 20s7.164 16 16 16"
+		/>
+		<path
+			fill="#ADC9FF"
+			d="M20 33c7.18 0 13-5.82 13-13S27.18 7 20 7 7 12.82 7 20s5.82 13 13 13"
+		/>
+		<path
+			fill="#fff"
+			d="M20 30c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"
+		/>
+		<path
+			fill="currentColor"
+			d="M58.416 30.448c-5.404 0-9.212-3.864-9.212-10.36 0-6.384 3.668-10.416 9.268-10.416 5.068 0 7.784 2.66 8.624 7.168l-3.808.196c-.476-2.604-2.072-4.2-4.816-4.2-3.388 0-5.488 2.828-5.488 7.252 0 4.48 2.156 7.196 5.46 7.196 2.94 0 4.508-1.708 4.956-4.564l3.808.196c-.784 4.676-3.752 7.532-8.792 7.532m16.23-.112c-3.137 0-5.209-1.484-5.209-4.088 0-2.576 1.596-3.948 4.872-4.592l4.956-.98c0-2.1-.98-3.192-2.856-3.192-1.764 0-2.716.812-3.052 2.324l-3.668-.168c.588-3.136 2.996-4.928 6.72-4.928 4.256 0 6.44 2.24 6.44 6.216v5.432c0 .812.28 1.036.84 1.036h.476V30c-.224.056-.812.112-1.288.112-1.624 0-2.828-.588-3.136-2.436-.728 1.596-2.632 2.66-5.096 2.66m.727-2.604c2.38 0 3.892-1.512 3.892-3.78v-.84l-3.864.784c-1.596.308-2.24.98-2.24 2.016 0 1.176.784 1.82 2.212 1.82M86.874 34.2V15.048h3.444l.056 2.212c.868-1.652 2.52-2.548 4.48-2.548 4.256 0 6.356 3.5 6.356 7.812s-2.128 7.812-6.384 7.812c-1.904 0-3.556-.924-4.368-2.38V34.2zm7.112-6.776c2.184 0 3.5-1.82 3.5-4.9s-1.316-4.9-3.5-4.9-3.528 1.652-3.528 4.9 1.316 4.9 3.528 4.9"
+		/>
+	</svg>
+);
+
+export const LoomMark = ({
+	className,
+	size = 18,
+}: {
+	className?: string;
+	size?: number;
+}) => (
+	<svg
+		className={className}
+		width={size}
+		height={size}
+		viewBox="0 0 16 16"
+		fill="none"
+		aria-hidden="true"
+	>
+		<path
+			fill="#625DF5"
+			d="M15 7.222h-4.094l3.546-2.047-.779-1.35-3.545 2.048 2.046-3.546-1.349-.779L8.78 5.093V1H7.22v4.094L5.174 1.548l-1.348.779 2.046 3.545-3.545-2.046-.779 1.348 3.546 2.047H1v1.557h4.093l-3.545 2.047.779 1.35 3.545-2.047-2.047 3.545 1.35.779 2.046-3.546V15h1.557v-4.094l2.047 3.546 1.349-.779-2.047-3.546 3.545 2.047.779-1.349-3.545-2.046h4.093L15 7.222zm-7 2.896a2.126 2.126 0 110-4.252 2.126 2.126 0 010 4.252z"
+		/>
+	</svg>
+);
+
+export const LOOM_MARK_PATH =
+	"M15 7.222h-4.094l3.546-2.047-.779-1.35-3.545 2.048 2.046-3.546-1.349-.779L8.78 5.093V1H7.22v4.094L5.174 1.548l-1.348.779 2.046 3.545-3.545-2.046-.779 1.348 3.546 2.047H1v1.557h4.093l-3.545 2.047.779 1.35 3.545-2.047-2.047 3.545 1.35.779 2.046-3.546V15h1.557v-4.094l2.047 3.546 1.349-.779-2.047-3.546 3.545 2.047.779-1.349-3.545-2.046h4.093L15 7.222zm-7 2.896a2.126 2.126 0 110-4.252 2.126 2.126 0 010 4.252z";
+
+export const SceneCursor = ({ name }: { name: string }) => (
+	<g className="ob-cursor" style={{ "--cursor": name } as CSSProperties}>
+		<path
+			d="M 0 0 L 0 17 L 4.5 12.8 L 7.6 19.6 L 10.4 18.4 L 7.4 11.7 L 13 11.4 Z"
+			fill="var(--ob-ink)"
+			stroke="var(--ob-paper)"
+			strokeWidth="1.4"
+			strokeLinejoin="round"
+		/>
+	</g>
+);
+
+export const SceneRipple = ({
+	x,
+	y,
+	at,
+	r = 12,
+}: {
+	x: number;
+	y: number;
+	at: number;
+	r?: number;
+}) => (
+	<circle
+		className="ob-ripple"
+		cx={x}
+		cy={y}
+		r={r}
+		fill="var(--ob-accent)"
+		style={{ "--at": at } as CSSProperties}
+	/>
+);
+
+const SPARK_SHAPE = (x: number, y: number, s: number) =>
+	`M ${x} ${y - 2 * s} L ${x} ${y - s * 0.6} M ${x} ${y + s * 0.6} L ${x} ${y + 2 * s} M ${x - 2 * s} ${y} L ${x - s * 0.6} ${y} M ${x + s * 0.6} ${y} L ${x + 2 * s} ${y}`;
+
+export const LoopSparks = ({
+	points,
+	at,
+}: {
+	points: readonly (readonly [number, number, number])[];
+	at: number;
+}) => (
+	<>
+		{points.map(([x, y, s], index) => (
+			<path
+				key={`${x}-${y}`}
+				className="ob-loop-spark"
+				d={SPARK_SHAPE(x, y, s)}
+				style={{ "--at": at + index * 0.012 } as CSSProperties}
+			/>
+		))}
+	</>
+);
+
+const PROGRESS_MARKS = Array.from(
+	{ length: ONBOARDING_PROGRESS_TOTAL },
+	(_, mark) => mark,
+);
+
+export const ProgressMarks = ({ index }: { index: number }) => (
+	<div className="flex items-center gap-1.5">
+		<span className="sr-only">
+			Step {index + 1} of {ONBOARDING_PROGRESS_TOTAL}
+		</span>
+		{PROGRESS_MARKS.map((mark) => (
+			<svg
+				key={mark}
+				viewBox="0 0 40 10"
+				className="h-2.5 w-8 overflow-visible sm:w-10"
+				aria-hidden="true"
+			>
+				<path
+					pathLength={1}
+					className={clsx(
+						"ob-progress-mark",
+						mark < index
+							? "is-done"
+							: mark === index
+								? "is-current"
+								: "is-next",
+					)}
+					d="M 3 6 C 10 2.5 16 7.5 22 4.5 C 27 2.5 32 6.5 37 4.8"
+				/>
+			</svg>
+		))}
+	</div>
+);
+
+const SQUIGGLE =
+	"M 6 14 q 6 -7 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0";
+
+export const SquiggleProgress = ({ progress }: { progress: number | null }) => (
+	<div className="flex w-full items-center gap-3">
+		<svg
+			viewBox="0 0 360 26"
+			preserveAspectRatio="none"
+			className="h-[22px] min-w-0 flex-1 overflow-visible"
+			aria-hidden="true"
+		>
+			<path className="ob-squiggle-track" pathLength={100} d={SQUIGGLE} />
+			<path
+				className={clsx(
+					"ob-squiggle-progress",
+					progress === null && "is-waiting",
+				)}
+				pathLength={100}
+				d={SQUIGGLE}
+				style={
+					progress === null
+						? undefined
+						: { strokeDashoffset: 100 - Math.round(progress * 100) }
+				}
+			/>
+		</svg>
+		<span
+			className={clsx(
+				"w-11 shrink-0 text-right text-[15px] font-medium tabular-nums transition-opacity",
+				progress === null && "opacity-0",
+			)}
+		>
+			{Math.round((progress ?? 0) * 100)}%
+		</span>
+	</div>
+);
+
+const STEP_RING =
+	"M 13 2.2 C 19.5 2 24 6.6 23.8 13 C 23.6 19.6 18.8 23.9 12.6 23.8 C 6.3 23.6 2.1 19.2 2.2 12.8 C 2.3 7.2 6.4 2.6 12.2 2.3";
+
+export type ExplainerStep = { title: string; body?: ReactNode };
+
+export const Explainer = ({
+	scene,
+	steps,
+	loopSeconds,
+	label,
+	className,
+	layout = "stacked",
+}: {
+	scene: ReactNode;
+	steps: readonly [ExplainerStep, ExplainerStep, ExplainerStep];
+	loopSeconds: number;
+	label: string;
+	className?: string;
+	layout?: "stacked" | "split";
+}) => (
+	<figure
+		className={clsx(
+			"ob-card overflow-hidden p-2.5 sm:p-3",
+			layout === "split" &&
+				"md:grid md:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] md:items-center md:gap-2",
+			className,
+		)}
+		style={{ "--loop": `${loopSeconds}s` } as CSSProperties}
+	>
+		<div className="ob-scene-frame overflow-hidden px-2 py-3 sm:px-4 sm:py-4">
+			{scene}
+		</div>
+		<figcaption className="px-2.5 pb-2 pt-4 sm:px-4 sm:pb-3">
+			<p className="sr-only">{label}</p>
+			<ol className="flex flex-col gap-3.5">
+				{steps.map((step, index) => (
+					<li
+						key={step.title}
+						className="ob-step flex items-start gap-3"
+						style={{ "--i": index } as CSSProperties}
+					>
+						<span className="relative flex size-[26px] shrink-0 items-center justify-center">
+							<svg
+								viewBox="0 0 26 26"
+								className="absolute inset-0 size-full overflow-visible"
+								aria-hidden="true"
+							>
+								<path className="ob-step-ring" d={STEP_RING} />
+							</svg>
+							<span className="ob-step-num text-[13px] font-medium tabular-nums">
+								{index + 1}
+							</span>
+						</span>
+						<span className="ob-step-text flex min-w-0 flex-col pt-[3px]">
+							<span className="text-[15px] font-medium leading-snug">
+								{step.title}
+							</span>
+							{step.body && (
+								<span className="mt-0.5 text-[13.5px] leading-relaxed text-[var(--ob-ink-soft)]">
+									{step.body}
+								</span>
+							)}
+						</span>
+					</li>
+				))}
+			</ol>
+		</figcaption>
+	</figure>
+);
diff --git a/apps/web/app/(org)/onboarding/components/scenes.tsx b/apps/web/app/(org)/onboarding/components/scenes.tsx
new file mode 100644
index 00000000000..b746477510f
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/scenes.tsx
@@ -0,0 +1,1186 @@
+import type { CSSProperties } from "react";
+import { LOOM_MARK_PATH, LoopSparks, SceneCursor, SceneRipple } from "./paper";
+
+const white = { fill: "var(--ob-surface)" } as const;
+const paper2 = { fill: "var(--ob-paper-2)" } as const;
+
+const PlayTriangle = ({
+	x,
+	y,
+	size = 1,
+	color = "var(--ob-ink-faint)",
+}: {
+	x: number;
+	y: number;
+	size?: number;
+	color?: string;
+}) => (
+	<path
+		d={`M ${x - 3 * size} ${y - 4 * size} L ${x + 4.5 * size} ${y} L ${x - 3 * size} ${y + 4 * size} Z`}
+		fill={color}
+	/>
+);
+
+export const LoomScene = () => (
+	<svg viewBox="0 0 360 220" className="ob-scene" aria-hidden="true">
+		<g className="ob-boil">
+			<rect
+				x="12"
+				y="24"
+				width="160"
+				height="150"
+				rx="12"
+				className="ob-ink"
+				style={white}
+			/>
+			<path d="M 12 50 L 172 50" className="ob-ink is-track" />
+			<rect
+				x="24"
+				y="60"
+				width="136"
+				height="74"
+				rx="8"
+				className="ob-ink is-loom"
+				style={{ fill: "var(--ob-loom-soft)" }}
+			/>
+			<rect
+				className="ob-ink ob-press"
+				x="24"
+				y="144"
+				width="78"
+				height="22"
+				rx="11"
+				style={{ ...white, "--at": 0.15 } as CSSProperties}
+			/>
+			<rect
+				x="188"
+				y="24"
+				width="160"
+				height="150"
+				rx="12"
+				className="ob-ink"
+				style={white}
+			/>
+			<path d="M 188 50 L 348 50" className="ob-ink is-track" />
+			<rect
+				x="200"
+				y="58"
+				width="136"
+				height="26"
+				rx="8"
+				className="ob-ink is-track"
+				style={white}
+			/>
+			<rect
+				x="200"
+				y="138"
+				width="40"
+				height="28"
+				rx="6"
+				className="ob-ink is-track"
+				style={paper2}
+			/>
+			<rect
+				x="248"
+				y="138"
+				width="40"
+				height="28"
+				rx="6"
+				className="ob-ink is-track"
+				style={paper2}
+			/>
+			<rect
+				x="296"
+				y="138"
+				width="40"
+				height="28"
+				rx="6"
+				className="ob-ink is-track"
+				style={{ strokeDasharray: "3 4" }}
+			/>
+		</g>
+
+		<circle cx="26" cy="37" r="2.4" fill="var(--ob-ink-faint)" />
+		<circle cx="35" cy="37" r="2.4" fill="var(--ob-ink-faint)" />
+		<circle cx="44" cy="37" r="2.4" fill="var(--ob-ink-faint)" />
+		<rect x="58" y="30" width="78" height="14" rx="7" style={paper2} />
+		<text
+			x="97"
+			y="40.2"
+			fontSize="8.5"
+			textAnchor="middle"
+			className="ob-label is-soft"
+		>
+			loom.com
+		</text>
+		<path
+			d={LOOM_MARK_PATH}
+			transform="translate(32 67) scale(0.8)"
+			fill="var(--ob-loom)"
+		/>
+		<path
+			d="M 86 88 L 102 97 L 86 106 Z"
+			fill="var(--ob-loom)"
+			opacity="0.85"
+		/>
+
+		<g className="ob-press" style={{ "--at": 0.15 } as CSSProperties}>
+			<text
+				x="63"
+				y="158.6"
+				fontSize="9.5"
+				textAnchor="middle"
+				fontWeight="500"
+				className="ob-label ob-loom-copy-label"
+			>
+				Copy link
+			</text>
+			<g className="ob-loom-copied-label">
+				<path d="M 41 155 L 44.5 158.5 L 50 152" className="ob-ink is-green" />
+				<text
+					x="54"
+					y="158.6"
+					fontSize="9.5"
+					fontWeight="500"
+					fill="var(--ob-green)"
+				>
+					Copied
+				</text>
+			</g>
+		</g>
+
+		<circle cx="204" cy="37" r="6.5" fill="var(--ob-accent)" />
+		<circle cx="204" cy="37" r="4.2" fill="#ADC9FF" />
+		<circle cx="204" cy="37" r="2.8" fill="#fff" />
+		<text x="215" y="40.5" fontSize="10" fontWeight="500" className="ob-label">
+			Cap
+		</text>
+
+		<rect
+			className="ob-loom-input-focus"
+			x="200"
+			y="58"
+			width="136"
+			height="26"
+			rx="8"
+			fill="none"
+			stroke="var(--ob-accent)"
+			strokeWidth="2"
+		/>
+		<text x="209" y="74.4" fontSize="9" className="ob-label">
+			loom.com/share/7f3a2c…
+		</text>
+		<rect
+			className="ob-loom-typed-cover ob-tf-right"
+			x="207"
+			y="62"
+			width="125"
+			height="18"
+			fill="var(--ob-surface)"
+		/>
+		<text
+			x="209"
+			y="74.4"
+			fontSize="9"
+			className="ob-label is-faint ob-loom-placeholder"
+		>
+			Paste a Loom link
+		</text>
+
+		<g className="ob-press" style={{ "--at": 0.61 } as CSSProperties}>
+			<rect
+				x="276"
+				y="92"
+				width="60"
+				height="22"
+				rx="11"
+				fill="var(--ob-ink)"
+			/>
+			<text
+				x="306"
+				y="106.4"
+				fontSize="9.5"
+				fontWeight="500"
+				textAnchor="middle"
+				className="ob-label is-on-ink"
+			>
+				Import
+			</text>
+		</g>
+
+		<text
+			x="200"
+			y="131"
+			fontSize="9"
+			fontWeight="500"
+			className="ob-label is-soft"
+		>
+			My Caps
+		</text>
+		<PlayTriangle x={220} y={152} size={0.9} />
+		<PlayTriangle x={268} y={152} size={0.9} />
+		<g className="ob-loom-slot-fill">
+			<rect
+				x="296"
+				y="138"
+				width="40"
+				height="28"
+				rx="6"
+				fill="var(--ob-loom-soft)"
+				stroke="var(--ob-loom)"
+				strokeWidth="1.6"
+			/>
+			<path
+				pathLength={1}
+				className="ob-ink is-green is-bold ob-loom-check"
+				d="M 307 152 L 313 158 L 325 145"
+			/>
+		</g>
+		<LoopSparks
+			at={0.86}
+			points={[
+				[290, 132, 3],
+				[344, 138, 3.2],
+				[340, 174, 2.6],
+			]}
+		/>
+
+		<g className="ob-loom-flyer">
+			<rect
+				x="-20"
+				y="-14"
+				width="40"
+				height="28"
+				rx="6"
+				fill="color-mix(in srgb, var(--ob-loom) 16%, var(--ob-surface))"
+				stroke="var(--ob-loom)"
+				strokeWidth="1.6"
+			/>
+			<path
+				d={LOOM_MARK_PATH}
+				transform="translate(-16 -10) scale(0.45)"
+				fill="var(--ob-loom)"
+			/>
+			<path d="M -3 -5 L 6 0 L -3 5 Z" fill="var(--ob-loom)" />
+		</g>
+
+		<SceneRipple x={60} y={156} at={0.15} />
+		<SceneRipple x={262} y={71} at={0.43} />
+		<SceneRipple x={306} y={103} at={0.61} />
+		<SceneCursor name="ob-loom-cursor" />
+	</svg>
+);
+
+const SOURCE_GLYPHS = [
+	{
+		label: "Screen",
+		color: "var(--ob-screen)",
+		glyph: "M -5.5 -4 L 5.5 -4 L 5.5 3 L -5.5 3 Z M -2.5 5.8 L 2.5 5.8",
+	},
+	{
+		label: "Camera",
+		color: "var(--ob-camera)",
+		glyph:
+			"M -5.5 -2.8 L -2.8 -2.8 L -1.6 -4.8 L 1.6 -4.8 L 2.8 -2.8 L 5.5 -2.8 L 5.5 4.8 L -5.5 4.8 Z M 0 -0.6 m -2 0 a 2 2 0 1 0 4 0 a 2 2 0 1 0 -4 0",
+	},
+	{
+		label: "Mic",
+		color: "var(--ob-mic)",
+		glyph:
+			"M -2 -5.6 L 2 -5.6 L 2 0.8 Q 2 2.8 0 2.8 Q -2 2.8 -2 0.8 Z M -4.4 0 Q -4.4 4.8 0 4.8 Q 4.4 4.8 4.4 0 M 0 4.8 L 0 6.8",
+	},
+] as const;
+
+const MIC_BARS = Array.from({ length: 16 }, (_, index) => ({
+	id: `bar-${index}`,
+	x: 30 + index * 12,
+	j: index % 7,
+}));
+
+const SCREEN_CARDS = [
+	{ id: "now-1", x: 32, y: 60, tag: "var(--ob-green)", line: 34 },
+	{ id: "now-2", x: 32, y: 84, tag: "var(--ob-green)", line: 24 },
+	{ id: "next-1", x: 92, y: 60, tag: "var(--ob-accent)", line: 30 },
+	{ id: "next-2", x: 92, y: 84, tag: "var(--ob-accent)", line: 38 },
+	{ id: "later-1", x: 152, y: 60, tag: "var(--ob-camera)", line: 28 },
+] as const;
+
+export const RecordScene = () => (
+	<svg viewBox="0 0 360 220" className="ob-scene" aria-hidden="true">
+		<g className="ob-boil">
+			<rect
+				x="18"
+				y="26"
+				width="208"
+				height="128"
+				rx="10"
+				className="ob-ink"
+				style={white}
+			/>
+			<path
+				d="M 108 154 L 104 170 M 136 154 L 140 170 M 92 172 L 152 172"
+				className="ob-ink"
+			/>
+			{SCREEN_CARDS.map((card) => (
+				<g key={card.id}>
+					<rect
+						x={card.x}
+						y={card.y}
+						width="52"
+						height="18"
+						rx="4"
+						fill="var(--ob-surface)"
+						stroke="var(--ob-track-strong)"
+						strokeWidth="1.3"
+					/>
+					<path
+						d={`M ${card.x + 5} ${card.y + 6} L ${card.x + 13} ${card.y + 6}`}
+						stroke={card.tag}
+						strokeWidth="2.2"
+						strokeLinecap="round"
+					/>
+					<path
+						d={`M ${card.x + 5} ${card.y + 12.5} L ${card.x + 5 + card.line} ${card.y + 12.5}`}
+						stroke="var(--ob-ink-faint)"
+						strokeWidth="1.8"
+						strokeLinecap="round"
+					/>
+				</g>
+			))}
+			{SOURCE_GLYPHS.map((source, index) => (
+				<rect
+					key={source.label}
+					x="240"
+					y={30 + index * 36}
+					width="106"
+					height="28"
+					rx="9"
+					className="ob-ink"
+					style={white}
+				/>
+			))}
+		</g>
+
+		<text x="32" y="45" fontSize="8.5" fontWeight="500" className="ob-label">
+			Roadmap
+		</text>
+		{["Now", "Next", "Later"].map((title, index) => (
+			<text
+				key={title}
+				x={33 + index * 60}
+				y="56"
+				fontSize="6.5"
+				fontWeight="500"
+				className="ob-label is-soft"
+			>
+				{title}
+			</text>
+		))}
+
+		{SOURCE_GLYPHS.map((source, index) => {
+			const y = 30 + index * 36;
+			const n = index + 1;
+			return (
+				<g key={source.label}>
+					<rect
+						x="248"
+						y={y + 6}
+						width="16"
+						height="16"
+						rx="5"
+						fill={`color-mix(in srgb, ${source.color} 18%, transparent)`}
+					/>
+					<path
+						d={source.glyph}
+						transform={`translate(256 ${y + 14}) scale(0.85)`}
+						fill="none"
+						stroke={source.color}
+						strokeWidth="1.6"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+					<text
+						x="271"
+						y={y + 17.4}
+						fontSize="9.5"
+						fontWeight="500"
+						className="ob-label"
+					>
+						{source.label}
+					</text>
+					<rect
+						x="316"
+						y={y + 8}
+						width="22"
+						height="12"
+						rx="6"
+						className="ob-rec-switch"
+						style={
+							{
+								"--switch": `ob-rec-switch-${n}`,
+							} as CSSProperties
+						}
+					/>
+					<circle
+						cx="322"
+						cy={y + 14}
+						r="4.3"
+						fill="#fff"
+						className="ob-rec-knob"
+						style={{ "--knob": `ob-rec-knob-${n}` } as CSSProperties}
+					/>
+				</g>
+			);
+		})}
+
+		<g
+			className="ob-rec-start ob-press"
+			style={{ "--at": 0.38 } as CSSProperties}
+		>
+			<rect
+				x="240"
+				y="146"
+				width="106"
+				height="28"
+				rx="14"
+				fill="var(--ob-red)"
+			/>
+			<circle cx="266" cy="160" r="4.5" fill="#fff" />
+			<text
+				x="276"
+				y="163.6"
+				fontSize="10"
+				fontWeight="500"
+				className="ob-label is-white"
+			>
+				Record
+			</text>
+		</g>
+		<g
+			className="ob-rec-stop ob-press"
+			style={{ "--at": 0.7 } as CSSProperties}
+		>
+			<rect
+				x="240"
+				y="146"
+				width="106"
+				height="28"
+				rx="14"
+				fill="var(--ob-ink)"
+			/>
+			<rect
+				x="262"
+				y="156"
+				width="8"
+				height="8"
+				rx="1.6"
+				fill="var(--ob-paper)"
+			/>
+			<text
+				x="276"
+				y="163.6"
+				fontSize="10"
+				fontWeight="500"
+				className="ob-label is-on-ink"
+			>
+				Stop
+			</text>
+		</g>
+
+		<g className="ob-rec-live">
+			<rect
+				x="23"
+				y="31"
+				width="198"
+				height="118"
+				rx="7"
+				fill="none"
+				stroke="var(--ob-red)"
+				strokeWidth="1.6"
+				strokeDasharray="5 4"
+			/>
+			<path
+				className="ob-boil"
+				d="M 88 89 C 92 78 142 76 150 89 C 156 101 137 108 118 108 C 98 108 85 101 88 93"
+				fill="none"
+				stroke="var(--ob-accent)"
+				strokeWidth="1.8"
+				strokeLinecap="round"
+			/>
+			<circle
+				cx="35"
+				cy="139"
+				r="4"
+				fill="var(--ob-red)"
+				className="ob-pulse"
+			/>
+			{["0:01", "0:02", "0:03"].map((time, index) => (
+				<text
+					key={time}
+					x="44"
+					y="142.4"
+					fontSize="9"
+					fontWeight="500"
+					className={
+						index === 2
+							? "ob-label ob-rec-time is-last"
+							: "ob-label ob-rec-time"
+					}
+					style={{ "--at": 0.4 + index * 0.08 } as CSSProperties}
+				>
+					{time}
+				</text>
+			))}
+			<rect
+				x="18"
+				y="184"
+				width="208"
+				height="20"
+				rx="7"
+				fill="color-mix(in srgb, var(--ob-mic) 16%, transparent)"
+			/>
+			{MIC_BARS.map((bar) => (
+				<rect
+					key={bar.id}
+					className="ob-rec-bar"
+					x={bar.x}
+					y="188"
+					width="3.2"
+					height="12"
+					rx="1.6"
+					fill="var(--ob-mic)"
+					style={{ "--j": bar.j } as CSSProperties}
+				/>
+			))}
+		</g>
+
+		<g className="ob-rec-cam ob-tf">
+			<g className="ob-bob">
+				<circle
+					cx="196"
+					cy="122"
+					r="19"
+					fill="color-mix(in srgb, var(--ob-camera) 18%, var(--ob-surface))"
+					stroke="var(--ob-camera)"
+					strokeWidth="1.8"
+				/>
+				<circle
+					cx="196"
+					cy="117"
+					r="6.5"
+					fill="color-mix(in srgb, var(--ob-camera) 55%, var(--ob-surface))"
+				/>
+				<path
+					d="M 181.7 134.5 C 184 127.5 189.5 125.5 196 125.5 C 202.5 125.5 208 127.5 210.3 134.5 A 19 19 0 0 1 181.7 134.5 Z"
+					fill="color-mix(in srgb, var(--ob-camera) 55%, var(--ob-surface))"
+				/>
+			</g>
+		</g>
+
+		<g className="ob-rec-link ob-tf">
+			<g className="ob-boil">
+				<rect
+					x="40"
+					y="58"
+					width="158"
+					height="62"
+					rx="12"
+					className="ob-ink"
+					style={white}
+				/>
+			</g>
+			<circle cx="64" cy="89" r="12" fill="var(--ob-accent)" />
+			<path
+				d="M 60.5 92.5 L 67.5 85.5 M 58.6 89 l -1.8 1.8 a 3.4 3.4 0 0 0 4.8 4.8 l 1.8 -1.8 M 69.4 89 l 1.8 -1.8 a 3.4 3.4 0 0 0 -4.8 -4.8 l -1.8 1.8"
+				fill="none"
+				stroke="#fff"
+				strokeWidth="1.8"
+				strokeLinecap="round"
+			/>
+			<text x="84" y="84.5" fontSize="10" fontWeight="500" className="ob-label">
+				Your link is ready
+			</text>
+			<text x="84" y="99" fontSize="9" className="ob-label is-soft">
+				cap.link/x7k2
+			</text>
+			<g className="ob-press" style={{ "--at": 0.86 } as CSSProperties}>
+				<rect
+					x="150"
+					y="91"
+					width="40"
+					height="18"
+					rx="9"
+					fill="var(--ob-surface)"
+					stroke="var(--ob-ink)"
+					strokeWidth="1.4"
+				/>
+				<text
+					x="170"
+					y="103.2"
+					fontSize="8.5"
+					fontWeight="500"
+					textAnchor="middle"
+					className="ob-label"
+				>
+					Copy
+				</text>
+			</g>
+		</g>
+		<LoopSparks
+			at={0.76}
+			points={[
+				[34, 52, 3.4],
+				[206, 54, 3],
+				[34, 126, 2.6],
+			]}
+		/>
+
+		<SceneRipple x={327} y={44} at={0.17} />
+		<SceneRipple x={327} y={80} at={0.255} />
+		<SceneRipple x={327} y={116} at={0.31} />
+		<SceneRipple x={293} y={160} at={0.38} />
+		<SceneRipple x={293} y={160} at={0.7} />
+		<SceneRipple x={170} y={100} at={0.86} />
+		<SceneCursor name="ob-rec-cursor" />
+	</svg>
+);
+
+const UPLOAD_SQUIGGLE =
+	"M 172 112 q 6 -7 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0";
+
+export const UploadScene = () => (
+	<svg viewBox="0 0 360 220" className="ob-scene" aria-hidden="true">
+		<g className="ob-boil">
+			<rect
+				x="140"
+				y="28"
+				width="204"
+				height="164"
+				rx="16"
+				className="ob-ink is-soft"
+				style={{ fill: "var(--ob-surface-soft)", strokeDasharray: "7 7" }}
+			/>
+		</g>
+		<rect
+			className="ob-up-zone-hot"
+			x="140"
+			y="28"
+			width="204"
+			height="164"
+			rx="16"
+			fill="rgba(71,133,255,0.07)"
+			stroke="var(--ob-accent)"
+			strokeWidth="2"
+			strokeDasharray="7 7"
+		/>
+
+		<g className="ob-up-zone-hint">
+			<g className="ob-boil">
+				<path
+					d="M 242 98 L 242 70 M 230 82 L 242 69 L 254 82"
+					className="ob-ink is-accent is-bold"
+				/>
+				<path
+					d="M 222 104 L 222 110 Q 222 114 226 114 L 258 114 Q 262 114 262 110 L 262 104"
+					className="ob-ink"
+				/>
+			</g>
+			<text
+				x="242"
+				y="138"
+				fontSize="10"
+				textAnchor="middle"
+				className="ob-label is-soft"
+			>
+				Drop a video
+			</text>
+		</g>
+
+		<g className="ob-up-progress-group">
+			<text
+				x="242"
+				y="94"
+				fontSize="9.5"
+				textAnchor="middle"
+				className="ob-label is-soft"
+			>
+				Uploading
+			</text>
+			<path
+				className="ob-squiggle-track"
+				pathLength={100}
+				d={UPLOAD_SQUIGGLE}
+			/>
+			<path
+				className="ob-up-progress"
+				pathLength={100}
+				d={UPLOAD_SQUIGGLE}
+				fill="none"
+				stroke="var(--ob-accent)"
+				strokeWidth="3.2"
+				strokeLinecap="round"
+			/>
+		</g>
+
+		<g className="ob-up-done ob-tf">
+			<g className="ob-boil">
+				<rect
+					x="166"
+					y="92"
+					width="152"
+					height="36"
+					rx="18"
+					className="ob-ink"
+					style={white}
+				/>
+			</g>
+			<circle cx="186" cy="110" r="10" fill="var(--ob-green)" />
+			<path
+				d="M 181.5 110 L 185 113.5 L 191 106.5"
+				fill="none"
+				stroke="#fff"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<text
+				x="203"
+				y="113.6"
+				fontSize="10"
+				fontWeight="500"
+				className="ob-label"
+			>
+				cap.link/q4m9
+			</text>
+			<text
+				x="242"
+				y="150"
+				fontSize="9.5"
+				textAnchor="middle"
+				className="ob-label is-soft"
+			>
+				Ready to share
+			</text>
+		</g>
+		<LoopSparks
+			at={0.72}
+			points={[
+				[160, 84, 3.2],
+				[328, 90, 3],
+				[322, 138, 2.6],
+			]}
+		/>
+
+		<g className="ob-boil">
+			<path
+				d="M 20 150 L 38 150 L 44 156 L 92 156 L 92 198 L 20 198 Z"
+				className="ob-ink"
+				style={paper2}
+			/>
+			<path d="M 20 164 L 92 164" className="ob-ink is-track" />
+		</g>
+		<text
+			x="56"
+			y="213"
+			fontSize="8.5"
+			textAnchor="middle"
+			className="ob-label is-soft"
+		>
+			Your files
+		</text>
+
+		<g className="ob-up-file">
+			<g className="ob-boil">
+				<path
+					d="M -22 -30 L 10 -30 L 22 -18 L 22 30 L -22 30 Z"
+					className="ob-ink"
+					style={white}
+				/>
+				<path d="M 10 -30 L 10 -18 L 22 -18" className="ob-ink" />
+			</g>
+			<path
+				d="M -6 -7 L 8 1 L -6 9 Z"
+				fill="var(--ob-accent-soft)"
+				stroke="var(--ob-accent)"
+				strokeWidth="1.6"
+				strokeLinejoin="round"
+			/>
+			<text
+				x="0"
+				y="44"
+				fontSize="8.5"
+				textAnchor="middle"
+				className="ob-label is-soft"
+			>
+				demo.mp4
+			</text>
+		</g>
+
+		<SceneRipple x={66} y={108} at={0.05} />
+		<SceneRipple x={252} y={120} at={0.31} r={16} />
+		<SceneCursor name="ob-up-cursor" />
+	</svg>
+);
+
+const TEAM = [
+	{ initial: "A", fill: "var(--ob-team-1)" },
+	{ initial: "M", fill: "var(--ob-team-2)" },
+	{ initial: "J", fill: "var(--ob-team-3)" },
+] as const;
+
+const LIBRARY = Array.from({ length: 6 }, (_, index) => ({
+	id: `thumb-${index}`,
+	x: 214 + (index % 3) * 44,
+	y: index < 3 ? 110 : 148,
+	highlight: index === 5,
+	j: index,
+}));
+
+const truncate = (value: string, max: number) =>
+	value.length > max ? `${value.slice(0, max - 1).trimEnd()}…` : value;
+
+export const JoinScene = ({
+	organizationName,
+	initial,
+}: {
+	organizationName: string;
+	initial: string;
+}) => (
+	<svg viewBox="0 0 360 220" className="ob-scene" aria-hidden="true">
+		<g className="ob-boil">
+			<path
+				className="ob-ink ob-join-flap-open"
+				d="M 40 114 L 110 74 L 180 114"
+				style={white}
+			/>
+		</g>
+
+		<g className="ob-join-card">
+			<g className="ob-boil">
+				<rect
+					x="52"
+					y="30"
+					width="116"
+					height="78"
+					rx="10"
+					className="ob-ink"
+					style={white}
+				/>
+			</g>
+			<circle
+				cx="72"
+				cy="52"
+				r="10"
+				fill="var(--ob-accent-soft)"
+				stroke="var(--ob-accent)"
+				strokeWidth="1.4"
+			/>
+			<text
+				x="72"
+				y="55.6"
+				fontSize="10"
+				fontWeight="500"
+				textAnchor="middle"
+				fill="var(--ob-accent)"
+			>
+				{organizationName.trim().charAt(0).toUpperCase() || "C"}
+			</text>
+			<text x="88" y="51" fontSize="9.5" fontWeight="500" className="ob-label">
+				{truncate(organizationName, 13)}
+			</text>
+			<text x="88" y="63" fontSize="8.5" className="ob-label is-soft">
+				on Cap
+			</text>
+			<g className="ob-press" style={{ "--at": 0.27 } as CSSProperties}>
+				<rect
+					x="66"
+					y="76"
+					width="88"
+					height="22"
+					rx="11"
+					fill="var(--ob-ink)"
+				/>
+				<text
+					x="110"
+					y="90.4"
+					fontSize="9.5"
+					fontWeight="500"
+					textAnchor="middle"
+					className="ob-label is-on-ink"
+				>
+					Join
+				</text>
+			</g>
+		</g>
+
+		<g className="ob-boil">
+			<rect
+				x="40"
+				y="112"
+				width="140"
+				height="80"
+				rx="8"
+				className="ob-ink"
+				style={white}
+			/>
+			<path
+				d="M 40 190 L 98 150 M 180 190 L 122 150"
+				className="ob-ink is-track"
+			/>
+			<path
+				className="ob-ink ob-join-flap-closed"
+				d="M 42 116 L 110 158 L 178 116"
+			/>
+			{TEAM.map((member, index) => (
+				<circle
+					key={member.initial}
+					cx={222 + index * 28}
+					cy="56"
+					r="13"
+					className="ob-ink"
+					style={{ fill: member.fill }}
+				/>
+			))}
+			{LIBRARY.map((thumb) => (
+				<rect
+					key={thumb.id}
+					className="ob-ink ob-join-thumb ob-tf"
+					x={thumb.x}
+					y={thumb.y}
+					width="38"
+					height="30"
+					rx="6"
+					style={
+						{
+							fill: thumb.highlight
+								? "var(--ob-accent-soft)"
+								: "var(--ob-paper-2)",
+							stroke: thumb.highlight ? "var(--ob-accent)" : undefined,
+							"--j": thumb.j,
+						} as CSSProperties
+					}
+				/>
+			))}
+		</g>
+
+		{TEAM.map((member, index) => (
+			<text
+				key={member.initial}
+				x={222 + index * 28}
+				y="59.6"
+				fontSize="10"
+				fontWeight="500"
+				textAnchor="middle"
+				className="ob-label"
+			>
+				{member.initial}
+			</text>
+		))}
+		<g className="ob-join-you ob-tf">
+			<circle
+				cx="306"
+				cy="56"
+				r="13"
+				fill="var(--ob-accent)"
+				stroke="var(--ob-ink)"
+				strokeWidth="2"
+			/>
+			<text
+				x="306"
+				y="59.6"
+				fontSize="10"
+				fontWeight="500"
+				textAnchor="middle"
+				className="ob-label is-white"
+			>
+				{initial}
+			</text>
+		</g>
+		<g className="ob-join-you-label">
+			<path d="M 233 85 L 236.5 88.5 L 242 82" className="ob-ink is-green" />
+			<text x="247" y="89" fontSize="9.5" fontWeight="500" className="ob-label">
+				You're in the team
+			</text>
+		</g>
+		<LoopSparks
+			at={0.42}
+			points={[
+				[300, 30, 3],
+				[332, 42, 3],
+				[330, 76, 2.6],
+			]}
+		/>
+		{LIBRARY.map((thumb) => (
+			<g
+				key={thumb.id}
+				className="ob-join-thumb ob-tf"
+				style={{ "--j": thumb.j } as CSSProperties}
+			>
+				<PlayTriangle
+					x={thumb.x + 19}
+					y={thumb.y + 15}
+					size={0.8}
+					color={thumb.highlight ? "var(--ob-accent)" : "var(--ob-ink-faint)"}
+				/>
+			</g>
+		))}
+		<g className="ob-join-thumb" style={{ "--j": 5 } as CSSProperties}>
+			<circle
+				cx="346"
+				cy="150"
+				r="3"
+				fill="var(--ob-red)"
+				className="ob-pulse"
+			/>
+		</g>
+		<g className="ob-join-thumb" style={{ "--j": 0 } as CSSProperties}>
+			<text
+				x="214"
+				y="200"
+				fontSize="9"
+				fontWeight="500"
+				className="ob-label is-soft"
+			>
+				Team library
+			</text>
+		</g>
+
+		<SceneRipple x={110} y={87} at={0.27} />
+		<SceneCursor name="ob-join-cursor" />
+	</svg>
+);
+
+export const LoomToCapDoodle = () => (
+	<svg
+		viewBox="0 0 120 90"
+		className="h-auto w-full overflow-visible"
+		aria-hidden="true"
+	>
+		<path
+			d={LOOM_MARK_PATH}
+			transform="translate(10 30) scale(1.9)"
+			fill="var(--ob-loom)"
+		/>
+		<g className="ob-boil">
+			<g className="ob-doodle-hover">
+				<path
+					pathLength={1}
+					className="ob-ink is-bold ob-draw"
+					style={{ "--d": "0.25s" } as CSSProperties}
+					d="M 46 38 C 56 22 70 22 79 35"
+				/>
+				<path
+					pathLength={1}
+					className="ob-ink is-bold ob-draw"
+					style={{ "--d": "0.8s" } as CSSProperties}
+					d="M 70 34 L 79.5 36 L 80 26.5"
+				/>
+			</g>
+		</g>
+		<circle cx="97" cy="46" r="15" fill="var(--ob-accent)" />
+		<circle cx="97" cy="46" r="10" fill="#ADC9FF" />
+		<circle cx="97" cy="46" r="6.5" fill="#fff" />
+	</svg>
+);
+
+export const RecordDoodle = () => (
+	<svg
+		viewBox="0 0 120 90"
+		className="h-auto w-full overflow-visible"
+		aria-hidden="true"
+	>
+		<g className="ob-boil">
+			<rect
+				pathLength={1}
+				className="ob-ink is-bold ob-draw"
+				x="14"
+				y="12"
+				width="76"
+				height="52"
+				rx="7"
+			/>
+			<path
+				pathLength={1}
+				className="ob-ink is-bold ob-draw"
+				style={{ "--d": "0.5s" } as CSSProperties}
+				d="M 46 64 L 43 76 M 58 64 L 61 76 M 36 77 L 68 77"
+			/>
+		</g>
+		<circle cx="28" cy="25" r="4.5" fill="var(--ob-red)" className="ob-pulse" />
+		<g className="ob-doodle-hover">
+			<g className="ob-bob">
+				<circle
+					cx="92"
+					cy="60"
+					r="14"
+					fill="color-mix(in srgb, var(--ob-camera) 18%, var(--ob-surface))"
+					stroke="var(--ob-camera)"
+					strokeWidth="2.2"
+				/>
+				<circle
+					cx="92"
+					cy="56.5"
+					r="4.6"
+					fill="color-mix(in srgb, var(--ob-camera) 55%, var(--ob-surface))"
+				/>
+				<path
+					d="M 79.4 66 C 81.5 61.5 86 59.8 92 59.8 C 98 59.8 102.5 61.5 104.6 66 A 14 14 0 0 1 79.4 66 Z"
+					fill="color-mix(in srgb, var(--ob-camera) 55%, var(--ob-surface))"
+				/>
+			</g>
+		</g>
+	</svg>
+);
+
+export const UploadDoodle = () => (
+	<svg
+		viewBox="0 0 120 90"
+		className="h-auto w-full overflow-visible"
+		aria-hidden="true"
+	>
+		<g className="ob-boil">
+			<path
+				pathLength={1}
+				className="ob-ink is-bold ob-draw"
+				d="M 38 10 L 66 10 L 82 26 L 82 80 L 38 80 Z"
+			/>
+			<path
+				pathLength={1}
+				className="ob-ink is-bold ob-draw"
+				style={{ "--d": "0.5s" } as CSSProperties}
+				d="M 66 10 L 66 26 L 82 26"
+			/>
+			<g className="ob-fade" style={{ "--d": "0.7s" } as CSSProperties}>
+				<g className="ob-bob ob-doodle-hover">
+					<path
+						className="ob-ink is-accent is-bold"
+						d="M 60 66 L 60 40 M 50 50 L 60 39 L 70 50"
+					/>
+				</g>
+			</g>
+		</g>
+	</svg>
+);
+
+export const DoneDoodle = () => (
+	<svg
+		viewBox="0 0 64 64"
+		className="h-auto w-14 overflow-visible"
+		aria-hidden="true"
+	>
+		<g className="ob-boil">
+			<path
+				pathLength={1}
+				className="ob-ink is-green ob-draw"
+				style={{ "--d": "0.05s", strokeWidth: 2.6 } as CSSProperties}
+				d="M 33 5 C 49 5 59 16 59 31 C 59 47 47 59 32 59 C 16 59 5 47 5 32 C 5 18 15 6 30 5.2"
+			/>
+			<path
+				pathLength={1}
+				className="ob-ink is-green ob-draw"
+				style={{ "--d": "0.6s", strokeWidth: 3.4 } as CSSProperties}
+				d="M 20 33 L 28.5 41.5 L 44.5 24"
+			/>
+		</g>
+	</svg>
+);
diff --git a/apps/web/app/(org)/onboarding/components/use-get-started.ts b/apps/web/app/(org)/onboarding/components/use-get-started.ts
new file mode 100644
index 00000000000..be7e3bcf7d1
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/use-get-started.ts
@@ -0,0 +1,56 @@
+"use client";
+
+import type { User } from "@cap/web-domain";
+import Cookies from "js-cookie";
+import { useCallback, useEffect, useRef } from "react";
+import { trackEvent } from "@/app/utils/analytics";
+import { useEffectMutation, useRpcClient } from "@/lib/EffectRuntime";
+import { clearOnboardingNextPath } from "../../onboarding-next";
+import { THEME_COOKIE } from "../onboarding-flow";
+
+const carryThemeToDashboard = () => {
+	if (Cookies.get(THEME_COOKIE)) return;
+	if (!window.matchMedia("(prefers-color-scheme: dark)").matches) return;
+	Cookies.set(THEME_COOKIE, "dark", { expires: 365 });
+};
+
+export const useGetStarted = (
+	initiallyComplete: boolean,
+	autoCompletePath?: User.OnboardingStartPath,
+) => {
+	const rpc = useRpcClient();
+	const completeRef = useRef(initiallyComplete);
+	const pendingRef = useRef<Promise<void> | null>(null);
+
+	const { mutateAsync, isPending } = useEffectMutation({
+		mutationFn: (path: User.OnboardingStartPath) =>
+			rpc.UserCompleteOnboardingStep({ step: "getStarted", data: { path } }),
+	});
+
+	const complete = useCallback(
+		async (path: User.OnboardingStartPath) => {
+			if (completeRef.current) return;
+			if (!pendingRef.current) {
+				pendingRef.current = mutateAsync(path)
+					.then(() => {
+						completeRef.current = true;
+						clearOnboardingNextPath();
+						carryThemeToDashboard();
+						trackEvent("onboarding_completed", { path });
+					})
+					.finally(() => {
+						pendingRef.current = null;
+					});
+			}
+			await pendingRef.current;
+		},
+		[mutateAsync],
+	);
+
+	useEffect(() => {
+		if (!autoCompletePath) return;
+		complete(autoCompletePath).catch(() => undefined);
+	}, [autoCompletePath, complete]);
+
+	return { complete, isCompleting: isPending };
+};
diff --git a/apps/web/app/(org)/onboarding/components/use-upgrade-confirmation.ts b/apps/web/app/(org)/onboarding/components/use-upgrade-confirmation.ts
new file mode 100644
index 00000000000..c1848b0b109
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/components/use-upgrade-confirmation.ts
@@ -0,0 +1,34 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+const POLL_INTERVAL_MS = 2500;
+const MAX_POLLS = 12;
+
+export const useUpgradeConfirmation = ({
+	justUpgraded,
+	isPro,
+}: {
+	justUpgraded: boolean;
+	isPro: boolean;
+}) => {
+	const router = useRouter();
+	const [awaiting] = useState(justUpgraded && !isPro);
+	const [polls, setPolls] = useState(0);
+	const pending = awaiting && !isPro;
+
+	useEffect(() => {
+		if (!pending || polls >= MAX_POLLS) return;
+		const timer = window.setTimeout(() => {
+			router.refresh();
+			setPolls((count) => count + 1);
+		}, POLL_INTERVAL_MS);
+		return () => window.clearTimeout(timer);
+	}, [pending, polls, router]);
+
+	return {
+		waiting: pending && polls < MAX_POLLS,
+		timedOut: pending && polls >= MAX_POLLS,
+	};
+};
diff --git a/apps/web/app/(org)/onboarding/layout.tsx b/apps/web/app/(org)/onboarding/layout.tsx
index 01164bbc2dd..a8d24995ca9 100644
--- a/apps/web/app/(org)/onboarding/layout.tsx
+++ b/apps/web/app/(org)/onboarding/layout.tsx
@@ -1,6 +1,15 @@
+import "./onboarding.css";
 import { getCurrentUser } from "@cap/database/auth/session";
-import Bottom from "./components/Bottom";
-import Stepper from "./components/Stepper";
+import type { Metadata } from "next";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { OnboardingHeader } from "./components/OnboardingHeader";
+import { PaperRoot } from "./components/PaperRoot";
+import { onboardingThemeFromCookie, THEME_COOKIE } from "./onboarding-flow";
+
+export const metadata: Metadata = {
+	title: "Get started — Cap",
+};
 
 export default async function OnboardingLayout({
 	children,
@@ -8,13 +17,15 @@ export default async function OnboardingLayout({
 	children: React.ReactNode;
 }) {
 	const user = await getCurrentUser();
-	const completedSteps = user?.onboardingSteps || {};
+	if (!user) redirect("/login");
+	const theme = onboardingThemeFromCookie(
+		(await cookies()).get(THEME_COOKIE)?.value,
+	);
 
 	return (
-		<div className="flex relative flex-col justify-center items-center px-5 py-10 w-full custom-scroll min-h-fit lg:min-h-auto h-dvh bg-gray-1">
-			<Stepper completedSteps={completedSteps} />
-			{children}
-			<Bottom />
-		</div>
+		<PaperRoot initialTheme={theme}>
+			<OnboardingHeader email={user.email} />
+			<main className="flex flex-1 flex-col">{children}</main>
+		</PaperRoot>
 	);
 }
diff --git a/apps/web/app/(org)/onboarding/onboarding-flow.ts b/apps/web/app/(org)/onboarding/onboarding-flow.ts
new file mode 100644
index 00000000000..f3120bcb734
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/onboarding-flow.ts
@@ -0,0 +1,170 @@
+export const ONBOARDING_PATH_STEPS = ["loom", "record", "upload"] as const;
+export type OnboardingPathStep = (typeof ONBOARDING_PATH_STEPS)[number];
+
+export const ONBOARDING_STEPS = [
+	"welcome",
+	"start",
+	...ONBOARDING_PATH_STEPS,
+] as const;
+export type OnboardingStep = (typeof ONBOARDING_STEPS)[number];
+
+export const ONBOARDING_NEXT_COOKIE = "cap_onboarding_next";
+export const THEME_COOKIE = "theme";
+
+export type OnboardingThemePreference = "light" | "dark" | "system";
+
+export const onboardingThemeFromCookie = (
+	value: string | undefined,
+): OnboardingThemePreference =>
+	value === "light" || value === "dark" ? value : "system";
+
+export const resolveOnboardingTheme = (
+	preference: OnboardingThemePreference,
+	systemPrefersDark: boolean,
+) =>
+	preference === "system" ? (systemPrefersDark ? "dark" : "light") : preference;
+
+const LEGACY_STEP_REDIRECTS: Record<string, OnboardingStep> = {
+	"organization-setup": "start",
+	"custom-domain": "start",
+	"invite-team": "start",
+	download: "record",
+};
+
+type OnboardingUser = {
+	name: string | null;
+	onboardingSteps: { getStarted?: boolean } | null;
+};
+
+export const hasOnboardingName = (user: Pick<OnboardingUser, "name">) =>
+	Boolean(user.name?.trim());
+
+export const needsOnboarding = (user: OnboardingUser) =>
+	!hasOnboardingName(user) || user.onboardingSteps?.getStarted === false;
+
+export const isOnboardingStep = (value: string): value is OnboardingStep =>
+	(ONBOARDING_STEPS as readonly string[]).includes(value);
+
+export type OnboardingStepResolution =
+	| { kind: "render"; step: OnboardingStep }
+	| { kind: "redirect"; step: OnboardingStep };
+
+export const resolveOnboardingStep = (
+	requested: string | undefined,
+	user: Pick<OnboardingUser, "name">,
+): OnboardingStepResolution => {
+	if (!hasOnboardingName(user)) {
+		return requested === "welcome"
+			? { kind: "render", step: "welcome" }
+			: { kind: "redirect", step: "welcome" };
+	}
+
+	if (requested === undefined || requested === "welcome") {
+		return { kind: "redirect", step: "start" };
+	}
+
+	const legacy = LEGACY_STEP_REDIRECTS[requested];
+	if (legacy) return { kind: "redirect", step: legacy };
+
+	if (isOnboardingStep(requested)) return { kind: "render", step: requested };
+
+	return { kind: "redirect", step: "start" };
+};
+
+export type OnboardingIntent =
+	| { kind: "loom"; loomUrl?: string; bulk: boolean }
+	| { kind: "upload" }
+	| { kind: "record" }
+	| { kind: "elsewhere"; path: string };
+
+const INTENT_BASE = "http://cap.invalid";
+
+export const onboardingIntentFromNextPath = (
+	nextPath: string | null | undefined,
+): OnboardingIntent | null => {
+	if (!nextPath) return null;
+
+	let url: URL;
+	try {
+		url = new URL(nextPath, INTENT_BASE);
+	} catch {
+		return null;
+	}
+	if (url.origin !== INTENT_BASE) return null;
+
+	const pathname = url.pathname.replace(/\/+$/, "") || "/";
+
+	if (pathname === "/dashboard/import/loom") {
+		return {
+			kind: "loom",
+			loomUrl: url.searchParams.get("url")?.trim() || undefined,
+			bulk: url.searchParams.get("mode") === "csv",
+		};
+	}
+	if (pathname === "/dashboard/import" || pathname === "/dashboard/import/file")
+		return { kind: "upload" };
+	if (pathname === "/dashboard/caps/record") return { kind: "record" };
+	if (
+		pathname === "/" ||
+		pathname === "/dashboard" ||
+		pathname === "/dashboard/caps" ||
+		pathname.startsWith("/onboarding") ||
+		pathname.startsWith("/invite/")
+	)
+		return null;
+
+	return {
+		kind: "elsewhere",
+		path: `${url.pathname}${url.search}${url.hash}`,
+	};
+};
+
+export const onboardingStepHref = (
+	step: OnboardingStep,
+	params?: Record<string, string | undefined>,
+) => {
+	const query = new URLSearchParams();
+	for (const [key, value] of Object.entries(params ?? {})) {
+		if (value) query.set(key, value);
+	}
+	const search = query.toString();
+	return `/onboarding/${step}${search ? `?${search}` : ""}`;
+};
+
+export const onboardingHrefForIntent = (intent: OnboardingIntent | null) => {
+	switch (intent?.kind) {
+		case "loom":
+			return onboardingStepHref("loom", {
+				url: intent.loomUrl,
+				bulk: intent.bulk ? "1" : undefined,
+			});
+		case "upload":
+			return onboardingStepHref("upload");
+		case "record":
+			return onboardingStepHref("record");
+		default:
+			return onboardingStepHref("start");
+	}
+};
+
+export const onboardingContinuePath = (intent: OnboardingIntent | null) =>
+	intent?.kind === "elsewhere" ? intent.path : "/dashboard/caps";
+
+export const onboardingProgressIndex = (step: OnboardingStep) =>
+	step === "welcome" ? 0 : step === "start" ? 1 : 2;
+
+export const ONBOARDING_PROGRESS_TOTAL = 3;
+
+export const splitFullName = (fullName: string) => {
+	const [firstName = "", ...rest] = fullName.trim().split(/\s+/);
+	return { firstName, lastName: rest.join(" ") };
+};
+
+export const maskEmail = (email: string) => {
+	const at = email.lastIndexOf("@");
+	if (at <= 0) return email;
+	const local = email.slice(0, at);
+	const visible = local.length > 4 ? 2 : 1;
+	const hidden = Math.min(5, Math.max(3, local.length - visible));
+	return `${local.slice(0, visible)}${"•".repeat(hidden)}${email.slice(at)}`;
+};
diff --git a/apps/web/app/(org)/onboarding/onboarding.css b/apps/web/app/(org)/onboarding/onboarding.css
new file mode 100644
index 00000000000..13b18e5ceb8
--- /dev/null
+++ b/apps/web/app/(org)/onboarding/onboarding.css
@@ -0,0 +1,1562 @@
+.cap-ob {
+	--ob-paper: #fbfaf7;
+	--ob-paper-2: #f4f2ec;
+	--ob-surface: #ffffff;
+	--ob-surface-soft: rgba(255, 255, 255, 0.65);
+	--ob-card: rgba(255, 255, 255, 0.78);
+	--ob-dot: rgba(32, 36, 44, 0.075);
+	--ob-cta-hover: #343944;
+	--ob-shadow: rgba(32, 36, 44, 0.45);
+	--ob-ink: #20242c;
+	--ob-ink-2: #4a4f59;
+	--ob-ink-soft: #6b6f78;
+	--ob-ink-faint: #a9acb3;
+	--ob-track: #e4e1d9;
+	--ob-track-strong: #d3cfc4;
+	--ob-accent: #4785ff;
+	--ob-accent-soft: rgba(71, 133, 255, 0.14);
+	--ob-red: #e5484d;
+	--ob-green: #2f9e69;
+	--ob-loom: #625df5;
+	--ob-loom-soft: rgba(98, 93, 245, 0.14);
+	--ob-screen: #3b82f6;
+	--ob-camera: #8b5cf6;
+	--ob-mic: #22c55e;
+	--ob-team-1: color-mix(in srgb, #f59e0b 24%, var(--ob-surface));
+	--ob-team-2: color-mix(in srgb, #3b82f6 22%, var(--ob-surface));
+	--ob-team-3: color-mix(in srgb, #22c55e 22%, var(--ob-surface));
+	position: relative;
+	min-height: 100dvh;
+	background-color: var(--ob-paper);
+	background-image: radial-gradient(var(--ob-dot) 1px, transparent 1.2px);
+	background-size: 22px 22px;
+	color: var(--ob-ink);
+	color-scheme: light;
+	-webkit-font-smoothing: antialiased;
+	transition:
+		background-color 0.3s ease,
+		color 0.3s ease;
+}
+
+.cap-ob[data-theme="dark"] {
+	--ob-paper: #161618;
+	--ob-paper-2: #1f1f22;
+	--ob-surface: #232327;
+	--ob-surface-soft: rgba(38, 38, 43, 0.6);
+	--ob-card: rgba(32, 32, 36, 0.82);
+	--ob-dot: rgba(238, 236, 230, 0.06);
+	--ob-cta-hover: #ffffff;
+	--ob-shadow: rgba(0, 0, 0, 0.7);
+	--ob-ink: #eeece6;
+	--ob-ink-2: #cfcdc7;
+	--ob-ink-soft: #a09fa6;
+	--ob-ink-faint: #67666e;
+	--ob-track: #2e2e33;
+	--ob-track-strong: #45454c;
+	--ob-accent: #6c9eff;
+	--ob-accent-soft: rgba(108, 158, 255, 0.18);
+	--ob-red: #ff6369;
+	--ob-green: #3dd68c;
+	--ob-loom: #8d89ff;
+	--ob-loom-soft: rgba(141, 137, 255, 0.18);
+	color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+	.cap-ob[data-theme="system"] {
+		--ob-paper: #161618;
+		--ob-paper-2: #1f1f22;
+		--ob-surface: #232327;
+		--ob-surface-soft: rgba(38, 38, 43, 0.6);
+		--ob-card: rgba(32, 32, 36, 0.82);
+		--ob-dot: rgba(238, 236, 230, 0.06);
+		--ob-cta-hover: #ffffff;
+		--ob-shadow: rgba(0, 0, 0, 0.7);
+		--ob-ink: #eeece6;
+		--ob-ink-2: #cfcdc7;
+		--ob-ink-soft: #a09fa6;
+		--ob-ink-faint: #67666e;
+		--ob-track: #2e2e33;
+		--ob-track-strong: #45454c;
+		--ob-accent: #6c9eff;
+		--ob-accent-soft: rgba(108, 158, 255, 0.18);
+		--ob-red: #ff6369;
+		--ob-green: #3dd68c;
+		--ob-loom: #8d89ff;
+		--ob-loom-soft: rgba(141, 137, 255, 0.18);
+		color-scheme: dark;
+	}
+}
+
+.ob-when-dark {
+	display: none;
+}
+.cap-ob[data-theme="dark"] .ob-when-dark {
+	display: inline-flex;
+}
+.cap-ob[data-theme="dark"] .ob-when-light {
+	display: none;
+}
+@media (prefers-color-scheme: dark) {
+	.cap-ob[data-theme="system"] .ob-when-dark {
+		display: inline-flex;
+	}
+	.cap-ob[data-theme="system"] .ob-when-light {
+		display: none;
+	}
+}
+.ob-when-light {
+	display: inline-flex;
+}
+
+.ob-theme-toggle {
+	display: inline-flex;
+	width: 36px;
+	height: 36px;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	border: 1.5px solid var(--ob-track);
+	border-radius: 999px;
+	background: var(--ob-surface-soft);
+	color: var(--ob-ink);
+	cursor: pointer;
+	transition:
+		border-color 0.18s ease,
+		background 0.18s ease,
+		transform 0.18s ease;
+}
+.ob-theme-toggle:active {
+	transform: scale(0.94);
+}
+.ob-theme-icon {
+	animation: ob-theme-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.ob-wave {
+	display: inline-block;
+	transform-origin: 70% 80%;
+	animation: ob-wave 1.9s ease-in-out 0.35s 2 both;
+}
+
+.cap-ob ::selection {
+	background: var(--ob-accent-soft);
+}
+
+.ob-card {
+	border: 1.5px solid var(--ob-track);
+	border-radius: 22px;
+	background: var(--ob-card);
+	backdrop-filter: blur(6px);
+}
+
+.ob-scene-frame {
+	border-radius: 16px;
+	background: var(--ob-paper-2);
+	box-shadow: inset 0 0 0 1.5px var(--ob-track);
+}
+
+.ob-cta {
+	display: inline-flex;
+	min-height: 48px;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	border: 1.5px solid var(--ob-ink);
+	border-radius: 999px;
+	padding: 0 22px;
+	background: var(--ob-ink);
+	color: var(--ob-paper);
+	font-size: 15px;
+	font-weight: 500;
+	line-height: 1;
+	white-space: nowrap;
+	cursor: pointer;
+	transition:
+		transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
+		background 0.18s ease,
+		color 0.18s ease,
+		border-color 0.18s ease,
+		opacity 0.18s ease;
+}
+@media (hover: hover) {
+	.ob-theme-toggle:hover {
+		border-color: var(--ob-ink);
+		background: var(--ob-surface);
+	}
+	.ob-greeting:hover .ob-wave {
+		animation: ob-wave 1.9s ease-in-out infinite;
+	}
+	.ob-cta:hover:not(:disabled) {
+		background: var(--ob-cta-hover);
+		border-color: var(--ob-cta-hover);
+	}
+	.ob-cta.is-outline:hover:not(:disabled) {
+		background: var(--ob-ink);
+		color: var(--ob-paper);
+		border-color: var(--ob-ink);
+	}
+	.ob-cta.is-quiet:hover:not(:disabled) {
+		border-color: var(--ob-ink);
+		background: var(--ob-surface);
+	}
+	.ob-cta:hover:not(:disabled) .ob-cta-arrow {
+		transform: translateX(3px);
+	}
+	.ob-link:hover {
+		color: var(--ob-ink);
+		text-decoration-color: var(--ob-ink);
+	}
+	.ob-choice:hover {
+		transform: translateY(-3px);
+		border-color: var(--ob-ink);
+		background: var(--ob-surface);
+		box-shadow: 0 18px 36px -26px var(--ob-shadow);
+	}
+	.ob-choice:hover .ob-doodle-hover {
+		animation: ob-bob 1.2s ease-in-out infinite;
+	}
+	.ob-choice:hover .ob-choice-arrow {
+		transform: translateX(4px);
+		color: var(--ob-ink);
+	}
+	.ob-drop:hover:not(:disabled) .ob-drop-outline {
+		border-color: var(--ob-accent);
+	}
+}
+.ob-touch-only {
+	display: none;
+}
+@media (hover: none) and (pointer: coarse) {
+	.ob-touch-only {
+		display: inline;
+	}
+	.ob-pointer-only {
+		display: none;
+	}
+}
+.ob-cta:active:not(:disabled) {
+	transform: scale(0.98);
+}
+.ob-cta:disabled {
+	cursor: not-allowed;
+	opacity: 0.45;
+}
+.ob-cta.is-outline {
+	background: transparent;
+	color: var(--ob-ink);
+}
+.ob-cta.is-quiet {
+	border-color: var(--ob-track-strong);
+	background: var(--ob-surface-soft);
+	color: var(--ob-ink);
+}
+.ob-cta.is-small {
+	min-height: 40px;
+	padding: 0 16px;
+	font-size: 14px;
+}
+.ob-cta .ob-cta-arrow {
+	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.ob-focus:focus-visible,
+.ob-cta:focus-visible,
+.ob-link:focus-visible {
+	outline: 2px solid var(--ob-accent);
+	outline-offset: 3px;
+}
+
+.ob-link {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	border-radius: 6px;
+	color: var(--ob-ink-2);
+	font-size: 14px;
+	font-weight: 500;
+	text-decoration: underline;
+	text-decoration-color: var(--ob-track-strong);
+	text-decoration-thickness: 1.5px;
+	text-underline-offset: 5px;
+	transition:
+		color 0.18s ease,
+		text-decoration-color 0.18s ease;
+}
+
+.ob-input {
+	width: 100%;
+	min-height: 56px;
+	border: 1.5px solid var(--ob-track-strong);
+	border-radius: 16px;
+	padding: 0 18px;
+	background: var(--ob-surface);
+	color: var(--ob-ink);
+	font-size: 17px;
+	transition:
+		border-color 0.18s ease,
+		box-shadow 0.18s ease;
+}
+.ob-input::placeholder {
+	color: var(--ob-ink-faint);
+}
+.ob-input:focus {
+	outline: none;
+	border-color: var(--ob-ink);
+	box-shadow: 0 0 0 4px var(--ob-accent-soft);
+}
+.ob-input[aria-invalid="true"] {
+	border-color: var(--ob-red);
+}
+
+.ob-choice {
+	position: relative;
+	display: flex;
+	border: 1.5px solid var(--ob-track);
+	border-radius: 22px;
+	background: var(--ob-card);
+	text-align: left;
+	transition:
+		transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
+		border-color 0.18s ease,
+		box-shadow 0.22s ease,
+		background 0.18s ease;
+}
+.ob-choice:active {
+	transform: translateY(-1px) scale(0.995);
+}
+.ob-choice:focus-visible {
+	outline: 2px solid var(--ob-accent);
+	outline-offset: 3px;
+}
+.ob-choice .ob-choice-arrow {
+	transition:
+		transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+		color 0.18s ease;
+}
+
+.ob-drop {
+	position: relative;
+	display: flex;
+	width: 100%;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+	background: var(--ob-surface-soft);
+	text-align: center;
+	transition: background 0.18s ease;
+}
+.ob-drop[data-over="true"] {
+	background: rgba(71, 133, 255, 0.06);
+}
+.ob-drop-outline {
+	position: absolute;
+	inset: 0;
+	border: 2px dashed var(--ob-track-strong);
+	border-radius: 24px;
+	pointer-events: none;
+	transition: border-color 0.18s ease;
+}
+.ob-drop[data-over="true"] .ob-drop-outline {
+	border-color: var(--ob-accent);
+}
+
+.ob-boil {
+	filter: var(--ob-boil-filter, none);
+}
+.ob-ink {
+	fill: none;
+	stroke: var(--ob-ink);
+	stroke-width: 2.2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+.ob-ink.is-bold {
+	stroke-width: 3;
+}
+.ob-ink.is-soft {
+	stroke: var(--ob-ink-faint);
+}
+.ob-ink.is-track {
+	stroke: var(--ob-track-strong);
+}
+.ob-ink.is-accent {
+	stroke: var(--ob-accent);
+}
+.ob-ink.is-red {
+	stroke: var(--ob-red);
+}
+.ob-ink.is-green {
+	stroke: var(--ob-green);
+}
+.ob-ink.is-loom {
+	stroke: var(--ob-loom);
+}
+.ob-label {
+	fill: var(--ob-ink);
+	font-family: inherit;
+}
+.ob-label.is-soft {
+	fill: var(--ob-ink-soft);
+}
+.ob-label.is-faint {
+	fill: var(--ob-ink-faint);
+}
+.ob-label.is-on-ink {
+	fill: var(--ob-paper);
+}
+.ob-label.is-white {
+	fill: #fff;
+}
+
+.ob-draw {
+	stroke-dasharray: 1 2;
+	stroke-dashoffset: 1;
+	animation: ob-draw 0.9s ease var(--d, 0s) forwards;
+}
+.ob-bob {
+	animation: ob-bob 1.9s ease-in-out infinite;
+}
+.ob-rise {
+	animation: ob-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) both;
+}
+.ob-fade {
+	animation: ob-fade 0.4s ease var(--d, 0s) both;
+}
+.ob-pulse {
+	animation: ob-pulse 1.6s ease-in-out infinite;
+}
+.ob-march {
+	stroke-dasharray: 2 5;
+	animation: ob-march 1s linear infinite;
+}
+.ob-spin {
+	animation: ob-spin 0.9s linear infinite;
+	transform-origin: center;
+	transform-box: fill-box;
+}
+
+.ob-progress-mark {
+	fill: none;
+	stroke-width: 3;
+	stroke-linecap: round;
+	transition: stroke 0.3s ease;
+}
+.ob-progress-mark.is-done {
+	stroke: var(--ob-ink);
+}
+.ob-progress-mark.is-current {
+	stroke: var(--ob-accent);
+	stroke-dasharray: 1 2;
+	stroke-dashoffset: 1;
+	animation: ob-draw 0.7s ease 0.15s forwards;
+}
+.ob-progress-mark.is-next {
+	stroke: var(--ob-track-strong);
+	stroke-dasharray: 0.04 0.09;
+}
+
+.ob-squiggle-track {
+	fill: none;
+	stroke: var(--ob-track-strong);
+	stroke-width: 2.5;
+	stroke-linecap: round;
+	stroke-dasharray: 0.45 1.15;
+}
+.ob-squiggle-progress {
+	fill: none;
+	stroke: var(--ob-accent);
+	stroke-width: 3.2;
+	stroke-linecap: round;
+	stroke-dasharray: 100;
+	transition: stroke-dashoffset 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ob-squiggle-progress.is-waiting {
+	stroke: var(--ob-ink-faint);
+	stroke-dasharray: 2 4.2;
+	stroke-dashoffset: 0;
+	animation: ob-march 1.2s linear infinite;
+}
+
+.ob-step {
+	--ob-step-ring: var(--ob-ink-faint);
+	--ob-step-num: var(--ob-ink);
+	--ob-step-text: var(--ob-ink);
+	animation: ob-step-focus var(--loop) step-end infinite;
+	animation-delay: calc((var(--i) / 3 - 1) * var(--loop));
+}
+.ob-step-ring {
+	fill: none;
+	stroke: var(--ob-step-ring);
+	stroke-width: 2;
+	stroke-linecap: round;
+	transition: stroke 0.25s ease;
+}
+.ob-step-num {
+	color: var(--ob-step-num);
+	transition: color 0.25s ease;
+}
+.ob-step-text {
+	color: var(--ob-step-text);
+	transition: color 0.25s ease;
+}
+
+.ob-scene {
+	display: block;
+	width: 100%;
+	height: auto;
+	overflow: visible;
+}
+.ob-scene .ob-tf {
+	transform-box: fill-box;
+	transform-origin: center;
+}
+.ob-scene .ob-tf-left {
+	transform-box: fill-box;
+	transform-origin: left center;
+}
+.ob-scene .ob-tf-right {
+	transform-box: fill-box;
+	transform-origin: right center;
+}
+.ob-scene .ob-tf-bottom {
+	transform-box: fill-box;
+	transform-origin: center bottom;
+}
+
+.ob-cursor {
+	opacity: 0;
+	animation: var(--cursor) var(--loop) cubic-bezier(0.45, 0, 0.2, 1) infinite;
+}
+.ob-ripple {
+	opacity: 0;
+	transform-box: fill-box;
+	transform-origin: center;
+	animation: ob-ripple var(--loop) ease-out infinite;
+	animation-delay: calc((var(--at) - 1) * var(--loop));
+}
+.ob-press {
+	transform-box: fill-box;
+	transform-origin: center;
+	animation: ob-press var(--loop) ease infinite;
+	animation-delay: calc((var(--at) - 1) * var(--loop));
+}
+.ob-loop-spark {
+	opacity: 0;
+	fill: none;
+	stroke: var(--ob-accent);
+	stroke-width: 2.2;
+	stroke-linecap: round;
+	transform-box: fill-box;
+	transform-origin: center;
+	animation: ob-loop-spark var(--loop) ease infinite;
+	animation-delay: calc((var(--at) - 1) * var(--loop));
+}
+
+.ob-pv-progress {
+	transform: scaleX(0.42);
+	transform-origin: left center;
+	animation: ob-pv-progress 12s linear infinite;
+}
+.ob-pv-cursor {
+	transform: translate(198px, 104px);
+	animation: ob-pv-cursor 12s cubic-bezier(0.45, 0, 0.2, 1) infinite;
+}
+.ob-pv-circle {
+	stroke-dasharray: 1 2;
+	stroke-dashoffset: 0;
+	animation: ob-pv-circle 12s ease infinite;
+}
+.ob-pv-cam {
+	animation: ob-pv-cam 4.2s ease-in-out infinite;
+}
+
+.ob-loom-copy-label {
+	opacity: 0;
+	animation: ob-loom-copy var(--loop) linear infinite;
+}
+.ob-loom-copied-label {
+	animation: ob-loom-copied var(--loop) linear infinite;
+}
+.ob-loom-placeholder {
+	opacity: 0;
+	animation: ob-loom-placeholder var(--loop) linear infinite;
+}
+.ob-loom-typed-cover {
+	transform: scaleX(0);
+	animation: ob-loom-typed var(--loop) linear infinite;
+}
+.ob-loom-input-focus {
+	opacity: 0;
+	animation: ob-loom-focus var(--loop) linear infinite;
+}
+.ob-loom-flyer {
+	opacity: 0;
+	animation: ob-loom-fly var(--loop) cubic-bezier(0.45, 0, 0.25, 1) infinite;
+}
+.ob-loom-slot-fill {
+	animation: ob-loom-slot var(--loop) linear infinite;
+}
+.ob-loom-check {
+	stroke-dasharray: 1 2;
+	stroke-dashoffset: 0;
+	animation: ob-loom-check var(--loop) ease infinite;
+}
+
+.ob-rec-switch {
+	fill: var(--ob-accent);
+	animation: var(--switch) var(--loop) step-end infinite;
+}
+.ob-rec-knob {
+	transform: translateX(9px);
+	animation: var(--knob) var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+}
+.ob-rec-start {
+	animation: ob-rec-start var(--loop) linear infinite;
+}
+.ob-rec-stop {
+	opacity: 0;
+	animation: ob-rec-stop var(--loop) linear infinite;
+}
+.ob-rec-live {
+	opacity: 0;
+	animation: ob-rec-live var(--loop) linear infinite;
+}
+.ob-rec-time {
+	opacity: 0;
+	animation: ob-rec-time var(--loop) step-end infinite;
+	animation-delay: calc((var(--at) - 1) * var(--loop));
+}
+.ob-rec-time.is-last {
+	opacity: 1;
+	animation-name: ob-rec-time-last;
+}
+.ob-rec-cam {
+	animation: ob-rec-cam var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+}
+.ob-rec-bar {
+	transform-box: fill-box;
+	transform-origin: center;
+	animation: ob-rec-bar 0.9s ease-in-out infinite;
+	animation-delay: calc(var(--j) * -0.13s);
+}
+.ob-rec-link {
+	animation: ob-rec-link var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+}
+
+.ob-up-file {
+	opacity: 0;
+	animation: ob-up-file var(--loop) cubic-bezier(0.45, 0, 0.25, 1) infinite;
+}
+.ob-up-zone-hint {
+	opacity: 0;
+	animation: ob-up-hint var(--loop) linear infinite;
+}
+.ob-up-zone-hot {
+	opacity: 0;
+	animation:
+		ob-march-long 1.2s linear infinite,
+		ob-up-hot var(--loop) linear infinite;
+}
+.ob-up-progress-group {
+	opacity: 0;
+	animation: ob-up-progress-group var(--loop) linear infinite;
+}
+.ob-up-progress {
+	stroke-dasharray: 100;
+	stroke-dashoffset: 0;
+	animation: ob-up-progress var(--loop) linear infinite;
+}
+.ob-up-done {
+	animation: ob-up-done var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+}
+
+.ob-join-flap-closed {
+	opacity: 0;
+	animation: ob-join-flap-closed var(--loop) step-end infinite;
+}
+.ob-join-flap-open {
+	animation: ob-join-flap-open var(--loop) step-end infinite;
+}
+.ob-join-card {
+	animation: ob-join-card var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+}
+.ob-join-you {
+	animation: ob-join-you var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+}
+.ob-join-you-label {
+	animation: ob-join-you-label var(--loop) linear infinite;
+}
+.ob-join-thumb {
+	animation: ob-join-thumb var(--loop) cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
+	animation-delay: calc((var(--j) * 0.05 - 1) * var(--loop));
+}
+
+@keyframes ob-theme-in {
+	from {
+		opacity: 0;
+		transform: rotate(-40deg) scale(0.6);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+@keyframes ob-wave {
+	0%,
+	60%,
+	100% {
+		transform: rotate(0deg);
+	}
+	10% {
+		transform: rotate(16deg);
+	}
+	20% {
+		transform: rotate(-8deg);
+	}
+	30% {
+		transform: rotate(16deg);
+	}
+	40% {
+		transform: rotate(-4deg);
+	}
+	50% {
+		transform: rotate(10deg);
+	}
+}
+@keyframes ob-draw {
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+@keyframes ob-bob {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-4px);
+	}
+}
+@keyframes ob-rise {
+	from {
+		opacity: 0;
+		transform: translateY(12px);
+	}
+	to {
+		opacity: 1;
+		transform: none;
+	}
+}
+@keyframes ob-fade {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+@keyframes ob-pulse {
+	50% {
+		opacity: 0.35;
+	}
+}
+@keyframes ob-march {
+	to {
+		stroke-dashoffset: -7;
+	}
+}
+@keyframes ob-march-long {
+	to {
+		stroke-dashoffset: -16;
+	}
+}
+@keyframes ob-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+@keyframes ob-step-focus {
+	0% {
+		--ob-step-ring: var(--ob-accent);
+		--ob-step-num: var(--ob-accent);
+		--ob-step-text: var(--ob-ink);
+	}
+	33.333% {
+		--ob-step-ring: var(--ob-track-strong);
+		--ob-step-num: var(--ob-ink-soft);
+		--ob-step-text: var(--ob-ink-soft);
+	}
+}
+@keyframes ob-ripple {
+	0% {
+		opacity: 0.45;
+		transform: scale(0.4);
+	}
+	9%,
+	100% {
+		opacity: 0;
+		transform: scale(1.9);
+	}
+}
+@keyframes ob-press {
+	0% {
+		transform: scale(1);
+	}
+	2% {
+		transform: scale(0.9);
+	}
+	6%,
+	100% {
+		transform: scale(1);
+	}
+}
+@keyframes ob-loop-spark {
+	0% {
+		opacity: 0;
+		transform: scale(0.2);
+	}
+	3% {
+		opacity: 1;
+		transform: scale(1.2);
+	}
+	5% {
+		transform: scale(1);
+	}
+	8% {
+		opacity: 1;
+	}
+	10.5%,
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes ob-pv-progress {
+	from {
+		transform: scaleX(0.04);
+	}
+	to {
+		transform: scaleX(1);
+	}
+}
+@keyframes ob-pv-cursor {
+	0% {
+		opacity: 0;
+		transform: translate(70px, 150px);
+	}
+	6% {
+		opacity: 1;
+		transform: translate(76px, 140px);
+	}
+	24%,
+	84% {
+		opacity: 1;
+		transform: translate(198px, 104px);
+	}
+	92%,
+	100% {
+		opacity: 0;
+		transform: translate(240px, 146px);
+	}
+}
+@keyframes ob-pv-circle {
+	0%,
+	26% {
+		opacity: 1;
+		stroke-dashoffset: 1;
+	}
+	36%,
+	84% {
+		opacity: 1;
+		stroke-dashoffset: 0;
+	}
+	92%,
+	100% {
+		opacity: 0;
+		stroke-dashoffset: 0;
+	}
+}
+@keyframes ob-pv-cam {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-1.5px);
+	}
+}
+@keyframes ob-loom-cursor {
+	0% {
+		opacity: 0;
+		transform: translate(96px, 236px);
+	}
+	4% {
+		opacity: 1;
+	}
+	12%,
+	18% {
+		transform: translate(60px, 156px);
+	}
+	15% {
+		transform: translate(60px, 156px) scale(0.86);
+	}
+	40%,
+	46% {
+		transform: translate(262px, 71px);
+	}
+	43% {
+		transform: translate(262px, 71px) scale(0.86);
+	}
+	56%,
+	66% {
+		opacity: 1;
+		transform: translate(306px, 100px);
+	}
+	61% {
+		transform: translate(306px, 100px) scale(0.86);
+	}
+	76% {
+		opacity: 0;
+		transform: translate(334px, 196px);
+	}
+	100% {
+		opacity: 0;
+		transform: translate(96px, 236px);
+	}
+}
+@keyframes ob-loom-copy {
+	0%,
+	15% {
+		opacity: 1;
+	}
+	16%,
+	96% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes ob-loom-copied {
+	0%,
+	15% {
+		opacity: 0;
+	}
+	16%,
+	96% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes ob-loom-placeholder {
+	0%,
+	44% {
+		opacity: 1;
+	}
+	45%,
+	96% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes ob-loom-typed {
+	0%,
+	44% {
+		transform: scaleX(1);
+		animation-timing-function: steps(16, end);
+	}
+	54%,
+	96% {
+		transform: scaleX(0);
+	}
+	100% {
+		transform: scaleX(1);
+	}
+}
+@keyframes ob-loom-focus {
+	0%,
+	42% {
+		opacity: 0;
+	}
+	43%,
+	64% {
+		opacity: 1;
+	}
+	68%,
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes ob-loom-fly {
+	0%,
+	65% {
+		opacity: 0;
+		transform: translate(92px, 97px) scale(0.7);
+	}
+	67% {
+		opacity: 1;
+		transform: translate(92px, 97px) scale(1);
+	}
+	77% {
+		transform: translate(196px, 6px) scale(0.92) rotate(-6deg);
+	}
+	86% {
+		opacity: 1;
+		transform: translate(316px, 152px) scale(1);
+	}
+	88%,
+	100% {
+		opacity: 0;
+		transform: translate(316px, 152px) scale(1);
+	}
+}
+@keyframes ob-loom-slot {
+	0%,
+	85% {
+		opacity: 0;
+	}
+	86%,
+	96% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes ob-loom-check {
+	0%,
+	86% {
+		stroke-dashoffset: 1;
+	}
+	91%,
+	96% {
+		stroke-dashoffset: 0;
+	}
+	100% {
+		stroke-dashoffset: 1;
+	}
+}
+
+@keyframes ob-rec-cursor {
+	0% {
+		opacity: 0;
+		transform: translate(320px, 236px);
+	}
+	6% {
+		opacity: 1;
+	}
+	14%,
+	20% {
+		transform: translate(328px, 45px);
+	}
+	17% {
+		transform: translate(328px, 45px) scale(0.86);
+	}
+	24%,
+	27% {
+		transform: translate(328px, 81px);
+	}
+	25.5% {
+		transform: translate(328px, 81px) scale(0.86);
+	}
+	30%,
+	32% {
+		transform: translate(328px, 117px);
+	}
+	31% {
+		transform: translate(328px, 117px) scale(0.86);
+	}
+	36%,
+	40% {
+		transform: translate(293px, 161px);
+	}
+	38% {
+		transform: translate(293px, 161px) scale(0.86);
+	}
+	46%,
+	62% {
+		opacity: 1;
+		transform: translate(338px, 206px);
+	}
+	68%,
+	72% {
+		transform: translate(293px, 161px);
+	}
+	70% {
+		transform: translate(293px, 161px) scale(0.86);
+	}
+	82%,
+	88% {
+		opacity: 1;
+		transform: translate(170px, 101px);
+	}
+	86% {
+		transform: translate(170px, 101px) scale(0.86);
+	}
+	94% {
+		opacity: 0;
+		transform: translate(196px, 150px);
+	}
+	100% {
+		opacity: 0;
+		transform: translate(320px, 236px);
+	}
+}
+@keyframes ob-rec-switch-1 {
+	0% {
+		fill: var(--ob-track-strong);
+	}
+	17% {
+		fill: var(--ob-accent);
+	}
+	97% {
+		fill: var(--ob-track-strong);
+	}
+}
+@keyframes ob-rec-knob-1 {
+	0%,
+	17% {
+		transform: translateX(0);
+	}
+	20%,
+	96% {
+		transform: translateX(9px);
+	}
+	99%,
+	100% {
+		transform: translateX(0);
+	}
+}
+@keyframes ob-rec-switch-2 {
+	0% {
+		fill: var(--ob-track-strong);
+	}
+	25.5% {
+		fill: var(--ob-accent);
+	}
+	97% {
+		fill: var(--ob-track-strong);
+	}
+}
+@keyframes ob-rec-knob-2 {
+	0%,
+	25.5% {
+		transform: translateX(0);
+	}
+	28.5%,
+	96% {
+		transform: translateX(9px);
+	}
+	99%,
+	100% {
+		transform: translateX(0);
+	}
+}
+@keyframes ob-rec-switch-3 {
+	0% {
+		fill: var(--ob-track-strong);
+	}
+	31% {
+		fill: var(--ob-accent);
+	}
+	97% {
+		fill: var(--ob-track-strong);
+	}
+}
+@keyframes ob-rec-knob-3 {
+	0%,
+	31% {
+		transform: translateX(0);
+	}
+	34%,
+	96% {
+		transform: translateX(9px);
+	}
+	99%,
+	100% {
+		transform: translateX(0);
+	}
+}
+@keyframes ob-rec-start {
+	0%,
+	38% {
+		opacity: 1;
+	}
+	39%,
+	70% {
+		opacity: 0;
+	}
+	71%,
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes ob-rec-stop {
+	0%,
+	38% {
+		opacity: 0;
+	}
+	39%,
+	70% {
+		opacity: 1;
+	}
+	71%,
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes ob-rec-live {
+	0%,
+	38% {
+		opacity: 0;
+	}
+	40%,
+	70% {
+		opacity: 1;
+	}
+	72%,
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes ob-rec-time {
+	0% {
+		opacity: 1;
+	}
+	8% {
+		opacity: 0;
+	}
+}
+@keyframes ob-rec-time-last {
+	0% {
+		opacity: 1;
+	}
+	15% {
+		opacity: 0;
+	}
+}
+@keyframes ob-rec-cam {
+	0%,
+	38% {
+		opacity: 0;
+		transform: scale(0.4);
+	}
+	44%,
+	96% {
+		opacity: 1;
+		transform: scale(1);
+	}
+	100% {
+		opacity: 0;
+		transform: scale(0.4);
+	}
+}
+@keyframes ob-rec-bar {
+	0%,
+	100% {
+		transform: scaleY(0.35);
+	}
+	50% {
+		transform: scaleY(1);
+	}
+}
+@keyframes ob-rec-link {
+	0%,
+	71% {
+		opacity: 0;
+		transform: translateY(10px) scale(0.92);
+	}
+	76%,
+	96% {
+		opacity: 1;
+		transform: none;
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(10px) scale(0.92);
+	}
+}
+
+@keyframes ob-up-cursor {
+	0% {
+		opacity: 0;
+		transform: translate(40px, 236px);
+	}
+	5% {
+		opacity: 1;
+		transform: translate(66px, 108px);
+	}
+	8% {
+		transform: translate(66px, 108px) scale(0.86);
+	}
+	30% {
+		transform: translate(252px, 120px) scale(0.86);
+	}
+	33% {
+		opacity: 1;
+		transform: translate(252px, 120px);
+	}
+	44%,
+	100% {
+		opacity: 0;
+		transform: translate(300px, 210px);
+	}
+}
+@keyframes ob-up-file {
+	0%,
+	2% {
+		opacity: 0;
+		transform: translate(56px, 112px) scale(0.85);
+	}
+	5%,
+	8% {
+		opacity: 1;
+		transform: translate(56px, 92px);
+	}
+	30% {
+		opacity: 1;
+		transform: translate(242px, 104px) rotate(-5deg);
+	}
+	36% {
+		opacity: 0;
+		transform: translate(242px, 112px) scale(0.5);
+	}
+	100% {
+		opacity: 0;
+		transform: translate(56px, 112px) scale(0.85);
+	}
+}
+@keyframes ob-up-hint {
+	0%,
+	30% {
+		opacity: 1;
+	}
+	33%,
+	97% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes ob-up-hot {
+	0%,
+	17% {
+		opacity: 0;
+	}
+	20%,
+	34% {
+		opacity: 1;
+	}
+	38%,
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes ob-up-progress-group {
+	0%,
+	34% {
+		opacity: 0;
+	}
+	36%,
+	66% {
+		opacity: 1;
+	}
+	69%,
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes ob-up-progress {
+	0%,
+	36% {
+		stroke-dashoffset: 100;
+	}
+	62%,
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+@keyframes ob-up-done {
+	0%,
+	67% {
+		opacity: 0;
+		transform: translateY(10px) scale(0.92);
+	}
+	72%,
+	96% {
+		opacity: 1;
+		transform: none;
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(10px) scale(0.92);
+	}
+}
+
+@keyframes ob-join-cursor {
+	0% {
+		opacity: 0;
+		transform: translate(160px, 236px);
+	}
+	8% {
+		opacity: 0;
+	}
+	16% {
+		opacity: 1;
+	}
+	24%,
+	30% {
+		transform: translate(112px, 88px);
+	}
+	27% {
+		transform: translate(112px, 88px) scale(0.86);
+	}
+	40% {
+		opacity: 0;
+		transform: translate(200px, 170px);
+	}
+	100% {
+		opacity: 0;
+		transform: translate(160px, 236px);
+	}
+}
+@keyframes ob-join-flap-closed {
+	0% {
+		opacity: 1;
+	}
+	6% {
+		opacity: 0;
+	}
+	97% {
+		opacity: 1;
+	}
+}
+@keyframes ob-join-flap-open {
+	0% {
+		opacity: 0;
+	}
+	6% {
+		opacity: 1;
+	}
+	97% {
+		opacity: 0;
+	}
+}
+@keyframes ob-join-card {
+	0%,
+	6% {
+		opacity: 0;
+		transform: translateY(70px);
+	}
+	9% {
+		opacity: 1;
+	}
+	18%,
+	96% {
+		opacity: 1;
+		transform: none;
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(70px);
+	}
+}
+@keyframes ob-join-you {
+	0%,
+	36% {
+		opacity: 0;
+		transform: translateY(-30px) scale(0.6);
+	}
+	42% {
+		opacity: 1;
+		transform: translateY(3px) scale(1.06);
+	}
+	46%,
+	96% {
+		opacity: 1;
+		transform: none;
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(-30px) scale(0.6);
+	}
+}
+@keyframes ob-join-you-label {
+	0%,
+	44% {
+		opacity: 0;
+	}
+	48%,
+	96% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes ob-join-thumb {
+	0%,
+	66% {
+		opacity: 0;
+		transform: translateY(8px) scale(0.9);
+	}
+	72%,
+	96% {
+		opacity: 1;
+		transform: none;
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(8px) scale(0.9);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ob-boil {
+		filter: none;
+	}
+	.ob-draw,
+	.ob-rise,
+	.ob-fade,
+	.ob-progress-mark.is-current {
+		animation-duration: 0.01ms;
+		animation-delay: 0s;
+	}
+	.ob-bob,
+	.ob-pulse,
+	.ob-march,
+	.ob-step,
+	.ob-cursor,
+	.ob-ripple,
+	.ob-press,
+	.ob-loop-spark,
+	.ob-squiggle-progress.is-waiting,
+	.ob-doodle-hover,
+	.ob-choice:hover .ob-doodle-hover,
+	.ob-wave,
+	.ob-greeting:hover .ob-wave,
+	.ob-pv-progress,
+	.ob-pv-cursor,
+	.ob-pv-circle,
+	.ob-pv-cam,
+	.ob-theme-icon,
+	.ob-scene * {
+		animation: none;
+	}
+	.cap-ob,
+	.ob-cta,
+	.ob-choice,
+	.ob-choice .ob-choice-arrow,
+	.ob-cta .ob-cta-arrow {
+		transition: none;
+	}
+}
diff --git a/apps/web/app/(org)/onboarding/page.tsx b/apps/web/app/(org)/onboarding/page.tsx
index da18f52f120..84d37bb2fc1 100644
--- a/apps/web/app/(org)/onboarding/page.tsx
+++ b/apps/web/app/(org)/onboarding/page.tsx
@@ -1,5 +1,19 @@
+import { getCurrentUser } from "@cap/database/auth/session";
+import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import {
+	hasOnboardingName,
+	ONBOARDING_NEXT_COOKIE,
+	onboardingHrefForIntent,
+	onboardingIntentFromNextPath,
+	onboardingStepHref,
+} from "./onboarding-flow";
 
-export default function Onboarding() {
-	return redirect("/onboarding/welcome");
+export default async function Onboarding() {
+	const user = await getCurrentUser();
+	if (!user) redirect("/login");
+	if (!hasOnboardingName(user)) redirect(onboardingStepHref("welcome"));
+
+	const nextPath = (await cookies()).get(ONBOARDING_NEXT_COOKIE)?.value;
+	redirect(onboardingHrefForIntent(onboardingIntentFromNextPath(nextPath)));
 }
diff --git a/apps/web/app/api/settings/billing/subscribe/route.ts b/apps/web/app/api/settings/billing/subscribe/route.ts
index 397662e77a2..a75bb863292 100644
--- a/apps/web/app/api/settings/billing/subscribe/route.ts
+++ b/apps/web/app/api/settings/billing/subscribe/route.ts
@@ -6,12 +6,14 @@ import { stripe, userIsPro } from "@cap/utils";
 import { eq } from "drizzle-orm";
 import type { NextRequest } from "next/server";
 import type Stripe from "stripe";
+import { resolveCheckoutReturnUrls } from "@/lib/checkout-return";
 import { trackServerEvent } from "@/lib/server-analytics";
 
 export async function POST(request: NextRequest) {
 	const user = await getCurrentUser();
 	let customerId = user?.stripeCustomerId;
-	const { priceId, quantity, isOnBoarding } = await request.json();
+	const { priceId, quantity, isOnBoarding, returnPath } = await request.json();
+	const returnUrls = resolveCheckoutReturnUrls(serverEnv().WEB_URL, returnPath);
 
 	if (!priceId) {
 		console.error("Price ID not found");
@@ -67,12 +69,16 @@ export async function POST(request: NextRequest) {
 			customer: customerId as string,
 			line_items: [{ price: priceId, quantity: quantity }],
 			mode: "subscription",
-			success_url: isOnBoarding
-				? `${serverEnv().WEB_URL}/dashboard/settings/organization?upgrade=true&session_id={CHECKOUT_SESSION_ID}`
-				: `${serverEnv().WEB_URL}/dashboard/caps?upgrade=true&session_id={CHECKOUT_SESSION_ID}`,
-			cancel_url: isOnBoarding
-				? `${serverEnv().WEB_URL}/onboarding`
-				: `${serverEnv().WEB_URL}/pricing`,
+			success_url:
+				returnUrls?.successUrl ??
+				(isOnBoarding
+					? `${serverEnv().WEB_URL}/dashboard/settings/organization?upgrade=true&session_id={CHECKOUT_SESSION_ID}`
+					: `${serverEnv().WEB_URL}/dashboard/caps?upgrade=true&session_id={CHECKOUT_SESSION_ID}`),
+			cancel_url:
+				returnUrls?.cancelUrl ??
+				(isOnBoarding
+					? `${serverEnv().WEB_URL}/onboarding`
+					: `${serverEnv().WEB_URL}/pricing`),
 			allow_promotion_codes: true,
 			metadata: {
 				platform: "web",
diff --git a/apps/web/components/UpgradeModal.tsx b/apps/web/components/UpgradeModal.tsx
index ee2bd980190..10a54a6a9a6 100644
--- a/apps/web/components/UpgradeModal.tsx
+++ b/apps/web/components/UpgradeModal.tsx
@@ -37,6 +37,7 @@ interface UpgradeModalProps {
 	onOpenChange: (open: boolean) => void;
 	onCheckout?: () => Promise<void>;
 	dismissible?: boolean;
+	returnPath?: string;
 }
 
 const modalVariants = {
@@ -151,6 +152,7 @@ const UpgradeModalImpl = ({
 	onCheckout,
 	onboarding,
 	dismissible = true,
+	returnPath,
 }: UpgradeModalProps) => {
 	const stripeCtx = useStripeContext();
 	const { currency } = useCurrency();
@@ -176,6 +178,7 @@ const UpgradeModalImpl = ({
 					priceId: planId,
 					quantity: proQuantity,
 					isOnBoarding: onboarding,
+					returnPath,
 				}),
 			});
 			const data = await response.json();
diff --git a/apps/web/lib/checkout-return.ts b/apps/web/lib/checkout-return.ts
new file mode 100644
index 00000000000..bcd25662c3b
--- /dev/null
+++ b/apps/web/lib/checkout-return.ts
@@ -0,0 +1,22 @@
+import { getSafeNextPath } from "@/app/(org)/safe-next";
+
+const CHECKOUT_SESSION_PLACEHOLDER = "{CHECKOUT_SESSION_ID}";
+
+export const resolveCheckoutReturnUrls = (
+	webUrl: string,
+	returnPath: unknown,
+) => {
+	if (typeof returnPath !== "string" || returnPath.length === 0) return null;
+
+	const base = webUrl.replace(/\/+$/, "");
+	const path = getSafeNextPath(returnPath, base);
+	const hashIndex = path.indexOf("#");
+	const pathWithoutHash = hashIndex === -1 ? path : path.slice(0, hashIndex);
+	const hash = hashIndex === -1 ? "" : path.slice(hashIndex);
+	const separator = pathWithoutHash.includes("?") ? "&" : "?";
+
+	return {
+		successUrl: `${base}${pathWithoutHash}${separator}upgrade=true&session_id=${CHECKOUT_SESSION_PLACEHOLDER}${hash}`,
+		cancelUrl: `${base}${path}`,
+	};
+};
diff --git a/packages/database/auth/drizzle-adapter.ts b/packages/database/auth/drizzle-adapter.ts
index 810b6b75e34..1ab571610f5 100644
--- a/packages/database/auth/drizzle-adapter.ts
+++ b/packages/database/auth/drizzle-adapter.ts
@@ -143,6 +143,7 @@ export function DrizzleAdapter(
 					activeOrganizationId: Organisation.OrganisationId.make(""),
 					marketingOrigin:
 						pendingInvite || ssoIdentity ? "teammate" : "independent",
+					onboardingSteps: ssoIdentity ? null : { getStarted: false },
 				});
 				if (ssoIdentity) {
 					await insertUser.onDuplicateKeyUpdate({
diff --git a/packages/database/schema.ts b/packages/database/schema.ts
index 8c19b1fd20f..33087732949 100644
--- a/packages/database/schema.ts
+++ b/packages/database/schema.ts
@@ -126,6 +126,7 @@ export const users = mysqlTable(
 			customDomain?: boolean;
 			inviteTeam?: boolean;
 			download?: boolean;
+			getStarted?: boolean;
 		}>(),
 		onboarding_completed_at: timestamp("onboarding_completed_at"),
 		customBucket: nanoIdNullable("customBucket"),
diff --git a/packages/web-backend/src/Users/UsersOnboarding.ts b/packages/web-backend/src/Users/UsersOnboarding.ts
index 9e0402ab325..6e4341745c6 100644
--- a/packages/web-backend/src/Users/UsersOnboarding.ts
+++ b/packages/web-backend/src/Users/UsersOnboarding.ts
@@ -1,6 +1,6 @@
 import { nanoId } from "@cap/database/helpers";
 import * as Db from "@cap/database/schema";
-import { CurrentUser, Organisation } from "@cap/web-domain";
+import { CurrentUser, Organisation, type User } from "@cap/web-domain";
 import * as Dz from "drizzle-orm";
 import { Effect, Option } from "effect";
 
@@ -269,6 +269,91 @@ export class UsersOnboarding extends Effect.Service<UsersOnboarding>()(
 							.where(Dz.eq(Db.users.id, currentUser.id)),
 					);
 				}),
+				getStarted: Effect.fn("Onboarding.getStarted")(function* (data: {
+					path: User.OnboardingStartPath;
+				}) {
+					const currentUser = yield* CurrentUser;
+					yield* Effect.annotateCurrentSpan("onboarding.path", data.path);
+
+					yield* db.use((db) =>
+						db.transaction(async (tx) => {
+							const [user] = await tx
+								.select()
+								.from(Db.users)
+								.where(Dz.eq(Db.users.id, currentUser.id))
+								.for("update");
+							if (!user) return;
+
+							const firstName = user.name?.trim() ?? "";
+							const preferredOrganizationId =
+								user.activeOrganizationId || user.defaultOrgId;
+							const [existingOrg] = preferredOrganizationId
+								? await tx
+										.select({
+											id: Db.organizations.id,
+											tombstoneAt: Db.organizations.tombstoneAt,
+										})
+										.from(Db.organizations)
+										.where(Dz.eq(Db.organizations.id, preferredOrganizationId))
+								: [];
+
+							let createdOrganizationId: Organisation.OrganisationId | null =
+								null;
+							if (!existingOrg || existingOrg.tombstoneAt) {
+								createdOrganizationId = Organisation.OrganisationId.make(
+									nanoId(),
+								);
+								await tx.insert(Db.organizations).values({
+									id: createdOrganizationId,
+									ownerId: currentUser.id,
+									name: firstName
+										? `${firstName}'s Organization`
+										: "My Organization",
+								});
+								await tx.insert(Db.organizationMembers).values({
+									id: nanoId(),
+									organizationId: createdOrganizationId,
+									userId: currentUser.id,
+									role: "owner",
+								});
+							} else if (firstName.length > 0) {
+								await tx
+									.update(Db.organizations)
+									.set({ name: `${firstName}'s Organization` })
+									.where(
+										Dz.and(
+											Dz.eq(Db.organizations.id, existingOrg.id),
+											Dz.eq(Db.organizations.ownerId, currentUser.id),
+											Dz.isNull(Db.organizations.tombstoneAt),
+											Dz.eq(Db.organizations.name, "My Organization"),
+										),
+									);
+							}
+
+							await tx
+								.update(Db.users)
+								.set({
+									...(createdOrganizationId && {
+										activeOrganizationId: createdOrganizationId,
+										defaultOrgId: createdOrganizationId,
+									}),
+									onboarding_completed_at:
+										user.onboarding_completed_at ?? new Date(),
+									onboardingSteps: {
+										...user.onboardingSteps,
+										...(firstName.length > 0 && { welcome: true }),
+										organizationSetup: true,
+										customDomain: true,
+										inviteTeam: true,
+										download: true,
+										getStarted: true,
+									},
+								})
+								.where(Dz.eq(Db.users.id, currentUser.id));
+						}),
+					);
+				}),
+
 				skipToDashboard: Effect.fn("Onboarding.skipToDashboard")(function* () {
 					const currentUser = yield* CurrentUser;
 
@@ -297,6 +382,7 @@ export class UsersOnboarding extends Effect.Service<UsersOnboarding>()(
 										customDomain: true,
 										inviteTeam: true,
 										download: true,
+										getStarted: true,
 									},
 								})
 								.where(Dz.eq(Db.users.id, currentUser.id));
diff --git a/packages/web-backend/src/Users/UsersRpcs.ts b/packages/web-backend/src/Users/UsersRpcs.ts
index 1e0291d551e..1424ce44aae 100644
--- a/packages/web-backend/src/Users/UsersRpcs.ts
+++ b/packages/web-backend/src/Users/UsersRpcs.ts
@@ -35,6 +35,9 @@ export const UsersRpcsLive = User.UserRpcs.toLayer(
 						case "skipToDashboard":
 							yield* onboarding.skipToDashboard();
 							return { step: "skipToDashboard" as const, data: undefined };
+						case "getStarted":
+							yield* onboarding.getStarted(payload.data);
+							return { step: "getStarted" as const, data: undefined };
 					}
 				}).pipe(
 					Effect.catchTag("DatabaseError", () =>
diff --git a/packages/web-domain/src/User.ts b/packages/web-domain/src/User.ts
index d11d3a2e72d..26fa6e78c91 100644
--- a/packages/web-domain/src/User.ts
+++ b/packages/web-domain/src/User.ts
@@ -16,6 +16,14 @@ export const UserUpdate = Schema.Struct({
 });
 export type UserUpdate = Schema.Schema.Type<typeof UserUpdate>;
 
+export const OnboardingStartPath = Schema.Literal(
+	"loom",
+	"record",
+	"upload",
+	"explore",
+);
+export type OnboardingStartPath = typeof OnboardingStartPath.Type;
+
 export const OnboardingStepPayload = Schema.Union(
 	Schema.Struct({
 		step: Schema.Literal("welcome"),
@@ -49,6 +57,12 @@ export const OnboardingStepPayload = Schema.Union(
 		step: Schema.Literal("skipToDashboard"),
 		data: Schema.Void,
 	}),
+	Schema.Struct({
+		step: Schema.Literal("getStarted"),
+		data: Schema.Struct({
+			path: OnboardingStartPath,
+		}),
+	}),
 );
 
 export const OnboardingStepResult = Schema.Union(
@@ -74,6 +88,10 @@ export const OnboardingStepResult = Schema.Union(
 		step: Schema.Literal("skipToDashboard"),
 		data: Schema.Void,
 	}),
+	Schema.Struct({
+		step: Schema.Literal("getStarted"),
+		data: Schema.Void,
+	}),
 );
 
 export class UserRpcs extends RpcGroup.make(